--- version: alpha name: Peloton description: Near-black connected-fitness canvas with Peloton Red as the single performance accent — Inter at variable weights, pill-shaped CTAs, and a restrained dark-first hierarchy that puts workout energy into photography, not chrome. colors: # Canvas background: "#ffffff" # light reading canvas for ink body-text pair (shop/product); dark canvas is surface-dark surface-dark: "#181a1d" # was background: "#181a1d" — dark marketing canvas surface: "#1f2124" # Light-mode surfaces (product/shop pages) surface-light: "#ffffff" surface-off-white: "#f5f7f9" # Ink ink: "#181a1d" ink-inverted: "#ffffff" on-background: "#ffffff" on-surface: "#e4e6e7" # Text scale text-secondary: "#65666a" text-tertiary: "#a8acb1" text-disabled: "#65666a" # Brand accent — performance red primary: "#df1c2f" primary-hover: "#c21829" # darkened ~10% for hover on-primary: "#ffffff" primary-container: "#3d0509" # deep red tint for badge backgrounds # Interactive / focus focus-ring: "#84b6e1" # was rgba(132,182,225,1) — blue focus ring on inputs # Borders border: "#888b93" border-subtle: "#e4e6e7" border-dark: "#181a1d" # Shadow base shadow-soft: "#000000" # was rgba(0,0,0,0.05) — flattened for hex; see elevation table # Semantic error: "#df1c2f" success: "#38a169" # Neutral mid-tones gray-mid: "#65666a" gray-light: "#a8acb1" gray-lighter: "#e4e6e7" typography: display-hero: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.2px display: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 44px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.2px heading-section: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 36px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.2px heading-sub: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 26px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.2px heading-card: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0px body-large: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.4px body-medium: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0px button-ui: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px nav-link: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.25 letterSpacing: 0px caption: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.35px label: fontFamily: "Inter, system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0.3px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 80px 5xl: 104px rounded: none: 0px sm: 4px md: 8px lg: 12px xl: 24px pill: 9999px components: # Primary CTA — Peloton Red pill button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 0px 22px minHeight: 48px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-primary-focus: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" outline: "2px solid {colors.focus-ring}" # Secondary CTA — dark outline pill button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 22px 24px border: "2px solid {colors.ink}" button-secondary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.ink-inverted}" button-secondary-on-dark: backgroundColor: "transparent" textColor: "{colors.on-background}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 22px 24px border: "2px solid {colors.on-background}" # Ghost — dark-background transparent button-ghost: backgroundColor: "{colors.gray-mid}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 0px opacity: "0.6" # Consent/utility — dark filled pill (small) button-utility: backgroundColor: "{colors.ink}" textColor: "{colors.on-background}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 18px 24px # Card — dark canvas card: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px card-light: backgroundColor: "{colors.surface-light}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xl}" padding: 24px # Input input: backgroundColor: "{colors.surface-light}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 14px 12px border: "1px solid {colors.border}" input-focus: backgroundColor: "{colors.surface-light}" textColor: "{colors.ink}" border: "1px solid {colors.border-subtle}" outline: "2px solid {colors.focus-ring}" input-error: backgroundColor: "{colors.surface-light}" textColor: "{colors.ink}" border: "2px solid {colors.error}" # Navigation bar nav-bar: backgroundColor: "{colors.surface-dark}" # dark marketing nav; was colors.background before canvas token swap textColor: "{colors.on-background}" typography: "{typography.nav-link}" padding: 0px 24px # Banner — promotional strip banner-promo: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label}" padding: 8px 16px # Badge badge-promo: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.label}" rounded: "{rounded.sm}" padding: 4px 8px # Step indicator (numbered how-it-works row) step-item: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 32px 0px border: "1px solid {colors.border}" --- # Peloton Design System ## Overview Peloton's visual language is built on a near-black canvas (`{colors.background}`) that reads like a blacked-out studio before the lights come up — dramatic, purposeful, and focused on what matters: the athlete and the class. Every UI decision is in service of that cinematic promise. The deep ink foundation (`#181a1d`, fractionally warmer than pure black) absorbs ambient noise and lets full-bleed fitness photography carry the emotional voltage of every hero section. When Peloton Red (`{colors.primary}`) fires, it fires loud: primary CTAs, urgency moments, and promotional banners are the only places the brand accent breaks the monochrome shell, making each appearance feel like a starting gun. Typography leans entirely on Inter — not a bespoke custom face, but deployed with enough weight discipline to feel premium. The display layer uses weight 600 at tightly tracked sizes (−0.2px at 36–48px) for headlines that read like performance metrics on a training dashboard. Below the fold, weight 300 nav links and weight 400 body copy give sections air and pace. The low-weight register for navigation is distinctive: where most fitness brands shout, Peloton whispers in the header, letting the hero visuals do the intimidating. This weight range — from 300 to 600 within a single family — creates a tension that reads as confident restraint rather than plain minimalism. Pills dominate the interactive layer. Buttons at 28px radius (effectively `{rounded.pill}`) signal a connected-device design language: the aesthetic of the touchscreen mounted to the bike. Cards use gentler `{rounded.lg}` (12px) corners for content modules, creating a clear visual tier between tappable actions and browsable content. The spacing cadence is 8px-grid with generous section breaks at 80–104px, matching the rhythmic breathing of a high-effort workout: intense focus followed by recovery. **Key Characteristics:** - Near-black canvas (`{colors.background}`) that functions as a dark studio — all brand energy flows through imagery - Single accent color: Peloton Red (`{colors.primary}`) reserved exclusively for primary CTAs and urgent moments - Inter at three weight tiers (300 nav / 400 body / 600 display) creating performance-dashboard hierarchy - Tight negative letter-spacing at display sizes (−0.2px) for a precision-instrument feel - Pill-shaped CTAs (`{rounded.pill}`) referencing the connected-device / touchscreen aesthetic - Skeleton loading animation — shimmer gradient (`{colors.gray-light}` → `{colors.surface-off-white}` → `{colors.gray-light}`) across card placeholders - Minimal drop shadow; a single diffuse `rgba(0,0,0,0.05)` cloud for floating cards - 8px base grid with aggressive vertical section spacing (`{spacing.4xl}`–`{spacing.5xl}`) - Fade-in motion (0.3s ease-in) for media loads; transitions at 0.15s ease-in-out for interactive elements - Dual-mode layout: dark default canvas for marketing/discovery, light surfaces for product/checkout contexts ## Colors ### Primary - **Near-Black** (`{colors.background}`): The foundational canvas across marketing pages — not pure black, with a warm undertone that prevents harshness - **White** (`{colors.on-background}`): Text and icons on the dark canvas; surface backgrounds in checkout/shop contexts ### Brand Accent - **Peloton Red** (`{colors.primary}`): The brand's only chromatic accent — primary buttons, promotional banners, error states, and brand moments. Applied sparingly so each appearance carries urgency weight - **Red Hover** (`{colors.primary-hover}`): Darkened 10% for button hover, maintaining contrast on dark and light surfaces ### Text Scale - **Primary Text (dark)** (`{colors.ink}`): Headings and body on light surfaces - **Secondary** (`{colors.text-secondary}`): Supporting copy, metadata, timestamps, placeholder text on light backgrounds - **Tertiary** (`{colors.text-tertiary}`): Legal copy, attribution, quiet labels - **On Dark** (`{colors.on-background}`): Primary text and icon color on the near-black canvas ### Borders & Surfaces - **Border** (`{colors.border}`): Standard input and card borders on light backgrounds - **Border Subtle** (`{colors.border-subtle}`): Divider lines, section separators - **Surface Light** (`{colors.surface-light}`): Card and input backgrounds in shop/product contexts - **Off-White** (`{colors.surface-off-white}`): Slightly warm canvas for lighter marketing sections ### Focus & Semantic - **Focus Ring** (`{colors.focus-ring}`): Sky-blue focus outline (2px) on inputs and interactive elements — accessible contrast against both dark and light backgrounds - **Success** (`{colors.success}`): Confirmation states, availability indicators - **Error** (`{colors.error}`): Input validation errors (shares the brand red; contextually distinct) ## Typography ### Font Family - **Primary**: Inter, with fallbacks: `system-ui`, `-apple-system`, `sans-serif` - Self-hosted via Adobe Fonts (detected); no Google Fonts CDN dependency - No custom or variable font axes detected — weight is static across 300/400/500/600 ### Hierarchy The complete type scale is declared in the `typography:` token block above. Reference roles via token paths. | Token | Use | |---|---| | `display-hero` | Largest hero headlines (48px/600) | | `display` | Secondary hero callouts (44px/600) | | `heading-section` | Section titles on marketing pages (36px/600) | | `heading-sub` | Sub-section headings, modal titles (26px/600) | | `heading-card` | Card headings, product names (20px/500) | | `body-large` | Feature copy, lead paragraphs (18px/400) | | `body` | Standard body and descriptions (16px/400) | | `body-medium` | Emphasized body, list items (16px/500) | | `button-ui` | All CTA button labels (16px/500) | | `nav-link` | Navigation link labels (16px/300) | | `caption` | Price labels, metadata, timestamps (14px/400) | | `label` | Tags, legal text, small annotations (12px/400) | ### Principles - Weight 600 is used only for display and heading levels — never for buttons or body copy - Weight 300 nav links are a signature move: lightweight header against heavyweight hero imagery creates productive visual tension - Negative letter-spacing (−0.2px) at display sizes signals precision-instrument aesthetics borrowed from fitness hardware - Line-height 1.3 dominates heading levels; body text opens to 1.5 for comfortable reading within long copy sections - No font-variant-numeric or OpenType feature settings detected; Inter's default numeric rendering carries the load ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit is 8px; the scale extends to `{spacing.5xl}` (104px) for section-level breathing room. Peloton's spacing is deliberately cinematic — short gaps within content blocks, then generous exhales between sections. This rhythm mirrors the interval structure of a workout: dense effort followed by recovery. ### Grid & Container - Max content width: 1366–1920px (responsive to breakpoints) - Standard comfortable reading width: ~1280px with lateral padding - Product/shop grid: 2–4 columns depending on context - Hero sections: full-bleed at all breakpoints - Horizontal section padding: `{spacing.4xl}` (80px) desktop, `{spacing.lg}` (24px) mobile ### Whitespace Philosophy - Dense content blocks (tight internal gaps, 8–16px) contrast with generous inter-section spacing (80–104px) - The breathing room is earned — sections end on a clear visual beat before the next content module begins - Card grids use 16–24px gutters, generous enough to separate but tight enough to feel structured ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, no border | Default state for content on dark canvas | | Subtle (Level 1) | `rgba(0,0,0,0.05) 0px 16px 40px 4px` | Floating cards and modals on light backgrounds | | Dark divider | `0 -1px 0 {colors.border-dark} inset` | Bottom-edge on nav rows and accordion items | | Neutral divider | `1px solid {colors.border-subtle}` | Section separators on light surfaces | | Focus Ring | `0 0 0 2px {colors.focus-ring}` | Keyboard accessibility on inputs and buttons | **Shadow Philosophy**: Peloton's dark canvas almost entirely eliminates the need for shadow — dark backgrounds erase depth cues by default. On the few light-mode surfaces (shop, checkout), a single diffuse cloud shadow (`rgba(0,0,0,0.05)` at 40px blur) floats cards above the background. The choice is deliberate: a premium fitness brand shouldn't need UI tricks to signal quality. The photography does that work. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Hero imagery, full-bleed video, divider lines | | `sm` | 4px | Modal bottom bar, thumbnail images | | `md` | 8px | Utility containers, form fields | | `lg` | 12px | Content cards, media modules | | `xl` | 24px | Feature callout cards | | `pill` | 9999px | All CTA buttons, navigation chip variants, icon arrows | The system makes a sharp distinction between content containers (lg/xl corners, structured) and interactive elements (pill, dynamic). Product images use 6px radius for a slightly softened feel that prevents them from reading as flat thumbnails. The 28px button radius is effectively pill at standard button heights, consistent with the connected-device screen language. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them. ### Button Variants - **`button-primary`** — Peloton Red pill CTA. The brand's most assertive element. Used for top-funnel actions like "Shop now" and "Discover all classes". 0.3s ease transition on background-color. - **`button-secondary`** — Dark outline pill on light surfaces, 2px border. Transitions to solid dark fill on hover. - **`button-secondary-on-dark`** — White outline pill on the dark canvas. Peer to primary but without the red urgency. - **`button-ghost`** — Circular carousel-control buttons; semi-transparent neutral fill. - **`button-utility`** — Small filled pills for consent dialogs and contextual actions. ### Cards - **`card`** — Dark surface cards for marketing modules, featuring `{colors.surface}` fill and `{rounded.lg}` corners. - **`card-light`** — White cards on light-mode pages (shop, checkout), `{rounded.xl}` for a slightly softer appearance. ### Inputs - **`input`** — White background, 1px `{colors.border}` stroke, 2px radius. Focus state triggers sky-blue `{colors.focus-ring}` outline. Error state replaces border with 2px Peloton Red. ### Navigation - **`nav-bar`** — Full-width dark bar, weight-300 links that sit quietly behind hero imagery. Sticky on scroll. ### Promotional Banner - **`banner-promo`** — Full-width Peloton Red strip at page top for sales and offers. White label-size text centered. ### Badges - **`badge-promo`** — Dark red tint background with Peloton Red text; used for "Sale" and limited-time callouts. ### Step Indicators - **`step-item`** — Accordion-style numbered how-it-works rows with bottom border dividers. Weight 300 body text with an icon arrow. ## Do's and Don'ts ### Do - Use Peloton Red (`{colors.primary}`) only for primary CTAs and brand urgency moments — scarcity is the source of its power - Keep the primary canvas dark (`{colors.background}`) for marketing, discovery, and hero contexts - Use Inter weight 300 for navigation — the quiet header is a signature brand move, not an accident - Apply negative letter-spacing (−0.2px) at `{typography.display-hero}` and `{typography.heading-section}` sizes - Maintain pill shape (`{rounded.pill}`) for all interactive CTA buttons; switch to `{rounded.lg}` for content containers - Let full-bleed photography carry all emotional weight — the UI should not compete - Use the 8px base grid and extend to `{spacing.4xl}`–`{spacing.5xl}` for section breaks - Apply the subtle diffuse shadow (`rgba(0,0,0,0.05) 0 16px 40px 4px`) for floating cards on light surfaces only - Use the blue `{colors.focus-ring}` as the sole focus indicator — do not use red for accessibility focus ### Don't - Don't use Peloton Red for decorative purposes, icon fills, or section backgrounds — it loses urgency through overuse - Don't use font weight 700 or 800 — Peloton's weight ceiling is 600; bolder weights break the precision-instrument register - Don't apply positive letter-spacing to display text — the −0.2px negative tracking is load-bearing at large sizes - Don't add card shadows on the dark canvas — elevation is invisible against near-black backgrounds - Don't use mid-range border-radius (16–20px) — the system is `{rounded.lg}` (12px) for content or `{rounded.pill}` for actions; in-between values create visual inconsistency - Don't introduce secondary accent colors — the red/dark binary is intentional; adding blue or orange dilutes the brand signal - Don't use the light surface (`{colors.surface-light}`) on dark-canvas marketing pages — the two modes are separate contexts - Don't mix weight 600 into body copy to add emphasis — use weight 500 (`{typography.body-medium}`) for that purpose --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <375px | Single column, minimal padding, hero text scales to ~28px | | Mobile | 375–580px | Single column, 16px horizontal padding, nav collapses to hamburger | | Mobile Large | 580–768px | Two-column product grids begin | | Tablet | 768–1024px | Expanded nav, 24px padding, hero text at 36px | | Desktop | 1024–1280px | Full horizontal nav, 3-column grids, 48px padding | | Large Desktop | 1280–1920px | Max-width container centered, 80px horizontal padding, hero at 48px | ### Touch Targets - All interactive elements meet 44×44px minimum - Pill buttons have natural height of 48px+ at standard padding - Carousel arrow buttons use circular ghost style at 48px diameter ### Collapsing Strategy - **Navigation**: Full horizontal → hamburger below 1024px; search and cart icons persist - **Hero sections**: Display text scales from 48px → 36px → 28px; photography remains full-bleed at all sizes - **Product grids**: 4-col → 3-col → 2-col → 1-col as viewport narrows - **Section padding**: 80px → 48px → 24px → 16px across breakpoints - **Step rows**: Vertical accordion on mobile, horizontal row on desktop ### Image Behavior - Full-bleed hero images at all breakpoints; crop shifts between 16:9 (desktop) and 4:5 (mobile) - Lazy-loading with shimmer skeleton placeholder (linear-gradient animation at 10s) - Video loops (product demos) play inline on desktop; thumbnail + tap-to-play on mobile --- ## Agent Prompt Guide ### Quick Color Reference - Background (dark): `{colors.background}` (#181a1d) - Background (light): `{colors.surface-light}` (#ffffff) - Primary text on dark: `{colors.on-background}` (#ffffff) - Primary text on light: `{colors.ink}` (#181a1d) - Secondary text: `{colors.text-secondary}` (#65666a) - Brand CTA: `{colors.primary}` (#df1c2f) - Border: `{colors.border}` (#888b93) - Focus: `{colors.focus-ring}` (#84b6e1) ### Example Component Prompts - "Build a Peloton-style hero section with a near-black (#181a1d) full-bleed background, white Inter 600 48px headline with −0.2px letter-spacing, a sub-headline at 18px/400, and a Peloton Red (#df1c2f) pill CTA (border-radius: 9999px; padding: 0 22px; min-height: 48px) with white 16px/500 label" - "Create a dark-canvas product card with #1f2124 background, 12px border-radius, 24px padding, a full-bleed top image (12px top-corner radius), a 20px/500 card title in white, a 14px/400 caption in #a8acb1, and a transparent white-outline pill button (2px border, 9999px radius)" - "Design a Peloton navigation bar with #181a1d background, white Inter 300 16px links at 0px letter-spacing, a left-aligned Peloton wordmark, and right-aligned cart and account icons — sticky on scroll, no shadow" - "Build a numbered step row in the Peloton how-it-works style: full-width transparent background, 1px bottom border in #888b93, 32px vertical padding, an icon on the left, a 20px/500 bold step title, 16px/300 body description, and a right-aligned arrow icon — all in near-black ink (#181a1d) on white" - "Generate a Peloton promotional banner strip: full-width #df1c2f background, white Inter 400 12px centered label text, 0.3px letter-spacing, 8px vertical padding — used for sale messaging at the top of the page" ### Iteration Guide 1. Start with the dark canvas: `{colors.background}` (#181a1d) is the foundational surface for all marketing contexts 2. Reserve `{colors.primary}` for a single primary CTA per view — never decorate with it 3. Use Inter weight 600 for headlines, 300 for nav, 400–500 for everything else; never exceed 600 4. Apply −0.2px letter-spacing at heading and display sizes; let body copy track at 0px–0.4px 5. Buttons are always pills (`{rounded.pill}`); content containers use `{rounded.lg}` (12px) max 6. Shadow only on light-mode surfaces — the dark canvas makes shadows invisible and redundant 7. Photography is the emotional content; keep all chrome quiet, dark, and out of its way --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Peloton. Brand names and trademarks belong to their respective owners.