Free design token peeper
No signup
Runs in your browser

PeeptheTokens

Drop a screenshot or paste a stylesheet. Get the palette, type scale, spacing, radii and shadows back as tokens you can paste straight into a project.

or press Ctrl+V anywhere with an image or CSS on your clipboard

Plate 01 / Input

Feed it something

Two ways in. Pixels tell you the colours. A stylesheet tells you everything else.

Straight talk

A web page is not allowed to read another website's styles. Browsers block that, and they should. So Swatchbook works from two things you can always get: a screenshot, or the stylesheet text itself (open DevTools, find the CSS file, copy all). Nothing you drop here leaves your browser. For point-and-click inspection on a live site, the CSS Peeper extension is the right tool.

SampleTip hover for the loupe, click to pin that exact pixel

Palette

Plate 02 / Contrast

Can you read it

WCAG contrast for the pairs that matter. AA needs 4.5 for body text and 3 for large text. AAA needs 7. Edit a colour in Plate 03 and these update.

Plate 03 / Tokens

Fix what I guessed

Roles are a best guess from coverage, lightness and chroma. Rename them, nudge the colours, pick a type scale. Everything downstream follows.

Colour roles

Type, space, radius

Scale ratio Base size (px) Display font stack Body font stack Mono font stack Spacing base Radius base 8px

Plate 04 / Press proof

See it wear the tokens

fernway.example / pricing

FernwayProductPricingDocs

New this week

Ship the redesign without the guesswork

Every colour, size and gap on this proof comes from the tokens above. Change one and watch it move.

Team plan

Up to 12 seats and shared libraries.

$24 per seat

Work emailTeam size Send me the changelog

Invoice	Status	Amount
March	Paid	$288
April	Due	$288
May	Draft	$312

Plate 05 / Export

Take it with you

Five formats, all built from the same tokens. DESIGN.md is the one to hand an AI coding tool: a plain-language brief it can follow.

tokens.css