Spacing is commonly based on units of 4 or 8, so due to the information density of our interface, we decided to base ours on a 4-unit grid. This gives us the flexiblity we need without compromising consistency, meaning that any spacing such as margins, paddings etc. will be in increments of 4.
When implementing interfaces, an easy way to remember token names is to divide by four the value that you see with the inspector, and that will give you the token name.
<aside> 🔸 Example: Need a spacing of 32px? Just do 32 / 4 = 8, so your token will be space.8 (or $space-8 in Sass).
</aside>
$space-0: 0px;
$space-1: 4px;
$space-2: 8px;
$space-3: 12px;
$space-4: 16px;
$space-5: 20px;
$space-6: 24px;
$space-7: 28px;
$space-8: 32px;
$space-9: 36px;
$space-10: 40px;