<aside> <img src="/icons/home_blue.svg" alt="/icons/home_blue.svg" width="40px" /> Home | Foundations | Components | Addons | Patterns
</aside>
Spacing is an important and often overlooked part of visual design.Aqua provides tokens and other utilities to take the guesswork out of spacing and help deliver clear, functional layouts.
Padding, margin, and gap tokens are mapped directly to the existing spacing scale.
| Token | Value |
|---|---|
| 4xs | 1px |
| 3xs | 2px |
| 2xs | 4px |
| 1xs | 6px |
| xs | 8px |
| s | 12px |
| m | 16px |
| ml | 20px |
| l | 24px |
| xl | 32px |
| 2xl | 40px |
| 3xl | 48px |
| 4xl | 56px |
| 5xl | 64px |
| 6xl | 80px |
| 7xl | 96px |
✅ Use padding tokens for internal spacing.
✅ Use margin tokens for spacing between components.
✅ Use gap tokens for spacing between child elements in Auto Layout, Flexbox, and Grid.
✅ Reuse the existing spacing scale through aliases.
❌ Use hardcoded spacing values.
❌ Mix margin and gap for the same purpose.
❌ Create custom spacing values outside the design system scale.
❌ Override token values at the component level unless explicitly required.
Use the spacing scale when building individual components. It includes small increments necessary to create appropriate spatial relationships for detailed designs.
Example spacing scale
The design scale is used to organize components and other parts of the user interface in a complete page layout. It features larger increments that help control the density of a design. Use smaller design tokens to create denser compositions and direct relationships. Use larger tokens to increase whitespace and separate sections.
Example layout scale
The spacing system provides dedicated primitive tokens for padding, margin, and gap, allowing teams to create consistent layouts and component spacing while maintaining alignment with the Boreal spacing scale.
All padding, margin, and gap tokens are aliases of the existing spacing scale and should be used instead of hardcoded values whenever possible.
Padding tokens define the internal space between a container and its content.
Use cases
Examples
padding: $--col-padding-xs;
padding: $--col-padding-s;
padding: $--col-padding-m;
padding: $--col-padding-l;