Structuring and grouping of elements in our UIs. Helps create the desired valence.

We consciously use white space as a design tool.

#For the main column

The spacing between sections and elements uses the following ruleset

• Between the main sections of a page: 10 × grid
• Between subsections: 6 × grid

#After headings in the main column

The spacing between heading and content depends on the heading size

• After a Display 1: 5 × grid
• After a Display 2: 4 × grid
• After a Title: 2 × grid
• After a Lead: 1 × grid

#Spacings in the sidebars

The spacing between in the sidebars differs from the content column

• The spacing between sidebar main sections is 6 × grid
• The spacing between the sidebar content and the header is (3 × grid) + (breakpoint setting).
  • Important: on bigger screens (bigger breakpoints) we add 1 × grid to the spacing between the main header and the content.

#After headings in the sidebars

After a Display 2: 3 × grid

We currently don’t use any other heading size in the sidebar.

#End of page spacing

The spacing at the end of the page (content column) is 8 × grid.