Space
Space
Full documentation: https://webawesome.com/docs/tokens/space
Design Tokens 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 |
|---|---|
| `–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 |