Design Tokens

A design system is rarely written down as completely as it is implemented. The real palette, spacing scale and type ramp live in stylesheets — spread across custom properties, theme overrides and hard-coded values — and rebuilding them by hand from DevTools means clicking through hundreds of rules and copying values one at a time.

This tool reads them all at once. It walks every stylesheet on the page, including cross-origin ones the page itself is not allowed to inspect, and collects every custom property, plus variables set at runtime in inline styles. Variables on :root become base tokens; the same names redefined under a theme selector such as .dark, [data-theme="dark"] or prefers-color-scheme become separate modes; variables defined on individual components are listed as scoped. Every value is resolved through its var() chain, so you see the colour that actually renders, not just a reference to another variable.

Each token is classified from its value and name — colour, font family, font size, weight, line height, spacing, radius, shadow, gradient, duration, easing or z-index — and colours are normalised to hex, including the channel-only formats Tailwind and shadcn use (222 47% 11%) and Bootstrap's -rgb triplets. Alongside the declared variables, the tool samples rendered elements to report the colours, font stacks, sizes, radii and shadows that are actually used, with usage counts — exactly what you need on a site that never adopted variables at all.

Export takes one click. Download tokens JSON saves the W3C Design Tokens format ($value and $type), which the Tokens Studio plugin imports into Figma and Style Dictionary turns into code for any platform; theme modes and observed values are kept in their own groups, so nothing gets mixed up. Download CSS writes the variables back out as a stylesheet, with each mode under its original selector.