Spacing

Follow these guidelines when applying spacing in our product. Have questions? Talk to Richard at [e-mail].

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.