Theming · 02

Token inspector

A live table of every controllable token, its current value, a swatch or type preview, and a copy chip. Reuses the DataTable primitive and announces updates via aria-live for assistive tech.

Production answer

Token inspector is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Token inspector states
Generative search brief

Token inspector: A live table of every controllable token, its current value, a swatch or type preview, and a copy chip. Reuses the DataTable primitive and announces updates via aria-live for assistive tech.

Use case

Diff a custom theme against a preset. Audit which tokens are still controllable. Copy a token value into an external tool with a single tap.

Presets

Preset cascade

Selecting a preset rewrites the dashboard-root primitive tokens, so every UI primitive route re-skins from the same source.

Inspector

Live tokens

Every controllable token, current value, preview, and copy chip. Updates broadcast as you change presets or individual tokens.

Live
Theme token inspector
Theme token inspector
TokenTypePreviewValue
Canvas--primitive-canvas
surface#050508
Panel--primitive-panel
surfacergba(16, 16, 22, 0.82)
Panel strong--primitive-panel-strong
surfacergba(23, 24, 32, 0.96)
Line--primitive-line
surfacergba(255, 255, 255, 0.13)
Line strong--primitive-line-strong
surfacergba(255, 255, 255, 0.22)
Body text--primitive-body
color#c7c9d0
Muted text--primitive-muted
color#868b98
Strong text--primitive-text-strong
color#ffffff
Primary red--primitive-red
color#e62028
Red dark--primitive-red-dark
color#a8141a
Amber--primitive-amber
color#ffc14f
Teal--primitive-teal
color#40bcff
Green--primitive-green
color#37d67a
Icon obsidian--primitive-icon-obsidian
icon#f4f5fa
Display font--primitive-font-display
typeAa Bb 0123Anton, Impact, sans-serif
Display alt--primitive-font-display-alt
typeAa Bb 0123Oswald, Anton, sans-serif
Body font--primitive-font-body
typeAa Bb 0123Inter, Arial, sans-serif
Mono--primitive-font-mono
typeAa Bb 0123"JetBrains Mono", monospace
Mono techno--primitive-font-mono-techno
typeAa Bb 0123"JetBrains Mono", monospace