Spacing

With the defined spacing system, we ensure to improve readability and consistency across all pages.

All components align to a 10px square baseline grid for mobile, tablet, and desktop. Elements and components like iconography and typography, align to a 5px baseline grid and all spacing and component sizes are based on increments of these 5px. With that in mind, the spacing system is based on a 10point soft grid system defined by the line-height of our base font-size to ensure consistent sizing, spacing, alignment throughout the system.

A spacing scale is used for smaller, more refined spacing needs, specifically within the context of a component (i.e. the space between a label and a text input). There are three spacing rules and spacing values, that work well with the typographic system.

Header structure on desktop — Spacing scale

Rule for Containers

Uniform inset spacing inside all containers in our UI.

Rule for Content

Content is stacked vertically. There are defined header stacks for headlines with margin values that work consistently across all headers. Leaf-node stacks are addressing spacing needs for paragraphs, lists, forms, tables.

Rule for Components

Uniform inline spacing for all adjacent components in our UI.
Make exceptions with smaller spacing only for components that are associated together.