Spacing is an important part of clear, functional layouts of web pages. Without spacing, content would be grouped without a clear structure, and hierarchy and relationships between elements would be unclear to the user.

In order to keep the spacing consistent across our products, we created a spacing system. This allows us to take the guess work out of creating clearly structured pages, and enables users to see a familiar structured page with a focus on the information they need to absorb.

The spacing system is based on the 16px baseline size for 1 rem.

We use two types of spacing:

  • Padding - spacing inside an element
  • Margins - spacing surrounding an element
Spacing system in a table shown in rems, pixels and visual example