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

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

Latest version 2.3.3