Space

Create balance and give people breathing room to focus on what matters.

Maturity

Beta

FYQ2 target

♼ Care

Repository

Overview

Proper use of white space has a dramatic impact on design. It guides the viewer to focus on what matters, allows us to establish relationships between elements, and promotes balance. Designs that poorly use white space look messy and cluttered. We use it effectively and systematically to achieve a polished and professional look.

Related content

Product Expression

The personality, essence, and approach we take when we create experiences.

Principles

Purposeful

We use the space to organize the information, facilitating the understanding of its purpose and helping to guide attention.

Rhythmic

By applying spacing consistently, we improve the quality of our designs by creating a predictable rhythm. We can exceptionally break this rhythm if the benefits are greater than the cost of introducing an inconsistency.

Scale

Our predefined spacing scale help makers layout elements consistently, allowing flexibility. They are based on an 8px grid.

When creating any component or designing a screen, make sure you use one of the values below:

Spacing / Space

4px

space.XS

Use for text-level relationships only

Code token

space.XS

Token set

Product/App

8px

space.SM

Code token

space.SM

Token set

Product/App

16px

space.MD

Code token

space.MD

Token set

Product/App

24px

space.LG

Code token

space.LG

Token set

Product/App

32px

space.XL

Code token

space.XL

Token set

Product/App

56px

space.XXL

Code token

space.XXL

Token set

Product/App

Usage

Leveraging the laws of proximity and uniform connectedness, we establish relationships between elements more effectively, minimizing the need to use boxes and borders.

Being consistent in space use, we make our interface more predictable and easy to use.

Inside components

Use spacing to separate and group elements inside components. When they belong together, use smaller values to reinforce the connection.

⛔️ Don't

If the gap between linked elements is big, can look isolated.

✅ Do

The title, description and icon are linked, so a smaller and consistent gap between them helps to reinforce the link

Between components

When grouping a set of components that belong to the same user task, use the same spacing to separate them.

⛔️ Don't

When adding inconsistent gaps between components they can feel unrelated

✅ Do

Try to use consistent spacing between related components so they feel connected

Spacing interactive controls

The standard spacing between controls is 16px/MD, regardless of their size and arrangement. It prevents triggering accidental interactions for people with motor disabilities. Here are some examples and nuances:

Horizontal spacing

✅ Separate distinct actions from each other

Regardless of size, buttons must be separated by enough space to prevent accidental triggering.

✅ Separate form controls from buttons

For simplicity, we will separate the form controls from the buttons using the same spacing.

Vertical spacing

⛔️ Avoid putting controls too close

If the labels are equally close to other unrelated form controls, it'll be harder to distinguish which control they are related to, and touch targets will be less forgiving.

✅ Leverage white space

Using the proximity rule, the relationships between controls and labels are established. We separate the buttons to compensate for the labels and give more relevance to the form's end action.

⛔️ Avoid separating related form controls

When form controls are related, we should avoid using standard spacing because they may appear to be different controls.

✅ Related controls should be closer together

By bringing the related form controls closer, we establish a visual relationship between them, making them easier to understand.

Outside components

Use spacing consistently across the surrounding of a component group. This spacing helps to breathe the main content while grouping related elements.

⛔️ Don't

Avoid inconsistent spacing values on the components surrounding

✅ Do

Try to use consistent spacing surrounding components so they feel grouped

Quality checklist

This element passes the following requirements described in our Component lifecycle.

Maturity

Beta

α · Design tokens

It uses Ariane design tokens.

α · Naming agreement

Its name is agreed upon and shared between design and development.

α · Responsive L1

Is responsive to different viewport sizes.

β · Responsive L2

The responsive behavior has been reviewed and validated by the team.

β · Docs L1

It has essential documentation with at least primary usage.

β · Use cases

All the uses are audited and refined.