Switch to M&TSpacing
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.
| Token | Variable | Px |
|---|---|---|
| xxxsmall | spacingXXXSmall | 2 |
| xxsmall | spacingXXSmall | 4 |
| xsmall | spacingXSmall | 8 |
| small | spacingSmall | 12 |
| medium | spacingMedium | 16 |
| large | spacingLarge | 24 |
| xlarge | spacingXLarge | 32 |
| xxlarge | spacingXXLarge | 48 |
| xxxlarge | spacingXXXLarge | 64 |
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.
| Spacing | Use |
|---|---|
| 8px | Between Labels and Form Fields |
| 16px | Between Buttons |
| 16px | Between Header and Application Titles |
| 16px | Between Application Titles and Page Titles |
| 24px | Between Form Fields |
| 24px | Between Titles and Text Content |
| 32px | Between Form Fields and Button |
| 32px | Between Section Titles and Form Fields |
| 32px | Between Header and Page Titles |
| 64px | Between Last Component (on screen) and Footer |