Is it legal to reverse engineer a website's design system?

Looking at a public website's CSS is how the web is built to work. Your browser downloads all of it to draw the page, and DevTools simply shows you what arrived. Studying a site's palette, type scale, and spacing to learn from it is normal practice among designers and developers. Copying a site's branding, logo, or overall look wholesale is a different thing, and that can cross into trademark or copyright territory.

What is the fastest way to get a website's color palette?

The fastest manual route is checking the CSS variables on the page's root element in DevTools, because most modern sites name their palette there. The fastest route overall is a teardown extension: Sitegeist lists every color on the page in one click, with usage counts and the selectors each color came from, so you can tell the real brand colors from one-off accents right away.

How do I find out what fonts a website uses?

In DevTools, inspect a heading or paragraph and scroll to the bottom of the Computed panel. Chrome shows a rendered fonts section there, which names the font that actually painted the text, not just the first name in the CSS list. Sitegeist shows the fuller picture in one click: every loaded font family with its individual weights, and variable fonts flagged.

Can I export a website's design system as design tokens?

Yes. Manually, you collect the colors, type sizes, and spacing values you found and write them up as CSS variables or a tokens file yourself. Sitegeist exports the CSS variables it finds for free, and Sitegeist Pro ($19.99 one time) adds a JSON design-token export and a Tailwind config export built from the actual teardown.

How to Reverse Engineer a Website Design System

To reverse engineer a website's design system, you pull four things out of the live page: the color palette, the type scale, the button styles, and the spacing scale, then turn them into named tokens you can reuse. The good news is that everything you need is already sitting in your browser, because the browser had to download it all to draw the page. This guide walks through the manual DevTools route first, then the one-click version.

How to find a website's color palette

Start with the shortcut. Most modern sites name their whole palette in one place: a list of CSS variables on the page's root element. If you find that list, the site's own designers have done the naming for you.

Open DevTools (Cmd+Option+I on Mac, F12 elsewhere), click the <html> element at the top of the Elements panel, and look at the Styles pane on the right. You are hunting for a rule labeled :root full of lines like --color-primary: #4f46e5 or --brand-600. Each swatch next to a value is a real palette color. Copy the ones with names that sound like decisions (primary, accent, surface, ink) and skip the rest.

No variables? Then you sample by hand. Click an element, read its color and background-color in the Computed panel, write the value down, repeat. Focus on the elements that carry the brand: the primary button, links, headings, the page background, and one card. This is the tedious part, and here is why it matters: a typical marketing page contains 40 or more distinct colors once you count every hover tint and shadow, but only 6 to 10 of them do the actual work. Noting roughly how often each value shows up is what separates the real palette from the noise.

How to work out the type scale

Two questions here: which fonts is the site actually using, and what sizes form the scale.

For the fonts, do not trust the CSS at face value. A stylesheet can list a fancy family first while a fallback quietly does the rendering. Chrome will tell you the truth: inspect a heading, open the Computed panel, and scroll all the way to the bottom. The rendered fonts section there names the family that actually painted the text. Check a heading and a body paragraph, since sites often pair two families.

For the scale, sample the computed font-size, font-weight, and line-height of one h1, h2, h3, a body paragraph, and one small caption or label. Write the pixel sizes down in order. Most sites resolve into a tidy progression, something like 12, 14, 16, 20, 24, 32, 48. If the numbers look random, divide each by the body size. A steady ratio (1.2, 1.25, 1.333) means the site uses a modular scale, and that ratio is the real token, not the individual sizes.

How to inspect button and component states

Buttons pack more design decisions per pixel than anything else on a page: color, type, radius, padding, shadow, and motion all meet there. The catch is that half of a button's design lives in states you cannot see while it just sits there.

DevTools has a trick for that. Right-click the primary button and choose Inspect. In the Styles pane, click the small :hov toggle at the top right and tick :hover. The button now renders in its hover state permanently, so you can read the hover styles at your own pace instead of chasing them with the cursor. Do the same for :focus and :active. Usually the background shifts, and sometimes a shadow, outline, or slight movement joins it.

Then record the resting recipe: padding, border-radius, font-weight, box-shadow, and any transition. The transition line is a small gift. It tells you exactly which changes the site's designers considered worth animating.

Do this for three things: the primary button, the secondary or ghost button, and a text link. Those three cover most of a site's interactive vocabulary.

How to extract the spacing scale

Hover over elements in the Elements panel and read the box model diagram at the top of the Computed panel: margin shows in orange, padding in green. Sample a card's padding, the gap between stacked sections, a button's padding, and the space under a heading.

Like colors, spacing values cluster. If you keep seeing 4, 8, 12, 16, 24, 32, 48, 64, you are looking at a 4px base scale, which is how Tailwind and most design systems work. Sites with CSS variables often name these outright as --space-1 through --space-8, in which case you already grabbed them in the colors step.

Resist the urge to catalog every measurement. You need the base unit, the scale steps, and the two or three big layout numbers: container max-width, section padding, grid gap. That is enough to rebuild the feel.

How to turn your findings into design tokens

Raw values are not a design system. Named decisions are. Take your notes and clean them up:

Merge near-identical colors. A #1a1a1a and a #1b1b1b are the same token with a rounding error.
Name by role, not appearance: primary, surface, ink. Role names survive a rebrand; "dark-blue" does not.
Write the type scale as one entry per level: size, weight, line height.
Write spacing as the base unit and its steps.

The result can be as simple as a short CSS file. Here is what a finished one looks like:

:root {
  --color-primary: #4f46e5;
  --color-ink: #111827;
  --color-surface: #ffffff;
  --font-sans: "Inter", system-ui, sans-serif;
  --text-base: 16px;
  --text-xl: 24px;
  --space-1: 4px;
  --space-4: 16px;
  --radius: 8px;
}

That file, plus your three button recipes, is a working reverse-engineered design system. Budget 45 to 90 minutes per site for the full manual pass.

The one-click version: Sitegeist

Everything above is what Sitegeist automates. It is a free Chrome extension that runs the whole teardown on the current page in one click, right in your browser, and nothing leaves it. The free tier covers each section of this guide:

Colors: the full palette with usage counts and the selectors each color came from, so the "which colors actually matter" work is done for you.
Typography: the type scale plus every loaded font with its individual weights, and variable fonts flagged.
Buttons: real buttons recreated with their hover, focus, and active states side by side, no toggle-clicking required.
Spacing: the page's spacing scale, already clustered.
Tokens: a CSS variables export, plus an inspect overlay that gives you a curated style summary for any element you point at.

It also surfaces things DevTools will not hand you directly: the tech stack, SEO checks, an assets tab with previews and single downloads, and a tone-of-voice profile of the site's writing, which is handy when you are studying the brand and not just the CSS.

Sitegeist Pro ($19.99, one time) adds the export formats for the last step: a JSON design-token export, a Tailwind config export, full authored CSS and HTML copy in inspect mode, batch download of all assets, and a full-page screenshot for reference. If you are comparing tools in this category, see how it stacks up against CSS Scan, CSS Peeper, and Hoverify.

How to reverse engineer a website design system