Shape & depth

dimension.radius.small

--semantic-dimension-radius-small

Use for intentionally subtle corner rounding where the default radius is too pronounced.

dimension.radius.default

--semantic-dimension-radius-default

Use for borders and container corners by default; choose another radius token only when the component has a specific shape requirement.

dimension.radius.medium

--semantic-dimension-radius-medium

Use when a T-shirt-sized radius scale is explicitly required and a medium radius fits the component.

dimension.radius.large

--semantic-dimension-radius-large

Use for intentionally prominent corner rounding where the default radius is not strong enough.

dimension.radius.full

--semantic-dimension-radius-full

Use for pills and circular shapes that require complete roundness regardless of element size.

dimension.borderWidth.small

--semantic-dimension-border-width-small

Use for subtle 1px borders that need less visual emphasis than the default.

dimension.borderWidth.default

--semantic-dimension-border-width-default

Use as the default 2px border width. Choose a T-shirt size only when the default is not appropriate.

dimension.borderWidth.focusRing

--semantic-dimension-border-width-focus-ring

Use for the width of the keyboard-focus ring, whether it is drawn outside a control or inset within it.

dimension.borderWidth.medium

--semantic-dimension-border-width-medium

Use for the default 2px border treatment.

dimension.borderWidth.large

--semantic-dimension-border-width-large

Use for prominent borders that need the strongest visual emphasis.

number.scale.navigationMenu

--semantic-number-scale-navigation-menu

Component token for the size the navigation menu popup grows from as it opens.

number.scale.popup

--semantic-number-scale-popup

Use for the size popups grow from as they open and shrink to as they close.

number.scale.rest

--semantic-number-scale-rest

Use for the element's own size when it is not moving.

shadow.popup

--semantic-shadow-popup

Use to separate floating panels such as dropdowns from the surface beneath them.

shadow.sticky

--semantic-shadow-sticky

Use under sticky elements, such as a pinned toolbar or table of contents, while content scrolls beneath them. Fade it in as content starts to pass underneath.

number.layer.background

--semantic-number-layer-background

Use for decorative content placed behind other content within an isolated component or application stacking context.

number.layer.raised

--semantic-number-layer-raised

Use to lift an element above its siblings within the same stacking context, such as a control overlapping a field or text above a decorative bleed.

number.layer.floating

--semantic-number-layer-floating

Use for panels anchored in the page that scroll with it, such as a compact table of contents opened in place. They stay below sticky page chrome.

number.layer.sticky

--semantic-number-layer-sticky

Use for sticky or fixed page chrome that content scrolls under, such as a sticky header or a fixed side navigation.

number.layer.overlay

--semantic-number-layer-overlay

Use when a host application needs an explicit overlay layer above its content, such as a skip link. Keep document-ordered portal families, including Base UI nested popups, on a consistent automatic layer instead of assigning this value to individual parts.

number.opacity.disabled

--semantic-number-opacity-disabled

Use as the opacity for disabled elements that remain visible but unavailable for interaction.

number.opacity.hidden

--semantic-number-opacity-hidden

Use for the transparent end of a fade, such as a popup before it opens or after it closes.

number.opacity.stale

--semantic-number-opacity-stale

Use for content shown while its replacement loads, such as the previous page during navigation. Do not use for disabled elements; use disabled.

number.opacity.pulse

--semantic-number-opacity-pulse

Use for the dim end of a loading pulse, such as a skeleton, alternating with visible over transition.pulse. Do not use for disabled elements.

number.opacity.visible

--semantic-number-opacity-visible

Use for the fully opaque end of a fade, such as an open popup.