Overview

All designs work should start with the smallest viewport size and work upwards. We support a number of breakpoints across our platform.

Mobile First

It’s critical mobile customers receive the best possible experience so it’s our starting point for all work undertaken.

Working in a smaller viewport allows us to deliver the most critical user journeys, then we scale up supporting content as the viewport space allows.

Layouts

Below are the currently supported breakpoints, the breakpoints have not been specifically named as in the growing market of touch enabled laptops and monitors it is not a clear label.

Further information about out layout grids dimensions are found in the Compound Overview guidelines.

Breakpoints

Min (px) Max(px) Name Example Devices
0 479 Small iPhone SE, iPhone 8, iPhone 13, 12 Pro Max, Google Pixel, Galaxy Note
480 767 Small Kindle Fire
768 1023 Medium iPad Mini Air
1024 1365 Medium iPads Landscape/Small Desktop
1366 1440 Large HD Laptops, iPad Pro 12”, 13” Macbook Pro

Written Content

Layout Grid

All of our designs should fit to an 8px soft grid, 4px can be used in components for narrow padding.

Our grid component file contains optional layout grid styles that can applied to any frame, these are available as a layout grid style in Figma.

CleanShot 2022-06-21 at 16.27.06.png

These layout styles are made up of the following columns, gutters and margins. All of the layouts should be center-aligned to the canvas.

Size Columns Column Width Gutter Width Total Layout Artboard Frame Margin Width
Small 4 60px 16px 375px Center Aligned
Medium 8 64px 32px 768px Center Aligned
Large 12 68px 32px 1156px 1440px 10px

Vertical rhythm

Vertical rhythm is the application of repeatable vertical spacing to the elements on screen.

Again we use a soft grid based around an 8px measure.