Design Inspector Pro injects a real-time inspection panel directly into any webpage. Switch modes to examine colors at pixel level, decode element typography, dissect layout and CSS, or pull everything at once — then export it all in the format you want.
┌───────────┬───────────┬───────────┬───────────┬───────────┐
│ Inspector │ Palette │ Fonts │ Export │ System │
└───────────┴───────────┴───────────┴───────────┴───────────┘
| Tab | What You Get |
|---|---|
| Inspector | Real-time element properties with 4 inspection modes |
| Palette | Full-page color extraction with copyable swatches |
| Fonts | All typefaces ranked by usage with size & weight data |
| Export | Dump element styles as CSS, JSON, or Design Tokens |
| System | Auto-generated design system — colors, type, spacing |
|
Pixel-accurate zoom lens · 11×11 grid magnification · Hex + RGB + HSL · Click to copy · Auto-saves to history |
Font family · Size · Weight · Line-height · Letter-spacing · Text alignment |
Display · Position · Flexbox/Grid · Padding · Margin · Border · Box-shadow |
Everything combined — colors, typography, layout, borders, element metadata in one panel |
The zoom lens renders an 11×11 magnified pixel grid around your cursor. Hover to preview live hex and RGB values. Click to copy the exact color and append it to your persistent history.
Hover to preview — click to lock. The inspection panel follows the element on scroll so context is never lost. Hit Esc to release.
Crawls every element on the page and extracts all unique colors into a clean, copyable swatch grid — every color the page uses, laid out at a glance.
One click produces a complete design system snapshot: color palette, type scale, and spacing scale — extracted directly from the live page.
Picked colors are saved automatically (up to 20). Access them anytime via the clock icon in the header. Click any swatch to copy, or wipe the slate clean in one tap.
Export any element's computed styles as:
- CSS — drop-in stylesheet declarations
- JSON — structured property map
- Design Tokens — W3C-style token format
Ships in dark mode. Toggle with the sun/moon icon — preference persists across sessions.
# 1 — Clone or download
git clone https://github.com/your-username/design-inspector-pro.git
# 2 — Load in Chrome
# Navigate to chrome://extensions/
# Enable "Developer mode" (top-right toggle)
# Click "Load unpacked" → select the project folderThe extension icon will appear in your toolbar immediately after loading.
① Click the Design Inspector Pro icon in your Chrome toolbar
② Pick a mode → Color · Font · CSS · Full
③ Hit "Start Inspecting"
④ Hover any element to preview its properties live
⑤ Click to lock the panel | Esc to release
| Key | Action |
|---|---|
Esc |
Unlock panel / stop inspecting |
Design Inspector Pro/
├── manifest.json ← Extension manifest (MV3)
├── background/
│ └── background.js ← Service worker
├── content/
│ ├── content.js ← Core inspection engine (injected)
│ └── content.css ← Overlay & highlight styles
├── popup/
│ ├── popup.html ← Extension popup shell
│ ├── popup.js ← State management & tab logic
│ └── popup.css ← Dark / light theme styles
└── icons/
└── icon.png ← Extension icon
| Permission | Why |
|---|---|
activeTab |
Inspect the current page's DOM and styles |
clipboardWrite |
Copy colors and CSS to clipboard |
storage |
Persist theme, minimize state, and color history |
| Layer | Details |
|---|---|
| Platform | Chrome Extension — Manifest V3 |
| Logic | Vanilla JavaScript · Zero dependencies · Zero frameworks |
| Isolation | Shadow DOM — panel never conflicts with host page styles |
| Color Engine | Canvas API · getImageData for sub-pixel accuracy |
| Persistence | Chrome Storage API |
MIT — free for personal and commercial use.