Spacing & shape
The values that fix rhythm and geometry: one spacing scale, three radii, the constants of the page shell, and how long a state change takes.
Spacing scale
Padding, margin, and gap all come from this scale. The step name is its multiple of 0.25rem.
| Token | Custom property | Value |
|---|---|---|
space.1 | --space-1 | 0.25rem |
space.2 | --space-2 | 0.5rem |
space.3 | --space-3 | 0.75rem |
space.4 | --space-4 | 1rem |
space.6 | --space-6 | 1.5rem |
space.8 | --space-8 | 2rem |
space.12 | --space-12 | 3rem |
Radius
sm
md
round
| Token | Custom property | Value | Use |
|---|---|---|---|
radius.sm | --radius-sm | 0.5rem | Buttons, inputs, and tags. |
radius.md | --radius-md | 0.875rem | Panels and preview stages. |
radius.round | --radius-round | 999px | Circular indicators only. |
Layout constants
Four values fix the page shell. Everything else is spacing.
| Token | Custom property | Value | Use |
|---|---|---|---|
size.content | --size-content | 76rem | Maximum width of the page shell. |
size.sidebar | --size-sidebar | 15rem | Width of the page navigation. |
size.header | --size-header | 4rem | Height of the app bar. |
size.line | --size-line | 1px | Every rule and border. |
Motion
Motion confirms a state change. Under prefers-reduced-motion: reduce every transition collapses, and nothing depends on animation to become readable.
| Token | Custom property | Value | Use |
|---|---|---|---|
motion.fast | --motion-fast | 160ms | Hover and focus response. |