Peloton
www.onepeloton.coma 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.
Design tokens
- 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.
Related references
Gumroad
strongMarketing Platform
The reference for playful creator-platform branding — chunky black filled CTAs, cream background, hand-drawn pink coin illustrations, ABC Favorit at 96px.
Allbirds
strongRetail
a natural-materials footwear brand whose store leads with a full-bleed lifestyle hero, a warm sand-and-oat palette over charcoal text, the Geograph sans paired with a Self Modern serif and Akkurat Mono, and a Tailwind-powered Shopify build that turns sustainability into a calm, premium retail feel.
Alternative Aesthetics
nicheDesign Portfolio
The reference for solo illustrator portfolios on Webflow — hand-drawn "Stay Strange" hero typography, monochrome black/white canvas, and a 4-column thumbnail grid that lets the artwork carry the entire visual voice.
Bellroy
flagshipRetail
an accessories e-commerce site that fronts a deep catalogue with one bold, punchy hero, leading with heavy uppercase GTUltra type, a warm terracotta accent on a near-monochrome base, and a calm Material-style motion system that keeps a 40-section shop feeling composed.