Whoop — design system & UI screens

Consumer · 1 screen · 11 sections · whoop.com

The page opens with a vivid violet hero band carrying a "Save up to $60 on an annual membership" headline overlaid on a tan WHOOP band product photo, paired with a white pill CTA. Its signature move is the alternation between dark editorial product sections and warm desert/lifestyle photography, anchored by a three-column pricing trio (ONE / PEAK / LIFE) rendered as floating device-mockup cards and a dense "Backed by PHDs, worn by MVPs" mosaic of athlete video tiles. A near-black "Built to be worn 24/7" feature with a single floating device on void contrasts sharply with the cream and earth-toned imagery above.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/whoop.

Decoded design system

Whoop's decoded design system: background #000000, text #ECECEE, accent #4A53FF, link #FF0026, primary #4A53FF; type scale h1 120px / h2 100px / body 20px; 4px spacing base; 15px base radius. The single interactive/action color is #4A53FF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#000000`
surface	`#0E0E0E`
border	`#232323`
text	`#ECECEE`
text_muted	`#929293`
primary	`#4A53FF`
accent	`#4A53FF`
link	`#FF0026`
secondary	`#41FF31`
button_bg	`#4A53FF`
button_text	`#FFFFFF`

Using these colors

Action color #4A53FF — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #4A53FF — one role, not several (the action color).
accent #4A53FF — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #FF0026 — inline text links and link-styled controls.
secondary #41FF31 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Proxima Nova
Body: Proxima Nova
h1: 120px
h2: 100px
body: 20px

Spacing

base unit: 4px
scale: 2px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 30px

Radii

base: 15px
button: 16px

Shadows (elevation)

subtle: rgba(0, 0, 0, 0.35) 0px 0px 4px 0px
card: rgba(199, 199, 199, 0.25) 0px 4px 15px 0px

Motion

Micro-interactions run at 200ms (dominant) with ease.

durations: 200ms · 250ms · 500ms
easings: ease · cubic-bezier(0.4, 0, 0.2, 1)
animated properties: color, background-color, border-color, transform

Native design tokens

Token	Value
`--font-base-sans-serif`	`"proxima-nova","Arial","Helvetica",sans-serif`

Button states (measured)

primary hover: background rgba(74, 83, 255, 0.8)
primary focus: background rgba(74, 83, 255, 0.8) · outline 2px solid rgb(35, 96, 197)

Layout (measured)

container max-width: 1242px
nav: 122px fixed

Motion choreography (measured)

Load order: div.fifty-fifty-carousel_con → div.sticky-call-to-action_st → a.primary-button_primary-c → a.primary-button_primary-c → div.sticky-call-to-action_st

Scroll reveal: 7 elements rest at opacity 0, translateY(20px), animate in over 750ms.

Overlay recipe (measured)

dialog panel: rgba(0, 0, 0, 0) · radius 0px

Responsive (measured)

breakpoints: 550px · 600px · 641px · 896px · 1008px · 1280px
mobile (390px): hero 50px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Whoop fitness wearable landing page with purple hero, three-tier membership cards and MVP testimonial grid