Part of: Branding
Brand guidelines and style systems
Brand guidelines turn your brand decisions into rules that other people can follow. Ours are written for designers and developers alike, with semantic colour tokens, light and dark themes, typography and voice, so your store looks and sounds the same wherever it appears.
Is this right for you?
Who it is for
Stores where several people, agencies or developers touch the brand, and where the same colour or heading style keeps coming out differently.
When it is not
Brands without an identity yet. Guidelines document decisions, so strategy and identity come first. Also not the right fit if nobody will use the document after handover.
What is included
- Who the brand is for and how it sounds, summarised from your strategy
- Logo rules, including clear space, minimum sizes and common mistakes
- Colour with named roles and contrast checks, rather than a list of swatches
- Typography rules for headings, body text and small print
- Tone of voice with examples of what to say and avoid
- Design tokens for colour, type, spacing and corner radius, ready for developers
- A light and dark theme, if your store needs both
- A component and layout reference for buttons, links, cards and forms
Who brand guidelines are for
Guidelines matter when more than one person makes things for your brand. That might be a freelancer, an agency, a developer or your own team. Without clear rules, the same brand ends up with three blues and two heading styles, and nobody knows which is right.
If you do not yet have a settled identity, start with brand strategy and logo design. Guidelines record decisions, so they need decisions to record.
An approach built for developers
Most guideline documents are written for designers: a logo page, a colour page and a type page. They often leave a developer to guess which colour is for a button and which is for a warning.
We write them differently. Colours get semantic names and roles, for example background, surface, border, text, muted text and accent, instead of only a list of swatches. Each role has a value for a light theme and a dark theme, so a developer can switch between them without redesigning anything. Typography, voice and how components should look sit in the same document.
This is the approach we use for our own brand guidelines. We describe it here as a method only.
What is included
You receive the guidelines as one usable reference. They cover the logo rules, colour with named roles and contrast checks, type, tone of voice and the components people use most. Where the work includes a developer hand-off, you also get the design tokens in a form that fits how your store is built.
You receive the guidelines as a PDF and the editable source files, with logo, colour and type files ready to use. Where there is a developer hand-off, the design tokens come as a file your developers can use directly.
How we do it
We audit what exists, turn decisions into named rules and test them against real pages. If you are on Shopify, we map the tokens to your theme with the people building it. That is why this work sits closely with Shopify development. The identity files and rules come from logo design and visual assets. We also look at how the brand behaves in email, which is where it is often least consistent, through email layout design.
What it costs
Guidelines are priced as a stage of branding, so you can add them after strategy and identity. See pricing for how we approach it.
Priced per project, with a fixed quote in writing before work starts. Up to three rounds of revisions are included. See the pricing page.
What we measure
Guidelines do not produce a number on their own, so we check whether they work. Can a developer pick the correct colour for a button without asking? Do the text and background pairs meet WCAG contrast requirements in both light and dark themes? Does a new person produce on-brand work the first time?
Under WCAG 2.2 AA, normal text needs a contrast ratio of at least 4.5:1 against its background. Large text, and interface parts such as buttons and input borders, need at least 3:1.
How we do it
Every project is different, so timings depend on its size and complexity. You get a realistic timeline in writing before work starts, and we never promise results by a date.
Step 1: Audit
We collect what exists, such as logo files, theme settings, emails and ads, and note where the brand differs from channel to channel.
Step 2: Define
We turn decisions into named rules. Colours get roles, not just values, so a developer knows what to use for a button, a background or an error.
Step 3: Build
We write the guidelines and prepare the tokens, and we check them against your store and key pages.
Step 4: Hand over
We walk your team and developers through them. You receive a PDF and the editable source files.
What it costs
We price this by what you need, so you can start small and add stages later. You see the quote in writing before work starts. Our pricing page explains how we approach design and creative work.
Questions people ask
What is the difference between brand guidelines and a style system?
Guidelines explain the brand to people, in words and examples. A style system turns the same decisions into reusable parts such as tokens and components, which developers and designers can apply directly. We aim to deliver both in one document.
What are design tokens?
They are named values for things like colour, type size, spacing and corner radius. Instead of a developer copying a hex value, they use a name such as "accent" or "surface", and the value can change for light and dark themes without anything else being rewritten.
Will the guidelines work with our Shopify theme?
That is the intention. We map the tokens to your theme's settings so what is in the document matches what is on the site. Current Shopify themes group colours into colour schemes, such as background, text and buttons, applied section by section, and the newest themes use named colour palettes. We map your tokens to whichever your theme uses.
Do you provide a design library?
Yes, where it helps. We can supply a Figma library with your colours, type styles and core components. If your team works in Affinity or another tool, we hand over files it can use.
Can you create guidelines for a brand we already have?
Yes. Most of our guideline work starts with an existing brand that has grown unevenly. We document what is working, fix what is not and agree the rules with you.
How long should guidelines be?
As short as they can be while still answering the questions people really ask. A page that is used is better than a hundred-page document that is not.
Ready to talk it through?
Get a free UX and conversion review of your website, focused on how your creative affects performance. A subject matter expert at Advent reviews it, and we aim to send it within 5 working days.