MiroMiroMiroMiroAPI
Key
Use case

Your design system says #635bff. What is production actually shipping?

Extract the tokens a live page really renders and diff them against your source of truth. Run it in CI and drift stops being something you discover six months late.

Get a free API key Try it live
This is for you if

You maintain a design system, and you suspect - correctly - that production has quietly drifted away from it.

Drift is invisible until it is everywhere

Nobody ships a page that violates the design system on purpose. It happens one hardcoded hex at a time: a rushed fix, a third-party widget, a marketing page built outside the component library. Each one is defensible in isolation. A year later there are eleven greys, the spacing scale has holes in it, and nobody can point to when it happened.

Your tokens file is not evidence

The design system repo says what production is *supposed* to use. It cannot tell you what production actually renders - that depends on what shipped, which overrides won, and what a vendor script injected. The only way to know is to look at the rendered page, the way a user sees it.

Extract, diff, fail the build

Call /v1/extract against your own production URLs. You get back the resolved tokens - every color, font, and spacing value the page truly renders. Diff that against your tokens file. Anything in production that is not in the system is drift, and now you have a list instead of a suspicion. Put it in CI and the list stops growing.

How it works

  1. 1

    Extract from production

    /v1/extract10 credits

    Call /v1/extract against your real URLs - not staging, not the storybook.

  2. 2

    Diff against your tokens

    Compare the rendered values with your design-system source of truth.

  3. 3

    Surface the offenders

    Colors and spacing values in production that no token accounts for.

  4. 4

    Wire it into CI

    Fail or warn on new drift. The point is catching it at one hex, not eleven.

javascript
import tokens from './design-system/tokens.json'

const live = await fetch(
  `https://miromiro.app/api/v1/extract?url=${PROD_URL}&fields=colors,spacing&access_key=${KEY}`
).then(r => r.json())

const approved = new Set(tokens.colors.map(c => c.toLowerCase()))
const drift = live.colors.filter(c => !approved.has(c.toLowerCase()))

if (drift.length) {
  console.error('Colors in production that are not in the design system:', drift)
  process.exit(1)   // fail the build
}

What you get: A concrete list of what production renders that your design system never approved - and a CI gate so the list stops growing.

Common questions

Can I check just colors, or just spacing?

Yes. Pass ?fields=colors,spacing and you get back only those keys. The cost is unchanged - the parameter trims the response, not the work - but it keeps the diff simple.

Does this work on pages behind a login?

No. Extraction runs against publicly-reachable URLs, so authenticated app pages are out of scope. Marketing sites, docs, landing pages and any public product surface all work.

How often should I run it?

Per-deploy on your key public pages is the useful cadence - that is what catches drift at the moment it is introduced, which is the only time it is cheap to fix. At 10 credits per extraction, even a wide sweep on every deploy is inexpensive.

Use caseGenerate a themed workspace from a customer's own websiteUse caseGive an AI coding agent real design instead of a screenshotEndpointDesign Tokens APIEndpointWebsite Color Palette API

Try it in a minute

100 free credits, no credit card. Point it at a URL and see what comes back.

Get a free API key