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.
Spacing scale
There are 10 units used for all vertical and horizontal spacing increments.
Applying spacing
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.
Example of spacing tokens applied
Other spacing options
There are a few other non-token methods that can be used for spacing elements. Each has its own unique use case.
Designing with space
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.
Proximity
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.
Hierarchy
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
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.
Get the spacing system
Have questions or need support?
Oktanauts can use the following resources when building with Odyssey components:
- Check the Odyssey 1.0 FAQs.
- Join #odyssey in Slack to ask questions and stay up to date about the design system.
- Attend Odyssey Office Hours on Mondays and Wednesdays from 1-1:30 p.m. PT / 4-4:30 p.m. ET.
- Submit bug reports and feature requests to the Odyssey Jira board.