Space
Space tokens create predictable rhythm and meaningful proximity. They use rem units so that spacing scales proportionately with the root font size.
Use --wa-space-scale to increase or decrease all spacing at once.
| Custom Property | Description | Preview |
|---|---|---|
--wa-space-scale |
Global multiplier applied to all space tokens | — |
--wa-space-3xs |
Smallest space, for hairline gaps and nudges | |
--wa-space-2xs |
Near-smallest space, for text or icon gaps | |
--wa-space-xs |
Extra-small space, for closely related elements | |
--wa-space-s |
Small space, for inner padding in small components | |
--wa-space-m |
Base space, the most common padding and gap size | |
--wa-space-l |
Large space, for inner padding in larger components | |
--wa-space-xl |
Extra-large space, for padding between or around groups | |
--wa-space-2xl |
2× extra-large space | |
--wa-space-3xl |
3× extra-large space | |
--wa-space-4xl |
4× extra-large space | |
--wa-space-5xl |
Largest space, for ultra-breathable spacing | |
--wa-content-spacing |
Semantic alias for the default spacing between top-level blocks |
