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.
| Size | PX Value | Rem Value | Reference |
|---|---|---|---|
| 4px | 0.25rem | xxsmall | |
| 8px | 0.5rem | xsmall | |
| 12px | 0.75rem | small | |
| 16px | 1rem | medium | |
| 20px | 1.25rem | large | |
| 32px | 2rem | xlarge | |
| 40px | 2.5rem | xxlarge | |
| 60px | 3.75rem | xxxlarge | |
| 80px | 5rem | xxxxlarge |