Brand Book and Design System are not the same thing. Confusion cost us a month

а 15 min reading · brand book · design system · documentation

"We need a brand book," the marketing director said. “OK, let’s make a design system,” the designer replied. Three weeks later, marketing got a design system with components, tokens and a Storybook - and didn't know what to do about it. The designer got the feedback "it's not what we asked for" - and didn't understand why.

Lost a month. You paid twice for the work.

This is not a "who's to blame" story. The story is that these two documents have different tasks, different audiences, and different levels of detail. They get confused all the time, including designers with experience.

## What is a brand book

A brand book is an identity document. ** He answers the question, "Who are we and how do we look?" Its audience is marketing, communications, partners, contractors, new employees.

A brand book reads a copywriter who writes an article, an SMM manager who makes a post, an agency that creates advertising, a printing house that prints business cards. These people don't need a code. They need to understand what logo we have, how to use it, what colors, what tone, what exactly we don’t do.

A good brand book answers the questions that arise when you create something on behalf of a brand without a designer nearby.

### What goes into the brand book

Strategic part:

• Mission and values - not as a manifesto, but as a basis for visual solutions
• Positioning – who are we for whom
• Brand character – adjectives that describe tone and mood
• Audience – who is our user/client

** Visual identity:**

• Logo: all versions, security field, minimum dimensions, prohibited applications
• Colors: primary and secondary palette, codes for different systems (HEX, RGB, CMYK, Pantone)
• Typography: fonts, hierarchy, sizes for basic applications
• Icons and illustrations: style, sources, rules of use
• Photos: style, mood that can not

** Applications:**

• Business cards, forms, signatures to letters
• Presentations
• Social networks: formats and styles
• Outdoor advertising/packaging (if relevant)
• Digital: what the site, application looks like (at the level of principles, not components)

Ton of Vois:

• How we talk: formally / informally, technically / simply, seriously / with humor
• Examples of good text and bad
• The words we use and avoid

## What is a design system

A design system is a manufacturing infrastructure. It answers the question of how we build a product. Its audience is designers and developers.

The design system uses a product designer who designs a new screen and a developer who implements it into code. They need components, states, tokens, specifications. They don't want brand history.

A good design system allows you to quickly create new screens that automatically match the language of the product – without always renegotiating how the button should look.

### What's in the design system

** Design tokens:**

• Color tokens (not blue, but color.primary.500, color.text.default, color.bg.surface)
• Typographic tokens (sizes, weights, line spacing as named values)
• Space tokens (spacing scale: 4, 8, 12, 16, 24, 32...)
• Tokens of shadows, rounds, animations

** Component library:**

• Atomic components: Button, Input, Checkbox, Icon
• Components: Form, Card, Modal, Navigation
• For each component: all states (default, hover, active, disabled, error), options (primary, secondary, destructive), dimensions

Patterns:

• How components are assembled into solutions: login form, empty state, error page
• Patterns of navigation, loading, errors

** Documentation for developers:**

• How to install and use
• Component names and props
• Examples of code
• Changelog

## Key differences

**Importantly, they don't contradict -- they complement. The design system should implement the principles of the brand book. The color tokens of the system must match the palette from the brand book. The typographic system should implement a hierarchy from the brand book.

But these are different documents with different tasks. One does not replace the other.

## When you need a brand book, when - a design system

### Brand-book only (bye)

The startup is in its early stages. One product. Team up to 10 men. One designer or not at all.

Priority: Capture visual identity well enough for marketing and agencies to create consistent content.

The design system at this stage is premature optimization. The components will change with each iteration of the product.

### We need both

A company with product and marketing as separate functions. Several designers. Developers who implement interfaces.

Brand book – for marketing and communication. The design system is for the product. They work in parallel and synchronize with the visual language.

### Design system only (rare case)

A product team that builds a B2B tool without public communication. No marketing, no external materials. Just the product.

In this case, the design system is the main artifact, the brand book is redundant.

## How to build each of them

### Minimum brand book that works

No need for a 200-page PDF. Working minimum:

**One page with logo: * All options, sizes, security field, which is not allowed.

**One page with colors: * HEX, RGB, CMYK for each. Examples of correct and incorrect use.

One page with typography: fonts, dimensions for H1/H2/Body/Caption, examples.

One page with a tone: * 3-5 principles as we write. Examples of good and bad text.

One page with applications: signature in letter, post template, business card.

Five pages that actually read better than 80 pages that you put in a folder and forget.

### Minimum design system that works

• Tokens: * Colors, typography, spacing - named values in Figma Variables or CSS Custom Properties.

Basic components: Button (all variants and states), Input, Typography styles, Icon-set.

**Two to three components for the most common patterns: Card, Form, Navigation.

** Documentation in Figma:** for each component - annotations with rules of use.

Storybook, npm package, automatic documentation are the next step, not the first. First, the working components in Figma that designers actually use.

## Common mistakes

Create a design system for a brand book. Marketing asks for “guidelines” – the designer makes a component library. The result: no one is using it. Marketing can’t read a storybook, the designer is disappointed.

** Create a brand book instead of a design system. ** The product grows – decisions are made again every time. “How should this button look?” – look at the brand book – do not find – decide by eye. Inconsistency is growing.

**Do it once and do not update. ** The brand develops, new products are added, positioning changes - documents remain outdated. A year later, they describe a company that no longer exists.

Create a document that no one reads. A beautiful PDF with examples and no one knows where to find it or when to use it. A document works only if it is integrated into the workflow: “Before creating new material, open a brand book.”.

## AI and Brand Documentation: How to Use Claude

### Prompt: Construct the structure of a brand beech

Help us create a brand book structure for our company.

About the company:
- Description: [What kind of company sells]
- Team: [size who makes the materials]
External contractors: [agencies, freelancers who need a brand book]
Types of materials created: [social networks, advertising, printing, presentations, packaging - what is relevant]
- Is there already a design system: [yes/no]
Company Stage: [Startup/Growing/Mature]

Composition:
1. Brand book structure with sections and subsections (what should be in each)
2. Priority: Where to start when resources are limited
3. Format for each section (PDF/Notion/Figma/Google Slides)
4. Who should create each section (designer/marketer/founder)
5. How to make the document really used, not put in a folder

### Prompt: Write a section "Ton of Voys" for a brand book

Help write a section on the tone of a brand’s voice for a brand book.

About the brand:
- Description: [What company]
- Audience: [who's our client]
- Brand character: [three to five adjectives]
An example of good text that already exists: [examples of titles, posts, descriptions]
- Text that does not match: [anti-examples]
The topics we cover: [what we write]

Write:
1. 4-6 principles of tone of voice (specific, not “we are friendly”)
2. For each principle: an example of how to write and how not to write
3. Dictionary: The Words We Use and Avoid
4. Examples of the same message in our tone and in the wrong tone
5. How to check if the text corresponds to the tone - three questions for self-checking

### Prompt: Audit of design systems

Help us audit our current design system.

What we got:
Where it is stored: [Figma/Storybook/Other]
- Which includes: [listed components and sections]
How many people use: [designers/developers]
It's been a long time: [last updated]
- Problems that we notice.

Evaluate and suggest:
1. What is critically lacking in the current system
2. What is outdated and needs updating
3. Why the system is not used (if so) - hypotheses and solutions
4. Priority updates: top 5 tasks that will give maximum effect
5. How to Measure What the System Works (Use Metrics)

### Prompt: Synchronize the brand book and design system

We need to synchronize the brand book and the design system. They separate.

The brand book says:
- Colors: [What's in the brand book]
- Typography: [Written]
- Principles: [key principles]

The design system comprises:
Color tokens: [what is actually used in the system]
- Typographical styles: [what's real]
- Components: [Main components]

The discrepancies I see: [which don't match]

Help:
1. Identify any discrepancies (I may have missed something)
2. Determine what is the source of truth in each case
3. Make a synchronization plan: what to change in the system, what in the brand book
4. Create a process so that discrepancies do not accumulate again
5. A template for documenting decisions when they are made