Spacing is the empty area between elements and components. Odyssey's tokens and Figma components make implementing spacing in Workforce products easier and more consistent.
There are 10 units used for all vertical and horizontal spacing increments.
The spacing scale can be applied to margin or padding properties, as well as to both vertical and horizontal edges. The tokens take the place of the values assigned to margin and padding.
There are a few other non-token methods that can be used for spacing elements. Each has its own unique use case.
Every part of a UI should be intentional — including the empty space between elements and components. Consider these elements of composition to create visual relationships.
In design, elements within close proximity are perceived as meaningfully connected. Increasing the distance between elements dilutes this perceived relationship. Patterns of spacing can also establish connections, as elements arranged with uniform spacing are regarded as related and equally significant.
Moreover, space can effectively delineate groups of related information, forming distinct content sections on a page without the need for lines or other visual dividers.
To effectively establish hierarchy through spacing, allocate more surrounding space to essential elements and avoid overcrowding. This not only emphasizes the importance of key elements but also ensures users can easily navigate the content.
By thoughtfully managing spacing, you can create a clear and intuitive hierarchy that highlights crucial information and guides users through your design.
Negative space — also known as empty space — is important in design. It can be used to break up sections of a page or to help create focus on certain elements. Negative 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 negative space to let the user’s eye rest.
Oktanauts can use the following resources when building with Odyssey components: