Skip to content
install

TWO BUILDS9 browsers

Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build

diagnostic · one of 29free, no counter

Tokens

What design tokens is this page actually painting with?

A design system’s tokens are declared in one place and *painted* in another, and the gap between them is where a theme quietly stops being a theme. This reads the custom properties in scope, works out what each one is from its value rather than from its name, and lets you change one and watch the whole page follow.

Reach itPress ⌘+K on any tab and type tokens.Ctrl+Kon Windows and Linux

Every custom property the page defines, with a value you can change
readscustom properties in scope, resolved
writesan ephemeral override, undone on reload
sendsnothing
kinddecided from the value, not the name
previewscolour, length, shadow, radius, easing
unresolvableno preview, and the row still holds the box
planfree
Add LoupeKit- opens the list of browsers it can be installed in

TWO BUILDS9 browsers

Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build

in the panel · free, no counter

section#about

What this actually is

Auditing a theme, working out which token controls a colour you want to change, or checking that a dark theme really is one variable set rather than two stylesheets. Editing one live is the fastest way to find everything it touches.

section#asked

Asked about this diagnostic

Why does it decide what a token is from its value?

Because names lie and values do not. `--brand-2` is a colour or a spacing step depending on the project; the value settles it. The name is consulted only for a length no shape can distinguish - radius against spacing.

Why do some rows have no preview?

Because a bare length has nothing to draw that is not misleading. The row still reserves the space so the list does not reflow, which matters when there are two hundred of them.

Does editing a token change my site?

No. It changes the live page in your browser on the same undo stack as every other edit here, and Clear LoupeKit changes puts it back.

Is this the same as the extracted design system?

No. That one derives a system from what is painted across the whole page. This one reads the declared custom properties in scope on the element you have selected.

Add LoupeKit- opens the list of browsers it can be installed in

TWO BUILDS9 browsers

Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build

63 of these · no host permissions · three free audits