UIX
Sign in Start free

Free tool, no sign-in

How consistent is your design?

Paste a page address. See every color, font, size, radius and spacing value it uses, and a score out of 100.

Example

Loading an example result…

How to read this

What the result means.

It lists every color, font, font size, corner radius and spacing value a page really uses, and finds the ones that are nearly the same (“you use 15 grays”). Then it scores how consistent the page is, out of 100, and shows exactly where the points went.

Score bands
85–100, Tidy: it already behaves like a design system. 65–84, Some drift: a few values were picked one at a time. 0–64, Needs a system: lots of one-off values.
How points are lost
Starts at 100. Each color over 12 costs 1.5 (up to 25). Each near-duplicate pair costs 1 (up to 15). Each gray over 6 costs 2 (up to 15). Each font family over 2 costs 6 (up to 12). Each font size over 8 costs 2 (up to 15). Each corner radius over 4 costs 2 (up to 10). Spacing off a 4px grid costs up to 10.
Near-duplicate
Two colors so close most people can’t tell them apart: a difference under 0.02 in OKLab, the color space UIX uses. Usually a value someone typed by hand.
Gray
Any color with almost no hue (OKLCH chroma under 0.02), from white to black.
Uses
How many elements on the page use that value as text, background or border color.
4px grid
Spacing that’s a multiple of a quarter of the root font size (4px at 16px). Sites whose spacing grows with the screen show “Fluid” and aren’t scored on it.
Light mode, dark mode
Next to the site name. The check asks the page for its light look; if your browser passes your dark-mode setting through, you get the dark result instead, and the label says so.

How it works

Three steps, all in your browser.

Your page is fetched once, then measured here. The report isn’t saved anywhere.

What you get back

A consistency ring fills to 84 out of 100 next to three chips for colors, fonts and spacing, with near-duplicates called out.

  1. Paste one page addressPick a busy page, like your home page or a product page. The more it shows, the more honest the score.
  2. Press Check pageIt takes 5 to 15 seconds. We read the computed style of every visible element, the same values your browser uses.
  3. Start with the biggest lossLook at the Points column. Merging near-duplicate colors and extra grays usually wins back the most.

Questions

Questions people ask.

Short answers about this tool, your data and what it can’t see.

Ask us anything
Is it free?

Yes. Without an account you see the summary, the score, the score table and the first 24 colors, and you can copy or download that. A free UIX account (no card) shows every example, in the page and in the copy or download.

What is the example result?

The W3C’s “CityLights” demo page, built on purpose to show common mistakes. Your own result replaces it when you run a check.

Where do the numbers come from?

The page is drawn in your browser with its own CSS and fonts, and we read the computed style of every visible element: text, background and border colors, font family, size and weight, corner radius, padding, margin and gap.

Is a low score bad?

It means values were picked one at a time. The site can still look fine, but each new page adds more drift, and an AI agent has no rules to follow. A design system fixes that by giving every value a name.

Why are some pages almost empty?

Pages that build their content with JavaScript after loading show up mostly empty, because the check doesn’t run the page’s scripts (that keeps it safe). Try a page that shows its content without JavaScript, such as a blog post or a docs page.

Do you store my site or the report?

We fetch the page’s HTML once (cached for up to an hour so a second check is quick). Everything else runs in your browser, and the report isn’t saved anywhere.

Start with one color.

Free to start. Your designers, your developers and your AI agent get one system to follow.

Start free Get the Figma plugin