Tonal
tonal.com/a connected-fitness hardware brand selling a wall-mounted smart gym, a clean editorial system in near-black on warm bone, GT America plus a GT Expanded display cut, one electric teal accent, and Tailwind-driven cubic-bezier(0.4,0,0.2,1) transitions that keep a Vue app feeling like a premium product site.
Design tokens
- display
- GT Expanded
- body
- GT America
- mono
- none
Do / Don't
Reference it for
- A premium warm-neutral system: near-black (#1C1C1A) on warm bone (#F6F6F1) and grey (#F4F4F4), with one electric teal (#11DDC4) as the only accent.
- An expanded grotesque display cut (GT Expanded) over a clean grotesque body (GT America) to signal engineering and premium craft.
- Calm, product-grade motion: Tailwind's cubic-bezier(0.4,0,0.2,1) transitions at 0.3-0.5s, plus app-style eased slide/drawer keyframes.
- Selling a serious, expensive product through editorial restraint, large portraits, generous space, social and press proof, not hype.
- A clean Vue + Tailwind reference for a hardware/product brand that needs an embedded app feel.
Do not copy
- GT America and GT Expanded are licensed Grilli Type faces; map to a grotesque + an expanded/extended display cut.
- The teal (#11DDC4) is Tonal's brand spark; remap the single accent to the client's colour.
- The embedded product-UI keyframes (drawer, hub widget) belong to Tonal's app; do not import that machinery into a marketing site.
Signature moves
warm-neutral plus one electric accent
a premium warm-neutral system runs near-black (#1c1c1a) on warm bone (#f6f6f1) and grey (#f4f4f4) with one electric teal (#11ddc4) as the only accent.
expanded-display over clean-grotesque body
an expanded grotesque display cut (GT Expanded) sits over a clean grotesque body (GT America) to signal engineering and premium craft, across a 10-48px scale.
product-grade calm motion
Tailwind cubic-bezier(0.4,0,0.2,1) transitions at 0.3-0.5s plus app-style eased slide/drawer keyframes keep a Vue app feeling like a premium product site.
Related references
Gymbox
strongFitness
a London boutique gym that shouts, near-black backgrounds, one electric yellow accent, a custom condensed display face set in enormous all-caps ("ANYTHING GOES", "GOT QUESTIONS?"), gritty workout photography and Lenis-smoothed Swiper carousels.
Heyday Skincare
strongBeauty
a facial-membership skincare chain that feels friendly and trustworthy, deep navy ink on warm cream, soft powder-blue and butter-yellow accent panels, the Sunset Gothic grotesque, close-up facial photography and lots of proof (press logos, big stats, reviews).
Barrys
flagshipFitness
the original HIIT studio brand selling "the best workout in the world", a dark, cinematic Webflow site built on near-black and the Red Room red, condensed athletic display type, a hand-painted script signature, and a booking-first hero that puts "find a studio" above everything.
Corepower Yoga
strongFitness
a yoga studio chain whose site runs entirely on the class timetable, Book / Studio Schedule / On Demand sit at the front of the nav, in a warm sunset-orange-and-cream palette with friendly Poppins, so finding and booking a class is the whole experience.