Readout

A bookmarklet that reads the design system out of whatever page you are on. Type scale, palette, spacing, declared breakpoints, and the colour pairs that fail contrast. It runs in your browser and sends nothing anywhere.

Install it once

Drag this to your bookmarks bar:

Readout

Then open any page and click it. The panel opens on the right; “Copy JSON” puts the whole readout on your clipboard, and pasting it below renders it in full.

If a site blocks it

Strict sites refuse scripts they did not serve. Open the console and paste this instead:

Read the source →

Paste a readout

Paste the JSON here. Nothing is uploaded: the report is rendered in this page.

What it reads

  • The type scale. Every size that actually renders text, with its weights, line heights, tracking in em, and a sample of the text at that size. Not the sizes declared in the stylesheet: the ones the page uses.
  • The palette. Text, background and border colours, ranked by how often each appears, so the three real colours separate from the forty accidents.
  • Contrast. Each colour pair as rendered, against its true background — the first ancestor that actually paints — with the AA threshold for that text size. This is the section people screenshot.
  • Layout. The most repeated content width, the page margin, the spacing values in use, radii and grid templates.
  • Declared breakpoints. Read from the stylesheets themselves, `rem` converted to px, counted by how many rules sit behind each one.
  • Font files. What the page actually downloaded, and how much it weighed.

Why these numbers can be trusted

Appear animations start elements offset and drop them into place. Measure during one and every position you record includes that offset — which is how you end up with a faithful reproduction of the *animated* state, wrong everywhere, held together by constants that cancel out by luck.

So the script neutralises transforms, transitions and animations before it measures anything, then puts them back. Elements hidden at that moment are excluded and counted, rather than quietly folded in. Stylesheets served from another domain without CORS cannot be read at all: the report says how many, instead of looking complete.

I wrote this method up while rebuilding this site from its Framer original, where it was the difference between pixel-exact and plausible.

Read the article →

Where the data goes

Nowhere. The script runs in your browser, the panel is drawn in a shadow root on the page you are measuring, and this page parses the JSON you paste without sending it anywhere. There is no account, no endpoint, no log. The readout does contain short text samples from the page you measured, so treat it like a screenshot before you post it.

If the readout showed you something you do not like

Rebuilding a site out of a no-code tool, or putting a real design system under one, is a good part of what I do. The measurements above are the first hour of that work.

Talk to me about it

Contact

Ready to bring your vision to life or just want to chat? Reach out, and let's create something memorable together.

I'm here to listen, collaborate, and craft design solutions that resonate.

simongaspar@pm.meView CV