Spacing

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.

Spacing Units

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

Spacing Applied

Spacing 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.

Spacing code

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

Odyssey Foundations Figma

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
  • Request a new component using the Odyssey component proposal.