Брендбук красив в PDF, а интерфейс собирают из компонентов
Типичная картина через полгода после запуска нового стиля выглядит так. Брендбук утверждён и лежит в PDF, а сайт, личный кабинет дилера и мобильное приложение при этом напоминают три разных продукта: кнопки с разными радиусами, десяток оттенков «фирменного» синего, таблицы, устроенные по собственной логике на каждом экране. Причина не в небрежности подрядчиков. Брендбук описывает, как бренд выглядит на макете, а интерфейс собирается из сотен повторяющихся элементов, у каждого из которых есть состояния и поведение: наведение, нажатие, ошибка, блокировка.
Этот разрыв закрывает дизайн-система: библиотека компонентов и UI-kit, правила их сочетания и значения цвета, шрифта и отступов, которые хранятся в одном месте и используются дизайнерами и разработчиками одинаково. Для B2B она особенно важна, потому что основное время партнёр проводит не на главной странице, а в каталоге, таблицах заказов, фильтрах и формах, то есть в самых «рабочих» частях интерфейса. Из каких слоёв складывается сам стиль, описано в материале про фирменный стиль для B2B, а где проходит граница между статичным гайдлайном и интерактивной системой, коротко разобрано в разделе про цифровую среду в статье о разработке логотипа, фирменного стиля и брендбука.
Дальше разбирается, где именно бренд ломается при переходе в интерфейс, из чего состоит система и чем она отличается от брендбука, как она работает в B2B-портале, кабинете и PWA и сколько стоит её разработка. Практическую сторону, этапы и форматы закрывает направление разработки дизайн-систем.
Что связывает дизайн-система:
| Слой системы | Что фиксирует | Что получает команда |
|---|---|---|
| Стили и токены | Типографику, цвета, сетки, отступы и радиусы как значения, заданные один раз | Смену фирменного оттенка или гарнитуры в одном месте, а не вручную в каждом макете |
| Компоненты | Кнопки, поля, формы, карточки, таблицы, фильтры и модальные окна со всеми состояниями | Интерфейсы, собранные из готовых элементов, а не нарисованные заново на каждом экране |
| Правила и документация | Композицию, адаптивность, шаблоны экранов и рекомендации для передачи в разработку | Общий язык дизайнеров и разработчиков и меньше расхождений между макетом и готовым продуктом |
Где бренд ломается при переходе в интерфейс
Брендбук статичен: он показывает знак, палитру и макеты на белом фоне. Интерфейс динамичен: у каждого элемента есть состояния, он живёт на экранах разной ширины и читается в условиях, которых нет в презентации. Поэтому бренд рассыпается не в одном месте, а сразу в нескольких, и чтобы понять, где именно, полезно пройтись по слоям.
Цвет: когда семантика интерфейса спорит с брендом
В интерфейсе цвет несёт смысл: красный означает ошибку, зелёный успех, жёлтый предупреждение. Если фирменный акцент красный, а подтверждения в интерфейсе зелёные, возникает конфликт, которого брендбук не предусмотрел. Показателен пример брендбука пилота AS38: красный там ограничен тонким акцентом в пределах 5–8% площади, а зелёный закреплён за победой и результатом. Перенося такой стиль в сайт или кабинет, нужно отдельно решить, как отличить «красный бренда» от «красного ошибки», иначе пользователь будет читать декоративную линию как сообщение о сбое. Полный набор правил этого проекта показан в кейсе «Брендбук AS38: фирменный стиль пилота и путь в Формулу 1». Вторая проблема того же слоя: отсутствие оттенков для состояний, наведения, фокуса и блокировки, а также контраст, который проходит проверку на макете, но не выдерживает мелкого текста на смартфоне.
Типографика: от заголовка на баннере до плотной таблицы
Гарнитура, эффектная на крупном заголовке, нередко плохо читается в таблице заказов с мелкими числами. К этому добавляются технические вопросы: лицензия на веб-использование, запасные шрифты при загрузке, поведение переносов в узких колонках. Брендбук обычно фиксирует шрифтовую пару, но не шкалу размеров для интерфейса, и в итоге каждый разработчик подбирает кегли на глаз.
Состояния и поведение: то, о чём молчит PDF
Кнопка в брендбуке одна, а в интерфейсе их десяток состояний: обычная, наведение, нажатие, фокус, загрузка, блокировка. Так же устроены поля ввода с ошибкой, пустые списки, карточки без изображения. Если эти состояния не описаны заранее, их придумывают по ходу разработки, и каждый экран получает собственную версию.
Плотность B2B: таблицы, фильтры и формы
В потребительском интерфейсе пользователь листает витрину, в B2B он работает: сверяет позиции в таблицах, настраивает фильтры, заполняет формы заказа. Эти сложные компоненты не появляются из логотипа и палитры, их нужно проектировать отдельно, иначе в кабинете дилера бренд существует только в шапке.
Разные команды, разные платформы
Сайт на CMS, кабинет, мобильное приложение и внутренние сервисы обычно делают разные люди в разное время. Без общей системы каждый из них честно интерпретирует брендбук по-своему, и расхождение накапливается незаметно.
Аудит интерфейса за день: три числа
Проверить, нужна ли система, можно простой инвентаризацией, которая в проектах открывает работу на этапе анализа. Нужно собрать с сайта и кабинета все кнопки и посчитать, сколько у них вариантов формы и цвета, выписать все оттенки основного цвета, которые реально встречаются на страницах, и сосчитать количество размеров шрифта. Если у одной кнопки получается семь вариантов, а «фирменный» цвет встречается в десяти оттенках, продукт собран без системы. Примеры проектов, где дизайн-система входила в работу, собраны в разделе проектов по дизайн-системам.
Анатомия дизайн-системы: от токенов до шаблонов экранов
Дизайн-система собирается по слоям, и порядок важен: каждый следующий слой опирается на предыдущий. Если пропустить основание, компоненты получатся красивыми, но несвязанными, а при первом обновлении бренда придётся править их вручную.
Слоистая структура разводит решения по уровням ответственности. Внизу лежат принципы, которые почти не меняются: типографика, шаг сетки, логика отступов. В середине то, что меняется при развитии продукта: состав компонентов и их состояния. Сверху то, что меняется чаще всего: компоновка экранов и адаптивные перестроения. Если уровни смешаны, любая правка сверху тянет за собой переделку снизу.
Слой 1. Стили и токены
Основание системы составляют типографика, цветовые стили, сетки и отступы. Современный приём состоит в том, чтобы хранить их не как картинки в макете, а как именованные значения, токены: «основной цвет», «отступ малый», «радиус карточки». Компоненты ссылаются на токены, а не на конкретные числа, поэтому смена фирменного оттенка или шрифта делается в одном месте и расходится по всем экранам. Именно такая логика закладывается на этапе «Структура», где определяются типографика, цветовые стили, сетки и логика компонентов.
Слой 2. Компоненты и их состояния
Второй слой включает кнопки, поля, формы, карточки, таблицы, фильтры и модальные окна. Для каждого описаны состояния и варианты использования: обычное, наведение, фокус, ошибка, загрузка, блокировка. Для B2B особое значение имеют таблицы и фильтры: в них сортировка, выбор строк, пустые результаты и массовые действия, которые нужно продумать до разработки, а не во время неё.
Библиотека в Figma как рабочий инструмент
Основой для команды служит библиотека в Figma: компоненты собраны с вариантами и правилами, и дизайнер собирает экран из готовых блоков, а не рисует каждую кнопку заново. Скорость работы при этом растёт не за счёт спешки, а за счёт того, что решения принимаются один раз.
Слой 3. Шаблоны экранов и правила композиции
Третий слой переводит компоненты в типовые страницы: каталог, карточка товара, корзина, список заказов, профиль. Правила композиции описывают, как элементы сочетаются, как ведут себя на разной ширине экрана и в каком порядке перестраиваются. Для адаптивных правил в расширенных форматах предусмотрена отдельная проработка: интерфейс дилера на настольном компьютере и на планшете торгового представителя строится по одной логике, но с разной плотностью.
Слой 4. Документация и передача в разработку
Четвёртый слой часто недооценивают, хотя именно он делает систему рабочей. Структура библиотеки, правила использования и рекомендации для дизайнеров и разработчиков позволяют новому участнику команды подключиться без устных объяснений. Результат этапа «Документация» на странице услуги сформулирован точно: собранная система для команды и подрядчиков.
Пример модульного подхода: Bento UI в «Русском САПР»
Хороший пример системного мышления дал проект для группы компаний «Русский САПР»: модульная концепция в духе Bento UI позволила собирать новые носители из готовых блоков и при этом сохранить узнаваемость для консервативных промышленных заказчиков. Сам проект относится к айдентике, но логика у него та же, что у интерфейсной системы: сетка, блоки и правила их сочетания превращают разовую работу в инструмент, которым команда пользуется сама. Подробности есть на странице проекта «Разработка брендбука и модульной айдентики для ГК «Русский САПР»».
Дизайн-система и архитектура сайта
Система не заменяет архитектуру продукта, а работает вместе с ней. Как мы уже знаем из разбора дизайна и разработки сайта под ключ в 2026 году, архитектура определяет результат сильнее, чем внешняя оболочка, и компоненты, собранные без понимания структуры сайта и данных, быстро упираются в её ограничения. Поэтому этап анализа начинается с разбора текущих интерфейсов, сценариев и структуры экранов, а не с рисования кнопок.
Дизайн-система в B2B-портале, кабинете и PWA: сроки, форматы и стоимость
Дизайн-система окупается там, где у продукта несколько интерфейсов и несколько команд. Для компании с дилерской сетью это типичная картина: корпоративный сайт, личный кабинет, оптовый каталог и мобильное приложение торгового представителя, которые должны выглядеть и вести себя как один продукт.
Один набор компонентов для всех экранов
Каталог, таблица заказов, фильтры и формы повторяются в портале из экрана в экран, поэтому именно их выгоднее собрать один раз. Когда компании переходят с шаблонного интернет-магазина на портал для партнёров, как это разобрано в материале про портал для оптовых клиентов, дизайн-система определяет, как будут выглядеть и вести себя эти повторяющиеся элементы, а разработчики собирают кабинет из готовых блоков, не придумывая каждую форму заново.
Мобильный контур: PWA для торгового представителя
В мобильном сценарии требования меняются: крупные элементы управления, минимум вложенности, работа одной рукой и без связи. Если приложение строится на базе портала, как в материале про PWA для торгового представителя, дизайн-система позволяет использовать те же токены и компоненты, добавляя адаптивные правила для компактных экранов. Бренд при этом узнаётся и в офисе на мониторе, и в магазине дилера на смартфоне.
Платформа под системой: Tilda, 1С-Битрикс или своя разработка
Дизайн-система существует в Figma, но живёт она в коде, поэтому её реализация зависит от платформы. На конструкторе вроде Tilda система проявляется в переиспользуемых блоках и единых стилях, на 1С-Битрикс в шаблоне и компонентах, на кастомной веб-платформе в собственной библиотеке интерфейсных элементов. Критерии выбора платформы и честные вилки цен разобраны в материале про разработку сайтов в Казани в 2026 году, а сложные портальные решения относятся к направлению Web: Платформа. Практический вывод: систему лучше проектировать с учётом платформы заранее, иначе красивые компоненты придётся упрощать при передаче в разработку.
Четыре этапа и три формата
Работа делится на четыре этапа. Анализ занимает одну-две недели: аудит текущего интерфейса, структуры экранов и повторяющихся элементов. Структура занимает ещё одну-две недели: типографика, цветовые стили, сетки и логика компонентов. Сама система собирается две-три недели: кнопки, формы, карточки, таблицы, модальные окна, фильтры, шаблоны экранов и состояния. Документация занимает три-пять дней: структура библиотеки, правила использования и рекомендации для дизайнеров и разработчиков. В сумме выходит от четырёх до восьми недель.
| Формат | Что входит | Для какого продукта | Стоимость |
|---|---|---|---|
| UI-kit | Аудит интерфейса, типографика, цветовые стили, кнопки, поля и формы, базовые карточки, состояния, библиотека в Figma | Сайт или сервис, где нужна единая визуальная основа | от 180 000 ₽ |
| Дизайн-система | UI-kit, компоненты, таблицы, фильтры, модальные окна, шаблоны экранов, правила композиции, библиотека компонентов | Продукт, которому нужна система для стабильного развития интерфейсов | от 350 000 ₽ |
| Дизайн-система Plus | Всё из дизайн-системы, расширенная библиотека, сложные шаблоны, адаптивные правила, документация, Figma-структура для команды, рекомендации для передачи в разработку | Сложный продукт и несколько команд, которым нужна масштабируемая система | от 600 000 ₽ |
Выбирать формат разумно по числу интерфейсов и команд. Для одного сайта хватит UI-kit, для портала с кабинетом и каталогом нужна дизайн-система, а когда над продуктом работают несколько команд и подрядчиков, оправдан формат Plus. Состав пакетов и порядок работы описаны на странице услуги, а предварительную оценку по брифу можно получить за 24 часа.
Итог: дизайн-система делает следующее обновление бренда дешевле
Брендбук описывает, как бренд выглядит на макете, а интерфейс собирается из повторяющихся компонентов с состояниями и поведением. Дизайн-система соединяет эти миры: стили и токены хранят значения в одном месте, компоненты закрывают типовые элементы, а документация даёт дизайнерам и разработчикам общий язык. Для B2B-компании с сайтом, кабинетом дилера и мобильным контуром это способ собрать несколько интерфейсов в один продукт и не переделывать их при каждом обновлении стиля.
Разница между брендбуком и дизайн-системой проявляется именно в повторяемости. Брендбук отвечает на вопрос, как выглядит знак, шрифт и цвет, и нужен для того, чтобы материал выглядел единообразно. Дизайн-система отвечает на вопрос, как ведёт себя кнопка при наведении, как выглядит пустая таблица и что происходит с формой при ошибке. Первое задаёт визуальный язык, второе делает его рабочим инструментом для команды, которая собирает экраны каждый день.
Три практических результата дизайн-системы
Внедрение дизайн-системы даёт компании три практических результата:
Единый вид во всех интерфейсах: сайт, кабинет и PWA собираются из одних компонентов и не расходятся от экрана к экрану.
Дешёвое обновление бренда: смена фирменного оттенка или шрифта делается в токенах один раз, а не вручную в каждом макете, о чём шла речь в материале про ребрендинг, рестайлинг и редизайн.
Быстрая работа команд и подрядчиков: новые экраны собираются из готовых блоков по документированным правилам, без устных объяснений.
Когда система готова, её реализация в сайтах, каталогах и порталах собирается в направлении Web.
Частые вопросы о дизайн-системе (FAQ)
Q: Чем дизайн-система отличается от брендбука и UI-kit?
A: Брендбук фиксирует визуальные правила бренда, UI-kit собирает базовые элементы интерфейса, а дизайн-система добавляет компоненты со всеми состояниями, шаблоны экранов, правила композиции и документацию. Она связывает бренд с реальной разработкой.
Q: Сколько стоит разработка дизайн-системы?
A: Ориентиры: UI-kit от 180 000 рублей, дизайн-система от 350 000, дизайн-система Plus от 600 000 рублей. Формат выбирают по числу интерфейсов и команд, предварительную оценку по брифу можно получить за 24 часа.
Q: Сколько времени занимает разработка?
A: Четыре этапа: анализ (1–2 недели), структура (1–2 недели), система (2–3 недели) и документация (3–5 дней). В сумме от четырёх до восьми недель.
Q: Когда компании нужна дизайн-система?
A: Когда у продукта несколько интерфейсов или команд: сайт, кабинет, приложение. Простой признак: у одной кнопки на сайте и в кабинете несколько вариантов формы, а фирменный цвет встречается в разных оттенках.
Что еще почитать
Старт проекта
Любим интересные, сложные проекты и собачек!