Spacing

Create balance, organize information, and make our designs easier to scan and use

Spacing

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.

Scales

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

Product

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

Token

xs (use sparingly)

sm

md

lg

xl

xxl

Value

4px

8px

16px

24px

32px

56px

Usage

Spacing

When applied correctly, we can generate a natural grouping for elements that belong together, minimizing the usage of boxes and borders. We must keep consistent when using space and limit the number of spacing values we use.

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

⛔️ Don't

Avoid inconsistent spacing values on the components surrounding

✅ Do

✅ Do

Try to use consistent spacing surrounding components so they feel grouped

Between components

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

⛔️ Don't

⛔️ Don't

When adding inconsistent gaps between components they can feel unrelated

✅ Do

✅ Do

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

Inside components

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

⛔️ Don't

⛔️ Don't

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

✅ Do

✅ Do

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

Dimensions

Avoid applying fixed values to define the height or width; it can generate scalability and accessibility issues. When defining fixed dimensions, elements won't be able to adapt appropriately.

We acknowledge that in some cases, this will be needed. When using fixed dimensions to define width or height, always follow the 8px grid to ensure everything fits.

Maximum or minimum width/height

We want buttons to keep a generous tappable area even with a concise label, like “Done”. In this case, we can indicate a Min-width as a specific dimension.

Min-width-1

Out of the grid elements

Use specific width for elements that are out of the grid, like dialogs that overlay the whole layout.

Specific-width

Header and sidebar

These components use fixed dimensions because they help to maintain the layout’s consistency and act as anchor points for the entire application.

Header
Sidebar

Iconography

Iconography measures are fixed and based on the 8px grid.

Iconography