<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.
The spacing scale can be applied to margin or padding properties, as well as to both vertical and horizontal edges. The token takes the place of the values normally assigned to margin and padding.
margin: $--col-spacing-size-2xs;
margin: $--col-spacing-size-ml;
padding: $--col-spacing-size-xl;
padding: $--col-spacing-size-ml;
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
