Brand Identity for the Web: What Actually Has to Be Decided

Brand identity projects often produce a 60-page document with fourteen logo lock-ups, a mood board, and a page about brand values that nobody reads twice. Then the website gets built and half the questions it needed answered aren't in there.

These are the eight decisions a website genuinely needs made, roughly in the order they have to be made, with a note on which two carry the most weight.

1. Positioning: who this is for and what it's for

The first and most important decision, and the one most often skipped because it's uncomfortable.

On a studio rebrand last year, three founders gave us three different answers to "what should someone hire you for?" That's normal at their size and fatal on a website, because a site can't hedge the way a person in a room can. We ran the interviews separately, wrote down where the answers diverged, and made them choose. Uncomfortable meeting. Right decision.

The output is one sentence: who you're for, what you do, and what makes the choice obvious for that person. If it takes a paragraph, it isn't decided yet.

Note what this excludes. Good positioning loses people deliberately. A headline that speaks precisely to one audience will lose everyone else, and that's the mechanism, not a side effect.

2. Voice: how it sounds in a sentence

The second decision that carries real weight, and the one most brand books handle worst. "Professional yet approachable" tells a writer nothing.

What works is examples. Three sentences you would write and three you wouldn't, side by side, with a line on why. Then some concrete rules:

• Do we use contractions? (Usually yes. "We'll" not "we will".)
• First person plural or third person? ("We build" not "Quesiono builds".)
• Words we don't use. A banned list is more useful than an aspirational one.
• How we handle bad news, prices, and constraints. This is where voice actually gets tested.

Our own list bans about twenty words — delve, elevate, unlock, seamless, and the rest of the vocabulary that signals generated text. It's the single most-referenced page in our internal documentation.

3. Typography: two families, a real scale

Two typefaces is enough. One for display, one for body. Three is a system nobody maintains.

What has to be decided:

• The display face, which carries most of the personality. Check it has the weights you need and the styles you'll want — plenty of otherwise excellent variable fonts have no italic, which changes how you handle emphasis.
• The body face, chosen for reading at 16–18px on a phone. Test it there, not at 48px in a specimen.
• A scale. Six or seven steps, defined once. We use fluid steps with clamp() so sizes scale continuously instead of jumping at breakpoints.
• Line length and line height. 60–75 characters per line for body text, around 1.6 line height. Wider than that and the eye loses the return.

Practical note: self-host your fonts and load only the weights you use. Each additional weight is a real download, and a variable font in one file usually beats four static ones.

4. Colour, with the contrast computed

A palette is not a mood board. It's a set of decisions about which colour goes where, with the accessibility maths done.

What a usable palette needs:

• One or two dark surface colours, and one or two light
• A text colour for each surface, contrast-checked at 4.5:1 minimum for body text
• One accent, used sparingly, with a documented rule about where it can and can't go
• Border and divider values for both light and dark contexts
• Semantic colours for error, warning, and success — usually forgotten until the first form is built

The accent rule matters more than it sounds. Our own accent is a champagne gold. It's 8.5:1 against our darkest surface and 2.1:1 against cream, which means it's readable on dark and decorative on light. That's written into the config as a comment so nobody uses it for body text on a pale background six months from now.

One clinic site we inherited had body text at 2.9:1. It looked refined on the designer's monitor and was unreadable on a phone in daylight, and for a patient base skewing older it was excluding the exact audience the site existed for. Compute the numbers.

5. Imagery: a rule, not a folder

Decide what pictures this brand uses and, more usefully, what it doesn't.

"Real photography of our own team and work, never stock people in an office" is a rule. "Authentic and human" is not. Write down the treatment too — full colour or duotone, cropped tight or wide, people looking at camera or not.

If there's no photography budget yet, decide what fills the gap. Illustrated systems, generated pattern work, product screenshots, or typographic layouts are all defensible. Placeholder stock that stays for three years is not.

6. Motion: how things move, and when they don't

Usually undefined, which is why sites end up with six different easing curves.

Decide three things: the default duration (200–300ms for interface feedback, 600–800ms for entrances), the easing curve, and what animates on scroll. Then one hard rule: everything respects prefers-reduced-motion, and respecting it means stopping the animation, not speeding it up.

A useful test for whether motion is earning its place: turn it all off and see whether the page is worse. Often it isn't.

7. The logo, and how little it does

Logos get most of the attention in brand projects and do the least work on a website. It sits at 32px in a corner, and nobody has ever chosen a supplier because of one.

What actually matters: it's legible at 24px, it works in one colour, it works on both dark and light surfaces, and there's a square version for favicons and social avatars. Fourteen lock-up variations is a document, not a decision.

8. Turn it into components, or it won't survive

The gap between a brand document and a consistent website is a component library. Without one, every new page is a fresh interpretation.

Define the primitives — button variants, card, section heading, form field, badge — as actual code with the brand decisions baked in. Then a new page is assembled from decided parts rather than re-deciding colour and spacing each time.

This is where most brand work quietly fails. The PDF is beautiful and the site drifts within a year, because nothing enforced the decisions.

The two that matter most

If you only do two of these, do positioning and voice.

A site with a sharp positioning statement and a distinct voice, set in system fonts with two colours, will outperform a beautifully designed site that says nothing specific. We've watched it happen. The studio rebrand mentioned earlier tripled its qualified enquiries, and the design work was the smaller half of the reason — the larger half was finally saying who they were for.

Type, colour, and motion make it feel like something. Positioning and voice make it worth reading. Both matter, and one of them is load-bearing.

Our web design projects start with the first two before anything visual gets drawn.