Copy any website's design — the layout, type and palette, not the content
How to extract a site's real design decisions — type scale, spacing rhythm, palette, grid, motion — and reuse them legitimately instead of copying the page itself.
Most people who want to copy a design do not want the page. They want to know why it looks expensive: what the type scale is, how much air sits between sections, which greys, what the grid does at 1440 and at 390, how the motion is tuned. Those are numbers, and numbers are not copyrightable the way somebody's hero copy and photography are — which makes this both the most useful and the safest version of "copying a website".
The decisions worth extracting
- Type scale. Actual computed sizes and line heights per role, not the CSS as authored. Most good sites use fewer sizes than you would guess — often five for the entire page.
- Spacing rhythm. The section padding and the gaps inside a section, at each breakpoint. This is the single biggest reason a rebuild looks amateur: the type is right and the air is wrong.
- Palette. Every colour that actually rendered, with usage counts, so you can tell the two-hex brand from the eleven-hex accident.
- Grid and breakpoints. Container width, column count, gutters, and where the layout truly changes rather than where the media queries are declared.
- Depth. Border radii, border colours, shadow layers, gradient stops, backdrop filters.
- Motion. Durations, easings, what triggers on scroll, and the settled end state — the state a static copy has to reproduce.
How to get them
Free, in the browser, no install: our tech checker, font finder and colour palette extractor each read a page and report one slice of this. Good for a quick answer about one site.
Complete, with the extension: a capture already holds every computed style for every node, so the design report is a by-product — the scale, palette, spacing set, radii and easings as a list, plus the assets. That is what to hand a designer or an agent when you want the design system rather than the page. See copy a landing page for the full method, and copy website fonts and logos for why fonts specifically are the part most tools get wrong.
Where the line is
Copying decisions is how design has always worked; copying expression is infringement. Concretely:
- Fine: a type scale, a spacing system, a grid, an interaction pattern, "sections alternate dark and light with a 120px rhythm".
- Not fine: their logo, their photography and illustration, their copywriting, their custom icon set, or their page shipped whole with your name on it.
- Also not fine, practically: their licensed webfont. A commercial font licence covers their domain, not yours — identify the family, then license it or pick a close free alternative. Google Fonts has credible substitutes for most of the popular commercial faces.
We wrote the longer version in is it legal to copy a website.
A rebuild loop that converges
Capture the reference. Extract the tokens. Build your page with your content. Then put the two side by side at the same viewport and diff them — not by eye, with a pixel diff. Every remaining difference is either a decision you made deliberately or a number you got wrong, and you can tell which in seconds. That loop is how we tune our own capture engine, and it works just as well on a hand-built page.
FAQ
Can I legally copy a website's design?
You can reuse design decisions — type scale, spacing, grid, colour system, interaction patterns. You cannot reuse their protected expression: logo, photography, illustration, copywriting, icon set, or the licensed fonts they paid for.
How do I find out what fonts and colours a site uses?
Free in-browser tools do it per page — see our font finder and palette extractor. A full capture reports every computed value on the page, which catches the colours a spot check misses.
How do I copy a website's layout without copying the content?
Extract the structure and tokens, rebuild with your own words and images. A capture is a useful reference for the first step; the second step is the work that makes the result yours.
Can I copy a theme from a site built on WordPress?
You can capture how a page rendered and rebuild it as editable blocks — see copy any website to WordPress. You cannot extract the theme's PHP, its options or its licence; a commercial theme still has to be bought.
Try it on the page you are looking at
CopyAnySite is a Chrome extension: open any page you can reach, press capture, and take away a standalone HTML file, an editable WordPress page, or a kit a coding agent can build from. The free key needs no card.
Download CopyAnySite