Unit

The base unit size is 8px (0.5rem).

Semantic spacing

nameunitrempx
xsmall0.50.25rem4px
small10.5rem8px
medium21rem16px
large31.5rem24px
xlarge52.5rem40px
xxlarge84rem64px
xsmall
small
medium
large
xlarge
xxlarge

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).

CSS helpers