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
11type steps
4radius steps
14pxspacing base
Nike Run Club, in one page
Nike Run Club is a stadium tunnel — black walls, white spotlights, a runner sprinting into them. The canvas is true black (#000000) on every screen, the typography is editorial and athletic, and every interaction is shouted in screaming capital letters. NRC is unapologetically loud. Where Strava is a newspaper, NRC is a poster. The brand is built for the moment just before a hard run: bold display weights, deep contrast, urgent action verbs ("LET'S DO THIS", "START RUN", "GO").
The accent is Nike Volt (#CCFF00) — the radioactive yellow-green that's been on Nike Air Max heels since the late 80s — backed by Nike Red (#FA5400) for fire moments and an austere Brake-Light Red (#E50916) for the workout-finish heart-rate-zone screens. Volt is the brand voice: progress rings on guided runs, accent strokes on stats, the "START" button on quick runs. Red is reserved for results, achievements, and "you crushed it" messaging. Everything else is monochromatic — true black canvas, white text, Nike Gray ladder (#1A1A1A to #8E8E8E) for substrate hierarchy.
Typography is Nike's house display face Trade Gothic (Heavy Condensed for the screaming hero numbers, Bold Condensed for section heads) backed by SF Pro for body and metadata. Trade Gothic Condensed is the secret sauce — it lets Nike pack "8.2 MILES" or "4.5K RUN" at hero-display size into a single line without losing impact, and the heavy condensed weight is the visual signature of Nike's stadium graphics, shoe campaigns, and apparel tags. Numbers are tabular (tnum) on every stat. Letter spacing is generous on display caps (0.5pt at 64pt down to 0.2pt at 16pt) — Nike-style headlines breathe.
The hero screen of the app is the Run Tracking screen during an active run: pure black canvas, a Volt-yellow progress ring filling clockwise around the elapsed time, three stats (DISTANCE / PACE / HEART RATE) stacked above it in giant condensed caps, and a pause/stop control at the bottom. This screen is what NRC is famous for — it's the closest a phone gets to feeling like a piece of equipment.
Key Characteristics:
- True black canvas (
#000000) on every screen — sports broadcasting aesthetic - Nike Volt (
#CCFF00) — the radioactive accent on progress rings, primary CTAs, achievements - Nike Red (
#FA5400) — fire/intensity accent on workout results, "crushed it" moments - Trade Gothic Heavy Condensed — the hero display face; everything screams in CONDENSED ALL CAPS
- Run Tracking screen: massive Volt progress ring + 3-up stat stack DISTANCE / PACE / HR
- Numbers everywhere — tabular, condensed, screaming sizes (88pt elapsed time during a run)
- Coach Bennett voice-over branding — friendly text labels paired with hard ALL CAPS verbs
- Workout cards with full-bleed photography of athletes (real Nike athletes, training gyms)
- "Achievement medals" — illustrated badges in Volt/Red gradients, animated reveal on completion
- Bottom tab bar: Home / Activity / Coach / Goal / Profile — black with Volt active state
- Heavy haptics on "Start Run" and milestones —
.heavyimpact, not.medium - Action buttons are full-width pills with screaming labels: "LET'S DO THIS", "START RUN", "FINISH"
Do's and don'ts
Do
- Use true black
#000000for the canvas on every screen — Nike's brand is dark-first - Use Volt
#CCFF00as the primary accent — progress rings, active states, primary CTAs (when not white) - Use Trade Gothic Condensed Heavy for every hero number and every button label — CONDENSED ALL CAPS is the Nike voice
- Apply 0.5pt-1.0pt letter spacing on uppercase Trade Gothic — Nike copy breathes
- Use
monospacedDigit()on every running stat — pace columns must align - Render the run-tracking progress ring at exactly 280pt diameter with 6pt stroke and rounded caps
- Use heavy haptics on "START RUN" and "PAUSE" — Nike's CTAs are committed, not casual
- Use 88pt Trade Gothic for the elapsed time inside the progress ring — it's the visual identity
- Show Coach Bennett's photo + name on every guided run plan card
- Use white as the primary CTA color (white pill on black canvas) — the inversion of the canvas is the brand
- Use Nike Red
#FA5400for results/achievements, Volt for in-run/progress — they're different verbs - Use the hexagonal medal silhouette for achievements (not a circle, not a star — Nike's pattern is hex)
Don't
- Don't use a light canvas as the default — NRC is dark-first; light mode exists only for accessibility
- Don't use mixed case in Trade Gothic — it's UPPERCASE only; only SF Pro body copy uses mixed case
- Don't render the progress ring with sharp caps — it must be rounded
- Don't use system blue or any cool accent — Nike's palette is monochromatic black/white with Volt + Red
- Don't use proportional digits in stats —
monospacedDigit()is mandatory - Don't put a drop shadow under cards — Nike is flat on black
- Don't replace Trade Gothic with a system condensed face —
SF Compressedis close but Trade Gothic's letterforms (especially the lowercase 'a' on the rare title) are part of the brand - Don't use the heavy haptic on tab switches — that's reserved for "START RUN", "PAUSE", and achievement reveals
- Don't use the medal hexagon as an avatar — hex is exclusively for achievements
- Don't use any Volt larger than 20% surface area on a screen — it's an accent, not a color field; Volt fields are exhausting
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 Nike Run Club design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- The accent is Nike Volt: #ccff00
- Nike Volt: #ccff00
- Volt Pressed: #9fcc00
- Volt Dim: #8aa800
- Nike Red: #fa5400
- Brake-Light Red: #e50916
- True Black: #000000
- Nike Charcoal: #0a0a0a
- Nike Surface 1: #1a1a1a
- Nike Surface 2: #2b2b2b
Type:
- families: Futura Condensed Extra Bold, SF Pro Text, Oswald, Bebas Neue
- scale: 10, 11, 13, 15, 17, 22, 32, 48, 56
- weights: 400, 500, 600, 700, 900
Shape:
- radius: 4, 8, 16, 32
- elevation: No shadow (the canvas is already black; shadow doesn't help) | Same shape and shadow as primary | Don't put a drop shadow under cards — Nike is flat on black
Spacing: 14, 16, 32
Rules:
- Use true black `#000000` for the canvas on every screen — Nike's brand is dark-first
- Use Volt `#CCFF00` as the primary accent — progress rings, active states, primary CTAs (when not white)
- Use Trade Gothic Condensed Heavy for every hero number and every button label — CONDENSED ALL CAPS is the Nike voice
- Apply 0.5pt-1.0pt letter spacing on uppercase Trade Gothic — Nike copy breathes
- Use `monospacedDigit()` on every running stat — pace columns must align
- Render the run-tracking progress ring at exactly 280pt diameter with 6pt stroke and rounded caps
Avoid:
- Don't use a light canvas as the default — NRC is dark-first; light mode exists only for accessibility
- Don't use mixed case in Trade Gothic — it's UPPERCASE only; only SF Pro body copy uses mixed case
- Don't render the progress ring with sharp caps — it must be rounded
- Don't use system blue or any cool accent — Nike's palette is monochromatic black/white with Volt + Red
- Don't use proportional digits in stats — `monospacedDigit()` is mandatory
- Don't put a drop shadow under cards — Nike is flat on black
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Nike Volt (
#CCFF00): THE accent — progress rings, primary CTAs, active states, achievement gradients, voice-coach prompts. - Volt Pressed (
#9FCC00): Active/pressed state on Volt CTAs. - Volt Dim (
#8AA800): Used on light-mode (rare in NRC) for accessibility-compliant accent on white.
Secondary (Intensity)
- Nike Red (
#FA5400): "Crushed it" moments, achievement reveals, fire callouts, the brand's secondary signature. - Brake-Light Red (
#E50916): Heart rate zone 5 (max), pace-too-slow warning, error states.
Canvas, Surfaces & Dividers
- True Black (
#000000): Primary canvas everywhere — Nike's stadium void. - Nike Charcoal (
#0A0A0A): A whisper lighter than the canvas — section background variations, card fills inside the dark. - Nike Surface 1 (
#1A1A1A): Card backgrounds on home feed, settings rows. - Nike Surface 2 (
#2B2B2B): Pressed states, input field fill, chip backgrounds. - Nike Divider (
#333333): Hairline row dividers inside settings and result detail.
Text
- Pure White (
#FFFFFF): Primary text — every hero stat, every button label, every screaming caps headline. - Nike Gray 1 (
#B3B3B3): Secondary text — labels, "MIN/MI" units, metadata, "Hosted by Coach Bennett". - Nike Gray 2 (
#8E8E8E): Tertiary — placeholder, disabled, "Tap to continue" prompts. - Nike Gray 3 (
#5C5C5C): Quaternary — separator caption, footnotes, "as of 9:42 AM".
Heart Rate Zones (used on the workout results "training effect" page)
- HR Zone 1 (Easy) (
#3D87F4): Endurance blue. - HR Zone 2 (Steady) (
#48C77E): Steady green. - HR Zone 3 (Moderate) (
#FFD600): Tempo yellow. - HR Zone 4 (Hard) (
#FA5400): Threshold orange (Nike Red). - HR Zone 5 (Max) (
#E50916): Max red (Brake-Light Red).
Semantic
- Success Volt (
#CCFF00): Run uploaded, sync complete (Volt doubles as success). - Warning Amber (
#FFC400): GPS signal weak, low battery in session. - Error Red (
#E50916): Failed sync, payment failed, GPS lost.
Light Mode
NRC does have a light mode (for accessibility) but Nike's brand is intentionally dark-first; light mode is rarely used in marketing.
- Light Canvas (
#FFFFFF) - Light Surface (
#F4F4F4) - Light Text Primary (
#0A0A0A) - Volt on Light (
#8AA800): Volt darkened to pass WCAG AA on white. - Red on Light (
#FA5400): unchanged
Type scaleRead the full spec
Font Family
- Display (hero stats, section heads, button labels):
Trade Gothic Next LT W04 Heavy Condensed(proprietary licensed face by Linotype) — the screaming Nike voice - Display alt:
Futura Condensed Extra Boldis a sometimes-substitute on shoe drops; not used in NRC chrome - Body / metadata:
SF Pro Text— Apple-system fallback for body, comments, coach copy - Fallback stack:
'Trade Gothic Next LT', 'Trade Gothic LT Std', 'Helvetica Neue Condensed Bold', 'Arial Narrow Bold', -apple-system, sans-serif - Web/marketing Google Fonts substitute:
Oswald(close enough — geometric condensed with similar proportions);Bebas Neuefor ultra-condensed all-caps moments - Numeric weight: SF Pro
monospacedDigit()on every running stat — pace, distance, elapsed, calories, HR
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Run Hero Stat | Trade Gothic Condensed | 88pt | 900 (Heavy) | 0.95 | 0.5pt | Elapsed time during active run: "1:14:23" |
| Pre/Post Run Hero | Trade Gothic Condensed | 64pt | 900 | 0.95 | 0.4pt | "8.2 MI" on the results screen |
| Large Nav Headline | Trade Gothic Condensed | 48pt | 900 | 0.95 | 0.3pt | "JUST DO IT", "LET'S DO THIS" — pre-run hype copy |
| Screaming Section Header | Trade Gothic Condensed | 32pt | 900 | 1.0 | 0.3pt | "TODAY'S RUN", "ACHIEVEMENTS" UPPERCASE |
| Sub Header | Trade Gothic Condensed | 22pt | 700 (Bold) | 1.1 | 0.3pt | "5K · 30 MIN · COACH BENNETT" UPPERCASE |
| Stat Label (under big number) | Trade Gothic Condensed | 13pt | 700 | 1.0 | 1.0pt | "MIN/MI", "BPM", "CAL" UPPERCASE — very wide tracking |
| Card Title | SF Pro Display | 17pt | 700 | 1.2 | -0.2pt | Run plan card title (mixed case allowed) |
| Body | SF Pro Text | 15pt | 400 (Regular) | 1.45 | -0.1pt | Coach Bennett's voice copy, training plan descriptions |
| Body Bold | SF Pro Text | 15pt | 600 | 1.45 | -0.1pt | Inline emphasis |
| Button Label | Trade Gothic Condensed | 17pt | 900 | 1.0 | 0.5pt | "START RUN", "FINISH", "PAUSE" UPPERCASE |
| Tab Label | SF Pro Text | 10pt | 600 | 1.0 | 0.3pt | Bottom tab — mixed case |
| Metadata | SF Pro Text | 13pt | 400 | 1.3 | 0pt | "Aug 12 · 8:42 AM", "5 miles · Recovery" |
| Caption | SF Pro Text | 11pt | 500 | 1.3 | 0.1pt | "GPS connecting...", "Powered by NRC" |
| Achievement Number | Trade Gothic Condensed | 56pt | 900 | 0.95 | 0pt | "100" miles, "1,000" lifetime — on achievement medal reveal |
Principles
- Trade Gothic Condensed Heavy Condensed for every hero number and every button label — the Nike sound
- Tracking widens at small sizes: 1.0pt at 13pt stat labels, 0.5pt at 17pt buttons, 0.3pt at 48pt headlines — uppercase Nike copy breathes
- Line-height 0.95-1.0 at display: Nike crops tight; condensed letterforms don't need vertical air
monospacedDigit()on every stat — pace columns must align on the results page- Mixed case allowed in body copy only — anything Trade Gothic is UPPERCASE; anything SF Pro can be mixed
- Dynamic Type respected on body and metadata; FIXED on hero numbers (the entire visual identity depends on them)
Components and layoutRead the full spec
Run Tracking Screen (the hero component)
Layout
- Full-screen, black canvas, portrait orientation locked
- Top: GPS signal strength + battery + time (status bar, white)
- Top-third: 3-up stat row — DISTANCE / PACE / HR — each cell vertically stacked label-over-value
- Label: Trade Gothic Condensed 13pt 700 white @ 70% with 1.0pt tracking UPPERCASE — "DISTANCE / MIN/MI / BPM"
- Value: Trade Gothic Condensed 64pt Heavy white tabular — "1.4", "8:42", "152"
- Middle: Massive Volt progress ring — 280pt diameter, 6pt stroke, fill
#CCFF00, trackrgba(255,255,255,0.1) - Inside the ring: elapsed time at 88pt Trade Gothic Condensed Heavy white tabular — "12:34"
- Below the time, inside the ring: "ELAPSED" label at 13pt UPPERCASE 1.0pt tracking white @ 70%
- Bottom: Pause button (large circle, white) and Lock screen affordance (smaller, side)
- Background: pure
#000000, no other content
Progress Ring
- Stroke: 6pt rounded cap
- Track:
rgba(255,255,255,0.1) - Fill: Volt
#CCFF00, starts at -90° (12 o'clock) and progresses clockwise - Rotates only when there's a "Coach Bennett interval" — otherwise it just fills toward the run's goal
- Animation: discrete 1s linear ticks for each progress unit (mile, kilometer, time interval)
Pause / Stop / Lock Buttons
- Pause: 72pt × 72pt white circle with 28pt black
pause.fillglyph, centered horizontally near the bottom - After pause, Pause becomes Resume (Volt circle with black
play.fill) + Stop button appears to the left (red circle#E50916) - Lock affordance: 48pt × 48pt black circle with white
lockglyph, top-right inset 16pt — tap to disable accidental taps mid-run
Pre-Run / Post-Run Hero Cards
Pre-Run "LET'S DO THIS" Screen
- Full-bleed photography of a runner mid-stride (Nike athlete or stock photography)
- 60% gradient overlay from transparent (top) to
rgba(0,0,0,0.85)(bottom) - Bottom-aligned content stack:
- Coach attribution: SF Pro Text 13pt Medium white @ 70% — "COACH BENNETT · 30 MIN · RECOVERY"
- Headline: Trade Gothic Condensed 48pt Heavy white UPPERCASE — "EASY RECOVERY RUN"
- Body: SF Pro Text 15pt Regular white — Coach's intro paragraph
- "LET'S DO THIS" full-width pill button below
Post-Run Results "YOU CRUSHED IT" Screen
- Black canvas
- Hero: Trade Gothic Condensed 64pt Heavy Volt
#CCFF00— "YOU CRUSHED IT" - Below: 3-up stat row in same massive Trade Gothic numbers (white)
- Map snapshot below stats: route polyline in Volt
#CCFF00withrgba(204,255,0,0.3)halo - Coach Bennett quote card: dark surface, Coach's photo + quote in body italic
- "ACHIEVEMENTS UNLOCKED" section if any — animated medal reveal
Achievement Medal (the celebration moment)
Design
- Hexagonal medal silhouette, 200pt diameter, gradient fill Volt
#CCFF00→ Nike Red#FA5400for "100 miles" tier, or solid Volt for milestone tiers - Centered icon: Trade Gothic Condensed Heavy 56pt — the milestone number ("100", "500", "1K")
- Below the medal: medal name in Trade Gothic 22pt UPPERCASE "100 MILES" + description in SF Pro Text 15pt Regular
- Reveal animation: 800ms — medal fades in at 0.5x scale, springs to 1.0x at damping 0.6, simultaneously a 8-particle Volt confetti burst behind the medal
- Tap: bouncing scale 1.0 → 1.05 → 1.0, haptic
.notificationOccurred(.success)
Run Plan Card (Home Feed)
Structure
- Full-width minus 16pt margins, 320pt tall
- Background: full-bleed photography with
rgba(0,0,0,0.6)overlay gradient bottom-up - Bottom-aligned content (16pt inset):
- Eyebrow: "GUIDED RUN · 25 MIN" in SF Pro Text 11pt Medium UPPERCASE white @ 70% with 0.5pt tracking
- Title: "RECOVERY MILE" in Trade Gothic Condensed 32pt Heavy white UPPERCASE
- Description: "Coach Bennett · Easy effort" in SF Pro Text 13pt Regular white @ 80%
- Corner radius: 16pt
- No shadow (the canvas is already black; shadow doesn't help)
- Tap: scale 0.98, haptic
.impactOccurred(.medium), push to plan detail
Buttons
Primary Action Button ("START RUN", "LET'S DO THIS", "FINISH")
- Full-width minus 16pt margins
- Background:
#FFFFFF(white on black canvas — the inversion of the canvas) - Text:
#000000, Trade Gothic Condensed 17pt Heavy 900 UPPERCASE, 0.5pt tracking - Corner radius: 32pt (full pill, very rounded)
- Height: 56pt
- Pressed: scale 0.98, no color change
- Haptic on tap:
.impactOccurred(.heavy)— Nike's CTA tap is the heaviest in the system
Volt Highlight Button (special celebratory CTAs)
- Background:
#CCFF00Volt - Text:
#000000, Trade Gothic Condensed 17pt Heavy UPPERCASE - Used for "CLAIM YOUR MEDAL", "JOIN CHALLENGE"
- Same shape and shadow as primary
Outline Button (secondary)
- Background: transparent
- Border: 2pt
#FFFFFF - Text:
#FFFFFF, Trade Gothic Condensed 17pt Heavy UPPERCASE - Same shape
Pause / Stop Circular Buttons (in-run)
- Pause: 72pt × 72pt white circle with black
pause.fill28pt - Stop: 72pt × 72pt
#E50916red circle with whitestop.fill28pt - Tap: scale 0.95, haptic
.impactOccurred(.heavy)
Text Link
- "VIEW ALL" or "SEE DETAILS" in Trade Gothic Condensed 14pt Bold UPPERCASE white, 0.5pt tracking
- No underline, 44pt hit area
Navigation
Bottom Tab Bar
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Progress ring shrinks to 240pt; hero number 72pt |
| iPhone 13/14/15 | 390pt | Standard 280pt ring, 88pt hero number |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected — top app bar sits below it |
| iPhone 15/16 Pro Max | 430pt | Larger 320pt ring, 96pt hero number |
| Apple Watch (companion) | 184-220pt | Run tracking simplified to elapsed + pace stacked, no ring |
| iPad | 768pt+ | Run tracking unchanged (single-column); home feed uses 2-col plan grid |
Dynamic Type
- Body and metadata: full scale
- Run hero stats (Trade Gothic 88pt): FIXED — the visual identity depends on them
- Button labels (Trade Gothic 17pt): FIXED
- Plan card titles: scale up to xLarge then clamp
Orientation
- Portrait-locked on Run Tracking
- Map view on activity detail can rotate
- Plan detail and Coach screens are portrait-locked
Touch Targets
- Pause button: 72pt visual, 80pt tap area
- Tab icons: 24pt visual, 56pt tap row
- Primary action button: 56pt height full-width
Safe Area Handling
- Top: safe area honored — top app bar sits below Dynamic Island / notch
- Bottom: tab bar respects home indicator; Run Tracking pause button respects safe area inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-nike-run-club {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #5c7300;
--link-hover-color: #334000;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #ccff00;
--button-text-color: #000000;
--button-hover-bg: #a3cc00;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- kakaotalk 76.1%
- whoop 72.7%
- clickhouse 72.2%
- sansan 72.1%
- peloton 72.1%
Where this came from
- Source document
ios/design-md/fitness/nike-run-club/DESIGN.md· 26.3 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.