Spacing

spacing design tokens are applied in padding and margin properties. They are used to create a consistent spacing within and between components.

List of design token names, values and metadata for

Name	Value
spacing-0	0 dimension.0
spacing-12	2px dimension.12
spacing-25	4px dimension.25
spacing-30 This token is an exception to the scale. Used as vertical `padding` in inputs and controls to achieve the default 32px component height.	5px dimension.30
spacing-35 This token is an exception to the scale. Used as `padding` of the ToggleSwitch component.	6px dimension.35
spacing-50	8px dimension.50
spacing-75	12px dimension.75
spacing-100	16px dimension.100
spacing-125	20px dimension.125
spacing-150	24px dimension.150
spacing-200	32px dimension.200
spacing-250	40px dimension.250
spacing-300	48px dimension.300
spacing-400	64px dimension.400
spacing-half From here on, spacing tokens which are used for positioning values.	50% dimension.half
spacing-full	100% dimension.full
spacing-horizontal-button Padding should equal 12px of spacing minus the width of the border	12px - 1px spacing.75 border-width.base
spacing-horizontal-button-icon-only Padding should equal 6px of spacing minus the width of the border	6px - 1px spacing.35 border-width.base
spacing-horizontal-button-large Padding should equal 16px of spacing minus the width of the border	16px - 1px spacing.100 border-width.base
spacing-horizontal-input-text-two-end-icons Rely on `calc()` to make token output usable in all formats. When there are two end icons, (i.e. a clear icon and an end icon), we need to double the horizontal padding and account for the size of the extra icon. This token can be used to calculate the horizontal position of the clear icon and the padding-end of the text input.	calc( 8px * 2 + 1rem ) spacing.50 size.icon-small
spacing-start-typeahead-search-figure The amount of space between the TypeaheadSearch figure's parent component and the TypeaheadSearch figure (input icon container, search result thumbnail, and footer icon container). We want this space to be uniform so that the figures vertically line up nicely. We use the same horizontal padding as the MenuItem.	12px spacing.75
spacing-start-typeahead-search-icon The padding required for the icon to center align with the menu item thumbnail. We calculate the difference in size and add it to the expected spacing.	calc( 12px + ( 40px - 20px ) / 2 ) spacing.start-typeahead-search-figure min-size.search-figure min-size.icon-medium
spacing-typeahead-search-focus-addition The amount the width of the input increases when it is focused to allow for the extra spacing around the search figures. The caret position should remain static. This calculates the padding-left of the input when expanded minus the padding-left of the input when not expanded. (Note that both padding values actually include `@spacing-50` as well, but it was left out of the calculation for simplicity's sake.)	calc( ( 12px + 40px ) - ( 20px + 8px ) ) spacing.start-typeahead-search-figure min-size.search-figure min-size.icon-medium spacing.50