Spacing
We use a grid-based standard with a 4px unit spacing, divided into an algorithm that follows an organic growth scale.
Demo
loading
Spacing units table
| Alias | Use | REM unit | DP/PX Unit |
|---|---|---|---|
| micro | Inner spacing of groupings | .25 | 4 |
| xs | Line spacing within groupings | .5 | 8 |
| small | Spacing for inputs and inner blocks | .75 | 12 |
| medium / Default | Spacing between external components | 1 | 16 |
| large | Spacing between component blocks | 1.75 | 28 |
| xl | Spacing between content blocks | 2.75 | 44 |
| xxl | Spacing between page sections | 4.5 | 72 |
| giant | Spacing between distinct pieces of content | 7.25 | 116 |
Density. These values are the canonical ones (
dimension="normal"). Switching tocompactorspaciouson theApollionProviderscales the entire table proportionally — without rewriting consumers. See Dimensions.