How to Reverse Engineer the Design System of Any Website

Every well-made website follows a system: a few fonts, a type scale, a color palette, a spacing scale and reusable components. You can work most of it out in a browser, which is a great way to learn how good design is put together.

1. Get an overview with DevTools

Press F12, then open the menu (⋮) → More tools → CSS overview, and click Capture overview. It lists the page's colors, fonts, font sizes, media queries and more, all in one report.

2. Typography

• Click any text with Font Detector to see the font family, size, weight, line height and color.
• Check headings, body text, buttons and captions, and write down the sizes. Together they're the type scale, often based on a ratio such as 1.25.
• Check how sizes change on a phone width, too.

Before reusing a font, check its license. See web font licensing explained.

3. Colors

• Color Palette Extractor lists the 20 most-used colors on a page, in hex, RGB or HSL, with one-click copy.
• In DevTools, select the html element and look for CSS variables (names starting with --). Many sites keep their design tokens there, such as --color-primary.
• Note which colors are used for text, backgrounds, borders, links and states such as errors.

4. Spacing and layout

• Select elements and look at the box model in the Computed tab. Repeated values such as 8, 16, 24 and 32 pixels reveal the spacing scale.
• Turn on the Grid and Flexbox overlays in the Layout tab to see column structure.
• CSS overview's media queries show the breakpoints where the layout changes.

5. Components

• Inspect buttons, cards and form fields. In the Styles pane, use :hov to see hover and focus states.
• Class names hint at the framework, such as Tailwind's utility classes, or at icon libraries.
• Note border radius, shadows and transitions, which give a site much of its feel.

6. Write it down

Collect what you found in one place: fonts and sizes, colors with their uses, spacing steps and breakpoints. The design token builder and spacing scale generator help turn notes into usable tokens.

Learn from it, don't copy it

Use what you learn to understand why a design works, then build your own. Copying a site's logos, images, text or paid fonts isn't allowed. For more ways to study a site's type, see finding the fonts other sites use.