whoop___style_reference:
  info: "> Performance laboratory at midnight — clinical white lab benches beneath a black theatrical void, one violet pulse of electricity."

  theme: "mixed"

  info: "WHOOP operates on a high-contrast split-canvas system: full-bleed black theatrical heroes alternate with clinical white content sections, creating a rhythm that mimics the alternation between effort and recovery. Typography is the dominant voice — oversized Proxima Nova display type at 120px with aggressive negative tracking carries the brand, while body copy stays compact and neutral. A single vivid violet (#4a53ff) acts as the lone chromatic accent against an otherwise achromatic palette, appearing only on primary actions and the announcement bar. Components are large, confident, and rounded: 24px-radius cards, fully pill-shaped buttons, and photographic overlays with heavy text treatment replace the typical SaaS card grid. The result feels less like a product page and more like a premium performance lab at night — scientific, dramatic, and focused on data over decoration."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Pulse Violet | `#4a53ff` | `--color-pulse-violet` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary text on light surfaces, dark hero/section backgrounds, filled neutral buttons, icon strokes |"
    info: "| Carbon | `#191919` | `--color-carbon` | Secondary dark surface (footer band, alternating black sections), heading text on light surfaces |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Primary page canvas, card surfaces on dark sections, text on dark backgrounds, filled white pill buttons |"
    info: "| Lab Mist | `#f3f5f9` | `--color-lab-mist` | Soft elevated surface for light cards and feature panels — a cool off-white that distinguishes cards from the page without using shadow |"
    info: "| Hairline | `#e5e7eb` | `--color-hairline` | Borders, dividers, outlined button strokes, input frames — the most-used neutral in the system (2560 occurrences) |"
    info: "| Fog Gray | `#808080` | `--color-fog-gray` | Muted body text, secondary descriptions, placeholder copy on light surfaces |"
    info: "| Ash | `#999999` | `--color-ash` | Tertiary text, inactive button labels, disabled icon strokes — sits one step below Fog Gray for de-emphasized metadata |"

  tokens___typography:

    proxima_nova___single_family_system_covering_everything_from_14px_captions_to_120px_display_headlines__the_aggressive_letter_spacing_compression_at_display_sizes__4_8px_at_120px_is_signature___it_makes_oversized_headlines_feel_carved_rather_than_stacked__proxima_nova_s_geometric_warmth_keeps_the_clinical_data_aesthetic_from_feeling_cold_____font_proxima_nova:
      - "**Substitute:** Montserrat, Nunito Sans, or DM Sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 14, 15, 16, 19, 20, 24, 32, 35, 50, 120"
      - "**Line height:** 0.71 (120px) → 0.80 (50px) → 1.00 (35px) → 1.09 (32px) → 1.13 (24px) → 1.29–1.30 (20–19px) → 1.33 (16px) → 1.50 (15px) → 1.59 (14px)"
      - "**Letter spacing:** Negative tracking tightens with size: 0.1em on 15px uppercase nav, 0 on body (14–16px), -0.03em at 19–24px (-0.48 to -0.72px), -0.04em at 32–120px (-1.05 to -4.8px)"
      - "**Role:** Single-family system covering everything from 14px captions to 120px display headlines. The aggressive letter-spacing compression at display sizes (-4.8px at 120px) is signature — it makes oversized headlines feel carved rather than stacked. Proxima Nova's geometric warmth keeps the clinical data aesthetic from feeling cold."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.59 | — | `--text-caption` |"
      info: "| body-sm | 16px | 1.33 | -0.48px | `--text-body-sm` |"
      info: "| body-lg | 20px | 1.29 | -0.6px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.13 | -0.72px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.09 | -0.96px | `--text-heading-sm` |"
      info: "| heading | 35px | 1 | -1.05px | `--text-heading` |"
      info: "| heading-lg | 50px | 0.8 | -2px | `--text-heading-lg` |"
      info: "| display | 120px | 0.71 | -4.8px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 33 | 33px | `--spacing-33` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 38 | 38px | `--spacing-38` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 92 | 92px | `--spacing-92` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| pills | 300px |"
      info: "| images | 24px |"
      info: "| buttons | 300px |"
      info: "| mediumRounded | 30px |"
      info: "| smallElements | 8px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(199, 199, 199, 0.25) 0px 4px 15px 0px` | `--shadow-md` |"

    layout:

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

  components:

    announcement_bar:
      role: "Top-of-page thin promotional strip"

      info: "Full-width, 40-48px tall, Pulse Violet (#4a53ff) background, white Proxima Nova 14px text centered, with an underlined white text link aligned right. Sits flush above the nav bar with no gap."

    primary_navigation:
      role: "Top navigation bar on dark hero"

      info: "Full-bleed black background, 80-100px tall. WHOOP wordmark left in white 24px weight 700. Nav links in white 15px weight 500 with 0.1em tracking, spaced ~32px apart. Right-aligned Pulse Violet pill button (#4a53ff, white text, 300px radius, 12px 24px padding)."

    full_bleed_dark_hero:
      role: "Opening theatrical section"

      info: "100% width, 100vh height, pure #000000 background. Display headline at 120px Proxima Nova weight 400, white, line-height 0.71, letter-spacing -4.8px, occupying 2 lines and left-aligned with ~8% page padding. Subtext at 19px weight 400, white or Fog Gray, max-width 520px. White pill CTA centered below (300px radius, 16px 32px padding, black 15px weight 600 uppercase text with 0.1em tracking)."

    pulse_violet_pill_button:
      role: "Primary brand action"

4a53ff_background__white_text__300px_border_radius__12px_24px_padding__proxima_nova_15px_weight_600_uppercase_with_0_1em_letter_spacing__used_in_nav_and_promotional_contexts__no_shadow:

    white_pill_button:
      role: "Secondary action on dark backgrounds"

      info: "White (#ffffff) background, black (#000000) text, 300px border-radius, 16px 32px padding, 15px weight 600 uppercase with 0.1em tracking. Centered in hero sections and dark bands."

    outlined_pill_button:
      role: "Tertiary action on light surfaces"

      info: "Transparent background, 1.5px Hairline (#e5e7eb) border, black text, 300px border-radius, 12px 28px padding, 14px weight 500. Used in feature cards for trial and secondary offers."

    lab_mist_feature_card:
      role: "Inline promotional card on light sections"

      info: "Lab Mist (#f3f5f9) background, 24px border-radius, no shadow, 24px padding. Contains a 24px-radius square image left (~200×140px), bold heading and body text middle, outlined pill button right. Total height ~200px, full content-width."

    carousel_story_card:
      role: "Full-bleed photographic feature card"

      tall_card_aspect_ratio__3: "4 or 4:5), photographic background filling the entire card, 24px border-radius. Overlay heading top-left at 24px weight 600, white. Small white circular expand button (40px, 1px white border) bottom-right. Pagination dots centered below carousel."

    dark_cta_band:
      role: "Closing full-bleed black section"

      info: "Full-width #000000 background, 400-600px height, large display heading in white (50px weight 400, -2px tracking), centered or left-aligned with generous padding (80-120px vertical)."

    membership_pricing_card:
      role: "Tier comparison card"

      info: "White background, 24px border-radius, 1px Hairline (#e5e7eb) border, 32px padding. Black tier name at 24px weight 700, price at 50px weight 400 with -2px tracking, feature list at 16px with 15px row gap. Pulse Violet pill button at bottom for selected tier."

    metric_overlay_stat:
      role: "Data point on photographic backgrounds"

      info: "Small white number (32px weight 400) with thin white label (12px weight 500, 0.1em tracking, uppercase). Used as floating data callouts over carousel images — e.g. '98%' '82%' on a forest scene, '45.8%' inside a green radial glow."

  do_s_and_don_ts:

    do:
      - "Use 300px border-radius for every button — pill shape is non-negotiable, even on small utility buttons"
      - "Set display headlines at 120px with line-height 0.71 and letter-spacing -4.8px; this tight tracking is the brand's visual signature"
      - "Alternate full-bleed black sections with full-bleed white sections at 80-120px gaps; never blend the two with a gray transition"
      - "Use #4a53ff exclusively for primary actions and the announcement bar — no other element should carry chromatic color"
      - "Render cards at 24px radius with no drop shadow; elevation comes from #f3f5f9 fills, not blur"
      - "Apply 0.1em letter-spacing with uppercase to all 14-15px labels in nav, buttons, and metric captions"
      - "Keep body text at 19-20px with -0.57 to -0.6px tracking; anything smaller loses the brand's confident scale"

    don_t:
      - "Don't add drop shadows to cards or buttons — WHOOP uses flat color elevation only; the single rgba(199,199,199,0.25) shadow is reserved for floating overlays"
      - "Don't introduce a second accent color — the system is monochromatic + one violet, anything else breaks the lab aesthetic"
      - "Don't use line-height above 1.0 on display sizes (50px+) — the tight 0.71-0.80 ratio is what makes headlines feel carved"
      - "Don't center body paragraphs — text in feature cards and descriptions left-aligns with max-width 520px"
      - "Don't use square or 8px-radius buttons — every action is a pill, including icon buttons and tags"
      - "Don't place colored gradients on UI surfaces; the three detected gradients are decorative background washes only, not component fills"
      - "Don't set body text below 16px — 14px is reserved for uppercase labels with tracking, never running prose"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Default light section background |"
    info: "| 1 | Lab Mist Card | `#f3f5f9` | Elevated feature card on light sections — flat elevation via color, not shadow |"
    info: "| 2 | Dark Section | `#000000` | Full-bleed theatrical hero and closing CTA band |"
    info: "| 3 | Carbon Band | `#191919` | Secondary dark surface for transitional bands between black and white |"

  imagery:

    info: "Photography is the dominant visual asset: tight, full-bleed lifestyle crops of athletes and bodies in motion — swimming, running, sleeping on textured bedding. Images are warm-toned and natural-light, never staged studio shots. Treatment is raw: no duotone, no color grading overlays, no masks. They sit inside 24px-radius carousel cards with white text overlaid directly on the photo (no scrim). UI graphics are minimal — small white circular expand buttons, thin pagination dots, and one green radial-glow metric on the longevity card. No illustrations, no 3D renders, no abstract graphics. Icons (where present) are thin-stroke monoline, white on dark, black on light."

  layout:

    info: "Page model alternates between full-bleed edge-to-edge sections (no max-width constraint on the outer container) and a 1200px max-width content well for text and card grids. Hero is a full-viewport black theater with a 120px display headline left-aligned in the first 60% of the screen. Below the hero, content sections stack as white bands containing a single max-width column or a 3-up carousel of photographic cards. Closing section returns to full-bleed black. Navigation is a fixed top bar on the dark hero only; content sections rely on the page scrolling naturally without sticky chrome. Card grids use 3 equal columns with 24px gutters. Density is comfortable: 80-120px between sections, 15-24px between elements. No sidebar, no mega-menu."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000 (light surfaces) / #ffffff (dark surfaces)"
    - "background: #ffffff (light sections) / #000000 (dark sections)"
    - "card surface: #f3f5f9"
    - "border: #e5e7eb"
    - "muted text: #808080 / #999999"
    - "accent: #4a53ff (brand action, announcement bar)"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    - "Build a full-bleed dark hero: #000000 background, 100vh. Headline at 120px Proxima Nova weight 400, #ffffff, line-height 0.71, letter-spacing -4.8px, left-aligned with 8% page padding. Subtext at 19px weight 400, #808080, max-width 520px. White pill button centered below: #ffffff background, #000000 text, 300px radius, 16px 32px padding, 15px weight 600 uppercase with 0.1em tracking."

    - "Build a Lab Mist feature card: #f3f5f9 background, 24px radius, 24px padding, full content-width. 200×140px image left at 24px radius. Bold heading 24px weight 700, #000000. Body 16px weight 400, #808080. Outlined pill button right: transparent fill, 1.5px #e5e7eb border, 300px radius, 12px 28px padding, 14px weight 500 black text."

    - "Build a carousel story card: photographic background filling the entire card, 24px radius, aspect ratio 3:4. White heading 24px weight 600 top-left with 24px padding. Small white circular button 40px diameter, 1px white border, positioned bottom-right at 16px offset."

    - "Build a Pulse Violet pill action button: #4a53ff background, #ffffff text, 300px radius, 12px 24px padding, Proxima Nova 15px weight 600 uppercase with 0.1em letter-spacing. No shadow, no border."

    - "Build a metric overlay stat: white number at 32px weight 400, white uppercase label at 12px weight 500 with 0.1em letter-spacing, positioned over a photographic background. Example: '45.8' with 'STRESS' below."

  elevation_philosophy:

    info: "WHOOP avoids drop shadows almost entirely. The single detected shadow (rgba(199,199,199,0.25) 0px 4px 15px 0px) is used sparingly on floating overlays only. Elevation is communicated through flat color contrast: Lab Mist (#f3f5f9) cards sit on Paper White (#ffffff) canvases; black sections sit on white sections; the Pulse Violet button sits on black. This keeps the system feeling clinical and flat — closer to print editorial than interactive app."

  similar_brands:

    - "**Oura** — Same split-canvas black/white alternation, oversized display headlines with tight tracking, and single-accent restrained palette in the health-wearable space"
    - "**Peloton** — Full-bleed photographic hero cards with 24px radius, pill-shaped CTAs, and a dark theatrical opening that transitions to white content sections"
    - "**Garmin** — Performance-data aesthetic with uppercase tracking labels, flat card elevation, and Proxima-Nova-adjacent geometric sans typography"
    - "**Notion** — Minimalist monochrome palette with a single violet brand accent, tight letter-spacing on large headlines, and pill-shaped primary buttons"
    - "**Whoop Coach / Apple Fitness+** — Athletic-performance category peers using photographic carousel cards as the primary content unit with direct text overlay"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pulse-violet: #4a53ff;
          --color-obsidian: #000000;
          --color-carbon: #191919;
          --color-paper-white: #ffffff;
          --color-lab-mist: #f3f5f9;
          --color-hairline: #e5e7eb;
          --color-fog-gray: #808080;
          --color-ash: #999999;
        
          /* Typography — Font Families */
          --font-proxima-nova: 'Proxima Nova', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.59;
          --text-body-sm: 16px;
          --leading-body-sm: 1.33;
          --tracking-body-sm: -0.48px;
          --text-body-lg: 20px;
          --leading-body-lg: 1.29;
          --tracking-body-lg: -0.6px;
          --text-subheading: 24px;
          --leading-subheading: 1.13;
          --tracking-subheading: -0.72px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.09;
          --tracking-heading-sm: -0.96px;
          --text-heading: 35px;
          --leading-heading: 1;
          --tracking-heading: -1.05px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 0.8;
          --tracking-heading-lg: -2px;
          --text-display: 120px;
          --leading-display: 0.71;
          --tracking-display: -4.8px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-33: 33px;
          --spacing-36: 36px;
          --spacing-38: 38px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-92: 92px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 24-32px;
          --element-gap: 15-24px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 30px;
          --radius-full: 60px;
          --radius-full-2: 300px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-pills: 300px;
          --radius-images: 24px;
          --radius-buttons: 300px;
          --radius-mediumrounded: 30px;
          --radius-smallelements: 8px;
        
          /* Shadows */
          --shadow-md: rgba(199, 199, 199, 0.25) 0px 4px 15px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-lab-mist-card: #f3f5f9;
          --surface-dark-section: #000000;
          --surface-carbon-band: #191919;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pulse-violet: #4a53ff;
          --color-obsidian: #000000;
          --color-carbon: #191919;
          --color-paper-white: #ffffff;
          --color-lab-mist: #f3f5f9;
          --color-hairline: #e5e7eb;
          --color-fog-gray: #808080;
          --color-ash: #999999;
        
          /* Typography */
          --font-proxima-nova: 'Proxima Nova', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.59;
          --text-body-sm: 16px;
          --leading-body-sm: 1.33;
          --tracking-body-sm: -0.48px;
          --text-body-lg: 20px;
          --leading-body-lg: 1.29;
          --tracking-body-lg: -0.6px;
          --text-subheading: 24px;
          --leading-subheading: 1.13;
          --tracking-subheading: -0.72px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.09;
          --tracking-heading-sm: -0.96px;
          --text-heading: 35px;
          --leading-heading: 1;
          --tracking-heading: -1.05px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 0.8;
          --tracking-heading-lg: -2px;
          --text-display: 120px;
          --leading-display: 0.71;
          --tracking-display: -4.8px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-33: 33px;
          --spacing-36: 36px;
          --spacing-38: 38px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-92: 92px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 30px;
          --radius-full: 60px;
          --radius-full-2: 300px;
        
          /* Shadows */
          --shadow-md: rgba(199, 199, 199, 0.25) 0px 4px 15px 0px;
        }