Overview
Consistent and systematically applied spacing helps our design establish beautiful visual balance and rhythm.
4px System
The 4px space system. Use increments of 4 to size and space out the elements on a page. This means that any defined height or width, margin, or padding will be an increment of 4.
Tokens
| Token | Value px | Value rem |
|---|---|---|
| spacing-0 | 0 | 0 |
| spacing-0.5 | 2 | 0.125 |
| spacing-1 | 4 (base) | 0.25 |
| spacing-2 | 8 | 0.5 |
| spacing-3 | 12 | 0.75 |
| spacing-4 | 16 | 1 |
| spacing-6 | 24 | 1.5 |
| spacing-8 | 32 | 2 |
| spacing-10 | 40 | 2.5 |
| spacing-12 | 48 | 3 |
| spacing-16 | 64 | 4 |
| spacing-20 | 80 | 5 |
| spacing-28 | 112 | 7 |
| spacing-30 | 120 | 7.5 |
Extended spacing system for developers
To guarantee a future proof and great developer experience we provide a much larger amount of choices for developers. This is also because our framework Tailwind automatically generates multiple classes and properties automatically. For the full list of spacing options please refer to the Tailwind documentation.
The scale in code is used to make {property}-{spacing step}. Property can be height, width, gap, space, m (margin), p (padding), translate and many more.