Spacing

Usage

Spacing of elements can be used to create visual hierarchy for content and guide focus to certain elements. Too dense information can be hard to digest for a user, so make sure to leave enough space in the user interfaces.

Principles

• Use small spacing to group elements together and larger spacing separate them. Elements that are close together appear to be more related than things that are spaced further apart.
• Use spacing to highlight important elements. Elements with more spacing around them tend to perceive higher importance than elements that have less space around them.
• Use spacing in a way that fits the function and content of the service. Ample spacing is more fitting for providing mood in branding and communication, denser spacing for performing information heavy tasks efficiently.

Using spacing tokens

The spacing tokens are based on the HDS typographic scale. They are divided in two scales for different uses:

• Spacing tokens are used for component-level spacing, and allow a more detailed fine tuning.
• Layout spacing tokens are used for page layouts. They help keeping pages consistent and ensure that you are not making layouts too dense.

Token values can be multiplied and divided using even numbers.