Search…
Spacing
Follow these guidelines when applying spacing in our product. Have questions? Talk to Richard at [email protected]

Spacing

8px Scale

We use multiples of 8 to define spacing to create consistency by default. This aligns with our typographic scale.
Not all elements will align to this scale, that's OK. Use this scale as a starting place to limit the use of arbitrary values. When you deviate, it's important to use multiples of 8 (or 4) when you can. This creates natural alignment.
Multiple
Value
0
0
0.5
4px
1
8px
1.5
12px
2
16px
3
24px
4
32px
6
48px
8
64px
12
96px
16
128px
20
160px
24
192px
32
256px

Best Practices

Proper whitespace. Use whitespace to bring organization and focus. This doesn't always mean adding whitespace. You might find reducing whitespace benefits the design (e.g. comparing values in a data table). If you're stuck, try adding two variations to your design: one with more whitespace and one with less. You'll identify the best solution by purposefully going past those boundaries.
Spacing between groups. Add proper spacing between groups of items to help users identify the groups. Think of spacing in a form with three form fields and three labels. The 6 items will not be equally spaced. The labels will be closed to the form fields to create three groups of label + form field pairs.
Copy link
On this page
Spacing
8px Scale
Best Practices