Switch to M&T
Overview

Spacing

Space is the distance between elements. The space settings here should be used in the construction of components not defined in the Currency Design System, or in arranging combinations of existing Currency components. These settings are defined as variables.

Variants

Use these values to add consistent spacing between elements. The scale is based on a 16px (1rem) unit, which is the base typography size and a factor of common screen resolutions.

TokenVariablePx
xxxsmallspacingXXXSmall2
xxsmallspacingXXSmall 4
xsmallspacingXSmall8
smallspacingSmall 12
mediumspacingMedium 16
largespacingLarge 24
xlargespacingXLarge 32
xxlargespacingXXLarge 48
xxxlargespacingXXXLarge64

Using 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.

SpacingUse
8pxBetween Labels and Form Fields
16pxBetween Buttons
16pxBetween Header and Application Titles
16pxBetween Application Titles and Page Titles
24pxBetween Form Fields
24pxBetween Titles and Text Content
32pxBetween Form Fields and Button
32pxBetween Section Titles and Form Fields
32pxBetween Header and Page Titles
64pxBetween Last Component (on screen) and Footer