Design Inspector

About

Design Inspector is the hover-to-inspect tool I always wanted but 
could not find, so I built it.

Activate it, move your cursor over any element, and a tooltip appears 
right next to your mouse showing the computed styles for whatever 
you are hovering. Font family, size, weight, line height, letter 
spacing, hex and RGB colour values, padding, margin, border radius, 
box shadow, all pulled straight from the computed CSS, no DevTools 
required.

Click any element to lock the tooltip in place. Once locked, every 
row is clickable. Click a hex code to copy it, click a font name 
to copy it, click a padding value to copy it. Press Esc to unlock 
and go back to hovering, or press Esc again to kill the inspector 
entirely.

Need a full audit? Hit Scan Page and it breaks everything down across 
four panels:

- Fonts: computed typography per element type (h1, h2, p, a, button 
  etc) with a live preview rendered in the actual font
- Colours: full colour palette extracted from the page, sorted by 
  frequency, with hex and RGB values. Hover any swatch to highlight 
  every element using that colour directly on the page
- Images: every img element and CSS background image, with natural 
  and display dimensions
- Design tokens: padding, margin, border radius, box shadow, flex 
  properties and max-width across key layout elements

Export the full results as structured JSON or download a Markdown 
report.

All processing is local. No data leaves your browser, no external 
requests, no tracking, no accounts.

Manifest V3. Open source on GitHub.