Tokens

tier 2 — classes

Every colour, size, radius and duration in the stylesheet resolves through one of these, and all of them are below — a test compares this page against the token export in both directions. The chips are painted by the token itself, and the values are read from the stylesheet the browser actually loaded, so they follow the theme, the colour-blind palette and any override an app has applied.

Redefine these in your own brand.css, loaded after the library sheet. Never declare a -- name the library does not already define: a future version may introduce that name with a different meaning, and your app breaks on upgrade. The Overview page shows the block to copy.

Typography

--font-sans

…

--font-mono

…

Surfaces, text, lines

--bg

…

--bg-elevated

…

--bg-hover

…

--fg

…

--fg-soft

…

--muted

…

--border

…

--border-strong

…

--border-hover

…

--divider

…

--card-bg

…

--surface-soft

…

--surface-strong

…

--on-solid

…

--redacted

…

Brand — the app override point

--brand

…

--brand-hover

…

--brand-active

…

--brand-soft

…

--brand-text

…

--brand-tint

…

--brand-ring

…

--brand-ring-soft

…

--brand-ring-check

…

--brand-glow

…

--accent

…

--sidebar-bg

…

--sidebar-border

…

--sidebar-fg

…

--sidebar-active

…

Status — go (sends outward)

--go-solid

…

--go-hover

…

--go-active

…

--go-bg

…

--go-border

…

--go-fg

…

--go-ring

…

Status — warn (control changes)

--warn-solid

…

--warn-hover

…

--warn-active

…

--warn-bg

…

--warn-bg-hover

…

--warn-bg-active

…

--warn-border

…

--warn-fg

…

--warn-ring

…

--warn-ring-solid

…

Status — danger

--danger-solid

…

--danger-bg

…

--danger-bg-hover

…

--danger-bg-active

…

--danger-border

…

--danger-border-strong

…

--danger-fg

…

--danger-ring

…

Status — info & secret

--info-bg

…

--info-border

…

--info-fg

…

--info-solid

…

--info-ring

…

--secret-bg

…

--secret-border

…

--secret-fg

…

Categorical badge hues

--badge-cyan-bg

…

--badge-cyan-border

…

--badge-cyan-fg

…

--badge-orange-bg

…

--badge-orange-border

…

--badge-orange-fg

…

--badge-teal-bg

…

--badge-teal-border

…

--badge-teal-fg

…

Component surfaces

--badge-bg

…

--table-head-bg

…

--btn-active-bg

…

--code-fg

…

--code-bg

…

--backdrop

…

--overlay

…

--spotlight-dim

…

--tip-bg

…

--tip-border

…

--tip-fg

…

--scrollbar

…

--scrollbar-hover

…

--scroll-shade

…

--progress-track

…

--skeleton-bg

…

--skeleton-sheen

…

Shadows

--shadow-topbar

…

--shadow-nav-tools

…

--shadow-modal

…

--shadow-tip

…

--shadow-flyout

…

--shadow-dropdown

…

--shadow-float

…

--shadow-pop

…

--reconnect-warn-bg

…

--reconnect-warn-border

…

--reconnect-warn-fg

…

--reconnect-fail-bg

…

--reconnect-fail-border

…

--reconnect-fail-fg

…

Spacing scale

--space-1

…

--space-2

…

--space-3

…

--space-4

…

--space-5

…

--space-6

…

--space-7

…

--space-8

…

--space-9

…

--space-10

…

--space-11

…

Type scale

--text-1

…

--text-2

…

--text-3

…

--text-4

…

--text-5

…

--text-6

…

--text-7

…

--text-8

…

--text-9

…

--text-10

…

--text-11

…

Control height

--control-height-sm

…

--control-height

…

--control-height-lg

…

Corner rounding

--radius-control

…

--radius-surface

…

--radius-panel

…

--radius-inner

…

--radius-small

…

--radius-pill

…

Motion

--motion-fast

…

--motion-mid

…

--motion-slow

…

--spin-duration

…

--progress-duration

…

--skeleton-duration

…

--pulse-duration

…

Density and metrics

--page-max

…

--cell-pad-x

…

--cell-pad-y

…

--code-clamp

…

Browser-drawn chrome

--color-scheme

…

--picker-invert

…