Screenshot of Peloton

Peloton

www.onepeloton.com

a connected-fitness retailer that sells premium hardware with sober confidence, near-black ink (#181A1D) on cool greys, Inter doing everything at a wide weight range, friendly 6px radii and a calm 0.3s ease, letting clean product photography and clear pricing close the deal.

Fitness Connected Fitness flagship

Design tokens

ink
black
white
grey-mid
grey-light
neutral-1
neutral-2
neutral-3
grey
display
Inter
body
Inter
mono
none

Do / Don't

Reference it for

  • Premium product-retail tone built from restraint: cool neutral greys, near-black ink, one typeface, calm motion.
  • A persistent dark top nav that organises a hardware catalogue (categories, deals, account, cart) without clutter.
  • Inter used across the full 300-700 weight range to carry hierarchy without a second family.
  • A consistent friendly radius system (6px workhorse, 28px pills, fully-round tokens) on a tokenised design system (67 custom properties).
  • Product hero on a neutral studio backdrop with a thumbnail configuration rail, the canonical hardware-retail pattern.
  • Surfacing deals, financing and a trial up front, the practical hooks a high-ticket purchase needs.

Do not copy

  • The cool-grey studio palette and the bike photography are Peloton's brand world; pick the client's own neutrals and shoot their own product.
  • The retail-scale stack (commercetools, Stripe, Contentful, Optimizely) is overkill for a local showroom.
  • Inter is open and safe to use, but copying Peloton's exact greys plus Inter plus the studio look risks reading as a clone; differentiate with the client's accent.

Signature moves

single-typeface wide-weight hierarchy

Inter alone runs the whole site across the 300-700 weight range and a 12-48px scale, carrying all hierarchy without a second family.

friendly tokenised radius system on neutral greys

a consistent radius system (6px workhorse, 28px pills, fully-round and 50% circle tokens) built on 67 custom properties softens premium hardware retail on cool neutral greys with near-black ink (#181a1d).

product hero with thumbnail configuration rail

a product hero on a neutral studio backdrop with a thumbnail configuration rail is the canonical hardware-retail pattern, with deals, financing and a trial surfaced up front.