Brand Inspector — logos, colors & fonts

Turn the website you are looking at into a brand kit. Open the side panel and it extracts the page's design: download the logo, get the full color palette — every color named in plain words, with where it is used and its hex code one hover away — identify the fonts behind the headings and body, and export it all as a style guide, brand book, stylesheet, or one paste for an AI tool. Then say what should change, right on the page: retype a headline where it sits, recolor a button, pin a comment, drag a box around a gap. One click copies what is left as a clean list — the exact old and new words, the exact old and new colors and sizes, what each comment is about — ready to paste into Claude, ChatGPT, Cursor or v0. Notes tick themselves done when the page shows the change. Need more? The detailed version adds where each element is and how it is styled. It stays open as you browse and re-reads each page on its own, so researching five competitors is five tab switches rather than fifteen clicks. Brand — what the page looks like The logo it decides is the real one, shown large on the brand's own color, with how confident it is. Then everything else it found: logos declared in structured data, tab icons, home-screen icons, app icons from the web manifest, embedded SVG — including sprite-based logos, where the shape lives somewhere else on the page and simpler tools export an empty box — and logos painted as CSS backgrounds. Partner grids, payment marks and interface icons are filtered out. The palette is the part worth having. Colors are weighted by the area they actually paint, so the page's real color leads rather than whichever one appears most often. And each one says where it is used — *header background*, *button fill*, *heading text*, *divider* — which is the difference between a list of hex codes and something you can rebuild a design from. The palette is also said out loud — *"leads with warm Amber over Cream, headings in Helvetica over Georgia body"* — two sentences written from the scan itself, and every color carries a plain name like Terracotta beside its hex. No AI and no server behind either: the words come from the same data as the numbers. Beside every color is a small outline of the page with the parts that color paints filled in — the same outline the page's-shape drawing uses, so you can see at a glance that the orange is the hero and the brown is the header, without reading a word. A color that turns out to be the page itself says so rather than pointing at a section. Every color says in plain words whether dark or white text works on it — the ratios are one hover away — and a colorblind check shows which pairs stop being distinguishable for the roughly one man in twelve who cannot separate red from green. It remembers the site, not just the page As you open more pages of a site, each color says how many of them carry it — "on 4 of 4 pages of this site" is a brand color; "1 of 4" is one page's content. Come back to a page later and the panel tells you what changed since your last visit: a new color, a shifted shade, a swapped font. All of it from scans that happened in your own browser — nothing is looked up. Does the page agree with itself? The audit, with locations on every finding: text that fails WCAG contrast *against the background it actually sits on* — "text in the hero reads at 2.1 against a needed 4.5" — two colors close enough that nobody chose both on purpose, one heading role served by different fonts on different pages, and spacing values off the page's own rhythm. Pairs the page actually shows, never invented ones; when everything holds, it says so in one quiet line. And any of your last twenty sites can stand side by side: palettes averaged across every page remembered for each, the fonts, and each page's outline — the lineup a marketer opens five competitor tabs to build, from scans you already made. The tabs do not need to still be open. Fonts come with their full fallback stacks, sizes, weights and letter spacing, plus who serves them — Google Fonts, Adobe Fonts, Bunny, the site itself, or your own system. The page's shape The section outline drawn at real proportions, so you can see the shape of the page at a glance — and one click photographs the visible page into an annotated snapshot with its skeleton drawn beside it, taken only when you ask, and it never leaves your machine. Markup — say what should change, on the page itself Open the toolbar and mark up the live page the way you would mark up a printout. Edit copy: click any headline, button or paragraph and retype it where it sits — Enter keeps it, Esc puts it back. Style: click anything to change its color from the site's own palette, its size, weight, corners or padding, and watch it change as you go. Comment: click anything to pin a note to it, or drag a box around a gap, a crowded row, a whole section. Browse: use the page normally, open menus, follow links — the toolbar follows you to the site's other pages and your notes stay put. Your changes stay on the page as a preview, even after a reload. And when the site starts showing one for real, its note ticks itself done — so the list is always exactly what is left to do. Every note keeps its exact place: the words before and after, a selector that matched, the path through the page, its size and position, the font and colors, the section and nearest heading — and on a development build, the source file and line that rendered it. One click turns the lot into a single prompt for Claude, ChatGPT, Cursor or v0, with the brand's palette and type attached if you want them, so the change you asked for is the change you get. Notes stay on your machine until you clear them. Save — every export in one place One tab for taking it with you. The details a designer or developer would ask for ride along in every file: the spacing rhythm the page is built on, the type scale, the corner radii, the container width, the breakpoints, the transi…