sandland_sleep___style_reference:
  info: "> warm cream sleep journal with deep navy nights"

  theme: "light"

  info: "Sandland Sleep uses a warm cream canvas as its foundation, creating a soft, restful atmosphere that reads like a linen-wrapped pharmacy rather than a cold e-commerce site. Deep navy (#1a365d) provides the nighttime counterpart — anchoring the hero gradient and dark data cards as moments of cool, clinical authority that contrast the otherwise warm palette. A single vivid yellow (#fae467) serves as the sole chromatic punctuation for primary actions, badges, and data highlights, making every CTA feel switched on against the muted surroundings. Typography stays restrained and even, with a custom sans (Sandland-550) at moderate weights and tight tracking on display sizes, letting generous spacing and soft 10-20px radii carry the calm. Components are pill-shaped and rounded, shadows are whisper-soft (0.1 opacity), and the overall feel is a sleep journal: warm paper, navy ink, one highlighter."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Midnight Navy | `#1a365d` | `--color-midnight-navy` | Hero gradient base, dark data cards, icon strokes — the cool nocturnal counterpoint to the warm cream canvas, signals science and trust at the deepest end of the palette |"
    info: "| Sunlit Yellow | `#fae467` | `--color-sunlit-yellow` | Primary CTA fill, bestseller badges, data-highlight accents — the only vivid chromatic in the system, warm and optimistic like morning light, used sparingly so every action glows |"
    info: "| Linen Cream | `#f2ede8` | `--color-linen-cream` | Page canvas, default section background — the dominant warm neutral that sets the entire sleep-warmth tone of the site |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, product photography backgrounds, nav backgrounds — pure white creates lift against the cream canvas |"
    info: "| Soft Vellum | `#faf8f6` | `--color-soft-vellum` | Secondary card surfaces, subtle elevation layer — warmer than pure white, used when cards need to nest within cream sections without disappearing |"
    info: "| Graphite | `#3d3d3d` | `--color-graphite` | Body text, subtle border accents — softer than pure black for extended reading |"
    info: "| Smoke | `#666666` | `--color-smoke` | Secondary text, list borders, muted link underlines — the mid-gray that carries all supporting copy |"
    info: "| Slate | `#726f6d` | `--color-slate` | Input borders, disabled button text and borders — the warm-leaning gray for form and inactive states |"
    info: "| Charcoal | `#191923` | `--color-charcoal` | Deep surface fill for dark accent cards, alternative button backgrounds — nearly black with a slight cool cast, sits between midnight navy and true black |"
    info: "| Frost | `#e6e6e6` | `--color-frost` | Hairline dividers, image borders, section separators — neutral-cool gray for structural lines |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, dominant heading color, primary borders — the typographic anchor across all surfaces |"

  tokens___typography:

    sandland_550___custom_sans_serif_used_across_every_ui_surface___body__headings__buttons__nav__cards__weight_400_dominates_body_and_most_headings__weight_500_600_reserved_for_emphasis__the_tight_negative_tracking_on_display_sizes__0_03em_at_48_72px_gives_headlines_a_composed__compact_feel__positive_tracking_on_small_uppercase_labels_0_036_0_045em_at_10_13px_provides_the_airy_editorial_rhythm_seen_in_nav_links__badge_text__and_section_eyebrows_____font_sandland_550:
      - "**Substitute:** DM Sans, Inter, or General Sans"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 10, 11, 12, 13, 14, 15, 16, 18, 19, 20, 24, 28, 40, 48, 72"
      - "**Line height:** 1.00, 1.10, 1.20, 1.30, 1.40, 1.60, 1.67"
      - "**Letter spacing:** -0.03em at 48-72px, +0.036em to +0.045em at 10-13px (uppercase labels), normal at body sizes"
      - "**Role:** Custom sans-serif used across every UI surface — body, headings, buttons, nav, cards. Weight 400 dominates body and most headings, weight 500/600 reserved for emphasis. The tight negative tracking on display sizes (-0.03em at 48-72px) gives headlines a composed, compact feel; positive tracking on small uppercase labels (0.036-0.045em at 10-13px) provides the airy editorial rhythm seen in nav links, badge text, and section eyebrows."

    inter___inter___detected_in_extracted_data_but_not_described_by_ai____font_inter:
      - "**Weights:** 400"
      - "**Sizes:** 14px, 24px"
      - "**Line height:** 1.1, 1.4"
      - "**Role:** Inter — 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:** 14px"
      - "**Line height:** 1.5"
      - "**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 | 10px | 1.3 | 0.4px | `--text-caption` |"
      info: "| body | 14px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 16px | 1.6 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 28px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 1.1 | — | `--text-heading-lg` |"
      info: "| display | 48px | 1.1 | -1.44px | `--text-display` |"
      info: "| hero | 72px | 1 | -2.16px | `--text-hero` |"

  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: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 10px |"
      info: "| badges | 10px |"
      info: "| inputs | 4px |"
      info: "| buttons | 20px |"
      info: "| nav-pills | 20px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.1) 0px 4px 12px 0px` | `--shadow-md` |"
      info: "| lg | `rgba(0, 0, 0, 0.1) 0px 4px 20px 0px` | `--shadow-lg` |"
      info: "| subtle | `rgba(0, 0, 0, 0.13) 0px 1px 0px 0px` | `--shadow-subtle` |"

    layout:

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

  components:

    primary_cta_button:
      role: "Main conversion action (Shop Now, Add to Cart)"

      info: "Pill shape with 20px border-radius, Sunlit Yellow (#fae467) fill, Ink Black (#000000) text at 14-15px weight 500/600. Padding 12px 24px. Box shadow at 10% opacity adds subtle depth. Generous horizontal padding makes the button feel confident but not heavy."

    ghost_nav_pill_button:
      role: "Secondary navigation action (Take the Sleep Quiz)"

      info: "Pill shape, 20px border-radius, transparent or Paper White fill with 1px Ink Black border. Text at 13-14px weight 500. Sits in the top-right of the navigation bar, visually quieter than the primary CTA."

    nav_link:
      role: "Top-level navigation items (Shop All, Stay Asleep, Deep Sleep, FAQ)"

      info: "Text-only, Ink Black at 13-14px weight 500, 0.036-0.045em letter-spacing. No underline by default. Aligned left in the header bar with the brand wordmark centered and action pill right-aligned."

    product_card:
      role: "Product showcase in the Science-Backed Solutions grid"

      info: "10px border-radius, Paper White (#ffffff) background, 0 4px 12px rgba(0,0,0,0.1) shadow. Colored top band (pink for Stay Asleep, orange for Deep Sleep) with product mockup centered. 20px internal padding. Bestseller badge as yellow pill in top-left corner."

    bestseller_badge:
      role: "Product ranking indicator on product cards"

      info: "Sunlit Yellow (#fae467) fill, 10px border-radius, small pill. Text at 10-11px weight 500 in Ink Black with 0.036em tracking. Positioned top-left of product cards."

    testimonial_card:
      role: "Customer review with avatar, rating, quote, and product reference"

      info: "Paper White background, 10px radius, soft shadow. Circular avatar (40-48px) top-left, 5-star rating in Sunlit Yellow, large italic quote at 18-20px, product thumbnails row at bottom showing products used."

    dark_data_card:
      role: "Oura Ring sleep score results — the dramatic counterpoint to the warm sections"

      info: "Midnight Navy (#1a365d) or Charcoal (#191923) background, 10-20px radius, white text. Contains two semi-circular progress gauges (Before/After scores) with thin arc strokes. Sunlit Yellow percentage badge anchors the bottom. This is the card that breaks the warmth and signals clinical proof."

    circular_progress_gauge:
      role: "Sleep score visualization in the dark data card"

      info: "Semi-circular arc stroke, 2-3px width, drawn in white or light gray at low opacity for the track, with a bright stroke for the score fill. Large score number (48-72px weight 500) centered below the arc. Label text (BEFORE SANDLAND, AFTER 1 WEEK) in uppercase tracking at 11-12px."

    star_rating:
      role: "5-star review display in testimonial cards"

      info: "Sunlit Yellow (#fae467) filled stars at 14-16px, five stars inline. No text count needed, purely visual."

    carousel_navigation_arrow:
      role: "Left/right navigation for testimonial and product carousels"

      info: "Circular button, 32-40px diameter, Paper White fill with 1px Frost (#e6e6e6) border. Black chevron icon centered. Subtle shadow for lift off the cream canvas."

    section_heading_block:
      role: "Section titles (Science-Backed Solutions for Better Rest)"

      info: "Centered layout, large heading at 40-48px weight 500 in Ink Black, with -1.44px letter-spacing. Supporting paragraph at 16-18px weight 400 in Graphite (#3d3d3d), max-width 600-700px for comfortable line length."

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

      info: "No background fill, bottom border only at 1px Slate (#726f6d) via box-shadow technique. Text in Ink Black, placeholder in Smoke (#666666). Minimal, underline-only style rather than boxed inputs."

    cookie_consent_banner:
      role: "Bottom-fixed privacy notice"

      info: "Full-width strip at the bottom, Paper White background, thin top border. Body text at 12-14px in Graphite on the left, two action buttons on the right (black filled 'Accept & Continue' and outlined 'Do Not Share Information'). Functional, not decorative."

  do_s_and_don_ts:

    do:
      - "Use Sunlit Yellow (#fae467) as the fill for exactly one element per viewport: the primary action or the single data highlight"
      - "Set border-radius to 20px for buttons and nav pills, 10px for cards and badges, 4px for inputs — three radius values, no others"
      - "Keep the cream canvas (#f2ede8) unbroken across full page-width sections; never tile it within cards or components"
      - "Apply -0.03em letter-spacing at 48px and above; apply 0.036-0.045em tracking at 10-13px uppercase labels; leave body text at default tracking"
      - "Use Midnight Navy (#1a365d) as a section-level surface, not as a text color or border — it should feel like turning off the lights"
      - "Limit shadows to 10% black opacity with 12-20px blur; never use sharp or saturated shadows"
      - "Place the brand wordmark centered in the top nav with nav links left-aligned and action pill right-aligned"

    don_t:
      - "Do not introduce a second chromatic accent color — yellow is the only highlighter in the system"
      - "Do not use sharp corners (0-2px radius) on any container, card, or interactive element"
      - "Do not use saturated shadows, glow effects, or multi-layer shadow stacks"
      - "Do not place colored product top bands outside the product card — the pink/orange lives on the product mockup only"
      - "Do not use Midnight Navy as a body text color; reserve it for surface fills and large display contexts"
      - "Do not use pure black (#000000) as a background fill; use Charcoal (#191923) for dark surfaces"
      - "Do not apply letter-spacing tighter than -0.03em or looser than 0.045em — the tracking scale is narrow and intentional"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Linen Canvas | `#f2ede8` | Page background — warm cream, the dominant surface |"
    info: "| 1 | Paper White | `#ffffff` | Card and product surfaces that sit on the cream canvas |"
    info: "| 2 | Soft Vellum | `#faf8f6` | Nested card backgrounds, secondary surface layer |"
    info: "| 3 | Midnight Navy | `#1a365d` | Hero gradient, dark accent cards — the inverse surface |"
    info: "| 4 | Charcoal Deep | `#191923` | Data cards, button backgrounds — near-black with slight cool cast |"

  elevation:

    - "**Product card:** `0 4px 12px rgba(0,0,0,0.1)`"
    - "**Elevated card / hero card:** `0 4px 20px rgba(0,0,0,0.1)`"
    - "**Input field bottom border:** `0 1px 0 rgba(0,0,0,0.13)`"

  imagery:

    info: "Product photography is the dominant imagery: isolated product boxes (pill bottles and supplement boxes) photographed on white, presented as tilted mockups with soft shadows. The product packaging itself carries the color story — pink-capped boxes for the 'Stay Asleep' line, orange-capped boxes for 'Deep Sleep'. The hero composition pairs two product mockups at slight angles against a dark navy gradient, creating a still-life feel. No lifestyle photography, no people imagery beyond a single circular avatar in testimonials. Icons are minimal — simple line icons in nav (person, bag) and a small ring icon for the Oura data card. The overall visual density is low; whitespace and product photography carry the visual weight, not illustration or graphics."

  layout:

    info: "Full-width sections with max-width 1200px centered content containers. The page alternates between dark and light bands: a dark navy hero → cream product section → white testimonial section. Within sections, content is centered with a 3-column card grid for products and a 2-column layout for testimonials (white card left, dark data card right). Navigation is a single thin top bar with wordmark centered. The layout rhythm is calm and unhurried — generous vertical breathing room between sections (64px+), no aggressive dividers, and the warmth of the cream canvas carries the eye through transitions."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000 (primary), #3d3d3d (body), #666666 (secondary)"
    - "background: #f2ede8 (page canvas), #ffffff (card surface), #1a365d (dark hero/data)"
    - "border: #e6e6e6 (hairline), #726f6d (input)"
    - "accent: #fae467 (Sunlit Yellow — badges, data highlights)"
    - "primary action: #fae467 (filled action)"

  example_component_prompts:
    - "**Hero with dark gradient:** Background linear-gradient from #1a365d to a slightly darker navy. Headline '48px Sandland-550 weight 500, #ffffff, letter-spacing -1.44px'. Subtext '18px weight 400, #e6e6e6'. Primary CTA '#fae467 fill, #000000 text, 20px radius, 12px 24px padding, 14px weight 500'. Two product mockup images right-aligned, slightly tilted."

    - "**Product card:** 10px radius, #ffffff background, 0 4px 12px rgba(0,0,0,0.1) shadow, 20px padding. Yellow bestseller badge top-left ('#fae467 fill, 10px radius, 10px text #000, 0.036em tracking'). Product mockup image centered, 28px product name below in #000, 14px subtitle in #666."

    - "**Testimonial card with dark data card pair:** Left card — #ffffff, 10px radius, circular 48px avatar, 5 yellow stars, 20px italic quote in #000, product thumbnail row at bottom. Right card — #1a365d background, 10-20px radius, two semi-circular gauge arcs (white stroke at 2-3px, 30% opacity tracks with full-opacity score fills), large 48px score numbers in #ffffff, uppercase 11px labels at 0.045em tracking, yellow '#fae467' percentage badge at bottom."

    - "**Section heading block:** Centered, max-width 700px. Heading at 40px Sandland-550 weight 500, #000000, letter-spacing -1.2px. Paragraph at 16px weight 400, #3d3d3d, line-height 1.6."

    - "**Cookie banner strip:** Full-width, fixed bottom, #ffffff background, 1px top border #e6e6e6. 12px body text #3d3d3d left, two buttons right: filled #000000 with white text 20px radius pill, and outlined #000000 1px border 20px radius pill."

  surface_alternation_pattern:

    info: "The page follows a deliberate warm-cool rhythm: dark navy hero → cream canvas product section → white testimonial section. Each surface shift signals a change in narrative mode — dark for aspiration, cream for browsing, white for proof. New pages should maintain this alternation: never stack two cream sections without a white or dark break, and never place a dark card on a dark background."

  color_temperature_as_narrative:

    info: "The system uses color temperature to guide emotional pacing. Cream (#f2ede8) and warm whites create the default restful browsing state. Midnight Navy (#1a365d) enters only for hero moments and data proof — it signals 'nighttime' and 'science'. The single warm yellow (#fae467) is the system's only chromatic accent and should feel like a small light switched on in the otherwise muted space. Avoid adding cool grays, blues, or greens as accents — the palette's discipline is what makes the yellow and navy feel intentional."

  similar_brands:

    - "**Olipop** — Same warm cream canvas with a single vivid accent color, pill-shaped CTAs, and generous whitespace — both use color temperature (warm/cool) to pace the page"
    - "**Athletic Greens / AG1** — Supplement ecommerce with clinical data cards paired against soft warm sections, dark navy for proof moments, minimal chromatic palette"
    - "**Magic Spoon** — Direct-to-consumer product cards on a warm neutral canvas, bold centered product photography, pill-shaped buttons, editorial spacing rhythm"
    - "**Brumate** — Product-first e-commerce with tilted product mockups on light backgrounds, dark hero bands, and a single accent color for CTAs and badges"
    - "**Mela Vitamins** — Warm-toned supplement brand with cream/white surfaces, pill-shaped CTAs, soft shadows, and a clean clinical feel built on color temperature contrast"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-navy: #1a365d;
          --color-sunlit-yellow: #fae467;
          --color-linen-cream: #f2ede8;
          --color-paper-white: #ffffff;
          --color-soft-vellum: #faf8f6;
          --color-graphite: #3d3d3d;
          --color-smoke: #666666;
          --color-slate: #726f6d;
          --color-charcoal: #191923;
          --color-frost: #e6e6e6;
          --color-ink-black: #000000;
        
          /* Typography — Font Families */
          --font-sandland-550: 'Sandland-550', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', 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: 10px;
          --leading-caption: 1.3;
          --tracking-caption: 0.4px;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-body-lg: 16px;
          --leading-body-lg: 1.6;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 28px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.1;
          --text-display: 48px;
          --leading-display: 1.1;
          --tracking-display: -1.44px;
          --text-hero: 72px;
          --leading-hero: 1;
          --tracking-hero: -2.16px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 20px;
          --element-gap: 12-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 999px;
        
          /* Named Radii */
          --radius-cards: 10px;
          --radius-badges: 10px;
          --radius-inputs: 4px;
          --radius-buttons: 20px;
          --radius-nav-pills: 20px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
          --shadow-lg: rgba(0, 0, 0, 0.1) 0px 4px 20px 0px;
          --shadow-subtle: rgba(0, 0, 0, 0.13) 0px 1px 0px 0px;
        
          /* Surfaces */
          --surface-linen-canvas: #f2ede8;
          --surface-paper-white: #ffffff;
          --surface-soft-vellum: #faf8f6;
          --surface-midnight-navy: #1a365d;
          --surface-charcoal-deep: #191923;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-navy: #1a365d;
          --color-sunlit-yellow: #fae467;
          --color-linen-cream: #f2ede8;
          --color-paper-white: #ffffff;
          --color-soft-vellum: #faf8f6;
          --color-graphite: #3d3d3d;
          --color-smoke: #666666;
          --color-slate: #726f6d;
          --color-charcoal: #191923;
          --color-frost: #e6e6e6;
          --color-ink-black: #000000;
        
          /* Typography */
          --font-sandland-550: 'Sandland-550', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', 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: 10px;
          --leading-caption: 1.3;
          --tracking-caption: 0.4px;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-body-lg: 16px;
          --leading-body-lg: 1.6;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 28px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.1;
          --text-display: 48px;
          --leading-display: 1.1;
          --tracking-display: -1.44px;
          --text-hero: 72px;
          --leading-hero: 1;
          --tracking-hero: -2.16px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 999px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
          --shadow-lg: rgba(0, 0, 0, 0.1) 0px 4px 20px 0px;
          --shadow-subtle: rgba(0, 0, 0, 0.13) 0px 1px 0px 0px;
        }