A series of standard values expressed as global css variables, used with padding and margin.

The goal of having a standard spacing scale is to have elements on a page achieve more consistent horizontal and vertical rhythm.

As a reminder, we reset the html element to use a font-size of 10px, which makes rem calculation simple.

--space-1 =  .4rem =  4px
--space-2 =  .8rem =  8px
--space-3 = 1.6rem = 16px
--space-4 = 2.4rem = 24px
--space-5 = 3.2rem = 32px
--space-6 =   4rem = 40px
--space-7 = 4.8rem = 48px
--space-8 = 5.6rem = 56px
--space-9 = 6.4rem = 64px

These variables are baked into the margin and padding utility classes. They may also be imported via vars.css and applied to padding and margin rules declared in css.