Whoop Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

9type steps

4radius steps

14pxspacing base

Whoop, in one page

WHOOP's iOS app is a *performance instrument panel for the human body*. Where MyFitnessPal is a friendly ledger and Apple Fitness is a celebratory ring chase, WHOOP is the cockpit of a fighter jet — pitch-black canvas, neon-green strain, neon-red recovery, hard-edged tabular numerals, and the conviction that the data is the design. The app does not console you. It tells you that your recovery is 38% and your sleep was 6h 12m and that today's strain target is 13.2. The aesthetic is *clinical sports-tech*: think performance lab, not wellness retreat.

The canvas is WHOOP Black (#0A0A0A) — not pure black, but near enough that on an OLED screen the panel disappears into the device bezel. Every screen is built on this single foundation. The accents are deliberately neon — colors that vibrate against deep black: Strain Green (#00FF7B), the signature acid-electric green that has been WHOOP's brand color since 2012; Recovery Green (#16EC06) when recovery is high; Recovery Yellow (#FFDE00) when moderate; Recovery Red (#FF0026) when low; Sleep Blue (#0093E7) for the Sleep tab. These five accents do the heavy lifting; everything else is a six-step ramp of cool grays from #1C1C1E (surface 1) down to #F5F5F7 (inverse text).

Typography is uniformly DIN-style — WHOOP licenses DIN 2014 as the primary face, a flat, mechanically-engineered sans serif designed for instrumentation panels and modern wayfinding. The display weights are heavy: 30pt-50pt Bold for the strain number, 64pt+ for recovery percentage on the daily overview. All-caps is the dominant header treatment — "STRAIN", "RECOVERY", "SLEEP" — with wide letter-spacing (0.8pt+) and tight numerals. The numerals are *always* tabular and *always* monospaced — these are physiological metrics, not decoration.

Key Characteristics:

Pitch-black canvas (#0A0A0A) on every screen — no light mode exists in the WHOOP app
Strain Green (#00FF7B) as the signature accent — strain bar, primary CTA, active tab
Recovery rings color-shift: red → yellow → green based on physiological score, in 1% increments
Sleep blue (#0093E7) reserved for the Sleep tab and sleep-stage charts
All-caps headers with wide tracking — STRAIN, RECOVERY, SLEEP, COACHING
DIN 2014 typography — flat, mechanical, instrument-panel feel
Tabular numerals everywhere — every metric, every number, monospaced
The Recovery donut and Strain bar are signature components — 8pt-thick rings/bars with neon gradient fills
Bottom tab bar with 4 tabs: Overview, Coaching, Community, Stats — minimal labels
Subtle borders (1pt #2A2A2A) over shadows — WHOOP is flat and edge-defined, not elevated
Negative space is sacred — large vertical gaps between cards let the neon accents breathe

Do's and don'ts

Do

Use #0A0A0A as the canvas everywhere — WHOOP is dark-mode-only
Use Strain Green #00FF7B as the primary action color — CTAs, active tabs, links
Let the Recovery ring interpolate red → yellow → green by score; never override the color
Use DIN 2014 — license it, or substitute Inter / Barlow when DIN 2014 isn't available
Set tabular numerals on every metric — HRV, RHR, strain, sleep duration, percentages
Use ALL CAPS with wide letter-spacing for headers, button labels, tab labels, meta tags
Use 1pt #252525 hairline borders instead of shadows for card definition
Use neon glows (12-24pt blur, ~20% opacity) as elevation cues for live/active elements
Reserve Sleep Blue #0093E7 for the Sleep tab and sleep-stage visualizations
Keep the strain bar gradient #005F2F → #00FF7B → #67E26B left to right
Render activity-type icons as 40pt outlined Strain Green glyphs

Don't

Don't add a light mode — WHOOP is dark-canvas-only by design
Don't use Strain Green for non-strain metrics — green means strain or "go", recovery has its own ramp
Don't use neutral drop shadows — the canvas is already too dark; use glows instead
Don't break the all-caps treatment on headers and buttons — it's the most recognizable typographic move
Don't compress the Recovery ring smaller than 80pt — below that, the giant number stops being legible
Don't use full pill corner radii on primary buttons — 4pt is the instrument-panel radius
Don't replace DIN 2014 with a humanist sans (Inter is the only acceptable fallback because it shares the mechanical proportions)
Don't use the Recovery red #FF0026 for general alerts — that's #FF453A Alert Red; the two are intentionally different
Don't add a 5th tab to the bottom nav — Overview, Coaching, Community, Stats are the canonical four
Don't break tabular numerals on any metric value — the cockpit aesthetic depends on aligned digits

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Whoop design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- WHOOP Black: #0a0a0a
- Strain Green: #00ff7b
- Recovery Green: #16ec06
- Recovery Yellow: #ffde00
- Recovery Red: #ff0026
- Sleep Blue: #0093e7
- Strain Green Bright: #67e26b
- Strain Green Dim: #005f2f
- Sleep Blue Bright: #4fb8ff
- REM Purple: #9c4dff

Type:
- families: Inter, Barlow, Numbers, Today's Activity
- scale: 10, 11, 14, 15, 18, 24, 48, 56, 76
- weights: 400, 500, 700, 800

Shape:
- radius: 4, 8, 12, 16
- elevation: No shadow — defined entirely by edge contrast with the canvas

Spacing: 14, 20, 24, 48

Rules:
- Use `#0A0A0A` as the canvas everywhere — WHOOP is dark-mode-only
- Use Strain Green `#00FF7B` as the primary action color — CTAs, active tabs, links
- Let the Recovery ring interpolate red → yellow → green by score; never override the color
- Use DIN 2014 — license it, or substitute Inter / Barlow when DIN 2014 isn't available
- Set tabular numerals on every metric — HRV, RHR, strain, sleep duration, percentages
- Use ALL CAPS with wide letter-spacing for headers, button labels, tab labels, meta tags

Avoid:
- Don't add a light mode — WHOOP is dark-canvas-only by design
- Don't use Strain Green for non-strain metrics — green means strain or "go", recovery has its own ramp
- Don't use neutral drop shadows — the canvas is already too dark; use glows instead
- Don't break the all-caps treatment on headers and buttons — it's the most recognizable typographic move
- Don't compress the Recovery ring smaller than 80pt — below that, the giant number stops being legible
- Don't use full pill corner radii on primary buttons — 4pt is the instrument-panel radius

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Primary

Strain Green (#00FF7B): The signature accent — strain bar fill, primary CTA, active tab tint, link color.
Strain Green Bright (#67E26B): Lighter strain green used on gradient stops in the strain bar.
Strain Green Dim (#005F2F): Darker green for empty-state pulses and disabled states.

Recovery Spectrum (color-shifts based on score)

Recovery Red (#FF0026): Recovery score 0–33% (low recovery, body is fatigued).
Recovery Yellow (#FFDE00): Recovery score 34–66% (moderate).
Recovery Green (#16EC06): Recovery score 67–100% (high recovery).
The ring interpolates between these three in 1% increments — the exact RGB lerps from red to yellow at 33%, and yellow to green at 67%.

Sleep

Sleep Blue (#0093E7): The Sleep tab accent — sleep-stage chart, sleep-need ring fill, time-in-bed metric.
Sleep Blue Bright (#4FB8FF): Lighter sleep blue for gradient highlights and active hover.
REM Purple (#9C4DFF): REM-stage segment in the sleep-stage stack chart.
Deep Sleep Indigo (#3D3DFF): Deep-sleep segment.
Light Sleep Cyan (#3DD9FF): Light-sleep segment.

Canvas, Surfaces & Dividers

WHOOP Black (#0A0A0A): Primary canvas — every screen.
Surface 1 (#1C1C1E): Cards, sheets, tab bar background.
Surface 2 (#2A2A2A): Chip backgrounds, input fills, hover/press states.
Surface 3 (#3A3A3A): Highest elevation — slider tracks, popovers.
Divider (#252525): Hairline dividers between rows.
Hairline (#1A1A1A): Subtle border between cards on dark canvas.

Text

Bright White (#FFFFFF): The big numeric heroes — strain number, recovery %, sleep duration.
Soft White (#F5F5F7): Body text, list items.
Gray 400 (#A1A1AA): Secondary text, captions, meta info.
Gray 600 (#5F5F65): Tertiary, disabled, placeholder.
Gray 700 (#3F3F45): Icon-only states on inactive elements.

Semantic

Alert Red (#FF453A): Critical alerts (low battery, missed measurement), distinct from Recovery Red.
Warning Amber (#FFAA00): Caution states, "Strain trending high".
Info Blue (#0A84FF): Informational toasts, learn-more links.
Success Green (#30D158): Sync complete, goal hit (distinct from Strain Green).
Premium Gold (#D4AF37): WHOOP Whole Body / Pro tier badges.

No Light Mode

WHOOP has no light mode. The app is dark-canvas-only by design — physiological metrics read best on black, and the brand identity is inseparable from the pitch-black panel.

Type scaleRead the full spec

Font Family

Primary: DIN 2014 (licensed face by ParaType)
Weights available: Light (300), Regular (400), Demi (500), Bold (700), Extra Bold (800)
Fallback stack: 'DIN 2014', 'D-DIN', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif
Web/marketing Google Fonts substitute: Inter or Barlow — both share DIN 2014's geometric, slightly condensed proportions
Numbers: Tabular numerals are non-negotiable. DIN 2014 ships with tabular figures by default at all weights.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Recovery Hero	DIN 2014	76pt	800	1.0	-1.6pt	"73%" — the giant Recovery % on Overview
Strain Hero	DIN 2014	56pt	800	1.0	-1.0pt	"13.2" — the strain score
Sleep Hero	DIN 2014	48pt	800	1.0	-0.8pt	"6h 12m" — sleep duration
Section Header (caps)	DIN 2014	14pt	700	1.0	1.6pt uppercase	"RECOVERY", "STRAIN", "SLEEP"
Large Nav Title	DIN 2014	24pt	700	1.15	-0.2pt	"Overview", "Coaching", "Stats"
Section Subhead	DIN 2014	18pt	700	1.2	0pt	"Today's Activity"
Card Title	DIN 2014	15pt	500	1.25	-0.05pt	"Heart Rate Variability"
Body	DIN 2014	14pt	400	1.4	0pt	Article copy, explanations
Meta (caps)	DIN 2014	11pt	700	1.0	1.2pt uppercase	"TODAY", "PAST 7 DAYS"
Metric Value	DIN 2014	18pt	700 tnum	1.0	0pt	"57 ms" HRV, "62 bpm" RHR
Metric Label	DIN 2014	11pt	500	1.0	0.6pt uppercase	"HRV", "RHR", "RESPIRATORY RATE"
Button (Primary)	DIN 2014	14pt	700	1.0	1.0pt uppercase	"VIEW DETAILS", "LOG ACTIVITY"
Tab Label	DIN 2014	10pt	700	1.0	0.8pt uppercase	"OVERVIEW", "COACHING"
Chart Axis	DIN 2014	10pt	500	1.0	0.2pt tnum	Time labels, percentile ranges

Principles

All-caps with wide tracking on headers — this is the defining typographic move of WHOOP. Section labels, tab labels, button labels, and meta tags are uppercase with 0.6–1.6pt letter-spacing.
Tabular numerals on every metric — HRV, RHR, calories, time durations, heart-rate values — DIN 2014's tabular figures are part of why the app reads as instrumentation.
Weights cluster at 400 / 500 / 700 / 800 — Regular for body, Demi for card titles, Bold for headers, Extra Bold for the giant hero metrics.
Tight tracking at hero sizes (-1.6pt on the 76pt Recovery number, -1.0pt at 56pt strain), neutral at body.
Mixed-unit numbers stay tabular — "6h 12m" sleep duration, "57 ms" HRV; the unit letters share the same monospaced cadence.
Bright white is reserved for hero metrics; body text sits at #F5F5F7 and meta at #A1A1AA.
Dynamic Type respected on body and explanations, fixed on hero metrics, tab labels, chart axes.

Components and layoutRead the full spec

Buttons

Primary CTA ("LOG ACTIVITY", "VIEW DETAILS", "GET STARTED")

Background: #00FF7B (Strain Green)
Text: #0A0A0A, DIN 2014 14pt Bold, uppercase, letter-spacing 1.0pt
Padding: 14pt vertical, 28pt horizontal
Corner radius: 4pt — almost square, in keeping with the instrument-panel aesthetic (WHOOP buttons are *not* pills)
Height: 48pt minimum
Pressed: background #67E26B, scale 0.98
Haptic: .impactOccurred(.medium) on tap

Secondary Outline Button ("CANCEL", "LEARN MORE")

Background: transparent
Border: 1.5pt #00FF7B (Strain Green)
Text: #00FF7B, DIN 2014 14pt Bold, uppercase, letter-spacing 1.0pt
Corner radius: 4pt
Same height/padding as primary

Tertiary Text Button

Text: #00FF7B, DIN 2014 14pt Demi, uppercase, letter-spacing 1.0pt
No background, 44pt tap target
Used in lists ("VIEW ALL", "EDIT", "SAVE")

Critical/Destructive Button ("DELETE", "END WORKOUT")

Background: transparent
Border: 1.5pt #FF453A
Text: #FF453A, DIN 2014 14pt Bold, uppercase, letter-spacing 1.0pt

Cards & Containers

Recovery Ring (the hero of Overview)

Diameter: 240pt on Overview, 80pt as the dashboard summary
Stroke width: 10pt (on the 240pt hero), 6pt (on summary)
Background ring: #2A2A2A
Filled ring: gradient that interpolates by recovery score
0–33%: solid #FF0026 (Recovery Red)
34–66%: gradient red → yellow #FFDE00
67–100%: gradient yellow → green #16EC06
The score is a 2pt-wide gap between the start and end of the stroke — the ring is "open" at the top
Center stack: "RECOVERY" 14pt 700 uppercase 1.6pt tracking #A1A1AA → 76pt 800 tabular #FFFFFF "73" → small "%" 24pt 700 inline
Below the ring: HRV / RHR / SpO₂ / Skin Temp metric strip — 4 columns, each with the value + caps label

Strain Bar (Overview center)

Width: full content width minus 40pt margins
Height: 12pt
Background: #2A2A2A
Filled fill: gradient #005F2F → #00FF7B → #67E26B, left to right
Endpoints: tiny 4pt vertical tick marks at 8 (low), 10 (moderate), 14 (high), 18 (all-out) strain levels with caps labels above
Current strain marker: a 16pt × 16pt white circle slides along the bar position; its center value matches the strain number
Animation: marker slides smoothly via spring (response 0.5, damping 0.7)

Sleep Stage Chart (Sleep tab)

Horizontal stacked bar, 32pt tall, full width
Segments: REM #9C4DFF, Deep #3D3DFF, Light #3DD9FF, Awake #5F5F65
Time-of-night axis below: 11pm – 7am with hourly tick marks in 10pt 500 #A1A1AA
Tap a segment: pops a callout showing the segment's start/end time + duration in tabular numerals
The chart is the centerpiece of the Sleep tab and gets a 32pt margin above and below

Metric Card (Recovery / Sleep / Strain summary on Overview)

Background: #1C1C1E (Surface 1)
Border: 1pt #252525
Corner radius: 12pt
Padding: 20pt all sides
Layout:
Top row: small 6pt-stroke ring on the left (80pt diameter) → metric label + value on the right (caps label above, hero number below)
Bottom row: 3–4 supplementary metrics in a horizontal flexbox with caps labels
No shadow — defined entirely by edge contrast with the canvas

Activity Row (Activity / Workout list)

Height: 72pt
Background: #0A0A0A with a 0.5pt #252525 bottom divider
Layout (leading to trailing):
40pt circular activity-type icon (e.g., figure.run outlined Strain Green)
12pt gap → activity name 15pt 500 white + strain value 18pt 700 tabular Strain Green underneath
flex spacer → duration "1h 32m" 14pt 500 white + start time 12pt 400 #A1A1AA underneath
12pt trailing chevron #5F5F65
Tap haptic: .selectionChanged(), opens the workout detail

Coaching Card (Coaching tab)

Background: gradient #1C1C1E → #0A0A0A top-to-bottom
Border: 1pt #252525
Corner radius: 16pt
Padding: 24pt
Top: caps category label (e.g., "SLEEP COACHING") 11pt 700 #A1A1AA 1.2pt tracking
Headline: "You're getting plenty of REM but light sleep is fragmented." DIN 2014 18pt 700 white
Body: 14pt 400 #F5F5F7 explanation
Action button: tertiary text link in Strain Green at the bottom

Heart-Rate Live Card

A wide card showing a real-time heart-rate trace
Background: #1C1C1E
Trace: 2pt Strain Green polyline that scrolls right-to-left at 60fps when live
Big BPM number: 36pt 800 tabular #FFFFFF with a 16pt heart glyph in Strain Green pulsing on each beat (scale 1.0 → 1.15 → 1.0 over 600ms)
Min/Max/Avg pills below the trace, each in #2A2A2A fill with caps labels

Navigation

Large-Title Nav Bar

Height: variable — 88pt with large title, collapses to 44pt inline
Background: #0A0A0A, becomes .systemThinMaterialDark blur when content scrolls under
Title: DIN 2014 24pt 700 #FFFFFF, left-aligned, 20pt leading inset
Trailing: 24pt SF Symbol or DIN-icon (often bell or gearshape)
Below title row (Overview only): tiny strain/recovery/sleep summary chip strip

Bottom Tab Bar

Responsive behaviourRead the full spec

Device Sizes

Device	Width	Key Changes
iPhone SE (3rd gen)	375pt	Recovery ring shrinks to 200pt; activity rows compress slightly
iPhone 13/14/15	390pt	Standard 240pt ring; 20pt horizontal margins
iPhone 15/16 Pro	393pt	Dynamic Island respected; large nav title nudges down 8pt
iPhone 15/16 Pro Max	430pt	Recovery ring up to 260pt; day switcher fits 10 chips
iPad	768pt+	2-column dashboard (Recovery / Strain side by side); coaching becomes a 3-col grid

Dynamic Type

Body, coaching headlines, activity names, large nav title: scale up to XXL
Fixed: Recovery hero number, Strain hero, Sleep hero, tab labels, chart axes, metric labels

Orientation

Portrait-locked on iPhone for all primary screens
Strain trends and HRV history support landscape on Pro Max (full-width chart)
iPad supports both orientations natively

Touch Targets

Day switcher chips: 36pt visual, 44pt hit slop
Primary CTA: 48pt height, full width minus 40pt margins
Tab bar icons: 22pt icon, 56pt row height
Sleep stage segment: full segment height (32pt), minimum 24pt hit-width

Safe Area Handling

Top: large nav title starts at safe-area top + 16pt
Bottom: tab bar honors home indicator
Live workout banner sits *above* the safe-area top, replacing the status bar background

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-whoop {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #0a0a0a;
  --heading-color: #0a0a0a;
  --link-color: #00873f;
  --link-hover-color: #005427;
  --border-color: #d3d3d3;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(10,10,10,0.06);
  --card-hover-shadow: 0 6px 18px rgba(10,10,10,0.12);
  --header-bg: #0a0a0a;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #606060;
  --button-bg: #00ff7b;
  --button-text-color: #000000;
  --button-hover-bg: #00cc62;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #0a0a0a;
  --button-secondary-hover-bg: #e2e2e2;
  --button-secondary-border: 1px solid #d3d3d3;
  --prompt-bg: #f3f3f3;
  --prompt-text-color: #0a0a0a;
  --base-font: var(--font-inter);
  --heading-font: var(--font-inter);
  --card-border-radius: 12px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

robinhood 73.3%
plenty of fish 73.2%
vimeo 73.1%
myfitnesspal 73.0%
nike run club 72.7%

Where this came from

Source document: ios/design-md/fitness/whoop/DESIGN.md · 26.0 KB
Repository: Meliwat/awesome-ios-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.