--- 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 | Role | Value | Where | |------|-------|-------| | Red | `#df1c2f` with white text | Shop and trial buttons, 2px button edges [Measured] | | Ink | `#181a1d` | Text on light, dark buttons, dark sections [Measured] | | Raised dark | `#222529` | Dark panels and the log in page [Measured] | | Muted text | `#65666a` | Descriptions and prices [Measured] | | Faint text | `#a8acb1`, `#888b93` | Footer, helper text, borders [Measured] | | Hairline | `#e4e6e7` | Dividers, light button fills [Measured] | | Canvas | `#ffffff` | Product sections [Measured] | | Surface | `#f5f7f9` | Pale gray product bands [Measured] | | Notice | `#ffe28c` | A notice bar on the log in page [Measured] | ### Typography Inter is the only face, loaded as a variable font from 100 to 900. [Measured] | Role | Desktop | Mobile | Weight | |------|---------|--------|--------| | App page display | 64 on 83.2 | 34 on 44.2 | 600, -0.2px [Measured] | | Hero headline | 48 on 62.4 | 32 on 41.6 | 600, -0.2px [Measured] | | Section title | 32 on 41.6 | 26 on 33.8 | 600, -0.2px [Measured] | | Card title | 18 on 23.4 | 16 on 20.8 | 500 [Measured] | | Lead | 18 on 27 | 16 on 24 | 400 [Measured] | | Body | 16 on 24 | 16 on 24 | 400 [Measured] | | Button | 16 on 20.8 | same | 500 [Measured] | | Navigation | 16 on 20 | 15 on 16 | 300 [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.