eight_sleep___style_reference:
  info: "> midnight observatory with single neon pulse"

  theme: "mixed"

  info: "Eight Sleep communicates through nocturnal luxury: a stark dark hero stage gives way to warm off-white surfaces and one electric blue accent that functions like a pulse of light in a quiet room. Typography carries the entire brand voice — NeueMontreal at weight 300 at near-display sizes creates whispered authority, with letter-spacing tightening as scale grows. The palette is almost deliberately starved of color: pure black, warm cream (#f9f8f7) instead of clinical white, and a single vivid blue that earns attention by being absent everywhere else. Components are flat and architectural — pill buttons, 12px cards, hairline borders, and a single whisper-soft shadow. Visual rhythm alternates between full-bleed dark bands and light editorial sections, creating a sleep-cycle cadence across the page."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Headlines, body text, full-bleed dark hero stage, nav text on light surfaces — the structural anchor of the system |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"
    info: "| Warm Cream | `#f9f8f7` | `--color-warm-cream` | Hero panels, soft section backgrounds, card surfaces on light pages — replaces clinical white with a linen warmth |"
    info: "| Mist Gray | `#f1f2f4` | `--color-mist-gray` | Nested card containers, subtle elevated surfaces, input field backgrounds |"
    info: "| Stone | `#8e8d92` | `--color-stone` | Muted helper text, secondary icon strokes, inactive button labels |"
    info: "| Graphite | `#696765` | `--color-graphite` | Secondary body text, card subtext, dimmed nav items |"
    info: "| Ash | `#a0a0a0` | `--color-ash` | Disabled button borders and text, tertiary iconography |"
    info: "| Smoke | `#363636` | `--color-smoke` | Dark surface text, footer text, secondary dark-mode body copy |"
    info: "| Fog Border | `#ececec` | `--color-fog-border` | Hairline dividers, selected option backgrounds in dropdowns |"
    info: "| Steel Border | `#2e2e2e` | `--color-steel-border` | Card borders on dark sections, divider lines in dark hero areas |"
    info: "| Pulse Blue | `#4158ee` | `--color-pulse-blue` | Links, selected/active states, quiz option highlights, focus rings — the only chromatic accent, used sparingly as functional punctuation |"
    info: "| Midnight Blue | `#3f5975` | `--color-midnight-blue` | Secondary dark accent for hover states and subtle blue-tinted borders on dark sections |"

  tokens___typography:

    neuemontreal___single_typeface_powers_the_entire_system__weight_300_at_56_115px_for_hero_display_creates_whispered_authority___an_anti_convention_choice_that_earns_scale_through_restraint_rather_than_volume__weight_400_handles_body__500_for_subheadings__700_reserved_for_micro_labels_and_nav__line_height_collapses_to_0_94_at_115px_display__opening_to_1_5_1_7_at_body_sizes_____font_neuemontreal:
      - "**Substitute:** Inter, Söhne, or General Sans"
      - "**Weights:** 300, 400, 500, 700"
      - "**Sizes:** 10px, 12px, 14px, 15px, 16px, 17px, 18px, 20px, 22px, 28px, 36px, 44px, 56px, 64px, 115px"
      - "**Line height:** 0.94–1.92 (tightest at display scale)"
      - "**Letter spacing:** -0.020em at 115px, tightening to -0.009em at 56px, 0.001em at body, opening to 0.125em+ for uppercase labels and nav"
      - "**OpenType features:** `\"ss01\" on, \"tnum\" on, \"ss03\" on`"
      - "**Role:** Single typeface powers the entire system. Weight 300 at 56–115px for hero display creates whispered authority — an anti-convention choice that earns scale through restraint rather than volume. Weight 400 handles body, 500 for subheadings, 700 reserved for micro-labels and nav. Line-height collapses to 0.94 at 115px display, opening to 1.5–1.7 at body sizes."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| label | 10px | 12 | 1.25px | `--text-label` |"
      info: "| caption | 12px | 16 | 0.05px | `--text-caption` |"
      info: "| body-sm | 14px | 22 | — | `--text-body-sm` |"
      info: "| body | 16px | 24 | — | `--text-body` |"
      info: "| body-lg | 18px | 28 | — | `--text-body-lg` |"
      info: "| subheading | 28px | 36 | -0.28px | `--text-subheading` |"
      info: "| heading-sm | 44px | 48 | -0.66px | `--text-heading-sm` |"
      info: "| heading | 56px | 56 | -0.96px | `--text-heading` |"
      info: "| heading-lg | 64px | 64 | -1.28px | `--text-heading-lg` |"
      info: "| display | 115px | 108 | -2.3px | `--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: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 92 | 92px | `--spacing-92` |"
      info: "| 112 | 112px | `--spacing-112` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| images | 8px |"
      info: "| inputs | 8px |"
      info: "| buttons | 9999px |"
      info: "| containers | 20px |"
      info: "| smallElements | 4px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.05) 2px 2px 12px 0px` | `--shadow-md` |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 24-32px"
      - "**Element gap:** 16-20px"

  components:

    dark_hero_section:
      role: "Full-bleed opening stage"

      info: "Full-bleed #000000 background extending edge-to-edge. Display headline at 64–115px in NeueMontreal weight 300, #ffffff, line-height 0.94, letter-spacing -0.020em. Supporting body at 18px weight 400, #8e8d92 or #ffffff at 80% opacity. Radial gradient overlay (rgb(241,243,254) → rgb(27,38,59) → rgb(9,11,18)) for depth on product imagery. Generous vertical padding of 120–160px top and bottom."

    top_announcement_bar:
      role: "Promotional strip above nav"

      info: "Slim full-bleed bar, 36–40px height, #1a2433 background (very dark blue-tinted). Text in 12px NeueMontreal weight 500, #ffffff, letter-spacing 0.125em, uppercase. Centered layout with optional arrow link on the right."

    primary_navigation:
      role: "Sticky top header"

      info: "Light background #ffffff or transparent over dark hero. Logo centered (Eight Sleep wordmark). Nav links at 14px weight 500, #000000, letter-spacing 0.009em. Right cluster: user icon link, pill CTA button. Height 64–72px. Hairline 1px #ececec bottom border when scrolled."

    pill_cta_button_light:
      role: "Primary action button on dark backgrounds"

      info: "Background #ffffff, text #000000, border-radius 9999px, padding 14px 28px. Font: NeueMontreal 15px weight 500, letter-spacing 0.009em. No border, no shadow. Hover: background #f9f8f7 with 200ms transition."

    pill_cta_button_dark:
      role: "Primary action on light backgrounds"

      info: "Background #000000, text #ffffff, border-radius 9999px, padding 14px 28px. Hover: background #363636. Used for 'Compra el Pod' and similar conversion actions."

    ghost_link_button:
      role: "Tertiary text action"

      info: "No background, no border. Text in 14px NeueMontreal weight 500, #000000, underline on hover or with a right-arrow icon. Letter-spacing 0.009em. Used for 'Conoce el Pod' secondary CTAs."

    region_selector_modal:
      role: "Language/region picker overlay"

      info: "Centered card, ~560px wide, #ffffff background, 12px border-radius, box-shadow rgba(0,0,0,0.05) 2px 2px 12px. Header row with title 18px weight 500 and close icon. Two-column grid of region options at 16px weight 400, each with a 20px flag icon, country name, and em-dash language label. Selected row gets #f1f2f4 background and a #4158ee checkmark on the right."

    quiz_onboarding_panel:
      role: "Lead-capture split panel"

      50_50_split_layout: "left side is full-bleed lifestyle photography (warm bedroom interior with natural light), right side is white #ffffff panel. Right panel contains: small uppercase label 10px weight 700 #4158ee with 0.125em tracking, headline 36–44px weight 300, question 18px weight 400, then 4 stacked option buttons. Each option: #f1f2f4 background, 8px radius, 16px 20px padding, 15px weight 500 text, full-width, with hover darkening to #ececec."

    feature_card:
      role: "Product or benefit showcase card"

f9f8f7_or_ffffff_background__12px_border_radius__24_32px_internal_padding__1px_ececec_border__optional_8px_image_radius_at_top__title_22_28px_weight_500__body_16px_weight_400_696765__no_drop_shadow_by_default__subtle_shadow_only_on_hover:

    product_card_dark:
      role: "Hero product showcase on dark backgrounds"

1a1a1a_or_000000_background__20px_border_radius__no_border__product_image_centered_with_generous_padding__white_text_overlays__optional_radial_gradient_backdrop_to_add_depth:

    input_field:
      role: "Form input for email/capture"

      info: "Background #f1f2f4 or transparent, 1px #ececec bottom border, no top/left/right borders. Text 16px weight 400, placeholder #a0a0a0, focused text #000000. Focus ring: 2px #4158ee outline with 2px offset. Padding 16px 0."

    badge_tag:
      role: "Category or status label"

      info: "Inline-flex, 4px 10px padding, 4px border-radius, #f1f2f4 background, #696765 text at 12px weight 500, letter-spacing 0.05em. No border. Used for product tags and feature labels."

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

000000_background__ffffff_text__three_to_four_column_grid_with_link_lists_at_14px_weight_400_8e8d92__logo_in_white__social_icons_20px__hairline_2e2e2_dividers__newsletter_input_with_white_on_transparent_styling:

  do_s_and_don_ts:

    do:
      - "Use weight 300 for any headline above 44px — this whisper-weight is the brand's signature and separates Eight Sleep from every other tech site that defaults to bold"
      - "Tighten letter-spacing to -0.020em at 115px display, opening to 0.125em only on uppercase 10–12px labels — tracking carries the voice"
      - "Keep the palette monochromatic by default; introduce #4158ee only for links, focus rings, selected states, and quiz option highlights — never as a decorative fill"
      - "Use #f9f8f7 warm cream as the default card and section surface instead of pure #ffffff to avoid clinical sterility"
      - "Set all primary buttons to 9999px pill radius; never use rectangular buttons for conversion actions"
      - "Alternate full-bleed dark (#000000) hero sections with light editorial bands to create the sleep-cycle page rhythm"
      - "Use 12px radius for cards, 8px for images and inputs, 4px for small elements — the radius hierarchy is deliberate"

    don_t:
      - "Never set body or paragraph text above weight 400 — heavier weights kill the whispered-authority effect"
      - "Don't apply #4158ee to large background fills, hero overlays, or decorative shapes — it loses its power when it covers more than ~5% of the visible area"
      - "Avoid using box-shadows beyond rgba(0,0,0,0.05) 2px 2px 12px — anything heavier looks cheap against the flat dark hero treatment"
      - "Don't use #000000 on #000000 in a contrast pair for body text — the hero already carries full black; always pair black text with warm cream or pure white"
      - "Never set display headlines to weight 700 — the 300-weight display at 64–115px is non-negotiable brand signature"
      - "Don't introduce additional accent colors (green, red, orange) even for status — Eight Sleep's restraint is the point; use opacity and weight variation instead"
      - "Avoid borders thicker than 1px; the entire system runs on hairlines, not rules"
      - "Don't use line-height above 1.7 for body text — the tight 1.2–1.5 line-height is part of the geometric precision"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Primary page background for light editorial sections |"
    info: "| 1 | Warm Cream | `#f9f8f7` | Soft alternative surface for cards, hero panels, and body sections — avoids clinical white |"
    info: "| 2 | Mist Gray | `#f1f2f4` | Subtle card and container background for nested content |"
    info: "| 3 | Fog Border | `#ececec` | Hairline dividers and selected/hover container fills |"
    info: "| 4 | Obsidian | `#000000` | Full-bleed dark hero stage and footer backgrounds |"

  elevation:

    - "**Region Selector Modal:** `rgba(0, 0, 0, 0.05) 2px 2px 12px 0px`"
    - "**Quiz Option Buttons (hover):** `rgba(0, 0, 0, 0.05) 2px 2px 12px 0px`"
    - "**Product Card (elevated state):** `rgba(0, 0, 0, 0.08) 0px 8px 32px 0px`"

  imagery:

    info: "Photography is editorial and aspirational, not product-spec: warm bedroom interiors with natural directional light, linen textures, hardwood nightstands, and lush greenery visible through windows. The product (the Pod) is always shown in situ — placed beside a bed in a real home, never on a white studio background. Lifestyle photography occupies roughly 40% of page real estate, concentrated in hero and split-panel layouts. No illustration or 3D rendering — the brand relies on the tactile reality of lived spaces. Flag icons in the region selector are flat, colorful, and unstyled — functional, not decorative."

  layout:

    info: "Full-bleed dark hero opens every page, followed by light editorial sections with max-width 1280px centered. Hero pattern is split or centered display headline over near-black background with radial gradient depth. Sections alternate between dark and light bands to create a sleep-wake rhythm. Content arrangement is predominantly centered stacks and 2-column text-plus-image alternations, occasionally breaking into 3-column feature grids. Navigation is a centered-logo top bar with left-aligned category links and right-aligned user + CTA cluster. Density is generous — 80–120px between major sections, with content breathing within a 1200–1280px max-width. Quiz and modal patterns use a 50/50 split with full-bleed photography on one side and a contained white form panel on the other."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "Background: #ffffff (canvas) / #f9f8f7 (warm cream surface) / #000000 (dark hero)"
    - "Text: #000000 (primary) / #696765 (secondary) / #8e8d92 (muted/helper) / #ffffff (on dark)"
    - "Border: #ececec (hairline) / #2e2e2e (dark mode divider)"
    - "Accent: #4158ee (links, focus, selected states only)"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"

    - "Create a dark hero section: full-bleed #000000 background, 140px top/bottom padding. Headline at 96px NeueMontreal weight 300, #ffffff, letter-spacing -0.020em, line-height 0.94. Subtext at 18px weight 400, #8e8d92. Ghost link button with #ffffff text and underline."

    - "Create a region selector modal: centered white card, 560px wide, 12px radius, shadow rgba(0,0,0,0.05) 2px 2px 12px. Title 18px weight 500 #000000, close icon top-right. Two-column grid of options, each 16px weight 400 with flag icon, em-dash separator, and language label. Selected option shows #f1f2f4 background and #4158ee checkmark."

    - "Create a quiz split panel: 50/50 layout. Left half is a full-bleed warm bedroom photograph. Right half is #ffffff with 48px padding. Top label at 10px weight 700, #4158ee, uppercase, letter-spacing 0.125em. Headline at 36px weight 300, #000000. Question at 18px weight 400, #696765. Four stacked option buttons: #f1f2f4 background, 8px radius, 16px 20px padding, 15px weight 500 text, full-width, hover to #ececec."

    - "Create a feature card: #f9f8f7 background, 12px border-radius, 32px padding, 1px #ececec border. Image at top with 8px radius. Title 28px weight 500, #000000. Body 16px weight 400, #696765, line-height 1.5."

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

  similar_brands:

    - "**Apple** — Same whisper-weight display typography, full-bleed dark hero stages alternating with white editorial sections, and pill-shaped CTA buttons"
    - "**Sonos** — Warm cream surfaces instead of clinical white, single accent color used sparingly, editorial product photography in domestic interiors"
    - "**Oura** — Premium health-tech restraint — nearly monochromatic palette, massive light-weight headlines, and split-panel quiz/onboarding patterns"
    - "**Dyson** — Dark hero sections with product-in-situ photography, generous vertical rhythm, and typographic confidence through weight contrast rather than color"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-warm-cream: #f9f8f7;
          --color-mist-gray: #f1f2f4;
          --color-stone: #8e8d92;
          --color-graphite: #696765;
          --color-ash: #a0a0a0;
          --color-smoke: #363636;
          --color-fog-border: #ececec;
          --color-steel-border: #2e2e2e;
          --color-pulse-blue: #4158ee;
          --color-midnight-blue: #3f5975;
        
          /* Typography — Font Families */
          --font-neuemontreal: 'NeueMontreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-label: 10px;
          --leading-label: 12;
          --tracking-label: 1.25px;
          --text-caption: 12px;
          --leading-caption: 16;
          --tracking-caption: 0.05px;
          --text-body-sm: 14px;
          --leading-body-sm: 22;
          --text-body: 16px;
          --leading-body: 24;
          --text-body-lg: 18px;
          --leading-body-lg: 28;
          --text-subheading: 28px;
          --leading-subheading: 36;
          --tracking-subheading: -0.28px;
          --text-heading-sm: 44px;
          --leading-heading-sm: 48;
          --tracking-heading-sm: -0.66px;
          --text-heading: 56px;
          --leading-heading: 56;
          --tracking-heading: -0.96px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 64;
          --tracking-heading-lg: -1.28px;
          --text-display: 115px;
          --leading-display: 108;
          --tracking-display: -2.3px;
        
          /* 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-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-92: 92px;
          --spacing-112: 112px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80-120px;
          --card-padding: 24-32px;
          --element-gap: 16-20px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-images: 8px;
          --radius-inputs: 8px;
          --radius-buttons: 9999px;
          --radius-containers: 20px;
          --radius-smallelements: 4px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.05) 2px 2px 12px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-warm-cream: #f9f8f7;
          --surface-mist-gray: #f1f2f4;
          --surface-fog-border: #ececec;
          --surface-obsidian: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-warm-cream: #f9f8f7;
          --color-mist-gray: #f1f2f4;
          --color-stone: #8e8d92;
          --color-graphite: #696765;
          --color-ash: #a0a0a0;
          --color-smoke: #363636;
          --color-fog-border: #ececec;
          --color-steel-border: #2e2e2e;
          --color-pulse-blue: #4158ee;
          --color-midnight-blue: #3f5975;
        
          /* Typography */
          --font-neuemontreal: 'NeueMontreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-label: 10px;
          --leading-label: 12;
          --tracking-label: 1.25px;
          --text-caption: 12px;
          --leading-caption: 16;
          --tracking-caption: 0.05px;
          --text-body-sm: 14px;
          --leading-body-sm: 22;
          --text-body: 16px;
          --leading-body: 24;
          --text-body-lg: 18px;
          --leading-body-lg: 28;
          --text-subheading: 28px;
          --leading-subheading: 36;
          --tracking-subheading: -0.28px;
          --text-heading-sm: 44px;
          --leading-heading-sm: 48;
          --tracking-heading-sm: -0.66px;
          --text-heading: 56px;
          --leading-heading: 56;
          --tracking-heading: -0.96px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 64;
          --tracking-heading-lg: -1.28px;
          --text-display: 115px;
          --leading-display: 108;
          --tracking-display: -2.3px;
        
          /* 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-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-92: 92px;
          --spacing-112: 112px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.05) 2px 2px 12px 0px;
        }