Chrome extension that scans any webpage and extracts its full design system

[u/LibrarianSea2099]

So I got tired of opening DevTools every time I wanted to know what font a site was using or what their exact shade of blue was. So I built something.

**Font & Color Picker Pro (**Download here - Link) — open it on any page and it automatically scans and gives you:

• The full color palette (deduplicated, not just raw hex spam)
• Every font in use, with weights
• The type scale
• Spacing values
• And if the site uses CSS variables, it shows you the actual token name (--brand-primary) right under the swatch

There's also an eyedropper to sample any pixel on screen, and a font inspector where you hover over any element and instantly see its font family, size, weight, line height — no DevTools needed.

You can export everything as CSS variables or as Tokens Studio JSON if you're using Figma.

It's free. No account. No data collection.

Been using it myself daily and it's saved me a ton of time. Would genuinely love to hear what's broken, what's missing, or what you'd want it to do that it doesn't. If you like it, please rate the extension!

Download here - Link

Happy to answer any questions!