Foundations
Spacing
One explicit scale from 0 to 6rem. Layout and component roles choose their steps from it, so changing a layout role never changes control dimensions.
Space scale
The default preset uses the explicit strategy, and density scales it. Bars are drawn at each step’s width.
| Token | Value | Sample |
|---|---|---|
space.none | 0 | |
space.3xs | 0.125rem | |
space.2xs | 0.25rem | |
space.xs | 0.5rem | |
space.sm | 0.75rem | |
space.md | 1rem | |
space.lg | 1.5rem | |
space.xl | 2rem | |
space.2xl | 3rem | |
space.3xl | 4rem | |
space.4xl | 6rem |
Layout vocabulary
Semantic and component roles pick a step deliberately: control.padding.inline.md does not follow layout.gap, so a looser page leaves controls as they are.
| Role | Reads | Value |
|---|---|---|
card.padding | {layout.inset} | 1.5rem |
control.gap | {space.xs} | 0.5rem |
control.padding.inline.lg | {space.md} | 1rem |
control.padding.inline.md | {space.sm} | 0.75rem |
control.padding.inline.sm | {space.xs} | 0.5rem |
layout.gap | {space.md} | 1rem |
layout.inset | {space.lg} | 1.5rem |
navigation.indent | {space.md} | 1rem |
navigation.item.gap | {space.xs} | 0.5rem |
navigation.item.padding.block | {space.xs} | 0.5rem |
navigation.item.padding.inline | {space.sm} | 0.75rem |