Spacing

The consistent and intentional use of a spacing system creates a more harmonious experience for the end user. A spacing system also lays a foundation for responsive design and customisable UI density in the future, which will enhance the overall quality and accessibility of our products.

• Gap between icons
• Container padding of small components (i.e., icon buttons, table cells, badges)
• Gap between repeating elements (i.e., button groups)
• Padding within input components
• Vertical spacing between elements in a card
• Gap between the trigger and elevated elements (i.e., between dropdown button & menu)

• Container padding of larger components (i.e., buttons)
• Space between avatar icon and content (i.e., section messages)
• Vertical spacing between elements in cards
• Spacing between items in less densely packed or larger components

• The space between content on the page (i.e., spacing between top of page and header)
• Alignment within larger pieces of content

Applied to Small + Medium size values (0 to 24px).
Users expect elements to be grouped semantically. Using consistent spacing around elements lends them a visual similarity that helps the user understand their semantic relationship.

Applied to Medium size value (12 to 24px).
The distance between elements creates semantic meaning. Elements that are placed close to one another are assumed to be related. Use this principle to create meaning by placing more related objects close together, and less related objects further apart.

Applied to Small + Medium size values (0 to 24px).
Users look for order in visual information to reduce the mental effort required to scan and process data. Therefore, the ordering of elements on a page can be used to encourage users to follow a certain flow or journey.