Spacing
The lab's rhythm. Six steps from 8 px to 32 px built on 0.5 rem increments. Use the tokens — never literal pixel values — so screen-density and accessibility tweaks ripple through the whole UI from one edit. Each row reads its width from var(--space-*) directly, so the bars stay accurate if the scale ever shifts.
Scale
Six tokens, one rhythm
The widget bar's internal gap is --space-md. Card padding is --space-xl. Step-bar gap between progress and header is --space-xs. Don't reach for literals — extend the scale instead.
Cheat sheet
Where each step lands in the wild
| Token | Typical use | Where you'll see it |
|---|---|---|
--space-xs | Inline, tight | Step-bar header gap, completed-pill badge gap |
--space-sm | Compact group | Toggle-group internal gap, range-input thumb gap |
--space-md | Default | Widget-bar inter-control gap, time-control gap |
--space-lg | Loose group | Scale-bar value-pill gap, completion-screen icon→title |
--space-xl | Card gutter | Modal padding, card margins, section breathing room |
--space-2xl | Page gutter | Catalog page padding, landing-screen vertical rhythm |
Density
Hand-sized chrome heights
A few non-token sizes are baked into the system because they're physical-feeling constants — students press them with fingers (eventually on tablet) and they need to feel uniform across handlers. These come from the actual atom + handler CSS, not from --space-*.