TrainerDay Design System

Friendly. Simple. Open. One design language across web, mobile, desktop, and marketing. Visual reference for humans, AI reference for Claude.

*

Shared Tokens

Cross-platform constants: zone colors, DM Sans font, design principles, golden rules.

W

Web App

Vue 3 + Tailwind CSS v4. Light theme. Buttons, cards, inputs, dropdowns, tabs, modals.

Vue 3 Tailwind v4 Light theme
M

Mobile App

React Native + Styled Components. Dark theme only. Workout-optimized touch targets.

React Native Styled Components Dark theme
D

Desktop App

Electron + React. Dark theme. Inline CSSProperties. Canvas charts. ProgressPage-inspired patterns.

Electron React Dark theme
H

Marketing Site

Nuxt 3 + Tailwind. Light theme. Token subset synced from web app. Marketing buttons and cards.

Nuxt 3 Tailwind v4 Light theme