Spacing
In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.
We use a spacing system in a 4-pixel grid.
It helps to create a visual hierarchy and organises page content.
The 4px framework creates consistent spacing relationships and alignment across breakpoints. This is crucial for good UI design.
| Size | CSS Variable |
|---|---|
| 4px | rpl-sp-1 |
| 8px | rpl-sp-2 |
| 12px | rpl-sp-3 |
| 16px | rpl-sp-4 |
| 20px | rpl-sp-5 |
| 24px | rpl-sp-6 |
| 28px | rpl-sp-7 |
| 32px | rpl-sp-8 |
| 40px | rpl-sp-9 |
| 48px | rpl-sp-10 |
| 56px | rpl-sp-11 |
| 64px | rpl-sp-12 |
| 80px | rpl-sp-13 |
| 120px | rpl-sp-14 |
Spacing should be proportional to the size and importance of the elements on the page. For example, larger elements may need more space to balance their visual weight.
Consider spacing in responsive design to ensure that the spacing remains consistent and proportionate on different screen sizes and devices.
For page level, component and content spacing see layout.
Propose a change to this page on GitHub.