Spacing units
Our spacing units make sure we have a consistent approach across our sites.
When to use spacing units
You must apply spacing units to all the spacing values.
How to use spacing units
You can apply spacing units to:
- components
- sections of pages
- whole page layouts
Use one at a time
Do not combine spacing units to create sizes that aren’t included in the spacing unit scale.
Using different spacing units at different breakpoints
To make the most of the space available you can change the spacing units at different breakpoints.
You will need to use two different values depending on the breakpoint. One value for extra-small, small and medium breakpoints. A second value for large and extra large breakpoints.
The spacing unit scale
| Spacing unit | Pixel value | Code snippet | Notes |
|---|---|---|---|
| 0 | 0px | $p-su-0 |
|
| 1 | 2px | $p-su-1 |
Used for spacing within components only |
| 2 | 5px | $p-su-2 |
Used for spacing within components only |
| 3 | 10px | $p-su-3 |
|
| 4 | 15px | $p-su-4 |
|
| 5 | 20px | $p-su-5 |
|
| 6 | 25px | $p-su-6 |
|
| 7 | 30px | $p-su-7 |
|
| 8 | 50px | $p-su-8 |
|
| 9 | 65px | $p-su-9 |
|
| 10 | 90px | $p-su-10 |
|
| 11 | 120px | $p-su-11 |
Have a question, suggestion or feedback?
The Improving User Experience cluster manages the design system.
If you work in Parliament, contact us on the #design-system Slack channel.