Фирменный стиль как библиотека: сетка, шкала, токены
Четыре макета, сделанных в разное время, сведены к одному набору токенов и пяти мастерам. Цвет, кегль и шаг отступов получили имена и значения.
- Работает из России: рубли, договор с ИП, без VPN и иностранной карты
- По умолчанию чтение и черновики: отправку и публикацию агент делает по вашей команде
- Нормы настоящие: WCAG 2.1, требования типографий, размеры площадок — со ссылкой на источник
- Артефакт открывается: файл, модель или ролик приложены к странице
Четыре макета, три кегля, два синих
Что было
Четыре макета из разных времён: разные поля, три кегля заголовка, два оттенка синего и ни одного правила, которое можно проверить.
Что сделали
Один набор токенов и пять мастер-слайдов: заголовок всегда на одной линии сетки, текст — в шести колонках из двенадцати, диаграмма нативная.
Что закрепили
Правила: один акцент на слайд, текст на фото только на плашке, контраст считается формулой, а не на глаз.
Задача
Что за работа
Фирменный стиль живёт не в PDF, а в шаблоне: если мастер разрешает сдвинуть поле, через месяц будет четыре разных стиля. Поэтому система собрана как библиотека: токены цвета и кеглей, сетка 12 колонок для слайда и веба, пять раскладок и список запретов. Рядом — таблица контраста: у каждой роли видно число к белому и то, где текст можно ставить, а где только крупный кегль.
Как это выглядит
Путь в системах: что берём и что отдаём
- 1
Вход: макеты и брендбук
Существующие файлы и разделы брендбука: цвет, шрифт, шаг сетки.
- 2
Шаг 1. Токены
Цвета и кегли получают имена и значения; шкала отступов — шаг 8 px и восемь разрешённых величин.
- 3
Шаг 2. Сетка
12 колонок с межколонником: 0,14″ в слайде, 24 px в вебе, максимальная ширина 1200 px.
- 4
Шаг 3. Мастера
Пять раскладок: титул, текст, диаграмма, таблица, правила. Диаграмма нативная, чтобы данные жили в файле.
- 5
Выход: PPTX, tokens.json, паспорт
Мастера в PowerPoint, токены машинно, паспорт с сеткой, шкалой и контрастом.
Агент делает · человек решает
| Собирает токены и сетку | агент: 14 цветов, 7 кеглей, 12 колонок, шаг 8 px |
|---|---|
| Делает мастер-слайды | агент: 5 раскладок, включая диаграмму и таблицу |
| Считает контраст ролей | агент: числа к белому по формуле WCAG |
| Выбирает характер бренда | человек: строгий или тёплый — это не параметр сетки |
| Утверждает систему | человек: подпись владельца под стилем |
Что получится на выходе
Открыть артефакт
Подключения
Что подключим
Сервис · что читаем · что пишем · что нужно · срок
Границы
Чего агент не делает
Агент не выбирает, каким бренд должен быть: строгим, тёплым или дерзким — это решение владельца. Он не переносит старые макеты автоматически: пересборка идёт по одному файлу, и по старым видно, что изменилось. Тёмную тему в систему не берём: она удваивает проверки контраста без выгоды для этих носителей.
Вопросы
Зачем токены, если есть брендбук?
Брендбук читает человек, токены — программа. Одно значение в двух видах: правило для людей и файл для сборки.
Что будет со старыми макетами?
Пересоберутся на новой сетке по одному: сначала титул и текст, потом диаграммы. Старые файлы остаются как история.
Почему пять мастеров, а не двадцать?
Пять закрывают все носители компании. Каждая лишняя раскладка — ещё одно место, где стиль расходится.
Соседние работы
Рядом
Знак, иконки, схема
Векторная часть той же системы: знак на сетке и восемь иконок.
Правки по замечаниям
Что делать, когда стиль уже есть, а замечаний двадцать восемь.
Все работы дизайнера
Десять компетенций роли на одной странице.
Роли
Пришлите свои макеты — вернём систему и мастер-слайды
С таблицей контраста: какие цветовые роли можно ставить мелким текстом.