Spacing
#
The Spacing SystemWe use increments of 4 pixels to space content within components and relative to components.
#
Spacing within components- Use the form layout component to automatically add spacing between input fields and their labels.
- Use the text container component to automatically add spacing between paragraphs, lists, or other text components.
- Use the Base token (16px) inline with text and atom-level components (between text and component) eg. Badge component.
#
Choosing spacing#
Common values- Use small spacing between small components and components with a close functional relationship.
- Use large spacing between large components or components that don't share a close functional relationship.
#
Xxsmall (4px) betweenIcons and text.
Input titles and input fields (built into the component).
This spacing is built into:
The button component.
The input component.
#
Xsmall (8px ) between- Buttons
#
Base (16px) and Large (20px)Between form fields.
Between the footer edge of the card and the content inside.
This spacing is built into:
the card component.