Your bookmarks

Spacing

Consistent spacing makes an interface more clear and easy to scan.

Our spacing is based on a 4-pixel grid, please use only these sizes:

Size nameValueExamples of use
xx-small4Great for really small spaces like connecting an error message to form, eg.
x-small8Great when you need to connect related components, like a header and a description.
small12 
medium16Great for inner padding, left & right padding of the screen when placing content on mobile.
large24Great for left & right inner padding in sections.
x-large32 
xx-large40 
xxx-large52Great for space between illustration and header.