How to read your brand board

Website

The page we read, as our browser saw it.

You get a desktop screenshot and, when the site has a phone layout, a phone screenshot too. The board also lists any other pages it read: up to two more from the same site, such as its pricing or about page.

Read: Full

We opened the page in a real browser and measured everything on it.

Read: Partial

The site stopped our browser, so the board comes from its code and style files instead. What that means.

Logo

The logo from the top of the page, shown on the site’s own background.

Below it is every other logo image we found, such as the small icon in the browser tab and the picture the site shows when someone shares a link to it. Select any of them to see it larger, open it, or download it.

We keep the sharpest file the site offers and never stretch a small one, so a logo may look small on the board, but it won’t look blurry. Logos belong to their owners: use them in work for that brand.

Colour

The site’s colours, grouped by the job each one does.

Brand colours

The colours that make the brand recognisable: its logo, its buttons, the colour it names as its own. They often cover only a small part of the page.

Interface colours

The working colours of the site: the page background, the surface of cards and panels, the text, the headings when they are set in a colour of their own, the muted text used for captions and labels, and the borders.

Dark sections

When a light site has dark bands, or a dark site has light ones, their background and the text set on them. On a dark site this group is called Light sections.

Why isn’t white a brand colour?

On most sites white is the page background. It can cover half the page, but nearly every site uses it, so it doesn’t tell one brand from another. If a brand really is black and white, black shows as its brand colour and the board says so.

Under each colour you see how much of the page it covers and how sure the board is that it belongs to the brand, such as High · in the logo. What the labels mean. Select a colour to copy its code.

Typography

The typefaces the site uses, and what it uses each one for.

Each typeface shows whether it sets headings, body text or buttons, and the weights the site uses (400 is regular, 700 is bold), and where it comes from: Google Fonts, Adobe Fonts, the site’s own files, or a font built into your device.

When a typeface is on Google Fonts, the board shows it in that typeface. When it isn’t, you see a stand-in unless the font is installed on your device. We name fonts but never hand them out: the licence stays with whoever made it.

Type scale

The size of each kind of text, from the biggest heading down to the small print.

For each level (headings H1 to H6, body text and small text) you get the size, the weight, the line height (the space each line takes) and the letter spacing, as the site sets them. When the size changes on a phone, the phone size is shown too.

We take the style each level is mostly seen in, not the first one on the page, so a small label in a menu doesn’t pass for a heading. Previews stop at 96 pixels so the biggest headings still fit.

Spacing

The gaps the site uses most, smallest first, each drawn at its real size.

These are the spaces inside and between things: the padding inside a button, the margin under a heading, the gap between cards. When most of them are multiples of 4 or 8 pixels, the board says the site sits on a 4 or 8 pixel grid. Keep to that grid when you build: it is a big part of why a site feels even.

Corners

How rounded the site’s corners are, most used first.

Corners belong to buttons, cards, images and form fields. Each one is drawn four times larger so you can see the curve, with a tile at true size inside it.

Pill

Fully rounded: a pill shape, or a circle when the item is square.

Square

No rounding at all.

Shadows

The shadows the site puts under cards, menus and buttons.

Each shadow is shown on the site’s own background, or on white when the site is dark, because a shadow can’t be seen on a dark page. Select one to copy it, ready to paste into your styles.

Buttons

Up to three button styles, as they look at rest, under the pointer and when you tab to them.

Each style shows its colours, its corners and its padding (the space around the label). A dashed line marks the edge of a button with no fill, so you can still see its size. “On hover” is how it looks under the pointer; “on focus” is how it looks when someone reaches it with the keyboard.

Links & inputs

How the site styles its links and its form fields.

The link style comes from links in the body of the page; links in the menu, header and footer are left out, because sites style those differently. Form fields show their fill, text, border and placeholder (the hint text before you type), and how they change when you tab into them. A link or field that sits in a section of another colour, such as a dark contact panel, is shown on that colour, and the board says which.

How sure is the board?

Every colour carries a label such as High · in the logo. The first word says how sure the board is that the colour belongs to the brand; the rest says why.

The first word: how sure

The rest: why

So Medium · from the style files only means the colour is in the site’s style files, but the board couldn’t see it on the page. Check it against the site before you rely on it.

Using your kit

Download Kit gives you the board as five files, plus a build brief being tested. Each one carries the same brand, written for a different way of building. Downloading needs a free sign-in.

Which file to pick

.button {
  background: var(--color-primary);
  font-family: var(--font-body);
  border-radius: var(--radius-md);
}

<button class="bg-primary text-background font-heading rounded-md">
  Get started
</button>

When a site can’t be read

Some sites block automated visits, and some take too long to load. The board then tells you what it could and couldn’t see.

• The page loaded in part. We read what had loaded and the board says the site was still loading. Some sections may be thin.
• Nothing loaded. The board comes from the site’s code and style files. Colours and fonts still come through, but sizes, spacing, buttons and links can only be measured on the live page, so those sections say Not measured.

Try Redo on the board later, or use the Read with Brandgrabit bookmark to read the site in your own browser, where it won’t be blocked.