--- version: alpha name: Peloton website: "https://www.onepeloton.com" description: >- A hardware-commerce system anchored on a near-black ink (`#181a1d`) and a single Peloton Red voltage (`#df1c2f`) reserved exclusively for primary purchase CTAs and financing flags. Inter runs the entire ladder at weights 300 through 600 — display at 32–48px / 600 with a `-0.2px` track, body at 14–16px / 400 — paired with a pronounced 28px pill geometry on the primary CTA and a 6px corner on every secondary surface, framing photography of the Bike, Tread, Row, and Guide against ink-on-white storefront chrome. seo: title: "Peloton Design System for React — #df1c2f Red, Inter, 17 components" metaDescription: "Peloton's design system as a DESIGN.md file. Peloton Red #df1c2f, Inter 32px, 18 colors, 17 components. For React, Next.js, and AI tools." highlights: - "Single-voltage red — `#df1c2f` shows up 4 times on the page yet carries every primary purchase CTA, never a chip, never a hairline" - "Two-radius geometry — primary CTA sits at a 28px pill, every other interactive surface lands at a 6px corner (66 occurrences)" - "Inter at five weights — 300/400/500/600 across 14 typography tiers, with a `-0.2px` letter-spacing reserved for the 32–48px display row" - "Ink as canvas voltage — `#181a1d` text fills 780 elements vs. `#df1c2f` red at 4, putting 99% of the chrome on near-black against pure white" - "Hardware-first photography — the 1440px viewport stacks Bike, Tread, Row, Guide tiles edge-to-edge, with copy held under 18px so the product stays the loudest object" tags: - "Healthcare & Wellness" - "Consumer Electronics" lastUpdated: "2026-05-13" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Peloton's storefront is a hardware-commerce surface dressed as an editorial fitness brand. The chrome is almost entirely near-black `#181a1d` typography on a pure white canvas — 780 elements use the ink as text, 778 as borders — interrupted in only one place by a single Peloton Red `#df1c2f` voltage that lights the primary purchase CTA. Everything else on the page is photography of the Bike+, Tread, Row, and Guide, captioned by Inter at modest 14–18px sizes. The page reads less like a typical fitness site (which leans on colorful gradient banners and motion) and more like an appliance store that happens to sell hardware you sweat on. This file packages Peloton's home page chrome as a DESIGN.md — Google Labs' open spec for machine-readable design tokens. Inside: 18 color tokens with one brand voltage (`#df1c2f` Peloton Red), one near-black ink (`#181a1d`), and a six-step neutral ladder; 11 typography tiers all running Inter at sizes 12 through 48 and weights 300 through 600, with a `-0.2px` letter-spacing reserved for the 26–48px display row; six radii from 4px to a full pill plus an 8px / 12px spacing scale lifted directly from the 1440px viewport's most-used values; and 17 components ranging from `button-primary` and `button-secondary` through `nav-link`, `product-tile`, `footer-email-input`, and a financing banner. Drop the file into Claude, Cursor, GitHub Copilot, or any agent that reads design tokens. The result is a React surface that looks like Peloton: ink-on-white body, a single red 28px pill anchoring purchase flow, Inter at five weights with display tightened by `-0.2px`, and product tiles framed by 6px corners rather than rounded cards. Use it as a reference for hardware storefronts where the photography sells and the chrome stays out of the way — or as a study in how a single accent token plus a single near-black can carry an entire commerce page without a second brand color. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.onepeloton.com" title: "Peloton — official site" description: "The hardware and content storefront that this DESIGN.md file extracts from." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files." questions: - id: "primary-color" title: "What is Peloton's primary brand color?" answer: "Peloton Red `#df1c2f` — a saturated warm red (oklch 0.578 / 0.222 / 24°) reserved exclusively for the primary purchase CTA and financing flags. It only appears 4 times in the entire 1440×4500 page capture, all as background fills on the Bike+, Tread, Row, and Guide buy buttons. There is no secondary brand color. Every other chromatic moment on the page is ink `#181a1d`, white `#ffffff`, or one of four neutral grays in the `#65666a` to `#a8acb1` band." - id: "typography" title: "What typography does Peloton use, and what should I substitute?" answer: "Inter at weights 300, 400, 500, and 600 across the entire surface — no second typeface. Display heads run at 32–48px / 600 with a `-0.2px` letter-spacing, h2 sits at 18–20px / 500–600 with default tracking, body text lands at 14–16px / 400, and the rare nav-link uses Inter 15px / 300. The closest open-source path is Inter itself (already open). If Inter is unavailable, the system-ui sans stack with a `-0.2px` letter-spacing on display sizes ≥26px approximates the same compactness." - id: "shape-language" title: "Why does Peloton mix a 28px pill CTA with 6px secondary corners?" answer: "Peloton runs a two-tier radius system. The primary purchase CTA — the one that converts revenue — uses a 28px (`{rounded.pill}`) full-pill so it visually escapes the rest of the chrome. Every secondary interactive surface (nav chips, secondary buttons, cards, input fields) drops to 6px (`{rounded.md}`, 66 occurrences in the extraction). The contrast is deliberate: the pill says \"buy hardware,\" the 6px corner says \"navigate.\" There is no third radius in regular use beyond the circular swatch dot at 50%." - id: "red-scarcity" title: "Why does Peloton use red so sparingly?" answer: "Where most fitness brands paint their chrome in gradients of red, orange, or neon green, Peloton holds `#df1c2f` to just 4 occurrences on the home page — all on primary purchase CTAs. The ink `#181a1d` and white `#ffffff` carry roughly 99% of the visual surface. The red functions as a price-tag signal, not as a brand wrapper: it only appears where conversion happens. Copying Peloton's red as a section background, hairline, or icon tint breaks the rule that makes it work." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own hardware storefront?" answer: "Yes — feed it to Claude, Cursor, or GitHub Copilot and the agent will reproduce Peloton's discipline: a single red voltage on a single CTA shape, ink-on-white chrome, Inter at four weights, 6px-cornered cards under hardware photography. Every color, type style, radius, and spacing value is a quoted token you can paste into Tailwind config, CSS variables, or your own React library. Reference `{components.button-primary}`, `{components.product-tile}`, and `{components.financing-banner}` in your prompts and the agent stays on the same accent-scarcity rule." - id: "known-gaps" title: "What's missing from this Peloton DESIGN.md?" answer: "Four things, listed under Known Gaps below: the configurator flow (color, accessory, financing pickers) is not captured; member-app chrome (workout library, leaderboards, profile) lives on a separate sub-domain and is not represented; dark-mode and motion tokens are not in the spec — the home page runs a single light theme; and the cookie-consent overlay leaked a Fides component palette (`#2d3748`, `#edf2f7`, `#38a169`) into the extraction which has been excluded from the brand token set." colors: primary: "#df1c2f" ink: "#181a1d" ink-soft: "#222529" ink-deeper: "#2b2e35" charcoal: "#4f525b" graphite: "#65666a" mute: "#888b93" stone: "#a8acb1" hairline: "#e4e6e7" canvas: "#ffffff" canvas-soft: "#f5f7f9" canvas-warm: "#f7f7f7" black: "#000000" on-primary: "#ffffff" link-ink: "#2d3748" success: "#38a169" surface-pale: "#edf2f7" error-soft: "#f7c2c2" typography: display-xl: fontFamily: "Inter, system-ui, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 1.3 letterSpacing: "-0.2px" display-lg: fontFamily: "Inter, system-ui, sans-serif" fontSize: 32px fontWeight: 600 lineHeight: 1.3 letterSpacing: "-0.2px" display-md: fontFamily: "Inter, system-ui, sans-serif" fontSize: 26px fontWeight: 600 lineHeight: 1.3 letterSpacing: "-0.2px" heading-md: fontFamily: "Inter, system-ui, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1 letterSpacing: 0 heading-sm: fontFamily: "Inter, system-ui, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0 body-lg: fontFamily: "Inter, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-md: fontFamily: "Inter, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 body-strong: fontFamily: "Inter, system-ui, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.43 letterSpacing: 0 caption: fontFamily: "Inter, system-ui, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0 button-md: fontFamily: "Inter, system-ui, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0 nav-link: fontFamily: "Inter, system-ui, sans-serif" fontSize: 15px fontWeight: 300 lineHeight: 1.07 letterSpacing: 0 rounded: none: "0px" sm: "4px" md: "6px" lg: "12px" xl: "24px" pill: "28px" full: "9999px" spacing: xxs: "4px" xs: "6px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "40px" xxl: "48px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" borderColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "0px 22px" height: "56px" button-primary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" borderColor: "{colors.ink}" rounded: "{rounded.pill}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "12px 24px" height: "48px" button-ghost: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-strong}" rounded: "{rounded.md}" padding: "8px 16px" height: "40px" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.nav-link}" rounded: "{rounded.none}" height: "48px" padding: "0px 24px" nav-link: textColor: "{colors.graphite}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px" hero-tile: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" borderColor: "{colors.ink}" rounded: "{rounded.none}" padding: "48px 24px" hero-heading: textColor: "{colors.on-primary}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "0px" financing-banner: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" borderColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "18px 24px" height: "60px" product-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "24px" product-tile-image: backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.md}" padding: "0" price-label: textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.none}" padding: "0" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.mute}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "14px 12px" height: "50px" footer-email-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.mute}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "14px 12px" height: "50px" link-inline: textColor: "{colors.link-ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0" badge-promo: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.md}" padding: "4px 12px" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.graphite}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "40px 24px" --- ## 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`.