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.

The spacing scale is based on progressive increments of the 4-pixel base unit.

Use the spacing scale to arrange components when creating a certain layout. Be conscious of hierarchy and visual relationships that you’re trying to create. Apply spacing decisions intentionally and consistently across pages so that users can build a mental model. Having a predictable layout will help them reduce the cognitive load and will increase their focus on the content rather than on the layout.

Create relationships

Proximity conveys relationship. Elements that appear near to each other are perceived as closely related when compared with elements that appear farther apart. Proximity is a very powerful tool to group content and connect concepts, letting you create sections or areas on the page that users can easily scan through.

Create hierarchy

The amount of space surrounding an element can increase or decrease its visual prominence on the page and be perceived as more or less important than other elements on the page. Use larger spacing increments for elements that need to be positioned higher in the visual hierarchy and draw users attention. On the contrary, assign less space to those elements that should be perceived and less important.

Use white space

White space, also known as empty or negative space, is another active design element. It allows you to create visual contrast when laying out the content on a page, and to create sections or areas that you would like users to perceive as different. Negative space can also be used to create visual tension and attract focus, and overall it lets the content breathe and provides a stronger visual hierarchy to your layout.