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
Peloton, in one page
Peloton's iOS app is a boutique fitness studio in pure black. The entire experience is engineered to feel like you walked into a dim, premium spin studio: the canvas is #000000 (true black, never charcoal), the chrome recedes, and the content that pops is cinematic — full-bleed class thumbnails shot like film posters, an instructor's face mid-cue, the studio video feed when a class is playing. The single brand color, Peloton Red (#DF1E2E), is rationed deliberately: it marks the live LIVE badge, the primary "Take Class" button, the output ring, and *your* row in the leaderboard. Everything else is monochrome — white text, gray metadata, black surfaces — so the red and the photography do all the emotional work.
The app has two signature surfaces. The first is class browse: a vertically scrolling feed of class cards, each a 14pt-rounded tile with a 150pt cinematic thumbnail (live classes wear a pulsing red ● LIVE badge top-left, on-demand classes a duration badge), then an uppercase discipline eyebrow in red, a heavy class title, the instructor name, and a meta line (rating, takes, work). Above the feed sits a horizontally scrolling row of filter pills — the selected pill inverts to a solid white fill with black text, Peloton's signature "selected = white chip" pattern. The second signature surface is the in-class metrics screen: while a ride/run plays, the bottom of the screen carries a large output ring (a thick red arc on a dark track with the total kJ in 900-weight numerals at its center), a column of live metrics (Cadence, Resistance, Output, Heart Rate — each in its own fixed color), and the real-time leaderboard — a scrolling list of riders with rank, avatar, name, and output, with *your* row highlighted in a translucent red wash and your output in red.
Typography is Inter, used heavily and confidently. Peloton sets numbers huge and black-weight (the output number can be 44pt/900), titles bold and tight (-0.6 to -1pt tracking), discipline eyebrows small uppercase red, and metadata in muted gray. Numerals are tabular so the leaderboard and metric column never jitter as values tick. The voice is energetic and editorial — this is a brand that sells motivation, and the type carries that intensity: tight, heavy, confident.
Chrome is minimal and dark. The bottom tab bar (Home, Classes, Schedule, Profile) has no tint pill — the active tab is simply white. Cards are flat dark tiles separated by spacing, with depth coming from the photography and surface-lightness steps rather than drop shadows. There is no light mode — Peloton is always studio-black, because the product *is* a dark room with a bright screen and a red brand mark.
Key Characteristics:
- Pure-black studio canvas (
#000000) — never charcoal; cinematic content bleeds edge-to-edge - Single brand color: Peloton Red
#DF1E2E(brightened to#FF4B57for text/active on black) - Cinematic class cards — 150pt film-poster thumbnail + pulsing red
● LIVEbadge / duration badge - "Selected = white chip" — active filter pill inverts to solid white with black text
- In-class output ring — thick red arc on dark track, total kJ in 900-weight numerals at center
- Live metric column — Cadence / Resistance / Output / Heart Rate, each a fixed semantic color
- Real-time leaderboard — rank · avatar · name · output, *your* row washed translucent red
- Inter set heavy — huge black-weight numbers, tight bold titles, small uppercase red eyebrows
- Tabular numerals so leaderboard and metrics never jitter
- Pill-shaped primary buttons ("Take Class" red, "Start Ride" white)
- 4-tab bottom bar, no tint pill — active is white
- No light mode — always studio-black by design
Do's and don'ts
Do
- Use pure black
#000000as the canvas — Peloton is a dark studio, always - Keep Peloton Red
#DF1E2Eas the *only* brand color; brighten to#FF4B57for text/active on black - Treat in-class metric colors (Cadence
#E5402A, Resistance#F0A030, Strive/HR#3DB8E0) as fixed semantics — same hue every time - Make class thumbnails cinematic and full-bleed with a baked gradient scrim for text legibility
- Pulse the white dot in the red LIVE badge — it's the brand heartbeat
- Use the white-chip pattern for selected pills (solid white fill, black text)
- Set numbers heavy and tabular — output 900-weight, leaderboard/metrics never jitter
- Highlight *your* leaderboard row with a translucent red wash and red accents
- Use pill-shaped buttons (red primary, white secondary)
- Keep the bottom tab bar pill-free — active is simply white
Don't
- Don't use charcoal (
#121212is a card, not the canvas) — the base is *true* black#000000 - Don't introduce a second brand color — there is only Peloton Red
- Don't recolor in-class metrics per theme — their color *is* the data
- Don't ship a light mode — Peloton is studio-black by design
- Don't set titles light or wide — Peloton type is 800–900 with negative tracking
- Don't drop-shadow content cards — depth is surface lightness + thumbnail scrim
- Don't add a Material/iOS tint pill behind the active tab — Peloton has none
- Don't make the LIVE badge any color but Peloton Red
- Don't use proportional figures for the leaderboard/metrics — they must be tabular
- Don't over-animate — motion is the LIVE pulse, ring fill, and leaderboard reorder; quiet elsewhere
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 Peloton design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Peloton Red: #df1e2e
- Peloton Red (on black): #ff4b57
- Peloton Red Pressed: #b81825
- White Chip: #ffffff
- Studio Black: #000000
- Surface 1: #121212
- Surface 2: #1c1c1e
- Surface 3: #262629
- Divider: #2c2c2e
- Text Primary: #ffffff
Type:
- families: Inter, Numerals, Fallback Stack
- scale: 10, 11, 12, 14, 15, 17, 18, 22, 26
- weights: 400, 600, 700, 800, 900
Shape:
- elevation: Don't drop-shadow content cards — depth is surface lightness + thumbnail scrim
Spacing: 14, 15, 18
Rules:
- Use pure black `#000000` as the canvas — Peloton is a dark studio, always
- Keep Peloton Red `#DF1E2E` as the *only* brand color; brighten to `#FF4B57` for text/active on black
- Treat in-class metric colors (Cadence `#E5402A`, Resistance `#F0A030`, Strive/HR `#3DB8E0`) as fixed semantics — same hue every time
- Make class thumbnails cinematic and full-bleed with a baked gradient scrim for text legibility
- Pulse the white dot in the red LIVE badge — it's the brand heartbeat
- Use the white-chip pattern for selected pills (solid white fill, black text)
Avoid:
- Don't use charcoal (`#121212` is a card, not the canvas) — the base is *true* black `#000000`
- Don't introduce a second brand color — there is only Peloton Red
- Don't recolor in-class metrics per theme — their color *is* the data
- Don't ship a light mode — Peloton is studio-black by design
- Don't set titles light or wide — Peloton type is 800–900 with negative tracking
- Don't drop-shadow content cards — depth is surface lightness + thumbnail scrim
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Peloton Red (
#DF1E2E): The single brand color — LIVE badge, primary CTA, output ring, your leaderboard row, selected accents. Used literally#DF1E2Efor fills. - Peloton Red (on black) (
#FF4B57): Brightened tint for *text* and active glyphs on#000000— clears WCAG AA where#DF1E2Etext would fail. - Peloton Red Pressed (
#B81825): Pressed state for the red primary button. - White Chip (
#FFFFFF): Selected filter pill / secondary CTA — solid white fill, black text.
Canvas & Surfaces (Dark — the only mode)
- Studio Black (
#000000): App background. True black, always. - Surface 1 (
#121212): Cards, class tiles, metric cards — the first lift off black. - Surface 2 (
#1C1C1E): Unselected pills, nested rows, inputs. - Surface 3 (
#262629): Ring/bar tracks, pressed surfaces. - Divider (
#2C2C2E): 1px hairlines between leaderboard rows and metric rows.
Text
- Text Primary (
#FFFFFF): Titles, metric values, class names. - Text Secondary (
#B5B5BA): Instructor names, body, secondary copy. - Text Tertiary (
#7A7A80): Meta line, units, captions, disabled.
Functional / In-Class Metric Colors (fixed meaning, theme-invariant)
Each live metric owns a color so a glance reads instantly. These never restyle.
| Role | Color | Meaning |
|---|---|---|
| Output / Power | #DF1E2E | Output ring, watts (the hero metric) |
| Cadence | #E5402A | RPM (cycling) / SPM (tread) |
| Resistance / Incline | #F0A030 | Bike resistance, tread incline |
| Heart Rate | #FF4B57 | Live BPM (red family) |
| Strive Score / HR Zones | #3DB8E0 | Strive Score, HR-zone gauge (blue) |
| Personal Record | #2ECC71 | PR celebration, goal hit |
| Streak / Milestone | #F0A030 | Streak flame, badge earned |
Semantic
- Live (
#DF1E2E): The pulsing LIVE badge — Peloton Red, always. - Success / PR (
#2ECC71): Personal-record burst, goal complete. - Warning (
#F0A030): Low-battery sensor, paused class. - Error (
#DF1E2E): Errors, destructive actions (red doubles as error). - Track / Empty (
#262629): Unfilled portion of any ring or bar.
Type scaleRead the full spec
Font Family
- All text:
Inter(by Rasmus Andersson, SIL OFL) — geometric humanist sans with excellent UI hinting and a deep weight range; Peloton sets it heavy and tight. On iOS, falls back to SF Pro when Inter isn't bundled. - Numerals: Inter with tabular figures enabled (
tnum) — leaderboard ranks/outputs and the live metric column must not jitter as values tick. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Output Number | Inter | 44pt | 900 | 1.0 | -1.0pt | The hero metric inside the output ring |
| Screen Title | Inter | 32pt | 900 | 1.1 | -0.6pt | "Cycling", large nav title |
| Hero Title | Inter | 26pt | 800 | 1.15 | -0.5pt | Class-detail title |
| Section | Inter | 22pt | 800 | 1.2 | -0.4pt | "Trending Classes", "Just Added" |
| Class Title | Inter | 17pt | 800 | 1.2 | -0.3pt | Card class name |
| Metric Value | Inter | 18pt | 800 | 1.1 | 0pt | In-class metric value (tabular) |
| Leaderboard Output | Inter | 14pt | 800 | 1.0 | 0pt | Output column (tabular) |
| Body | Inter | 15pt | 600 | 1.5 | 0pt | Descriptive copy, list titles |
| Meta | Inter | 14pt | 400 | 1.4 | 0pt | "12,408 taken · 90s of work" |
| Eyebrow / Discipline | Inter | 12pt | 700 | 1.2 | 0.6pt (UPPERCASE) | Red discipline label above title |
| Metric Label | Inter | 11pt | 600 | 1.2 | 0.4pt (UPPERCASE) | "CADENCE", "RESISTANCE" |
| Caption | Inter | 11pt | 600 | 1.3 | 0pt | "Live in 4 minutes" |
| Button | Inter | 15pt | 700 | 1.0 | 0.2pt | Primary / white / outline buttons |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Badge | Inter | 10pt | 800 | 1.0 | 0.6pt (UPPERCASE) | LIVE / NEW / duration badges |
Principles
- Heavy and tight: Titles are 800–900 weight with negative tracking (-0.3 to -1pt) — Peloton's type is confident and energetic, never light.
- The metric is the hero: In-class numbers (output, cadence) are the largest, heaviest elements; their labels are small uppercase whispers.
- Tabular for anything that ticks: Leaderboard outputs, the live metric column, timers — always tabular figures so nothing jitters.
- Discipline eyebrow in red: The uppercase discipline label above a class title is the one place a small text element is brand-red (
#FF4B57on black). - Color stays functional: Hierarchy is built from weight and size; color is reserved for brand-red and the fixed metric semantics.
- Dynamic Type on prose, fixed on the cluster: Titles, body, meta scale; the output number, metric values/labels, leaderboard, tab labels, and badges are layout-pinned.
Components and layoutRead the full spec
Buttons
Primary Button (Take Class / Start)
- Shape: Full pill, 500pt corner radius
- Background:
#DF1E2E(Peloton Red) - Text:
#FFFFFF, Inter 15pt weight 700 - Padding: 15pt vertical, 30pt horizontal
- Pressed: background
#B81825+ scale 0.98 - Disabled: background
#262629, text#7A7A80 - Full-width variant on detail screens: 100% width, 54pt tall
White Button (Start Ride / secondary primary)
- Background:
#FFFFFF - Text:
#000000, Inter 15pt weight 700 - Pill, 500pt radius, same padding as primary
- Pressed: background
#E5E5E7+ scale 0.98
Outline Button (Add to Stack)
- Background: transparent
- Border: 1.5pt
rgba(255,255,255,0.4) - Text:
#FFFFFF, Inter 14pt weight 700 - Pill, 500pt radius, 13pt × 24pt padding
- Pressed: background
rgba(255,255,255,0.08)
Text Button (See All / inline)
- Background: none
- Text:
#FF4B57, Inter 14pt weight 700
Icon Button (header action)
- 20pt glyph in 44pt hit area
- Default
#FFFFFF; pressed 60% opacity - Stroke-style line icons, 2pt stroke
Core Atoms
Class Card (the browse unit)
- Background:
#121212, 14pt corner radius, 1px#2C2C2Eborder - Thumbnail: 150pt tall cinematic image (here gradient-simulated), full card width, top corners follow card radius
- Live badge: top-left,
#DF1E2Efill, white text, 5pt radius, pulsing white dot + "LIVE" in Inter 10pt 800 uppercase - Duration badge: top-right,
rgba(0,0,0,0.6)fill, white text, "45 min" - Body padding: 14pt × 16pt
- Discipline eyebrow: Inter 12pt 700 uppercase
#FF4B57 - Class name: Inter 17pt 800
#FFFFFF - Instructor: Inter 14pt 600
#B5B5BA - Meta: Inter 12pt
#7A7A80with a gold#F0A030star glyph
Filter Pill
- Unselected:
#1C1C1Efill, 1px#2C2C2Eborder,#B5B5BAtext - Selected:
#FFFFFFfill, no border,#000000text (the signature white-chip) - Inter 13pt 600, 8pt × 16pt padding, 500pt radius
Output Ring (the in-class hero)
- Track:
#262629, 9pt stroke - Progress arc: Peloton Red
#DF1E2E, 9pt stroke, round cap, starts at -90° - Center: total kJ value in Inter 26–44pt 900
#FFFFFF, label "TOTAL kJ" in Inter 9pt 700 uppercase#7A7A80
Metric Row (in-class)
- Label: Inter 11pt 600 uppercase
#B5B5BA, +0.4 tracking - Value: Inter 18pt 800 tabular, in the metric's fixed color (Cadence
#E5402A, Resistance#F0A030, Output#FF4B57, HR white) - Optional unit suffix: Inter 11pt
#7A7A80 - Rows divided by 1px
#2C2C2E
Leaderboard Row
- Rank: Inter 14pt 800 tabular
#B5B5BA(your row:#FF4B57) - Avatar: 30pt circle, gradient placeholder
- Name: Inter 14pt 600
#FFFFFF - Output: Inter 14pt 800 tabular
#FFFFFF - Your row: background
rgba(223,30,46,0.12), rank + accents in red - Rows divided by 1px
#2C2C2E
Chip / Tag
- Background:
#1C1C1E, 1px#2C2C2E - Text: Inter 12pt 600
#FFFFFF - 500pt radius
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
rgba(18,18,18,0.96)with blur, 0.5pt top border#2C2C2E - Tabs (4): Home, Classes, Schedule, Profile
- Icon: 22pt; no tint pill
- Active: glyph filled
#FFFFFF, label#FFFFFF - Inactive: glyph stroked
#7A7A80, label#7A7A80 - Labels: Inter 10pt 600, always shown
Top Header
- Height: 44pt + safe area
- Leading: large screen title (Inter 22–32pt 800/900) or back chevron
- Trailing: search + filter glyphs, 20pt stroke
Section Header (in-page)
- Inter 22pt 800
#FFFFFF, 20pt top margin, 12pt bottom - Optional trailing text button "See All" in
#FF4B57
Input Fields
Search Bar
- Height: 44pt
- Background:
#1C1C1E - Border: none; focus 1.5pt
#FF4B57 - Corner radius: 500pt (pill)
- Leading magnifier 18pt
#7A7A80 - Placeholder Inter 15pt
#7A7A80
Segmented Control (Live / On-Demand)
- Track:
#1C1C1E, 500pt radius - Selected segment:
#FFFFFFfill, black text (white-chip pattern) - Unselected:
#B5B5BAtext - Inter 13pt 700
Class Filter Sheet
- Bottom sheet,
#121212, 20pt top radius - Filter groups with white-chip pills; "Apply" red pill at bottom
Distinctive Components
Cinematic Class Thumbnail
- 150pt tall, full card width, top corners 14pt
- Real product: instructor/studio photography with a darkened gradient overlay for text legibility
- A centered or bottom-right play triangle on hover/focus
- Live overlay: pulsing
● LIVEred badge top-left
Live LIVE Badge
#DF1E2Efill, white text "LIVE" Inter 10pt 800 uppercase, 5pt radius- Leading 6pt white dot that pulses (opacity 1 → 0.4 → 1, 1.4s loop)
- Always Peloton Red — this is the brand's signature "now" signal
Output Ring + Metric Column
- Card
#121212, 14pt radius, 1px border - Left: 96pt output ring (red arc on
#262629track, 900-weight kJ centered) - Right: 4-row metric column (Cadence / Resistance / Output / Heart Rate), each value in its fixed color
- All values tabular, ticking live
Real-Time Leaderboard
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Thumbnail 130pt; output ring 84pt |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected in header |
| iPhone 15/16 Pro Max | 430pt | Thumbnail 168pt; larger output ring |
| iPad (portrait) | 768pt | Class browse → 2-column grid; in-class metrics in a sidebar beside the video |
| iPad (landscape) | 1024pt+ | Studio video full-frame with metric ring + leaderboard overlaid right |
Dynamic Type
- Scales: screen titles, hero/section titles, body, meta
- Fixed (layout-pinned): output number, in-class metric values/labels, leaderboard, tab labels, badges — these live in tight live-updating layouts
- The output number already dominates; do not additionally scale it with Dynamic Type
Orientation
- Browse is portrait-first
- In-class supports landscape: video fills the frame, ring + leaderboard overlay the right edge
- iPad landscape mirrors the in-studio screen layout
Touch Targets
- Tab bar icon: 22pt glyph, 44pt hit
- Class card: full-card tap, ≥ 200pt tall
- Filter pill: ≥ 36pt tall, full-pill tap
- Buttons: ≥ 48pt tall (primary 54pt full-width)
- Leaderboard row: full-row tap (opens that rider), ≥ 50pt tall
Safe Area Handling
- Top: header respects safe area and Dynamic Island
- Bottom: tab bar + home indicator respected; sticky "Take Class" pill sits above the indicator
- In-class: metric overlay respects safe area on all edges over the video
- Sides: 16pt content inset; thumbnails full-bleed within the card
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-peloton {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #555555;
--heading-color: #555555;
--link-color: #e6000f;
--link-hover-color: #b3000c;
--border-color: #e0e0e0;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(85,85,85,0.06);
--card-hover-shadow: 0 6px 18px rgba(85,85,85,0.12);
--header-bg: #555555;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #737373;
--button-bg: #ff4b57;
--button-text-color: #000000;
--button-hover-bg: #ff1827;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f5f5f5;
--button-secondary-text-color: #555555;
--button-secondary-hover-bg: #ebebeb;
--button-secondary-border: 1px solid #e0e0e0;
--prompt-bg: #f7f7f7;
--prompt-text-color: #555555;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/fitness/peloton/DESIGN.md· 25.2 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.