All designs work should start with the smallest viewport size and work upwards. We support a number of breakpoints across our platform.
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.
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.
| 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 |
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.
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 is the application of repeatable vertical spacing to the elements on screen.
Again we use a soft grid based around an 8px measure.