Spacing

Consistent spacing creates visual balance that makes the user interface (UI) easier for users to scan. Apply consistent spacing to improve the quality of the UI.

The spacing system

All spacing for components and typography is done in increments of 4 pixels. This 4 px value forms the basic unit of measurement for spacing.

Typography doesn’t use a traditional baseline grid. Instead, line heights are set in increments of 4 px and spacing is measured from the edges of the text boxes.

Many components are sized in increments of 20 px to match the line height of body text. This makes it easy to create harmonious arrangements of components and text.

How to choose spacing

Use less space between small components, or components that share a close functional relationship.

Use more space between large components, or between components which are less functionally related.

Coordinate small and large values, along with structural components like cards, to create visual groupings of related things. This helps merchants understand the interface and find what they’re looking for.

For screens with specialized layouts, adjust overall spacing based on the density of the content. For example, a simple login screen on desktop display has more room to breathe, so more space can be used.

Optical adjustment

Sometimes an element is larger than it appears. Spacing based on the invisible edges of the element will feel wrong. Correct for these optical effects by adjusting the space in 4 px increments until it looks more balanced.

Without optical adjustment, the disclosure icon appears too far from the right edge of the button.