Foundations
Spacing
Spacing is the amount of space that we put in place as margins on the page and padding around sections, cards or other objects.
Guidelines
We add space vertically and horizontally when creating components.
We use spacing to create consistency and hierarchy. This makes it easier for people to understand the relationship between different sections of the page.
Our spacing units are multiples from 2px to 64px.
px | rem | Example |
---|---|---|
2px | 0.125 | |
4px | 0.25 | |
8px | 0.5 | |
16px | 1 | |
32px | 2 | |
64px | 4 |
As well as our default spacing units, we also have CSS classes that allow you to experiment with variations of spacing.
You can multiply the 2px, 4px, 8px, 16px, 32px or 64px by either 1.5 or 2.
For example, if your layout requires a large vertical space, you can multiply the 64px unit by 2. This will give you a vertical spacing of 128px.
The CSS classes that support this already exist. If you’re unsure, ask the engineers on your team to talk you through them.
Horizontal spacing is managed by the gutters that appear between columns in our grid. Above a width of 1300px (for devices like laptops and desktops) these are 32px and below (for devices like tablet and mobile) they are 16px.
For more on horizontal spacing go to the grid page
Horizontal spacing
Horizontal spacing is managed by the default gutters that appear between columns in our grid. Above a width of 1300px (for devices like laptops and desktops) these are 32px and below (for devices like tablet and mobile) they are 16px.
For more on horizontal spacing go to the grid page.
Example

Example showing some of our 16px and 32px spacing in use.
Changelog for this page
Date | Notes |
---|---|
14 April 2021 | First version of page published |