Design System Extractor
A Chrome extension that reads a live page and hands back its design system (brand colors, fonts, asset URLs, clean SVGs, shadows and corner radii) in one click, without ever opening DevTools.
What it does
It opens in Chrome's side panel and reads whatever page you are on, then hands you its design system.
- Brand colours, split into what they are used for (backgrounds, text, borders), with any CSS variables the site declares.
- Every font on the page, with the weights and sizes actually in use.
- Images and icons, with the SVGs cleaned up rather than dumped raw.
- Corner radii, shadows and gradients.
- Click any value to copy it. Or take the lot as CSS or JSON.
It follows you as you browse, so moving to another page just updates the panel.
Why a side panel
The alternative is DevTools, where getting a colour palette means clicking through the computed styles of forty elements one at a time. The information was always there; it was just never collected in one place.
Good to know
It reads the page as your browser rendered it, so anything drawn inside a canvas, loaded behind a login you are not in, or applied only on hover will not show up. What you get is what was on screen.