Foundations
Spacing
A deliberately small scale — 4 / 8 / 16 / 24 — used to create rhythm,
not uniform padding. Few steps keep spacing decisions fast and layouts consistent; the gaps
between elements should vary with meaning, not default to one value everywhere.
The scale
--space-xs 4px --space-sm 8px --space-md 16px --space-lg 24px --space-page 24px How to use it
xs(4px) andsm(8px) for tight, intra-component gaps — icon-to-label, chip padding.md(16px) for the common gap between related elements;lg/page(24px) for section and page gutters.- Vary spacing to express grouping. Equal padding everywhere flattens hierarchy — see the design guardrails.
Every spacing token with its value is on the Spacing & radius tokens page.