Spacing

Consistent spacing across our pages and components creates a polished experience that’s easy for users to visually scan and understand. A standard spacing scale is used to define the size of spacing throughout our products.

We use a base grid of 8px.

Spacing scale

Best practices

Do

• Use smaller spacing (e.g. 4px or 8px) between components that are related
• Use larger spacing (e.g. 24px or 32px) to communicate separation between components or sections
• Lay out your components vertically.
• Use a grid layout if your app is displaying a collection or list of images (e.g. search results).

Don’t

• Layout your form components or buttons horizontally.
• Use inconsistent spacing for similar components (e.g. do keep spacing between the labels and their components consistently 4px)