Our spacing system has been created to ensure consistency of white space, proportion and proximity within our components and templates. Built into each element and component and inheriting our 8px baseline grid principle, spacers have specific roles within our templates that are proportional to the element or component it relates to.
Examples
For example, smaller spacers for smaller elements, larger spacers for bigger components. e.g. a Spacer 4 is the recommended template spacer between framework Sections.
Spacer 1/4 = 4px (0.25rem)
Spacer 1/5 = 8px (0.5rem)
Spacer 1 = 16px (1rem)
Spacer 2 = 32px (2rem)
Spacer 3 = 48px (3rem)
Spacer 4 = 64px (4rem)
Spacer 5 = 80px (5rem)
Spacer 6 = 96px (6rem)
Spacer 7 = 112px (7rem)
Spacer 8 = 128px (8rem)
Spacer 9 = 144px (9rem)
Spacer 10 = 160px (10rem)
