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