---
version: alpha
name: Peloton
description: "A black studio at dusk, one red deal bar, a single white pill."
colors:
  on-surface-variant: "#65666A"
  on-surface: "#181A1D"
  surface: "#FFFFFF"
  outline: "#E4E6E7"
  primary: "#DF1C2F"
  carbon: "#222529"
  pure-black: "#000000"
  cloud: "#F5F7F9"
  fog: "#F7F7F7"
  steel: "#888B93"
  ash: "#A8ACB1"
  coral: "#FF5A5A"
typography:
  micro:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-large:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  eyebrow-subhead:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  heading:
    fontFamily: Inter
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  heading-large:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0em
  title:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  display:
    fontFamily: Brandon Grotesque
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
rounded:
  input: 2px
  card-dark-button: 3px
  tiny-chip: 4px
  small-panel: 6px
  rounded-panel: 8px
  media-large-panel: 18px
  feature-block: 24px
  pill-button: 128px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 80px
---
# Peloton — Style Reference
> A black studio at dusk, one red deal bar, a single white pill.

**Theme:** mixed

Peloton runs on register contrast: a cinematic near-black hero and nav where fitness photography does the talking, then cool off-white content shelves below where product cards line up like equipment on a showroom floor. The palette is deliberately monochrome — a full grayscale ramp from `#000000` to `#FFFFFF` carries almost everything — and color is rationed to two reds: a saturated brand crimson `#DF1C2F` that owns the promo bar, and a softer coral `#FF5A5A` that flags the active nav item and section eyebrows. The one signature move is the white pill: a fully-rounded `128px` button in white with dark text, dropped over dark imagery so the call-to-action reads as a single bright lozenge. Type is a two-face system — Brandon Grotesque, the geometric brand display face, sets the big money headlines, while Inter handles every UI label, nav item, and body line. Layout is full-bleed cinema up top, contained card rows below, with restraint everywhere: shadows are barely-there, radii are tiny (`3px` cards), and nothing competes with the photograph.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#181A1D` | `--color-ink` | Primary near-black: nav bar, dark buttons, body text on light. The brand's true "black" — softer than pure. |
| Carbon | `#222529` | `--color-carbon` | Secondary dark text, a half-step up from Ink for dense copy. |
| Pure Black | `#000000` | `--color-black` | Full-black backgrounds behind hero photography; `theme-color` meta. Use for cinematic depth, not text. |
| White | `#FFFFFF` | `--color-white` | Content canvas, card fills, hero text on dark, and the white pill CTA. |
| Cloud | `#F5F7F9` | `--color-cloud` | Cool off-white — the primary light section background below the hero. |
| Fog | `#F7F7F7` | `--color-fog` | Neutral light gray, an alternate section/panel fill near Cloud. |
| Mist | `#E4E6E7` | `--color-mist` | Light gray for dividers, hairlines, and card wells. |
| Slate | `#65666A` | `--color-slate` | Mid gray: secondary/muted text, borders, muted fills. The workhorse gray. |
| Steel | `#888B93` | `--color-steel` | Input border gray — the resting stroke on form fields. |
| Ash | `#A8ACB1` | `--color-ash` | Light muted text: captions, disabled, placeholder-weight labels. |
| Peloton Red | `#DF1C2F` | `--color-red` | The brand crimson. Reserved for the promo/deal bar and its inline "Shop now" link — never a general CTA color. |
| Coral | `#FF5A5A` | `--color-coral` | Soft accent red: active nav item ("Deals") and section eyebrows. The lighter, warmer signal — editorial, not transactional. |

## Tokens — Typography
### Brandon Grotesque — the display face: big hero headlines and money numbers, geometric and confident · `--font-display`
- **Substitute:** Brandon Text, Proxima Nova, Montserrat
- **Weights:** 300, 400, 500, 700
- **Sizes:** 26px, 32px, 36px, 48px for headlines; the hero "Up to $1,200 off" sits at the top of the range
- **Line height:** ~1.05–1.15 on display sizes *(inferred)*
- **Letter spacing:** near-zero to slightly tight on large sizes *(inferred)*
- **Role:** Headline and hero display only. Rounded geometric grotesque that gives the marketing voice its friendly-athletic tone.

### Inter — the UI & body face: nav, labels, buttons, body copy, form fields · `--font-body`
- **Substitute:** system-ui, Helvetica Neue, Arial
- **Weights:** 300, 400, 500, 600, 700, 900
- **Sizes:** 10px, 12px, 13px, 14px, 15px, 16px, 18px
- **Line height:** ~1.4–1.6 for body, tighter for labels *(inferred)*
- **Letter spacing:** default; small nav/labels may carry a hair of positive tracking *(inferred)*
- **Role:** Every interface surface — nav items, button labels, card copy, inputs, eyebrows. Neutral and legible against the photography.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro | 10px | 1.4 *(inferred)* | normal | `--text-micro` |
| Caption | 12px | 1.4 *(inferred)* | normal | `--text-caption` |
| Small | 13px | 1.45 *(inferred)* | normal | `--text-sm` |
| Body | 14px | 1.5 *(inferred)* | normal | `--text-body` |
| Body Large | 16px | 1.5 *(inferred)* | normal | `--text-body-lg` |
| Eyebrow / Subhead | 18px | 1.3 *(inferred)* | normal | `--text-subhead` |
| Heading | 26px | 1.2 *(inferred)* | normal | `--text-heading` |
| Heading Large | 32px | 1.15 *(inferred)* | normal | `--text-heading-lg` |
| Title | 36px | 1.1 *(inferred)* | normal | `--text-title` |
| Display | 48px | 1.05 *(inferred)* | tight | `--text-display` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 80px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Input | 2px |
| Card / dark button | 3px |
| Tiny chip | 4px |
| Small panel | 6px |
| Rounded panel | 8px |
| Media / large panel | 18px |
| Feature block | 24px |
| Pill button | 128px |
| Circular (avatar/icon button) | 50% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| None | `rgba(0, 0, 0, 0) 0px 0px 0px 0px` | `--shadow-none` |
| Card | `rgba(0, 0, 0, 0.05) 0px 4px 4px 0px` | `--shadow-card` |
| Float | `rgba(0, 0, 0, 0.05) 0px 16px 40px 4px` | `--shadow-float` |

### Layout
- **Page max-width:** full-bleed hero + nav; contained content rows below
- **Section gap:** generous — light shelves separated by whitespace
- **Card padding:** 24px on content cards; 0 on flush image cards
- **Element gap:** 12–16px between controls, 24px between card groups

## Components
### White Pill CTA
**Role:** The hero's primary call-to-action — "Shop deals."
White fill `#FFFFFF`, dark text `#181A1D`, fully rounded `128px` radius, padding `8px 12px`, Inter 16px/400. Dropped over dark photography so it reads as a single bright lozenge. This is the signature button — the shape that says Peloton.

### Dark Solid Button
**Role:** Primary action on light surfaces.
Fill `#181A1D`, white text `#FFFFFF`, `2px #181A1D` border, `3px` radius, padding `0 22px`, Inter 16px/500. The near-black rectangle — squared where the pill is round, used on the off-white content shelves.

### Promo / Deal Bar
**Role:** The top-of-page announcement strip ("Get up to $1,200 off… Shop now").
Background `#DF1C2F` Peloton red, white text `#FFFFFF`, inline link weight 300 with an underlined "Shop now." Full-bleed, edge-to-edge above the nav. The only place the saturated crimson appears — it is a banner color, not a button color.

### Nav Bar
**Role:** Primary top navigation.
Near-black `#181A1D` bar, white `#FFFFFF` labels in Inter, active item ("Deals") tinted coral `#FF5A5A`. Wordmark left, category links center, account + cart icons right. Sits flush under the red promo bar.

### Section Eyebrow
**Role:** Small kicker above a headline (e.g. "Sweat the fun stuff").
Coral `#FF5A5A` on dark, or Ink on light, Inter 18px/500. Signals a new section quietly — coral is the editorial accent, never a CTA.

### Hero Headline
**Role:** The big marketing statement over photography.
White `#FFFFFF`, Brandon Grotesque up to 48px/600, centered over full-bleed imagery. On constrained variants it drops to 26px with `0 80px` side padding to hold measure.

### Product Card
**Role:** Item tile in a content row (e.g. "Cross Training Series").
White fill `#FFFFFF`, `3px` radius, faint Card shadow `rgba(0,0,0,0.05) 0 4px 4px`, image well over a Mist/Cloud base, copy in Ink `#181A1D`. Rows scroll horizontally as a carousel.

### Text Input
**Role:** Form field (email capture, account).
White fill `#FFFFFF`, `1px #888B93` steel border, `2px` radius, padding `14px 12px 0` for a floating label, Inter 14px, text `#181A1D`. Minimal and quiet — no shadow at rest.

### Icon Button
**Role:** Account and cart affordances in the nav.
Circular `50%`, transparent or Slate `#65666A` fill, `#181A1D` glyph. Bare — no border, no background at rest.

### Ghost / Text Link
**Role:** Inline secondary navigation and footer links.
No background, Ink `#181A1D` (or white on dark), Inter 16px, weight 300–700 by emphasis. Underline appears on the transactional links inside the promo bar.

### Content Section (Light)
**Role:** The off-white shelf below the hero.
Background Cloud `#F5F7F9` or Fog `#F7F7F7`, Ink headings, generous vertical rhythm. The register flip from cinematic dark to bright showroom.

### Bordered Secondary Button
**Role:** Lower-emphasis action on dark imagery ("Shop apparel").
Transparent fill, white `#FFFFFF` text and border, fully rounded. The outlined companion to the white pill.

## Do's and Don'ts
### Do
- Let photography carry the hero — near-black `#000000`/`#181A1D` behind, white text `#FFFFFF` on top, one white pill CTA.
- Keep the palette monochrome and ration the reds: `#DF1C2F` for the promo bar only, `#FF5A5A` for active-state and eyebrows only.
- Use the `128px` pill for the primary hero CTA and the `3px` squared button on light shelves — the two shapes are a deliberate pair.
- Pair Brandon Grotesque display with Inter UI; never set nav or body in the display face.
- Keep shadows to the two barely-there 5%-opacity values — depth comes from luminance and imagery, not drop shadows.
- Flip register cleanly: cinematic dark hero → cool off-white (`#F5F7F9`) content shelves.

### Don't
- Don't use the saturated Peloton red `#DF1C2F` as a button or link color across the UI — it belongs to the deal bar.
- Don't confuse the two reds: coral `#FF5A5A` is editorial signal, crimson `#DF1C2F` is the banner.
- Don't add heavy shadows, large radii on cards (cards are `3px`, not rounded), or a third accent hue.
- Don't set headlines in Inter or body text in Brandon Grotesque.
- Don't tint the grayscale ramp — the neutrals are cool and true from `#65666A` to `#E4E6E7`.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Hero Void | `#000000` | Full-black cinema behind hero photography. |
| 0b | Ink | `#181A1D` | Near-black nav and dark content sections. |
| 1 | Canvas | `#FFFFFF` | Primary content canvas and card fill. |
| 2 | Cloud | `#F5F7F9` | Cool off-white content shelf. |
| 2b | Fog | `#F7F7F7` | Alternate neutral section fill. |
| 3 | Mist | `#E4E6E7` | Wells, dividers, card bases. |

## Elevation
Depth is conveyed almost entirely by luminance and photography, not shadow. The hero sits on pure black; content lifts onto white and cool off-white shelves; cards separate from their Cloud/Mist background with a single 5%-opacity `0 4px 4px` shadow — enough to detach, never enough to float. The heaviest available shadow, `0 16px 40px 4px` at 5% opacity, is reserved for genuinely floating layers (dropdowns, modals). The register flip from black hero to bright shelf is itself the primary elevation cue.

## Imagery
Cinematic, aspirational fitness photography is the load-bearing element. Full-bleed hero shots put a real athlete mid-workout on real Peloton hardware — a runner on the Tread, warm domestic light through a window, the equipment's screen glowing. Product rows use clean, evenly-lit hardware shots on neutral wells (Cloud/Mist), shot at a consistent three-quarter angle so a carousel reads as one set. The photography carries all the color the palette withholds; the UI stays monochrome so the images never compete.

## Layout
Full-bleed above, contained below. The red promo bar and near-black nav span edge-to-edge; the hero is a full-viewport photograph with centered eyebrow → headline → pill stack. Beneath it, content becomes contained horizontal card rows ("Cross Training Series") on cool off-white shelves — each a titled, side-scrolling carousel. Nav pattern: wordmark left, category links (with dropdown carets) centered, account + cart icons right. Vertical rhythm is generous; sections breathe.

## Typography Signature
Two faces, two jobs, zero overlap. Brandon Grotesque is the marketing voice — geometric, rounded, confident — reserved for hero display where "$1,200 off" needs to feel like a headline on a poster. Inter is the operating system: every nav item, button label, form field, and body line. The signature restraint is that the display face never leaks into the UI and the UI face never sets a hero — the two registers stay clean. On dark imagery, white text at 48px/600 in Brandon Grotesque with tight leading gives the headline its cinematic weight; the coral eyebrow above it (18px/500 Inter) is the only color in the frame besides the white pill.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` (light) / `#000000`–`#181A1D` (dark hero) · text: `#181A1D` / `#FFFFFF` on dark · surface: `#F5F7F9` · border: `#E4E6E7` / `#888B93` (inputs) · accent: `#FF5A5A` (coral) · primary action: `#FFFFFF` white pill on dark / `#181A1D` dark button on light · banner: `#DF1C2F` (promo bar only)

## Example Component Prompts
1. **Hero with white pill CTA**: Full-bleed cinematic fitness photo on `#000000`, centered stack: coral `#FF5A5A` eyebrow (Inter 18px/500), white `#FFFFFF` headline (Brandon Grotesque 48px/600, tight leading), then a `#FFFFFF` fully-rounded `128px` pill button with `#181A1D` text reading "Shop deals," padding `8px 12px`.
2. **Promo deal bar**: Full-width strip, background `#DF1C2F`, centered white `#FFFFFF` text (Inter, weight 300) with an underlined inline "Shop now" link. Sits directly above the nav.
3. **Product carousel card**: White `#FFFFFF` card, `3px` radius, shadow `rgba(0,0,0,0.05) 0 4px 4px`, image well on a `#E4E6E7` base, title + copy in `#181A1D` (Inter 16px), arranged in a horizontally-scrolling row on a `#F5F7F9` shelf under a Brandon Grotesque section title.
4. **Dark nav bar**: `#181A1D` bar, white `#FFFFFF` Inter labels, active item tinted coral `#FF5A5A`, wordmark left, category links with dropdown carets centered, circular account + cart icons right.
5. **Floating-label input**: White `#FFFFFF` field, `1px #888B93` border, `2px` radius, padding `14px 12px 0`, `#181A1D` text (Inter 14px), no shadow at rest — paired with a `#181A1D` solid button (`3px` radius, white text, weight 500).

## Similar Brands
- **Nike** — cinematic full-bleed athlete photography with a monochrome UI and a single reserved accent; imagery carries the emotion.
- **Apple (product pages)** — near-black hero cinema flipping to bright off-white product shelves, minimal shadows, whitespace as structure.
- **Lululemon** — clean neutral e-commerce with restrained color, aspirational lifestyle imagery, and quiet type.
- **Equinox** — dark, editorial, aspirational fitness luxury where photography and a stark monochrome palette do the talking.
- **Whoop** — near-black athletic UI with a single coral/red accent used sparingly for signal.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-ink: #181A1D;
  --color-carbon: #222529;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-cloud: #F5F7F9;
  --color-fog: #F7F7F7;
  --color-mist: #E4E6E7;
  --color-slate: #65666A;
  --color-steel: #888B93;
  --color-ash: #A8ACB1;
  --color-red: #DF1C2F;
  --color-coral: #FF5A5A;

  /* Typography — Families */
  --font-display: 'Brandon Grotesque', 'Proxima Nova', Montserrat, ui-sans-serif, sans-serif;
  --font-body: 'Inter', system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* Typography — Scale */
  --text-micro: 10px;
  --text-caption: 12px;
  --text-sm: 13px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-subhead: 18px;
  --text-heading: 26px;
  --text-heading-lg: 32px;
  --text-title: 36px;
  --text-display: 48px;
  --leading-tight: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 80px;

  /* Border Radius */
  --radius-input: 2px;
  --radius-card: 3px;
  --radius-chip: 4px;
  --radius-panel: 6px;
  --radius-panel-lg: 8px;
  --radius-media: 18px;
  --radius-feature: 24px;
  --radius-pill: 128px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-none: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  --shadow-card: rgba(0, 0, 0, 0.05) 0px 4px 4px 0px;
  --shadow-float: rgba(0, 0, 0, 0.05) 0px 16px 40px 4px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-ink: #181A1D;
  --color-carbon: #222529;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-cloud: #F5F7F9;
  --color-fog: #F7F7F7;
  --color-mist: #E4E6E7;
  --color-slate: #65666A;
  --color-steel: #888B93;
  --color-ash: #A8ACB1;
  --color-red: #DF1C2F;
  --color-coral: #FF5A5A;

  /* Typography — Families */
  --font-display: 'Brandon Grotesque', 'Proxima Nova', Montserrat, ui-sans-serif, sans-serif;
  --font-body: 'Inter', system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* Typography — Scale */
  --text-micro: 10px;
  --text-caption: 12px;
  --text-sm: 13px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-subhead: 18px;
  --text-heading: 26px;
  --text-heading-lg: 32px;
  --text-title: 36px;
  --text-display: 48px;
  --leading-tight: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 80px;

  /* Border Radius */
  --radius-input: 2px;
  --radius-card: 3px;
  --radius-chip: 4px;
  --radius-panel: 6px;
  --radius-panel-lg: 8px;
  --radius-media: 18px;
  --radius-feature: 24px;
  --radius-pill: 128px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.05) 0px 4px 4px 0px;
  --shadow-float: rgba(0, 0, 0, 0.05) 0px 16px 40px 4px;
}
```