supermush___style_reference:
  info: "> Sun-bleached skate ramp meets wellness billboard. Warm bone canvas, one electric blue action color, and full-bleed lifestyle photography that does the shouting."

  theme: "light"

  info: "SuperMush runs on a sun-drenched DTC wellness playbook: a warm bone canvas, electric cobalt as the singular action color, and a tri-color accent system (cobalt, ember orange, volt lime) that shouts without cluttering. Layout breathes between quiet white product grids and explosive full-bleed lifestyle photography, with colored bands — a lime promo bar up top, an orange retailer strip in the middle — acting as visual exclamation points. Typography is geometric and confident, leaning on tight line-heights at large sizes so headlines feel like stickers slapped onto the page rather than typed paragraphs. Components are flat and pill-shaped; the 50px button radius and near-total absence of shadows produce a tactile, high-energy feel that mirrors the packaging itself, and the orange product body color is allowed to bleed into the brand skin (retailer bar, sale flags) without ever crossing into button territory."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Electric Cobalt | `#2f59f8` | `--color-electric-cobalt` | Primary action fills, active nav links, icon accents, link underlines. The only chromatic button color in the system — cobalt against the warm bone canvas makes every CTA feel switched on |"
    info: "| Ember Orange | `#ff632a` | `--color-ember-orange` | Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |"
    info: "| Volt Lime | `#eaff00` | `--color-volt-lime` | Promotional and urgency surfaces: top sale bar, Subscribe & Save tags, sale-bubble accents on product cards. Reads as a highlighter against the warm canvas — use sparingly, never as a section background |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary text, hairline borders, logo, icon strokes. The structural backbone — used aggressively for borders and dividers rather than reserving it for text alone |"
    info: "| Bone | `#f5f4f1` | `--color-bone` | Page canvas and quiet section backgrounds. Warm off-white that gives the system its sunlit feel; never pure white at the page level |"
    info: "| Paper | `#ffffff` | `--color-paper` | Elevated card surfaces, input fields, and any element that needs to sit forward of the bone canvas. Always a surface, never a text color |"
    info: "| Concrete | `#eeeeee` | `--color-concrete` | Soft borders, dividers, and secondary surface fills. Quieter than Obsidian when a hairline needs to recede |"
    info: "| Ash | `#707170` | `--color-ash` | Muted helper text, secondary metadata, star-rating inactive state, and low-emphasis form labels |"
    info: "| Graphite | `#171717` | `--color-graphite` | Slightly softened near-black for headings and dark UI surfaces where pure Obsidian feels too aggressive; button hover states on dark |"
    info: "| Mist | `#e3e3e3` | `--color-mist` | Faint borders and disabled input outlines — one step lighter than Concrete for tertiary edges |"
    info: "| Pebble | `#d9d9d9` | `--color-pebble` | Disabled button background, out-of-stock product card state. The only neutral allowed to function as an action fill, and only for disabled |"

  tokens___typography:

    founders_grotesk___primary_typeface_for_body__headings__and_product_copy__used_across_nearly_every_context___body__nav__hero__card__button__footer__heading__the_geometric_grotesque_carries_the_brand_voice__tight_line_heights_at_large_sizes_1_04_1_17_above_32px_make_headlines_feel_like_block_letters_slapped_on_the_page_rather_than_flowing_paragraphs_____font_founders_grotesk:
      - "**Substitute:** Inter, Söhne, or Aktiv Grotesk"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 12, 14, 16, 17, 18, 20, 32, 34, 36, 40, 43, 48"
      - "**Line height:** 1.00–1.67 depending on size"
      - "**Role:** Primary typeface for body, headings, and product copy. Used across nearly every context — body, nav, hero, card, button, footer, heading. The geometric grotesque carries the brand voice: tight line-heights at large sizes (1.04–1.17 above 32px) make headlines feel like block letters slapped on the page rather than flowing paragraphs."

    gt_planar___secondary_typeface_for_fine_print__sale_tags__form_labels__and_dense_ui_metadata_in_the_10_14px_range__a_quieter_geometric_companion_to_founders_grotesk___use_it_wherever_a_label_needs_to_whisper_instead_of_speak_____font_gt_planar:
      - "**Substitute:** Inter, Untitled Sans, or Suisse Int'l"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 10, 11, 13, 14, 16, 18, 20"
      - "**Line height:** 1.00–1.60"
      - "**Role:** Secondary typeface for fine print, sale tags, form labels, and dense UI metadata in the 10–14px range. A quieter geometric companion to Founders Grotesk — use it wherever a label needs to whisper instead of speak."

    font_awesome_5_pro___font_awesome_5_pro___detected_in_extracted_data_but_not_described_by_ai____font_font_awesome_5_pro:
      - "**Weights:** 300"
      - "**Sizes:** 18px"
      - "**Line height:** 1"
      - "**Role:** Font Awesome 5 Pro — detected in extracted data but not described by AI"

    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.6 | — | `--text-body` |"
      info: "| body-lg | 18px | 1.4 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.25 | — | `--text-subheading` |"
      info: "| heading | 32px | 1.21 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 1.15 | — | `--text-heading-lg` |"
      info: "| display | 48px | 1.04 | — | `--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: "| 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: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 4px |"
      info: "| tags | 4px |"
      info: "| cards | 16px |"
      info: "| images | 8px |"
      info: "| buttons | 50px |"

    layout:

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

  components:

    primary_pill_button:
      role: "Main CTA across the site (Shop Gummies, Add to Cart, Learn More)"

      info: "Filled Electric Cobalt (#2f59f8), white text, 50px border-radius, 16px vertical / 24px horizontal padding, Founders Grotesk 500 at 16px. Sits on Bone canvas and reads as a pill sticker."

    ghost_outline_button:
      role: "Secondary action paired with primary (Shop All, Learn More outline)"

      info: "1.5px Obsidian border, transparent fill, Obsidian text, 50px radius, 16/24px padding. Same typography as primary — the distinction is fill, not size."

    product_card:
      role: "Grid card for each gummy SKU on the Daily Essentials section"

      info: "Paper (#ffffff) background, 16px radius, 16px padding. Product image at top with 8px radius corners. Star rating (Ash #707170, Founders Grotesk 12px). Product name at 16px weight 500 Obsidian. Subtitle at 14px Ash. Price at 16px weight 700 with struck-through compare-at price in Ash. Add to cart button is the Primary Pill Button at full card width."

    top_promo_banner:
      role: "Sticky announcement bar above the nav"

      info: "Full-bleed Volt Lime (#eaff00) band, Obsidian text, Founders Grotesk 500 at 14px centered. Height ~40px. The only full-bleed colored element above the fold."

    save_badge:
      role: "Inline tag on product cards and nav (Save 40%, Subscribe & Save 40%)"

      info: "Volt Lime (#eaff00) background, Obsidian text, Founders Grotesk 500 at 12px, 4px radius, 4px vertical / 8px horizontal padding. Sits inline next to nav items or above product card titles."

    main_navigation:
      role: "Top-level site nav"

      info: "Bone canvas, 4px bottom border in Obsidian. Logo left (SUPER MUSH in bold Founders Grotesk 700, 20px, Obsidian). Nav links center: SHOP, SCIENCE, BUNDLE & SAVE, each Founders Grotesk 500 at 14px Obsidian with 20px horizontal padding. Right cluster: Primary Pill Button (Shop All), account icon, cart icon with count. Height ~64px."

    hero_section:
      role: "Full-bleed opening on home and category pages"

      info: "Full-bleed lifestyle photo (beach, fitness, social). Headline at 48px Founders Grotesk 700, white text, left-aligned, anchored mid-left. Subtext at 16px white, 1.5 line-height, max-width 400px. Two-button row: Primary Pill Button + Ghost Outline Button (white border, white text for the ghost variant on dark photo)."

    testimonial_card:
      role: "Social proof in the 'Loved by 700k+ athletes' carousel"

      info: "Paper background, 16px radius, 24px padding. 5-star rating in Electric Cobalt at the top. Quote at 16px Founders Grotesk 400 Obsidian. Author name at 14px weight 500, 'Verified Buyer' tag in Founders Grotesk 12px Ash. Product image thumbnail 8px radius in the corner."

    retailer_strip:
      role: "'Find us at' social-proof band between product grid and features"

      info: "Full-bleed Ember Orange (#ff632a) band, ~80px tall. Label 'Find us at' in Founders Grotesk 500 14px Obsidian left-aligned. Retailer logos (Target, Sprouts, Urban Outfitters) centered and right-aligned in Obsidian or Paper depending on logo. No border, no radius — a flat colored band."

    trust_bar:
      role: "Inline reassurance row above the final photo CTA"

      info: "Bone canvas, single row, three items separated by 32px gaps. Each item: Electric Cobalt checkmark icon + label in Founders Grotesk 500 14px Obsidian (Free Shipping for orders $60+, 30-Day Easy Returns, Organic & 3rd Party Tested). Centered horizontally."

    star_rating:
      role: "5-star display on product cards and testimonials"

      info: "Five stars in Electric Cobalt (#2f59f8), 12px each, 2px gap. Review count beside in Founders Grotesk 12px Ash. Active state: Electric Cobalt; inactive (if used): Concrete (#eeeeee)."

    accordion_section:
      role: "Movement / Recovery / Clarity expandable list in the feature area"

      bone_canvas_section__each_row: "1px Obsidian bottom border, 48px row height. Title at 24px Founders Grotesk 500 Obsidian left-aligned. Plus/minus toggle icon in Electric Cobalt right-aligned. Expanded body text at 16px Ash, 1.5 line-height, 24px top padding."

    photo_cta_banner:
      role: "Closing full-bleed lifestyle image with overlay text"

      info: "Full-bleed photo, dark gradient overlay (transparent to rgba(0,0,0,0.45)) for legibility. Headline at 48px Founders Grotesk 700 white, centered. Primary Pill Button centered below. Used as the page closer — energy stays high, not quiet."

    footer:
      role: "Site footer"

      info: "Bone canvas, 1px Obsidian top border. Multi-column link grid (Shop, Science, Support, Company) at Founders Grotesk 400 14px Obsidian. Section headers at 14px weight 700. Newsletter signup row at top with ghost email input (1.5px Obsidian border, 50px radius, Paper fill) and Primary Pill Button submit."

  do_s_and_don_ts:

    do:
      - "Use 50px border-radius for every interactive button, input, and pill-shaped tag — the pill is the signature"
      - "Reserve #2f59f8 exclusively for primary action fills, active nav states, icon accents, and link underlines"
      - "Anchor large headlines at 40–48px with tight 1.04–1.17 line-height so they read as block stickers, not paragraphs"
      - "Place product photography full-bleed at section boundaries, never inset in a card next to text"
      - "Use GT Planar at 10–14px for fine print, sale tags, and metadata; reserve Founders Grotesk for body and headings"
      - "Anchor every section to either Bone canvas (#f5f4f1) or Paper (#ffffff) — avoid introducing a third neutral surface"
      - "Let the Volt Lime bar appear at most once per scroll depth as a highlighter, not a background"

    don_t:
      - "Never use #ff632a as a button fill or CTA background — Ember Orange belongs to the product and the retailer band only"
      - "Never apply drop shadows for elevation — communicate depth through background color steps (Bone → Paper → Volt → Ember)"
      - "Never set body copy below 14px; use 12px only for legal/footnote metadata in GT Planar"
      - "Never use more than three colors in a single section — the system runs on restrained tri-color punctuation, not rainbow surfaces"
      - "Never break the 50px radius on primary action buttons — ghost variants stay pill-shaped too"
      - "Never use system fonts or fall back to Helvetica/Arial — always Founders Grotesk or GT Planar"
      - "Never stack two full-bleed photo sections back-to-back; always interleave a white or colored band between them"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Bone Canvas | `#f5f4f1` | Default page background — warm off-white that softens the otherwise high-contrast system. |"
    info: "| 1 | Paper Card | `#ffffff` | Product cards, testimonial cards, and any content block that needs to sit forward of the canvas. |"
    info: "| 2 | Volt Bar | `#eaff00` | Promotional top banner and sale-bubble accents — the loudest non-action surface. |"
    info: "| 3 | Ember Band | `#ff632a` | Retailer strip and product-accent fills — the orange product color as a brand band. |"

  elevation:

    info: "Elevation is communicated through background color steps, never shadows. Cards sit on Paper above a Bone canvas; the retailer band sits on Ember above Paper; the promo bar sits on Volt above Paper. The absence of drop shadows is deliberate — the system is flat and sticker-like, not skeuomorphic."

  imagery:

    info: "Full-bleed lifestyle photography is the brand's loudest element — candid, sun-drenched, high-key moments of people in motion (beach, training, social, recovery). Treatment is warm-toned with no heavy color grading; skin and product packaging do the color work. Product photography is isolated on white, tightly cropped, and warm-lit to match the orange packaging. The imagery is decorative atmosphere first, explanatory content second — text overlay is always white on a dark gradient rather than placed beside the image. Image-heavy overall: photos occupy roughly 40% of total viewport space across the home flow, alternating with white product grids."

  layout:

    info: "Full-bleed hero photo with left-anchored text, then max-width 1200px centered content for the product grid and feature sections. The 4-column product grid is the structural unit. Sections alternate between quiet white (Bone canvas + Paper cards), full-bleed photo, and flat colored bands (Volt promo bar, Ember retailer strip) — the colored bands are the rhythm, not just decoration. Navigation is a single sticky top bar with no sidebar or mega-menu. Generous vertical breathing room (64px section gaps) keeps the high-energy palette from feeling cramped."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #f5f4f1"
    - "surface/card: #ffffff"
    - "border: #eeeeee (soft) or #000000 (structural)"
    - "accent (promotional/tag): #eaff00"
    - "primary action: #2f59f8 (filled action)"
    - "product/brand band: #ff632a (Ember Orange — never a button)"

    example_component_prompts:
    - "Build a hero: full-bleed beach photo, left-aligned 48px Founders Grotesk 700 white headline, 16px white subtext max-width 400px, then a row with a primary pill button (#2f59f8 fill, white text, 50px radius, 16/24px padding) and a ghost outline button (1.5px white border, white text, same radius)."
    - "Create a Primary Action Button: #2f59f8 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."
    - "Build the top promo bar: full-bleed #eaff00 band, ~40px tall, centered 14px Founders Grotesk 500 Obsidian text. No shadow, no border, sits flush above the nav."
    - "Build a testimonial card: Paper background, 16px radius, 24px padding. Cobalt 5-star row, 16px Obsidian quote, 14px weight 500 author name, 12px Ash 'Verified Buyer' label, product image thumbnail 8px radius in corner."
    - "Build the retailer strip: full-bleed #ff632a band ~80px tall, 'Find us at' in 14px Founders Grotesk 500 Obsidian left-aligned, retailer logos (Target, Sprouts, Urban Outfitters) spread across the remaining width in Obsidian or Paper."

  color_punctuation_rules:

    info: "The system uses exactly three chromatic colors and assigns each a single job: #2f59f8 = action, #ff632a = product personality, #eaff00 = urgency. They never swap roles, never mix in a single component, and never appear as gradient stops. A button is always one of those three or a neutral; a background is always one of the three or a neutral. The flat, non-gradient discipline is what keeps the high-chroma palette from tipping into noise."

  radius_system:

    radii_follow_a_strict_hierarchy: "4px for tags, nav chips, and inline UI; 8px for product images and thumbnails; 16px for cards; 50px (pill) for every button, input, and pill-shaped element. There are no values between 8 and 16, and no values between 16 and 50 — the gap is intentional and creates a 'sticker' language at the button level."

  similar_brands:

    - "**OLIPOP** — Same tri-color accent punctuation on a warm off-white canvas, pill-shaped CTAs, and lifestyle photography that does the brand shouting"
    - "**Liquid Death** — Bold full-bleed lifestyle imagery, a single vivid action color, and flat sticker-like components with no decorative shadows"
    - "**Magic Spoon** — Playful wellness DTC with bright accent colors used sparingly, large geometric type, and product-forward 4-column grids"
    - "**MUSH** — Direct same-category competitor sharing the mushroom-gummy product card aesthetic, warm canvas, and lifestyle-led hero"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-cobalt: #2f59f8;
          --color-ember-orange: #ff632a;
          --color-volt-lime: #eaff00;
          --color-obsidian: #000000;
          --color-bone: #f5f4f1;
          --color-paper: #ffffff;
          --color-concrete: #eeeeee;
          --color-ash: #707170;
          --color-graphite: #171717;
          --color-mist: #e3e3e3;
          --color-pebble: #d9d9d9;
        
          /* Typography — Font Families */
          --font-founders-grotesk: 'Founders Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-planar: 'GT Planar', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-5-pro: 'Font Awesome 5 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.6;
          --text-body-lg: 18px;
          --leading-body-lg: 1.4;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --text-heading: 32px;
          --leading-heading: 1.21;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.15;
          --text-display: 48px;
          --leading-display: 1.04;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --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-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 16-24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 50px;
        
          /* Named Radii */
          --radius-nav: 4px;
          --radius-tags: 4px;
          --radius-cards: 16px;
          --radius-images: 8px;
          --radius-buttons: 50px;
        
          /* Surfaces */
          --surface-bone-canvas: #f5f4f1;
          --surface-paper-card: #ffffff;
          --surface-volt-bar: #eaff00;
          --surface-ember-band: #ff632a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-cobalt: #2f59f8;
          --color-ember-orange: #ff632a;
          --color-volt-lime: #eaff00;
          --color-obsidian: #000000;
          --color-bone: #f5f4f1;
          --color-paper: #ffffff;
          --color-concrete: #eeeeee;
          --color-ash: #707170;
          --color-graphite: #171717;
          --color-mist: #e3e3e3;
          --color-pebble: #d9d9d9;
        
          /* Typography */
          --font-founders-grotesk: 'Founders Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-planar: 'GT Planar', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-5-pro: 'Font Awesome 5 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.6;
          --text-body-lg: 18px;
          --leading-body-lg: 1.4;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --text-heading: 32px;
          --leading-heading: 1.21;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.15;
          --text-display: 48px;
          --leading-display: 1.04;
        
          /* 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-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 50px;
        }