Spacing

Space between elements on the screen helps users to understand connections and hierarchy.

Visually balanced interfaces feel more pleasing and easier to scan, and help with familiarity of the user journeys.

Inconsistencies in spacing and alignment can distract the user from their goals, and make it harder to find their way around the product.

Visual rhythm

The design system is built on a 4px grid. Using 4px as the base unit means that every graphical element should measure as a multiple of the base.

The most common spacing ranges are 8px, 16px, 20px, and 32px.

Relationships and hierarchy

(1) Elements that are close to each other are perceived to be associated with each other. (2) Elements that are distant feel unrelated.

If an element has a larger amount of white space around it, it can also feel more important on the screen.

Typography

When centering text blocks within their container, the top and bottom padding can be different from a multiple of 4px, but the total height from the top edge to the bottom edge should be a multiple of 4px.

When sizing elements, consider the total height of text blocks near it and try to match that size as much as possible, for a more harmonious layout.

Flexible width and other sizing exceptions

(1) Larger components, like header area, cards, and other big blocks usually take up the entire width available. (2) For smaller components, such as buttons, pills, text fields, the width is usually flexible based on their content.

Responsive components

The design system components were designed with fluidity in mind. This means they are designed to adjust to the parent container’s width, which aids in creating responsive designs.

Figma settings

You can set custom nudge values in Figma.

Open the Menu (top left corner), and start typing “nudge amount” in the search box. Select “Nudge Amount…” and type in the following values:

• Small nudge: 1
• Big nudge: 8