TracereaderLive readerPricingAdd to Chrome ↗
Visual system readerMove the cursor. The headline is live.wght 300 / 800

Read the web’s
visual language.

Try Tracereader free ↗

Point at any element. Understand its typography, effects and motion. Rebuild what inspires you.

14-day Pro trial · no card
01 · Live readerField notes, issue 01. Eight sites, traced.

Don’t take our word.
Trace theirs.

Eight real sites, printed and traced. Point at an orange mark for a live reading, click it for the full read, click a page to turn.

Opening issue 01…
01 / 08
Contents
02 · PlaygroundDrag the sliders. Read the values. Copy the recipe.
Form follows
feeling.
h1 {
  font-family: "Hanken Grotesk";
  font-weight: 300;
  font-size: 132px;
  letter-spacing: -0.045em;
}
03 · What it readsOne click. The whole system.
01Type

Know the exact family, source, weight, size, leading, tracking and OpenType settings.

Family · metrics
02Effect

Decode gradients, shadows, filters, blur, clipping, masks and blend modes.

Blend · filter
03Motion

Read transitions, durations, easing curves, animation names and accessible keyframes.

Timing · easing
04Media

Inspect images, video, SVG and backgrounds: source, format, dimensions and dominant colours.

Source · palette
05Rebuild

Turn the computed visual language into a clean CSS recipe with one click, and save it to your library.

CSS · library
04 · FilmThirty seconds, one take.
05 · How it worksFrom reference to recipe in seconds.
01⌥ ⇧ T

Open Tracereader

Add it from the Chrome Web Store and pin it. It runs only when you start it, never in the background.

02Live inspect

Point and capture

Hover for the live card. Click to lock an element and open the full reader.

03⌘ C

Copy the recipe

Save the reference or copy a clean reconstruction straight into your project.

06 · PricingFree to learn. Pro when it’s your workflow.
Tracereader FreeForever
$0
  • 14 days of unlimited Pro, no card
  • 10 Full Reads every month
  • Unlimited hover previews
  • Unlimited colour eyedropper
  • Your saved library stays yours
Add to Chrome — free ↗
Tracereader Pro$19.99 yearly · cancel anytime
$1.99/ month
  • Unlimited Full Reads
  • Complete type, effect and motion analysis
  • Media intelligence and downloads
  • Unlimited synced reference library
  • Every future product update
Go Pro inside Tracereader ↗

SECURE CHECKOUT IN THE TRACE EXTENSION · POWERED BY STRIPE

07 · Good questionsPrivacy, fonts and limits.
Does Tracereader copy font files?

No. Tracereader identifies what a page uses, but never downloads font files. Always check the license before using a typeface.

Does it send page content anywhere?

Live inspection stays local in your browser. If you optionally sign in and explicitly save a reference, Tracereader syncs only that compact design recipe — never the full page or media file.

Does it work on every website?

It works on standard websites. Chrome protects internal pages, the Web Store and some cross-origin rules.

How does pricing work?

Your first 14 days include unlimited Pro access with no card required. After that, keep 10 Full Reads every month for free. Pro is $1.99/month or $19.99/year inside the extension; installing Tracereader never starts a charge.

08 · StartHover the words.
See it.
Understand it.
Rebuild it.
Add to Chrome — free ↗

14 days of unlimited Pro, no card. Then 10 Full Reads a month free, or unlimited for $1.99.