---
title: "Peloton design system"
variant: extended
source: https://www.onepeloton.com/
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/onepeloton-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Peloton · Design System

> Premium fitness, presented with clarity and motion

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.onepeloton.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Peloton pairs immersive workout imagery with a restrained black, white, and cool-gray interface. The homepage moves from a cinematic treadmill hero into product discovery, training content, member stories, and practical purchase information.

## North star

Let full-scale fitness photography create energy, while a disciplined monochrome interface keeps shopping and navigation clear.

## Overview

The visual system lets fitness imagery carry the emotion while interface elements stay restrained. Cool Gallery Gray (#f5f7f9) and white create quiet section backgrounds; Ink (#181a1d) anchors the navigation, text, dark promotional bands, and primary actions. Inter is used throughout, with large centered semibold headlines and compact, lighter supporting copy. The page alternates expansive media-led moments with product and class browsing, so the long scroll feels varied without changing its core visual language. Full-bleed video and photography are balanced by clean cards, centered copy, and small neutral controls. Product imagery is presented on bright surfaces, while occasional dark sections and image overlays provide contrast. Rounded pill buttons make purchase actions distinct, and the product and testimonial cards use soft elevation sparingly. The overall impression is contemporary, premium, active, and intentionally uncluttered.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Gray | `#f5f7f9` | `--color-gallery-gray` | surface | Cool, very light canvas for the footer base and pale section backgrounds. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page and card surface, white hero controls, and text over dark imagery. |
| Peloton Ink | `#181a1d` | `--color-peloton-ink` | brand | Primary text, navigation, dark content bands, and filled primary buttons. |
| Soft Graphite | `#65666a` | `--color-soft-graphite` | neutral | Muted supporting copy, secondary navigation, and understated class links. |
| Mist Silver | `#a8acb1` | `--color-mist-silver` | semantic | Measured mainly in a gradient and minor supporting details, not a defining interface color. |
| Deep Black | `#000000` | `--color-deep-black` | neutral | Occasional inverse areas and small high-contrast details; distinguish from the softer main ink. |
| Frost Line | `#e4e6e7` | `--color-frost-line` | semantic | Subtle media-related separation and low-emphasis boundaries. |
| Charcoal Shade | `#444545` | `--color-charcoal-shade` | semantic | A gradient-derived dark tone, mostly associated with media shading rather than core UI. |
| Slate Border | `#888b93` | `--color-slate-border` | neutral | Fine input outline, including the footer email field. |

### Semantic aliases

`--color-canvas` → `#f5f7f9` (Gallery Gray) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#000000` (Deep Black) · `--color-surface-3` → `#181a1d` (Peloton Ink) · `--color-text` → `#181a1d` (Peloton Ink) · `--color-text-muted` → `#65666a` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#181a1d` | `#f5f7f9` | 16.24:1 | AAA |
| `#181a1d` | `#ffffff` | 17.44:1 | AAA |
| `#181a1d` | `#000000` | 1.2:1 | fail |
| `#65666a` | `#f5f7f9` | 5.34:1 | AA |
| `#65666a` | `#ffffff` | 5.73:1 | AA |
| `#65666a` | `#000000` | 3.66:1 | AA-large |
| `#65666a` | `#181a1d` | 3.04:1 | AA-large |
| `#ffffff` | `#f5f7f9` | 1.07:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#181a1d` | 17.44:1 | AAA |

### Gradients

- `linear-gradient(300deg, rgb(168, 172, 177), rgb(245, 247, 249), rgb(168, 172, 177))`
- `linear-gradient(19deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 44%)`
- `linear-gradient(315.92deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 40.92%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 300, 600, 500, 700 | Site-wide typography for navigation, headings, body copy, buttons, links, and form controls. | Inter |

- **Inter:** Use measured weights from 300 to 700; headlines are semibold and supporting copy is often light. Keep casing natural and tracking subtly tight on large headings.

### Type scale — Augmented Fourth (ratio ≈ 1.386, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.3 | -0.004em | — | Inter | Large centered hero and primary page headlines. |
| h2 | 36px | 600 | 1.3 | -0.006em | — | Inter | Major section headings, usually centered. |
| h3 | 32px | 600 | 1.3 | -0.006em | — | Inter | Product, class, and content-card headings. |
| h4 | 26px | 600 | 1.3 | -0.008em | — | Inter | Smaller feature and promotional headings. |
| body | 13px | 300 | 1.54 | 0 | — | Inter | Light-weight explanatory copy and product descriptions. |
| caption | 12px | 400 | 1.33 | 0 | — | Inter | Compact class previews, labels, and fine-print details. |
| button | 16px | 500 | 1.3 | 0 | — | Inter | Purchase, discovery, and form action labels. |
| link | 12px | 400 | 1.33 | 0 | — | Inter | Small secondary text links and class previews. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 6, 8, 10, 12, 16, 22, 24, 32, 40, 48, 80 px.
- Section rhythm 80px · element gap 12px · card padding 16px · max content width 1224px.

Use a wide, centered content frame with a measured maximum width of 1224px, while allowing media-led hero and campaign sections to run full bleed. The page is a long editorial storefront rather than a uniform grid: centered headings introduce product and class browsing, three-column feature areas, and horizontally browsable card rows. Keep generous section pauses, with the measured section gap at 80px, and compact element spacing around 12px. The measured density is comfortable. The top navigation is a dark horizontal band; the footer returns to structured columns and fine-print rows.

## Shape & elevation

- Radius: button `50%` · input `2px` · card `18px` · media `6px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `16px` · 2xl `18px` · pill `9999px`
- Shadow `hairline` (button, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.05) 0px 16px 40px 4px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.04) 0px 4px 8px 0px`
- Motion: standard transition `0.15s ease-in-out` on interactive elements.

Most page sections are flat, with separation created by white and pale-gray backgrounds rather than prominent borders. Cards receive restrained layering: the measured large card shadow is soft and broad, while smaller incidental elevation remains subtle. Use rounded card edges and pill-shaped purchase buttons; reserve fine outlines for inputs and understated controls.

## Imagery

Prioritize real workout and product photography, with video in the opening treadmill hero and additional full-width campaign moments. Frame athletes in motion and let the image fill the section rather than placing it inside a decorative illustration. Product cards use clean, bright backgrounds that keep equipment silhouettes legible. Some media uses dark gradient overlays to preserve readable white copy; avoid stylized filters that obscure the footage.

## Components

### Top navigation

Dark horizontal header with the Peloton wordmark, centered category links, and account and cart icons. Keep navigation text compact and understated.

### Video hero

Full-bleed treadmill footage with centered white headline and supporting line, paired with white pill purchase buttons and a product-lineup row near the bottom.

### Product lineup cards

Bright product tiles display treadmill, bike, and rower imagery with compact names and clean white surfaces.

### Pill action buttons

Measured purchase actions use Inter at 16px and weight 500, with 22px horizontal padding and a fully rounded shape; white-on-ink or ink-on-white variants.

### Class carousel

Horizontal row of instructor and workout imagery with short category names, muted preview links, and pagination controls.

### Feature cards

Three-column cards pair product or lifestyle media with a title, light-weight description, and understated link; measured cards use rounded corners and soft elevation.

### Footer signup

Structured footer columns sit beside a compact email input and dark Submit button, followed by legal links on a pale-gray base.

### Measured component styles

- **Primary button** (“Buy Tread Flex”): background #ffffff · text #181a1d · border 2px solid #ffffff · radius 28px · padding 0px 22px · 500 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px
- **Secondary button** (“Explore Tread Flex”): background #181a1d · text #ffffff · border 2px solid #181a1d · radius 24px · padding 0px 22px · 500 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px
- **Link** (“Apparel”): transparent background · text #181a1d · radius 0px · padding 0px · 300 16px Inter
- **Input**: transparent background · text #181a1d · border 1px solid #888b93 · radius 2px · padding 14px 12px 0px 12px · 400 14px Inter
- **Card** (“Tread Flex”): background #ffffff · text #181a1d · radius 18px · padding 16px · 500 16px Inter
- **Navigation item** (“Home Trial”): transparent background · text #65666a · radius 0px · padding 0px · 300 15px Inter

## Do

- Use Inter consistently across the interface.
- Let hero footage span the full viewport width.
- Keep primary headlines centered and semibold.
- Use Gallery Gray and white to alternate quiet surfaces.
- Make purchase actions clear, high-contrast pills.
- Use product photography on uncluttered card surfaces.

## Don't

- Do not introduce bright accent colors absent from the measured palette.
- Do not crowd full-bleed imagery with extra decoration.
- Do not turn every section into the same card grid.
- Do not overuse shadows or visible borders.
- Do not use heavy, dense body text.
- Do not make secondary links compete with purchase actions.

## Agent prompt

Build a new Peloton-style ecommerce page with a restrained monochrome interface and immersive fitness media. Use Gallery Gray (#f5f7f9), Gallery White (#ffffff), and Peloton Ink (#181a1d) as the core surfaces and text colors; reserve Soft Graphite (#65666a) for secondary copy. Use Inter, with semibold large headings and lighter supporting text. Compose a dark, compact top navigation, a full-bleed photo or video hero, clear pill-shaped purchase actions, and varied product, class, and editorial sections. Keep content centered within the measured 1224px maximum width except for media-led bands. Favor generous section pauses, clean product tiles, and rounded cards with restrained shadows. Keep forms and fine-print details quiet. Use monochrome image overlays only when needed for readable copy; do not add unmeasured accent colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video hero with centered copy and a product-card lineup along the lower edge. | purchase actions, product discovery | full-bleed video, white pill buttons, product tiles |
| 2 | product-showcase | Centered heading above a three-column product selector and expansive media area. | product selection, feature exploration | segmented selector, centered heading, large product media |
| 3 | feature-split | Full-bleed split composition with centered text beside a runner image. | brand storytelling | large photography, minimal headline |
| 4 | how-it-works | Three-column instructional content with media and controls, followed by a centered section heading. | guided setup, step-by-step explanation | media cards, numbered steps, short feature copy |
| 5 | team | Centered introduction with a concise heading and supporting paragraph. | instructor discovery | centered copy, open whitespace |
| 6 | video | Single full-width media feature with minimal surrounding interface. | watch media | large video, rounded media frame |
| 7 | category-nav | Centered heading and summary above a discovery link. | browse classes | centered copy, text link |
| 8 | gallery | Wide horizontal carousel of category cards with pagination below. | carousel browsing, preview class links | image cards, pagination dots, compact captions |
| 9 | testimonials | Full-bleed dark media band with layered testimonial cards. | social proof, testimonial browsing | dark image background, white quote cards, carousel controls |
| 10 | feature-grid | Centered introduction followed by three product and lifestyle cards. | cross-category discovery | three-column cards, media-led card tops, text links |
| 11 | pricing | Dark full-width band with a centered introduction and four benefit columns. | purchase reassurance, benefit comparison | dark background, four-column details, centered headings |
| 12 | other | Full-width block of compact legal and financing disclosures. | terms review | fine print, text links |
| 13 | footer | Multi-column footer with link groups, email signup, support details, and app badges. | site navigation, email signup, support access | four-column grid, email form, compact link lists |
| 14 | footer | Narrow pale-gray legal bar with region selector and compact policy links. | region selection, policy access | pale-gray surface, small legal links |

## Source CSS custom properties (selected)

```css
--fides-overlay-primary-color: #181a1d;
--fides-overlay-background-color: white;
--fides-overlay-embed-background-color: transparent;
--fides-overlay-font-color: #181a1d;
--fides-overlay-font-color-dark: #2d3748;
--fides-overlay-hover-color: #edf2f7;
--fides-overlay-gpc-applied-background-color: #38a169;
--fides-overlay-gpc-applied-text-color: white;
--fides-overlay-gpc-overridden-background-color: #e53e3e;
--fides-overlay-gpc-overridden-text-color: white;
--fides-overlay-brand-link-logo-color: #2b2e35;
--fides-overlay-background-dark-color: #e2e8f0;
--fides-overlay-background-error-color: #f7c2c2;
--fides-overlay-error-color: #e53e3e;
--fides-overlay-success-color: #38a169;
--fides-overlay-skeleton-gradient-from-color: rgba(0, 0, 0, 0.06);
--fides-overlay-skeleton-gradient-to-color: rgba(0, 0, 0, 0.15);
--fides-overlay-inactive-font-color: #a0aec0;
--fides-overlay-primary-button-background-color: #181a1d;
--fides-overlay-primary-button-background-hover-color: #4f525b;
--fides-overlay-primary-button-text-color: #ffffff;
--fides-overlay-primary-button-border-color: transparent;
--fides-overlay-secondary-button-background-color: white;
--fides-overlay-secondary-button-background-hover-color: #edf2f7;
--fides-overlay-neutral-background-color: #edf2f7;
--fides-overlay-secondary-button-text-color: #2d3748;
--fides-overlay-secondary-button-border-color: #181a1d;
--fides-overlay-secondary-button-border-color-disabled: #a0aec0;
--fides-overlay-title-font-color: #181a1d;
--fides-overlay-body-font-color: #181a1d;
--fides-overlay-link-font-color: #2d3748;
--fides-overlay-primary-active-color: #181a1d;
--fides-overlay-inactive-color: #e2e8f0;
--fides-overlay-disabled-color: #e1e7ee;
--fides-overlay-row-divider-color: #e2e8f0;
--fides-overlay-row-hover-color: #edf2f7;
--fides-overlay-badge-background-color: #718096;
--fides-overlay-badge-border-radius: 4px;
--fides-overlay-select-border-color: #e2e8f0;
--fides-overlay-language-button-border-radius: 4px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/onepeloton-com