A simple system to encourage visual rhythm.
Good spacing systems are based on increments that are visually distinguishable and are backed by solid mathematical principles. This toolkit gives designers and developers guidelines for effectively applying layout spacing, resulting in a more consistent application of space across our product.
Our spacing system is built on a base increment of 16px, with factors of 4px and 8px. The base of 16px also acts as a default spacer, as it is the most widely used spacing increment.
Multiples of 16 make up the upper increments of our spacing system. Please stick to these increments to maintain consistency.
24 is not a multiple of 16, but it is the 3rd most used increment in our system. We have included it order to give designers more flexibility at the smaller end of the spectrum.
A set of nudge classes are available to developers to aid in perfect positioning. These nudge classes are not available to designers and should only be used in components and elements that require it.
To further our understanding and communication of space, we’ve broken down the types of space we apply in our system.
We reference 2 types of space and apply them in 4 ways:
We use basic spacers for anywhere we need to apply horizontal or vertical space in our layouts. While we apply that space in the same way, we reference it’s application differently depending on if it’s horizontal or vertical space.
Inset spacing is used for UI components and containers. We apply that space either in an equal or asymmetrical way.