---
version: alpha
name: Whoop
description: High-performance athletic system built on a near-black canvas with electric indigo CTAs — Proxima Nova at muscular display weights communicates data-driven confidence for serious athletes.

colors:
  # Primary canvas — near-black athletic foundation
  background: "#000000"           # pure black dominant canvas
  background-alt: "#0a0a0a"       # subtle dark variation for section bands
  surface: "#111111"              # slightly lifted dark surface for cards
  surface-light: "#e5e7eb"        # light section bands for contrast breaks
  surface-white: "#ffffff"        # white card surfaces in light sections

  # Ink / text
  ink: "#ffffff"                  # primary body text on the dark canvas (pairs with background)
  ink-light: "#333333"            # secondary text on light surfaces
  on-dark: "#ffffff"              # white primary text on dark canvas (alias)
  on-dark-muted: "#808080"        # mid gray — muted text, metadata, captions on dark
  on-surface-light: "#000000"     # black text on light section surfaces

  # Brand accent
  primary: "#4a53ff"              # electric indigo — primary CTAs, "JOIN NOW" (accent role)
  on-primary: "#ffffff"           # white text on indigo buttons
  primary-hover: "#5964ff"        # slightly lighter indigo on hover

  # Link / interactive states
  link-hover: "#3860be"           # muted blue on link hover (extracted from JSON hover states)

  # Semantic / health metric
  recovery-green: "#32ae88"       # WHOOP recovery metric green (rgb(50,174,136) from border data)
  strain-blue: "#479ac2"          # strain/effort metric blue (from gradient data: rgb(71,154,194))
  warning: "#f59e0b"              # warning states  /* estimated */
  error: "#ef4444"                # error states    /* estimated */

  # Borders
  border: "#e5e5e5"               # light section dividers (rgb 229,229,229)
  border-dark: "#333333"          # dark surface dividers  /* estimated */

  # Shadow tints
  shadow-soft: "#c7c7c7"          # cool silver diffused shadow (rgba(199,199,199,0.25) — Google format requires hex)

typography:
  display-hero:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.8
    letterSpacing: -3.6px
  display:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 100px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: -3px
  heading-section:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 50px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -2px
  heading:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 35px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -1.4px
  heading-sub:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.09
    letterSpacing: -1.2px
  heading-card:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -1px
  body-large:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.72px
  body:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-medium:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.6px
  button-ui:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 1.4px
  button-ui-lg:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 1.6px
  nav-link:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  label-upper:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 1.3px
  caption:
    fontFamily: "proxima-nova, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 48px
  3xl: 64px
  4xl: 100px

rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  pill: 9999px

components:
  # Primary CTA — electric indigo, uppercase tracked
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 20px 40px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  # Secondary — white fill, black text (on dark sections)
  button-secondary:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.on-surface-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 20px 40px
  button-secondary-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-surface-light}"

  # Ghost — dark fill, black border, black text (on light sections)
  button-ghost:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.on-surface-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 20px 40px
    border: "1px solid {colors.on-surface-light}"
  button-ghost-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-surface-light}"

  # Ghost inverse — transparent, white border, white text (on dark sections)
  button-ghost-dark:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 20px 40px
    border: "1px solid {colors.on-dark}"
  button-ghost-dark-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"

  # Dark fill — black CTA on dark (for "START WITH ONE" style)
  button-dark:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 20px 40px

  # Navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 16px 24px

  # Feature card — dark surface
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-light:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.on-surface-light}"
    rounded: "{rounded.lg}"
    padding: 24px

  # Metric data card (app-style health metrics)
  card-metric:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.lg}"
    padding: 20px

  # Email input (dark section)
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 16px 0px
    border: "0px 0px 1px solid {colors.on-dark}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    border: "1px solid {colors.ink}"

  # Status / metric badge
  badge-recovery:
    backgroundColor: "{colors.recovery-green}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
---

# Whoop Design System

## Overview

WHOOP is built for athletes who treat performance data as a competitive edge. The design system reflects this with unflinching confidence: a near-black canvas (`{colors.background}`) dominates the experience, letting the brand's photography and health metric visualizations carry all the visual energy. There is no softness in the palette, no warm neutrals or muted pastels — just the hard contrast of black surface against white text, punctuated by electric indigo (`{colors.primary}`) precisely where action is demanded. The overall effect is less consumer wearable, more sports lab.

The typography choice reinforces this read. Proxima Nova — loaded via Adobe Fonts — is the single typeface for the entire system, from 120px hero displays down to 12px captions. At display weights (400) with extreme negative tracking (-3.6px at 120px), it has a compressed, performance-poster quality. At 600 weight in section headings, it reads as authoritative without aggression. The button labels run in all-caps with wide positive tracking (1.4–1.6px), a typographic convention borrowed from sports equipment branding. One font, many moods, no serif moments.

The electric indigo (`{colors.primary}`) serves as the exclusive CTA accent — every primary "Join Now" button across the site uses this color, never diluted to secondary contexts. The health metric system introduces two supporting chromatic values: recovery green (`{colors.recovery-green}`) for the WHOOP recovery ring and strain blue (`{colors.strain-blue}`) for effort metrics. These live in the app interface layer and occasionally surface in marketing photography; they never migrate to UI chrome. What you get is a palette that earns its chromatic moments through restraint.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) as the dominant surface — all light comes from photography, not UI chrome
- Single typeface system: Proxima Nova (Adobe Fonts) at weights 400–700 covering all display and UI text
- Extreme negative tracking at display scale: -3.6px at 120px, -3px at 100px — compressed, print-poster density
- All-caps uppercase transforms on button labels and overline tags with wide positive tracking (1.4–1.6px)
- `{colors.primary}` electric indigo reserved exclusively for primary CTA buttons — never secondary, never decorative
- Button radius is 16px (`{rounded.md}`) — substantial but not pill; more angular than Oura, less stark than Nike
- Button padding is 20px 40px — chunky, athletic presence
- Health metrics use dedicated chromatic tokens: `{colors.recovery-green}` and `{colors.strain-blue}`
- Diffused cool silver shadows (`rgba(199,199,199,0.25)`) for card elevation — never warm, never colored
- Contrast-break light sections (`{colors.surface-light}`) punctuate the dark experience with sharp value shifts
- Motion is default `ease` at 0.2s — snappy and purposeful, no lingering theatrical transitions
- Tailwind CSS arbitrary values with Headless UI for component primitives

## Colors

### Primary
- **Pure Black** (`{colors.background}`): The dominant canvas. Not near-black, not off-black — `#000000`. Every primary section, hero, and navigation rests on this surface. The choice reads as athletic precision, not corporate darkness.
- **Light Gray Break** (`{colors.surface-light}`): Tailwind's `gray-200` equivalent (`#e5e7eb`). Used for contrast-break section bands — the site alternates deliberately between black and light gray to give the eye a pulse.
- **White Surface** (`{colors.surface-white}`): Pure white for cards and content areas within light sections.

### Brand Accent
- **Electric Indigo** (`{colors.primary}`): The single brand chromatic moment in the UI layer. All primary CTAs — "Join Now," "Start With One" — use this `#4a53ff`. It has a slightly purple-shifted blue quality that reads as technological and premium without the chill of a pure corporate blue.
- **Indigo Hover** (`{colors.primary-hover}`): A slightly brighter `#5964ff` applied on button hover states (extracted from dembrandt hover analysis).

### Text
- **White on Dark** (`{colors.on-dark}`): Primary text on the black canvas. No temperature adjustment — pure white for maximum contrast.
- **Mid Gray** (`{colors.on-dark-muted}`): `#808080` for captions, metadata, and secondary text on dark surfaces. The midpoint of the lightness scale, it recedes appropriately.

### Health Metric Palette
- **Recovery Green** (`{colors.recovery-green}`): The WHOOP recovery ring color — `#32ae88`. A muted athletic green that registers vitality without becoming a success-state alarm.
- **Strain Blue** (`{colors.strain-blue}`): Effort and strain metric hue — `#479ac2`. A mid-toned blue-teal used in gradient overlays on training content.

### Borders & Shadows
- **Light Border** (`{colors.border}`): `#e5e5e5` — hairline dividers in light sections.
- **Shadow Soft** (`{colors.shadow-soft}`): The flattened hex of the site's primary shadow tint (`rgba(199,199,199,0.25)`) — `#c7c7c7`. Applied to card and content block hover elevations.

## Typography

### Font Family
- **Primary**: `proxima-nova` (Adobe Fonts, loaded via Typekit), with fallbacks: `Arial, Helvetica, sans-serif`
- Single-family system — no display serif, no monospace. Proxima Nova's geometric-humanist hybrid covers all roles from campaign headline to legal caption.
- No specific OpenType feature overrides detected; standard settings apply.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference.

| Token | Use |
|---|---|
| `display-hero` | Campaign hero headline — 120px / 400 / -3.6px tracking |
| `display` | Secondary hero and feature section titles — 100px / 400 / -3px |
| `heading-section` | Section-level headings — 50px / 600 / -2px |
| `heading` | Feature subheadings, product callouts — 35px / 600 / -1.4px |
| `heading-sub` | Card titles, mid-page subheadings — 32px / 600 / -1.2px |
| `heading-card` | Compact card headings, metric labels — 25px / 600 / -1px |
| `body-large` | Intro paragraphs, feature descriptions — 24px / 400 / -0.72px |
| `body-medium` | Secondary body copy, list items — 20px / 400 / -0.6px |
| `body` | Standard UI text, descriptions — 16px / 400 |
| `button-ui` | All button labels — 14px / 700 / 1.4px / UPPERCASE |
| `button-ui-lg` | Large button variants — 16px / 700 / 1.6px / UPPERCASE |
| `nav-link` | Navigation items — 14px / 400 |
| `label-upper` | Overline tags, metric labels — 13px / 700 / 1.3px / UPPERCASE |
| `caption` | Fine print, legal, metadata — 12px / 400 |

### Principles
- **One font, full range**: Proxima Nova from 120px hero to 12px caption. The system gets tonal variety purely from weight (400 display, 600 headings, 700 UI) and size, not font switching.
- **Compression is the display signature**: Negative tracking deepens with scale — the larger the text, the tighter the spacing. At 120px it approaches condensed-width territory without switching to a different typeface.
- **Uppercase as activation**: Button labels and overline tags universally uppercase with wide positive tracking (1.3–1.6px). This is a sports-brand convention that signals "action" versus "information."
- **Weight 600 is the heading workhorse**: Unlike systems that use 700 for headlines, Whoop's section headings run at 600 — confident but not shouting, appropriate for a brand that leads with data over bravado.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit: 8px. The most frequently used values on the site are 10px, 15px, 20px, 24px, 30px, and 50px — slightly off an exact 8px grid, typical of Tailwind arbitrary-value usage. The 4xl (100px) value drives section-level vertical gaps on desktop.

### Grid & Container
- Max content width: 1280px (matching the widest Tailwind breakpoint)
- Hero sections: full-viewport-width with full-bleed photography and dark overlays
- Feature sections: alternating single-column and side-by-side two-column layouts
- Product comparison rows: horizontal scroll on mobile, full-width grid on desktop
- Nav: full-width dark bar, WHOOP wordmark left-aligned, nav links centered, CTA right-aligned

### Whitespace Philosophy
- **Athletic density**: Spacing is generous at the section level but compact at the component level. Feature cards sit close together — the grid reads as information-dense, not airy.
- **Photography does the breathing**: Because full-bleed hero images take up large vertical space, the layout never needs to manufacture whitespace artificially. Content follows images directly.
- **Contrast as rhythm**: The alternation between `{colors.background}` (black) and `{colors.surface-light}` (light gray) sections creates a visual pulse that substitutes for whitespace-based rhythm.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, solid background | Dark canvas sections, nav bar |
| Subtle (Level 1) | `rgba(199,199,199,0.25) 0px 4px 15px 0px` | Feature cards on hover |
| Card (Level 2) | `rgba(222,222,222,0.2) 0px 4px 20px 0px` | Lighter card elevation in light sections |
| Elevated (Level 3) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Modals, overlays |
| Focus Ring | `0px 0px 0px 2px {colors.primary}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Whoop's shadow system uses cool silver-gray diffused shadows (`{colors.shadow-soft}`) — never warm, never brand-colored. The primary elevation language is the hard value contrast between dark and light section backgrounds, not shadow depth. When shadows appear, they are wide and soft (15–20px blur radius at 0–4px offset), creating a gentle floating effect on cards rather than a depth stack. This matches the athletic product photography aesthetic — surfaces feel solid, not layered.

## Shapes

The complete radius scale lives in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed images, video containers, section edges |
| `sm` | 8px | Small UI chips, tag badges |
| `md` | 16px | Buttons (the signature shape), larger cards |
| `lg` | 24px | Feature cards, image containers, modal panels |
| `pill` | 9999px | Membership tier chips, promo banner tags |
| `pill` (circle) | 9999px / `border-radius: 50%` via CSS | Athlete profile thumbnails, metric rings (use `50%` in CSS directly) |

The button radius (16px) is a deliberate midpoint — more rounded than a sharp rectangle (which would read as too technical) but more angular than a full pill (which would read as too playful). It communicates precision engineering with a human edge. The 50% circle shape appears frequently for athlete imagery and the WHOOP recovery ring visualization.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Electric indigo (`{colors.primary}`) fill, white text, 16px radius, 20px/40px padding, 14px uppercase tracked labels. The hardest-working element on the site. "Join Now" appears in the nav, in every hero, and in sticky CTAs.
- **`button-secondary`** — White fill, black text, same radius and padding. Used alongside primary buttons as a softer "Learn More" path or on dark sections where the indigo would over-compete.
- **`button-ghost`** — White fill with 1px black border, black text. Appears on lighter section backgrounds where the outline provides definition without filling with color.
- **`button-ghost-dark`** — Transparent fill with 1px white border, white text, 8px radius. "Try WHOOP for Free" variant on dark canvas — the smaller radius here (`{rounded.sm}`) distinguishes it from the filled button hierarchy.
- **`button-dark`** — Black fill, white text, 16px radius. Used for "Start With One" style CTAs on dark sections where the indigo is the premium tier above.

### Cards
- **`card`** — Dark surface (`{colors.surface}`) with 24px radius and 24px padding. The standard container for feature callouts on the dark canvas.
- **`card-light`** — White surface with 24px radius. Used in the light section breaks for feature comparisons and testimonial blocks.
- **`card-metric`** — Black background with 24px radius for health data panels. The recovery score, strain score, and WHOOP Age all live in this container style.

### Inputs
- **`input`** — Black background, white text, zero border-radius, bottom-border only (`1px solid white`). Minimal email input on dark sections — the underline treatment reads as data entry, not form filling. Focus state changes to a full 1px solid border.

### Badges
- **`badge-recovery`** — Recovery green fill (`{colors.recovery-green}`), pill-shaped, uppercase tracked labels. Used for "Recommended" and positive metric callouts.
- **`badge-dark`** — Dark surface fill, 8px radius, uppercase tracked labels. Category and feature classification tags.

### Navigation
**`nav-bar`** — Black background, white nav-link text at 14px / 400. Uppercase category labels ("MEMBERSHIPS," "HOW IT WORKS") with minimal weight. Right-aligned "JOIN NOW" button in electric indigo (`{colors.primary}`) is the only color in the bar. Sticky behavior with a 0.25s ease transition on scroll.

## Do's and Don'ts

### Do
- Ground every page section in either `{colors.background}` (black) or `{colors.surface-light}` (light gray) — the binary alternation is the rhythm
- Apply `{colors.primary}` exclusively to primary CTAs — one electric indigo button per section, maximum
- Use uppercase with wide positive tracking (1.3–1.6px) on all button labels and overline tags via `{typography.button-ui}` and `{typography.label-upper}`
- Apply the 16px radius (`{rounded.md}`) to all filled buttons — never pill, never sharp rectangle
- Use Proxima Nova weight 600 for section headings — weight 700 is reserved for 14–16px button labels and captions only
- Let full-bleed photography carry chromatic energy; keep UI chrome strictly black, white, and indigo
- Use `{colors.recovery-green}` and `{colors.strain-blue}` only in health metric contexts — never in marketing UI chrome
- Apply negative letter-spacing that scales with font size: -3.6px at 120px, tapering to 0px at 16px

### Don't
- Don't use `{colors.primary}` indigo for decorative accents, borders, or secondary interactive elements — its power depends on scarcity
- Don't introduce warm neutrals, cream, or beige — the system is cold and precise; warmth would undermine the athletic register
- Don't add pill-shaped buttons (`{rounded.pill}`) to the primary button set — 16px radius is the design decision; pill reads as consumer, not performance
- Don't use Proxima Nova at weight 700 above 16px — at display scale, 700 reads as aggressive rather than confident; 400 and 600 cover all headline contexts
- Don't apply box shadows to the nav bar or dark canvas sections — flat is the rule; shadows exist only on card hover states and modals
- Don't center-align body paragraphs — left-aligned throughout; center alignment reserved for single-line hero display moments
- Don't mix the recovery green (`{colors.recovery-green}`) with the strain blue (`{colors.strain-blue}`) in the same UI context without a separating neutral — they clash at equal saturation
- Don't soften the black canvas with opacity overlays or gradients that lift it toward dark gray — when the brand says black, it means `{colors.background}` (#000000)

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Minimal layout; hero text reduces significantly; single-column everything |
| Mobile | 425–768px | Single-column feature sections; nav collapses to hamburger; hero type ~60px |
| Tablet | 768–1024px | Two-column grids begin; hero headline at ~80px; nav partially visible |
| Desktop Small | 1024–1280px | Full nav; three-column product grids; hero at full 120px display |
| Large Desktop | >1280px | Centered max-width container (1280px); symmetric side margins expand |

### Touch Targets
- All buttons: 20px/40px padding renders well above 44px height minimum on all variants
- Nav links on mobile: collapse into full-height drawer with generous tap targets
- Metric ring illustrations: interactive only at 300px+ circle size — not interactive on narrow viewports

### Collapsing Strategy
- `{typography.display-hero}` (120px) scales to approximately 48–64px on mobile; negative tracking reduces proportionally
- Section headings (`{typography.heading-section}`, 50px) collapse to 28–32px on mobile
- Product comparison grids: 3-up → 2-up → single-scroll horizontal on mobile
- Navigation: horizontal link bar → hamburger icon → full-screen overlay drawer
- Section vertical padding collapses from 100px (desktop) to 40px (mobile)
- The promo banner at the top persists on mobile at reduced height

### Image Behavior
- Hero photography is full-viewport-width at all breakpoints — maintains immersive dark-canvas feel on mobile
- Athlete profile photos maintain aspect ratio in circular containers; scale down proportionally
- App UI screenshots (WHOOP recovery interface) maintain their aspect ratio; laid over abstract background photography
- Dark linear gradient overlays (`rgba(0,0,0,0.2)` → `rgba(0,0,0,0.6)`) on photography sections persist at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — pure black canvas
- Text on dark: `{colors.on-dark}` — white
- Muted text on dark: `{colors.on-dark-muted}` — mid gray
- Primary CTA: `{colors.primary}` — electric indigo
- Light section background: `{colors.surface-light}` — cool light gray
- Recovery metric: `{colors.recovery-green}`
- Border (light sections): `{colors.border}`

### Example Component Prompts

- "Build a Whoop-style hero section. Background: `{colors.background}` (pure black). Full-bleed athlete photography with a dark linear gradient overlay `rgba(0,0,0,0.4)`. Headline: Proxima Nova 120px / weight 400 / letter-spacing -3.6px / line-height 0.8 / color `{colors.on-dark}`. Subline: 24px / 400 / -0.72px / `{colors.on-dark}`. CTA button: `{colors.primary}` fill, `{colors.on-primary}` text, Proxima Nova 14px / 700 / uppercase / 1.4px tracking, border-radius `{rounded.md}` (16px), padding 20px 40px."

- "Design a Whoop feature card for a dark section. Background: `{colors.surface}` (`#111111`). Radius: `{rounded.lg}` (24px). Padding: 24px. Overline: Proxima Nova 13px / 700 / uppercase / 1.3px tracking / `{colors.on-dark-muted}`. Heading: 25px / 600 / -1px / `{colors.on-dark}`. Body: 16px / 400 / line-height 1.5 / `{colors.on-dark-muted}`. Hover state: add `rgba(199,199,199,0.25) 0px 4px 15px 0px` shadow."

- "Create the Whoop navigation bar. Background: `{colors.background}`. Height: 56px. Left: WHOOP wordmark SVG in white. Center: nav links — Proxima Nova 14px / 400 / `{colors.on-dark}`, uppercase with 0.5px tracking. Right: 'JOIN NOW' button — `{colors.primary}` fill, `{colors.on-primary}` text, Proxima Nova 14px / 700 / uppercase / 1.4px tracking, border-radius `{rounded.md}`, padding 12px 24px."

- "Design a WHOOP health metric card. Background: `{colors.background}`. Radius: `{rounded.lg}` (24px). Padding: 20px. Score value: Proxima Nova 80px / 600 / `{colors.on-dark}`. Metric ring underneath in `{colors.recovery-green}` at 4px stroke weight, circular progress indicator. Metric name below: 14px / 400 / `{colors.on-dark-muted}`. Status badge: `{colors.recovery-green}` fill, white text, Proxima Nova 13px / 700 / uppercase / 1.3px tracking, border-radius `{rounded.pill}`, padding 4px 12px."

- "Build a Whoop-style contrast-break section on a light background. Background: `{colors.surface-light}`. Section heading: Proxima Nova 50px / 600 / -2px tracking / `{colors.ink}`. Body paragraph: 20px / 400 / -0.6px / `{colors.ink-light}`. Two cards side by side: white (`{colors.surface-white}`) fill, 24px radius, 24px padding. Bottom CTA: ghost button with `1px solid {colors.ink}` border, black text, Proxima Nova 14px / 700 / uppercase / 1.4px tracking, 16px radius, 20px/40px padding."

### Iteration Guide

1. Start with `{colors.background}` (pure black) — the canvas is a commitment, not a default; resist softening it to near-black or dark gray
2. Reserve `{colors.primary}` for exactly one CTA per section — scarcity is what gives the indigo its charge
3. Apply uppercase with wide tracking (1.3–1.6px) to all button labels and overline tags; never sentence case for interactive elements
4. Use 16px radius (`{rounded.md}`) on all buttons — the shape is a design decision, not a default
5. Typography weight ceiling: 400 for display, 600 for headings, 700 for 14–16px UI text only
6. Alternate dark and light sections for rhythm — `{colors.background}` then `{colors.surface-light}` then black again
7. Health metric colors (`{colors.recovery-green}`, `{colors.strain-blue}`) belong only in metric visualization contexts, never in marketing chrome

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Whoop. Brand names and trademarks belong to their respective owners.