shupatto___style_reference:
  info: "> Museum vitrine on white marble"

  theme: "light"

  info: "Shupatto's digital presence operates like a quiet museum vitrine for a single physical product. The visual system is almost entirely achromatic — a canvas of white interrupted by hairline charcoal lines, generous negative space, and minuscule typography that whispers rather than shouts. Everything is set in uppercase with dramatically wide letter-spacing, transforming even body copy into editorial display text. The only chromatic note is a soft periwinkle blue that functions less as a brand color and more as a faint pressure point — a tag, a selected state, a small badge. The interface is a study in restraint: no shadows, no gradients, no rounded corners beyond 3px, no decorative imagery competing with the product. Line work and typographic rhythm do all the work."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Graphite | `#2d2d2d` | `--color-graphite` | Primary text, hairline borders, structural lines — the dominant neutral carrying all interface weight |"
    info: "| Ink | `#000000` | `--color-ink` | Strongest text and most emphatic borders, logo dots, footer marks |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, nav backgrounds — the unbroken white field everything floats on |"
    info: "| Fog | `#878887` | `--color-fog` | Muted helper text, secondary borders, dimmed metadata |"
    info: "| Periwinkle | `#738ae5` | `--color-periwinkle` | Sole chromatic accent — selected nav state, badge fills, a rare pressure point in an otherwise colorless system |"

  tokens___typography:

    gillsansnova_book___primary_typeface_for_body__headings__nav__links__and_icon_adjacent_text___carries_the_entire_english_typographic_system_at_a_medium_weight_with_wide_tracking____font_gillsansnova_book:
      - "**Substitute:** Jost, Outfit, or Avenir Next"
      - "**Weights:** 500"
      - "**Sizes:** 12px, 16px, 18px, 19px, 21px, 22px, 28px"
      - "**Line height:** 1.00–1.33"
      - "**Letter spacing:** 0.07–0.125em"
      - "**OpenType features:** `\"palt\"`"
      - "**Role:** Primary typeface for body, headings, nav, links, and icon-adjacent text — carries the entire English typographic system at a medium weight with wide tracking"

    gillsansnova_semibold___emphasis_and_key_headings___the_bolder_weight_creates_hierarchy_without_size_inflation__the_8px_variant_carries_micro_labels_and_badge_text____font_gillsansnova_semibold:
      - "**Substitute:** Jost Medium or Outfit SemiBold"
      - "**Weights:** 800"
      - "**Sizes:** 8px, 18px, 21px, 28px"
      - "**Line height:** 1.00–2.50"
      - "**Letter spacing:** 0.064–0.119em"
      - "**OpenType features:** `\"palt\"`"
      - "**Role:** Emphasis and key headings — the bolder weight creates hierarchy without size inflation; the 8px variant carries micro-labels and badge text"

    yu_gothic___japanese_text_rendering___sits_at_the_same_metric_scale_as_the_english_system__ensuring_bilingual_visual_parity____font_yu_gothic:
      - "**Substitute:** Noto Sans JP or Hiragino Sans"
      - "**Weights:** 400"
      - "**Sizes:** 18px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** 0.1em"
      - "**OpenType features:** `\"palt\"`"
      - "**Role:** Japanese text rendering — sits at the same metric scale as the English system, ensuring bilingual visual parity"

    cezannepro_db___micro_decorative_and_brand_specific_marks___a_secondary_display_face_for_labels_that_need_a_different_visual_texture_from_the_main_gill_system____font_cezannepro_db:
      - "**Substitute:** Italiana or Cinzel"
      - "**Weights:** 600"
      - "**Sizes:** 15px"
      - "**Line height:** 1.00–1.33"
      - "**Letter spacing:** 0.133em"
      - "**OpenType features:** `\"palt\"`"
      - "**Role:** Micro-decorative and brand-specific marks — a secondary display face for labels that need a different visual texture from the main Gill system"

    gillsansnova_medium___gillsansnova_medium___detected_in_extracted_data_but_not_described_by_ai____font_gillsansnova_medium:
      - "**Weights:** 600"
      - "**Sizes:** 10px, 17px"
      - "**Line height:** 1, 1.41"
      - "**Letter spacing:** 0.071, 0.18"
      - "**OpenType features:** `\"palt\"`"
      - "**Role:** GillSansNova-Medium — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body | 16px | 1.29 | 1.28px | `--text-body` |"
      info: "| subheading | 18px | 1.25 | 1.44px | `--text-subheading` |"
      info: "| heading-sm | 21px | 1.22 | 2.52px | `--text-heading-sm` |"
      info: "| heading-lg | 28px | 1 | 2.24px | `--text-heading-lg` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 23 | 23px | `--spacing-23` |"
      info: "| 27 | 27px | `--spacing-27` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| all | 3px |"
      info: "| cards | 3px |"
      info: "| badges | 3px |"
      info: "| buttons | 3px |"

    layout:

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

  components:

    hairline_bordered_card:
      role: "Universal content container"

      info: "White surface with 1px #2d2d2d border, 3px radius, 24px internal padding. No shadow, no fill distinction from page — the border alone separates content from canvas. The dominant structural unit across the site."

    text_nav_link:
      role: "Navigation item"

      info: "GillSansNova-SemiBold at 8–18px, uppercase, letter-spacing 0.1–0.119em, color #2d2d2d or #000000. No background, no border, no underline. Items separated by generous whitespace rather than dividers."

    selected_nav_dot:
      role: "Active state indicator"

      info: "A small filled circle in #000000 or the periwinkle #738ae5 placed adjacent to the active nav label — the only visual signal of selection. The periwinkle variant appears on badge/nav surfaces."

    editorial_display_heading:
      role: "Page title and section headers"

      info: "GillSansNova-Book or SemiBold at 21–28px, uppercase, letter-spacing 0.12–0.125em, color #2d2d2d. The wide tracking transforms mid-weight type into a display voice without needing a display weight or decorative treatment."

    micro_label_badge:
      role: "Category tags and product marks"

      info: "GillSansNova-SemiBold at 8px, uppercase, letter-spacing 0.119em, 3px radius. Background either transparent (text only, #2d2d2d) or filled with #738ae5 (white text). Functions as a typographic stamp, not a pill."

    product_grid_cell:
      role: "Catalog item"

      info: "White card with 1px #2d2d2d border, 3px radius, no padding around the product image (which bleeds to the border). Caption text in GillSansNova-SemiBold 8px or GillSansNova-Book 12px sits below with 16–24px margin-top."

    hairline_divider:
      role: "Section separator"

      info: "1px solid #2d2d2d or #000000 horizontal line, full-width or content-width. The most common separator; no double-line, no dotted, no gradient fades."

    ghost_body_link:
      role: "Inline text link"

      info: "GillSansNova-Book 16–18px, color #000000 with 1px underline border. On hover or active, the underline thickens or shifts to #2d2d2d. No color change, no background change."

    sparse_footer_mark:
      role: "Footer brand and meta"

      info: "Minimalist footer with GillSansNova-SemiBold 8–18px, letter-spacing 0.119em, all caps. A single small #000000 dot serves as the brand mark or separator. Maximum restraint."

    image_caption_label:
      role: "Photo or product caption"

      info: "GillSansNova-Book 12px or CezannePro-DB 15px, uppercase, letter-spacing 0.133em, color #2d2d2d. Sits tightly below images with 3–10px gap, functioning as gallery wall text."

  do_s_and_don_ts:

    do:
      - "Use uppercase with letter-spacing ≥ 0.07em for all interface text — this tracking is the typographic signature, not the weight or size"
      - "Separate content containers with 1px #2d2d2d or #000000 hairline borders, never with background fills or shadows"
      - "Keep the 3px border-radius for every rounded element — a sharper, more architectural system than the common 8–16px"
      - "Limit color to the neutrals plus periwinkle #738ae5; let the periwinkle appear on at most 1–2 elements per view as a quiet accent"
      - "Set body text at 16–18px with 1.22–1.33 line-height and 0.07–0.1em letter-spacing for an editorial gallery feel"
      - "Use GillSansNova-SemiBold (weight 800) at 8px with 0.119em tracking for all micro-labels, badges, and category stamps"
      - "Apply the \"palt\" font-feature setting globally — it optimizes proportional alternates and is non-negotiable for the brand's typographic identity"

    don_t:
      - "Do not introduce shadows, gradients, or any form of elevation — the design system is flat by philosophy"
      - "Do not add bright or saturated colors beyond #738ae5; even secondary accents should stay neutral"
      - "Do not use border-radius above 3px; avoid pill shapes and large rounded corners"
      - "Do not set type in mixed case or normal letter-spacing; everything reads as editorial display via tracking"
      - "Do not fill cards or sections with tinted backgrounds; rely on hairline borders to create structure on the white canvas"
      - "Do not use large display type below 28px or above 32px — the scale is deliberately compressed and quiet"
      - "Do not add icons with weight above 1px stroke; icons are absent or drawn as the thinnest possible lines"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper | `#ffffff` | Base page canvas and card surface — there is no distinction between page and card backgrounds; everything sits on the same white field |"
    info: "| 2 | Ink Hairline | `#2d2d2d` | Hairline borders at 1px define every container and divider; surfaces are carved out by line work, not by tonal layering |"

  imagery:

    info: "Product photography is the only visual content — no lifestyle imagery, no illustrations, no abstract graphics. Product shots appear as tight, centered catalog images on white backgrounds, contained within hairline-bordered cells. The object itself is the hero; the surrounding frame is gallery-like. No overlapping, no masking, no decorative treatment. Imagery-to-text ratio is moderate, with product images occupying roughly 40–50% of viewport space on catalog pages. No icons are used as decorative elements — the system is image-free and icon-free, relying entirely on typography and line work."

  layout:

    info: "The page model is a single max-width column at ~1200px centered on a white canvas, with no full-bleed sections. The hero is a centered text statement ('BAGS DESIGNED TO FOLD WITH A SNAP') set in wide-tracked uppercase at ~21px, floating in vast negative space with no accompanying image. Navigation sits in the top-right corner as a single small text link. Sections flow vertically with generous 80px+ vertical gaps, separated by hairline rules. Content blocks alternate between text-only editorial statements and product grid cells. Product grids use 3–4 columns at desktop width. The overall rhythm is slow and contemplative — a museum walk-through rather than a commercial browse. Footer is a single hairline-bordered line of micro-text."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #2d2d2d (primary), #000000 (strongest), #878887 (muted)"
    - "Background: #ffffff (all surfaces)"
    - "Border: #2d2d2d (standard hairline), #000000 (emphatic)"
    - "Accent: #738ae5 (periwinkle — selected states, badge fills only)"
    - "primary action: no distinct CTA color"

  example_component_prompts:
    - "**Editorial Display Heading**: Set in GillSansNova-Book (sub: Jost) weight 500, 28px, uppercase, letter-spacing 0.08em, color #2d2d2d. No border, no background, sits on white canvas with 80px vertical breathing room above and below."

    - "**Hairline-Bordered Product Card**: White surface, 1px solid #2d2d2d border, 3px border-radius, 0px internal padding (image bleeds to edge). Caption below: GillSansNova-SemiBold (sub: Jost) 8px, uppercase, letter-spacing 0.119em, color #2d2d2d, 16px margin-top."

    - "**Micro-Label Badge**: GillSansNova-SemiBold (sub: Jost) 8px, uppercase, letter-spacing 0.119em, color #2d2d2d, transparent background, 3px radius, 4px 8px padding. For the accent variant: background #738ae5, color #ffffff."

    - "**Ghost Nav Link**: GillSansNova-SemiBold (sub: Jost) 18px, uppercase, letter-spacing 0.1em, color #2d2d2d, no underline, no background. Active state: a 4px filled circle in #000000 sits to the right of the text."

    - "**Section Divider**: 1px solid #2d2d2d horizontal line, full content width (max 1200px), no spacing above or below — sits flush between content blocks as a typographic mark."

  elevation_philosophy:

    info: "This design system intentionally avoids all box-shadow usage. Elevation is never communicated through depth, glow, or blur. Instead, structure is created through hairline borders (1px #2d2d2d or #000000) and generous negative space. When separation is needed, a line is drawn — not a shadow cast. This is a deliberate choice: the site treats the interface as a flat editorial layout, not a layered application surface. The single surface level (white) means every container must declare itself through stroke, not through tonal difference."

  similar_brands:

    - "**MUJI** — Same near-monochrome palette, hairline structural lines, and uppercase wide-tracked typography on white canvas — both treat the product as the only source of visual warmth"
    - "**Issey Miyake** — Editorial Japanese design language with compressed type scale, museum-like negative space, and zero decorative chrome — the product is framed, not promoted"
    - "**COS (cosstores.com)** — Wide letter-spaced uppercase headings, hairline borders defining product cells, and the same restrained gallery-presentation rhythm"
    - "**Aesop** — Anti-shadow, anti-gradient approach with content defined by serif/grotesque typography and hairlines rather than by color or elevation"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-graphite: #2d2d2d;
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-fog: #878887;
          --color-periwinkle: #738ae5;
        
          /* Typography — Font Families */
          --font-gillsansnova-book: 'GillSansNova-Book', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gillsansnova-semibold: 'GillSansNova-SemiBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-yu-gothic: '游ゴシック体 (Yu Gothic)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cezannepro-db: 'CezannePro-DB', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gillsansnova-medium: 'GillSansNova-Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.29;
          --tracking-body: 1.28px;
          --text-subheading: 18px;
          --leading-subheading: 1.25;
          --tracking-subheading: 1.44px;
          --text-heading-sm: 21px;
          --leading-heading-sm: 1.22;
          --tracking-heading-sm: 2.52px;
          --text-heading-lg: 28px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: 2.24px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-19: 19px;
          --spacing-21: 21px;
          --spacing-22: 22px;
          --spacing-23: 23px;
          --spacing-27: 27px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 3px;
        
          /* Named Radii */
          --radius-all: 3px;
          --radius-cards: 3px;
          --radius-badges: 3px;
          --radius-buttons: 3px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-ink-hairline: #2d2d2d;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-graphite: #2d2d2d;
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-fog: #878887;
          --color-periwinkle: #738ae5;
        
          /* Typography */
          --font-gillsansnova-book: 'GillSansNova-Book', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gillsansnova-semibold: 'GillSansNova-SemiBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-yu-gothic: '游ゴシック体 (Yu Gothic)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cezannepro-db: 'CezannePro-DB', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gillsansnova-medium: 'GillSansNova-Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.29;
          --tracking-body: 1.28px;
          --text-subheading: 18px;
          --leading-subheading: 1.25;
          --tracking-subheading: 1.44px;
          --text-heading-sm: 21px;
          --leading-heading-sm: 1.22;
          --tracking-heading-sm: 2.52px;
          --text-heading-lg: 28px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: 2.24px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-19: 19px;
          --spacing-21: 21px;
          --spacing-22: 22px;
          --spacing-23: 23px;
          --spacing-27: 27px;
          --spacing-60: 60px;
        
          /* Border Radius */
          --radius-sm: 3px;
        }