TypoTokens

TypoTokens scans the open Framer page and lists every design value in use: font families, weights, font sizes, line heights, letter spacing, colors, gaps, paddings and corner radii. Each value comes with a count, so you see what your design actually uses.

It then flags inconsistencies, so you get a clear list of issues to fix before handoff or launch. Agencies can use it to review client files and inherited projects.

What it checks

• Too many font families or font sizes

• Near-duplicate sizes (15px vs 16px) and colors (#111 vs #121212)

• Raw colors that match a Color Style but are not linked

• Text layers without a Text Style

• Spacing and radius values off a 4px or 8px grid

• Too many weights in one family

Free: scan the open page, full report with counts and issue flags, export as CSS custom properties.

Pro ($29 one-time, lifetime): scan the whole project, export as W3C Design Tokens JSON, Tailwind theme and SCSS variables, and click an issue to select the affected layers. Pro is paid through Stripe and sold by EARTHLOOM HOLDINGS LIMITED; activate it with a license key inside the plugin.

The scan runs locally in the editor. No account, no tracking. Only Pro license activation contacts our license server.