How to read a website's design system by hand

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

Start with roles, not values

Open DevTools on any element and you will drown in values. Ask role questions first:

• Which color is allowed on primary actions, and nowhere else?
• What is 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 actions" is a rule you can build with.

Read the computed styles, not the source

Frameworks mangle class names, but getComputedStyle reports what the browser actually painted. For a representative button, card, input and heading, record the colors, font size, weight and line-height, padding, border radius and box shadow. Five components read carefully beat fifty skimmed.

Check the CSS custom properties on :root too. When a team names its tokens, those names tell you how they think about the system.

Look for repetition

The signature of a system is repetition. If 8px, 16px, 24px and 32px cover most gaps you measure, you have found an 8px spacing scale. If one blue appears everywhere and another appears twice, the first is a token and the second is probably an accident.

Measure the layout

Values alone don't rebuild a page. Note where each section sits, how wide the content column is, and how the layout changes on a phone-sized viewport. Take screenshots at a few scroll depths so you can compare your build against the original later.

Watch motion and interactions

Hover a button and watch the Styles panel: the transition property, duration and easing curve are all there. Tab through the page to see focus states. Scroll slowly and note what animates in. Most disciplined systems use one or two durations and a single easing curve. Write them down as rules, not examples.

Where Mateo fits

Everything above is what Mateo does when it captures a page. Paste a public URL and press Capture. Mateo loads the live page in a real browser and records screenshots (desktop at five scroll depths, plus mobile), measured layout, typography, colors, gradients and effects, spacing, radii, shadows, CSS custom properties, the site's downloadable assets, motion, the hover and focus states it triggered, and responsive behavior at desktop and mobile widths.

The result is a Rebuild Package for your coding agent, plus a DESIGN.md that describes the design language. Each capture lists its coverage and known gaps, so you know what was measured and what still needs a human answer.

The manual method still matters. It is how you check any capture, automated or not, and how you answer the questions your agent raises about known gaps.