Spacing
SGDS components follow an 8px spacing system. This allows us to create consistency across the user interface while decreasing design complexity.
Spacing system
| Example | Spacing size | Difference |
|---|---|---|
| 8px | +8px | |
| 16px | +8px | |
| 24px | +8px | |
| 32px | +8px | |
| 40px | +8px | |
| 48px | +8px | |
| 56px | +8px | |
| 64px | +8px |
Usability guidelines
Consistency
Keep spacing consistent throughout the website to create a clean and organized look.
Spacing guide
Use less space within a component or components that are related, and more space to separate unrelated components.
Last updated 23 May 2024
