Spacing

Spacing Scale

The spacing scale is based on 8px, defining the elements dimensions and distances using multilples of 8. An exception of this scale is the smaller size, 4px, to separate elements that should be intrinsically closer by their natural relationship.

4px; 8px; 16px; 24px; 32px; 40px; 48px | 4px | 8px | Line Height | Sample use cases | | --- | --- | --- | --- | | Display 1 | 72px / 4.5rem | 88px | Large heroes or banner titles |