Peloton Design System

Overview

Peloton's storefront chrome is built on a contradiction — the brand sells one of the most kinetic, motion-saturated experiences in consumer fitness, but the home page is almost entirely still: near-black #181a1d typography on a white canvas, photography of stationary hardware, and a single saturated red #df1c2f voltage that fires only on the four purchase CTAs. The kinetic energy lives in the product imagery and the video reel of class-in-session moments; the chrome stays out of the way.

Accent scarcity as discipline: Peloton uses #df1c2f exactly 4 times in the captured 1440×4500 surface, all as background fills on the Bike+, Tread, Row, and Guide primary CTAs. Where most fitness brands paint their entire chrome in gradients of red and orange — the category default since the Equinox-era SoulCycle moment — Peloton withholds. The red becomes a price-tag signal: if it is on the page, you are looking at a hardware buy moment. Body copy is #181a1d (780 text occurrences). Hairlines are #181a1d at low opacity (778 border occurrences). Secondary text drops to #65666a (411 occurrences). There is no third brand color.

Pill voltage vs. flat chrome: The system runs a two-radius geometry. The primary CTA — and only the primary CTA — uses a 28px full-pill ({rounded.pill}) at a 56px height. Every other interactive surface drops to a 6px corner ({rounded.md}, 66 occurrences in the extraction). The contrast is the visual lever that makes the red CTA escape the rest of the page without needing a shadow, glow, or scale jump. Unlike the convention of using a single radius across an entire surface for visual consistency, Peloton uses the radius switch itself as the hierarchy.

Colors

• Peloton Red (#df1c2f) — frequency 4. Used as bg (3), border (1), text (0). The single brand voltage, reserved for primary purchase CTAs and financing flags; never appears on chrome, hairlines, or chips.
• Ink (#181a1d) — frequency 1565. Used as text (780), border (778), bg (7). The load-bearing typography and hairline color across the entire storefront; carries roughly 99% of the readable surface.
• Graphite (#65666a) — frequency 411. Used as text (204), border (205), bg (2). The secondary text and divider color, scoped to nav links, captions, and disclaimer copy.
• Canvas (#ffffff) — frequency 180. Used as text (56), bg (35), border (56), gradient (33). Pure white is the page background and on-ink inverse text; the gradient column is where it fades into hero photography.
• Stone (#a8acb1) — frequency 84. Used as border (9), text (9), gradient (66). The disabled-state border and the gradient fade color over product imagery.
• Black (#000000) — frequency 58. Used as text (12), border (11), bg (2), gradient (33). Reserved for image scrim overlays and a small number of disclosure text rows; not interchangeable with #181a1d ink.
• Ink-soft (#222529) — frequency 8. Used as text (4), border (4). A near-duplicate of ink used in card hairlines that need a one-step lift from the body ink.
• Link-ink (#2d3748) — frequency 5. Used as text (3), border (2). The inline-link color in disclosure copy, lifted half a step warmer than the body ink.

The palette is structural with one brand exception. Ink at 1565 occurrences vs. red at 4 is the entire system — the red functions as scarce price signage, not as a category color. Where the cookie-overlay extraction surfaced #38a169 success green and #edf2f7 pale surface, those are Fides component defaults that leaked into the page, not Peloton brand tokens.

Typography

Inter runs the entire ladder — no second typeface. The weight strategy spans 300, 400, 500, and 600, with weight 700 deliberately absent. Display heads ({typography.display-xl} 48px / 600 with -0.2px tracking, {typography.display-lg} 32px, {typography.display-md} 26px) anchor the campaign tiles; the negative letter-spacing on this row is the only place tracking deviates from the default normal value. Headings ({typography.heading-md} 20px / 600 and {typography.heading-sm} 18px / 500) handle product card titles and section labels.

Body copy lands at three weight stops. {typography.body-lg} 16px / 400 (count 40 in the extraction) covers paragraph copy. {typography.body-md} 14px / 400 (count 32) handles cards, financing disclosures, and the footer. {typography.body-strong} 14px / 600 (count 5) marks price labels and emphasis runs. {typography.button-md} 16px / 500 is the primary CTA face. {typography.nav-link} 15px / 300 is the lightest stop on the page — a deliberate down-weight that lets the nav recede beneath the hero photography.

The absence of weight 700 is a discipline signal — Peloton trusts size and color, not bold weights, to build hierarchy.

Layout

The page stacks as a vertical column of edge-to-edge tiles inside a 1440px viewport. Spacing leans heavily on a 12 / 16 / 24 scale: 12px is the dominant token at 44 occurrences, followed by 10px (41), 6px (33), 16px (30), 24px (27), and 8px (15). Section dividers fall at 48px and 40px. The tile rhythm runs Bike, Tread, Row, Guide each in its own 560–640px tall band — photography centered, headline at 26–32px, two short body lines, and the red 28px pill CTA. Internal card padding lands at 0px 22px (the CTA's exact value, 9 occurrences) or 18px 24px (5 occurrences) for product tiles.

Elevation & Depth

Peloton uses zero drop shadows on chrome. Depth comes from three devices: photography weight (the hardware is rendered with its own studio lighting), surface contrast between the white page canvas and the occasional #181a1d financing band, and a single 1px ink hairline on cards and the top nav. The extraction returned 0 shadow occurrences on every color token. There is no neumorphic lift, no card glow, no hover elevation in the home-page capture.

Shapes

Two radii do all the work. {rounded.pill} 28px is exclusively the primary CTA shape — 56px tall, 280px wide, full red fill. {rounded.md} 6px (66 occurrences) is every other rounded surface: secondary buttons, product tiles, badges, the input field. The {rounded.lg} 12px appears in 2 places (likely the cookie modal). {rounded.sm} 4px (34 occurrences) is the input-field corner and the small badge. {rounded.full} is reserved for circular dots (13 occurrences at 50%). Square corners ({rounded.none} 0px) carry the financing banner and hero tile.

Components

• button-primary — the red #df1c2f 28px pill, 56px tall, Inter 16/500 white. The only place the brand voltage appears.
• button-primary-hover — collapses to #181a1d ink fill on hover, keeping the pill shape. The hover state desaturates intentionally.
• button-secondary — #ffffff fill with #181a1d 1px hairline and 6px corners. Used for "Learn More" and category drill-in.
• button-ghost — softer secondary with #e4e6e7 border, 40px tall. Used in dense nav and filter rows.
• top-nav — 48px white bar with a 1px hairline bottom, Inter 15/300 nav links in #65666a. Recedes beneath the hero.
• nav-link — the lightest typography stop on the page; weight 300 is what makes the nav read as quiet.
• hero-tile — full-bleed #181a1d background with white display type and a single red pill. No rounded corner.
• hero-heading — Inter 48/600 with -0.2px tracking, white on ink. The display ceiling.
• financing-banner — full-width #181a1d band with 14px body and disclaimer footnotes, sitting above the hero.
• product-tile — #ffffff 6px-corner card with a 1px hairline, holding a hardware photograph on {colors.canvas-soft} (#f5f7f9).
• product-tile-image — the soft-gray photography surface; never #ffffff because the products are mostly black.
• price-label — 14px/600 Inter, ink color. Pricing is typographic, not colored.
• text-input / footer-email-input — 50px tall, 4px corner, #888b93 mute border, 14px Inter body.
• link-inline — #2d3748 text in disclosure paragraphs, slightly warmer than body ink.
• badge-promo — ink-on-ink badge with 6px corners for "New," "Refurbished," "Financing" pills.
• footer — white background with #65666a graphite text, no top hairline beyond the section gap.

Do's and Don'ts

• Do reserve #df1c2f for primary purchase CTAs only. The red works because it appears 4 times — not 40.
• Do pair the 28px pill ({rounded.pill}) with the red fill and nothing else. The pill shape and the red voltage are a married pair.
• Do use #181a1d ink for body text and 1px hairlines. Pure black #000000 is reserved for image scrim overlays.
• Do drop to weight 300 on nav links — the lightness is what lets the hero photography hold attention.
• Don't apply -0.2px letter-spacing to body or button copy. The tracking only fits sizes ≥26px; smaller text needs normal to stay readable.
• Don't use #f5f7f9 canvas-soft as a page background — it is the product-tile image surface only, lifted half a step from white to let dark hardware silhouette.
• Don't introduce a secondary brand color (orange, green, blue) to differentiate Bike vs. Tread vs. Row. Peloton uses the photography and the headline to differentiate, never a chip color.
• Don't use #a8acb1 stone for body text — 9 of its 84 occurrences are text but the rest are gradient fades over imagery. Body copy belongs at #181a1d.
• Don't wrap the red CTA in a shadow or glow. The extraction returned zero shadows on every color; depth here comes from typography weight, not lift.

Known Gaps

• Configurator flow not captured — the color picker, accessory bundles, and financing slider on the per-product PDP are not in this spec.
• Member app chrome excluded — workout library, leaderboards, profile, and live-class chrome live on a separate sub-domain and run a darker theme than the storefront documented here.
• Dark mode and motion tokens absent — the home page captures a single light theme; the brand's app and class video chrome use a dark canvas that is not represented.
• Cookie-consent overlay tokens excluded — the Fides consent component leaked four non-brand colors into the raw extraction (a dark slate link color, a pale surface, a GPC-applied green, and a GPC-overridden warning red); only the slate link survived in the token set as link-ink.