Spacing values help create consistent interfaces by clearly defining relationships and distances between components.
Principles
Create visual groupings
We group related items closer together for visual recognition.
Complement function
We use tighter spacing for large amounts of information, and looser spacing for more focused content.
Maintain consistency
We use our design system space tokens consistently for a harmonious experience.
4px soft grid and base units
Most modern UI and design systems are built on a grid system foundation. Some of these systems opt for a ‘hard grid’ approach, which boxes elements in the design to a rigid 8px grid.We opt for a 4px ‘soft grid’ approach, which allows for more nuanced spacing options, while still aligning to an 8px grid. This means every spacing element is divisible by 4.