Grids & spacing

We use an 8pt grid system for our designs with breakpoints and column counts to accommodate different sizes of device.

As a guide, in most cases, a maximum width for content of 1440px will be comfortable. However, some elements such as headers, footers, and backgrounds will look best full width with the content centered inside.

Breakpoints

BreakpointColumnsMargins & gutters
< 600416
600 - 839816
840 - 10231216
> 10241624

Spacing

Most of our components use an 8pt grid for spacing. Icons, typography, and some form elements can be aligned to a 4pt grid.

In order to make the system modular, all symbols inside Sketch should be sized by a multiple of 8.

When possible, widths and heights should also follow these rules.