The module is the fundamental unit of measurement in the design system. The spatial module is the foundation for building the grid and determining component and spacing sizes. The module allows you to standardize the principles of specifying spacings and sizes within the design system as well as achieve visual consistency between Figma layouts and the final production code.

§Module

To shape and measure space in our design system, we use the 4x4 px module. All container and component spacings are calculated using this space size. In rare instances, we use a 2x2px micro-module.

§Spacing system

We use a limited set of tokenized spacings that help create clean and consistent layouts. When creating interfaces and components in a design system, use pre-configured Figma tokens.

§Types of spacing

Internal and external spacing

Internal and external symmetrical or asymmetrical spacing from all four container borders to the content.

Horizontal and vertical stack

In horizontal and vertical stacks, the spacing between elements within the container defines their vertical and horizontal relationships.