Spacing tokens
Space is the distance between interface elements. It can affect grouping, visual hierarchy, and aesthetics.
Use the following guidelines when making decisions about spacing:
- the amount of spacing between elements should depend on how closely related they are
- elements spaced closer together appear to be grouped and are assumed to be related
- placing more space between elements helps separate them
- placing more space around elements can help make them more prominent
- ensure there is sufficient space between elements to help users distinguish between them.
Spacing tokens
All spacing between interface elements should use the following predefined spacing options to help ensure consistency and speed up design and development time.
Spacing options are based on increments of 8px in order to align to an 8px grid.
How to use spacing tokens
In order to improve consistency, each spacing token is used for a specific purpose. More closely related elements have less spacing between them.
- 0.5rem (8px)
- Spacing between icons and text.
- Spacing between labels/hints and input fields.
- 0.75rem (12px)
Spacing between icons and text in primary navigation list components, like App layout and Dropdown menu.
- 1rem (16px)
- 1.5rem (24px)
- Used for the gutter between layout columns.
Used for the horizontal and vertical gaps between cards in Card grids.
Used for the padding inside medium sized components, like Callout, Card and Page alert.
Used as a top margin for paragraphs in Prose body text.
- 2rem (32px)
Used in Form stack as the gap between form fields.
- 3rem (48px)
Used for the top padding in PageContent.
Used in SectionContent as the gap between component blocks.
- Used in forms as the gap between fieldsets and input groups.
- 4rem (64px)
Used for the bottom padding in PageContent.
Used for top and bottom padding in SectionContent.