Spacing

Consistent spacing across our pages and components creates a polished experience that’s easy for users to visually scan and understand.

Best practices

Individual elements should only control spacing inside of their boundary through padding (that is, with the App UI Kit Box component).

For spacing between elements, you should:

• Apply padding on the parent container (with Box).
• Use layout components (for example, Rows, Columns) and set spacing on those.

Do

• Iframe margins should be 16px across all devices.

• Spacing above and below a search bar should be 16px.

• Use smaller spacing between related components in a section. For example, spacing between content in a grid and carousel section should be 8px.

• Use larger spacing to communicate separation between components or sections. For example, the distance between each section (search pills, carousels, results) should be 24px.

  

Don’t

• Use inconsistent spacing for similar components (for example, keep spacing between the labels and their components consistently 4px).
• Use margins on individual elements — spacing between elements should be managed by spacing in layout components.

Standard spacing

The following is a scale we use to define the size of spacing throughout our products. Implement this spacing scale using the spacing prop in the App UI Kit Rows and Columns layout components, as well as through importing CSS and Typescript/JavaScript variables directly.

The scale is based on a base unit of 8px.