Skip to content We're live on Product Hunt today Upvote
install

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

diagnostic · one of 36 free, 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 it Press ⌘ + K on any tab and type tokens. Ctrl + K on Windows and Linux

Every custom property the page defines, with a value you can change
reads custom properties in scope, resolved
writes an ephemeral override, undone on reload
sends nothing
kind decided from the value, not the name
previews colour, length, shadow, radius, easing
unresolvable no preview, and the row still holds the box
plan free
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the 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.

how to use tokens

  1. Open Tokens to read the custom properties in scope, resolved to their values.
  2. Each one's kind is decided from its value rather than from its name.
  3. Change one and watch the page. The override is ephemeral and is undone on reload.
  4. That is how you find which token really controls the colour you were trying to change.

written about at length

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

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

70 of these · no host permissions · three free audits