Spacing
Spacing is used to define paddings and margins of the elements on the interface. Consistent spacing creates predictable layouts, favors visual rhythm and helps you create a clear hierarchy.
Did this page help you?
Spacing system
Our design system's grid system is based on a 4-pixel base unit, which is used to calculate the spacing and scale of elements on the screen. The base unit is at the core of the visual foundation, and also provides the basis for the typography and iconography systems. The result is a consistent set of rules that allow you to create a coherent and balanced visual experience across your service.
Spacing types
Spacing can be used inside components (paddings), and between components (margins). Spacing inside components often uses smaller spacing units to achieve a closer relationship of elements. On the other side, spacing between components uses larger spacing units, to establish a visual separation of the content.
Spacing inside components is already built into the coded components so that you can focus on creating the layout that better serves your users’ needs. If you build custom components, remember that they should use the same spacing scale to bring consistency and create a natural and familiar flow from page to page.
Spacing scale
The spacing scale is based on progressive increments of the 4-pixel base unit.
Spacing unit | Size (px) | Preview | Examples |
|---|---|---|---|
| xxx-small | 2 |