# Flash Inspect: Design Token & Font Inspector for Chrome

> Hover any element on any website to see the design token behind its colour, font, spacing and radius, and catch values a pixel off the system.

- Source: https://flashdsm.com/inspect
- Site: Flash DSM (https://flashdsm.com)

---

## What the card tells you

- **declared** (`padding-x --space-6 24px`): The page sets this through a token, and the value checks out against what the browser drew.
- **hardcoded** (`fill --accent #c2410c`): The value equals a token, typed out by hand. It looks right today and drifts the day the token changes.
- **nearest** (`padding --space-6 23px`): A pixel or two off a token. Almost always a mistake, and the first sign of a system coming apart.
- **no token** (`text #6b5d4f`): A raw value with nothing in the system near it. Either a token is missing or this should not exist.

## How it reads a page

1. **It reads the page's own stylesheets.** Including the ones served from a CDN, which it fetches itself without your cookies. Cascade layers, media queries, nesting and web components are all read.
2. **It replays the cascade for what you point at.** Which rule won, which var() it used, and every alias from there down to the value: --btn-bg, then --primary, then --blue-600.
3. **It checks its own answer.** The chain is substituted and compared with what the browser actually drew. A token is named only when the two agree; otherwise the card falls back to the nearest token and says so.
4. **It speaks the page's framework.** Tailwind v4 and v3, shadcn/ui, Bootstrap, MUI, Material, Primer and more. On a Tailwind page a padding reads as p-4, or --spacing × 4, not as a number.

## Questions

### Does it work on every site?

Most. Chrome keeps extensions off chrome:// pages, the Web Store and its PDF viewer. Canvas apps such as Figma draw pixels rather than elements, so there is little to read there.

### What about iframes?

It inspects the page you clicked on. Frames embedded from other sites are not inspected yet.

### Which browsers?

Chrome, Edge, Arc, Brave and Opera on a desktop. Firefox and Safari are next.

### What does it cost?

Nothing. Inspecting is free. Checking a site against your own Flash design system will be part of the paid plans.

### The site has no tokens at all. Is it any use?

That is where it helps most. Every value shows raw, and values that nearly repeat each other stand out. That list is the start of a design system.