Tokens
tier 2 — classesEvery colour, size, radius and duration in the stylesheet resolves through one of these, and all of them are below. 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
Load it 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.
Getting started has 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
…
--on-viz
…
--redacted
…
Named surfaces and elevation
--surface-app
…
--surface-chrome
…
--surface-content
…
--surface-raised-1
…
--surface-raised-2
…
--surface-raised-3
…
Brand — the app override point
--brand
…
--brand-hover
…
--brand-active
…
--brand-soft
…
--brand-text
…
--brand-tint
…
--brand-tint-strong
…
--brand-ring
…
--brand-ring-soft
…
--brand-ring-check
…
--brand-glow
…
--accent
…
--state-accent
…
--state-motion
…
Sidebar
--sidebar-bg
…
--sidebar-border
…
--sidebar-fg
…
--sidebar-active
…
--sidebar-hover
…
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
…
Severity — an ordered five-step ramp
--sev-1-solid
…
--sev-1-bg
…
--sev-1-border
…
--sev-1-fg
…
--sev-2-solid
…
--sev-2-bg
…
--sev-2-border
…
--sev-2-fg
…
--sev-3-solid
…
--sev-3-bg
…
--sev-3-border
…
--sev-3-fg
…
--sev-4-solid
…
--sev-4-bg
…
--sev-4-border
…
--sev-4-fg
…
--sev-5-solid
…
--sev-5-bg
…
--sev-5-border
…
--sev-5-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
…
--media-bg
…
--media-scrim
…
--tip-bg
…
--tip-border
…
--tip-fg
…
--scrollbar
…
--scrollbar-hover
…
--scroll-shade
…
--progress-track
…
--skeleton-bg
…
--skeleton-sheen
…
--presence-out-of-office
…
Shadows
--shadow-topbar
…
--shadow-bottombar
…
--shadow-nav-tools
…
--shadow-modal
…
--shadow-tip
…
--shadow-flyout
…
--shadow-dropdown
…
--shadow-float
…
--shadow-pop
…
--shadow-tile
…
--shadow-edge-start
…
--shadow-edge-end
…
Reconnect banner
--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
…
Choice inset
--choice-inset-check
…
--choice-inset-switch
…
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
…
--card-pad-block
…
--card-pad-inline
…
--list-pad-block
…
--list-pad-inline
…
--list-gap
…
--list-lines
…
--code-clamp
…
Safe area
What this device has taken from each edge: 0px on a desktop and wherever nothing is in the way, the home indicator, notch or rounded corner on a phone or a tablet. A rule that adds the token is right on both without asking what it is running on; the host page needs viewport-fit=cover for the values to arrive at all.
--safe-block-start
…
--safe-block-end
…
--safe-inline-start
…
--safe-inline-end
…
Data visualisation
--viz-1
…
--viz-2
…
--viz-3
…
--viz-4
…
--viz-5
…
--viz-6
…
--viz-previous
…
Browser-drawn chrome
--color-scheme
…
--picker-invert
…
Palette — the two absolutes
--white
…
--black
…
Palette — slate (the neutral spine)
--slate-50
…
--slate-100
…
--slate-200
…
--slate-300
…
--slate-400
…
--slate-500
…
--slate-600
…
--slate-700
…
--slate-750
…
--slate-800
…
--slate-850
…
--slate-900
…
--slate-925
…
--slate-950
…
Palette — coral (the brand ramp)
--coral-50
…
--coral-100
…
--coral-200
…
--coral-300
…
--coral-400
…
--coral-500
…
--coral-600
…
--coral-700
…
--coral-800
…
--coral-900
…
--coral-950
…
Palette — orbit (accent and information)
--orbit-50
…
--orbit-100
…
--orbit-200
…
--orbit-300
…
--orbit-400
…
--orbit-500
…
--orbit-600
…
--orbit-700
…
--orbit-800
…
--orbit-900
…
--orbit-950
…
Palette — navy (mark and illustration only)
--navy-50
…
--navy-100
…
--navy-200
…
--navy-300
…
--navy-400
…
--navy-500
…
--navy-600
…
--navy-700
…
--navy-800
…
--navy-900
…
--navy-950
…
Palette — green (go)
--green-200
…
--green-300
…
--green-400
…
--green-500
…
--green-600
…
--green-700
…
--green-800
…
--green-900
…
Palette — amber (warn)
--amber-200
…
--amber-300
…
--amber-400
…
--amber-500
…
--amber-600
…
--amber-700
…
--amber-800
…
--amber-900
…
Palette — crimson (danger)
--crimson-200
…
--crimson-300
…
--crimson-400
…
--crimson-500
…
--crimson-600
…
--crimson-700
…
--crimson-800
…
--crimson-900
…
Palette — violet (secret)
--violet-200
…
--violet-300
…
--violet-400
…
--violet-500
…
--violet-600
…
--violet-700
…
--violet-800
…
--violet-900
…
Palette — cyan
--cyan-200
…
--cyan-300
…
--cyan-400
…
--cyan-500
…
--cyan-600
…
--cyan-700
…
--cyan-800
…
--cyan-900
…
Palette — orange
--orange-200
…
--orange-300
…
--orange-400
…
--orange-500
…
--orange-600
…
--orange-700
…
--orange-800
…
--orange-900
…
Palette — teal
--teal-200
…
--teal-300
…
--teal-400
…
--teal-500
…
--teal-600
…
--teal-700
…
--teal-800
…
--teal-900
…
Palette — indigo (inline code)
--indigo-200
…
--indigo-300
…
--indigo-400
…
--indigo-500
…
--indigo-600
…
--indigo-700
…
--indigo-800
…
--indigo-900
…