The base unit size is 8px (0.5rem).
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).