Spacing and layout

Standardised spacing and layout aids usability by creating a visual rhythm and hierarchy, guaranteeing a consistent and predictable app experience.

Setting the rhythm

We know that spacing and layout are not just aesthetic choices – they are
the most critical components for usability, legibility, and visual consistency within our design system.

They establish the grid, rhythm, and hierarchy that guide the user's eye and ensure a predictable, harmonious experience across all screens and components.

XS <359px

Vertical padding (main sections): 24px

Vertical padding (sub-sections): 16px

Gutters: 16px

From header to page content: 24px

Max content width: 420px

Small 360-576px

Vertical padding (main sections): 24px

Vertical padding (sub-sections): 16px

Gutters: 16px

From header to page content: 24px

Max content width: 420px

Medium 577-960px

Vertical padding (main sections): 32px

Vertical padding (sub-sections): 24px

Gutters: 32px

From header to page content: 32px

Max content width: 420px

Large 961-1200px

Vertical padding (main sections): 32px

Vertical padding (sub-sections): 24px

Gutters: 80px

From header to page content: 32px

Max content width: 864px

Home

The spacing system defines the specific, predetermined values used for margins, padding and the gaps between elements.

The 8-point grid: 
We will primarily utilise an 8-point grid, meaning all spacing values (like 8, 16, 24, 32 points, etc) must be a multiple of 8.

In the instance of intricate detail, 4px spacing can be used.


1. From base of balance card
to top of quick actions
2. From base of quick actions
to top of first row of cards
3. Between rows of cards

1. Between sections
2. From base of section
header to top of cards in section
3. Between cards within
sub-sections
4. Between main sections
5. Between main sections

Layer 1

1. From base of header to
top of hero bills cards
2. From base of hero cards to
top of quick actions
3. From base of quick actions to
top of section header
4. From base of heading to top of action list

1. Between main sections
2. From base of hero card
to top of quick actions
3. From base of quick actions
to top of first card
4. Between main sections

1. From base of tabs
to top of hero card
2. Between main
sections
3. Spacing within
sub-sections
4. Between main
sections
5. Spacing within
sub-sections

1. 0px – tabs sit below header
2. From base of tabs to top
of hero card
3. From base of hero card
to top of filters
4. From base of filters to
start of next section

Hierarchy



Layouts must clearly communicate the importance of information, often by placing primary content 
in dominant, central areas and using size and proximity to group related items.

Consistency

The placement of common elements, such as navigation tray, headers and primary actions (CTAs), must remain fixed to build user familiarity and predictability.

Adaptability

Our layouts must be responsive or adaptive, ensuring they maintain their integrity, readability and function when viewed on small phones, tablets, or folded devices.