Brand Slam icon

Brand Slam

Brand Slam is a Firefox extension that reads the page you are on and lays it out as a brand kit in a new tab. It shows the logo in its own colours, the site's colours, every typeface with a character set, and the type hierarchy at real sizes. Save the kit as one HTML file with the logo and fonts embedded, or as a PNG.

A dark window titled Brand Slam with the pink B icon in its corner. Inside, a brand kit for Ars Technica shows the orange ars TECHNICA logo on a dark panel, with Save HTML and Save PNG buttons above it. Below the logo, a row of eight colour swatches runs from orange and green through greys to white, each labelled with its hex code.

What problem does it solve?

Looking at how a site is put together usually means digging through the inspector for its logo, colour values and fonts, then copying them into a doc by hand. Brand Slam does that digging in one click and lays the result out as a brand kit you can keep.

How it works

Click the toolbar button on any page and a brand kit opens in a new tab. The logo sits on whichever background it reads on, in its own colours. The colours come from the page’s styles and from its logo and favicon, ordered by hue. Each typeface gets a large specimen and a character set, and the hierarchy shows headings, body and small text at the sizes the page uses them. Save the kit as one HTML file or as a PNG.

Whom it’s for

Designers sizing up a client’s site before a first meeting, and anyone who wants a quick record of how a website looks.

Tech

A Manifest V3 Firefox extension in plain JavaScript. It runs on the active tab only when clicked, needs no host permissions, and collects no data. The HTML export embeds the logo and fonts, and the PNG is drawn in the browser.

Frequently asked questions

What is Brand Slam?

A Firefox extension that turns the page you are on into a brand kit, with its logo, colours, typefaces and type hierarchy.

What can I save?

One HTML file that works offline, with the logo and fonts embedded, or a high-resolution PNG of the whole kit.

Where do the colours come from?

From the page's own styles, plus the colours in its logo and favicon.

Does it collect any data?

No. It runs only when you click its toolbar button, only on the tab you are viewing, and sends nothing anywhere.

Is it on Chrome?

No. It is a Firefox extension, on Firefox Add-ons.