Design System Extractor

Inspect any website and extract its design system — colors, fonts, icons, images, corner radii, shadows and gradients.

See any website's design system in one click. Design System Extractor opens in Chrome's side panel — the browser view splits and the panel stays open while you browse, automatically rescanning every page you visit. WHAT IT EXTRACTS Colors — background, text and border palettes sorted by how often they're used, plus the site's :root CSS variables resolved to real swatches and its theme color. Click any swatch to copy the hex, or export the whole palette as CSS custom properties. Fonts — the font families actually in use, with live previews, weights and sizes, plus the complete type scale from display text down to captions. Click to copy any font stack or size. Icons — every inline SVG on the page (click to copy the markup), icon images, favicons and touch icons. Hit "Download all" to save them as real .svg files. Images — every image and CSS background image with natural dimensions. Open in a new tab, copy the URL, or download all of them at once, neatly foldered under Downloads/design-system/<site>/. Corner radius — every border-radius value with a visual preview and usage count. Effects — box shadows and gradients, rendered live so you can see exactly what they look like. Export JSON — one click downloads the entire extraction as a structured JSON file, ready for handoff docs or design tokens. WHY DESIGNERS LIKE IT • Everything is click-to-copy — colors, font stacks, sizes, radii, shadows, SVG markup • Follows you as you browse: switch tabs and it rescans automatically • Minimal interface that matches your light or dark browser theme • No account, no tracking, no data ever leaves your browser Designed and built by Nijin