Developer mode
Opens components on the React tab by default.
Your bookmarks


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.
medium16Great for inner padding, left & right padding of the screen when placing content on mobile.
large24Great for left & right inner padding in sections.
xxx-large52Great for space between illustration and header.