Spacing

We have a spacing system (available via the space Sass function) that provides a set of pre-defined spacings (numbered from 0 to 10).

These space sizes are relative to the base font-size (in the code, they're set in rem units), and so are responsive (ie. any given space value will be smaller at smaller breakpoints and larger at larger breakpoints, as our base font-size changes).

Because our base font-size is 20px at the medium breakpoint, all values on the spacing scale at the medium breakpoint are multiples of 5px.

px values (by breakpoint)
Label rem Small Medium Large
0 0 0 0 0
1 0.25 4.5 5 5.5
2 0.5 9 10 11
3 0.75 13.5 15 16.5
4 1 18 20 22
5 1.5 27 30 33
6 2 36 40 44
7 3 54 60 66
8 4 72 80 88
9 5 90 100 110
10 6 108 120 132