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.
One component, not the whole theme
A shared role moves everything that paints with it: --border is every divider as
well as every field. Where an app needs one part to differ, it has a role of its own that
points at the shared one until redefined — --field-border and
--field-border-focus for the boxes a reader types into, --selected
for the mark on the one chosen, --tab-indicator for the line under the current
tab, --topbar-bg, --topbar-fg, --topbar-muted and
--topbar-hover for the header, --sidebar-muted beside
--sidebar-bg and --sidebar-fg for the sidebar,
--field-border-danger and --field-border-warn for a rejected and an
unusual field, --placeholder for the words in an
empty field, --brand-edge for a filled primary button's outline and
--focus-ring for the ring a focused control draws, --control-border
for the edge of a checkbox, radio and switch, --disabled-fg,
--disabled-bg and --disabled-border for a disabled control, and
--disabled-opacity for how far a disabled control's graphic fades. A text role still has to
clear 4.5:1 on --bg and --card-bg after you move it, and an edge
3:1.
/* brand.css, after the library sheet: a red brand on a wall display, where a red
ring round the record on show would read as a failure. */
:root {
/* Calm lines between cards, firm edges on the fields. */
--field-border: var(--slate-500);
--field-border-focus: var(--fg-soft);
/* The one on show in the page's own ink, the current tab still in the brand. */
--selected: var(--fg);
--tab-indicator: var(--brand-soft);
/* A disabled "Delete (0)" that can still be read. */
--disabled-opacity: 0.6;
}
/* A brand-coloured header in the light variant. */
:root[data-variant="light"] {
--topbar-bg: var(--brand);
--topbar-fg: var(--on-solid);
--topbar-muted: var(--on-solid);
--topbar-hover: var(--brand-hover);
}Typography
--font-sans
…
--font-mono
…
Surfaces, text, lines
--bg
…
--bg-elevated
…
--bg-hover
…
--fg
…
--fg-soft
…
--muted
…
--placeholder
…
--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
…
--brand-edge
…
--accent
…
--state-accent
…
--state-motion
…
Selection
--selected
…
--tab-indicator
…
--row-hover-accent
…
Fields
--field-border
…
--field-border-focus
…
--field-border-danger
…
--field-border-warn
…
--control-border
…
--control-on
…
--focus-ring
…
Disabled
--disabled-fg
…
--disabled-bg
…
--disabled-border
…
Disabled graphics
--disabled-opacity
…
Sidebar
--sidebar-bg
…
--sidebar-border
…
--sidebar-fg
…
--sidebar-muted
…
--sidebar-active
…
--sidebar-hover
…
Topbar
--topbar-bg
…
--topbar-fg
…
--topbar-muted
…
--topbar-hover
…
Sizes
--topbar-height
…
--touch-target
…
--checker-size
…
Panel bars
--modal-head-bg
…
--modal-foot-bg
…
--card-head-bg
…
Status — go (sends outward)
--go-solid
…
--go-hover
…
--go-active
…
--go-bg
…
--go-bg-hover
…
--go-bg-active
…
--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-hover
…
--danger-active
…
--danger-bg
…
--danger-bg-hover
…
--danger-bg-active
…
--danger-border
…
--danger-border-strong
…
--danger-fg
…
--danger-ring
…
Status — info & secret
--info-bg
…
--info-bg-hover
…
--info-bg-active
…
--info-border
…
--info-fg
…
--info-solid
…
--info-on-solid
…
--info-hover
…
--info-active
…
--info-ring
…
--secret-bg
…
--secret-bg-hover
…
--secret-bg-active
…
--secret-border
…
--secret-fg
…
--secret-hover
…
--secret-active
…
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-cyan-bg-hover
…
--badge-cyan-bg-active
…
--badge-cyan-hover
…
--badge-cyan-active
…
--badge-orange-bg
…
--badge-orange-border
…
--badge-orange-fg
…
--badge-orange-bg-hover
…
--badge-orange-bg-active
…
--badge-orange-hover
…
--badge-orange-active
…
--badge-teal-bg
…
--badge-teal-border
…
--badge-teal-fg
…
--badge-teal-bg-hover
…
--badge-teal-bg-active
…
--badge-teal-hover
…
--badge-teal-active
…
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
…
--text-field-touch
…
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
…
--shimmer-duration
…
--caret-duration
…
--flow-duration
…
--stagger-step
…
--hover-delay
…
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
…
--page-rhythm
…
--page-pad
…
--cap-gap
…
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
…
Data in motion
--flow-light
…
--flow-line
…
--flow-tint
…
--flow-glow
…
Agents
--agent-from
…
--agent-to
…
--agent-trail
…
--agent-tint
…
--agent-edge
…
--agent-glow
…
--agent-glow-dim
…
--agent-skeleton-cool
…
--agent-skeleton-warm
…
Agent avatar tones
--agent-sedna-1
…
--agent-sedna-2
…
--agent-sedna-3
…
--agent-aurora-1
…
--agent-aurora-2
…
--agent-aurora-3
…
--agent-ember-1
…
--agent-ember-2
…
--agent-ember-3
…
--agent-orbit-1
…
--agent-orbit-2
…
--agent-orbit-3
…
--agent-nebula-1
…
--agent-nebula-2
…
--agent-nebula-3
…
--agent-glacier-1
…
--agent-glacier-2
…
--agent-glacier-3
…
--agent-sedna-glow
…
--agent-aurora-glow
…
--agent-ember-glow
…
--agent-orbit-glow
…
--agent-nebula-glow
…
--agent-glacier-glow
…
--agent-sphere-gloss
…
--agent-sphere-shade
…
--agent-sphere-rim
…
--agent-sphere-ring
…
--agent-sphere-halo
…
Voice level
Unset until the app writes one, from 0 to 1, on any element above the parts that follow it.
--level
…
Mochi tones
--mochi-pink
…
--mochi-pink-limb
…
--mochi-mint
…
--mochi-mint-limb
…
--mochi-sky
…
--mochi-sky-limb
…
--mochi-lemon
…
--mochi-lemon-limb
…
--mochi-lilac
…
--mochi-lilac-limb
…
--mochi-coral
…
--mochi-coral-limb
…
Mochi details
--mochi-ink
…
--mochi-band
…
--mochi-leg-hi
…
--mochi-leg-mid
…
--mochi-leg-lo
…
--mochi-blush
…
--mochi-tongue
…
--mochi-shade
…
--mochi-light
…
--mochi-dark
…
--mochi-bubble
…
--mochi-bubble-edge
…
--mochi-sweat
…
--mochi-zzz
…
--mochi-deck
…
--mochi-spark
…
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
…