Kitchen counter
Foundations
Color, type, space, shape. The token layer that everything else derives from. Each topic gets its own page so the system can breathe — granular reference, not a single dense scroll.
01
Color
Six oklch ramps × eleven steps. Brand at primary 500. Status families compose into alerts via DEFAULT + subtle + border + ink.
02
Typography
Geist sans for everything that reads, Geist mono for everything that's code. Twelve-step scale with usage guidance per entry.
03
Semantic tokens
The names components reference. Each maps to a primitive step. The reason consistency is structural rather than disciplinary.
04
Space
Tailwind's 4px-based scale. Twelve steps with conventional roles — inline gaps, stack rhythm, section breaks.
05
Shape
Radius scale plus the concentric radius rule — the single biggest source of 'feels off' bugs in nested layouts.
06
Depth
Four shadow levels, rationed. Most surfaces stay flat with a 1px hairline; shadow is reserved for surfaces that actually float.
07
Icon
Lucide via a thin wrapper. A semantic registry maps known intents (status.success → Check) to one icon and one suggested tone — so the system stays one-icon-per-concept across every surface.