Spacing Units

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.

---

Base Unit - 4px system

Our spacing system is built around a base unit of 4 pixels. This base unit determines the spacing scale and ensures visual consistency across products.

For UI applications: Use spacing coming from Tailwind Don’t use custom or hard-coded values.

---

Scale

Building off of the 4px base unit, the main foundation of our spacing system is the spacing scale. This scale is a limited set of space values that can be used to lay out UI elements in a consistent way.

Each spacing value is a multiple of the base unit and ranges from 0px to 80px to allow for flexibility while still maintaining consistency across different layouts.

---

Margin

Margins are the spaces between the edge of a window area and the elements within that window area.

Margin widths are defined using fixed or scaling values for each window size class. To better adapt to the window, the margin width can change at different breakpoints. Wider margins are more appropriate for larger screens, as they create more open space around the perimeter of content.

---

Padding

Padding refers to the space between UI elements.

Padding can be measured vertically and horizontally and does not need to span the entire height or width of a layout. Padding is measured in increments of 4px.

---

Value Usage

Small values

Use the spacing value from tailwind (0px to 8px) for small and compact pieces of UI.

• Gap between small icons and text

• Container padding of small components (ie badges, icon buttons, table cells)

• Gap between repeating elements (ie button groups)

• Padding within input components

• Vertical spacing between elements in a card (i.e. a title and description, a description and actions)

• Gap between the trigger and elevated element (i.e. between dropdown button & menu)

Medium values

Use the spacing value from tailwind (12px to 24px) for larger and less dense pieces of UI.

• Container padding of larger components (ie buttons)

• Space between avatar/large icon and content (ie section messages)

• Vertical spacing between elements in cards

• Spacing between items in less densely packed or larger components

Large values

Use the spacing value from tailwind (32px to 80px) for the largest pieces of UI and for layout elements.

• The space between content on the page (ie spacing between top of page and header)

• Alignment within larger pieces of content (ie alignment of content in Flag)