We use increments of 4 pixels to space content within components and relative to 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.
- 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.
Icons and text.
Input titles and input fields (built into the component).
This spacing is built into:
The button component.
The input component.