Overview

We base all of our layouts, spacing, icons and typography on an 8px grid system, because the majority of popular screen sizes are divisible by 8 which makes for an easy fit. That means we use increments of 8 to size and space out the elements on a page, so any defined height or width, margin or padding will be an increment of 8. If we need a smaller increment, we use 4px.

8px increments
Icon size increments of 8px
Vertical spacing
Vertical spacing
Component spacing
Simple Component Spacing
Examples

Buttons, typography, icons, grid.

Desktop spacing
Icon size increments of 8px
Mobile spacing
Icon size increments of 8px