The Visual Identity Checklist: 10 Things You Need Before Building a Website

Why visual identity comes before web design

We regularly receive briefs from companies who want a new website before they have a defined visual identity. The instinct is understandable — the website is visible, urgent, and often has a deadline attached. But a website designed without a visual identity foundation requires constant decision-making during the build about things that should have been decided before the first wireframe: what colours mean, how typography hierarchies work, what the logo looks like at small sizes, what the brand sounds like in writing.

The result is either a slow, expensive build full of revisions, or a website that looks designed-by-committee and inconsistent. This checklist covers what you need before a website build begins.

1. A primary logo with clear rules

Your logo needs to exist in at least three formats: full colour on a light background, full colour on a dark background, and a single-colour or monochrome version. Each should be available in SVG format for the web (infinitely scalable, tiny file size) and PNG with transparent background for other uses. Without dark-background and light-background versions, web designers are constantly forced to make compromises on placement.

2. A defined primary colour palette

A primary palette should contain no more than three colours: a dominant brand colour, a secondary colour that complements it, and an accent for highlights and CTAs. Each colour needs an exact hex code (and ideally HSL/RGB values for developer use). Without exact values, every designer and developer makes their own interpretation — and brand colour drift is one of the most common causes of visual inconsistency.

3. A secondary (neutral) palette

Most web interfaces require neutrals: backgrounds, borders, text at varying levels of emphasis, disabled states. Define at least four neutral tones — a near-white background, a light grey for secondary surfaces, a mid grey for borders and secondary text, and a near-black for primary text. These are invisible in the sense that they rarely carry brand meaning, but they determine how professional and polished the interface feels.

4. A primary typeface with defined usage rules

You need at minimum a heading typeface and a body typeface — these can be the same family with different weights, or two separate families. More than two type families creates visual noise. For each typeface, define: which weights are used (e.g. 400 for body, 600 for UI labels, 700 for headings), the scale (H1 through H6 sizes), and what it is never used for.

5. A defined brand voice in writing

A visual identity without a written voice creates inconsistency between how the brand looks and how it sounds. Brand voice is not a tone guide of abstract adjectives — it is a set of concrete decisions: Do we use contractions? Do we write in first or third person? Do we use technical language or plain English? Do we ask rhetorical questions? Two or three clear rules produce more consistency than a 20-page style guide nobody reads.

6–10: Supporting elements

• Iconography style: Outline, filled, or duo-tone? Consistent stroke weight? This determines which icon libraries are appropriate and whether custom icons are needed.
• Imagery direction: Photography style, illustration style, or both? Dark and moody or bright and airy? This determines what images get purchased, created, or commissioned.
• Spacing and border radius system: Defines whether the brand feels tight or generous, sharp or friendly.
• Motion and animation direction: Should transitions feel fast and crisp, or slow and considered? Bouncy or linear?
• Brand application examples: Seeing the identity applied to real contexts (email signature, social post, presentation template) reveals problems that a style guide alone never shows.

Our brand identity service delivers all ten of these elements before any website design begins.