Guidelines

Spacers

A simple system to encourage visual rhythm.

Good spacing systems are based on increments that are visually distinguishable and are backed by solid mathematical principles. This toolkit gives designers and developers guidelines for effectively applying layout spacing, resulting in a more consistent application of space across our product.

16px = base increment

Our spacing system is built on a base increment of 16px, with factors of 4px and 8px. The base of 16px also acts as a default spacer, as it is the most widely used spacing increment.

Multiples of 16 make up the upper increments of our spacing system. Please stick to these increments to maintain consistency.

1
 
4px
2
 
8px
3
 
16px
4
 
24px
5
 
32px
6
 
64px
7
 
128px
8
 
256px

But wait, why is 24px included?

24 is not a multiple of 16, but it is the 3rd most used increment in our system. We have included it order to give designers more flexibility at the smaller end of the spectrum.

But what if I need to nudge something a few pixels?

A set of nudge classes are available to developers to aid in perfect positioning. These nudge classes are not available to designers and should only be used in components and elements that require it.

Spacing framework

To further our understanding and communication of space, we’ve broken down the types of space we apply in our system.

We reference 2 types of space and apply them in 4 ways:

  • basic (stack)
  • basic (inline)
  • inset-square
  • inset-asymmetrical

Basic (stack and inline)

We use basic spacers for anywhere we need to apply horizontal or vertical space in our layouts. While we apply that space in the same way, we reference it’s application differently depending on if it’s horizontal or vertical space.

  • Inline spacing refers to horizontally spaced objects.
  • Stack spacing refers to vertically stacked content.
Spacer layout

Inset (square and asymmetrical)

Inset spacing is used for UI components and containers. We apply that space either in an equal or asymmetrical way.

  • Inset-square spacing is used to evenly apply spacing inside of a container or component.
  • Inset-asymmetrical spacing is used to apply different top/bottom and left/right values. We follow the box model in our classification of asymmetrical values.
Spacer layout
Square inset of 16px.
Spacer layout
Asymmetrical inset of 24, 16px.