Spacing scale
Our spacing system is built around a base unit of 8 pixels. Most popular screen sizes are divisible by 8 on at least one axis - usually both. The result reduces the number of 1/2 pixels shown on screen so edges look crisp.
This base unit determines the spacing scale and ensures visual consistency across products. This scale is a limited set of spacing values that is used to lay out UI elements in a consistent way. Each spacing value is a multiple of the base unit and ranges from 0px to 80px to allow for flexibility while still maintaining consistency across different layouts.
| Token | Multiplier | REM | PX | Visual Representation |
|---|---|---|---|---|
—units-0 | 0x | 0rem | 0px | |
—units-25 | 0.25x | 0.125rem | 2px | |
—units-50 | 0.5x | 0.25rem | 4px | |
—units-75 | 0.75x | 0.375rem | 6px | |
—units-100 | 1x | 0.5rem | 8px | |
—units-150 | 1.5x | 0.75rem | 12px | |
—units-200 | 2x | 1rem | 16px | |
—units-250 | 1.25x | 1.25rem | 20px | |
—units-300 | 3x | 1.5rem | 24px | |
—units-400 | 4x | 2rem | 32px | |
—units-500 | 5x | 2.5rem | 40px | |
—units-600 | 6x | 3rem | 48px | |
—units-800 | 8x | 4rem | 64px | |
—units-1000 | 10x | 5rem | 80px |