Peloton Red
#df1c2fRed supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Peloton
onepeloton.com
Website preview
The design language
Peloton runs a disciplined two-mode visual system: cinematic charcoal hero surfaces that make product photography glow, followed by bright white product grids that let the merchandise speak. The palette is almost entirely achromatic — gunmetal, white, and warm grays — with one vivid red accent that acts as the only chromatic punctuation on the page, reserved exclusively for primary actions, brand marks, and the persistent chat widget. Inter carries the entire typographic voice at a wide range of weights, from whisper-light 300 display headlines to confident 500 nav labels, creating a calm, premium fitness-retail atmosphere. Components are generous: 28px pill buttons, 6px inputs, 24px image corners, and minimal elevation — surfaces do the structural work, shadows stay absent or near-invisible.
Color palette
brand
neutral
Carbon Black
#181a1dPrimary text color, dark hero surfaces, navigation bar, footer backgrounds, heading color — the structural anchor of the entire system
Pure White
#ffffffLight supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color
Mist Gray
#f7f7f7Page canvas, subtle section backgrounds behind product grids, alternate band separator
Silver Lining
#e4e6e7Hairline borders, dividers between sections, card outlines, disabled surface fills, icon background washes
Slate
#65666aSecondary body text, nav link default state, helper text, metadata, breadcrumb separators
Graphite
#000000Headings on light surfaces, logo, strong emphasis text, icon strokes on light backgrounds
Fog
#a8acb1Tertiary text, placeholder text, subtle icon fills, inactive form labels, decorative icon strokes
Steel
#888b93Input borders in default state, secondary borders, subtle structural lines
Ash
#a3a3a6Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Typography
Type scale
Major Second (1.125) · 16px basedisplay
48px · 600 · 1.2 · -0.384px trackingThe quick brown fox jumps
heading-lg
36px · 600 · 1.25 · -0.288px trackingThe quick brown fox jumps
heading
32px · 600 · 1.3 · -0.192px trackingThe quick brown fox jumps
heading-sm
26px · 600 · 1.33 · -0.104px trackingThe quick brown fox jumps
subheading
20px · 500 · 1.38The quick brown fox jumps
text-18
18px · 500 · 1.3The quick brown fox jumps
body
16px · 500 · 1.5The quick brown fox jumps
text-15
15px · 300 · 1.07The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 300, 400, 500, 600, 700
- Sizes
- 12, 14, 15, 16, 18, 20, 26, 32, 36, 48
- Line height
- 1.07, 1.20, 1.25, 1.30, 1.33, 1.38, 1.39, 1.50, 1.69, 1.71
- Letter spacing
- -0.0080em, -0.0060em, -0.0040em, 0.0250em
- Fallback
- Inter (Google Fonts), or system-ui / -apple-system fallback stack
Sole typeface across the entire system. Weight 300 at 48px for hero headlines creates an editorial, gallery-like restraint — the opposite of the shouting-bold approach typical of fitness brands. Weight 500–600 for navigation and CTAs gives interaction labels confident authority. Weight 400 carries all body copy. Tighter tracking (-0.008em to -0.004em) at larger sizes sharpens the geometric Inter forms for display use, while the positive +0.025em at 12px opens up micro-labels for legibility.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 12px
Border radius
tags
6pxcards
24pxpills
204pximages
6pxinputs
6pxbuttons
28pxSpacing scale
6px8px10px12px15px16px17px20px22px24px30px32px40px44px48px64px68px80px84px88px96px104px119pxGuidelines
Do
- Use #df1c2f exclusively for primary actions, the brand mark, and the persistent chat widget — no other color carries conversion weight
- Set display headlines at 48px Inter weight 300 with -0.384px letter-spacing; the whisper-weight is a signature choice
- Use 28px border-radius for all primary and secondary buttons to maintain the generous pill softness
- Alternate between #181a1d full-bleed hero bands and #f7f7f7 light content sections to establish the dark-stage / light-catalog rhythm
- Keep product card backgrounds pure #ffffff on #f7f7f7 canvas with a #e4e6e7 hairline border — no drop shadows on cards
- Use the 300deg shimmer gradient only for skeleton/loading states, never as a decorative surface treatment
- Set form input borders to 1px #888b93 with 6px radius; shift border to #df1c2f on focus with a subtle outer ring
Don’t
- Don't introduce any chromatic color beyond #df1c2f — the single-accent discipline is the system's defining trait
- Don't use drop shadows on cards or buttons; depth comes from surface-layer contrast, not elevation
- Don't use weight 700 or 800 for headlines — the system is built on weight 300 displays and weight 400-500 for body
- Don't place a white card or light content block on a dark hero band — the dark stage carries text and CTAs only
- Don't use fully square (0px) or fully circular (9999px) corners — the system lives at 6px, 24px, and 28px
- Don't use the 204px pill radius for anything other than the chat widget or true pill-shaped status indicators
- Don't apply colored gradients to hero backgrounds — heroes are flat #181a1d to keep focus on text and CTAs
Components
Primary Action Button
Filled red CTA used for purchase paths, explore actions, and form submissionBackground Peloton Red (#df1c2f), white text, Inter weight 500, 16px size, 28px border-radius, 16px vertical × 24px horizontal padding, 8px horizontal gap between text and optional icon. No border. Hover deepens the red slightly. The 28px radius gives the button a generous pill-like softness without being fully circular.
Secondary Ghost Button
Outlined action paired with the primary CTA for non-conversion explorationTransparent background, 1.5px border in currentColor (white on dark surfaces, Carbon Black on light), 28px border-radius, same padding as primary (16px × 24px), Inter weight 500 16px. Inherits text color from its surface — appears white on dark heroes, black on light sections.
Product Card
Equipment tile in the product lineup grid and merchandising blocksWhite (#ffffff) surface on Mist Gray (#f7f7f7) page background, 24px padding or product-image bleed with label strip below, 24px border-radius on image, no shadow. Product image fills upper area at 6px corner radius; label area below uses Carbon Black heading at 20px weight 500 and Slate subtext at 14px.
Navigation Bar
Sticky top-level site navigationFull-width Carbon Black (#181a1d) bar, 16px vertical padding, PELOTON wordmark at left in white at 16px weight 600 with generous letter-spacing. Center nav links in white Inter 14px weight 500 with dropdown carets; right side holds account icon and cart icon. No visible border between nav and hero — dark surface continues.
Hero Section
Full-bleed dark band carrying the primary campaign messageCarbon Black background fills the full viewport width and substantial height. Centered text stack: display headline at 48px Inter weight 300 white with -0.384px tracking, supporting line at 18px weight 400 white at 70% opacity, micro-label at 14px weight 500 white. Product photography sits in low-key lighting beneath the text. Two CTAs sit side-by-side centered: one filled red primary, one ghost outline.
Form Input
Text entry fields in signup, checkout, and account flowsWhite background, 1px Steel (#888b93) border, 6px border-radius, 12px vertical × 16px horizontal padding, Inter 15px weight 400 Carbon Black text. Placeholder in Fog (#a8acb1). Focus state shifts border to Peloton Red with a subtle outer ring at rgba(223,28,47,0.15).
Section Header
Interstitial label introducing a product lineup or content blockLeft-aligned Carbon Black Inter at 26px weight 500 with -0.104px tracking, optional Slate descriptor below at 14px. Sits above a horizontal product carousel or grid with 40px vertical space.
Chat Widget
Persistent customer-support entry point fixed to bottom-rightPill-shaped (204px radius) Peloton Red button anchored to viewport bottom-right, white chat-bubble icon, white 'Chat' label in Inter 14px weight 500. On dark surfaces the red pops; on light surfaces it still dominates due to its saturation.
Footer
Site-wide link repository and legal/contact areaCarbon Black background, white text, 64px vertical padding. Link columns in 4-column grid at max-width 1200px centered. Column headings in Inter 14px weight 600 white, links in Inter 14px weight 400 Slate (#65666a). Social icons at top of footer in single-color white stroke.
Nav Dropdown
Expanding category menu from primary nav itemsCarbon Black surface, white text, no visible border or shadow — appears as a flush extension of the nav bar. Sub-category links in Inter 14px weight 400, with a thumbnail grid of products on wider dropdowns. 24px padding inside.
Promotional Tag
Small inline label for deals, limited offers, or product statusPeloton Red background, white text, Inter 12px weight 600, 6px border-radius, 4px vertical × 8px horizontal padding, often paired with a tiny white dot or arrow icon.
Icon Button
Circular icon-only controls for cart, account, searchTransparent background, white icon stroke (1.5px) on dark nav, Carbon Black stroke on light surfaces. 40px × 40px hit area, icon centered at 20px.
Surfaces & elevation
Level 0
Charcoal Stage
#181a1dFull-bleed hero bands, navigation bar, footer — the cinematic dark mode of the brand
Level 1
Mist Canvas
#f7f7f7Default page background for light content sections between dark heroes
Level 2
White Card
#ffffffProduct cards, form inputs, elevated content blocks sitting on the Mist canvas
Level 3
Silver Divider
#e4e6e7Hairline borders, card outlines, structural separation between content zones
The system deliberately avoids drop shadows. Depth is communicated through surface-layer contrast — dark hero bands sit beside white card surfaces, cards sit on gray canvases, and borders at #e4e6e7 provide hairline separation. This creates a flat, gallery-like presentation where the only 'elevation' is the contrast between Carbon Black (#181a1d) and Pure White (#ffffff), letting product photography carry all visual weight.
Layout & imagery
Layout
Full-bleed dark hero bands alternating with max-width 1200px centered light content sections. Heroes span the entire viewport width with centered text stacks and ambient product imagery. Light sections use a consistent grid: 2-column text+image blocks, 4–5 column product carousels, and 3-column feature blocks. Navigation is a fixed top bar that stays dark across the entire site regardless of the section below. Vertical rhythm is comfortable — 64px section gaps, 24px card padding, 12px element gaps. The product lineup section at the bottom of the visible page shows a horizontal scroll/grid of 5 product cards in a single row.
Imagery
Product photography dominates — full equipment shots (bikes, treadmills, rowers) presented on clean backgrounds with no lifestyle context. In hero sections, equipment appears in low-key dramatic lighting against the charcoal backdrop, making the products glow. Product lineup tiles use clean white-background product crops at consistent aspect ratios. Iconography is line-based, 1.5px stroke, monocolor (white on dark, black on light) — no filled multicolor icons. No illustrations, no abstract graphics, no decorative photography outside of product shots.
Design notes
Agent Guide
**Quick Color Reference** - text: #181a1d (Carbon Black) - background: #f7f7f7 (Mist Canvas) for light sections, #181a1d (Carbon Black) for hero bands - border: #e4e6e7 (Silver Lining) - accent: #df1c2f (Peloton Red) — single chromatic accent - primary action: no distinct CTA color **3 Example Component Prompts** 1. *Create a hero band:* Full-bleed #181a1d background, centered text stack. Display headline at 48px Inter weight 300, #ffffff, letter-spacing -0.384px, line-height 1.2. Subtitle at 18px Inter weight 400, #ffffff at 80% opacity. Two buttons side-by-side centered: a filled #df1c2f button with white text ('Explore Bikes') at 16px Inter weight 500, 28px radius, 16px 24px padding; beside it a ghost button with 1.5px white border, 28px radius, identical text style. 2. *Create a product card:* White (#ffffff) surface on a #f7f7f7 page background. Product image fills the top 60% at 6px corner radius. Below: product name at 20px Inter weight 500, #181a1d. Price or sub-label at 14px Inter weight 400, #65666a. Card has no shadow, 24px outer padding, sits on the gray canvas with a #e4e6e7 hairline border. 3. *Create a nav bar:* Full-width #181a1d bar, 16px vertical padding. 'PELOTON' wordmark at left in #ffffff at 16px Inter weight 600, 0.025em letter-spacing. Five center nav links in #ffffff at 14px Inter weight 500, each with a small chevron. Account icon and cart icon at right in white 1.5px stroke.
Gradient System
One gradient in active use: a soft three-stop gray transition (rgb(168,172,177) → rgb(245,247,249) → rgb(168,172,177)) at 300deg. This is a skeleton/loading shimmer effect — it slides across placeholder content areas while product images load. Not used as a decorative brand element. The 300deg angle creates a diagonal sweep rather than a horizontal band, giving the loading state a subtle sense of motion without being aggressive.
Dark-to-Light Section Strategy
The site alternates between Carbon Black hero bands and Mist Gray content sections. This is intentional: the dark hero is the brand's stage — it makes the red CTA and product photography pop. The light section that follows is the catalog — it makes product information scannable. Never place a white card on a dark hero (no floating product callouts over hero text). Dark sections carry text and CTAs; light sections carry product grids and information density.
Similar brands
Apple
Same cinematic full-bleed dark hero → clean white product gallery rhythm, with a single restrained accent color reserved for primary actions
Garmin
Disciplined achromatic product-retail palette (gunmetal, white, warm gray) with photography as the primary visual language and minimal chromatic decoration
Tesla
Dark immersive product-showcase bands breaking into minimal white specification sections; near-zero color noise, extreme typographic restraint
Rothy's
Premium product e-commerce with white product tiles on soft gray canvas, hairline borders, and a single bold accent color for CTAs
Bowers & Wilkins
Dark exhibition-style product presentation where equipment photography carries visual weight against near-black surfaces, with minimal typographic flourish
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
