Version 1.0.0

Spacing

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

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 nameValue
spacing-502 px
spacing-754 px
spacing-1008 px
spacing-20012 px
spacing-30016 px
spacing-40024 px
spacing-50032 px
spacing-60040 px
spacing-70048 px
spacing-80064 px
spacing-90080 px
spacing-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.

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.

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#


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