symbol_audio___style_reference:
  info: "> midcentury listening room after dusk"

  theme: "dark"

  info: "Symbol Audio is a dark forest-green gallery for handcrafted audio furniture — a velvet wall behind museum-label typography. The entire site is anchored in a single deep evergreen (#1c3c27) that functions simultaneously as canvas, brand, and action border, with cream-bone cards floating on it like exhibition placards. Two custom serifs (Chalet-LondonSixty, Chalet-NewYorkSixty) carry every word of product copy, nav, and body, paired with a sharp geometric sans (SupremeLL-Bold) that exclusively handles display moments and headings — the contrast between rounded serif warmth and cold geometric boldness IS the voice. A single bottom marquee runs continuously, and the hero commits to a display headline so massive it bleeds off both edges of the viewport."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Evergreen Gallery | `#1c3c27` | `--color-evergreen-gallery` | Green accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color |"
    info: "| Frost White | `#fffffd` | `--color-frost-white` | Product card surfaces, text on dark sections — slightly warm off-white, never pure #fff |"
    info: "| Pewter Mist | `#dfe2e5` | `--color-pewter-mist` | Hairline borders, card outlines, divider rules, ghost-button borders on light cards |"
    info: "| Onyx | `#000000` | `--color-onyx` | Primary text on light cards, icon strokes, high-contrast detail |"
    info: "| Bone | `#fffcda` | `--color-bone` | Alternate warm cream surface — contrast-pair companion to dark text on light cards |"
    info: "| Ink Shadow | `#0e1e14` | `--color-ink-shadow` | Deepest text on evergreen, near-black with green undertone — pairs with frost-white for AAA contrast |"
    info: "| Marquee Cobalt | `#447cf0` | `--color-marquee-cobalt` | Violet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |"
    info: "| Ember Lacquer | `#c72a00` | `--color-ember-lacquer` | Vivid red-orange seen in product photography (lacquered shelf units) — decorative, not functional |"

  tokens___typography:

    chalet_londonsixty___primary_body_and_ui_typeface___all_nav_links__product_names__prices__badge_text__footer_copy__button_labels__a_custom_rounded_serif_with_distinctive_ball_terminals__its_single_weight_is_used_universally____font_chalet_londonsixty:
      - "**Substitute:** Recoleta, Domaine Display, or GT Sectra at weight 400"
      - "**Weights:** 400"
      - "**Sizes:** 11px, 13px, 15px, 16px"
      - "**Line height:** 1.00–1.50"
      - "**Letter spacing:** normal"
      - "**Role:** Primary body and UI typeface — all nav links, product names, prices, badge text, footer copy, button labels. A custom rounded serif with distinctive ball terminals; its single weight is used universally"

    chalet_newyorksixty___secondary_serif_variant_for_body_and_link_micro_copy___visually_similar_to_londonsixty_but_used_in_narrower_contexts_small_body__secondary_links____font_chalet_newyorksixty:
      - "**Substitute:** Recoleta Regular or GT Sectra Regular"
      - "**Weights:** 400"
      - "**Sizes:** 11px, 13px, 15px"
      - "**Line height:** 1.00, 1.33"
      - "**Letter spacing:** normal"
      - "**Role:** Secondary serif variant for body and link micro-copy — visually similar to LondonSixty but used in narrower contexts (small body, secondary links)"

    supremell_bold___display_and_heading_typeface___exclusively_carries_section_headings__what_s_on__bestsellers__the_hero_wordmark__and_large_ui_moments__a_sharp_geometric_sans_that_cuts_against_the_serif_body_type__the_massive_80px_size_with__0_02em_tracking_is_the_signature_move____font_supremell_bold:
      - "**Substitute:** Inter Tight Bold, Söhne Breit Halbfett, or Neue Haas Grotesk Bold"
      - "**Weights:** 400"
      - "**Sizes:** 14px, 20px, 34px, 52px, 80px"
      - "**Line height:** 1.00–1.33"
      - "**Letter spacing:** -0.02em (tighter at larger sizes)"
      - "**Role:** Display and heading typeface — exclusively carries section headings (\"What's on: Bestsellers…\"), the hero wordmark, and large UI moments. A sharp geometric sans that cuts against the serif body type. The massive 80px size with -0.02em tracking is the signature move"

    supremell_boldflat___flat_cut_variant_of_the_display_sans_for_inline_link_emphasis_within_body_copy____font_supremell_boldflat:
      - "**Substitute:** Inter Tight Bold"
      - "**Weights:** 400"
      - "**Sizes:** 15px"
      - "**Line height:** 1.33"
      - "**Letter spacing:** normal"
      - "**Role:** Flat-cut variant of the display sans for inline link emphasis within body copy"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.33 | — | `--text-caption` |"
      info: "| body | 15px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.33 | — | `--text-subheading` |"
      info: "| heading-sm | 34px | 1.25 | -0.68px | `--text-heading-sm` |"
      info: "| heading | 52px | 1.13 | -1.04px | `--text-heading` |"
      info: "| display | 80px | 1 | -1.6px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 40px"
      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    top_navigation_bar:
      role: "Site-wide header"

      info: "Transparent over the evergreen canvas. Left-aligned wordmark \"Symbol\" in SupremeLL-Bold at ~14px. Center group of serif text links (Shop, Learn, Showroom, Contact) in Chalet-LondonSixty 15px, #dfe2e5. Right-aligned utility icons (Search, Cart with count) in same serif. No background fill, no border — the evergreen shows through."

    announcement_marquee:
      role: "Repeating bottom ticker"

      info: "Fixed to viewport bottom, full-width band on evergreen (#1c3c27). Continuously scrolling text: \"Our NYC Showroom is now open! Book an Appointment\" in Chalet-LondonSixty 13px, #dfe2e5. \"Book an Appointment\" rendered as an underlined link. No padding above/below — hugs viewport edge."

    hero_display_wordmark:
      role: "Brand statement above-the-fold"

      info: "The word \"Symbol\" set in SupremeLL-Bold at ~80px (display scale), white/frost, tracking -0.02em. Deliberately oversized to bleed off both left and right edges of the viewport — it is a graphic element, not a headline. Anchors the hero above the product photography."

    product_card:
      role: "Grid item for catalog"

      info: "Frost-white (#fffffd) rectangular surface, 0px border-radius (sharp corners), hairline #dfe2e5 border. 20px internal padding. Product photograph fills the upper portion against the white card. Product name in Chalet-LondonSixty 15px, #000000. Price in same font, prefixed \"from $\". No elevation/shadow — the card reads as a flat placard pinned to the dark wall."

    product_tag_badge:
      role: "Status indicator on product cards"

      info: "Pill-shaped (9999px radius), transparent fill, 1px #1c3c27 border, ~8px vertical padding. Text in Chalet-LondonSixty 11–13px, #1c3c27. Variants: \"Bestseller\", \"New Arrival\". Positioned top-left of product image. Sits on the frost card surface so the green border is clearly visible."

    section_heading:
      role: "Band title on evergreen"

      info: "Set in SupremeLL-Bold at 34–52px (heading-sm to heading scale), #dfe2e5 or frost-white, tracking -0.02em. Left-aligned, single-line where possible, trailing ellipsis (\"Bestsellers…\") is a signature punctuation choice. Sits directly on the evergreen canvas with no container."

    ghost_text_link:
      role: "Inline and standalone navigation"

      info: "Chalet-LondonSixty 15px, #dfe2e5 on dark sections or #000000 on light cards. No underline by default; underline appears on hover. No background, no border — pure typographic link."

    outlined_action_button:
      role: "Primary CTA on light surfaces"

      info: "Transparent fill, 1px #1c3c27 border, 9999px radius, 10–15px vertical padding, 20px horizontal padding. Label in Chalet-LondonSixty 13–15px, #1c3c27. Used for \"Book an Appointment\" and similar — never a filled solid button. On evergreen backgrounds this style would be invisible, so CTAs always live on frost or bone surfaces."

    hero_product_photograph:
      role: "Full-bleed editorial image"

      info: "Photographs sit centered on the evergreen canvas with no frame. Subject is always a real product (audio console with turntable, stereo receiver in walnut housing). No rounded corners, no shadow — the product is presented as a documentary artifact, not a UI card."

  do_s_and_don_ts:

    do:
      - "Use #1c3c27 as the page canvas for every section band — the entire site lives inside this single color, section transitions are invisible."
      - "Pair the Chalet serif for all body, nav, prices, and badges with SupremeLL-Bold for every heading — never mix roles."
      - "Set product card backgrounds to #fffffd (Frost White) with 0px radius and a hairline #dfe2e5 border — the card is a placard, not a tile."
      - "Use 9999px border-radius for every badge, tag, and pill button — sharp corners everywhere else."
      - "Anchor display headlines to the left edge and let them run large (52–80px) with -0.02em tracking in SupremeLL-Bold."
      - "Place the announcement marquee fixed to the bottom viewport edge with the evergreen fill — it never scrolls away."
      - "Use #000000 text on frost-white cards and #dfe2e5 text on evergreen — maintain the 16:1+ contrast ratio at all times."

    don_t:
      - "Do not introduce a filled solid-color button — this system only uses outlined/ghost actions on transparent fills."
      - "Do not use the blue (#447cf0) or red (#c72a00) as functional UI colors — they are decorative photography accents only."
      - "Do not apply border-radius to product cards or hero images — the system is sharp-edged everywhere except pills and badges."
      - "Do not set body text in SupremeLL-Bold — the sans is exclusively for display and headings."
      - "Do not add box-shadow or drop-shadow to cards or images — surfaces are flat, the contrast comes from color, not elevation."
      - "Do not use pure #ffffff for surfaces or text — the system runs #fffffd (frost) and #dfe2e5 (pewter) for its lightest tones."
      - "Do not break the marquee pattern — the announcement ticker is always present, always fixed, always evergreen-on-pewter."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Evergreen Canvas | `#1c3c27` | Full-page background — hero, section bands, nav, announcement bar all sit on this |"
    info: "| 1 | Frost Card | `#fffffd` | Product card surface — creates the gallery-placard effect against the dark canvas |"
    info: "| 2 | Bone Alternate | `#fffcda` | Warm cream variant for select card or section surfaces — never used at the same prominence as Frost |"

  imagery:

    info: "Full-bleed product photography on the dark canvas — audio consoles, turntables, and stereo receivers in walnut and mid-century wood housings, shot in warm interior light. Products are framed dead-center, never cropped to a device edge, and float on evergreen with no background container. Product card photography is tightly cropped against a clean white field (the card itself is the background). No lifestyle imagery, no human subjects, no abstract graphics — every photograph is a documentary portrait of a product. The red and blue chromatic colors appear exclusively inside product photos (lacquered shelf units, control panel displays) and never as UI paint."

  layout:

    info: "Full-bleed evergreen canvas with no page-max-width container — sections stack vertically as continuous bands. The hero is a full-viewport evergreen wall with a massive left-bleeding wordmark above a centered product photograph. Below the fold, section headings (\"What's on: Bestsellers…\", \"Staff Picks: Living Room Favorites…\") sit left-aligned on the dark canvas, followed by a 2- or 3-column product card grid on frost-white cards. The grid columns are generous (cards are wide, not narrow) and cards have no gutters between them — they tile edge-to-edge. The announcement marquee is fixed to the bottom of the viewport at all times. Navigation is a single minimal top bar with no dropdowns visible. The overall rhythm is gallery-like: dark wall → heading → row of placards → dark wall."

  agent_prompt_guide:

    quick_color_reference:
    - "text (on light): #000000"
    - "text (on dark): #dfe2e5"
    - "background: #1c3c27 (evergreen canvas)"
    - "card surface: #fffffd (frost white)"
    - "border: #dfe2e5 (hairline pewter)"
    - "accent: #1c3c27 (same as canvas, used for outlined action border on light cards)"
    - "primary action: #1c3c27 (outlined action border)"

    3_5_example_component_prompts:

    - "**Product Card**: Frost-white (#fffffd) rectangular surface, 0px border-radius, 1px #dfe2e5 hairline border, 20px padding. Product name in Chalet-LondonSixty 15px #000000. Price line \"from $3,650\" in same font. No shadow. Top-left pill badge: 9999px radius, transparent fill, 1px #1c3c27 border, label \"New Arrival\" in Chalet-LondonSixty 11px #1c3c27."

    - "**Hero Display Wordmark**: The word \"Symbol\" in SupremeLL-Bold 80px, color #dfe2e5, letter-spacing -0.02em, set so it bleeds off both the left and right edges of the viewport. No container, sits directly on the evergreen canvas."

    - "**Section Heading**: \"What's on: Bestsellers…\" in SupremeLL-Bold 52px #dfe2e5, letter-spacing -0.02em, left-aligned on the evergreen (#1c3c27) canvas. No underline, no decorative element, trailing ellipsis is part of the signature."

    - "**Ghost Outlined Action Button**: Transparent fill, 1px solid #1c3c27 border, 9999px border-radius, 10px vertical padding, 20px horizontal padding. Label \"Book an Appointment\" in Chalet-LondonSixty 15px #1c3c27. Sits on a frost-white (#fffffd) surface."

    - "**Announcement Marquee**: Fixed to viewport bottom, full-width band, background #1c3c27, no vertical padding. Continuously scrolling text in Chalet-LondonSixty 13px #dfe2e5 reading \"Our NYC Showroom is now open! Book an Appointment\" with \"Book an Appointment\" rendered as an underlined inline link."

  similar_brands:

    - "**Aesop** — Same single-color canvas discipline (deep brand wash across all sections) with stark serif/sans typographic contrast and minimal UI chrome"
    - "**Muji** — Restrained product-as-art photography floating on a solid color field, sharp-edged card grids, no decorative gradients or shadows"
    - "**Sonos** — Audio brand that treats hardware as gallery objects — large display headlines, dark immersive canvas, documentary product photography"
    - "**Bowers & Wilkins** — Premium audio/furniture brand using full-bleed dark hero sections with oversized typography and white product card grids"
    - "**Fellow (fellowproducts.com)** — Minimalist product commerce with a single dominant brand color, hairline-bordered cards, and custom serif body type paired with a geometric sans for display"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-evergreen-gallery: #1c3c27;
          --color-frost-white: #fffffd;
          --color-pewter-mist: #dfe2e5;
          --color-onyx: #000000;
          --color-bone: #fffcda;
          --color-ink-shadow: #0e1e14;
          --color-marquee-cobalt: #447cf0;
          --color-ember-lacquer: #c72a00;
        
          /* Typography — Font Families */
          --font-chalet-londonsixty: 'Chalet-LondonSixty', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-chalet-newyorksixty: 'Chalet-NewYorkSixty', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-supremell-bold: 'SupremeLL-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-supremell-boldflat: 'SupremeLL-BoldFlat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.33;
          --text-body: 15px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --text-heading-sm: 34px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.68px;
          --text-heading: 52px;
          --leading-heading: 1.13;
          --tracking-heading: -1.04px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -1.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-100: 100px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 40px;
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 0px;
          --radius-badges: 9999px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-evergreen-canvas: #1c3c27;
          --surface-frost-card: #fffffd;
          --surface-bone-alternate: #fffcda;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-evergreen-gallery: #1c3c27;
          --color-frost-white: #fffffd;
          --color-pewter-mist: #dfe2e5;
          --color-onyx: #000000;
          --color-bone: #fffcda;
          --color-ink-shadow: #0e1e14;
          --color-marquee-cobalt: #447cf0;
          --color-ember-lacquer: #c72a00;
        
          /* Typography */
          --font-chalet-londonsixty: 'Chalet-LondonSixty', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-chalet-newyorksixty: 'Chalet-NewYorkSixty', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-supremell-bold: 'SupremeLL-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-supremell-boldflat: 'SupremeLL-BoldFlat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.33;
          --text-body: 15px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --text-heading-sm: 34px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.68px;
          --text-heading: 52px;
          --leading-heading: 1.13;
          --tracking-heading: -1.04px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -1.6px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-100: 100px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 9999px;
        }