---
version: alpha
name: WHOOP
description: "Product photography under studio light, framed by a black instrument bar and one electric-violet pulse — a performance lab that speaks in oversized type and data, never decoration."
colors:
  on-surface-variant: "#808080"
  on-surface: "#000000"
  surface: "#ffffff"
  outline: "#f7f3f3"
  primary: "#4a53ff"
  ink-black: "#131111"
  carbon: "#191919"
  graphite: "#1e1e1e"
  slate-gray: "#666666"
  lab-mist: "#f3f5f9"
  hairline: "#e5e7eb"
  ash: "#999999"
typography:
  caption:
    fontFamily: Proxima Nova
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.59
    letterSpacing: 0em
  body-sm:
    fontFamily: Proxima Nova
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: -0.48px
  body-lg:
    fontFamily: Proxima Nova
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: -0.6px
  subheading:
    fontFamily: Proxima Nova
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: -0.72px
  heading-sm:
    fontFamily: Proxima Nova
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.09
    letterSpacing: -0.96px
  heading:
    fontFamily: Proxima Nova
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -1.05px
  heading-lg:
    fontFamily: Proxima Nova
    fontSize: 50px
    fontWeight: 400
    lineHeight: 0.8
    letterSpacing: -2px
  display-sm:
    fontFamily: Proxima Nova
    fontSize: 100px
    fontWeight: 400
    lineHeight: 0.75
    letterSpacing: -4px
  display:
    fontFamily: Proxima Nova
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.71
    letterSpacing: -4.8px
rounded:
  rectangular-buttons: 16px
  cards: 24px
  images: 24px
  circular-icon-buttons: 9999px
  mediumrounded-panels: 30px
  pill: 300px
  small-elements-tags: 8px
spacing:
  "5": 5px
  "8": 8px
  "10": 10px
  "12": 12px
  "15": 15px
  "16": 16px
  "20": 20px
  "24": 24px
  "25": 25px
  "30": 30px
  "33": 33px
  "36": 36px
  "38": 38px
  "40": 40px
  "50": 50px
  "92": 92px
---
# WHOOP — Style Reference
> Product photography under studio light, framed by a black instrument bar and one electric-violet pulse — a performance lab that speaks in oversized type and data, never decoration.

**Theme:** mixed

WHOOP runs a high-contrast split-canvas system: full-bleed photographic and pure-black theatrical sections alternate with clinical white content bands, a rhythm that mirrors the brand's own language of strain and recovery. Typography is the dominant voice — a single Proxima Nova family stretches from 14px tracked-uppercase labels to a 120px display headline with aggressive negative tracking (-4.8px), so oversized headlines read as carved rather than stacked. One vivid electric violet (#4a53ff) is the lone chromatic accent against an otherwise achromatic ramp; it carries the primary CTA ("JOIN NOW") and the top announcement bar, and nothing else. Components are large and confident: 24px-radius cards and image crops, 16px-radius rectangular CTAs, fully-round circular utility buttons, and photographic overlay cards with white text laid directly on the image in place of the usual SaaS card grid. Elevation is flat — color contrast and off-white fills do the work drop shadows normally would. The result feels less like a marketing page and more like a premium performance lab: scientific, dramatic, and organized around data over ornament.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Pulse Violet | `#4a53ff` | `--color-accent` | The single chromatic accent (site's own `--color-accent: 74 83 255`). Carries the primary CTA ("JOIN NOW") and the top announcement bar. No other element takes chromatic color |
| Obsidian | `#000000` | `--color-obsidian` | Primary text on light surfaces, the black nav/instrument bar, dark hero and CTA backgrounds, icon strokes |
| Ink Black | `#131111` | `--color-ink-black` | Warm near-black text variant measured on dark-on-light headings — a touch softer than pure Obsidian for large display copy |
| Carbon | `#191919` | `--color-carbon` | Secondary dark surface — footer band and alternating black sections |
| Graphite | `#1e1e1e` | `--color-graphite` | Raised dark surface one step above Carbon — dark cards and inset panels on black sections |
| Slate Gray | `#666666` | `--color-slate-gray` | Muted mid-gray surface — translucent overlay chips (the "HSA/FSA eligible" pill) and de-emphasized dark fills |
| Paper White | `#ffffff` | `--color-paper-white` | Primary page canvas, card surfaces on dark sections, text on dark backgrounds, filled white pill buttons |
| Lab Mist | `#f3f5f9` | `--color-lab-mist` | Cool off-white elevated surface for light cards and feature panels — distinguishes a card from the page without any shadow |
| Warm Mist | `#f7f3f3` | `--color-warm-mist` | Warm off-white alternate surface and soft hairline border — a paper-warm sibling to Lab Mist, also the most-used measured border |
| Hairline | `#e5e7eb` | `--color-hairline` | Cool neutral border, divider, outlined-button stroke, input frame — the systematic light-UI hairline *(carried from curated; scan measured Warm Mist and Ash as the live borders)* |
| Fog Gray | `#808080` | `--color-fog-gray` | Muted body text, secondary descriptions, placeholder copy on light surfaces |
| Ash | `#999999` | `--color-ash` | Tertiary text, inactive labels, disabled icon strokes, and a measured border color — 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. A condensed cut (`proxima-nova-condensed`) is also loaded for tighter contexts. · `--font-base-sans-serif`
- **Substitute:** Montserrat, Nunito Sans, or DM Sans
- **Weights:** 400, 500, 600, 700
- **Sizes:** 14, 15, 16, 19, 20, 24, 32, 35, 50, 100, 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:** One typeface does all the work — captions to hero display. The tracking compression at display sizes is the brand's visual fingerprint; the geometric warmth of the face keeps the data-first aesthetic from reading cold.

### Type Scale

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

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

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

### Border Radius

| Element | Value |
|---------|-------|
| rectangular buttons (primary/secondary CTA) | 16px |
| cards | 24px |
| images | 24px |
| circular / icon buttons | 9999px (full round) |
| circles / avatars | 50% |
| mediumRounded panels | 30px |
| pill (legacy full) | 300px |
| small elements / tags | 8px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| md | `rgba(199, 199, 199, 0.25) 0px 4px 15px 0px` | `--shadow-md` |
| glow | `rgba(0, 0, 0, 0.2) 0px 0px 18px 0px` | `--shadow-glow` |

### Layout

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

## Components

### Announcement Bar
**Role:** Top-of-page promotional strip

Full-width, ~52px tall, Pulse Violet (#4a53ff) background, white Proxima Nova 14px text centered, with an underlined white text link aligned inline right ("Save with HSA & FSA"). Sits flush above the nav bar with no gap.

### Primary Navigation
**Role:** Top instrument bar

Full-bleed black (#000000) bar, ~72px tall. WHOOP wordmark left in white (with a small registered-trademark mark). Nav links in white 15px weight 500, uppercase with ~0.1em tracking, evenly spaced across the center (MEMBERSHIPS, HEALTH FEATURES, FREE TRIAL, ADVANCED LABS, ACCESSORIES). Right-aligned Pulse Violet CTA pill ("JOIN NOW").

### Primary CTA Button (Pulse Violet)
**Role:** Primary brand action

#4a53ff background, white text, **16px** border-radius, ~20px 40px padding, Proxima Nova 14px weight 700 uppercase with 0.1em tracking. No border, no shadow. This is the true primary action — "JOIN NOW" in the nav and "Join now" in promotional contexts.

### White CTA Button
**Role:** Primary/secondary action on dark or photographic backgrounds

White (#ffffff) background, black (#000000) text, 16px border-radius, ~20px 40px padding, 16px weight 700 uppercase. Used as the high-contrast action on dark hero and CTA bands.

### Circular Utility Button
**Role:** Icon / expand / carousel control

Fully round (9999px radius or 50%), ~40px diameter, transparent or white fill with a 1px stroke, single monoline icon centered. Includes carousel expand buttons and the hero video pause control.

### Overlay Chip
**Role:** Inline eligibility / status tag on imagery

Rounded pill, translucent dark fill (Slate Gray #666666 over photography), small leading icon, white ~14px label ("HSA/FSA eligible"). Sits low-left in the hero over the product photo.

### Full-Bleed Hero
**Role:** Opening theatrical section

100% width, near-full-viewport height. Currently a photographic product hero — a large studio product crop on a cool neutral surface — but the model also supports a pure #000000 theatrical variant. Display headline at 120px Proxima Nova weight 400, white, line-height 0.71, letter-spacing -4.8px, left-aligned across the first ~60% at ~8% page padding, wrapping to two lines. Subtext at 19px weight 400, white, max-width ~520px. Overlay chip and/or white CTA below.

### Lab Mist Feature Card
**Role:** Inline promotional card on light sections

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 the carousel.

### Outlined Pill Button
**Role:** Tertiary action on light surfaces

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

### Dark CTA Band
**Role:** Closing full-bleed black section

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

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 CTA at bottom for the selected tier.

### Metric Overlay Stat
**Role:** Data point on photographic backgrounds

Small white number (32px weight 400) with a 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 #4a53ff for the primary CTA and the announcement bar — and nowhere else; it is the system's only chromatic color
- Give rectangular CTAs a 16px radius and weight-700 uppercase labels; reserve full-round (9999px / 50%) for circular icon and 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 dark/photographic sections with full-bleed white sections at 80-120px gaps; never blend the two with a gray transition
- Render cards at 24px radius with no drop shadow; elevation comes from #f3f5f9 / #f7f3f3 fills and black-on-white contrast, 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 CTAs — WHOOP uses flat color elevation; the two measured shadows are reserved for floating overlays and glow effects only
- Don't introduce a second accent color — the system is monochromatic + one violet; branding tooling that reports green or red is mislabeling and must be ignored
- 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 square-corner the CTAs — rectangular actions round to 16px, circular actions go fully round; nothing is a hard 90° corner
- Don't place colored gradients on UI surfaces; decorative background washes stay behind content, never as component fills
- Don't set running prose below 16px — 14px is reserved for uppercase tracked labels, never body copy

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Page Canvas | `#ffffff` | Default light section background |
| 1 | Lab Mist Card | `#f3f5f9` | Cool elevated feature card on light sections — flat elevation via color |
| 1w | Warm Mist Card | `#f7f3f3` | Warm-paper alternate light surface / soft panel |
| 2 | Dark Section | `#000000` | Full-bleed theatrical hero and closing CTA band |
| 3 | Carbon Band | `#191919` | Secondary dark surface for transitional bands between black and white |
| 4 | Graphite Panel | `#1e1e1e` | Raised dark card / inset panel on black sections |

## Imagery

Photography is the dominant visual asset: studio product renders of the WHOOP band (leather and silicone straps, metallic cases) shot in warm, natural light on cool neutral surfaces, plus tight full-bleed lifestyle crops of athletes and bodies in motion — swimming, running, sleeping on textured bedding. Treatment is raw: no duotone, no color grading overlays, no scrims. Product and lifestyle shots sit inside 24px-radius carousel cards with white text overlaid directly on the photo. UI graphics are minimal — small white circular expand and playback buttons, thin pagination dots, and the occasional green radial-glow metric on a longevity card. No illustrations, no abstract graphics. Icons, where present, are thin-stroke monoline, white on dark and black on light.

## Layout

The page model alternates between full-bleed edge-to-edge sections (no max-width on the outer container) and a 1200px max-width content well for text and card grids. The hero is a full-viewport photographic (or pure-black) theater with a 120px display headline left-aligned across the first ~60% of the screen. Below it, content stacks as white bands containing a single max-width column or a 3-up carousel of photographic cards. Closing sections return to full-bleed black. Navigation is a fixed black instrument bar at the top; content sections scroll naturally without additional 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 / #131111 (light surfaces) / #ffffff (dark surfaces)
- background: #ffffff (light sections) / #000000 (dark sections)
- card surface: #f3f5f9 (cool) / #f7f3f3 (warm)
- dark surfaces: #191919 (band) / #1e1e1e (raised panel)
- border: #e5e7eb / #f7f3f3 / #999999
- muted text: #808080 / #999999
- accent + primary action: #4a53ff (CTA, announcement bar) — the only chromatic color

**3-5 Example Component Prompts**

1. Build a full-bleed hero: photographic product background (or #000000). Headline at 120px Proxima Nova weight 400, #ffffff, line-height 0.71, letter-spacing -4.8px, left-aligned across the first 60% with 8% page padding. Subtext at 19px weight 400, #ffffff, max-width 520px. Below it a rounded overlay chip with a leading icon and a white CTA button (#ffffff bg, #000000 text, 16px radius, 20px 40px padding, 16px weight 700 uppercase).

2. Build the primary CTA button: #4a53ff background, #ffffff text, 16px radius, 20px 40px padding, Proxima Nova 14px weight 700 uppercase with 0.1em letter-spacing. No border, no shadow.

3. 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 full-round button right: transparent fill, 1.5px #e5e7eb border, 12px 28px padding, 14px weight 500 black text.

4. 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 (9999px radius), 1px white border, positioned bottom-right at 16px offset.

5. 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

WHOOP avoids drop shadows almost entirely. The two detected shadows — a soft `rgba(199,199,199,0.25) 0px 4px 15px` and a `rgba(0,0,0,0.2) 0px 0px 18px` glow — are used sparingly on floating overlays and glow effects only. Elevation is communicated through flat color contrast: Lab Mist (#f3f5f9) and Warm Mist (#f7f3f3) cards sit on Paper White (#ffffff); Graphite (#1e1e1e) panels sit on Carbon (#191919) and pure black; black sections sit on white sections; the Pulse Violet CTA sits on black. The system stays clinical and flat — closer to print editorial than a shadowed app UI.

## Similar Brands

- **Oura** — Same split-canvas black/white alternation, oversized display headlines with tight tracking, and a single-accent restrained palette in the health-wearable space
- **Peloton** — Full-bleed photographic hero cards with 24px radius, rounded CTAs, and a dark theatrical opening that transitions to white content
- **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 and tight letter-spacing on large headlines
- **Apple Fitness+** — Athletic-performance peer using photographic carousel cards as the primary content unit with direct white text overlay

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-accent: #4a53ff;            /* site's own: rgb(74 83 255) */
  --color-accent-foreground: #ffffff;
  --color-obsidian: #000000;
  --color-ink-black: #131111;
  --color-carbon: #191919;
  --color-graphite: #1e1e1e;
  --color-slate-gray: #666666;
  --color-paper-white: #ffffff;
  --color-lab-mist: #f3f5f9;
  --color-warm-mist: #f7f3f3;
  --color-hairline: #e5e7eb;
  --color-fog-gray: #808080;
  --color-ash: #999999;

  /* Typography — Font Families */
  --font-base-sans-serif: "proxima-nova", "Arial", "Helvetica", sans-serif;
  --font-condensed: "proxima-nova-condensed", "Arial", 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-sm: 100px;
  --leading-display-sm: 0.75;
  --tracking-display-sm: -4px;
  --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-40px;
  --element-gap: 15-24px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-button: 16px;
  --radius-md: 20px;
  --radius-card: 24px;
  --radius-lg: 30px;
  --radius-round: 60px;
  --radius-pill: 300px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-md: rgba(199, 199, 199, 0.25) 0px 4px 15px 0px;
  --shadow-glow: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;

  /* Surfaces */
  --surface-page-canvas: #ffffff;
  --surface-lab-mist-card: #f3f5f9;
  --surface-warm-mist-card: #f7f3f3;
  --surface-dark-section: #000000;
  --surface-carbon-band: #191919;
  --surface-graphite-panel: #1e1e1e;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-accent: #4a53ff;
  --color-accent-foreground: #ffffff;
  --color-obsidian: #000000;
  --color-ink-black: #131111;
  --color-carbon: #191919;
  --color-graphite: #1e1e1e;
  --color-slate-gray: #666666;
  --color-paper-white: #ffffff;
  --color-lab-mist: #f3f5f9;
  --color-warm-mist: #f7f3f3;
  --color-hairline: #e5e7eb;
  --color-fog-gray: #808080;
  --color-ash: #999999;

  /* Typography */
  --font-base-sans-serif: "proxima-nova", "Arial", "Helvetica", sans-serif;
  --font-condensed: "proxima-nova-condensed", "Arial", 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-sm: 100px;
  --leading-display-sm: 0.75;
  --tracking-display-sm: -4px;
  --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: 8px;
  --radius-button: 16px;
  --radius-md: 20px;
  --radius-card: 24px;
  --radius-lg: 30px;
  --radius-round: 60px;
  --radius-pill: 300px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-md: rgba(199, 199, 199, 0.25) 0px 4px 15px 0px;
  --shadow-glow: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
}
```