subset___style_reference:
  info: "> editorial boutique on raw linen"

  theme: "light"

  info: "Subset is an editorial intimates boutique rendered on warm raw linen rather than stark white. The page breathes through a muted earth palette — sage, dusty blue, blush, ember — with Founders Grotesk as the workhorse voice and a refined serif (TT Ramillas) reserved for editorial headlines. Product photography is the hero; the UI gets out of the way with hairline borders, minimal radii, and no decorative shadows. The signature moves: aggressive letter-spacing on uppercase labels (0.1–0.15em), generous cream canvas, and color used as quiet punctuation on borders, badges, and icons rather than as large filled blocks."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#241f20` | `--color-ink` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |"
    info: "| Raw Linen | `#f5f4ee` | `--color-raw-linen` | Page canvas and card backgrounds — warm off-white, the signature surface that distinguishes this system from generic white SaaS |"
    info: "| White | `#ffffff` | `--color-white` | Elevated card surfaces, badge fills, inverse text on dark buttons |"
    info: "| Fog | `#808080` | `--color-fog` | Muted helper text, secondary dividers, disabled labels |"
    info: "| Blush | `#edcdc2` | `--color-blush` | Accent surface wash — hero image tint, product photo backdrop, soft highlight zones |"
    info: "| Charcoal | `#26262a` | `--color-charcoal` | Darkest UI surface — footer dark bands, chat widget shell, overlaid panels |"
    info: "| Sage Leaf | `#8bbd78` | `--color-sage-leaf` | Signature accent — top announcement bar, hairline decorative borders, icon strokes, functional green; the brand's quiet living color |"
    info: "| Heritage Blue | `#6487ba` | `--color-heritage-blue` | Primary action — filled buttons, link underlines, selected states; dusty mid-blue carries trust without corporate coldness |"
    info: "| Midnight Forest | `#233735` | `--color-midnight-forest` | Dark filled buttons (hero CTA), deep green-black for high-emphasis actions; warmer than charcoal, more sophisticated than black |"
    info: "| Ember | `#ff965b` | `--color-ember` | NEW badges, notification dots, star ratings, cart count bubble — vivid warm orange used sparingly as functional punctuation |"

  tokens___typography:

    foundersgrotesk___workhorse_sans_for_navigation__product_cards__badges__body_text__buttons__inputs__icons__the_0_1_0_15em_letter_spacing_on_13_15px_sizes_is_the_signature_tracking_pattern_for_uppercase_labels_new__organic_cotton__shop_underwear_____font_foundersgrotesk:
      - "**Substitute:** Inter, Söhne, or DM Sans"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 13, 14, 15, 16, 17, 18, 20, 24"
      - "**Line height:** 1.20–1.63"
      - "**Letter spacing:** 0.0180em, 0.0210em, 0.0240em, 0.0250em, 0.0270em, 0.0280em, 0.0300em, 0.0330em, 0.1000em, 0.1500em"
      - "**Role:** Workhorse sans for navigation, product cards, badges, body text, buttons, inputs, icons. The 0.1–0.15em letter-spacing on 13–15px sizes is the signature tracking pattern for uppercase labels (NEW, ORGANIC COTTON, Shop Underwear)."

    ttramillas_light___editorial_serif_for_hero_headline__subhead__and_body_excerpts__tight__0_01em_tracking_and_low_contrast_strokes_create_a_quiet__literary_feel_that_contrasts_the_geometric_sans_____font_ttramillaslight:
      - "**Substitute:** Cormorant Garamond, Playfair Display, or Lora"
      - "**Weights:** 400"
      - "**Sizes:** 18, 20, 24, 32, 40, 42"
      - "**Line height:** 1.00–1.53"
      - "**Letter spacing:** -0.0100em"
      - "**Role:** Editorial serif for hero headline, subhead, and body excerpts. Tight -0.01em tracking and low contrast strokes create a quiet, literary feel that contrasts the geometric sans."

    gtstandard_m___specialty_text_at_17px_with_0_025em_tracking___used_for_minimal_secondary_copy__not_a_primary_face____font_gtstandard_m:
      - "**Substitute:** Söhne or Inter at matching weight"
      - "**Weights:** 400"
      - "**Sizes:** 17"
      - "**Line height:** 1.50"
      - "**Letter spacing:** 0.0250em"
      - "**Role:** Specialty text at 17px with 0.025em tracking — used for minimal secondary copy, not a primary face"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | 0.1px | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.4 | -0.01px | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.4 | 0.025px | `--text-heading-sm` |"
      info: "| heading | 24px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 32px | 1.24 | -0.01px | `--text-heading-lg` |"
      info: "| display | 42px | 1.29 | -0.01px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| badges | 2px |"
      info: "| buttons | 0px |"
      info: "| swatches | 9999px |"
      info: "| chat-pill | 9999px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 64px"
      - "**Card padding:** 16px"
      - "**Element gap:** 8px"

  components:

    dark_filled_button:
      role: "Primary call-to-action (hero, product detail, checkout)"

      info: "Background #233735, text #ffffff, FoundersGrotesk 14px weight 500, letter-spacing 0.025em, uppercase. Padding 16px vertical / 24px horizontal. Radius 0px — sharp rectangle, no rounding. No shadow. This is the 'SHOP MOTHERS DAY' button."

    outlined_action_button:
      role: "Secondary action or link-style button"

      info: "Transparent background, 1px border #233735 or #6487ba, text matching border color. FoundersGrotesk 14px weight 500, 0.025em tracking, uppercase. Padding 14px / 20px. Radius 0px."

    announcement_bar:
      role: "Site-wide top strip"

      info: "Full-bleed #8bbd78 sage background. Centered text, FoundersGrotesk 13px weight 400, #241f20, letter-spacing 0.10em, uppercase. Padding 8px vertical. No border."

    top_navigation:
      role: "Primary site navigation"

      info: "Sits on Raw Linen canvas. Logo (SUBSET in serif) centered. Left: category links (Start Here, Underwear, Bras, Lounge, Mens) in FoundersGrotesk 14px weight 400, 0.025em tracking. Right: search icon, Fitting Room, Recycle, Account, and cart bubble (Ember #ff965b fill, white number). All items vertically aligned, no dividers."

    hero_overlay_card:
      role: "Centered editorial card on full-width hero image"

      info: "White #ffffff background, 0px radius, generous padding (~48px). Contains serif headline at 42px, subtext, dark filled CTA, and meta line. Sits over split editorial imagery (product on left, model on right) at ~60% page width, centered."

    category_card:
      role: "5-up category grid (Shop Underwear, Bras, Lounge, Men's, All)"

      info: "Portrait-ratio image fills card top, no border, 0px radius. Label below image: FoundersGrotesk 20px weight 400, #241f20, 0.025em tracking. Product count subtext: 14px, #808080, 0.025em tracking. Full-bleed within column, no card background — image sits directly on Raw Linen."

    product_card:
      role: "3-up product grid items"

      info: "Square product image on Raw Linen background, no border or radius. NEW badge (Ember fill, white text, 2px radius) positioned top-right of image. Below image: star rating (Ember stars) + review count in 13px #808080. ORGANIC COTTON label in 13px #241f20, 0.10em tracking, uppercase. Product name 16px #241f20 weight 500. Price in 16px #241f20. Color swatch row: 16px circles, current variant outlined in #241f20."

    new_badge:
      role: "Product freshness indicator"

      info: "Background #ff965b Ember, text #ffffff, FoundersGrotesk 13px weight 500, 0.10em tracking, uppercase. Padding 4px / 8px. Radius 2px. Positioned top-right of product image."

    press_strip:
      role: "Editorial social proof band below hero"

      info: "Raw Linen background, full-width single row. Left-aligned quote in serif (TTRamillas 18px) + bold publication name in FoundersGrotesk 14px weight 700, uppercase, 0.025em tracking. Items separated by generous horizontal whitespace, no dividers. 4 items at ~25% width each."

    color_swatch:
      role: "Product variant selector"

      info: "16px diameter circle, #9999px radius. Border 1px #e0e0e0 default; current selection gets 1px #241f20 outer ring. No fill change between states — only border weight signals selection."

    chat_widget:
      role: "Persistent bottom-left support trigger"

      info: "Pill shape, 9999px radius. Dark circle icon (#241f20) + white pill (#ffffff) with 'Chat with us' text in FoundersGrotesk 14px weight 500, #241f20. Fixed bottom-left, 16px offset from edges."

    cart_count_bubble:
      role: "Cart icon notification"

      info: "Small circle in navigation, #ff965b Ember fill, white number at 12px weight 700. Diameter ~20px, positioned overlapping the cart icon."

  do_s_and_don_ts:

    do:
      - "Set all page backgrounds and section bands to #f5f4ee Raw Linen — never use pure white as a canvas"
      - "Use #233735 Midnight Forest for primary filled buttons with #ffffff text at 14px FoundersGrotesk weight 500, 0.025em tracking, uppercase"
      - "Apply 0.10em letter-spacing to all uppercase micro-labels (NEW, ORGANIC COTTON, navigation links) at 13–15px FoundersGrotesk"
      - "Reserve #ff965b Ember exclusively for badges, star ratings, and the cart count bubble — never for large filled blocks"
      - "Use #8bbd78 Sage Leaf for hairline decorative borders and icon strokes, not for filled backgrounds"
      - "Keep component radii at 0px for cards, buttons, and product images; use 9999px only for the chat pill and color swatches"
      - "Use TTRamillas serif at 32–42px for editorial headlines; switch to FoundersGrotesk for all UI text and product information"

    don_t:
      - "Don't use pure #000000 for text or button fills — use #241f20 Ink instead for warmth"
      - "Don't apply border-radius larger than 2px to product cards, buttons, or product images — the sharp rectangular geometry is the signature"
      - "Don't use the sage green #8bbd78 or blue #6487ba as large filled backgrounds — they are accent and action colors only"
      - "Don't set tracking below 0.025em on FoundersGrotesk body or UI text at 14–18px — the wide tracking is intentional"
      - "Don't use drop shadows or box-shadows on cards or buttons — the system is flat, separated only by hairline borders and surface color shifts"
      - "Don't use the blush #edcdc2 for UI components — it's a photographic surface tone, not a UI fill"
      - "Don't introduce a new chromatic color for hover or active states — deepen the existing color (e.g. #8bbd78 → #5b7763) rather than adding new hues"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Raw Linen | `#f5f4ee` | Base page canvas — all section backgrounds sit on this warm cream |"
    info: "| 2 | White | `#ffffff` | Product cards, hero overlay card, badge fills — the only true-white surface |"
    info: "| 3 | Blush | `#edcdc2` | Accent wash — soft highlight zones in hero and editorial imagery |"
    info: "| 4 | Midnight Forest | `#233735` | Dark CTA surface — filled primary buttons, inverted panels |"

  imagery:

    info: "Large-scale editorial product and lifestyle photography dominates the visual language. Product shots are flat-lay on neutral surfaces (blush pink, raw linen), showing garments alone or in packaging with no lifestyle context. Hero imagery is split editorial: product-on-left, model-on-right, both warm-toned and softly lit. Category cards use full-bleed model portraits against neutral studio backdrops. No illustration, no 3D, no abstract graphics — photography is the only visual content and it occupies roughly 70% of the viewport on product-heavy pages. Stars in the rating system are the only graphic iconography; product imagery carries all the brand warmth."

  layout:

    info: "Max-width ~1280px centered, with the hero stretching full-bleed. The hero is a full-viewport editorial image with a centered white overlay card containing headline + CTA + meta. Below the hero, sections alternate between the Raw Linen canvas and product imagery, separated by generous 64px vertical gaps. The product grid is 3 columns; the category grid is 5 columns; the press strip is a 4-column single row of quotes. Navigation is a single horizontal bar with centered serif logo, left-aligned category links, and right-aligned account/cart cluster. The page rhythm is slow and editorial: large image blocks, then text, then image — never dense information stacking."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #241f20"
    - "background: #f5f4ee (canvas) / #ffffff (cards)"
    - "border: #241f20 (hairline) / #8bbd78 (decorative)"
    - "accent: #8bbd78 Sage / #edcdc2 Blush / #ff965b Ember"
    - "primary action: #233735 (filled action)"

    example_component_prompts:
    - "*Hero overlay card*: Full-bleed editorial image (1280px wide), centered white card overlay (#ffffff, 0px radius, 48px padding). Serif headline 'Everyday Essentials She Deserves' at 42px TTRamillas weight 400, #241f20, -0.01em tracking. Dark filled CTA below: #233735 background, white text 'SHOP MOTHERS DAY', 14px FoundersGrotesk weight 500, 0.025em tracking, 16px/24px padding, 0px radius. Meta line: 14px FoundersGrotesk #808080, then star row (#ff965b stars) + 'Over 13,000 Five Star Reviews' in 14px #241f20."

    - "*Product card*: Square product image on #f5f4ee canvas, 0px radius, no border. Ember #ff965b NEW badge (2px radius) top-right. Below image: 13px #ff965b stars + 13px #808080 review count. 'ORGANIC COTTON' label at 13px FoundersGrotesk weight 500, #241f20, 0.10em tracking, uppercase. Product name at 16px weight 500 #241f20. Price at 16px #241f20. Color swatch row of 16px circles, current variant ringed 1px #241f20."

    - "*Category card*: Portrait-ratio model image filling card width, 0px radius, no border, sits on Raw Linen. Label 'Shop Underwear' below at 20px FoundersGrotesk weight 400, #241f20, 0.025em tracking. Count '13 Products' at 14px #808080, 0.025em tracking. No card background — image breathes into canvas."

    - "*Announcement bar*: Full-bleed #8bbd78 Sage strip, 8px vertical padding. Centered text at 13px FoundersGrotesk weight 400, #241f20, 0.10em tracking, uppercase. No border, no shadow."

    - "*Outlined action button*: Transparent background, 1px border #6487ba Heritage Blue, text #6487ba at 14px FoundersGrotesk weight 500, 0.025em tracking, uppercase, 14px/20px padding, 0px radius. The chromatic border is the action signal — no fill change on hover, only slight darken."

  typography_signature:

    info: "The defining typographic move is the wide-tracked uppercase micro-label. FoundersGrotesk at 13–15px with 0.10em to 0.15em letter-spacing appears on every category label, badge, and product attribute ('NEW', 'ORGANIC COTTON', 'Shop Underwear', announcement bar text). This tracking pattern is unusual — most systems stay at 0–0.05em — and it gives the UI a fashion-editorial cadence. Pair this with TTRamillas serif at 32–42px for headlines; the contrast between the airy tracked sans and the tight elegant serif (-0.01em) is the brand's typographic voice."

  flatness_philosophy:

    info: "Zero shadows. Zero gradients. Zero blur effects. Separation between elements comes from: surface color shifts (#f5f4ee → #ffffff), hairline 1px borders, and whitespace. Product images float directly on the Raw Linen canvas with no card containers or dividers. This flatness is deliberate — it lets the editorial photography do all the visual work and keeps the UI from competing with the garments."

  similar_brands:

    - "**Everlane** — Same editorial product photography on warm neutral canvas, wide-tracked uppercase labels, serif headlines paired with geometric sans, and zero-shadow flat component design"
    - "**Cuyana** — Shared warm cream canvas, restrained earth-tone palette, hairline borders, and the boutique-editorial feel where photography and whitespace replace decorative UI"
    - "**Reformation** — Same full-bleed editorial hero, serif logo wordmark, warm neutral backgrounds, and product grids where images sit directly on canvas without card containers"
    - "**Glossier** — Similar soft, warm light-mode aesthetic with muted accent colors used sparingly on a near-white canvas, and a flat component system without heavy shadows"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #241f20;
          --color-raw-linen: #f5f4ee;
          --color-white: #ffffff;
          --color-fog: #808080;
          --color-blush: #edcdc2;
          --color-charcoal: #26262a;
          --color-sage-leaf: #8bbd78;
          --color-heritage-blue: #6487ba;
          --color-midnight-forest: #233735;
          --color-ember: #ff965b;
        
          /* Typography — Font Families */
          --font-foundersgrotesk: 'FoundersGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ttramillaslight: 'TTRamillas_Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: 0.1px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: 0.025px;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.24;
          --tracking-heading-lg: -0.01px;
          --text-display: 42px;
          --leading-display: 1.29;
          --tracking-display: -0.01px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 64px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 2px;
          --radius-buttons: 0px;
          --radius-swatches: 9999px;
          --radius-chat-pill: 9999px;
        
          /* Surfaces */
          --surface-raw-linen: #f5f4ee;
          --surface-white: #ffffff;
          --surface-blush: #edcdc2;
          --surface-midnight-forest: #233735;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #241f20;
          --color-raw-linen: #f5f4ee;
          --color-white: #ffffff;
          --color-fog: #808080;
          --color-blush: #edcdc2;
          --color-charcoal: #26262a;
          --color-sage-leaf: #8bbd78;
          --color-heritage-blue: #6487ba;
          --color-midnight-forest: #233735;
          --color-ember: #ff965b;
        
          /* Typography */
          --font-foundersgrotesk: 'FoundersGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ttramillaslight: 'TTRamillas_Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: 0.1px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: 0.025px;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.24;
          --tracking-heading-lg: -0.01px;
          --text-display: 42px;
          --leading-display: 1.29;
          --tracking-display: -0.01px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-160: 160px;
        }