flowers_for_society___style_reference:
  info: "> indigo editorial on white gallery — a single deep-violet voice laid over a paper-white canvas, where the product photograph and the typography do all the talking."

  theme: "light"

  info: "Flowers For Society is a fashion house that speaks in a single, assertive voice: deep indigo (#203b90) threading through every surface — logo, headings, buttons, borders, and hero scrims — anchored by a white gallery that breathes. The product is the hero: full-bleed photography with gradient overlays for legibility, oversized pill-shaped CTAs at 41-60px radius, and centered display type that uses Integral's tight line-heights (0.92-1.0) to compress vertical space. The system is deliberately minimal — two custom typefaces, no shadows, extreme border radii, and a single chromatic color. Soehne carries the UI with wide letter-spacing (0.033-0.063em) that gives even small text a boutique, editorial cadence. The result feels like a magazine spread: confident, restrained, and unmistakably branded."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Indigo Statement | `#203b90` | `--color-indigo-statement` | Primary brand color — logo, all headings, primary action fills, action borders, and the left-side hero scrim. This is the only chromatic color in the system; it appears on roughly every surface to assert brand presence |"
    info: "| Indigo Mist | `#7989bc` | `--color-indigo-mist` | Tonal violet for subtle borders and secondary outlines — the softer sibling of Indigo Statement used where full saturation would feel heavy |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |"
    info: "| Carbon | `#000000` | `--color-carbon` | Icon strokes, sharp borders, and high-contrast text accents. Used sparingly where the indigo brand color would be too soft |"
    info: "| Graphite | `#1b1b1b` | `--color-graphite` | Near-black for button borders and the SHOP NOW text — a softer alternative to pure black for refined edges |"
    info: "| Fog | `#f2f2f2` | `--color-fog` | Footer background — the only departure from pure white, creating a quiet band at the page base |"

  tokens___typography:

    soehne___body__navigation__buttons__ui_text___the_workhorse__the_deliberately_wide_tracking_on_small_sizes_0_063em_at_11px__0_055em_at_14px_gives_even_utility_text_a_boutique__editorial_cadence__weight_700_is_reserved_for_nav_items_and_button_labels_____font_soehne:
      - "**Substitute:** Inter, DM Sans"
      - "**Weights:** 400, 700"
      - "**Sizes:** 11px, 14px, 16px, 18px"
      - "**Line height:** 1.20, 1.30, 1.40, 1.50, 1.80"
      - "**Letter spacing:** 0.033em at 16-18px, 0.043-0.056em at 14px, 0.063em at 11px"
      - "**Role:** Body, navigation, buttons, UI text — the workhorse. The deliberately wide tracking on small sizes (0.063em at 11px, 0.055em at 14px) gives even utility text a boutique, editorial cadence. Weight 700 is reserved for nav items and button labels."

    integral___display_and_headings___the_editorial_voice__used_at_a_single_weight_400_that_relies_on_the_font_s_natural_density_and_extreme_tight_line_heights_0_92_1_0_to_create_compressed__magazine_style_display_type__the_0_077em_tracking_at_52px_is_a_logo_specific_treatment_____font_integral:
      - "**Substitute:** Druk Wide, Bebas Neue, Anton (for display only)"
      - "**Weights:** 400"
      - "**Sizes:** 13px, 15px, 18px, 35px, 37px, 45px, 52px"
      - "**Line height:** 0.92, 1.00, 1.10, 1.28"
      - "**Letter spacing:** 0.013-0.017em at 45-52px (tight), 0.035-0.048em at 35-37px (moderate), 0.04em at 18px, 0.077em at 52px (logo display)"
      - "**Role:** Display and headings — the editorial voice. Used at a single weight (400) that relies on the font's natural density and extreme tight line-heights (0.92-1.0) to create compressed, magazine-style display type. The 0.077em tracking at 52px is a logo-specific treatment."

    arial___system_fallback_for_non_brand_contexts_email__transactional_surfaces__not_used_in_the_main_site_chrome_____font_arial:
      - "**Substitute:** system-ui"
      - "**Weights:** 400, 700"
      - "**Sizes:** 14px"
      - "**Line height:** 1.20"
      - "**Role:** System fallback for non-brand contexts (email, transactional surfaces). Not used in the main site chrome."

    nunito_sans_klaviyo_hosted___nunito_sans_klaviyo_hosted___detected_in_extracted_data_but_not_described_by_ai____font_nunito_sans_klaviyo_hosted:
      - "**Weights:** 400, 700"
      - "**Sizes:** 18px, 20px"
      - "**Line height:** 1, 1.2"
      - "**Role:** Nunito-Sans-Klaviyo-Hosted — detected in extracted data but not described by AI"

    gtstandard_m___gtstandard_m___detected_in_extracted_data_but_not_described_by_ai____font_gtstandard_m:
      - "**Weights:** 400"
      - "**Sizes:** 18px"
      - "**Line height:** 1.5"
      - "**Letter spacing:** 0.033"
      - "**Role:** GTStandard-M — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.5 | 0.69px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | 0.6px | `--text-body-sm` |"
      info: "| body | 16px | 1.4 | 0.53px | `--text-body` |"
      info: "| subheading | 18px | 1.1 | 0.72px | `--text-subheading` |"
      info: "| heading-sm | 35px | 1 | 1.23px | `--text-heading-sm` |"
      info: "| heading | 45px | 1 | 0.77px | `--text-heading` |"
      info: "| heading-lg | 52px | 0.92 | 0.68px | `--text-heading-lg` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 41px |"
      info: "| cards | 4px |"
      info: "| inputs | 41px |"
      info: "| buttons | 41px |"
      info: "| buttons-lg | 60px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 50px"
      - "**Card padding:** 30px"
      - "**Element gap:** 12px"

  components:

    announcement_bar:
      role: "Top-of-page utility strip for promotions or campaign tags."

      info: "White background, centered text in Soehne 11px weight 700, uppercase, letter-spacing 0.063em, #203b90. Height ~40px. May include a trailing arrow glyph."

    header_navigation:
      role: "Primary site navigation — left links, centered logo, right utility icons."

      info: "White background, no border or shadow. Left: nav links in Soehne 14px weight 400, #203b90, letter-spacing 0.043em, separated by ~24px gap. Center: logo mark. Right: account and cart icons in #203b90, 20-24px size."

    logo_mark:
      role: "Wordmark — the brand's single most identifiable element."

      info: "\"FLOWERS FOR SOCIETY\" stacked in two lines, Integral 52px weight 400, #203b90, letter-spacing 0.077em, line-height 0.92. The wide tracking and tight line-height create a compressed, editorial logo block."

    hero_banner:
      role: "Full-bleed product showcase with text overlay."

      info: "Edge-to-edge product photography (sneaker in a daisy field). Left-to-right gradient scrim from rgba(32,59,144,0.7) to transparent for text legibility. Overlay text: Soehne 14-18px weight 700, uppercase, white, letter-spacing 0.055em. CTA positioned bottom-right."

    primary_cta_button_pill:
      role: "The dominant call-to-action — used for SHOP NOW and primary actions."

      info: "White fill (#ffffff), #1b1b1b text, 41-60px border-radius (pill), Soehne 14px weight 700, uppercase, letter-spacing 0.043em, 30px horizontal padding / 12-15px vertical padding. No border, no shadow. The white-on-image contrast makes it pop against the hero photograph."

    indigo_action_button:
      role: "Secondary CTA on light surfaces where the brand color should carry the action."

203b90_fill__white_text__41px_border_radius__soehne_14px_weight_700__uppercase__letter_spacing_0_043em__30px_horizontal_padding__used_on_white_or_light_gray_sections_where_a_white_pill_would_lack_contrast:

    section_display_heading:
      role: "Centered editorial headlines for content sections below the hero."

      info: "Integral 35-45px weight 400, #203b90, uppercase, centered, letter-spacing 0.017-0.035em, line-height 1.0. Example: \"A BRAND BUILT ON PURPOSE\" — tight, compressed, statement-making."

    navigation_link:
      role: "Header and inline navigation items."

      info: "Soehne 14px weight 400, #203b90, letter-spacing 0.043em, no underline, no hover color change indicated (the indigo is already the brand color). 24px gap between items."

    footer:
      role: "Page-base utility area."

f2f2f2_background__30px__padding__soehne_14px_weight_400_in_203b90_for_links_and_body_text__the_only_non_white_surface_on_the_site:

    input_field:
      role: "Form inputs (email, search, etc.)."

      info: "41px border-radius (pill), 1px border in #000000 or #203b90, 15-16px padding, Soehne 16px weight 400. The extreme radius matches the button system for visual consistency."

  do_s_and_don_ts:

    do:
      - "Use #203b90 as the only chromatic color — it should appear on the logo, headings, borders, and the hero scrim to assert brand identity."
      - "Use pill-shaped buttons at 41-60px radius for all actions; never use rectangular or slightly-rounded buttons."
      - "Use full-bleed product photography with a left-to-right gradient scrim for hero sections."
      - "Use Soehne with wide letter-spacing (0.043-0.063em) for all UI and body text to maintain the editorial cadence."
      - "Use Integral with tight line-heights (0.92-1.0) for all display headings to create compressed, magazine-style type."
      - "Keep the page white-dominant — use #f2f2f2 only for the footer band."
      - "Use 30px horizontal padding and 12-15px vertical padding on all interactive elements."

    don_t:
      - "Don't introduce additional chromatic colors — the entire system speaks in indigo and neutrals."
      - "Don't use box-shadows or elevation effects — the design is intentionally flat."
      - "Don't use rectangular buttons or inputs — the extreme radii (41-60px) are a signature."
      - "Don't use body fonts for headings or display text — Integral carries the editorial voice exclusively."
      - "Don't use tight letter-spacing on Soehne — the wide tracking is what gives the UI its boutique feel."
      - "Don't add decorative gradients or background patterns to non-hero sections."
      - "Don't use multiple border colors — stick to #203b90 for brand borders, #000000 for utility borders."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper White Canvas | `#ffffff` | Primary page background — the white gallery that lets indigo carry the brand. |"
    info: "| 2 | Fog Footer | `#f2f2f2` | The only non-white surface, used exclusively for the footer band. |"

  elevation:

    info: "The design is intentionally flat — no shadows, no elevation effects. Visual hierarchy is achieved through color (indigo on white), typography (Integral display vs. Soehne body), and the extreme border-radius system, not through depth."

  imagery:

    info: "Full-bleed, high-quality product photography in natural, romantic settings — sneakers in a daisy field, products styled against organic environments. The imagery is lush, saturated, and lifestyle-rich, contrasting with the flat, minimal UI chrome. Treatment: edge-to-edge, no rounded corners, gradient scrims for text overlay. The photograph is the hero; the UI is the frame."

  layout:

    info: "Full-bleed hero photography dominates the first viewport, followed by a centered content stack on a white canvas. The header is a thin white bar with left-aligned nav, centered logo, and right utility icons — no sticky behavior indicated. Content sections use centered display headings with generous vertical breathing room (50px+ section gaps). The layout is editorial: each section is a statement, not a grid of features. Navigation is minimal — four text links, no mega-menu, no sidebar."

  agent_prompt_guide:

    quick_color_reference:
    - "text (headings): #203b90"
    - "text (body): #000000"
    - "background: #ffffff"
    - "border (brand): #203b90"
    - "accent: #7989bc"
    - "primary action: #203b90 (filled action)"

    example_component_prompts:

    - "Create a Primary Action Button: #203b90 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "**Section Display Heading**: Centered on white canvas. \"A BRAND BUILT ON PURPOSE\" in Integral 45px weight 400, #203b90, uppercase, letter-spacing 0.017em, line-height 1.0. 50px vertical margin above and below."

    - "**Header Navigation**: White background, no border, no shadow. Left: nav links (Footwear, Apparel & Collectables, About us, Stories) in Soehne 14px weight 400, #203b90, letter-spacing 0.043em, 24px gap. Center: logo mark \"FLOWERS FOR SOCIETY\" in Integral 52px weight 400, #203b90, letter-spacing 0.077em, line-height 0.92. Right: account and cart icons in #203b90, 24px size."

    - "**Announcement Bar**: White background, centered text \"FEEL THE FLOW →\" in Soehne 11px weight 700, uppercase, #203b90, letter-spacing 0.063em. Height 40px, no border."

    - "**Footer Band**: #f2f2f2 background, 40px padding. Links and text in Soehne 14px weight 400, #203b90, letter-spacing 0.043em."

  similar_brands:

    - "**Aesop** — Same single-color brand identity approach — a deep, distinctive hue carried across a white canvas with editorial typography and minimal chrome."
    - "**Aimé Leon Dore** — Same boutique fashion aesthetic — wide letter-spacing on UI text, pill-shaped buttons, full-bleed lifestyle product photography, and a single brand color anchoring the entire system."
    - "**Glossier** — Same flat, no-shadow design philosophy with a single chromatic brand color and generous white space letting product photography breathe."
    - "**On Running** — Same extreme border-radius system (pill buttons and inputs) and lifestyle product photography treatment with gradient scrims for text overlays."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-indigo-statement: #203b90;
          --color-indigo-mist: #7989bc;
          --color-paper-white: #ffffff;
          --color-carbon: #000000;
          --color-graphite: #1b1b1b;
          --color-fog: #f2f2f2;
        
          /* Typography — Font Families */
          --font-soehne: 'Soehne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-integral: 'Integral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nunito-sans-klaviyo-hosted: 'Nunito-Sans-Klaviyo-Hosted', 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: 11px;
          --leading-caption: 1.5;
          --tracking-caption: 0.69px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.6px;
          --text-body: 16px;
          --leading-body: 1.4;
          --tracking-body: 0.53px;
          --text-subheading: 18px;
          --leading-subheading: 1.1;
          --tracking-subheading: 0.72px;
          --text-heading-sm: 35px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: 1.23px;
          --text-heading: 45px;
          --leading-heading: 1;
          --tracking-heading: 0.77px;
          --text-heading-lg: 52px;
          --leading-heading-lg: 0.92;
          --tracking-heading-lg: 0.68px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-52: 52px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 50px;
          --card-padding: 30px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-3xl: 41px;
          --radius-full: 60px;
        
          /* Named Radii */
          --radius-tags: 41px;
          --radius-cards: 4px;
          --radius-inputs: 41px;
          --radius-buttons: 41px;
          --radius-buttons-lg: 60px;
        
          /* Surfaces */
          --surface-paper-white-canvas: #ffffff;
          --surface-fog-footer: #f2f2f2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-indigo-statement: #203b90;
          --color-indigo-mist: #7989bc;
          --color-paper-white: #ffffff;
          --color-carbon: #000000;
          --color-graphite: #1b1b1b;
          --color-fog: #f2f2f2;
        
          /* Typography */
          --font-soehne: 'Soehne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-integral: 'Integral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nunito-sans-klaviyo-hosted: 'Nunito-Sans-Klaviyo-Hosted', 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: 11px;
          --leading-caption: 1.5;
          --tracking-caption: 0.69px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.6px;
          --text-body: 16px;
          --leading-body: 1.4;
          --tracking-body: 0.53px;
          --text-subheading: 18px;
          --leading-subheading: 1.1;
          --tracking-subheading: 0.72px;
          --text-heading-sm: 35px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: 1.23px;
          --text-heading: 45px;
          --leading-heading: 1;
          --tracking-heading: 0.77px;
          --text-heading-lg: 52px;
          --leading-heading-lg: 0.92;
          --tracking-heading-lg: 0.68px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-52: 52px;
          --spacing-60: 60px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-3xl: 41px;
          --radius-full: 60px;
        }