Spacing

Consistent spacing between elements is used to create rhythm and familiarity over all the different screens. The design system uses multiples of 8px for all spacing values: dimensions, padding, and margins. The goal behind this is to keep a consistency and to reduce the cognitive load of fiddling with different spacing options.

Relationships

By placing elements closer together, you’re creating associations between them that suggest that they’re related. Items that are further away from each other suggest the opposite, that they’re part of a new section or group and don’t really have an association between them.

The repetition of grouped elements or patterns also create a relationship. Instead of using elements like line dividers or other graphical visuals, space can also be used to separate content.

Hierarchy

Understanding the importance of your content and visually presenting this hierarchy is equally important in correctly using our spacing guidelines.

When an element is isolated with space around it, it indicates that this element is of higher importance than other elements. When all elements are closely grouped together they can easily be overlooked, a solution to this is drawing the users’ focus to items of importance by using, for example, icons or more dominant colors.

White space

Empty space, also known as white space. Is important it helps with information processing; too much dense information can be disorienting or overwhelming for a user. Sections of a UI are allowed to be dense, but the whole page should not be crowded; there should be white space to let the user’s eye rest.

Spacing scale variables

Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs. This scale is applied and used within all components.

Spacing utilities

Margins and padding can be applied using a set of CSS utility classes to add or remove margin and padding from any element.

u-p for classes that set padding. u-m for classes that set margin.

Margin and padding available values

The scale is based on a 16px (1rem) unit

Stacking elements

The o-stack class is container component that defines spacing between elements vertically.

Using the adjacent sibling combinator +, margin-top is only applied where the element is preceded by another. Ensuring we’re not leaving any orphan margins. The universal, or wildcard selector * ensures any and all elements are affected. We end up with .o-stack > * + *.

By adding the .o-stack class to a container we add a constant vertical space between all direct children elements.

<div class="o-stack">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

It just targets direct children of the container, we need to add another .o-stack class in nested elements if needed.

<div class="o-stack">
  <div>Item</div>
  <div>
    Item
    <div>Nested content</div>
    <div>Nested content</div>
  </div>
  <div class="o-stack--xs">
    Item
    <div>Nested content</div>
    <div>Nested content</div>
  </div>
  <div>Item</div>
</div>

Stack size options

We add more or less space between elements depending of their relationship. Here you can see the available options.