🚀 We value your input in shaping our future plans. Take charge and have a direct impact by participating in our survey.

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 22 November 2023
Home


Latest version 2.3.1