Brand book и Design System — это не одно и то же. Путаница стоила нам месяц

◷ 15 мин чтения · бренд-бук · дизайн-система · документация

«Нам нужен бренд-бук» — сказал директор по маркетингу. «Ок, давайте сделаем дизайн-систему» — ответил дизайнер. Три недели спустя маркетинг получил дизайн-систему с компонентами, токенами и Storybook — и не понял что с этим делать. Дизайнер получил фидбэк «это не то что мы просили» — и не понял почему.

Потеряли месяц. Заплатили за работу дважды.

Это не история про «кто виноват». Это история про то что у этих двух документов разные задачи, разные аудитории и разный уровень детализации. Путают их постоянно — в том числе дизайнеры с опытом.

## Что такое бренд-бук

Бренд-бук — это документ об идентичности. Он отвечает на вопрос «кто мы и как мы выглядим». Его аудитория — маркетинг, коммуникации, партнёры, подрядчики, новые сотрудники.

Бренд-бук читает копирайтер который пишет статью, SMM-менеджер который делает пост, агентство которое создаёт рекламу, типография которая печатает визитки. Этим людям не нужен код. Им нужно понять: какой у нас логотип, как его использовать, какие цвета, какой тон, что мы точно не делаем.

Хороший бренд-бук отвечает на вопросы которые возникают когда создаёшь что-то от имени бренда без дизайнера рядом.

### Что входит в бренд-бук

Стратегическая часть:

• Миссия и ценности — не как манифест, а как основа для визуальных решений
• Позиционирование — кто мы для кого
• Характер бренда — прилагательные которые описывают тон и настроение
• Аудитория — кто наш пользователь/клиент

Визуальная идентичность:

• Логотип: все версии, охранное поле, минимальные размеры, запрещённые применения
• Цвета: первичная и вторичная палитра, коды для разных систем (HEX, RGB, CMYK, Pantone)
• Типографика: шрифты, иерархия, размеры для основных применений
• Иконки и иллюстрации: стиль, источники, правила использования
• Фотографии: стиль, настроение, что нельзя

Применения:

• Визитки, бланки, подписи к письмам
• Презентации
• Соцсети: форматы и стили
• Наружная реклама / упаковка (если актуально)
• Digital: как выглядит сайт, приложение (на уровне принципов, не компонентов)

Тон оф войс:

• Как мы разговариваем: формально / неформально, технично / просто, серьёзно / с юмором
• Примеры хорошего текста и плохого
• Слова которые мы используем и которых избегаем

## Что такое дизайн-система

Дизайн-система — это производственная инфраструктура. Она отвечает на вопрос «как мы строим продукт». Её аудитория — дизайнеры и разработчики.

Дизайн-систему использует продуктовый дизайнер который проектирует новый экран, и разработчик который имплементирует его в код. Им нужны компоненты, состояния, токены, спецификации. Им не нужна история бренда.

Хорошая дизайн-система позволяет быстро создавать новые экраны которые автоматически соответствуют языку продукта — без каждый раз заново договариваться о том как должна выглядеть кнопка.

### Что входит в дизайн-систему

Дизайн-токены:

• Цветовые токены (не «синий», а color.primary.500, color.text.default, color.bg.surface)
• Типографические токены (размеры, веса, межстрочные интервалы как именованные значения)
• Токены пространства (spacing scale: 4, 8, 12, 16, 24, 32...)
• Токены теней, скруглений, анимаций

Компонентная библиотека:

• Атомарные компоненты: Button, Input, Checkbox, Icon
• Составные компоненты: Form, Card, Modal, Navigation
• Для каждого компонента: все состояния (default, hover, active, disabled, error), варианты (primary, secondary, destructive), размеры

Паттерны:

• Как компоненты собираются в решения: форма входа, пустое состояние, страница с ошибкой
• Паттерны навигации, загрузки, ошибок

Документация для разработчиков:

• Как установить и использовать
• Имена компонентов и пропсы
• Примеры кода
• Changelog

## Ключевые различия

Важно: они не противоречат — они дополняют. Дизайн-система должна реализовывать принципы бренд-бука. Цветовые токены системы должны соответствовать палитре из бренд-бука. Типографическая система должна реализовывать иерархию из бренд-бука.

Но это разные документы с разными задачами. Один не заменяет другой.

## Когда нужен бренд-бук, когда — дизайн-система

### Только бренд-бук (пока)

Стартап на ранней стадии. Один продукт. Команда до 10 человек. Дизайнер один или нет вовсе.

Приоритет: зафиксировать визуальную идентичность достаточно хорошо чтобы маркетинг и агентства могли создавать консистентные материалы.

Дизайн-система на этом этапе — преждевременная оптимизация. Компоненты будут меняться с каждой итерацией продукта.

### Нужны оба

Компания с продуктом и маркетингом как отдельными функциями. Несколько дизайнеров. Разработчики которые имплементируют интерфейсы.

Бренд-бук — для маркетинга и коммуникаций. Дизайн-система — для продукта. Они работают параллельно и синхронизируются в части визуального языка.

### Только дизайн-система (редкий случай)

Продуктовая команда которая создаёт B2B инструмент без публичной коммуникации. Нет маркетинга, нет внешних материалов. Только продукт.

В этом случае дизайн-система — основной артефакт, бренд-бук избыточен.

## Как строить каждый из них

### Минимальный бренд-бук который работает

Не нужно 200-страничное PDF. Работающий минимум:

Одна страница с логотипом: все варианты, размеры, охранное поле, что нельзя.

Одна страница с цветами: HEX, RGB, CMYK для каждого. Примеры правильного и неправильного применения.

Одна страница с типографикой: шрифты, размеры для H1/H2/Body/Caption, примеры.

Одна страница с тоном: 3–5 принципов как мы пишем. Примеры хорошего и плохого текста.

Одна страница с применениями: подпись в письме, шаблон поста, визитка.

Пять страниц которые реально читают лучше, чем 80 страниц которые кладут в папку и забывают.

### Минимальная дизайн-система которая работает

Токены: цвета, типографика, spacing — именованные значения в Figma Variables или CSS Custom Properties.

Базовые компоненты: Button (все варианты и состояния), Input, Typography styles, Icon-set.

Два–три составных компонента для самых частых паттернов: Card, Form, Navigation.

Документация в Figma: для каждого компонента — аннотации с правилами использования.

Storybook, npm-пакет, автоматическое документирование — это следующий шаг, не первый. Сначала — работающие компоненты в Figma которые дизайнеры реально используют.

## Частые ошибки

Создать дизайн-систему для бренд-бука. Маркетинг просит «гайдлайны» — дизайнер делает компонентную библиотеку. Результат: никто не использует. Маркетинг не умеет читать Storybook, дизайнер разочарован.

Создать бренд-бук вместо дизайн-системы. Продукт растёт — решения принимаются заново каждый раз. «Как должна выглядеть эта кнопка?» — смотрят в бренд-бук — не находят — решают на глаз. Инконсистентность нарастает.

Сделать один раз и не обновлять. Бренд развивается, добавляются новые продукты, изменяется позиционирование — документы остаются устаревшими. Через год они описывают компанию которой уже нет.

Создать документ который никто не читает. Красивый PDF с примерами — и никто не знает где его найти и когда использовать. Документ работает только если он интегрирован в рабочий процесс: «перед созданием нового материала — открой бренд-бук».

## ИИ и документация бренда: как использовать Claude

### Промпт: Составить структуру бренд-бука

Помоги составить структуру бренд-бука для нашей компании.

О компании:
- Описание: [что за компания, что продаёт]
- Команда: [размер, кто создаёт материалы]
- Внешние подрядчики: [агентства, фрилансеры, которым нужен бренд-бук]
- Типы создаваемых материалов: [соцсети, реклама, печать, презентации, упаковка — что актуально]
- Есть ли уже дизайн-система: [да/нет]
- Стадия компании: [стартап / растущая / зрелая]

Составь:
1. Структуру бренд-бука с разделами и подразделами (что должно быть в каждом)
2. Приоритет: с каких разделов начать если ресурсы ограничены
3. Формат для каждого раздела (PDF / Notion / Figma / Google Slides)
4. Кто должен создавать каждый раздел (дизайнер / маркетолог / основатель)
5. Как сделать так чтобы документ реально использовали, а не клали в папку

### Промпт: Написать раздел «Тон оф войс» для бренд-бука

Помоги написать раздел о тоне голоса бренда для бренд-бука.

О бренде:
- Описание: [что за компания]
- Аудитория: [кто наш клиент]
- Характер бренда: [три–пять прилагательных]
- Пример хорошего текста который уже есть: [примеры заголовков, постов, описаний]
- Текст который не соответствует: [антипримеры]
- Темы которые мы освещаем: [о чём пишем]

Напиши:
1. 4–6 принципов тона голоса (конкретные, не «мы дружелюбны»)
2. Для каждого принципа: пример как писать (✓) и как не писать (✗)
3. Словарь: слова которые мы используем и которых избегаем
4. Примеры одного и того же сообщения в нашем тоне и в «неправильном» тоне
5. Как проверить соответствует ли текст тону — три вопроса для самопроверки

### Промпт: Аудит дизайн-системы

Помоги провести аудит нашей текущей дизайн-системы.

Что у нас есть:
- Где хранится: [Figma / Storybook / другое]
- Что включает: [перечисли компоненты и разделы]
- Сколько людей использует: [дизайнеров / разработчиков]
- Как давно не обновлялось: [последнее обновление]
- Проблемы которые замечаем: [что идёт не так]

Оцени и предложи:
1. Что критически не хватает в текущей системе
2. Что устарело и требует обновления
3. Почему систему не используют (если это так) — гипотезы и решения
4. Приоритет обновлений: топ-5 задач которые дадут максимальный эффект
5. Как измерить что система работает (метрики использования)

### Промпт: Синхронизировать бренд-бук и дизайн-систему

Нам нужно синхронизировать бренд-бук и дизайн-систему. Они расходятся.

Бренд-бук говорит:
- Цвета: [что написано в бренд-буке]
- Типографика: [что написано]
- Принципы: [ключевые принципы]

Дизайн-система содержит:
- Цветовые токены: [что реально используется в системе]
- Типографические стили: [что реально]
- Компоненты: [главные компоненты]

Расхождения которые я вижу: [что не совпадает]

Помоги:
1. Выявить все расхождения (я мог что-то пропустить)
2. Определить что является «источником истины» в каждом случае
3. Составить план синхронизации: что изменить в системе, что в бренд-буке
4. Создать процесс чтобы расхождения не накапливались снова
5. Шаблон для документирования решений когда они принимаются