Spacing
Consistent spacing is one of the things that makes interface structure more clear and easy to scan.
Our spacing is based on a 4-pixel grid, let’s use these sizes:
| Size name | Desktop | Mobile | Examples of use |
|---|---|---|---|
| xx-small | 4 | 4 | Great for really small spaces like connecting an error message to form, eg. |
| x-small | 8 | 8 | Great when you need to connect related components, like a header and a description. |
| small | 12 | 12 | |
| medium | 16 | 16 | Great for inner padding, left & right padding of the screen when placing content on mobile. |
| large | 24 | 20 | Great for left & right inner padding in sections. |
| x-large | 32 | 28 | |
| xx-large | 40 | 36 | |
| xxx-large | 52 | 44 | Great for space between illustration and header. |
Space aligning in Sketch
