How to reverse-engineer a website's design system

Every polished website runs on a small set of decisions applied relentlessly: a palette with strict roles, a type scale, a spacing rhythm, a motion vocabulary. Reverse-engineering a design system means recovering those decisions - not collecting screenshots of their consequences.

Start with roles, not values

Open DevTools on any element and you'll drown in values. The trick is asking role questions first:

• Which color is allowed on primary actions - and nowhere else?
• What's the body text color, and how does secondary text differ from it?
• Is hierarchy driven by size jumps or weight jumps?

A list of 40 hex codes is trivia. "This design uses exactly one saturated accent, reserved for primary CTAs" is a rule you can build with.

Read the computed styles, not the source

Frameworks mangle class names, but getComputedStyle never lies. For a representative button, card, input, and heading, record: colors, font size/weight/line-height, padding, border-radius, and box-shadow. Five components read carefully beat fifty skimmed.

Count frequencies

The signature of a system is repetition. If 8px, 16px, 24px, and 32px cover most gaps you measure, you've found a 8px spacing scale. If one blue appears 30 times and another twice, the first is a token and the second is probably a mistake - treat them accordingly.

Capture motion deliberately

Hover a button and watch the Styles panel: the transition property, duration, and easing function are all there. Most disciplined systems use one or two durations (commonly 150–300ms) and a single easing curve. Write them down as rules, not examples.

Where automation fits

Everything above is exactly what Mateo automates: it reads computed styles across the whole page, counts usage frequencies, diffs hover states, tracks scroll-triggered changes, and writes the result as a structured design.md - with exact values, marked estimates, and role tables. The manual method still matters: it's how you verify any extraction, automated or not. Try both on a site you know well - the example output shows what the automated version produces.