Spacing & layout

One spacing scale, one content column, one radius scale, all tokens.

Spacing scale

--space-1 … --space-8

<div class="grid" style="gap:var(--space-2)">
  <div style="height:var(--space-3);width:var(--space-1);background:var(--accent)"></div>
  <div style="height:var(--space-3);width:var(--space-2);background:var(--accent)"></div>
  <div style="height:var(--space-3);width:var(--space-4);background:var(--accent)"></div>
  <div style="height:var(--space-3);width:var(--space-6);background:var(--accent)"></div>
  <div style="height:var(--space-3);width:var(--space-8);background:var(--accent)"></div>
</div>

Radius scale

--radius-sm

--radius-md

--radius-lg

--radius-pill

The app shell

Every app shares one centered content column: --container = 1200px with --gutter side padding; --container-narrow = 760px for reading.
Header and nav are full-bleed, but their inner content aligns to the same column, the logo and menu never touch the window edge.
The master lockup sits at --logo-height (26px) in every app, one step smaller than the app name.
Radius comes only from the token scale, no ad-hoc radius values.
Motion: 120–260ms token durations, and everything respects prefers-reduced-motion.