Health & Wellness / iOS / Android / Web

Peloton

Peloton frames its photography in near-black and cool white and spends a single red on the moment you buy or start a trial.

Download
  • #DF1C2F
  • #181A1D
  • #222529
  • #65666A
  • #F5F7F9
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#DF1C2F
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF
  • surface#F5F7F9

Text

  • ink#181A1D
  • ink muted#65666A
  • ink faint#A8ACB1
  • on night#FFFFFF
  • on night muted#E4E6E7

Lines

  • hairline#E4E6E7

More

  • gray mid#888B93
  • night#181A1D
  • night raised#222529
  • notice#FFE28C

Typography

Each style is set with the file's own family, size, weight and spacing.

  • InterOpen font, shown as published.
  • display64px / 600 / 83.2px

    Peloton

  • headline48px / 600 / 62.4px

    Peloton

  • title32px / 600 / 41.6px

    Peloton

  • subtitle18px / 500 / 23.4px

    The quick brown fox jumps over the lazy dog

  • lead18px / 400 / 27px

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button16px / 500 / 20.8px

    Continue to checkout

  • nav16px / 300 / 20px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl24px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg22px
  • xl24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button dark
    button-dark
  • button light
    button-light
  • button outline
    button-outline
  • night section
    night-section
  • surface card
    surface-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 126 lines
version: alpha
name: Peloton-design-analysis
description: "A connected fitness brand on near-black and cool white: Inter throughout, large semibold headlines, one red (#df1c2f) for every buy and trial action, rounded 48 high buttons with a 2px edge, and dark photo-led sections."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#df1c2f"
  on-primary: "#ffffff"
  ink: "#181a1d"
  ink-muted: "#65666a"
  ink-faint: "#a8acb1"
  gray-mid: "#888b93"
  hairline: "#e4e6e7"
  canvas: "#ffffff"
  surface: "#f5f7f9"
  night: "#181a1d"
  night-raised: "#222529"
  on-night: "#ffffff"
  on-night-muted: "#e4e6e7"
  notice: "#ffe28c"

typography:
  display:
    fontFamily: "Inter, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 83.2px
    letterSpacing: -0.2px
  headline:
    fontFamily: "Inter, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 62.4px
    letterSpacing: -0.2px
  title:
    fontFamily: "Inter, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 41.6px
    letterSpacing: -0.2px
  subtitle:
    fontFamily: "Inter, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 23.4px
  lead:
    fontFamily: "Inter, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 20.8px
  nav:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 20px

rounded:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 24px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 22px
  xl: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    height: 48px
    padding: 0 22px
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-night}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    height: 48px
    padding: 0 22px
  button-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    height: 48px
    padding: 0 22px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    height: 56px
    padding: 0 22px
  night-section:
    backgroundColor: "{colors.night}"
    textColor: "{colors.on-night}"
    typography: "{typography.headline}"
    padding: 24px
  surface-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 24px

Overview

Peloton sells connected bikes, treadmills and rowers, and an app of live and on-demand classes. Its public site alternates near-black photo sections with cool white and pale gray product sections, all in Inter, with one red that appears only where you can buy or start a trial. [Observed]

What defines the look:

  1. One red for buying. #df1c2f fills "Shop now", "Shop Bike" and "Try 30 days free", with a matching 2px edge. No other element is red. [Measured]
  2. Near-black and cool white. Dark sections are #181a1d and #222529. Light sections are #ffffff and #f5f7f9, with #e4e6e7 hairlines. [Measured]
  3. Inter, semibold and roomy. Headlines are Inter 600 with -0.2px tracking and a generous 1.3 line height (64 on 83.2, 48 on 62.4). Navigation is set light, at weight 300. [Measured]
  4. Rounded buttons with an edge. Buttons are 48 high with a 24px corner and a 2px border in their own color, or 56 high with 28 for outlined ones. [Measured]
  5. Photo-led sections. Product and class photography fills hero bands with white type on top. [Observed]

Source for this file: the home page, the app page, the Bike product page and the members log in page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Peloton does not publish a design system. Classes and the member dashboard sit behind an account and were not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Red#df1c2f with white textShop and trial buttons, 2px button edges [Measured]
Ink#181a1dText on light, dark buttons, dark sections [Measured]
Raised dark#222529Dark panels and the log in page [Measured]
Muted text#65666aDescriptions and prices [Measured]
Faint text#a8acb1, #888b93Footer, helper text, borders [Measured]
Hairline#e4e6e7Dividers, light button fills [Measured]
Canvas#ffffffProduct sections [Measured]
Surface#f5f7f9Pale gray product bands [Measured]
Notice#ffe28cA notice bar on the log in page [Measured]

Typography

Inter is the only face, loaded as a variable font from 100 to 900. [Measured]

RoleDesktopMobileWeight
App page display64 on 83.234 on 44.2600, -0.2px [Measured]
Hero headline48 on 62.432 on 41.6600, -0.2px [Measured]
Section title32 on 41.626 on 33.8600, -0.2px [Measured]
Card title18 on 23.416 on 20.8500 [Measured]
Lead18 on 2716 on 24400 [Measured]
Body16 on 2416 on 24400 [Measured]
Button16 on 20.8same500 [Measured]
Navigation16 on 2015 on 16300 [Measured]

Shape and spacing

Buttons use 24 at 48 high and 28 at 56 high, so they read as pills. Smaller corners are common: 6 (the most frequent), 4, 8, 10 and 12 for cards, tiles and inputs, and filter chips are full pills. [Measured] Buttons carry 22px side padding. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light and dark sections are fixed by the page. Requesting the dark color scheme changed nothing. [Measured]

Platform: iOS

How the Peloton iOS app looks and behaves was not captured. Peloton does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for home, classes, schedule and the profile is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Starting a class. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the near-black surfaces, the red and Inter with the web. [Inferred]

Platform: Android

How the Peloton Android app looks and behaves was not captured. Peloton does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for home, classes, schedule and the profile is expected. [Inferred]

Main action

Expected on Android: Floating action button.

Starting a class. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the near-black surfaces, the red and Inter with the web. [Inferred]

Platform: Web

The home page, app page, Bike page and the log in page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

Desktop: a white top bar, 72 high, of product menus (Bikes, Treads, Row, Apps, Accessories) at 16 and an Apparel link at weight 300. Mobile: the menus collapse, and product pages add a sticky row of section links. [Measured]

Main action

Expected on Web: Page-level button.

A red #df1c2f button with white 16px medium text, 48 high with a 24px corner and a 2px edge (40 high with 20 in the mobile header). [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

A black scrim at 75 percent sits behind overlays. [Measured] Toasts were not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Class filters on the app page are 40 high full pills on a gray at 50 percent. Product feature tiles are 70 high with a 10px corner on a translucent gray. The log in fields are 56 high with a 5px corner on white at 10 percent over #222529. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 40 to 56 high and filter pills 40. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The members log in page offers Google and Apple as white 56 high pills next to email. [Measured]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A conventional responsive marketing site: navigation collapses, type steps down and the button shapes stay the same. [Measured]

Cross-platform consistency

Consistent across platforms: near-black surfaces, the red buy action and Inter. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Keep red for buying and starting a trial.
  • Alternate near-black photo sections with cool white and pale gray ones.
  • Set headlines in Inter 600 with a roomy 1.3 line height.
  • Give buttons a 2px edge in their own color.

Don't

  • Don't use red for alerts or decoration.
  • Don't use pure black. Use #181a1d.
  • Don't use square buttons.

Known Gaps

  • Classes, the schedule and the member dashboard sit behind an account and were not measured.
  • The iOS and Android apps were not captured, and Peloton publishes no design system, so every mobile topic is inferred.
  • Icons, motion and toasts were not measured.
  • The members log in page rendered in full only in one of three passes, so its values come from a single view.
  • A cookie banner covers the first view. It belongs to a consent vendor and was left out.
  • Account deletion and store policy rules were not verified.