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 name | Value | Examples of use |
---|---|---|
xx-small | 4 | Great for really small spaces like connecting an error message to form, eg. |
x-small | 8 | Great when you need to connect related components, like a header and a description. |
small | 12 | |
medium | 16 | Great for inner padding, left & right padding of the screen when placing content on mobile. |
large | 24 | Great for left & right inner padding in sections. |
x-large | 32 | |
xx-large | 40 | |
xxx-large | 52 | Great for space between illustration and header. |