Spacing
Compass defines padding and element spacing with a 4px base unit.
Base unit
Common values are 4, 8, 12, 16, 24, 32, 40, and 48px. Small controls also use half-unit steps such as 1.5, 2.5, and 3.5 for 6, 10, and 14px.
Spacing scale
| Unit | Value | Preview |
|---|---|---|
| 1 | 4px | |
| 1.5 | 6px | |
| 2 | 8px | |
| 2.5 | 10px | |
| 3 | 12px | |
| 3.5 | 14px | |
| 4 | 16px | |
| 5 | 20px | |
| 6 | 24px | |
| 8 | 32px | |
| 10 | 40px | |
| 12 | 48px | |
| 16 | 64px |
Spacing roles
Between adjacent elements16px
Space inside an element16px on each side
Space outside an element8px above
Current layout values
The header and content share horizontal padding, increasing from 16px to 32px and 40px on wider screens.
Header and content gutters16 / 32 / 40px
Gallery filters to grid8 + 8 = 16px
Between gallery cards16px
Default button horizontal padding16px + 4pt ≈ 21.33px
Default button icon to text8px
Preview padding24px
Between document sections40 / 48px