Design System
186 prototypes produced a lot of answers. The design system is what happened when those answers were made consistent — the visual language, component patterns, and rules that hold the platform together.
The system wasn't designed first and applied later. It emerged from the exploration. After building dashboard after dashboard, nutrition view after nutrition view, the patterns that kept showing up became the rules. Color usage stabilized. Type hierarchy clarified. Component shapes repeated.
The design system is the distillation of 186 prototypes into a shared language — one that a developer can implement and a designer can extend without either having to explain themselves.
Color
Palette
Three primary roles — action, structure, and accent — with semantic pillar colors for feature areas. Dark enough to be accessible, distinct enough to mean something.
Typography
Type Scale
Poppins for display and headings — weight carries authority. Inter for body — readable at small sizes. JetBrains Mono for code and data values.
| Display | Train5D | Poppins 800 / 2rem+ |
| H1 | Five Pillars of Health | Poppins 700 / 1.5rem |
| H2 | Movement & Recovery | Poppins 700 / 1.1rem |
| Body | The system that holds all five pillars together — built to understand the person using it. | Inter 400 / 0.88rem |
| Small | Last updated 3 days ago | Inter 400 / 0.72rem |
| Label | Movement | Inter 700 / 0.62rem / uppercase |
| Mono | GET /api/workouts/:id | JetBrains Mono / 0.75rem |
Components
Core Patterns
The components that repeat across every pillar. Consistent rules make the platform feel like one thing.
Status Badges
Movement
Fuel
Mind
Connect
Recovery
Overdue
Stat Strip
2,840
Calories burned
6
Day streak
87%
Weekly goal
List Row
Morning Strength Session
Movement
Protein target — 180g
Fuel
Recovery check-in
Recovery
Form Inputs
We'll never share your email.
Enter a valid email address.
Cards
01
Structure
Grid-based layout with consistent spacing tokens applied at every level.
02
Color
A focused palette that communicates hierarchy without decoration.
03
Typography
Two families, each with a clear role. No overlap, no confusion.