TokenLift — Design Tokens Extractor

Extract a website's design tokens — colors, type, spacing, shadows — and export to CSS variables, Tailwind & JSON. 100% local.

Reverse-engineer any site's design system in one click. TokenLift scans the page you're viewing and pulls out its design tokens — the real colors, type styles, spacing, border-radii and shadows — then hands them to you as code. ★ WHAT IT DOES • Extracts colors, typography, spacing, border-radius and shadows from the current page • Surfaces the site's DECLARED CSS variables (its real tokens) as a first-class group • Copy any single value, or export the whole set • Exports: CSS custom properties, Tailwind theme config, JSON, and Style Dictionary / W3C DTCG ★ FOR Front-end and design-system engineers, UI designers, and agencies auditing or rebuilding a site — anyone who needs a page's tokens as usable code instead of eyeballing DevTools. ★ FAST & PRIVATE One read-only pass over the page, on your click. No account, no tracking, no servers — everything happens locally in your browser. Minimal permissions: it can touch a page only when you click TokenLift on it. ★ HOW TO USE 1. Open any website → click the TokenLift icon. 2. Browse the extracted tokens (colors, type, spacing, radii, shadows + declared CSS variables). 3. Copy a value, or export to CSS / Tailwind / JSON / Style Dictionary. Built for developers. Single-purpose, lean, local.