To reverse-engineer a landing page's design system, read its computed CSS, not its source, and structure the result into design tokens: colors, typography, spacing, radii, shadows, component styles. Do it by hand in DevTools, or use an extraction tool that renders the page in a real browser and exports tokens as JSON, CSS, Markdown, or a Tailwind theme.
Most buyers meet this task the same way. A landing in the niche has been running for months, so it probably converts, and you want its visual DNA as a starting point instead of a blank page. Or the simpler case: you're rebuilding your own page and need to know what it actually consists of before you touch anything. Both jobs start with the same move — getting the design system out of the rendered page.
What the design system is — and why you read it from computed CSS
Forget the Figma file and the brand book. For a live page, the design system is whatever the browser computes after all the CSS resolves. Six groups of values carry almost all of the look:
- Color palette — backgrounds, body text, accents, borders. Usually five to ten values doing all the work.
- Typography — font stacks plus the type scale: the fixed set of sizes and line-heights for headings and body.
- Spacing rhythm — the base unit (4px or 8px, almost always) and the multiples that govern padding and gaps.
- Border radii — the corner system: one value for buttons, a larger one for cards.
- Shadows — the small set of elevation recipes the page reuses.
- Component styles — how those values combine on buttons, inputs, and cards.
That list is the whole target. Walk away with those six groups and you can rebuild the feel of a page without a single screenshot.
Notice what's not on the list: the layout itself, the copy, the images. Two pages can share a palette, a type scale, and a spacing rhythm and still read as different products to a visitor. That's why token-level reverse-engineering works as a method at all — you extract the grammar, then write your own sentences with it.
The beginner move for reading all this is "view source." It fails for a boring reason: modern CSS is scattered. Values live in variables, utility classes, framework defaults, three stylesheets deep. The hex you grep for may never appear in the source at all — it gets computed from a variable chain at render time.
Computed styles are what the browser settled on after resolving all of that. They are, by definition, what the visitor sees. Reading source is guessing. Reading computed styles is measuring. Every serious extraction method — including the Computed tab in DevTools — works on the rendered page for exactly this reason.
The ethical line: research and baselines, not clones
I'd rather state this plainly than pretend the question doesn't exist.
Legitimate reverse-engineering:
- Your own pages. Extract a baseline before a redesign so the new build has something concrete to match against. Audit an old page whose original files are lost — that happens more often than anyone admits.
- Inspiration into tokens. A competitor's page feels trustworthy and yours doesn't. Extract the system — palette, scale, spacing rhythm — then build your own layout, copy, and assets with it.
- Competitive research. Extract five or ten landings in a vertical and look at what repeats. That's the niche's visual grammar, and you can choose to speak it or deliberately break from it.
Illegitimate cloning is copying the page itself — layout, copy, images, brand — and shipping it as yours. That's where copyright and trade-dress problems live. It's also just worse media buying: a clone inherits none of the original's trust, and platforms notice sameness faster than buyers expect. I'm not a lawyer and this isn't legal advice. But the practical line is easy to remember: tokens are fair game, content is not. If your page shares a color scale with a competitor, that's design. If it shares sentences, that's copying.
The manual route: DevTools
Do this once properly, because it teaches you what to look for:
- Open the page. Right-click the hero heading → Inspect → Computed tab.
- Record the type scale: sizes, line-heights, and weights for h1, h2, body, small. Divide consecutive sizes — the ratio is the scale. 1.25 and 1.333 show up constantly.
- Colors: click through the background, body text, the primary button, borders. Note every distinct hex. Watch for near-duplicates — #333 and #3A3A3A are usually one token that drifted.
- Spacing: inspect section padding and card gaps. Find the repeating unit.
- Radii and shadows: button corners, card corners, the shadow recipe on the main card.
Budget 30–60 minutes for a careful pass on one page. It works and it teaches, but it doesn't scale — a batch of ten reference pages is a day gone. It's also easy to miss states like hover and focus, and to mis-copy values by hand.
The fast route: run an extraction
The automated version of the same job: paste the URL, a real browser renders the page, reads its computed CSS, and structures the result into token groups. That's what Design Extractor does — the free tokens mode returns the six groups above as four files: tokens.json in the W3C design-token format, tokens.css with custom properties, a Markdown spec you can paste into a brief, and a Tailwind theme.
Two details worth knowing. JavaScript-heavy pages are fine: the capture harness is Playwright with scroll-hijack handling, so single-page apps render before anything gets read. And the honest limit: complex animation behavior can be incompletely detected — when that happens, the result says so instead of pretending.
The full click-by-click flow, with what each export file is for, is in the companion piece: design tokens from any website, step by step.
Turning tokens into decisions
Extraction is the easy part. The value is in what the tokens let you do next:
- Baseline a redesign. Extract your own page before touching it. "Match the old spacing rhythm" is a concrete instruction; "keep it feeling the same" is not.
- Brief a developer properly. tokens.json or the Tailwind theme drops into a build. No more "make it look like this screenshot."
- Feed a builder. Send the extraction to Forge — the platform's white-page generator — and the generated page inherits the same visual DNA. The Markdown spec also pastes cleanly into an AI coding tool as design context.
- Read the niche. Five extractions from five competing landings show you the vertical's actual conventions: which palettes dominate, how tight the type runs, how much whitespace the trustworthy-looking pages use. Then you decide — match the grammar or differentiate on purpose.
Once you're collecting references regularly, the tokens need a home and a system. That's the swipe-file workflow: how to organize captured designs so they turn into original pages fast instead of rotting in a screenshots folder.
FAQ
Is reverse-engineering a design system legal?
Extracting design tokens — colors, type scales, spacing values — is design research, and styles as such are broadly treated differently from content. Copying the page's text, images, layout, or brand is a different matter with real legal exposure. This isn't legal advice; when in doubt, keep the tokens and write your own everything else.
Why not just screenshot the page and eyeball it?
A screenshot shows pixels, not the system. You can't read the spacing unit, the exact hex, or the type ratio off a PNG, so you end up approximating — and approximations compound into a page that looks "off" without you knowing why. Tokens are the measurements behind the pixels.
Does extraction copy the site's images or layout?
No. The free tokens mode reads computed CSS and structures it into tokens. It doesn't download the site's assets and doesn't clone the layout — that's the deliberate boundary of the tool.
Does it work on React or Vue single-page apps?
Yes. A real browser (Playwright, with scroll-hijack handling) renders the page before reading, so JavaScript-rendered content is captured. The known soft spot is complex animation behavior, which can be incompletely detected — the result lists limitations when that's the case.
Can I extract a page that's behind a login?
The extractor reads what a fresh browser session sees when it opens the URL. Content behind a login wall isn't publicly rendered, so there's nothing to read. The right target is public pages — including your own, where access isn't an issue.
Reverse-engineer your first landing
Pick one page: a competitor's landing you've been studying, or your own page before its redesign. Run it through Design Extractor — free with an account — and you get the six token groups and four export files in one pass. What you build with them is the part no tool can do for you.