Spacing is an important, often overlooked part of visual design. In Aloha we have created a token system that can help designers and developers in removing the guesswork and work with definite scalable values.

Spacing in Aloha

Aloha employs a spacing system based on tokens that are part of the base token library. We use the same scale for defining space within a component as well as its spacing to other components and the overall screen design. The scale utilises a 4px base value and multipliers of the same for increased spacing. We use this base value in order to align our components to a 4px grid.

Designing with space

Every part of a UI should be intentional including the empty space between elements. The amount of space between them creates relationships and hierarchy.

Creating relationships

Elements in a design that are near to each other are seen as being meaningfully related. As more space is added between elements, their perceived relationship weakens.

Patterns created through spacing can also create relationships. Elements arranged in the same spacing pattern are seen as related pieces that have equal weight.

Space can also be used to denote groups of associated information. This creates content sections on a page without having to use lines or other graphical elements as a divider.

Creating hierarchy

Elements that have more spacing around them tend to be perceived as higher in importance than elements that have less space around them.

Elements that are set close to each other can be easily overlooked. Users may see the grouping but not process each individual item. Therefore, if you have an element or content of high importance on the page, consider giving it extra surrounding space to help it attract focus.

White space

Empty space, also known as white space, is important in design. It can be used to break up sections on a page or to help create focus on certain element(s). White space helps with information processing; too much dense information can be disorienting or overwhelming for a user. Sections of a UI are allowed to be dense, but the whole page should not be crowded; there should be white space to let the user’s eye rest.