Design Inspector

Hover over any element to instantly inspect fonts, colours, spacing, images and design tokens.

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.