---
name: brand-identity
description: "Building an ownable identity in type, color and voice, one committed choice over safe neutrals."
version: 1.23.0
---

# Brand Identity

Identity is the part of a site a visitor could recognize with the logo removed.
It lives in three places: the type, the color and the voice.
Each of the three defaults to a safe neutral if left alone, and three safe neutrals stacked together produce a site that is indistinguishable from its competitors.
The work here is to make one committed choice in each, away from the defaults, and to hold restraint around it so the commitment reads as intent rather than noise.

The governing principle is one committed choice over several safe ones.
A single deliberate typeface, a single ownable color and a defined voice will out-identify a page that hedged on all three.
Hedging is the failure mode: every choice defensible, none of them yours.

## Type pairing

Pair a display face with real character against a readable text face.
The display face carries the identity, it appears in the headline and the few large moments, and it is where character is allowed to be strong.
The text face carries the reading, it appears in body copy and interface text, and it is chosen for legibility at small sizes.
Asking one font to do both jobs is why so many sites feel generic: a face safe enough for body copy at 14px is usually too safe to be memorable at 60px.

Avoid the default wave.
Inter, Roboto, Geist, Helvetica and the system stack are competent and are also what everything else uses, so they contribute nothing to identity when chosen by inertia.
Choosing one of them deliberately, for a documented reason, is fine.
Reaching for one because it was already loaded is the tell.
The display face in particular should be a decision, because it is the most visible single choice on the page.

A pairing works when the two faces share enough to belong together and differ enough to create contrast: a characterful display face with a neutral, well-built text companion is the reliable shape.
Two characterful faces usually fight.
Two neutral faces say nothing.

## A signature type treatment

Beyond the choice of faces, make one memorable typographic decision and apply it consistently.
This is the treatment, the way the type is set, and it is often more ownable than the font itself.
Options, of which you pick one:

| Lever | A committed move |
|-------|------------------|
| Scale | A hero line far larger than convention, filling the viewport width |
| Tracking | Tight negative tracking on large display, open tracking on small caps labels |
| Case | All-lowercase headings, or all-caps labels used as a system |
| Weight jump | A large gap between body weight and display weight, nothing in between |
| Detail | A consistent ligature, a distinctive numeral style, one recurring typographic mark |

The treatment is a rule, not a one-off.
If the hero is set in tight, oversized lowercase, that logic repeats wherever headings appear, so the page reads as one typographic system.
A single dramatic headline followed by conventional type everywhere else reads as an accident.
A consistent treatment reads as identity.

## One ownable accent color

Choose one bold accent that belongs to this site, and hold restraint around it.
The default failure is the stock framework primary, an indigo or violet lifted from a theme with no adjustment, used because it was the variable already named `primary`.
It is the color equivalent of the default font, and it makes a page look like a demo of the framework rather than a product.

Ownable does not mean loud everywhere.
A strong accent works because most of the page is quiet: a restrained neutral ground, generous space and a disciplined palette let the one color carry weight when it appears.
A page that uses its bold color on every element burns it out, and nothing reads as the accent because everything is the accent.
Reserve it for the moments that matter (the primary action, the one thing to notice) and let the rest breathe.
One saturated color against a considered neutral field is more ownable than a rainbow, and far more than a stock violet on grey.

Derive the working palette from the one accent rather than assembling swatches.
A single hue, extended into tints, shades and a neutral built from the same temperature, holds together in a way a set of independently chosen colors does not.

## A defined voice

Voice is the writing's identity, and it is defined before it is written, not discovered afterward.
Define four things: the tone (warm, dry, blunt, formal), the sentence rhythm (short and clipped, or long and considered), the vocabulary (plain, technical, playful) and, importantly, what the voice never says.
The negative constraint does most of the work.
A voice that never uses hype words, never says "seamless" or "effortless", never opens with a rhetorical question, is already distinct from the SaaS default that does all three.

The failure to avoid is neutral product copy, the interchangeable register that could belong to any company in the category.
It is grammatical, clear and forgettable, because it took no position on how it sounds.
A defined voice takes that position on purpose: it decides to be terse, warm or wry, and then it holds that decision across headings, buttons, errors and empty states so the whole site sounds like one author.
Voice that is consistent is voice that is memorable.
Voice that shifts register from section to section reads as several writers and lands as none.

Tie the voice to the point of view in `DIRECTION.md`.
If the concept holds a stance, the voice is how that stance is heard, and the two must agree.
A blunt concept with soft, hedging copy has an identity conflict the visitor will feel without being able to name.

## Where to source distinctiveness

Distinctive type is available and often free.
Fontshare offers characterful, well-built typefaces at no cost, and it is a good first stop for a display face with personality.
Typewolf catalogues real-world pairings and trending faces, useful for seeing how a display and text face behave together before committing.
Both push away from the default wave by showing what else exists.

The goal across all of this is a single committed choice in each of the three registers.
One characterful display face, one ownable accent color, one defined voice, each chosen on purpose and held with restraint, will produce a site a visitor recognizes.
Three safe neutrals will produce one they forget.
