bibliothèque___style_reference:
  info: "> Black-cube gallery under spotlight — a single illuminated plate in a vast dark room."

  theme: "dark"

  info: "Bibliothèque operates as a black-cube gallery aesthetic: the entire interface is a dark void (#000000) where only white hairline type and centered photographic plates exist. The only brand mark is a small white serif 'B.' tucked in the top-left corner. Components feel like museum vitrines — thin white rules, generous negative space, no fills, no shadows, no gradients, and no chromatic accent of any kind. Typography is a single weight (400) of a custom neo-grotesque at an extreme binary scale: 12–18px functional text against an isolated 80px display. The visual system is fundamentally about restraint and curation — every UI element should feel like it could be removed and the page would not lose meaning."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Page canvas, card surfaces, footer — the universal background. Cards do not lift from the canvas; they are demarcated only by hairline white borders |"
    info: "| Gallery White | `#ffffff` | `--color-gallery-white` | Body text, headings, nav marks, hairline borders, link underlines, list dividers — the sole foreground. Used as 1px structural lines rather than fills |"

  tokens___typography:

    unica77_ll___the_entire_interface_speaks_in_a_single_weight_of_one_custom_neo_grotesque__weight_400_only___no_bold__no_light__no_italic__the_signature_is_the_binary_scale__12_18px_functional_metadata_against_an_isolated_80px_display__with_nothing_in_between__this_extreme_jump_is_the_hierarchy_____font_unica77_ll:
      - "**Substitute:** Inter (400) or Neue Haas Grotesk Display (40/45)"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 14px, 18px, 80px"
      - "**Line height:** 1.00 (display), 1.20 (body), 1.22 (body), 1.33 (body)"
      - "**Letter spacing:** normal across all sizes"
      - "**Role:** The entire interface speaks in a single weight of one custom neo-grotesque. Weight 400 only — no bold, no light, no italic. The signature is the binary scale: 12–18px functional metadata against an isolated 80px display, with nothing in between. This extreme jump is the hierarchy."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.33 | — | `--text-body-sm` |"
      info: "| body | 18px | 1.22 | — | `--text-body` |"
      info: "| display | 80px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 34 | 34px | `--spacing-34` |"
      info: "| 38 | 38px | `--spacing-38` |"
      info: "| 59 | 59px | `--spacing-59` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 162 | 162px | `--spacing-162` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 900px"
      - "**Section gap:** 30px"
      - "**Card padding:** 20px"
      - "**Element gap:** 5px"

  components:

    brand_mark:
      role: "Site identity anchor"

      info: "White 'B.' monogram in the top-left corner, set in Unica77 LL 400 at ~14px, color #ffffff on #000000. The only persistent UI element. No wordmark, no tagline."

    image_card:
      role: "Primary content unit — a single photograph in a vitrine"

      info: "Photographic content centered on the #000000 canvas with generous margin (~120px+ vertical). No card chrome, no border, no shadow. The image's edges are the only boundary."

    hairline_bordered_card:
      role: "Secondary content container for text or metadata"

      info: "Transparent interior on #000000 canvas, 1px solid #ffffff border, 0px border-radius, 20px padding. Functions as a drawn frame, not a lifted surface."

    list_item:
      role: "Sequenced content rows (catalog, index, archive)"

      info: "1px solid #ffffff bottom border, 0px border-radius, 4–5px vertical padding, 18px padding-left. Text in Unica77 LL 400 at 14–18px #ffffff. The border is the structure."

    text_link:
      role: "Inline navigation or reference"

      info: "Unica77 LL 400 14–18px #ffffff with 1px solid #ffffff border-bottom acting as an underline. No color change, no bold, no fill — the underline is the affordance."

    nav_bar:
      role: "Minimal site-level navigation"

      info: "Top-edge strip on #000000, 15–20px horizontal padding, white text at 14px. No background fill, no border, no sticky treatment visible. The brand mark sits alone to the left."

    input_field:
      role: "Search or form entry"

      info: "Transparent background on #000000, 1px solid #ffffff border, 0px radius, Unica77 LL 400 14px #ffffff text. No focus ring color shift — focus may intensify the border to 2px or remain static."

    footer:
      role: "Closing structural element"

      info: "Full-width #000000 band, white hairline 1px top border, Unica77 LL 400 12–14px #ffffff text. Matches the list-item and link language — border defines the edge."

    display_heading:
      role: "Section or page title"

      info: "Unica77 LL 400 80px #ffffff, line-height 1.0, letter-spacing normal. Sits alone in the void with ~30px+ margin. No decoration, no underline, no accent."

  do_s_and_don_ts:

    do:
      - "Use only #ffffff and #000000 — no chromatic accent exists in the system"
      - "Set all text in Unica77 LL weight 400 — never introduce bold, light, or italic"
      - "Use 1px solid #ffffff borders for all structural separation — cards, inputs, list items, footers"
      - "Maintain the binary type scale: 12–18px for functional text, 80px for display, nothing in between"
      - "Center primary content on the canvas with 120px+ vertical breathing room above and below"
      - "Use 0px border-radius everywhere — sharp corners are part of the gallery language"
      - "Let the image be the hero — surround it with negative space rather than UI chrome"

    don_t:
      - "Do not introduce any color beyond #ffffff and #000000"
      - "Do not use shadows, gradients, or glows — the canvas is flat and must stay flat"
      - "Do not add border-radius to cards, buttons, or images — corners stay sharp"
      - "Do not use font-weight above 400 or any typographic emphasis (bold, italic, uppercase tracking tricks)"
      - "Do not fill buttons or tags with color — the system has no filled components"
      - "Do not use intermediate type sizes (24, 32, 48, 64px) — jump directly from 18 to 80"
      - "Do not add hover color shifts, focus glows, or animated state changes — affordance comes from structure, not color"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Ink Black | `#000000` | Universal canvas — pages, cards, inputs, footer, nav all sit on this single level |"

  elevation:

    info: "Elevation is deliberately absent. Surfaces do not lift — they are defined by 1px white hairlines or by negative space alone. The design operates on a single plane: #000000. This is the flatest possible interface and the flatness IS the brand."

  imagery:

    info: "Imagery is the content itself — large, centered, uncropped photographs function as the primary page unit, treated like plates hung in a gallery wall. Images sit with sharp edges (no border-radius), surrounded by vast black margin. No overlays, no text on top of images, no image grids or thumbnails. The visual ratio is overwhelmingly text-dominant negative space with one or two image moments per page."

  layout:

    info: "Max-width ~900px centered on a full-bleed #000000 canvas. The hero is a single large image or a display heading at 80px, centered both axes, with 120px+ of vertical padding above and below. Content stacks vertically in a single column — no multi-column grids, no sidebars, no asymmetric compositions. Sections are separated by whitespace alone rather than dividers or alternating bands. Navigation is a minimal top bar with a single brand mark and no menu chrome. The rhythm is: void → content → void."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ffffff"
    - "background: #000000"
    - "border: 1px solid #ffffff"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "Create a centered image hero: #000000 canvas, a single photograph at max-width 900px, sharp 0px corners, 120px top and bottom padding. Below the image, a white 1px hairline divider, then 30px gap, then Unica77 LL 400 80px #ffffff display heading with line-height 1.0."

    - "Create a list/index page: #000000 canvas, max-width 900px centered. Each list item is Unica77 LL 400 18px #ffffff text with 5px padding-bottom and 4px padding-top, separated by 1px solid #ffffff bottom border. 30px gap between items."

    - "Create a text link: Unica77 LL 400 14px #ffffff with 1px solid #ffffff border-bottom. No fill, no color change on hover, no bold."

    - "Create an input field: transparent background on #000000, 1px solid #ffffff border, 0px radius, 20px horizontal padding, Unica77 LL 400 14px #ffffff placeholder and text. No visible focus ring color shift."

    - "Create a footer: full-width #000000, 1px solid #ffffff top border, 20px vertical padding, Unica77 LL 400 12px #ffffff text centered."

  similar_brands:

    - "**Are.na** — Same black-canvas minimalism with white hairline type and single-weight neo-grotesque — the interface recedes to let content lead"
    - "**David Zwirner online exhibitions** — Gallery-vitrine language: full-bleed black, one large centered image, white type, zero UI chrome"
    - "**It's Nice That** — Editorial restraint with monochrome palette and hairline structural rules framing content"
    - "**Document Journal** — Black-on-white / white-on-black flip with a single display weight and no chromatic accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #000000;
          --color-gallery-white: #ffffff;
        
          /* Typography — Font Families */
          --font-unica77-ll: 'Unica77 LL', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.33;
          --text-body: 18px;
          --leading-body: 1.22;
          --text-display: 80px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-26: 26px;
          --spacing-30: 30px;
          --spacing-34: 34px;
          --spacing-38: 38px;
          --spacing-59: 59px;
          --spacing-80: 80px;
          --spacing-162: 162px;
        
          /* Layout */
          --page-max-width: 900px;
          --section-gap: 30px;
          --card-padding: 20px;
          --element-gap: 5px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-ink-black: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #000000;
          --color-gallery-white: #ffffff;
        
          /* Typography */
          --font-unica77-ll: 'Unica77 LL', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.33;
          --text-body: 18px;
          --leading-body: 1.22;
          --text-display: 80px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-26: 26px;
          --spacing-30: 30px;
          --spacing-34: 34px;
          --spacing-38: 38px;
          --spacing-59: 59px;
          --spacing-80: 80px;
          --spacing-162: 162px;
        }