Brand Inspector — logos, colors & fonts

Extract any site's logos, colors & fonts — then mark up the page and copy exact edits as one prompt for your AI tools.

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 transition timing it moves on ("0.2s ease-out"), and the colors things turn on hover — read from the site's own stylesheets, without the hovering. - Any asset in its own format — a vector is never quietly turned into a picture - A one-click logo pack: the logo trimmed to its real edges, plus white and black versions for dark and light surfaces — SVG and PNG, transparent - Any vector rendered to PNG at 128, 256, 512 or 1024 px - A ZIP of everything, with a machine-readable brand-kit.json and ready-to-paste email blocks — header, button and footer as table-based HTML in the brand's colors, built for the clients that strip everything else - A style guide PDF — swatches, percentages, where each color is used, the same page outline beside each one, and the type - A stylesheet with the colors named for what they do: --color-header-bg, not --brand-3 - A brand sheet image, sized to share - A brand book — the whole scan as one interactive HTML file that opens anywhere and phones nobody: palette with click-to-copy, type, the page's shape, the tokens - A design brief in Markdown — the tokens, which sections each color belongs to, the section-by-section layout and the proportions, written to hand straight to an AI model - A one-click AI packet — the brief and the skeleton as a single paste for Claude, ChatGPT or v0 - An HTML skeleton — the page's bones as a file you can open - The structure as JSON Always current When a new version is out, the panel says so and restarts into it with one click — no waiting for Chrome to get around to it. Settings can check the Chrome Web Store on demand. Private by design No account. No telemetry. No analytics. No server. Nothing to sign up for and nothing being sold to you — the panel asks you for nothing at all. The scan reads the page already open in front of you, and asset downloads come from the site serving them, never through a third-party proxy. Stored on your machine: your settings, the markup notes you make, and, for the last 20 sites you inspected, the scan results themselves — the colors and fonts found — which is what powers "on every page of this site" and "what changed". Clearable in one click, and it never leaves your browser. Light and dark, full keyboard operation, and screen-reader labels throughout.