Unit
The base unit size is 8px (0.5rem).
Semantic spacing
| name | unit | rem | px |
|---|---|---|---|
xsmall | 0.5 | 0.25rem | 4px |
small | 1 | 0.5rem | 8px |
medium | 2 | 1rem | 16px |
large | 3 | 1.5rem | 24px |
xlarge | 5 | 2.5rem | 40px |
xxlarge | 8 | 4rem | 64px |
How is semantic spacing generated
small(8px) is the initial value and it's equal to the base unit size (8px).
To generate the consecutive larger sizes we sum each space with the previous one.
For example, to calculate space xlarge, we sum medium(16px) + large(24px) = xlarge(40px).
Lastly we add xsmall(4px) which is the only size that is not generated with the formula above. xsmall is an easy value to work with as it's half of the base unit size (8px).