TokenLift — Design Tokens Extractor

About

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.