docs menu
space, radii, layers
A 4 px spacing scale, three radii, 1 px lines, and one control height, 44 px, so every target is easy to hit and terminal-style controls line up with app controls.
spacing
| token | value | sample |
|---|---|---|
--sp-1 | 4px | |
--sp-2 | 8px | |
--sp-3 | 12px | |
--sp-4 | 16px | |
--sp-5 | 24px | |
--sp-6 | 32px | |
--sp-7 | 48px | |
--sp-8 | 64px |
radii
--r-s 2px
--r-m 4px
--r-l 8px
2 px for chips and code, 4 px for controls, 8 px for cards and sheets. Avatars are rounded squares, not circles.
controls
A field, a prompt and a button share one height (--control-height, 44 px), one 1 px input border, one radius and one focus ring (B10). Disabled controls use --disabled-opacity (0.5) and always say why.
layers
| token | value | used by |
|---|---|---|
--z-stage | 0 | page content |
--z-chrome | 10 | sticky header |
--z-dock | 20 | menus and drawers |
--z-sheet | 30 | modals |
--z-toast | 40 | toasts, above sheets |
--z-skip | 100 | the skip link, above everything |