ANVIL · Spacing
Preview
Spacing scale preview
4px
8px
12px
16px
20px
24px
32px
48px
64px
Primitive Values
Primitive token names and raw values
| Primitive token | Value | Meaning |
|---|---|---|
| --p-space-0 | 0px | Reset / no gap |
| --p-space-1 | 4px | Tight icon or inline spacing |
| --p-space-2 | 8px | Small internal gaps |
| --p-space-3 | 12px | Compact content spacing |
| --p-space-4 | 16px | Default block spacing |
| --p-space-5 | 20px | Dense card paddings |
| --p-space-6 | 24px | Standard section rhythm |
| --p-space-8 | 32px | Large spacing between groups |
| --p-space-11 | 44px | Minimum touch target |
| --p-space-12 | 48px | Large container paddings |
| --p-space-16 | 64px | Major page spacing |
Semantic Mapping
Semantic spacing tokens
| Semantic token | Mapped value | Resolved value |
|---|---|---|
| Core Scale | ||
| --sp-0 | --p-space-0 | 0px |
| --sp-1 | --p-space-1 | 4px |
| --sp-2 | --p-space-2 | 8px |
| --sp-3 | --p-space-3 | 12px |
| --sp-4 | --p-space-4 | 16px |
| --sp-5 | --p-space-5 | 20px |
| --sp-6 | --p-space-6 | 24px |
| --sp-8 | --p-space-8 | 32px |
| --sp-12 | --p-space-12 | 48px |
| --sp-16 | --p-space-16 | 64px |
| Touch Target | ||
| --sp-touch | --p-space-11 | 44px |