The design system the screens are built from: tokens, then primitives, then blocks, then the screens themselves. A component appears here once it is designed. Screens switch to the real build whole, when they go live. Each shows what it is; the reasoning is on why.
Tokens · 2
Colour, type, spacing, radius, duration — light and dark.
Lavender and clay: four roles (ground, ink, ink-2, signal) in light and dusk, each with its contrast against ground, and the type scale read from 1.5, 3 and 10 feet.
Primitives · 0
Buttons, chips, rung buttons, steppers, cards, the progress bar — every state.
Nothing here yet. Add a story to src/design-system/stories.ts.
Blocks · 0
Figure card, test card, rest timer, diff card, radar — built from primitives.
Nothing here yet. Add a story to src/design-system/stories.ts.
Screens · 7
The live screens, each at the states its wireframe numbers, over a real routine.