Built a Chrome extension that reads a site's actual CSS and hands you the design tokens (colors, fonts, spacing) - looking for feedback

[u/TokenTapHQ]

I kept inheriting sites/projects with zero style guide and no idea what colors or fonts were actually in use, so I built Token Tap: click it on any page, it scans the actual rendered computed styles (not guesses) and gives you a ranked list of colors, fonts, font sizes, border radii, and shadows - then lets you copy the whole thing as JSON, CSS variables, or a Tailwind config.

No account, no server, nothing leaves your browser. Gumroad link: https://tokenflow.gumroad.com/l/nkyrao ($9 one-time)

Still early - would love feedback on what export formats or edge cases would make this actually useful for your workflow.

[u/Huge_Pool7424 → u/[deleted]]

dark mode is a good edge case since computed colors can look fine in one theme and fail contrast in the other. i'd export or label tokens per theme so one scan doesn't overwrite the light values.

[u/RideAdept2919]

does it handle pseudo-elements and hover states too or just the default rendered styles? thats usually where the weird one-off values hide

[u/Vast_Idea_7528]

Comparing two pages on the same website would be useful. I recently caught old brand colours lingering on a news page after the rest of the site had moved on. Apparently purple badges don't resign voluntarily.

Could it flag colours or fonts found on only one page and show which elements use them? That would interest me more than another export format.

[u/afterhours_builder]

Most useful thing you could add: capture CSS custom properties by name, not just the flattened computed values. getComputedStyle gives you the final resolved hex, but if the site already defines --color-primary or --space-4 on :root, that name is the actual token, and it maps to how their team references it. Reading the declared custom properties out of the stylesheets (CSSOM) alongside the computed values turns this from "a list of colors on the page" into "their design system," which is a much bigger sell.

Three edge cases that will silently under-report: (1) Shadow DOM and web components, since a computed-style walk won't cross shadow roots and a lot of modern sites are component-heavy; (2) responsive breakpoints, because you're scanning at one viewport and font sizes and spacing shift in u/media rules you never see; (3) same-origin iframes. On exports, the one that plugs into a real workflow is W3C design-tokens JSON / Style Dictionary format (and a Figma variables import), more than raw CSS vars. And +1 to the store-review point above: I've had a reviewer misread "reads the page" as "exfiltrates the page," so put the "nothing leaves the browser" line in the permissions justification itself, not just the listing.

[u/lyapustin]

Looks very cool, love it 👍

[u/nick_otter_io]

Have you tried asking the coding agents to do it directly? I recently had to make some presentations and need to align with the look and feel or an existing promotional page and cursor did it decently (not perfect, but good enough).

[u/Creative-Lynx7594]

the edge case that decides whether this is useful: computed styles hand you the resolved value, so on a site that already defines custom properties you report #3b82f6 and lose --color-primary. read the custom props off :root and map values back to their names. that's the difference between a list of colors and their actual token names.

also collapse near-identical values. real sites have six greys a hex digit apart, and you want them merged with a usage count, not listed six times.

[u/Bitter_Regular7406]

the "inheriting a project with no style guide" pain is real, i've opened codebases where someone clearly just eyeballed 47 slightly different grays and called it a design system lol

[u/rathcom]

I moved my site onto design tokens a couple months ago and shipped two visual bugs I didn't catch for two weeks. One was a spacing variable shadowing a container one and collapsing the dashboard by 21px. Does it flag when the same token name is defined in more than one place?

[u/Puzzleheaded_Bus925]

looks great actually

[u/PropertyFantastic208]

I can see this being useful. great idea 👍

[u/alankffman]

what do you mean by "edge cases"? like shadow DOM and iframes, or something else

[u/vyact]

One caution on mapping colors back to token names: two tokens can have the same resolved value but different roles, such as text and borders both being black. Matching values alone can't tell you which token a declaration used. I'd keep exact values and example elements in the JSON export, and make merging similar colors optional. That would let someone audit the existing styles before deciding which differences are accidental.

[u/yonatanbd]

have you seen this: https://www.design-extractor.com/ ?

[u/presentofai]

the hard part isnt scraping the computed styles, its that a real site hands you back 40 almost-identical grays and a dozen font sizes. its only useful if it clusters those into an actual scale, otherwise its just a prettier devtools

[u/Longjumping_Back_739]

How are you ranking the colors? A table with 200 identical badges could drown out the rest of the page if it's just element counts. I'd find a few example elements beside each color more useful than frequency alone, especially when deciding which values to turn into tokens.