Current margin/padding props
Margin can be set independently for top, right, bottom, left.
| margin |
value |
xxsmall |
6px |
xsmall |
16px |
small |
24px |
medium |
36px |
large |
48px |
xlarge |
64px |
xxlarge |
100px |
Current spacing scale
| Token |
rem |
px |
spacing-00 |
0 |
0 |
spacing-01 |
0.125 |
2 |
spacing-02 |
0.25 |
4 |
spacing-03 |
0.5 |
8 |
spacing-04 |
0.75 |
12 |
spacing-05 |
1 |
16 |
spacing-06 |
1.5 |
24 |
spacing-07 |
2 |
32 |
spacing-08 |
2.5 |
40 |
spacing-09 |
3 |
48 |
spacing-10 |
3.5 |
56 |
spacing-11 |
4 |
64 |
spacing-12 |
5 |
80 |
spacing-13 |
6 |
96 |
spacing-14 |
7 |
112 |
Example:
| Component token |
Core token |
Value |
xxsmall |
spacing-03 |
8px |
xsmall |
spacing-05 |
16px |
small |
spacing-06 |
24px |
medium |
spacing-07 |
32px |
large |
spacing-09 |
48px |
xlarge |
spacing-11 |
64px |
xxlarge |
spacing-14 |
112px |
