Design Token Extractor

Read any site's real design system: colour, type scale, spacing, radius and shadows. Export CSS, JSON tokens or Figma styles.

Find a site with an interface you admire, and getting anything usable out of it means opening dev tools, clicking elements one at a time, squinting at hex codes and copying numbers into a notes file. Twenty minutes later you have a rough approximation and no idea what you missed. Design Token Extractor does it in about a second, and hands you a file at the end. Open any page, click the icon, and you get that site's actual design system: the full colour palette, the type scale, the spacing rhythm, every corner radius and every shadow — read from the page as it really renders, not from what a stylesheet claims. Then export it as CSS variables, a JSON design tokens file, or Figma styles. WHY YOU MIGHT WANT IT • Competitive audits that end in something reusable, not a screenshot • Matching or rebuilding an existing site's visual language without guessing • Documenting a design system nobody ever wrote down — including your own • Learning how a site you admire is actually put together WHAT IT READS • Colour: every value the page paints, separated by the job it does. Text, background, border, icon and shadow colours are told apart, each with a count of where it is used • Typography: every family, size, weight, line height and letter spacing, arranged as a type scale rather than a flat list, with the ratio between steps worked out • Spacing: padding, margin and gap values, with the underlying grid inferred and anything sitting off it flagged • Corner radius: every distinct radius, drawn as a real corner • Shadows: every distinct shadow with its offset, blur, spread and colour, beside a live preview EVERYTHING IS SHOWN, NOT LISTED Colours are swatches at a size you can actually judge, not hex codes in a table. Each type step is set in its own font, size and weight, so you see the hierarchy instead of reading about it. Spacing bars are drawn at true relative scale, so the rhythm is visible without reading a single number. Shadows are previewed on the scanned page's own background colour — a shadow tuned for a white page is invisible on a dark one, and showing it there would tell you nothing. THREE EXPORTS, AND IT EXPLAINS WHICH ONE YOU WANT • CSS variables: custom properties ready to drop into a stylesheet and use with var(). Nothing to install • JSON design tokens: the W3C Design Tokens format, so a tool like Style Dictionary can generate CSS, iOS, Android and Tailwind from one file • Figma styles: colour, text and effect styles in Figma's own shape, for import through the Tokens Studio plugin Untick anything that is not really part of the system before you export. If you have never used a token pipeline, the panel tells you plainly which format is for you and what to do with it. IT TELLS YOU WHEN IT ISN'T SURE Colours too close together to tell apart are reported as a near-identical group — the four greys that were meant to be one grey — rather than quietly merged, because that is usually the most useful thing on the screen. The spacing grid comes with the share of values that genuinely fit it. When a type scale doesn't hold to one ratio, it says so instead of inventing one. And a webfont that failed to load is flagged, because the sizes you are looking at are then the fallback, not the design. BUILT TO BE USED Light and dark, following your system. Full keyboard navigation, including arrow keys across the colour grid. Respects reduced-motion settings. The panel's own palette is contrast-tested in both themes on every build. PRIVACY Nothing is uploaded, ever. No analytics, no accounts, and no network requests of any kind — the build fails if one so much as appears in the source. The extension holds no standing permission to read any site: it is injected into a tab only when you click the icon, only for that tab, and it cannot see a page you have not opened it on. Every value is measured in your browser and every export is written there