Design playbook notebook and creative software icons on a tablet
Home / Brand Strategy & Identity / Visual identity
Brand Strategy & Identity · Visual identity

A visual identity where every element has a job

Logo, colour, type, imagery and icons designed as one system - expressing your positioning, working in the product as well as the pitch, and tested for accessibility before anything ships.

Logo systemColour rolesTypographyImagery & iconsAccessibility-tested

Identity is a tool, not decoration

A visual identity has one practical purpose: to make your company recognisable and credible every time someone meets it - on a website, in a proposal, on a product screen, on a site hoarding. Everything else is a means to that end.

That is why I design identities as systems of elements with jobs rather than as a logo with some colours attached. The logo identifies. The primary colour builds recognition. The accent signals action. Status colours communicate meaning in the product. The typeface carries information in headlines and in dense tables. Imagery shows real capability. When each element knows its job, the identity stays coherent even when dozens of people are using it.

What's included

The elements of the system

01

Logo system

A primary lockup, secondary lockups for tight spaces and a symbol for small sizes, with clear space, minimum sizes and approved colourways.

02

Colour roles

A palette where each colour has a defined use - brand, action, status, data - with measured contrast for every text pairing.

03

Typography

A type system with a real hierarchy that works in marketing, documents and product interfaces.

04

Imagery

Photography and illustration direction that shows real work and real people, with practical rules for sourcing.

05

Iconography

One consistent icon style with plain meanings, designed to support labels rather than replace them.

06

Motion and layout

Grid, spacing and motion principles so layouts feel related across media.

Designed for the places identities actually break

Most identity guidelines are written for the marketing site and a few hero images. Identities actually break in the places guidelines skip:

WhereWhat goes wrongWhat the system defines
Product UIBrand colours used for status, clashing with meaningSeparate, tested status colours; accent reserved for actions
Dense tables and dashboardsDisplay typefaces unreadable at small sizesA type scale tested at 12-14px and in tables
Proposals and reportsLogo stretched, colours approximated in WordDocument templates with locked styles
Small sizesDetailed logos illegible as faviconsA symbol-only version below a defined size
Dark backgroundsContrast collapsesTested colourways for light and dark surfaces
Partner lockupsUnequal sizing, crowdingCo-branding rules with examples

On an infrastructure brand system, this meant measurable rules: a minimum logo size of 160px on desktop and 120px on mobile, a symbol-only threshold at 24px and 32px, a 12/8/4 column grid and a 4-64px spacing scale. Each has a clear pass or fail answer.

Accessibility is part of the identity

Colour choices affect whether people can read your brand. WebAIM's 2026 analysis of the top one million home pages found low-contrast text on 83.9% of them - the single most common accessibility failure on the web, and one that starts in identity decisions.

Every text-and-background pairing in the systems I design is tested against WCAG 2.1 contrast requirements - 4.5:1 for normal text, 3:1 for large text - before the palette is approved. On an AI brand project, that testing caught an accent pairing already in use at 2.37:1; the rebuilt system's primary pairing measured 17.26:1. Bright brand colours can still be used boldly for large display elements and backgrounds; they just are not used for small text where they fail.

83.9%of top home pages have low-contrast textWebAIM, 2026
4.5:1minimum contrast for normal text at WCAG AAW3C
17.26:1primary pairing after an AI brand's colour rebuildProject measurement
The process

How I design an identity

  1. 01

    Brief from positioning

    Translate brand attributes into design criteria. See positioning.

  2. 02

    Explore directions

    Two or three distinct routes, each shown on real applications - a website screen, a proposal page, a product view - not just a logo on white.

  3. 03

    Choose and refine

    Develop one direction in detail, including edge cases and small sizes.

  4. 04

    Test

    Contrast checks, legibility at small sizes, print and dark-mode behaviour, and review with the people who will use it.

  5. 05

    Systemise

    Write measurable rules and build templates and components. See brand systems.

  6. 06

    Hand over

    Organised file library, guidelines and a walkthrough for internal teams and agencies.

Showing directions on real applications

Identity concepts presented as a logo on a white page are easy to like and hard to judge. I present every direction applied to the things your buyers actually see: a homepage, a product screen, a proposal cover, a slide, a social post, and - for infrastructure and industrial brands - site signage or vehicle livery where relevant. It makes the decision about how the identity works, not only how the mark looks.

What you get

01

Logo system files

All lockups and the symbol in digital and print formats, organised by use.

02

Colour specification

Values for screen and print, colour roles and a tested pairings table.

03

Type system

Families, scale, hierarchy and usage rules, including for product UI.

04

Imagery direction

Photography and illustration guidance with examples.

05

Application examples

The identity applied to key touchpoints as a reference.

06

Identity guidelines

Measurable rules, not descriptions of mood.

Infrastructure brand system overview
From the work

An identity built to read as infrastructure, not a startup

An infrastructure company needed a brand that communicated authority and consistency in a conservative, enterprise-led market - supporting expansion across platforms and teams.

  • A structured, industry-aligned identity rather than a trend-led "modern" one.
  • Enforceable rules for logo size, grid and spacing that anyone could check.
  • A system designed to hold across proposals, decks, the website and site material.
Read the infrastructure case study →

Frequently asked questions

Can you refresh our logo rather than replace it?

Yes. If the current mark carries recognition, refining it - improving legibility, simplifying details, adding a symbol version - often preserves equity while fixing practical problems.

How many identity directions will we see?

Usually two or three distinct directions, each applied to real touchpoints so the choice is about fit, not just the logo in isolation.

Will the identity work in our product?

That is part of the brief. Colour roles, type and icons are tested in product interfaces, and I work with product teams on how the identity carries into UI components.

What about dark mode?

Colourways and contrast are tested for dark surfaces separately, because a pairing that passes in light mode tells you nothing about its dark equivalent.

Do you provide brand guidelines as a PDF?

Guidelines can be delivered in the format your team uses - a web page, a Figma library, a PDF - but the emphasis is on measurable rules and ready-to-use templates.

Sources

Every statistic in this page links to its original publisher. Figures were checked against these sources on September 29, 2026.

  1. The WebAIM Million, 2026 report - WebAIM, 2026
  2. Understanding SC 1.4.3: Contrast (Minimum) - W3C
Let's solve something

Identity looking dated - or just inconsistent?

Let's work out which, and design an identity your whole team can apply. Book a 30-minute call.

Book a 30-min call ↗