How to Rebuild Any Website's Design (Without Cloning It)

Published August 12, 2026 · Updated August 12, 2026 · 9 min read · by the CSS DNA team

Quick answer: Extract the system, not the layout. Pull the colors with their usage counts, the type scale, the spacing rhythm, radii and shadows — then rebuild one representative component using only those values, and diff yours against the original. Copying a screenshot teaches you nothing; copying the ratios teaches you the design.

Why most rebuilds look off

You liked a site. You grabbed its colors, matched the font, and built your version. It looks cheaper and you cannot say why.

It is almost never the color. It is the rhythm — the spacing scale, the type scale, and the ratio between them. Designers copy a palette in ten seconds and then invent their own margins, so a system built on 4px steps gets rebuilt with 15px, 22px and 35px gaps. The palette matches and the page still reads as amateur, because consistency of interval is most of what “polished” means.

So the workflow below spends almost no time on color and most of it on measurements.

Step 1 — Capture the system, not the screenshots

Open the reference site and extract its full token set in one pass: colors ranked by how many elements use each, font families with their real rendered weights, the type scale, spacing values, radii, shadows, gradients, breakpoints and motion timings.

Doing this by hand in DevTools means inspecting a few dozen elements and writing values down, and you will miss things — the colors you never think to check are exactly the ones carrying the design. One scan with CSS DNA returns all of it from live computed styles, which also means minified CSS and framework class names are irrelevant.

Save the output. This is your brief.

Step 2 — Read the ratios before you read the values

Look at the extracted type scale as a sequence, not a list:

13px · 15px · 17px · 21px · 32px · 56px

The jumps are small at the bottom and large at the top. That is a deliberate editorial scale: fine distinctions in UI text, dramatic ones in display type. Compare it to what a default build produces — 14, 16, 18, 20, 24, 32 — evenly spaced, and visually flat. The reference site's headline reads as a headline because the gap between body and display is 3×, not 2×.

Do the same for spacing. If the scale is 4 · 8 · 12 · 16 · 24 · 32 · 64, note that it doubles at the end. That jump is where sections separate from content, and it is the single value most rebuilds get wrong.

Step 3 — Convert colors into roles

An extracted palette arrives ranked by usage, which hands you the hierarchy for free. The top entries are almost always structural:

That last row is the interesting one. The brand color usually ranks near the bottom by element count, because restraint is what makes an accent work. If your rebuild uses the accent on twelve things, you have already lost the effect regardless of whether the hex matches.

Then generate a 50–950 ramp in OKLCH for each role so you have hover, disabled and dark-mode steps ready instead of inventing them under deadline.

Step 4 — Rebuild one component, completely

Not the homepage. One component that carries the design language — usually the primary button or the card, because between them they exercise color, radius, shadow, type scale, spacing and states.

Build it using only values from your token set. The moment you reach for a number that is not on the scale, stop: either the value belongs on the scale, or you are drifting.

Capture the reference component's real states while you are at it. A button's :hover is a design decision — does it lighten, lift, or shift the border? — and it is invisible in a screenshot. Pseudo-state capture gets you :hover, :focus, :active and pseudo-elements in one go.

Step 5 — Diff your build against the reference

This is the step nobody does, and it is where the remaining 20% of the gap closes.

Once your version is running locally, extract your page the same way you extracted theirs, and compare the two systems directly. Side-by-side, the drift is obvious in a way it never is by eye: your radii went to 10px where theirs are 8px, you introduced four font sizes that are not on their scale, your shadow has no blur where theirs has 32px of it.

Eyeballing two screenshots finds none of that. Diffing two token sets finds all of it in about a minute.

Step 6 — Do not inherit their mistakes

Production CSS on a real site is rarely clean. Before you take anything structural from it, run a health check on the source: specificity conflicts, !important counts, duplicate selectors, orphaned custom properties, inconsistent values.

Two payoffs. You avoid importing debt into a fresh codebase — and knowing the source scored, say, 68/100 tells you which of its patterns are deliberate design and which are just what shipped. The same applies to accessibility: a reference site's muted gray may be beautiful and fail contrast, so check the pairs you actually plan to use rather than assuming a site you admire got it right.

Where the line is

The difference between reference and clone is not effort, it is what you take:

Fonts sit slightly apart: identifying one is free, licensing it is not. This is general information, not legal advice.

Frequently asked questions