fallen_grape___style_reference:
  info: "> Sun-drenched vineyard at golden hour. Warm cream paper, walnut ink, terracotta warmth — a wine label breathed into a full interface."

  theme: "light"

  info: "Fallen Grape uses a sun-drenched, vineyard-at-golden-hour language: warm cream canvases, deep walnut typography, and peach-terracotta accents that feel pressed from ripe grapes rather than screen-painted. The interface stays nearly monochromatic in warm neutrals, letting product photography and a single sage-green accent carry visual variety. Hairline brown borders separate regions instead of shadows or elevation — surfaces are flat and paper-like, evoking a hand-pressed wine label. Typography is a deliberate two-voice system: a humanist serif (Romie) for brand and editorial moments, paired with a condensed utilitarian sans (Arial Narrow) for functional text, creating a tension between craft and clarity that defines the brand."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Vintage Cream | `#ece0d2` | `--color-vintage-cream` | Page canvas, section backgrounds, footer surface — the warm paper tone that grounds all content and sets the sun-faded, natural mood |"
    info: "| Bone White | `#f3f3f3` | `--color-bone-white` | Card surfaces, navigation background — a cooler off-white that lifts cards above the cream canvas without harsh contrast |"
    info: "| Walnut Ink | `#573d21` | `--color-walnut-ink` | Primary text, headings, body copy, link color — deep brown that reads as ink on aged paper rather than digital black |"
    info: "| Saddle Brown | `#7c664d` | `--color-saddle-brown` | Hairline borders (cards, nav, body dividers), secondary text, muted UI lines — the structural outline color that replaces shadows |"
    info: "| Peach Sand | `#e1c6ab` | `--color-peach-sand` | Outlined action border, button fill for shop actions — warm neutral peach for CTA buttons and soft fills |"
    info: "| Terracotta Glow | `#e3a36e` | `--color-terracotta-glow` | Filled action buttons, link highlights, secondary call-to-action fill — saturated peach-orange that signals action and energy |"
    info: "| Apricot Whisper | `#efa164` | `--color-apricot-whisper` | Top announcement bar, promotional highlights, hover state for terracotta buttons — the warmest orange, used sparingly for urgency and promos |"
    info: "| Vine Sage | `#d8deb7` | `--color-vine-sage` | Decorative heading accent, botanical illustration tint — the only green in the system, evoking grape leaves and organic origin |"

  tokens___typography:

    romie___brand_wordmark__hero_display_headlines__section_headings__editorial_body___a_humanist_serif_that_brings_warmth_and_craft_authority__the_weight_400_at_48_64px_sizes_is_the_signature_display_voice__700_is_used_for_emphasis_in_smaller_text__free_substitute__fraunces__lora__or_dm_serif_display____font_romie:
      - "**Substitute:** Fraunces"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12px, 15px, 20px, 48px, 64px"
      - "**Line height:** 1.20-1.70"
      - "**Letter spacing:** 0.0300em"
      - "**Role:** Brand wordmark, hero display headlines, section headings, editorial body — a humanist serif that brings warmth and craft authority. The weight 400 at 48-64px sizes is the signature display voice; 700 is used for emphasis in smaller text. Free substitute: Fraunces, Lora, or DM Serif Display"

    arial_narrow___body_copy__navigation_items__button_labels__product_titles__utility_text___a_condensed_utilitarian_sans_that_creates_deliberate_tension_with_the_romie_serif__uppercase_with_widened_tracking_0_0630em_for_nav_and_button_labels_gives_a_vintage_label_feel__free_substitute__barlow_condensed__oswald__or_roboto_condensed____font_arial_narrow:
      - "**Substitute:** Barlow Condensed"
      - "**Weights:** 400, 700"
      - "**Sizes:** 13px, 14px, 16px, 18px, 20px, 24px, 48px"
      - "**Line height:** 1.20-1.80"
      - "**Letter spacing:** 0.0300em-0.0630em"
      - "**Role:** Body copy, navigation items, button labels, product titles, utility text — a condensed utilitarian sans that creates deliberate tension with the Romie serif. Uppercase with widened tracking (0.0630em) for nav and button labels gives a vintage label feel. Free substitute: Barlow Condensed, Oswald, or Roboto Condensed"

    gtstandard_m___gtstandard_m___detected_in_extracted_data_but_not_described_by_ai____font_gtstandard_m:
      - "**Weights:** 400"
      - "**Sizes:** 20px"
      - "**Line height:** 1.5"
      - "**Letter spacing:** 0.03"
      - "**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 | 12px | 1.3 | 0.36px | `--text-caption` |"
      info: "| body-sm | 14px | 1.7 | 0.42px | `--text-body-sm` |"
      info: "| body | 16px | 1.7 | 0.48px | `--text-body` |"
      info: "| subheading | 20px | 1.5 | 0.6px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | 0.72px | `--text-heading-sm` |"
      info: "| heading | 48px | 1.2 | 1.44px | `--text-heading` |"
      info: "| display | 64px | 1.2 | 1.92px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 110 | 110px | `--spacing-110` |"

    border_radius:

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

    layout:

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

  components:

    announcement_bar:
      role: "Top promotional banner"

      info: "Full-width strip at page top with Apricot Whisper (#efa164) or Terracotta Glow (#e3a36e) background, centered text in Walnut Ink (#573d21), Arial Narrow 12-13px uppercase with 0.0430em tracking. Padding 5px top/bottom. No border, no radius."

    header_navigation:
      role: "Primary site navigation"

      info: "Bone White (#f3f3f3) background with 1px Saddle Brown (#7c664d) bottom border. Left-aligned nav links (SHOP ALL with dropdown caret, SHOP MERCH, ABOUT US) and right-aligned (LOGIN, CART) in Arial Narrow 13-14px uppercase, 0.0430em tracking, Walnut Ink color. Centered Romie brand wordmark sits between groups, 20px size."

    hero_illustration_banner:
      role: "Full-bleed hero with illustrated scene"

      info: "Full-width illustrated landscape scene with peach sky gradient, grape vine clusters, butterfly motifs, and centered wine bottle silhouette. Headline 'It's natural' in Romie 48-64px weight 400, Walnut Ink, centered. CTA button overlaid on illustration. No border or card treatment — the illustration IS the hero."

    shop_all_cta_button:
      role: "Primary call-to-action"

      info: "Rectangular button (0px radius) with Peach Sand (#e1c6ab) or Terracotta Glow (#e3a36e) background, 1px Walnut Ink (#573d21) border, padding 10px 24px. Text in Arial Narrow 13-14px uppercase, 0.0430em tracking, Walnut Ink. No shadow, no hover lift — warmth comes from color."

    section_headline:
      role: "Editorial section titles"

      info: "Romie weight 400 at 48px, Walnut Ink (#573d21), centered, with generous line-height 1.20. No underline or decorative element — the serif itself carries authority. Used for 'The 3-Pack', product section titles."

    product_card:
      role: "Merchandise and wine product display"

      info: "Bone White (#f3f3f3) background, 1px Saddle Brown (#7c664d) border, 0px radius. Image fills top portion edge-to-edge. Product title in Arial Narrow 14-16px uppercase bold below image. Price in Arial Narrow 13-14px, Walnut Ink, directly below title. Padding 17px sides. No shadow, no hover elevation."

    product_grid_carousel:
      role: "3-column product showcase with pagination"

      info: "3-column grid of Product Cards with 24px gap. Left/right arrow navigation controls in Saddle Brown. Pagination dots below grid: active dot in Terracotta Glow (#e3a36e), inactive in Saddle Brown outline. Carousel arrow buttons are 36x36px, borderless, centered vertically."

    editorial_text_block:
      role: "Long-form brand storytelling content"

      info: "Romie 20px weight 400, Walnut Ink, centered text with 1.70 line-height for readability. Used for 'Natural wine made with organically farmed grapes...' statements. No background, no border — text floats on cream canvas with generous vertical breathing room."

    two_column_about_section:
      role: "Brand story with image and text"

      two_column_layout: "left column contains a rectangular image (edge-to-edge, 0px radius), right column contains 'ABOUT US' heading in Arial Narrow 20px bold uppercase with Saddle Brown border-bottom, followed by body text in Romie 15-16px, Walnut Ink. Columns separated by 48px gap."

    navigation_dropdown:
      role: "SHOP ALL category menu"

      info: "Dropdown panel appears below SHOP ALL nav item. Bone White background, 1px Saddle Brown border, 0px radius. Menu items in Arial Narrow 14px, Walnut Ink, with 8-10px vertical padding. No shadow — the border defines the edge."

    footer:
      role: "Site footer with links and info"

      info: "Vintage Cream (#ece0d2) background extending full-width. Contains centered text blocks in Romie 12-15px, Walnut Ink. Minimal — likely newsletter signup, social links, legal text. No heavy visual treatment."

  do_s_and_don_ts:

    do:
      - "Use Romie (serif) for all display headlines, brand wordmark, and editorial body text at 20px and above"
      - "Use Arial Narrow (condensed sans) for all functional UI: navigation, buttons, product titles, utility text — always uppercase with 0.0430em-0.0630em tracking"
      - "Set all borders to 1px solid Saddle Brown (#7c664d) — this is the primary structural separator, never use shadows for elevation"
      - "Maintain 0px border-radius on all components — the sharp edges reinforce the wine label and hand-pressed paper aesthetic"
      - "Use Peach Sand (#e1c6ab) or Terracotta Glow (#e3a36e) for button backgrounds with Walnut Ink text and 1px Walnut Ink border"
      - "Keep the canvas at Vintage Cream (#ece0d2) for most full-bleed sections; reserve Bone White (#f3f3f3) for cards and navigation to create subtle layering"
      - "Use Vine Sage (#d8deb7) sparingly — only for decorative heading accents or botanical illustration tints, never for interactive elements"

    don_t:
      - "Do not add box-shadows or drop-shadows to any component — this design is intentionally flat and paper-like"
      - "Do not use rounded corners (border-radius > 0px) on cards, buttons, or images — the sharp 0px edges are signature"
      - "Do not use cool grays, blues, or pure white (#ffffff) for backgrounds — the entire palette is warm earth tones"
      - "Do not use Arial Narrow for display headlines or large editorial text — reserve it for functional/utility text under 24px"
      - "Do not use the condensed sans for body paragraphs longer than 2 lines — switch to Romie for readability"
      - "Do not apply Vine Sage (#d8deb7) to buttons, links, or interactive states — it is decorative only"
      - "Do not introduce bright primary colors (saturated blues, greens, purples) — all accents must stay in the warm peach/terracotta family"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ece0d2` | Base page background, footer, full-bleed sections |"
    info: "| 1 | Card | `#f3f3f3` | Product cards, navigation bar, elevated content blocks |"
    info: "| 2 | Action Surface | `#e1c6ab` | Button fills, interactive highlights |"

  elevation:

    info: "This design deliberately avoids shadows. Separation between surfaces is achieved through hairline Saddle Brown (#7c664d) borders, warm tonal contrast between cream and bone-white, and generous whitespace. The flat, paper-like quality reinforces the natural, hand-crafted wine label metaphor."

  imagery:

    info: "Product photography is warm-toned, sunlit, and tightly cropped on the object — wine bottles in earthy settings, hats on natural surfaces, clothing against botanical backdrops. The hero features a custom illustrated landscape with watercolor-style grape vines, butterflies, rolling hills, and a centered bottle silhouette in peach and sage tones. Photography style is organic and lifestyle-adjacent but not staged — products appear in their natural context (wood, leaves, fabric). All images use 0px border-radius for sharp edges. The visual density is moderate: one large hero illustration, then product photography in grid format, then editorial text sections. Iconography is minimal — the illustrations carry the visual storytelling rather than UI icons."

  layout:

    info: "Full-width sections with centered max-width 1200px content containers. The hero is full-bleed illustrated landscape with centered headline and button overlay. Below the hero, content alternates between centered editorial text blocks and 3-column product card grids. The 3-pack section uses a 3-column image grid followed by a product carousel with arrow navigation. The about section uses a 2-column asymmetric layout (image left, text right). Vertical rhythm is generous with 80px section gaps. Navigation is a top bar with left/center/right content zones. The overall page flows top-to-bottom in a single column with no sidebar. Dense information is avoided — the design breathes with whitespace and large type."

  agent_prompt_guide:

  quick_color_reference:
    - "Primary text: #573d21 (Walnut Ink)"
    - "Background (canvas): #ece0d2 (Vintage Cream)"
    - "Card surface: #f3f3f3 (Bone White)"
    - "Border: #7c664d (Saddle Brown)"
    - "Accent (decorative/botanical): #d8deb7 (Vine Sage)"
    - "primary action: #e1c6ab (filled action)"

  example_component_prompts:

    - "**Create a product card**: Bone White (#f3f3f3) background, 1px solid #7c664d border, 0px radius. Product image fills top edge-to-edge. Product title below in Arial Narrow 16px bold uppercase, #573d21. Price in Arial Narrow 14px, #573d21. 17px horizontal padding on text area. No shadow."

    - "**Create a hero headline**: Romie weight 400, 64px, #573d21, letter-spacing 1.92px, centered. Line-height 1.20. No background, no border. Sits directly on Vintage Cream (#ece0d2) canvas."

    - "**Create a Shop All button**: 0px radius, background #e1c6ab, 1px solid #573d21 border, padding 10px 24px. Text: 'SHOP ALL' in Arial Narrow 13px bold uppercase, #573d21, letter-spacing 0.559px. No shadow, no hover transform."

    - "**Create a navigation bar**: #f3f3f3 background, 1px solid #7c664d bottom border. Nav items left-aligned: 'SHOP ALL', 'SHOP MERCH', 'ABOUT US' in Arial Narrow 13px uppercase, #573d21, letter-spacing 0.559px. Brand wordmark centered in Romie 20px. Right-aligned: 'LOGIN', 'CART' in same style. Padding 17px vertical."

    - "**Create an about section**: Two columns with 48px gap. Left column: full-bleed image (0px radius, no border). Right column: 'ABOUT US' heading in Arial Narrow 20px bold uppercase, #573d21, with 1px solid #7c664d border-bottom. Body text in Romie 16px weight 400, #573d21, line-height 1.70."

  similar_brands:

    - "**Brightland** — Same warm cream canvas, brown/terracotta accent palette, and humanist serif + condensed sans typography pairing for an artisan food/bev brand"
    - "**B Corp Wine Brands (e.g., Folk Machine)** — Similar earth-tone palette, vintage label typography with condensed sans uppercase, and 0px-radius sharp product photography grids"
    - "**Cote&Ciel** — Same warm neutral background, brown text on cream, minimal flat design with hairline borders instead of shadows, serif/sans typographic contrast"
    - "**Toast (tabeo)** — Identical flat aesthetic with warm paper-tone backgrounds, brown text, and borderless/shadowless component design that feels printed rather than digital"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-vintage-cream: #ece0d2;
          --color-bone-white: #f3f3f3;
          --color-walnut-ink: #573d21;
          --color-saddle-brown: #7c664d;
          --color-peach-sand: #e1c6ab;
          --color-terracotta-glow: #e3a36e;
          --color-apricot-whisper: #efa164;
          --color-vine-sage: #d8deb7;
        
          /* Typography — Font Families */
          --font-romie: 'Romie', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial-narrow: 'Arial Narrow', 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: 12px;
          --leading-caption: 1.3;
          --tracking-caption: 0.36px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.7;
          --tracking-body-sm: 0.42px;
          --text-body: 16px;
          --leading-body: 1.7;
          --tracking-body: 0.48px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --tracking-subheading: 0.6px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 0.72px;
          --text-heading: 48px;
          --leading-heading: 1.2;
          --tracking-heading: 1.44px;
          --text-display: 64px;
          --leading-display: 1.2;
          --tracking-display: 1.92px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-100: 100px;
          --spacing-110: 110px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 10px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #ece0d2;
          --surface-card: #f3f3f3;
          --surface-action-surface: #e1c6ab;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-vintage-cream: #ece0d2;
          --color-bone-white: #f3f3f3;
          --color-walnut-ink: #573d21;
          --color-saddle-brown: #7c664d;
          --color-peach-sand: #e1c6ab;
          --color-terracotta-glow: #e3a36e;
          --color-apricot-whisper: #efa164;
          --color-vine-sage: #d8deb7;
        
          /* Typography */
          --font-romie: 'Romie', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial-narrow: 'Arial Narrow', 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: 12px;
          --leading-caption: 1.3;
          --tracking-caption: 0.36px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.7;
          --tracking-body-sm: 0.42px;
          --text-body: 16px;
          --leading-body: 1.7;
          --tracking-body: 0.48px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --tracking-subheading: 0.6px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 0.72px;
          --text-heading: 48px;
          --leading-heading: 1.2;
          --tracking-heading: 1.44px;
          --text-display: 64px;
          --leading-display: 1.2;
          --tracking-display: 1.92px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-100: 100px;
          --spacing-110: 110px;
        }