Tokens

--font-size-1 … 9

dimension

scaled rem

Radix-relative ladder; avoid direct use when a --text-* alias exists.

--text-title-page

alias

≈ H1

Maps to TextType.Display.

--text-body-base

alias

≈ body

Default paragraph density in product surfaces.

--text-caption

alias

meta

Secondary metadata and table footers.

--spacing-05 … 10

dimension

0.4–8rem

Consumed by Box margin/padding props.

--border-radius-small … full

dimension

rem

Mapped to BorderRadius enum.

--shadow-1 … 5

shadow

stacked opacities

Paired with Elevation on Box.

--z-index-below → tooltip

integer

predefined

Use enums in ZIndex instead of raw numbers in React.

--animation-duration-fast|quick|normal|slow

time

100–300ms

quick (150ms) is the common popover/menu tier; pair with --animation-easing-*.

--animation-easing-*

easing

keyword / cubic-bezier

Includes --animation-easing-ease, --animation-easing-ease-in-out, --animation-easing-ease-in, --animation-easing-ease-out, --animation-easing-emphasized.

--brightness-hover / --brightness-active

number

per theme

Multipliers for filter: brightness() on filled button types; values differ in light vs dark.

--color-transparent-background-hover|active

color

alpha gray

Ghost and secondary-style hover/active surfaces. Swatches on [Colors](./colors#interaction-states).

--affix-padding

dimension

spacing-1

Horizontal inset for input/combobox affix icon regions.

--button-ghost-padding-x|y

dimension

spacing scale

Shared padding for link-style Button and IconButton ghost variants.

--gradient-critical

gradient

conic

Fill for ButtonType.Critical and critical split-button shells.

--message-glow-self / --message-glow-other

shadow

per theme

Component-scoped glow stacks for chat message emphasis; defined in theme files.