Specly — Design Inspector

You are looking at a page and you want to know what it is made of. Which font is that, what weight, what is the spacing, what is that blue. That should take one hover, and it should not require opening DevTools, scrolling a computed-styles pane, or squinting at a colour picker. Specly puts the answer in a side panel. HOVER ANYTHING Turn on Inspect and move the mouse. For whatever is under it you get the typeface it is actually rendered in, the size, the weight with its real name, line height as both pixels and a ratio, letter spacing, alignment, the colour, and the contrast ratio against what is behind it with its WCAG verdict. Underneath that, the box model — margin, border, padding, content — drawn on the page in four colours and repeated as numbers in the panel. Click to pin it and the spec holds still while you move the mouse away. Arrow keys walk to the parent, the first child or a sibling, which is how you reach the wrapper you cannot hover because its child fills it. Then take the CSS. The panel writes the element's rule the way a person would — no forty-line computed-style dump, just the declarations that are actually doing something — and copies it in one click. THE PAGE PALETTE One click extracts every colour the page paints, ranked by how much of it you can see rather than by how many elements use it, so a hero section outranks a 10px legal link. Each swatch is labelled surface, text or border, and the whole palette copies out as CSS custom properties. Swatches are drawn on a checkerboard, because a translucent colour composited onto a flat panel background is a different colour from the one the page paints, and a tool that exists to be accurate about colour should not lie about alpha. THE FONTS IT ACTUALLY RENDERS Not the font-family the CSS asks for — the family the browser actually used. Every family on the page with a specimen, every size it appears at, every weight with its name. When a webfont failed to load and the page is silently showing a fallback, Specly says so; that bug is invisible otherwise. EVERY IMAGE, INCLUDING THE ONES THAT ARE NOT <img> CSS backgrounds, inline SVG, sprites, srcset sources, favicons. Each one with its natural size, the size it is displayed at, and how many times the page uses it. Point at a row and the element lights up on the page, which is the only reliable way to answer "which of these forty icons is that one". Select what you want and download it. IT DOES NOT TOUCH THE PAGE The overlay lives in a closed shadow root with pointer-events off. Specly adds no classes, rewrites no styles, and injects no floating window that has to fight the site's z-index — which is exactly what a popup-based inspector has to do, because a popup closes the moment you touch the page. A side panel is browser chrome. It cannot be covered or restyled by the site, and it stays open while you work. PERMISSIONS, AND WHY THERE ARE SO FEW Specly does not ask to read your data on every website. It requests no host permissions at all and declares no content scripts. Nothing runs anywhere until you click the toolbar icon on a page you chose; that grants access to that one tab, and the grant expires when the tab navigates. No account. No cloud. No analytics. Nothing is transmitted anywhere.