Spacing

Guidelines

Give elements breathing space

To give the interface a clean and simple look make sure elements are given enough space to breathe. Too little spacing between elements can result into crowded, difficult to scan interfaces. When designing its better to start off with too much white space, because it is easier to know if it needs reducing than when it needs more.

Keep the goal in mind

Like with all elements of an interface, it is important to always keep the goal of the user in mind. This can mean that denser spacing is required to fit all necessary information into the screen.

Make optical adjustments

Sometimes elements may seem larger than they appear. If this is the case, optical adjustments may be made to ensure the element does not look out of balance.

Baseline

Spacing between elements consists of increments of 8px. However, some elements such as iconography or typography may align to 4px.

Keylines

Keylines help to consistently place elements outside of the layout grid. These can be used when a design doesn’t align with the grid. To determine keylines measure in increments of 8px from the edge of the screen.

Use keylines in combination with a responsive layout grid to keep the design consistent.

Padding

According to Google Material Design, padding stands for the space between elements. To determine a consistent position of elements padding is applied in increments of 8px.

Use padding in combination with a responsive layout grid to keep the design consistent.

Touch targets & Click targets

A touch or click target is a a space in which the user can touch or click to activate a certain action. Touch targets should not be smaller that 48px by 48px and should have at least 8px space between them. Click targets should not be smaller than 24px and should have at least 8px space between them.

Px to REM - optional

Placeholder for px to REM & SASS codes

Resources

Our spacing is based on Material Design’s guidelines. Make sure to also read Spacing methods.