Spacing

Consistent spacing is the foundation for a well structured user interface. We provide a set of spacing rules that takes the guess work out of spacing UI elements.

Spacing Values

All spacing for components align to a 4pt grid. This grid allows for flexibility and consistency when designing for various screen sizes and devices.

SizePX ValueRem ValueReference
4px0.25remxxsmall
8px0.5remxsmall
12px0.75remsmall
16px1remmedium
20px1.25remlarge
32px2remxlarge
40px2.5remxxlarge
60px3.75remxxxlarge
80px5remxxxxlarge