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.