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. |