Shared Design Tokens

Friendly, Not Corporate

Rounded corners, pill buttons, generous whitespace. TrainerDay feels like a helpful training buddy, not enterprise software.

Simple and Open

One font (DM Sans). One primary color (blue). One zone palette (Zwift). Consistency breeds familiarity.

Readable While Suffering

Workout screens are designed for athletes mid-effort — sweating, eyes blurred, hands shaking. Large numbers, high contrast, minimal info.

One System, Two Themes

Web and marketing use light theme. Mobile and desktop use dark theme. Same tokens, same language, different surfaces.

Always

• Use DM Sans — it's the only font
• Use Zwift zone colors from @trainerday/cycling-converter
• Use blue (#2563eb) as the primary action color
• One primary blue button per screen
• Pill-shaped buttons (web/mobile), rounded-rect buttons (desktop)
• Rounded corners everywhere — nothing sharp or corporate
• Generous whitespace — breathing room, not cramped
• Large workout numbers readable from 1 meter
• Minimum 56px touch targets on mobile

Never

• Use red for primary actions or branding — red is danger only
• Use Inter, Roboto, Arial, or system fonts
• Make sharp/corporate corners
• Use subtle color differences in workout screens
• Show more than 3–4 data points during workouts
• Make touch targets smaller than 56px on mobile
• Invent new zone color schemes
• Add new fonts without explicit approval