Spacing
Spacing tokens define the distances between elements and the internal space within components. Use these instead of raw size values to keep the product's visual rhythm consistent.
padding
Padding tokens define the internal space within components — the gap between the edge of an element and its content. Use these in place of raw size values to maintain consistent component density.
--padding-2xs
4px
--padding-xs
8px
--padding-sm
16px
--padding-md
24px
--padding-lg
32px
spacing
Semantic spacing tokens define the distances between specific elements. Use these instead of raw size values so the product's rhythm can be updated centrally.
--spacing-between-options
List items or radio/checkbox options — stack flush with no gap
0px
--spacing-between-small
Minimum gap for tightly packed small elements
4px
--spacing-between-text
Between stacked text elements, e.g. a label and its supporting copy
8px
--spacing-between-actions
Between icon buttons or secondary actions in a row
8px
--spacing-graphic-bottom
Below an icon or graphic before text begins
8px
--spacing-between-chips
Between chip or tag elements in a group
8px
--spacing-between-cards
Between cards in a list or grid
12px
--spacing-display-text-bottom
Below a large display heading before body copy
16px
--spacing-text-to-component
Between a text label and its input or component
16px
--spacing-component-default-v
Default vertical internal padding inside components
16px
--spacing-component-default-h
Default horizontal internal padding inside components
16px
--spacing-content-to-button
Between body content and a call-to-action button below it
24px
--spacing-screen-mobile
Horizontal screen-edge margin on mobile viewports
24px
--spacing-between-sections
Vertical gap between major content sections
32px