graf_lantz___style_reference:
  info: "> Scandinavian atelier on raw linen — one violet stroke of urgency inside an otherwise bone-white room."

  theme: "light"

  info: "Graf Lantz reads as a Scandinavian atelier on raw linen: bone-white canvas, a single brand violet used almost as punctuation, and product photography that is cropped so close the felt texture becomes the atmosphere. The page is overwhelmingly typographic and whitespace-driven, with 99% achromatic surfaces and one accent surface reserved for actions. Type stays in a tight, slightly condensed grotesque (NeueHaasUnica) for utility, while a softer, almost humanist display face (accessibly) is reserved for the wordmark and key CTAs — the contrast is between machine-crish utility text and warm display moments. Components are paper-thin: no shadows, no elevation stacks, hairline borders in the #474747–#212121 range, and pill-shaped controls with ~50px radius. Density is comfortable to airy; every product frame is meant to feel like an object on a gallery shelf."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Page background, card surfaces, inverted text on dark washes. The neutral ground everything else is mounted on |"
    info: "| Soft Ash | `#eeeeee` | `--color-soft-ash` | Light neutral action fill for buttons on dark surfaces. |"
    info: "| Mist Sage | `#d5e4e8` | `--color-mist-sage` | Announcement bar and quiet informational washes — a desaturated teal that reads as utility, never as decoration |"
    info: "| Graphite | `#474747` | `--color-graphite` | Primary body text, default borders, the dominant hairline tone. The structural neutral of the system |"
    info: "| Charcoal | `#212121` | `--color-charcoal` | Headings, list item dividers, emphasis borders — the darkening step when hierarchy needs weight |"
    info: "| Onyx | `#000000` | `--color-onyx` | Body text where maximum contrast is required, SVG icon fills, the occasional heavy border |"
    info: "| Slate | `#2b2b2b` | `--color-slate` | Navigation border accents and nav text — sits between Graphite and Onyx, reserved for chrome |"
    info: "| Fog | `#7b7b7b` | `--color-fog` | Medium-contrast borders, control outlines, and structural separators. Do not promote it to the primary CTA color |"
    info: "| Indigo Pulse | `#574cd5` | `--color-indigo-pulse` | Filled CTA button background, the single chromatic moment in the system. Used sparingly so the action reads as switched-on against an otherwise monochrome page |"

  tokens___typography:

    neuehaasunicaw1g___the_workhorse_grotesque_for_navigation__body_copy__list_items__footers__buttons__and_links__the_900_weight_is_reserved_for_the_logo_wordmark_and_heaviest_display_moments__500_carries_sub_emphasis__400_is_the_default_body_voice_____font_neuehaasunicaw1g:
      - "**Substitute:** Inter, Neue Haas Grotesk, Söhne"
      - "**Weights:** 400, 500, 900"
      - "**Sizes:** 12, 14, 16"
      - "**Line height:** 1.0, 1.2, 1.4, 1.5"
      - "**Letter spacing:** normal across all sizes"
      - "**Role:** The workhorse grotesque for navigation, body copy, list items, footers, buttons, and links. The 900 weight is reserved for the logo wordmark and heaviest display moments; 500 carries sub-emphasis; 400 is the default body voice."

    instrument_sans___secondary_sans_for_nav__search_input__and_section_headings__slightly_warmer_and_more_humanist_than_neuehaas___used_where_the_page_needs_a_softer_informational_register_without_leaving_the_neutral_palette_____font_instrument_sans:
      - "**Substitute:** Inter, Geist, Söhne"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14, 16, 32"
      - "**Line height:** 1.2"
      - "**Role:** Secondary sans for nav, search input, and section headings. Slightly warmer and more humanist than NeueHaas — used where the page needs a softer informational register without leaving the neutral palette."

    accessibly___the_display_brand_voice__used_for_the__graf_lantz__wordmark__the__shop_coasters__pill_cta__and_the_hero_heading__the_1_0_line_height_and_slightly_humanist_geometry_make_it_sit_above_the_system_rather_than_inside_it_____font_accessibly:
      - "**Substitute:** Söhne Schmal, Neue Haas Grotesk Display, ABC Diatype Mono (display cuts)"
      - "**Weights:** 400"
      - "**Sizes:** 16, 35"
      - "**Line height:** 1.0"
      - "**Role:** The display/brand voice. Used for the 'graf lantz' wordmark, the 'SHOP COASTERS' pill CTA, and the hero heading. The 1.0 line-height and slightly humanist geometry make it sit above the system rather than inside it."

    source_sans_pro___minor_fallback___appears_once__treat_as_legacy_utility_and_do_not_introduce_into_new_screens_____font_source_sans_pro:
      - "**Substitute:** Source Sans 3"
      - "**Weights:** 400"
      - "**Sizes:** 16"
      - "**Line height:** 1.2"
      - "**Role:** Minor fallback — appears once, treat as legacy/utility and do not introduce into new screens."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| heading | 32px | 1.2 | — | `--text-heading` |"
      info: "| display | 35px | 1 | — | `--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: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 144 | 144px | `--spacing-144` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| badges | 50px (pill) |"
      info: "| images | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 50px (pill) |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 50-80px"
      - "**Card padding:** 24-28px"
      - "**Element gap:** 15-24px"

  components:

    announcement_bar:
      role: "Site-wide utility strip"

      info: "Full-bleed band, Mist Sage (#d5e4e8) background, centered single-line message. 14px NeueHaasUnicaW1G weight 500, Charcoal (#212121) text. No border, no shadow. Used only for shipping/promo info — never decorative."

    primary_navigation_header:
      role: "Top-of-page chrome"

      info: "White background, 1px Slate (#2b2b2b) bottom border. Logo (accessibly 35px, weight 400) left-aligned; nav links (NeueHaasUnicaW1G 14px, weight 500, Charcoal #212121) center cluster; search input + account + cart icons right-aligned. 28px vertical padding on the link row."

    nav_link:
      role: "Top-nav interactive item"

      info: "NeueHaasUnicaW1G 14px weight 500, color Charcoal (#212121), letter-spacing normal. No default underline; hover introduces a 1px Charcoal (#212121) underline at the baseline. Padding 28px vertical, 10px horizontal for generous click targets."

    search_input:
      role: "Header search field"

      info: "Soft Ash (#eeeeee) fill, no visible border at rest, placeholder text in Instrument Sans 16px weight 400 in Fog (#7b7b7b). Search icon right-aligned. Rounded at 0px — this is a flat UI input, not a pill."

    pill_display_cta:
      role: "Hero / featured action button"

      info: "White fill, 1px Charcoal (#212121) border, 50px border-radius (full pill). Text: accessibly 16px weight 400, tracked normal, in Charcoal. 16px vertical / 32px horizontal padding. Sits over a product image with no shadow — the photo IS the elevation."

    filled_brand_cta:
      role: "Primary commerce action"

      info: "Indigo Pulse (#574cd5) fill, white text. NeueHaasUnicaW1G 16px weight 500, tracked normal. 50px border-radius (pill). 15px vertical / 24px horizontal padding. The only chromatic surface in the system — treat as a single accent, not a palette."

    text_link:
      role: "Inline editorial link"

      info: "Fog (#7b7b7b) text at rest, 1px Fog underline; hover deepens to Charcoal (#212121) text and Charcoal underline. 4–5px vertical padding to give the underline breathing room from the line."

    body_paragraph:
      role: "Long-form copy block"

      info: "NeueHaasUnicaW1G 16px weight 400, line-height 1.5, color Graphite (#474747). 7–8px margin between paragraphs. No first-line indent, no drop cap — the reading rhythm is purely vertical spacing."

    empty___error_state:
      role: "404 and zero-result screens"

      info: "Centered vertical stack on white canvas. 'Oops!' eyebrow in accessibly 16px, headline in Instrument Sans 32px weight 500, helper line in NeueHaasUnicaW1G 16px Graphite. Followed by a single pill CTA on a full-bleed product image. Generous ~80px top margin to make the absence feel intentional."

    product_image_block:
      role: "Hero visual / editorial frame"

      info: "Square or near-square photograph, 0px radius, full-bleed within its column. No border, no caption overlay, no badge. Treated as a gallery object — the frame, not the chrome, defines the edge."

    icon_button_account___cart:
      role: "Compact header control"

      info: "16–20px stroke icon in Onyx (#000000), no background, no border. 10px horizontal padding. Touch target is provided by the padding, not a visible hit area."

    list_divider:
      role: "Row separator in lists, menus, footers"

      info: "1px Charcoal (#212121) horizontal rule at full row width. No padding tricks, no double rules — the divider is the visual event, not the rows."

    footer_link_group:
      role: "Footer column list"

      info: "Stacked NeueHaasUnicaW1G 14px weight 400 links in Graphite, separated by Charcoal 1px dividers. 15–24px row padding. No column headers in bold — the group earns hierarchy through spacing, not weight."

  do_s_and_don_ts:

    do:
      - "Use #574cd5 only as a filled button background and never as a card surface, border, or accent stroke."
      - "Use 50px border-radius (pill) for every button and tag; keep inputs and images at 0px radius."
      - "Set body text in NeueHaasUnicaW1G 16px / line-height 1.5, color #474747, and let white space do the hierarchy work."
      - "Let product photography fill its frame at 0px radius with no overlay, badge, or caption chrome."
      - "Reach for the Mist Sage #d5e4e8 wash only on the announcement bar — do not introduce a second decorative surface."
      - "Use Instrument Sans for nav and informational headings; reserve accessibly for the wordmark and a single display moment per screen."
      - "Set section gaps in the 50–80px range and card padding at 24–28px; resist the urge to tighten."

    don_t:
      - "Do not introduce additional accent hues — the system is one violet on a monochrome page."
      - "Do not add drop shadows to cards, buttons, or images; the design is deliberately shadowless."
      - "Do not use Source Sans Pro in new screens; it is legacy and breaks the NeueHaas/Instrument/accessibly trinity."
      - "Do not apply radius between 1px and 49px; the system is binary — pill or square."
      - "Do not stack the violet on a colored surface; the only backgrounds it should sit on are #ffffff or product photography."
      - "Do not underline nav links at rest; the underline appears only on hover and lives on the baseline, not the full box."
      - "Do not use #000000 for body text where #212121 or #474747 already passes contrast — reserve Onyx for iconography and maximum-emphasis moments."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Page background, product page surrounds, the default floor. |"
    info: "| 2 | Soft Ash Surface | `#eeeeee` | Input fills, ghost button resting state, secondary surface where white-on-white would disappear. |"
    info: "| 3 | Sage Wash | `#d5e4e8` | Announcement bar and gentle informational bands — the only chromatic non-action surface. |"
    info: "| 4 | Indigo Action | `#574cd5` | The brand action surface — filled CTA only, never used as background for cards or panels. |"

  elevation:

    info: "Elevation is intentionally absent. The system relies on flatness, hairline borders (1px in the #474747–#212121 family), and white space to create hierarchy rather than shadows. The only depth cue is the 50px-pill button sitting on the product photography beneath it — the pill's shadow is the product image, not a drop shadow."

  imagery:

    info: "Photography is the brand. All imagery is high-key product photography on neutral surfaces — tight crops that turn felt and fiber texture into the subject. Frames are square or near-square, full-bleed within their column, with no rounded corners, no overlays, and no lifestyle context. Lighting is soft and natural; the palette is desaturated whites, warm grays, and the occasional blush of the material itself (e.g. a rose-tinted marbled coaster). There is no illustration, no 3D, and no abstract graphics. Icons are minimal 1.5–2px stroke line icons in #000000, monoline, used only for account, cart, and search."

  layout:

    info: "Full-bleed announcement bar → white header band (max-width 1200px, centered) → generous top whitespace (~80px) → centered narrow column for editorial/empty states → full-bleed product image row. The page model is max-width contained with whitespace-led sections rather than alternating bands. Navigation is a flat top bar with a bottom hairline border; no sticky behavior, no sidebar, no mega-menu. The 404/empty template is a vertical stack: eyebrow, headline, helper, then a single product image carrying a pill CTA — the image does the work a feature grid would normally do."

  agent_prompt_guide:

    quick_color_reference:
    - "text primary: #212121 (headings, emphasis) / #474747 (body)"
    - "text muted: #7b7b7b (links at rest, helper)"
    - "background: #ffffff (canvas) / #eeeeee (input, soft surface)"
    - "border: #474747 (default hairline) / #212121 (emphasis divider)"
    - "brand accent: #574cd5 (filled CTA only)"
    - "primary action: #574cd5 (filled action)"

    example_component_prompts:

    - "Create a Primary Action Button: #574cd5 background, #7b7b7b text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."


    - "**Filled Brand CTA** — Indigo Pulse #574cd5 fill, white text. NeueHaasUnicaW1G 16px weight 500, tracked normal. 50px radius, 15px vertical / 24px horizontal padding. No border, no shadow. Use as the single chromatic action on any screen."

    - "**Empty / 404 State** — White canvas, ~80px top margin. Centered vertical stack: 'Oops!' eyebrow in accessibly 16px #474747, headline 'We couldn't find…' in Instrument Sans 32px weight 500 #212121, helper line in NeueHaasUnicaW1G 16px #474747 line-height 1.5. Follow with a full-bleed product image row carrying a Pill Display CTA."

    - "**Text Link in Body Copy** — Inline link in a body paragraph. Rest: #7b7b7b text with 1px #7b7b7b underline. Hover: #212121 text with 1px #212121 underline. 4px vertical padding so the underline clears the descender."

  similar_brands:

    - "**MUJI** — Same bone-white canvas, hairline chrome, zero elevation, and the discipline of letting a single product photograph carry the screen."
    - "**Mansur Gavriel** — Same restrained monochrome grid, a single chromatic surface reserved for commerce, and product crops that treat objects like gallery pieces."
    - "**Greats** — Same flat header with hairline bottom border, tight 14–16px grotesk nav, and full-bleed product photography without decorative chrome."
    - "**Aesop** — Same warm-neutral typographic register, generous vertical rhythm, and the rule that color appears only when it has a job."
    - "**Toast (toa.st)** — Same Scandinavian-leaning product photography on raw linen-tone backgrounds and a one-color accent used almost as punctuation."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-soft-ash: #eeeeee;
          --color-mist-sage: #d5e4e8;
          --color-graphite: #474747;
          --color-charcoal: #212121;
          --color-onyx: #000000;
          --color-slate: #2b2b2b;
          --color-fog: #7b7b7b;
          --color-indigo-pulse: #574cd5;
        
          /* Typography — Font Families */
          --font-neuehaasunicaw1g: 'NeueHaasUnicaW1G', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-accessibly: 'accessibly', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-source-sans-pro: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-display: 35px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-64: 64px;
          --spacing-144: 144px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 50-80px;
          --card-padding: 24-28px;
          --element-gap: 15-24px;
        
          /* Border Radius */
          --radius-full: 50px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 50px (pill);
          --radius-images: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 50px (pill);
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-soft-ash-surface: #eeeeee;
          --surface-sage-wash: #d5e4e8;
          --surface-indigo-action: #574cd5;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-soft-ash: #eeeeee;
          --color-mist-sage: #d5e4e8;
          --color-graphite: #474747;
          --color-charcoal: #212121;
          --color-onyx: #000000;
          --color-slate: #2b2b2b;
          --color-fog: #7b7b7b;
          --color-indigo-pulse: #574cd5;
        
          /* Typography */
          --font-neuehaasunicaw1g: 'NeueHaasUnicaW1G', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-accessibly: 'accessibly', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-source-sans-pro: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-display: 35px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-64: 64px;
          --spacing-144: 144px;
        
          /* Border Radius */
          --radius-full: 50px;
        }