Consistent spacing makes the interface cleared and easier 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 such as connecting an error message to a form.
x-small8Great to connect related components, like a header and a description.
medium16Great for inner padding, like left & right padding for content on mobile apps.
large24Great for left & right inner padding in sections.
xxx-large52Great for space between illustrations and headers.