Spacing
Our spacing units help us to establish vertical rhythm as well as consitency in distance between horizontal elements.
Vertical Spacing
Ensure vertical spacing is balanced to help establish content hierarchy.
Extra small spacing
4px
Used with discretion, 4px spacing means elements are very tightly packed, most likely used for labels on content cards
Small spacing
8px
Most likely used on cards where space is at a premium to distribute elements
12px
Minimum space between a large title and body copy
Standard spacing
16px
Consider this the baseline spacing unit; this is the minimum to be used on margins for cards or between blocks of content
20px
Used on side drawers or where space is at a premium and 24px is too big
24px
When used on card margins on mobile provides enough space whilst remaining efficient
Medium spacing
32px
Standard distance between input fields
40px
This may be used as a visual aid to give balance to card elements
48px
Recommended distance between primary and secondary buttons and content above
Large spacing
56px
Used as an alternative to 64px as a spacer between sections when 64 feels too big.
64px
Often used on mobile to seperate large sections on landing pages and footer to the above content
XL spacing
80px
Often used within landing page sections to make the space at the top smaller than the bottom to make more visually appealing
96px
Large spacing unit used to seperate large sections on large devices and footer to the above content
128px
Anything using this spacing is most likely marketing led, large imagery or impactful landing pages. Beware of using on mobile due to the scroll size.
Horizontal Spacing
Some introductory text on vertical spacing.
Extra small spacing
4px
Used with discretion, 4px spacing means elements are very tightly packed, most likely used for labels on content cards
Small spacing
8px
Most likely used on cards where space is at a premium to distribute elements
12px
Minimum space between a large title and body copy
Standard spacing
16px
Consider this the baseline spacing unit; this is the minimum to be used on margins for cards or between blocks of content
20px
Used on side drawers or where space is at a premium and 24px is too big
24px
When used on card margins on mobile provides enough space whilst remaining efficient
Medium spacing
32px
Standard distance between input fields
40px
This may be used as a visual aid to give balance to card elements
Large spacing
48px
Recommended distance between primary and secondary buttons and content above
56px
Used as an alternative to 64px as a spacer between sections when 64 feels too big.
XL spacing
64px
Often used on mobile to seperate large sections on landing pages and footer to the above content
How to use spacing
We should aim to retain consistency of spacing between titles, body copy, buttons and landing page sections.
Body and title
Mobile
The distance between a title and body large is 12px
Large displays
The distance between a title and body large increases to 16px
Landing page sections
Mobile
The distance between landing page content sections is 64px on mobile
Large displays
The distance increases between landing page content sections to 96px on large displays
