Skip to content

· 5 minutes read

Brand guide, style guide, design system: which you need

Three of these four words mean the same thing. One means something different, and the difference is code. What to ask for, and what each one actually costs.

Three of the four words people use here are synonyms. One is not, and the difference between it and the others is whether the thing contains code.

That is the whole answer. The rest of this page is the evidence, and what each one costs to make.

The three that mean the same thing

Brand guide, style guide and brand book are not distinct artefacts. No credible source defines them against each other, and the companies with the most-copied brand documentation use the terms interchangeably for overlapping things:

  • Figma calls its internal document a Brand Book, and its public page Figma trademark guidelines.
  • Slack calls its equivalent a brand center.
  • LinkedIn calls its equivalent LinkedIn Branding Guidelines.

If a supplier tells you a style guide is a smaller, cheaper deliverable than a brand guide, ask what is in each one. The distinction is theirs, not the industry’s, and the honest version of it is a page count and a price.

The one that is different

A design system contains code. That line is drawn by two sources that do not sell brand guides.

The Nielsen Norman Group defines a design system as “a complete set of standards intended to manage design at scale using reusable components and patterns,” and places the style guide inside it as one part alongside a component library and a pattern library. Its component-library specification lists, as items a component library holds, “Code snippets: the actual code excerpt for the element” and “Front-end & backend frameworks to implement the library.”

Nothing in its description of a style guide mentions code.

Figma draws the same line: design systems include coding standards; a style guide is a subset focused on visual elements. Figma goes further than most framings and nests brand guidelines inside the design system as a foundational layer, underneath component and pattern libraries. That contradicts the common blog framing where the two sit side by side as alternatives, and it is worth knowing before someone quotes you for “a design system” and delivers a PDF.

The test: can a developer implement your interface from it without asking anyone a question? If yes, it is a design system. If it tells you which blue to use but not what a button is, it is a brand guide, whatever it is called.

Where design tokens fit

Tokens are the bridge between the two, and they are the reason a brand guide can be more than a PDF.

There is now a stable, vendor-neutral specification: the Design Tokens Format Module 2025.10, published 28 October 2025 as a W3C Community Group Final Report. Read the status line before anyone oversells it to you. The document states plainly that it “is not a W3C Standard nor is it on the W3C Standards Track,” while also saying “This specification is considered stable.”

Its definition is short enough to quote in full: “A (Design) Token is information associated with a human readable name, at minimum a name/value pair.” In practice that is color-text-primary: #000000 expressed as JSON, with seven base types (colour, dimension, font family, font weight, duration, cubic Bézier, number) and six composite types (stroke style, border, transition, shadow, gradient, typography).

Why it matters commercially: a colour named in a PDF has to be retyped by every person who uses it, and retyping is where brands drift. The same colour as a token is one file that a website, a slide template and an app all read. That is the difference between a brand that holds and a brand that is 80% right everywhere.

What each one costs

What you getWho it is for
Brand guideMark and variants, palette, typography, usage rules, tone, the filesAnyone who has a logo and no rules for it
Design systemAll of the above plus components, states and the code to build themTeams shipping software with more than one developer

A brand guide from this studio is $997, and the price is published rather than quoted. A design system is not a fixed-price product anywhere, because its size is set by how many components your product has. Treat any fixed quote for one as a quote for a brand guide with a better name.

Who should not buy a brand guide

  • You have one product, one page and no one else touching the design. You do not need rules to keep yourself consistent. Spend the money on the page.
  • You want a design system and you have no developers. The components will go unbuilt and you will have paid for a PDF at design-system prices.
  • Your logo is not settled. A guide documents decisions. If the mark is still moving, the guide is written twice.

What we build

A real example, because contents lists in the abstract are useless. A brand guide built for a one-person swimming practice in North Jutland ran to thirteen pages: the starting point, the idea, the logo, colour split into load-bearing and supporting, typography with a display face and a working face, the layout principle that held the identity together, tone of voice, photography, the marks in use, and a final page listing what did not exist yet.

That last page is the one most guides omit. It said which files were missing, and it marked three numbers in the copy as proposed rather than confirmed, because the client had not verified them. A guide that admits what it lacks is worth more than one that quietly leaves gaps for you to find.

Tokens shipped as CSS and JSON alongside it, so the website reads the same values the guide prints.


Next: What belongs in a brand guide · What a brand guide costs · price your own build

Updated

The prices are on the site

A brand guide, a website, or both.

One person does the design and writes the code that ships it. You will not need a call to find out what anything costs.