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
Spacing Token
Last updated