recess___style_reference:
  info: "> pastel sunset over a swimming pool"

  theme: "mixed"

  info: "Recess lives in a daydream of pastel skies: soft periwinkle canvases, peach-pink horizon glows, and floating cloud shapes create an atmosphere of deliberate calm rather than commerce. The brand speaks through one confident geometric sans-serif (Sharp Grotesk) paired with a script logo lockup — the contrast between structural type and hand-drawn mark defines the personality. Color is mood, not decoration: deep navy ink carries all text, a single vivid blue punctuates emphasis, and the rest of the palette is washed-out lavender, cream, and coral that feel like the inside of a sunset. Components are low-elevation and quietly rounded — borders and soft fills do the work, not shadows. The layout is centered, generous, and breathing-room heavy, with a horizontal marquee banner at the very top and content that always feels like it could be a magazine spread."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Twilight Navy | `#25385b` | `--color-twilight-navy` | Primary text, headings, body copy, links, icons — the structural ink color that carries the entire voice |"
    info: "| Periwinkle Sky | `#a2b0ff` | `--color-periwinkle-sky` | Dominant section background, soft accents, atmospheric washes — the signature background that gives Recess its dreamy identity |"
    info: "| Dusk Indigo | `#0a0a3a` | `--color-dusk-indigo` | Footer backgrounds, high-contrast dark surfaces, deep accent fills |"
    info: "| Cobalt Pop | `#3252f4` | `--color-cobalt-pop` | Rare vivid accent for emphasis, active states, and standout headings — used sparingly to create a single electric beat against the muted palette |"
    info: "| Coral Blush | `#ff5a5a` | `--color-coral-blush` | Decorative warmth, occasional accent — the single warm note in an otherwise cool palette |"
    info: "| Cloud White | `#ffffff` | `--color-cloud-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"
    info: "| Cream Linen | `#fffcef` | `--color-cream-linen` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"
    info: "| Slate Mist | `#84849c` | `--color-slate-mist` | Muted secondary text, captions, helper text, low-emphasis borders |"
    info: "| Onyx | `#000000` | `--color-onyx` | Logo mark, icon strokes, high-contrast borders, nav elements |"

  tokens___typography:

    sharp_grotesk_web___primary_typeface_for_all_ui_text__headings__body__buttons__and_nav___a_geometric_sans_that_is_structural__even__and_modern__the_60px_display_weight_feels_confident_without_being_heavy__400_500_for_body_keeps_things_light_and_airy__sharp_grotesk_s_clean_geometry_contrasts_with_the_handwritten_script_logo__and_that_tension_is_the_type_personality_____font_sharp_grotesk_web:
      - "**Substitute:** Space Grotesk or DM Sans"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 14, 15, 16, 18, 20, 24, 60"
      - "**Line height:** 1.0–1.63"
      - "**Role:** Primary typeface for all UI text, headings, body, buttons, and nav — a geometric sans that is structural, even, and modern. The 60px display weight feels confident without being heavy; 400/500 for body keeps things light and airy. Sharp Grotesk's clean geometry contrasts with the handwritten script logo, and that tension is the type personality."

    recess_script_logo___wordmark_only___a_hand_drawn_cursive_script_that_reads__recess__with_a_casual__personal_warmth__the_script_is_intentionally_casual_against_sharp_grotesk_s_formality__the_logo_is_a_signature__the_body_is_a_label_____font_recess_script_logo:
      - "**Substitute:** Caveat or Pacifico"
      - "**Weights:** 400"
      - "**Sizes:** 32–40"
      - "**Line height:** 1.0"
      - "**Role:** Wordmark only — a hand-drawn cursive script that reads 'Recess' with a casual, personal warmth. The script is intentionally casual against Sharp Grotesk's formality: the logo is a signature, the body is a label."

    adobe_blank___adobe_blank___detected_in_extracted_data_but_not_described_by_ai____font_adobe_blank:
      - "**Weights:** 400"
      - "**Sizes:** 14px, 24px"
      - "**Line height:** 1.38, 1.63"
      - "**Role:** Adobe Blank — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.38 | — | `--text-caption` |"
      info: "| body | 16px | 1.63 | — | `--text-body` |"
      info: "| subheading | 18px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 24px | 1.25 | — | `--text-heading` |"
      info: "| display | 60px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    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: "| 84 | 84px | `--spacing-84` |"
      info: "| 144 | 144px | `--spacing-144` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| pills | 9999px |"
      info: "| badges | 9999px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4-8px |"

    layout:

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

  components:

    primary_cta_button_outlined:
      role: "Main action — e.g. 'SHOP NOW', 'SHOP ALL PRODUCTS'"

      info: "Rectangular, 4–8px radius, padding 12px 24px. Twilight Navy (#25385b) 1–2px border, transparent or Periwinkle fill, Twilight Navy text. All-caps, 14–16px Sharp Grotesk weight 500, letter-spacing slight tracking. No shadow, no gradient — flat and confident."

    ghost_pill_button:
      role: "Sticky/floating secondary action — e.g. bottom-right 'SHOP NOW'"

      info: "Full pill radius (9999px), Cloud White (#ffffff) fill, Twilight Navy (#25385b) text, 1px Twilight Navy border. 14px Sharp Grotesk weight 500, padding 10px 20px. Designed to float unobtrusively over pastel sections."

    top_marquee_banner:
      role: "Promotional strip — shipping, codes, announcements"

      info: "Full-bleed horizontal strip, 32–40px height, Twilight Navy (#25385b) background, Cloud White text, 12–14px Sharp Grotesk. Repeating text with small dot separators. No padding, runs edge-to-edge above the nav."

    header___nav_bar:
      role: "Site-wide navigation"

      info: "Transparent over hero, becomes solid on scroll. Script 'Recess' logo left (~32–40px), nav links right ('shop', 'subscribe & save', 'login') + cart icon. Links in Twilight Navy, 14–16px Sharp Grotesk weight 400. No background fill over the hero gradient — it floats."

    hero_section:
      role: "First-screen brand statement"

      info: "Full-bleed sky gradient background (blue to white). Headline 60px Sharp Grotesk weight 700 in Twilight Navy, left-aligned at ~10% from left. Subtext 16–18px, Slate Mist. Product visual right-aligned with organic blob/rounded-rectangle mask. No card chrome — the gradient IS the surface."

    product_showcase_card:
      role: "Featured product row — e.g. 'calm for every occasion'"

      info: "Center-aligned stack on a sunset gradient background. Products displayed in a horizontal row with no individual cards — just the product photography floating. Headline 60px above, subtext 16px, CTA button centered below. Background is a full-bleed linear gradient (cream → lavender → blush)."

    testimonial_card:
      role: "Social proof — quote cards in carousel"

      info: "Cloud White (#ffffff) fill, 8px radius, 24–32px padding, 1px Slate Mist border. Large open-quote mark in Twilight Navy at top-left. Quote text 16–18px Sharp Grotesk weight 400, centered. Attribution (handle) 14px Slate Mist. Sits on Periwinkle Sky background with floating cloud shapes."

    cloud_decoration:
      role: "Atmospheric graphic — floating cloud shapes"

      info: "Soft white/cream blob shapes with irregular organic outlines, ~10% opacity shadow underneath. Scattered across Periwinkle sections at varying scales (60–160px). No border, no text — purely atmospheric depth."

    footer:
      role: "Site footer"

      info: "Dusk Indigo (#0a0a3a) full-bleed background, Cloud White text. Multi-column link grid, newsletter signup, social icons. 16px Sharp Grotesk weight 400, 64–80px section padding."

    promo_card_border_style:
      role: "Outlined card with chromatic border"

      info: "1–2px Periwinkle Sky border on transparent or white fill, 8px radius. Used for highlighted sections or product groupings. No shadow, no fill — the border alone defines the container."

  do_s_and_don_ts:

    do:
      - "Use Sharp Grotesk for all UI text; pair with the script logo only as a wordmark — never as body type."
      - "Set display headlines at 60px weight 700 with line-height 1.0 for the tight, confident voice."
      - "Build sections on Periwinkle Sky (#a2b0ff) or sunset gradients as full-bleed atmospheric layers, not contained boxes."
      - "Use Twilight Navy (#25385b) for all text and borders — it is the only structural color."
      - "Keep buttons flat: outlined rectangles with 1–2px Twilight Navy border, no gradients, no shadows."
      - "Add organic cloud shapes at 10–20% opacity as floating atmospheric decoration on lavender sections."
      - "Maintain 80–100px vertical breathing room between major sections to preserve the spacious, magazine-like rhythm."

    don_t:
      - "Don't use the script logo for headings or body text — it's a signature mark, not a typeface."
      - "Don't apply heavy shadows or elevation to cards — Recess uses borders and gradients, not depth."
      - "Don't introduce additional accent colors beyond Cobalt Pop (#3252f4) and Coral Blush (#ff5a5a) — the palette is deliberately restrained."
      - "Don't use pure black backgrounds for anything other than small icon strokes — Dusk Indigo (#0a0a3a) is the dark surface."
      - "Don't crowd products into grids with visible card chrome — let product photography float freely over gradient surfaces."
      - "Don't use letter-spacing or all-caps for body text — only display headings and buttons get tracked caps."
      - "Don't break the sky-to-sunset gradient language with hard solid-color section dividers."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cloud White | `#ffffff` | Base page canvas |"
    info: "| 1 | Periwinkle Sky | `#a2b0ff` | Dominant atmospheric section background |"
    info: "| 2 | Cream Linen | `#fffcef` | Warm-tinted alt surface for contrast sections |"
    info: "| 3 | Dusk Indigo | `#0a0a3a` | Footer and dark contrast surfaces |"

  elevation:

    info: "Recess deliberately avoids drop shadows. All visual depth comes from layered gradient backgrounds, soft cloud shapes at reduced opacity, and 1–2px chromatic borders. The flat, shadow-free treatment keeps the aesthetic feeling like a printed poster or magazine spread rather than a web app."

  imagery:

    info: "Product photography is hero — the cans and jars are the visual content, shot on pure backgrounds or in lifestyle scenes (floating in a pool floatie, surrounded by fruit). Treatment: bright, high-key, saturated product colors against soft atmospheric backgrounds. The photography style is commercial-clean with playful lifestyle context. No illustrations, no abstract graphics beyond the organic cloud shapes. Cloud/blob SVG decorations are soft white with subtle opacity, serving as atmospheric depth rather than content."

  layout:

    info: "Full-bleed page model — every section extends edge-to-edge with its own gradient or color. Hero is a split composition: left-aligned headline block (~40% width) + right-aligned product visual with organic blob mask. Following sections are centered stacks: headline → subtext → product row → CTA. Testimonials are a 3-column card grid with carousel dots, centered on the page. Navigation is a simple transparent bar that floats over the hero. The marquee banner is a thin full-bleed strip above the nav. Vertical rhythm is spacious (80–100px section gaps) with content always centered within a ~1200px max-width. The overall flow feels like scrolling through a dreamy magazine — each section is a new mood color."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #25385b"
    - "background: #a2b0ff (dominant atmospheric), #ffffff (canvas), #fffcef (warm alt)"
    - "border: #25385b (structural), #a2b0ff (atmospheric)"
    - "accent: #3252f4 (emphasis only), #ff5a5a (decorative warmth)"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "Build a testimonial card: 8px radius, #ffffff fill, 1px #84849c border, 24px padding. Open-quote glyph 32px #25385b top-left. Quote text 16px Sharp Grotesk weight 400, #25385b, centered. Attribution 14px #84849c."

    - "Build the top marquee: full-bleed, 36px height, #25385b background, #ffffff text, 12px Sharp Grotesk. Repeating text segments separated by dot characters, no padding."

    - "Build a ghost pill button: 9999px radius, #ffffff fill, 1px #25385b border, #25385b text, 10px 20px padding, 14px Sharp Grotesk weight 500."

    - "Build a footer: full-bleed #0a0a3a background, #ffffff text, 4-column link grid, 16px Sharp Grotesk weight 400, 80px vertical padding."

  similar_brands:

    - "**Omsom** — Same pastel-saturated gradient backgrounds and centered product showcase layouts with generous breathing room"
    - "**Recess competitors like Kin Euphorics** — Same dreamy atmospheric aesthetic with sky/cloud imagery and pastel periwinkle palettes"
    - "**Magic Spoon** — Same playful brand personality using soft pastel sections, geometric sans-serif type, and floating product photography"
    - "**Olipop** — Same full-bleed gradient sections with centered display headlines and flat outlined CTA buttons"
    - "**Imperfect Foods** — Same approach of atmospheric color washes as section backgrounds rather than white cards on gray"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-twilight-navy: #25385b;
          --color-periwinkle-sky: #a2b0ff;
          --color-dusk-indigo: #0a0a3a;
          --color-cobalt-pop: #3252f4;
          --color-coral-blush: #ff5a5a;
          --color-cloud-white: #ffffff;
          --color-cream-linen: #fffcef;
          --color-slate-mist: #84849c;
          --color-onyx: #000000;
        
          /* Typography — Font Families */
          --font-sharp-grotesk-web: 'Sharp Grotesk Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-recess-script-logo: 'Recess Script (logo)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-adobe-blank: 'Adobe Blank', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.38;
          --text-body: 16px;
          --leading-body: 1.63;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --text-heading: 24px;
          --leading-heading: 1.25;
          --text-display: 60px;
          --leading-display: 1;
        
          /* 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-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-84: 84px;
          --spacing-144: 144px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-100px;
          --card-padding: 24-32px;
          --element-gap: 8-16px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-pills: 9999px;
          --radius-badges: 9999px;
          --radius-inputs: 4px;
          --radius-buttons: 4-8px;
        
          /* Surfaces */
          --surface-cloud-white: #ffffff;
          --surface-periwinkle-sky: #a2b0ff;
          --surface-cream-linen: #fffcef;
          --surface-dusk-indigo: #0a0a3a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-twilight-navy: #25385b;
          --color-periwinkle-sky: #a2b0ff;
          --color-dusk-indigo: #0a0a3a;
          --color-cobalt-pop: #3252f4;
          --color-coral-blush: #ff5a5a;
          --color-cloud-white: #ffffff;
          --color-cream-linen: #fffcef;
          --color-slate-mist: #84849c;
          --color-onyx: #000000;
        
          /* Typography */
          --font-sharp-grotesk-web: 'Sharp Grotesk Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-recess-script-logo: 'Recess Script (logo)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-adobe-blank: 'Adobe Blank', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.38;
          --text-body: 16px;
          --leading-body: 1.63;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --text-heading: 24px;
          --leading-heading: 1.25;
          --text-display: 60px;
          --leading-display: 1;
        
          /* 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-84: 84px;
          --spacing-144: 144px;
        }