Typography Extractor

Extract and export any website's typography system as CSS tokens or Tailwind config

Typography Extractor scans any webpage and pulls out every unique text style — font families, sizes, weights, line heights, letter spacing, and more — then exports them as clean, production-ready design tokens. What it does: • Scans the full DOM including Shadow DOM and same-origin iframes • Deduplicates styles automatically — no noise, just unique tokens • Assigns semantic roles: display, h1–h6, body, caption, label, code, overline • Accumulate tokens across multiple pages into one unified system • Exports as CSS Custom Properties → :root { --font-body-size: 16px; } • Exports as Tailwind config → theme.extend.fontSize / fontFamily AI Enrichment with Claude (optional): Connect your Claude API key to automatically name and describe every token. Turn raw font data into a fully documented design system in seconds — semantic names like "hero-headline" or "nav-label" generated instantly. Perfect for: → Developers reverse-engineering a site's type scale → Designers auditing typography consistency across pages → Teams migrating a codebase to design tokens → Anyone building a Tailwind or CSS variable config from scratch Privacy: Your Claude API key is stored locally in your browser only. It is never transmitted anywhere except directly to api.anthropic.com when you click "Enrich with Claude." Typography Extractor does not collect, store, or transmit any personal data. All scanned typography data is stored locally in your browser (chrome.storage.local) and never leaves your device. If you choose to use the "Enrich with Claude" feature, your typography tokens are sent directly from your browser to api.anthropic.com using the API key you provide. This key is stored locally and never shared with or accessible by the extension developer. No analytics, tracking, or telemetry of any kind is used.