Spacing tokens use the --space-* naming pattern and map directly to the foundation spacing scale.
If a token changes in specs/ux/foundations/spacing.md, update the matching token in this file.
Usage
Use spacing tokens for:
paddingmargingaprow-gapcolumn-gap- layout offsets
Token Mapping
| CSS Token | Foundation Token | Value |
|---|---|---|
--space-0 |
0 |
0px |
--space-50 |
50 |
2px |
--space-100 |
100 |
4px |
--space-150 |
150 |
6px |
--space-200 |
200 |
8px |
--space-250 |
250 |
10px |
--space-300 |
300 |
12px |
--space-350 |
350 |
14px |
--space-400 |
400 |
16px |
--space-450 |
450 |
18px |
--space-500 |
500 |
20px |
--space-550 |
550 |
22px |
--space-600 |
600 |
24px |
--space-650 |
650 |
26px |
--space-700 |
700 |
28px |
--space-750 |
750 |
30px |
--space-800 |
800 |
32px |
--space-850 |
850 |
34px |
--space-900 |
900 |
36px |
--space-950 |
950 |
38px |
--space-1000 |
1000 |
40px |
--space-1050 |
1050 |
42px |
--space-1100 |
1100 |
44px |
--space-1150 |
1150 |
46px |
--space-1200 |
1200 |
48px |
Raw Values
Do not use raw spacing values in component styles.
/* Wrong */
.card {
padding: 16px;
gap: 8px;
}
/* Correct */
.card {
padding: var(--space-400);
gap: var(--space-200);
}