§ 01 · what identity actually contains

A brand identity is eight things. Not a logo.

Most agencies deliver a logo and call it brand identity. The logo is one of eight components. Ship only one and the other seven get invented inconsistently across every surface your team ever launches. Final systems delivered in Figma libraries and Google Fonts or Adobe Fonts licensed faces. Here are all eight, in the order they matter.

Fig. 1 · eight components · mark → wordmark → type → colour → voice → motion → grid → imagery

01 · mark

Logomark

Abstract, monogram, or pictorial. Monochrome-safe. Legible at 16px favicon. Four variants (primary, inverse, single-colour, favicon).

02 · wordmark

Wordmark

Custom letterforms or carefully tuned type. Works with and without the mark. Fixed kerning baked into a hand-tuned SVG.

03 · type

Type system

Display + body + mono + accent pairing. Modular scale. Variable-font governance. Fallback stack. Never more than four faces.

04 · colour

Colour ramp

Semantic tokens (primary, secondary, accent, success, error). Light + dark mode parity. WCAG AA verified on every pairing.

05 · voice

Voice

Tone rules, banned vocabulary, example sentences, banned phrases. Ships as a writing critique tool, not just a guide.

06 · motion

Motion system

Easing curves, duration tokens, signature transitions, reduced-motion fallback. Ships as CSS tokens + Framer Motion config.

07 · grid

Grid + layout

Responsive grid, spacing scale, vertical rhythm, breakpoint behaviour. Identical in Figma and in Tailwind.

08 · imagery

Imagery + icons

Photography treatment, illustration style, icon family geometry, aspect ratios, usage bounds. The one most brands skip.

§ 02 · when identity gets made

Three moments. Different work each.

Identity design is one phrase that means three different jobs. Naming a new company is not the same job as refreshing a five-year-old brand. Rebranding at a pivot is not the same job as evolving through a growth stage. Misreading which one you're in is the fastest way to overpay.

moment 01 · greenfield

Naming a new company.

You have an idea, a team, no brand. The work is 60% naming and positioning, 40% identity. Domain screening, trademark opinions, and voice come before the logo. Get this wrong and you rebrand in 18 months — one of the most expensive sequences in startup life.

timeline: 14–18 weeks
scope: naming + full system
risk: trademark collision

most asked

moment 02 · pivot

Rebranding at a pivot.

New market, new audience, new category, or a merger. Positioning has shifted fundamentally. The existing identity is actively wrong. 40% strategy, 60% design. The hard part is brand equity — some of it still works, most of it doesn't, and misjudging which is which costs year-one revenue.

timeline: 10–14 weeks
scope: full 8-component system
risk: equity lost

moment 03 · evolution

Evolving through growth.

Positioning is right. Execution is dated. Type is showing its age, colour doesn't handle dark mode, brand has drifted across surfaces. 20% strategy, 80% craft. Evolution preserves equity on purpose — the logo gets sharpened, not redrawn. Customers don't notice anything changed. Everything improves.

timeline: 6–8 weeks
scope: refine, preserve equity
risk: over-correcting

We'll tell you which moment you're in on the audit call — and which one you think you're in. They're often different.

§ 03 · the voice pairing

How a brand voice sounds on the page.

Voice isn't just what you write. It's what the typography whispers at the reader before a word gets read. The animation shows three typefaces pairing into a single brand voice — the actual construction, in 15 seconds.

Fig. 2 · type voice pairing · grotesk + serif italic + mono

§ 04 · the type system

Type carries 80% of the recognition.

Remove the logo from most well-branded sites and the brand is still immediately recognisable. Remove the type and it falls apart. Three rules every type system we ship obeys.

01

Never more than four typefaces.

Display, body, mono, accent. That's the ceiling. Every additional face doubles the system's cognitive load and halves its recognisability. Most brands with five faces have three accidents and two decisions.

our default pairing: Space Grotesk / Inter / JetBrains Mono / Instrument Serif italic
02

Modular scale, not magic numbers.

Type sizes follow a mathematical ratio (major third, perfect fourth, golden). No arbitrary 23.5px — every step is derivable. Your engineers can extend the scale without asking a designer.

our default scale: 12 · 14 · 16 · 20 · 25 · 32 · 40 · 50 · 62 (major third, 1.25×)
03

Italic accent face is the differentiator.

Almost every SaaS site ships grotesk + mono and calls it done. Adding a single italic serif — used on one or two emphasised words per heading — breaks every template that ever shipped. It's the cheapest distinct-voice move in identity design.

used across this very site: Instrument Serif italic, moss-500, 1–2 words per heading max

§ 05 · colour as a system

Colour is a system. A palette is a suggestion.

A palette says "here are the brand colours." A system says when each one gets used, why, how it behaves in dark mode, and how it passes WCAG. The difference is measured in how the site looks at month twelve.

rule 01

Semantic, not brand-first.

Tokens are named by what they do (primary, accent, success, error, muted), not by what they are (moss-500, amber-700). Engineers pick tokens by intent. A rebrand ships by swapping the underlying values, not by rewriting 10,000 component references.

rule 02

Ramps, not swatches.

Every brand hue ships with 7–9 lightness stops (50, 100, 200, 300, 500, 600, 700, 900). Mathematical relationships in OKLCH, not eyeballed. The 500 is the "brand" shade; the ramp handles every other context.

rule 03

AA parity in dark mode.

Every semantic pairing (text-on-primary, text-on-surface, focus-on-bg) passes WCAG 2.2 AA in both light and dark themes. Dark mode isn't an inverted palette — it's a second ramp tuned for perceived weight at dark-surface viewing.

our own token file (excerpt)

--moss-500: #6fa37a;   /* brand primary */
--moss-600: #3f6b54;   /* brand primary-hover */
--moss-700: #24453a;   /* brand primary-pressed */
--amber-500: #cd8a4b;  /* accent / launch moments */

/* semantic \u2014 what engineers actually use */
--color-text-primary: var(--ink-0);
--color-text-on-accent: var(--moss-50);
--color-bg-surface:    var(--paper);
--color-border-subtle: rgba(111, 163, 122, 0.15);
--color-focus-ring:    var(--amber-500);

§ 06 · motion as brand asset

Every brand has a motion signature. Most of them are accidents.

The easing curve on your CTA button, the duration of a modal reveal, the overshoot on a card hover — these are brand decisions that almost nobody makes on purpose. We ship motion as tokens alongside colour and type.

easing

One curve, not ten.

cubic-bezier(.2, .7, .2, 1)

Confident, not bouncy. Used on every transition. Two secondary curves for very specific cases.

duration

Three durations total.

120ms / 240ms / 400ms

Micro (hover), macro (modal), reveal (scroll-triggered). Four is too many; two is not enough.

reveal

Staggered, not simultaneous.

40ms stagger, max 8 items

Content reveals feel orchestrated, not coded. Past 8 items the stagger becomes a delay; we don't stagger past that.

motion-safe

Reduced-motion fallback.

@media (prefers-reduced-motion)

Every motion token has a zero-motion fallback. 16% of users prefer it; we ship for them on day one.

§ 07 · book vs living system

Ship the PDF. And the tokens.

Brand book without a design system gets ignored by month three. Design system without a brand book gets misunderstood by the next designer you hire. Ship both. They refer to each other.

the brand book

40–80 page PDF. What the brand is, who it's for, how to use the marks, where the voice comes from, the story behind each decision. Read by humans, hiring-forward, stakeholder-safe.

✓Logo usage rules + don'ts
✓Voice guide + sample sentences
✓Story of the identity decisions
✓Colour + type examples in context
✓Imagery + iconography reference

the living system

Code your engineers deploy. Tailwind config, CSS custom properties, Figma library, Framer Motion config, icon SVGs, logo variants. One source of truth. Changes propagate.

✓Tailwind preset with all tokens
✓CSS custom properties file
✓Figma library with variants
✓Framer Motion config
✓Icon SVGs + logo variants (public + private)

The book persuades. The system ships. Neither works alone.

§ 08 · four shapes of work

Four shapes of identity work.

Each shape has a different scope, timeline, and deliverable set. Pick the one that matches the moment you're in — we'll confirm fit on the intro call and send a scoped quote within 48 hours.

audit

Identity audit

2 weeks

Component inventory, consistency score, drift analysis, repositioning recommendation. Prioritized plan with effort + impact scoring. Deliverable is yours whether you engage us for the build or not.

for · existing brand, quiet questions

evolve

Identity evolution

6–8 weeks

Refined mark, updated type and colour system, voice sharpened, motion added. Tokens shipped to engineering. Equity preserved on purpose — customers don't notice anything changed; everything improves.

for · positioning right, execution dated

most picked

full system

Full identity system

10–14 weeks

Complete identity, all 8 components. Guidelines + Figma library + Tailwind config + motion tokens + icon family. The system your engineers deploy on day one.

for · rebranding or launching fresh

naming + identity

Naming + full system

14–18 weeks

Naming exploration, domain availability checks, trademark screening with partner attorneys, plus the full identity system. For new ventures and major category pivots.

for · greenfield or category pivot

Quotes sent within 48 hours of an intro call. Trademark attorney fees on the naming tier are billed at cost, per mark per jurisdiction.

§ 09 · related reading

From the journal.

§ 09 · questions

Six answers.

What does brand identity design include?

Eight components: logomark, wordmark, type system, colour ramp, voice, motion system, grid and layout, imagery and iconography. We ship all eight as production-ready tokens — a Figma library, a Tailwind config, a CSS token file, a Framer Motion config, a voice guide, and PDF guidelines. A system your engineers can deploy the same day, not a PDF in Dropbox.

How much does brand identity design cost?

Pricing is scoped to the engagement shape. Audit: 2 weeks. Evolution: 6–8 weeks. Full system: 10–14 weeks. Naming + full system: 14–18 weeks. Book a 30-minute intro call and we'll send a scoped quote within 48 hours. Scope moves price, not the discovery conversation.

What's the difference between a brand book and a design system?

Book documents in English. System enforces in code. Book without system gets ignored by month three; system without book gets misunderstood by the next designer. We ship both and they refer to each other.

When should I rebrand vs. evolve?

Rebrand when positioning has fundamentally changed (market, category, audience) or when current identity is actively hurting perception. Evolve when positioning is right but execution is dated. Rebrands cost 2–3× more and lose equity. We'll tell you which you actually need on the audit call.

Do you handle naming and trademark work?

Yes, as part of the naming + identity tier. 40–80 candidates across four categories, narrowed to 8–12 for domain availability, then 3–5 for USPTO + EUIPO trademark screening. Partner attorneys handle the legal opinion. Final pick is yours.

How do you measure if a brand identity worked?

Three measurements at launch + 90 days post. Aided recall (audience recognises and correctly attributes). Consistency audit (system followed across surfaces). Conversion impact (did the flagship page move its named metric). No vanity; all three are testable.

Start with a conversation.

A 30-minute intro call to diagnose the moment you're in — audit, evolve, full system, or naming + identity. You leave with a clear recommendation. We follow up with a scoped quote within 48 hours.

Book a 30-minute intro call See UI/UX design

related services