Create balance, organize information, and make our designs easier to scan and use
We use the space to organize the information, facilitating the understanding of its purpose and helping to guide attention.
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.
Our predefined spacing scales 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:
xs (use sparingly)
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.
Use spacing consistently across the surrounding of a component group. This spacing helps to breathe the main content while grouping related elements.
Avoid inconsistent spacing values on the components surrounding
Try to use consistent spacing surrounding components so they feel grouped
When grouping a set of components that belong to the same user task, use the same spacing to separate them.
When adding inconsistent gaps between components they can feel unrelated
Try to use consistent spacing between related components so they feel connected
Use spacing to separate and group elements inside components. When they belong together, use smaller values to reinforce the connection.
If the gap between linked elements is big, can look isolated.
The title, description and icon are linked, so a smaller and consistent gap between them helps to reinforce the link
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.
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.
Use specific width for elements that are out of the grid, like dialogs that overlay the whole layout.
These components use fixed dimensions because they help to maintain the layout’s consistency and act as anchor points for the entire application.
Iconography measures are fixed and based on the 8px grid.