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.
|Breakpoint||Columns||Margins & gutters|
|600 - 839||8||16|
|840 - 1023||12||16|
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.