Design Tool

Design Tool inspects any website the way you review a Figma file. DevTools is built for engineers. The Elements panel is a DOM tree, computed styles are three hundred properties in alphabetical order, and measuring the space between two things means eyeballing an overlay. None of that maps to how a designer thinks. Hover an element and read its type spec: size, weight and line height up front, then family, letter spacing, transform and colour. Click two elements and the distance between them is drawn on the page with dimension lines, with the spec of both elements stated underneath. Select a container and see margin, border and padding as nested rings, with the flex or grid gap stated right next to the padding. WHAT YOU GET • Type styles at a glance, in designer vocabulary rather than CSS • Measure between any two elements, drawn on the page, with the spec of both • Design token names instead of raw values, where the site defines them • Media: the format actually served, aspect ratio, and whether the asset fits • A spacing box: margin, border, padding, content, plus gap • px, rem and em, converted everywhere at once • Click any value to copy it • Light and dark, and a panel you can drag anywhere and resize DESIGN TOKENS If the site is built on CSS custom properties, a colour reads as --color-brand-600 rather than #2A51FD, with the hex still shown underneath. Copy either one: the token name for code, the value for Figma. A measured gap that lands exactly on the spacing scale says so too, which is usually the thing you were checking. Where a token can only be inferred by matching values, it says so rather than pretending to certainty. MEDIA Hover an image or video for the format the browser actually chose out of srcset, not the src fallback, so a picture element serving WebP reports WebP. Aspect ratio is stated for the rendered box, and again for the asset itself when the two differ, along with what the box is doing about it: cropped, letterboxed or stretched. Asset scale catches a blurry upscale and a 3x file in a 100px slot, neither of which the page tells you about anywhere. A video that autoplays, loops and is muted with no controls is reported as a background loop, because it behaves nothing like a video someone plays. BUILT FOR REAL PAGES Most card grids stretch an invisible click target over the whole card, which means a plain hover lands on that instead of the heading you were pointing at. Design Tool skips overlays that paint nothing, and holding Cmd or Ctrl reaches the most specific element under the cursor, the same way you select through a group in Figma. rem is resolved against the page's real root font size, not an assumed 16px, so sites that set a 62.5% root report correctly rather than confidently wrong. Nested measurements come from the container's padding box, so a 12px padding with a 1px border reads as 12px, not 13px. PRIVACY No network requests. No analytics. No accounts. Nothing is injected into any page until you click the toolbar icon or press the shortcut, and access is limited to that one tab for that visit. Your unit, theme and panel position are stored locally and never leave your machine. Open source: https://github.com/shadezie/design-tool HOW TO USE IT Click the toolbar icon or press Option+Shift+I (Alt+Shift+I on Windows). Hover to inspect. Click one element, then hover or click a second, to measure. Press U to cycle px, rem and em. Press Esc to clear, Esc again to exit.