Space & size

• dimension.space.padding.none

  --semantic-dimension-space-padding-none

  Use when a container intentionally requires no internal space.

  Value

  0rem dimension.0

• dimension.space.padding.xxxSmall

  --semantic-dimension-space-padding-xxx-small

  Use for the smallest nonzero internal space when only hairline separation is needed.

  Value

  0.0625rem · 1px dimension.25

• dimension.space.padding.xxSmall

  --semantic-dimension-space-padding-xx-small

  Use for extremely tight internal space around closely fitted content.

  Value

  0.125rem · 2px dimension.50

• dimension.space.padding.xSmall

  --semantic-dimension-space-padding-x-small

  Use for very compact internal space around closely fitted content.

  Value

  0.25rem · 4px dimension.100

• dimension.space.padding.small

  --semantic-dimension-space-padding-small

  Use for compact internal space around content.

  Value

  0.375rem · 6px dimension.150

• dimension.space.padding.medium

  --semantic-dimension-space-padding-medium

  Use as the default internal space around content.

  Value

  0.5rem · 8px dimension.200

• dimension.space.padding.large

  --semantic-dimension-space-padding-large

  Use for generous internal space around content.

  Value

  0.75rem · 12px dimension.300

• dimension.space.padding.xLarge

  --semantic-dimension-space-padding-x-large

  Use for substantial internal space around prominent content regions.

  Value

  1rem · 16px dimension.400

• dimension.space.padding.xxLarge

  --semantic-dimension-space-padding-xx-large

  Use for extra internal space around large content regions.

  Value

  1.5rem · 24px dimension.600

• dimension.space.padding.xxxLarge

  --semantic-dimension-space-padding-xxx-large

  Use for expansive internal space around major content regions.

  Value

  2rem · 32px dimension.800

• dimension.space.padding.xxxxLarge

  --semantic-dimension-space-padding-xxxx-large

  Use for the largest internal space in this scale around major content regions.

  Value

  3rem · 48px dimension.1200

• dimension.space.gap.xxSmall

  --semantic-dimension-space-gap-xx-small

  Use for the tightest separation between elements that remain visually distinct.

  Value

  0.125rem · 2px dimension.50

• dimension.space.gap.xSmall

  --semantic-dimension-space-gap-x-small

  Use for very compact separation between closely related elements.

  Value

  0.25rem · 4px dimension.100

• dimension.space.gap.small

  --semantic-dimension-space-gap-small

  Use for compact separation between related elements.

  Value

  0.5rem · 8px dimension.200

• dimension.space.gap.medium

  --semantic-dimension-space-gap-medium

  Use as the default separation between adjacent elements.

  Value

  1rem · 16px dimension.400

• dimension.space.gap.large

  --semantic-dimension-space-gap-large

  Use for strong separation between distinct groups of elements.

  Value

  1.5rem · 24px dimension.600

• dimension.space.gap.xLarge

  --semantic-dimension-space-gap-x-large

  Use for the strongest separation between major groups of elements.

  Value

  2rem · 32px dimension.800

• dimension.space.flow.xSmall

  --semantic-dimension-space-flow-x-small

  Use between a minor heading and the content it introduces.

  Value

  0.5rem · 8px dimension.200

• dimension.space.flow.small

  --semantic-dimension-space-flow-small

  Use as the default space between consecutive blocks, and between a subsection heading and its content.

  Value

  1rem · 16px dimension.400

• dimension.space.flow.medium

  --semantic-dimension-space-flow-medium

  Use around code blocks, before minor headings, and between a section heading and its content.

  Value

  1.5rem · 24px dimension.600

• dimension.space.flow.large

  --semantic-dimension-space-flow-large

  Use around quotations and media, and before subsection headings.

  Value

  2rem · 32px dimension.800

• dimension.space.flow.xLarge

  --semantic-dimension-space-flow-x-large

  Use before section headings and around thematic breaks.

  Value

  3rem · 48px dimension.1200

• dimension.space.control.gap.small

  --semantic-dimension-space-control-gap-small

  Use between children in compact controls.

  Value

  0.25rem · 4px dimension.100

• dimension.space.control.gap.medium

  --semantic-dimension-space-control-gap-medium

  Use between children in default-size controls.

  Value

  0.375rem · 6px dimension.150

• dimension.space.control.gap.large

  --semantic-dimension-space-control-gap-large

  Use between children in spacious controls.

  Value

  0.5rem · 8px dimension.200

• dimension.space.control.gap.xLarge

  --semantic-dimension-space-control-gap-x-large

  Use between children in wide controls that need greater separation than spacious controls.

  Value

  1rem · 16px dimension.400

• dimension.space.control.padding.block.small

  --semantic-dimension-space-control-padding-block-small

  Use for vertical padding in compact controls.

  Value

  0.25rem · 4px dimension.100

• dimension.space.control.padding.block.medium

  --semantic-dimension-space-control-padding-block-medium

  Use for vertical padding in default-size controls.

  Value

  0.375rem · 6px dimension.150

• dimension.space.control.padding.block.large

  --semantic-dimension-space-control-padding-block-large

  Use for vertical padding in spacious controls.

  Value

  0.5rem · 8px dimension.200

• dimension.space.control.padding.inline.xSmall

  --semantic-dimension-space-control-padding-inline-x-small

  Use for the tightest horizontal padding in extra-compact controls.

  Value

  0.25rem · 4px dimension.100

• dimension.space.control.padding.inline.small

  --semantic-dimension-space-control-padding-inline-small

  Use for horizontal padding in compact controls.

  Value

  0.5rem · 8px dimension.200

• dimension.space.control.padding.inline.medium

  --semantic-dimension-space-control-padding-inline-medium

  Use for horizontal padding in default-size controls.

  Value

  0.75rem · 12px dimension.300

• dimension.space.control.padding.inline.large

  --semantic-dimension-space-control-padding-inline-large

  Use for horizontal padding in spacious controls.

  Value

  1rem · 16px dimension.400

• dimension.size.xxxSmall

  --semantic-dimension-size-xxx-small

  Use for the thinnest bounded elements, such as a thin meter track.

  Value

  0.25rem · 4px dimension.100

• dimension.size.xxSmall

  --semantic-dimension-size-xx-small

  Use for tiny bounded elements when extreme compactness is required.

  Value

  0.5rem · 8px dimension.200

• dimension.size.xSmall

  --semantic-dimension-size-x-small

  Use for very small bounded elements when compactness is more important than prominence.

  Value

  1rem · 16px dimension.400

• dimension.size.icon

  --semantic-dimension-size-icon

  Use for the box of an icon in a control or row, including Material's margin around the glyph. Checkbox, radio, and switch indicators and brand logos keep their own sizes.

  Value

  1.25rem · 20px dimension.500

• dimension.size.small

  --semantic-dimension-size-small

  Use for small bounded elements that should remain secondary to surrounding content.

  Value

  1.5rem · 24px dimension.600

• dimension.size.medium

  --semantic-dimension-size-medium

  Use as the default size for bounded interface elements.

  Value

  2rem · 32px dimension.800

• dimension.size.large

  --semantic-dimension-size-large

  Use for large bounded elements that need additional prominence or a larger target.

  Value

  2.5rem · 40px dimension.1000

• dimension.size.xLarge

  --semantic-dimension-size-x-large

  Use for the largest bounded elements in this scale when they should be visually prominent.

  Value

  3rem · 48px dimension.1200

Scaled: full width is 96rem (1536px)

• dimension.size.sidebar

  --semantic-dimension-size-sidebar

  Use as the default inline size for expanded side navigation and supporting page regions, independently of the main content grid.

  Value

  14.625rem · 234px dimension.5850

• dimension.size.topNavigation

  --semantic-dimension-size-top-navigation

  Use as the block size of the top navigation bar, including its bottom border and excluding any safe-area inset. Derive sticky offsets and scroll padding below the bar from it rather than repeating the value.

  Value

  4rem · 64px dimension.1600

Scaled: full width is 96rem (1536px)

• dimension.size.maxWidth.content.small

  --semantic-dimension-size-max-width-content-small

  Use as the maximum inline size for compact content regions.

  Value

  30rem · 480px dimension.12000

• dimension.size.maxWidth.drawer

  --semantic-dimension-size-max-width-drawer

  Component token for the maximum inline size of a drawer that slides in from the side or bottom, which shrinks to fit narrower windows.

  Value

  30rem · 480px dimension.12000

• dimension.size.maxWidth.popover

  --semantic-dimension-size-max-width-popover

  Component token for the maximum inline size of a popover, which shrinks to the space available beside its trigger.

  Value

  40rem · 640px dimension.16000

• dimension.size.maxWidth.content.medium

  --semantic-dimension-size-max-width-content-medium

  Use as the maximum inline size for a single column of page content, such as documentation text with its examples.

  Value

  48rem · 768px dimension.19200

• dimension.size.maxWidth.modal

  --semantic-dimension-size-max-width-modal

  Component token for the maximum inline size of a modal dialog, which shrinks to fit narrower windows.

  Value

  48rem · 768px dimension.19200

• dimension.size.maxWidth.text

  --semantic-dimension-size-max-width-text

  Use as the maximum inline size of running text, the longest its lines should get, such as paragraphs and list items in long-form content.

  Value

  52rem · 832px dimension.20800

• dimension.size.maxWidth.content.large

  --semantic-dimension-size-max-width-content-large

  Use as the maximum inline size for broad page content, excluding surrounding gutters and side regions.

  Value

  76rem · 1216px dimension.30400

• dimension.size.maxHeight.searchDialog

  --semantic-dimension-size-max-height-search-dialog

  Component token for the maximum block size of a search dialog, which grows with its results up to this size and shrinks to fit shorter windows.

  Value

  30rem · 480px dimension.12000

Scaled: full width is 96rem (1536px)

• dimension.breakpoint.xSmall

  --semantic-dimension-breakpoint-x-small

  Use as the earliest shared minimum-width breakpoint for layout changes beyond the narrowest presentation.

  Value

  40rem · 640px dimension.breakpoint.250

• dimension.breakpoint.small

  --semantic-dimension-breakpoint-small

  Use as the second shared minimum-width breakpoint for layout changes that require more inline space.

  Value

  48rem · 768px dimension.breakpoint.300

• dimension.breakpoint.medium

  --semantic-dimension-breakpoint-medium

  Use as the middle shared minimum-width breakpoint for substantial layout restructuring.

  Value

  64rem · 1024px dimension.breakpoint.400

• dimension.breakpoint.large

  --semantic-dimension-breakpoint-large

  Use as the shared minimum-width breakpoint for wide-layout changes.

  Value

  80rem · 1280px dimension.breakpoint.500

• dimension.breakpoint.xLarge

  --semantic-dimension-breakpoint-x-large

  Use as the widest shared minimum-width breakpoint for changes intended only for very wide layouts.

  Value

  96rem · 1536px dimension.breakpoint.600