Spacing

Version 1.0.0

Spacing values help to create consistent interfaces by clearly defining relationships between components.

DateVersionSpectrumMar 16, 20221.0.0Download

Spacing values#

Spacing values are static and don’t change based on platform scale. Different spacing values can be used for different sizes and scales as needed.

Design token nameValuespacing-502 pxspacing-754 pxspacing-1008 pxspacing-20012 pxspacing-30016 pxspacing-40024 pxspacing-50032 pxspacing-60040 pxspacing-70048 pxspacing-80064 pxspacing-90080 pxspacing-100096 px

Usage guidelines#

Use spacing between components#

Spacing should be used to define the space between components.

Keep in mind that spacing values don’t apply to the padding within a component. For example, the padding between the top of a button and a label doesn’t use a spacing value.

do
Key example showing correct usage of spacing between two text fields and a button. First text field, label Email address. Second text field, label Password. Button, label Sign in. Spacing between text fields, value spacing-200. Spacing between the second text field and button, value spacing-400.

Use spacing with responsive grids#

Spacing is useful for individual elements that don’t need to adapt responsively to various viewport sizes. Responsive grids should still be used to design overall layouts.

do
Key example of showing spacing within a layout region with two text fields side-by-side, first text field label First name, second text field label Last name, and a button below, label Sign in. Spacing between text fields, value spacing-300. The layout region is aligned to columns in the responsive grid.

Changelog#

DateNumberNotesMar 16, 20221.0.0
  • This item has been added to the website