Gap

A gap system to simplify the creation of UI elements and page layouts.

Gap values in the design system are intended to be used to create the gap between items within a layout.

Whether you are designing grids, flex containers, or other multi-item layouts, the gap scale provides a standardised way to manage the spacing between elements.

This consistency helps maintain a cohesive and orderly design, making your interfaces more predictable and easier to navigate.

 

Spacing / gap
0px
0px
0
2px
2px
1
4px
4px
2
6px
6px
3
8px
8px
4
12px
12px
5
16px
16px
6
24px
24px
7
48px
48px
8