Skip to content
X-Ray Extensions

X-Ray Extensions·Design Inspector

See the design behind every website.

X-Ray Design Inspector helps you inspect and understand the visual systems behind the web — from typography and color to spacing, layout and assets.

Free to use · Pro from €2.99 / month · 2-day trial, no account

Understand the system.
Not just the surface.

Every website is the result of decisions: a type scale, a spacing rhythm, a handful of colours doing specific jobs. Those decisions are visible in the rendered page, but they are hard to read by hand.

X-Ray reads them for you — in the live page, at rest, without a build step or a screenshot. What it reports is measured, and what it cannot measure reliably it leaves out.

Colours
sorted by role
Type
family, weight, scale
Spacing
scale and off-grid share
Contrast
WCAG 2.1, pairs that occur

Features

Everything you need to inspect a website.

Six ways into the same page. Each one reads the live document — no build step, no screenshots, no guessing.

Inspect colors

Discover the colors used throughout a website — sorted by the job they do, with the contrast pairs that actually occur.

Text
Surface
Border
4.92:1AA

Understand typography

See font families, weights, sizes and hierarchy — and whether those sizes form a scale at all.

Ag42px · 600Display
Ag24px · 500Heading
Ag16px · 400Body

Ratio 1.5 · Perfect fifth

Measure layout

Inspect spacing, dimensions and alignment, from the spacing scale down to the gap between two elements.

4
8
16
24
48
24gap measured between two elements
2.4×

hero.webp

2400×1200

mark.svg

48×48

card.png

800×600

Explore assets

Quickly identify images, icons and other visual assets — including the ones loaded far larger than they are shown.

Analyze the design system

Turn individual observations into a clearer picture of the site's visual system, ready to export as tokens.

--color-blue-600#1F3FBF
--space-416px
--text-lg24px
--radius-sm3px
live page
Grid width1200Columns12

Inspect in context

Keep analysis connected to the actual website instead of working from screenshots alone.

Product

One website. Every detail.

Switch between the layers X-Ray can put over a page. Each one is a view the extension actually draws.

musterwerk.studioColors
Text on surface14.82:1 ✓AAA
42px · 600 · lh 1.0416px · 400 · lh 1.6
162024
1200 px · 12 × 78 px · gutter 24
webp · 2.4×svgpng

9 colours · 3 contrast pairs below AA

Design system

From pixels to a system.

X-Ray does not stop at single values. It looks for the decisions a page repeats — and hands them back as a system you can use.

Color tokens

--color-ink-900#17181A
--color-blue-600#1F3FBF
--color-paper#EDEBE6
--color-grey-500#6A6E75
--color-amber-400#F0B60C
--color-red-600#D2352A

Radius

sm
md
lg
full

Typography scale

  • Aa42 / 600
  • Aa28 / 600
  • Aa24 / 500
  • Aa16 / 400
  • Aa13 / 400

Spacing scale

4
8
16
24
48
96

12 % of spacings sit off the 8 px grid

Layout patterns

1200 px container

12-column grid · 24 gutter

3-up card row

Values are measured. Names are suggestions — the page never told anyone what to call them.

CSSSCSSTailwind 3Tailwind 4Design tokensJSStyle guide

X-Ray Extensions

More tools are coming.

X-Ray Extensions is a growing collection of focused tools built to make the web easier to understand, analyze and work with.

Available now

X-Ray Design Inspector

Inspect websites, uncover design systems and understand the details behind the interface.

  • Inspector with contrast verdicts
  • Colors, typography, layout, assets
  • Accessibility findings (WCAG 2.1)
  • Design system export in seven formats
Coming soon

Alpha Radar

A research and discovery tool for the fast-moving world of Solana tokens.

Coming soon

Pricing

Simple pricing.

The extension is free and complete on its own. Pro unlocks eight further features — try them for 2 days without payment details.

X-Ray Free

€0always

No account, no daily limits, no trimmed results.

  • Inspector, colors, typography, layout
  • Accessibility findings in full
  • Consistency check and CSS variables
  • Grid, fonts, text length, tab order, declutter
  • Vision simulation and full-page screenshots

X-Ray Pro

€2.99per month

Cancel anytime.

  • Design system export in seven formats
  • Report as a standalone HTML file
  • Copy design — page or section as HTML
  • Width sweep across four viewport widths
  • Visual editor with CSS export
  • Template overlay with difference mode
  • Keep tools across reloads
  • Batch download of a page's images
Best value

X-Ray Pro Lifetime

€69.99once

One payment. No recurring subscription.

  • Everything in X-Ray Pro
  • Updates for as long as X-Ray is developed
  • No renewal, no expiry date
  • Pays for itself after two years

Equal to 23 months of X-Ray Pro.

Prices include VAT where applicable · Payments handled by Polar as merchant of record · 3 devices per licence · If a subscription ends, X-Ray Free keeps working in full

FAQ

Questions, answered plainly.

Still unsure? The 2-day trial needs no account and no payment details.

What is X-Ray?
X-Ray Extensions is a small collection of focused browser tools. The first one is X-Ray Design Inspector, which reads the design of the page you are on: colour, typography, spacing, layout, assets and accessibility.
Is X-Ray a browser extension?
Yes. Design Inspector is a Chrome extension built on Manifest V3. It runs entirely in your browser; the analysis never leaves your machine.
What can I inspect with X-Ray?
Colours sorted by role and the contrast pairs that actually occur; font families, weights and the size scale; breakpoints, container widths and the spacing scale; images and SVGs with loaded-versus-displayed size; the machine-testable WCAG 2.1 criteria; the page’s CSS variables; and how many distinct values the page uses overall.
Does X-Ray work with any website?
It works on ordinary web pages, and it reads what is rendered — so it also works on pages built with any framework. It cannot run on browser pages such as chrome:// or on the Chrome Web Store itself, because Chrome does not allow extensions there. X-Ray says so instead of failing silently.
What is included in Pro?
Eight features: design system export in seven formats, the HTML report, copy design, the width sweep, the visual editor, the template overlay, keeping tools across reloads, and the batch download of a page’s images. Everything else — inspector, all analyses, accessibility findings, grid, fonts, text length, tab order, declutter, vision simulation and full-page screenshots — stays free.
Can I cancel my subscription?
Yes, at any time. When the subscription ends, X-Ray falls back to the free version, which remains fully usable. Nothing is lost, because X-Ray stores nothing outside your browser.
What does Lifetime mean?
One payment, no recurring subscription, and updates for as long as the product is developed. To be precise: it is the lifetime of the product, not of the buyer. A licence covers 3 devices, which you can release again in the customer portal.

See the web differently.

Install X-Ray and start exploring the design systems behind the websites you use every day.