The CSS DNA Blog
Practical, no-fluff guides on design tokens, CSS inspection, color, typography and accessibility — written by the team behind the CSS DNA Chrome extension.
How to Extract Design Tokens from Any Website
A step-by-step guide to pulling colors, fonts, spacing, shadows and gradients out of any live site — and exporting them as Tailwind, CSS variables, JSON, SCSS or Figma tokens.
Tailwind CSSHow to Convert Any Website to Tailwind CSS
Turn a reference site's design language into a ready-to-paste Tailwind v3 config or v4 @theme block — without eyeballing hex codes or retyping spacing values.
AccessibilityWCAG 2 vs APCA Contrast: What's the Difference?
WCAG 2's fixed ratios and APCA's perceptual model disagree more often than you'd think. Here's how each works, when they conflict, and which one to trust.
TypographyHow to Find What Fonts a Website Uses
Four reliable ways to identify any website's fonts — from DevTools to one-click extension workflows that also capture weights and the full type scale.
Extract any website's design DNA
Free to inspect. No account, no tracking — runs 100% in your browser.
Add CSS DNA to Chrome — Free