Extract design system from any website into a Tailwind Config

Every polished website runs on a small set of decisions: a handful of colors, a type scale, a spacing rhythm, two or three corner radii and a shadow or two. Those decisions are its design system, and the browser has all of them. This guide shows how to pull them out of any live site and turn them into a Tailwind theme you can build on.

What you're actually extracting

A design system on a live site comes down to a few kinds of tokens. Here's where each one lives in the CSS, and where it goes in Tailwind:

You don't need all of them. Colors, fonts and the type scale give you about 80% of a site's look.

Step 1: Check whether the site already has tokens

Start here, because it might save you all the other steps. Sites built with shadcn/ui, Radix Themes, Tailwind v4 or most in-house design systems define their tokens as CSS custom properties on :root.

The quick check: in DevTools, select the <html> element and look at the Styles pane. If you see a wall of --something: value lines, you've found the design system. To grab all of them at once, run this in the console:

1// Every CSS variable defined on :root, from every readable stylesheet
2const tokens = {};
3for (const sheet of document.styleSheets) {
4  let rules;
5  try {
6    rules = sheet.cssRules;
7  } catch {
8    continue; // stylesheet from another domain; the browser won't let us read it
9  }
10  for (const rule of rules) {
11    if (rule.selectorText !== ":root") continue;
12    for (const name of rule.style) {
13      if (name.startsWith("--")) {
14        tokens[name] = rule.style.getPropertyValue(name).trim();
15      }
16    }
17  }
18}
19console.log(tokens);

If you got a tidy list like --primary, --muted-foreground and --radius, skip to Step 5. If you got nothing, or only framework noise, read on.

Step 2: Tally the colors

When a site has no tokens, the system is still there, spread across thousands of elements. The trick is to count: the values used most often are the real tokens, and the rare ones are exceptions.

Paste this helper into the console once. It counts how often each value of the properties you give it appears across the page:

1function tally(props, { limit = 20, where = () => true } = {}) {
2  const skip = new Set([
3    "",
4    "none",
5    "normal",
6    "auto",
7    "0px",
8    "rgba(0, 0, 0, 0)",
9  ]);
10  const counts = new Map();
11  for (const el of document.querySelectorAll("body *")) {
12    const style = getComputedStyle(el);
13    if (!where(style)) continue;
14    for (const prop of props) {
15      const value = style.getPropertyValue(prop);
16      if (skip.has(value)) continue;
17      counts.set(value, (counts.get(value) ?? 0) + 1);
18    }
19  }
20  console.table(
21    [...counts]
22      .sort((a, b) => b[1] - a[1])
23      .slice(0, limit)
24      .map(([value, count]) => ({ value, count })),
25  );
26}

Now tally text and background colors:

1tally(["color", "background-color"]);

The top few rows are your foreground, muted text and background colors. An accent color usually shows up lower down with a small count, on buttons and links. That's expected: accents are used sparingly on purpose.

For border colors, count only elements that actually have a border. Every element has a border-color (it defaults to the text color), so without the filter you just get your text colors again:

1tally(["border-top-color"], {
2  where: (style) => style.borderTopWidth !== "0px",
3});

Step 3: Get the type scale

Tally sizes, line heights and weights separately:

1tally(["font-family"]);
2tally(["font-size"]);
3tally(["font-weight"]);
4tally(["line-height"]);

A well-built site will show five to eight font sizes doing almost all the work, for example 14px, 16px, 18px, 24px, 36px and 48px. Pair each size with the line height it's most often used with, and you have a type scale. If you're also trying to pin down the typeface itself, this guide to identifying a website's font covers it in depth.

Step 4: Spacing, radii and shadows

1tally(["padding-top", "padding-left", "margin-top", "row-gap", "column-gap"]);
2tally(["border-top-left-radius"]);
3tally(["box-shadow"], { limit: 10 });

For spacing, look for the base unit rather than every value. If nearly everything is a multiple of 4px (8, 12, 16, 24, 32), the site uses a 4px grid, which is Tailwind's default. For radii and shadows, expect two or three values that really matter.

Step 5: Clean it up

This is the step most tools skip, and the one that makes the result usable. A raw tally is a list of values. A design system is a set of decisions with names.

1rgb(15, 23, 42)       412
2rgb(100, 116, 139)    167
3rgb(255, 255, 255)    143
4rgb(241, 245, 249)     58
5rgb(226, 232, 240)     44
6rgb(18, 25, 43)         3
7rgb(79, 70, 229)       21

1--color-foreground: #0f172a;
2--color-muted-foreground: #64748b;
3--color-background: #ffffff;
4--color-muted: #f1f5f9;
5--color-border: #e2e8f0;
6/* rgb(18,25,43): merged into foreground */
7--color-accent: #4f46e5;

Three rules get you there:

1. Merge near-duplicates. rgb(15, 23, 42) used 412 times and rgb(18, 25, 43) used 3 times are the same color. The rare one is a leftover or a mistake, so fold it into the common one.
2. Snap to a scale. A 15px next to 14px and 16px is almost always one of them in disguise. Round spacing to the grid you found in Step 4.
3. Name by role, not by value. foreground, muted, border and accent stay meaningful when you change the actual colors later. slate-850 doesn't.

Step 6: Write the Tailwind config

Tailwind v4 keeps the theme in CSS, in an @theme block:

1@import "tailwindcss";
2 
3@theme {
4  --color-background: #ffffff;
5  --color-foreground: #0f172a;
6  --color-muted: #f1f5f9;
7  --color-muted-foreground: #64748b;
8  --color-border: #e2e8f0;
9  --color-accent: #4f46e5;
10 
11  --font-sans: "Inter", system-ui, sans-serif;
12 
13  --text-sm: 14px;
14  --text-sm--line-height: 20px;
15  --text-base: 16px;
16  --text-base--line-height: 24px;
17  --text-2xl: 24px;
18  --text-2xl--line-height: 32px;
19 
20  --spacing: 4px;
21 
22  --radius-md: 6px;
23  --radius-lg: 10px;
24 
25  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
26}

Each variable becomes a utility class automatically: --color-muted gives you bg-muted and text-muted, and --shadow-card gives you shadow-card.

Tailwind v3 uses tailwind.config.ts:

1import type { Config } from "tailwindcss";
2 
3export default {
4  content: ["./src/**/*.{ts,tsx}"],
5  theme: {
6    extend: {
7      colors: {
8        background: "#ffffff",
9        foreground: "#0f172a",
10        muted: { DEFAULT: "#f1f5f9", foreground: "#64748b" },
11        border: "#e2e8f0",
12        accent: "#4f46e5",
13      },
14      fontFamily: {
15        sans: ["Inter", "system-ui", "sans-serif"],
16      },
17      fontSize: {
18        sm: ["14px", "20px"],
19        base: ["16px", "24px"],
20        "2xl": ["24px", "32px"],
21      },
22      borderRadius: { md: "6px", lg: "10px" },
23      boxShadow: {
24        card: "0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04)",
25      },
26    },
27  },
28} satisfies Config;

Using extend keeps Tailwind's defaults alongside your tokens. If you want to be strict and allow only the extracted palette, move colors up a level, out of extend.

Is the manual method worth it?

If you do this once, the console is fine. If you do it every time a site catches your eye, let a tool do the counting and merging for you:

Should you copy another site's design system?

Use it as a reference, not a clone. A spacing grid, a type scale or a neutral palette isn't unique to anyone, and learning from them is how most designers get good. A site's logo, illustrations, photography and copy are its brand, and those aren't yours to take. The best result usually comes from extracting two or three systems you admire and combining them into something that's your own.