Version 1.0.0

Spacing

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

Table of contents#

Spacing values
Usage guidelines
Changelog

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 name	Value
spacing-50	2 px
spacing-75	4 px
spacing-100	8 px
spacing-200	12 px
spacing-300	16 px
spacing-400	24 px
spacing-500	32 px
spacing-600	40 px
spacing-700	48 px
spacing-800	64 px
spacing-900	80 px
spacing-1000	96 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#

Date	Number	Notes
Mar 16, 2022	1.0.0	This item has been added to the website

Color

Application frame