Design

Spacing

Our spacing system helps us to stay consistent, structure content in a clear hierarchy and establish a unified layout principle across all pages.

Spacing system

Our spacing system is designed around an 8-point grid, which can be divided further for smaller sizes. When using this system, please avoid using odd numbers in the spacing. Odd numbers can cause half pixels to be created when centering elements, which results in split pixel blurriness.

Name	Spacing
size-6size-6	size-66px
size-8size-8	size-88px
size-12size-12	size-1212px
size-16size-16	size-1616px
size-20size-20	size-2020px
size-24size-24	size-2424px
size-32size-32	size-3232px
size-40size-40	size-4040px
size-48size-48	size-4848px
size-64size-64	size-6464px
size-80 size-80	size-80 80px

Spacing principles

Consistency

Consistency is key when it comes to creating a visually appealing and organized layout. To achieve this, ensure that you use consistent spacing values between similar elements. This will create a calm and uniform appearance across all pages.

Hierarchy and grouping

Elements that are close to each other are perceived as a group. Try to display elements that belong together with a smaller spacing. Through the interplay of different groups, a hierarchy can be displayed within the page.

Responsive design

The spacing values for large and small breakpoints should be different. On small screens, we have less space available, which is why the spacing should also be smaller. On the other hand, on large screens, a significantly higher spacing can be used.