CSS DNA — Inspect CSS & Extract Design Tokens
Unknown author · Developer Tools
Media
5 items
Description
Inspect any element's CSS and extract a site's colors, fonts & design tokens — export to Tailwind, CSS, JSON, Figma & more. 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 copy clean, minimal CSS — then scan the whole page and export its entire design system. Every color, font, type size, spacing value, shadow, gradient and border-radius — ranked by how often the page actually uses it. EXPORT IN ONE CLICK • Tailwind — a v3 config or a v4 @theme block • CSS variables — a ready-to-paste :root { --color-… } block • JSON design tokens — for design systems and Style Dictionary • SCSS variables, plus Figma / W3C design tokens • DESIGN.md — an agent-ready brief for Claude, Cursor, Copilot and Windsurf FEATURES • Click-to-copy CSS for any element, minimal or full — walk the DOM with arrow keys • Eyedropper with live WCAG 2 ratios and APCA (WCAG 3 draft) contrast scores • One-click extraction: colors, fonts, type scale, spacing, radii, shadows, gradients, CSS variables, breakpoints, @font-face and motion • OKLCH tonal scales (50–950), near-duplicate color detection, contrast grid and palette PNG export • CSS health audit — a 0–100 score for specificity, !important, duplicate selectors, orphaned variables and consistency • CSS stats and a specificity graph, plus pseudo-state capture (:hover, :focus, ::before) • Copy any element as Tailwind classes or a JSX style object — or capture the whole component • Accessibility and SEO checklists with copyable reports • An isolated overlay that never inherits or clashes with the page's own styles FREE FOREVER Element CSS copy, eyedropper, ranked color palette, and the full design-system preview. PRO — $5/month, 7-day trial Token exports and downloads, component capture, the health audit, contrast auto-fix, and side-by-side comparison of two sites. Unlocks with a licence key — no sign-up. For front-end developers, design engineers and designers who want to learn from, rebuild or audit any website's styling in seconds. 100% local. No tracking, no ads, no analytics, no backend — nothing leaves your browser. Minimal permissions: only the tab you're on. Works in Chrome, Edge, Brave and Arc. A Firefox build is available separately.