CSS DNA — Inspect CSS & Extract Design Tokens

CSS DNA is the fastest way to inspect CSS and steal a website's design system — the right way.

Stop digging through DevTools. Click any element to instantly copy clean, minimal CSS. Then scan the whole page to pull its entire design language: every color, font, type size, shadow, gradient, and border-radius — ranked by how often it's used.

Export in one click to the format you work in: • Tailwind config — drop a site's palette + fonts straight into tailwind.config.js • CSS variables — a ready-to-paste :root { --color-… } block • JSON design tokens — for design systems and Style Dictionary • SCSS variables & Figma tokens

✨ Features • Click-to-copy CSS for any element (minimal or full) — walk the DOM with arrow keys • Eyedropper + WCAG 2 and APCA (WCAG 3) contrast checking • One-click design-system extraction: colors, fonts, type scale, spacing, radii, shadows, gradients, CSS variables, breakpoints, @font-face, motion • AI / DESIGN.md export — the whole design system as an agent-ready brief for Claude, Cursor & Copilot • OKLCH tonal scales, near-duplicate color detection, contrast grid & palette PNG export • CSS health audit — 0–100 score for specificity, !important, duplicates, orphaned variables & consistency • CSS stats & specificity graph; pseudo-state capture (:hover/:focus/::before…) • Copy any element as Tailwind classes or a JSX style object — and the full component • Accessibility audit + SEO checker — scored checklists with copyable reports • 100% local — no account needed, no data leaves your browser

Free forever: element CSS copy, eyedropper, and full design-system preview. Pro (subscription): token exports (Tailwind / CSS vars / JSON / SCSS / Figma), audits & downloads.

Perfect for front-end developers, design engineers, and designers who want to learn from, rebuild, or audit any website's styling in seconds.

— No tracking. No ads. No analytics. Minimal permissions (only the tab you're on).