CSS DNA — Inspect CSS & Extract Design Tokens

About

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.
  
  Then export it in one click to the format you actually 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
  • Beautiful, isolated overlay that never clashes with the page
  • 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) + downloads, audits & more.
  
  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).