platform___style_reference:
  info: "> white cube gallery under spotlights"

  theme: "light"

  info: "PLATFORM is a monochromatic gallery vitrine: pure white canvas, pure black type, and a single typographic voice that lets the artworks carry all the color. The interface is editorial rather than commercial — generous negative space, hairline borders, and a compact 15px body size that keeps the catalog dense without feeling utilitarian. Every element is reduced to its essential geometric form: no shadows, no rounded corners, no decorative gradients. Visual weight comes from typography alone, with the display size of 72px and a restrained 1.00 line-height creating the slow, deliberate cadence of a printed exhibition catalog."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Page background, card surfaces, negative space |"
    info: "| Lamp Black | `#000000` | `--color-lamp-black` | Primary text, card and nav borders, link color — the only structural color in the system |"
    info: "| Ash Gray | `#dddddd` | `--color-ash-gray` | Hairline dividers, subtle surface separation |"
    info: "| Concrete Gray | `#cccccc` | `--color-concrete-gray` | Secondary borders, input outlines, disabled states |"
    info: "| Smoke Gray | `#b3b3b3` | `--color-smoke-gray` | Muted helper text, metadata captions, placeholder labels |"
    info: "| Graphite | `#808080` | `--color-graphite` | Secondary captions, timestamps, de-emphasized metadata |"
    info: "| Iron Gray | `#aaaaaa` | `--color-iron-gray` | Tertiary captions, breadcrumb separators, fine print |"

  tokens___typography:

    mediumllweb___all_text_across_the_site___ui__body__and_display__a_single_neo_grotesque_custom_face_from_production_type_carrying_every_typographic_role__weight_400_is_the_default_for_body_and_navigation__weight_500_is_reserved_for_artist_names__prices__and_emphasis_in_card_metadata__display_sizes_48_72px_use_the_same_400_weight_with_tight_line_height_1_00_1_15_to_create_the_measured__catalog_page_cadence_____font_mediumllweb:
      - "**Substitute:** Söhne, Inter, Neue Haas Grotesk"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 15px, 20px, 48px, 72px"
      - "**Line height:** 1.00, 1.15, 1.20"
      - "**Letter spacing:** 0.01em at 20px and below, 0.02em at 48px and above"
      - "**OpenType features:** `\"tnum\" on for price alignment in card metadata`"
      - "**Role:** All text across the site — UI, body, and display. A single neo-grotesque custom face from Production Type carrying every typographic role. Weight 400 is the default for body and navigation; weight 500 is reserved for artist names, prices, and emphasis in card metadata. Display sizes (48–72px) use the same 400 weight with tight line-height (1.00–1.15) to create the measured, catalog-page cadence."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | 0.01px | `--text-caption` |"
      info: "| body-sm | 15px | 1.2 | 0.01px | `--text-body-sm` |"
      info: "| subheading | 20px | 1.15 | 0.01px | `--text-subheading` |"
      info: "| heading | 48px | 1.15 | 0.02px | `--text-heading` |"
      info: "| display | 72px | 1 | 0.02px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 122 | 122px | `--spacing-122` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 72px"
      - "**Card padding:** 30px"
      - "**Element gap:** 10px"

  components:

    top_navigation_bar:
      role: "Primary site header"

      info: "Horizontal bar with flat 0px radius. Left: 'PLATFORM:' label in 12px MediumLLWeb 500 uppercase, followed by Shop / Objects / Artists links at 15px weight 400. Right: region selector (US), account icon, saved items, search. 1px solid #000000 bottom border separates nav from content. Padding: 6px vertical, 20–40px horizontal."

    hero_spotlight_banner:
      role: "Full-width editorial feature"

      info: "Full-bleed dark photographic image filling the viewport. Centered overlay text: 'SPOTLIGHT:' at 48px weight 400 followed by artist name at 72px weight 400, both #ffffff on the darkened photo. Subtext at 15px centered below, plus an '› Explore now' link. No buttons, no card chrome — pure type on image."

    section_header_band:
      role: "Zone introduction block"

      info: "Horizontal band with #dddddd background or hairline border. Left column: section title in 12px 500 uppercase tracking 0.02em. Center: descriptive paragraph at 15px weight 400. Right: '› Browse artworks' text link. 1px #000000 bottom border divides band from content grid."

    artwork_card:
      role: "Individual artwork listing"

      info: "Vertical card with 0px radius and no shadow. 1px #000000 border. Artwork image fills the card width with a 1:1 or 3:4 aspect ratio. Below image: artist name at 12px 500 uppercase centered, work title and year at 15px 400, medium description at 15px 400, and price at 12px 500 — all centered. A small star/save icon sits at the bottom. Card padding: ~20px below image."

    artwork_grid:
      role: "Catalog collection layout"

      info: "4-column grid on desktop, 2-column on tablet, 1-column on mobile. Equal-width columns with 20–30px gutters. Each card occupies one grid cell with consistent image-to-text ratio across the row."

    text_link:
      role: "Inline navigation and call-to-action"

      info: "Plain underlined #000000 text at 15px weight 400. Leading chevron '›' character for directional links like 'Explore now', 'Browse artworks', 'View all'. No button background, no color change on hover — underline thickens or weight shifts to 500."

    ghost_icon_button:
      role: "Utility actions in nav and cards"

      info: "Icon-only button with 0px radius, no background, no border. Uses #000000 stroke/fill for account, saved items, search, and save-to-collection icons. 4–6px padding around icon."

    body_text_block:
      role: "Editorial paragraphs and descriptions"

      info: "15px MediumLLWeb weight 400 at 1.20 line-height. #000000 color on #ffffff background. Max-width ~640px for readable measure. Used for feature descriptions, artist bios, and zone intros."

    metadata_caption:
      role: "Artist, title, year, medium, price"

      centered_stack_under_each_artwork: "artist name in 12px 500 uppercase, title and year in 15px 400, price in 12px 500. Tabular numerals enabled for price alignment. All #000000."

    footer:
      role: "Site footer with links and info"

      info: "Top 1px #000000 border, #ffffff background. Multi-column link list at 15px weight 400, grouped by category. Bottom row: copyright and legal links in 12px. Flat, no decoration."

    search_input:
      role: "Nav search field"

      info: "Transparent background, 1px #000000 bottom border only (no full box). Placeholder text at 15px in #b3b3b3. No border-radius. Search icon inline at right."

  do_s_and_don_ts:

    do:
      - "Use only #000000 for all text, borders, and interactive elements — never introduce chromatic colors for UI purposes"
      - "Set all border-radius to 0px on buttons, cards, inputs, badges, and tags — sharp corners are the signature"
      - "Set MediumLLWeb 400 as the default weight for all body and heading text; reserve 500 exclusively for labels, artist names, and prices"
      - "Use 1px #000000 borders for card outlines, nav separation, and section dividers — never thicker"
      - "Keep the type scale to five sizes: 12, 15, 20, 48, 72px — resist adding intermediate steps"
      - "Use tabular numerals (tnum) for all prices and numeric metadata to ensure column alignment in card grids"
      - "Maintain a max-width of ~1280px with generous side margins so the catalog breathes like a gallery wall"

    don_t:
      - "Do not add rounded corners to any element — the sharp-edge aesthetic is load-bearing for the gallery identity"
      - "Do not introduce shadows, glows, or blur effects — depth comes from borders and band color shifts only"
      - "Do not use color for hierarchy — rely solely on weight (400 vs 500) and size (12–72px)"
      - "Do not use gradient backgrounds, even subtle ones — the system is strictly binary black/white"
      - "Do not use 13–17px body sizes — the compact 15px at 1.20 line-height is the intentional rhythm"
      - "Do not center body copy inside cards beyond metadata — long-form text should be left-aligned with a ~640px measure"
      - "Do not add colored badges, tags, or status pills — labels are plain uppercase 12px 500 text only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Bone White | `#ffffff` | Base page canvas and card backgrounds |"
    info: "| 2 | Ash Gray | `#dddddd` | Subtle surface tint for zone bands and dividers |"

  elevation:

    info: "The design system deliberately avoids shadows. All depth and separation is achieved through 1px hairline borders in #000000 or #dddddd, plus background color shifts between white and light gray bands. There is no floating, no blurring, no z-axis — the interface reads as a flat printed page pinned to the wall."

  imagery:

    info: "Imagery is exclusively fine-art photography: paintings, sculptures, and mixed-media works presented as straight product crops on white. No lifestyle context, no staged room shots, no human models interacting with the art. Each artwork fills its card frame edge-to-edge, treated as a precious object isolated for inspection. The hero image is a full-bleed atmospheric photograph — dark, slightly blurred, with dramatic light — that functions as an editorial mood-setter rather than a product shot. No illustrations, no icons beyond minimal functional glyphs, no decorative graphics."

  layout:

    info: "Full-bleed hero section with centered overlay type, followed by a gray zone-band header introducing each content section, then a 4-column card grid of artworks. The page is contained within a ~1280px max-width for the card grid and text blocks, but the hero and section bands stretch edge-to-edge. Section rhythm is consistent: every zone opens with a hairline-bordered header band (gray bg, left-aligned label, centered description, right-aligned link), followed by the card grid. Navigation is a minimal top bar with no sticky behavior. No sidebars, no breadcrumbs within the main flow — the layout is strictly vertical: nav → hero → zone band → grid → zone band → grid → footer."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000"
    - "muted text: #b3b3b3"
    - "divider: #dddddd"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    - "*Artwork Card*: 0px radius, 1px solid #000000 border, no shadow. Artwork image fills card width edge-to-edge. Below: artist name centered at 12px MediumLLWeb weight 500 uppercase, title and year at 15px weight 400, medium at 15px weight 400, price at 12px weight 500. All text #000000 on #ffffff. 20px padding below image."

    - "*Hero Spotlight Banner*: Full-bleed dark photographic image, 100vh. Centered overlay: 'SPOTLIGHT:' at 48px MediumLLWeb 400 #ffffff, artist name at 72px weight 400 #ffffff, line-height 1.00, letter-spacing 0.02em. Below: 15px descriptive subtext #ffffff, then '› Explore now' text link."

    - "*Section Header Band*: #dddddd background, 1px solid #000000 bottom border. Left: section label at 12px weight 500 uppercase. Center: description at 15px weight 400. Right: '› Browse all' underlined text link at 15px weight 400. 20px vertical padding."

    - "*Artwork Grid*: 4 equal columns, 24px gap, max-width 1280px centered. Each cell is an Artwork Card. Grid sits directly below the Section Header Band with no additional spacing."

    - "*Top Navigation*: 0px radius, #ffffff background, 1px solid #000000 bottom border. Left: 'PLATFORM:' at 12px weight 500 uppercase. Nav links (Shop, Objects, Artists) at 15px weight 400 #000000. Right: region selector and icon buttons (account, saved, search) as 0px ghost buttons. 6px vertical padding."

  similar_brands:

    - "**David Zwirner** — Same monochrome gallery-catalogue approach with white canvas, black type, and artwork presented as unframed product crops in a dense grid"
    - "**Hauser & Wirth** — Editorial art-world aesthetic with hairline borders, zero shadows, sharp corners, and a single neo-grotesque typeface carrying all hierarchy"
    - "**The MoMA Store** — Minimalist art-retail layout with centered metadata stacks under each artwork, 1px black card borders, and no decorative chrome"
    - "**Pace Gallery** — Full-bleed dark hero photography, restrained black-and-white system, and compact body type that lets the catalog artwork dominate"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-bone-white: #ffffff;
          --color-lamp-black: #000000;
          --color-ash-gray: #dddddd;
          --color-concrete-gray: #cccccc;
          --color-smoke-gray: #b3b3b3;
          --color-graphite: #808080;
          --color-iron-gray: #aaaaaa;
        
          /* Typography — Font Families */
          --font-mediumllweb: 'MediumLLWeb', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.01px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: 0.01px;
          --text-subheading: 20px;
          --leading-subheading: 1.15;
          --tracking-subheading: 0.01px;
          --text-heading: 48px;
          --leading-heading: 1.15;
          --tracking-heading: 0.02px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: 0.02px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-13: 13px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-72: 72px;
          --spacing-122: 122px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 72px;
          --card-padding: 30px;
          --element-gap: 10px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-bone-white: #ffffff;
          --surface-ash-gray: #dddddd;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-bone-white: #ffffff;
          --color-lamp-black: #000000;
          --color-ash-gray: #dddddd;
          --color-concrete-gray: #cccccc;
          --color-smoke-gray: #b3b3b3;
          --color-graphite: #808080;
          --color-iron-gray: #aaaaaa;
        
          /* Typography */
          --font-mediumllweb: 'MediumLLWeb', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.01px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: 0.01px;
          --text-subheading: 20px;
          --leading-subheading: 1.15;
          --tracking-subheading: 0.01px;
          --text-heading: 48px;
          --leading-heading: 1.15;
          --tracking-heading: 0.02px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: 0.02px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-13: 13px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-72: 72px;
          --spacing-122: 122px;
        }