Spacing tokens separate elements inside components and layout blocks — both horizontally, and vertically.
Our spacing scale helps make things consistent, while also making content easier to scan in a screen layout.
Name | Value |
|---|---|
space-1 | 5px |
space-2 | 10px |
space-3 | 15px |
space-4 | 20px |
space-5 | 30px |
space-6 | 40px |
space-7 | 60px |
space-8 | 80px |
space-9 | 120px |
space-10 | 160px |
Name | Value |
|---|---|
space-1 | 4px |
space-2 | 8px |
space-3 | 12px |
space-4 | 16px |
space-5 | 24px |
space-6 | 32px |
space-7 | 48px |
space-8 | 64px |
space-9 | 96px |
space-10 | 128px |
All patterns have a consistent top and bottom spacing built in to ensure enough breathing space for each pattern and to ensure a visually consistent design across pages. This is the token space-7 which is 60px on desktop and 48px on tablet and mobile.
Some patterns use specific spacing out of the tokens so ensure that the content sits on grid evenly. A good example of this is our Card Cluster pattern which has a 32px vertical spacing between each card on desktop as that is the same as the gutter for the grid used at this size.
