Design Guidelines

Introduction |  Notifications |  Grids |  Colours |  Typography |  Image Sizes |  Padding and Spacing |  Modals |  Icons |  Social Norms |  Dividers
Tables |  Package Selector |  Timelines |  Progress Indicator |  CTAs and Buttons |  Forms |  Tooltips |  Accordions |  Loaders | 

Grids and breakpoints


We use a flexible grid that ranges from two to twelve columns, depending on the breakpoint. The columns are used to align content and ensure a consistent layout across the site. The margins and gutters around the columns are a fixed size.

The maximum content width is 1200px. Images and backgrounds can bleed to the width of the browser, but all other content must stay within the content grid.


As the columns expand across breakpoints, the gutters will always stay fixed at 20px.

Breakpoints (bp)

We have five breakpoints in order to deliver the best experience to our customers.

These breakpoints are:


320bp (320 to 599px)

Content 290px

Columns 2 x 135px

Gutters 20px

Margins (minimum) 15px

600bp (600 to 767px)

Content 556px

Columns 4 x 125px

Gutters 20px

Margins (minimum) 20px

768bp (768 to 959px)

Content 724px

Columns 12 x 42px

Gutters 20px

Margins (minimum) 20px 

960bp (960 to 1199px)

Content 916px

Columns 12 x 58px

Gutters 20px

Margins (minimum) 20px

1200 bp

Content 1156px
Columns 12 x 78px
Gutters 20px
Margins (minimum) 20px