Spacing
Consistent spacing creates visual balance that makes the user interface (UI) easier for zoomer & Zappers to scan. Apply consistent spacing to improve the quality of the UI.
The Spacing System
All spacing for components and typography is done in increments of 4 pixels(4px Scale). This 4px value forms the basic unit of measurement for spacing.
Not all elements will align to this scale, and that's OK. The scale is meant as a helpful place to start by limiting the choice of arbitrary values. When you deviate, it's important to try to use multiples of 8 (or 4) as it will enable natural alignment.
Typography doesnβt use a traditional baseline grid. Instead, line heights are set in increments of 4px and spacing is measured from the edges of the text boxes.
Exceptions
π§π»βπ» Usage Guidelines
PX | Naming |
2px | Extra Tight |
4px | Tight |
8px | Base tight |
12px | Base |
16px | Base Loose |
24px | Loose |
32px | Extra Loose |
36px | Very Extra Loose |
48px | -- |
Spacing Token
Last updated