Reverse-engineer a design system Extract design tokens Generate a style guide Copy CSS from any site Extract a color palette
Compare with other tools Home We're on Product Hunt Upgrade to Pro · $19.99
Guides

Sitegeist guides

Practical, DevTools-first walkthroughs for pulling design systems, tokens, styles, and palettes out of live websites.

How to copy CSS from a website

To copy CSS from a website, inspect the element and copy its rules from the Styles pane. Here is the designer-friendly workflow, plus a one-click shortcut.

How to extract a color palette from a website

To extract a color palette from a website, read the colors from its CSS in DevTools, or let Sitegeist pull the full palette, counted, in one click.

How to extract design tokens from a website

Design tokens are the named colors, type sizes, and spacing behind a site. Grab them with DevTools, or in one click with a free Chrome extension.

How to reverse engineer a website design system

Reverse engineering a design system means pulling a site's colors, type, buttons, and spacing into tokens you can reuse. Here is the friendly version.

How to generate a style guide from a website

To generate a style guide from a website, pull its colors, type, buttons, and spacing. Here is the DevTools way, plus a one-click option that does it for you.

Comparisons

ColorZilla alternative: Sitegeist

Looking for a ColorZilla alternative? Sitegeist has an eyedropper too, plus the site's whole palette with usage counts and where each color is used. Free.

CSS Peeper alternative: Sitegeist

Looking for a CSS Peeper alternative? Sitegeist adds what Peeper lacks: button hover/focus states, tech stack, and a full local teardown. Free + $19.99 Pro.

CSS Scan alternative: Sitegeist

Looking for a CSS Scan alternative? Sitegeist extracts the whole design system: colors, type, buttons with hover states. Free, with a $19.99 one-time Pro.

Fonts Ninja alternative: Sitegeist

Looking for a Fonts Ninja alternative? Sitegeist maps a site's whole type system: loaded fonts, weights, and the full scale with live specimens. Free.

Hoverify alternative: Sitegeist

Looking for a Hoverify alternative with a real free tier? Sitegeist tears down any site's design system for free, with a $19.99 one-time Pro and no device caps.

VisBug alternative: Sitegeist

Looking for a VisBug alternative? Sitegeist extracts the design system VisBug lets you poke at: palette, type, buttons, spacing, with exports. Free + Pro.

Wappalyzer alternative: Sitegeist

Looking for a Wappalyzer alternative? Sitegeist detects a site's tech stack and its whole design system, locally, with no account. Free + $19.99 Pro.

WhatFont alternative: Sitegeist

Looking for a WhatFont alternative that still works? Sitegeist lists a site's loaded fonts with weights plus the full type scale, actively maintained. Free.