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
Space in Orbit – future
Once we have layouts and grids defined, we can create some Sketch templates that can really speed up our design process.
🌌
@tales.ebner is our new Grandmaster of Space. He'll settle this frontier of space for us and offer a more sophisticated guide on how to conquer it.