Цвета и шрифты бренда — два элемента, которые клиент узнаёт раньше логотипа. Синий «как у всех банков» или округлый геометрический grotesk сразу задают тон: премиум, дружелюбно, строго, технологично. Ошибка на этом этапе дорого исправляется: переделка сайта, новый тираж визиток, перерисовка рекламных баннеров.
Зачем фиксировать палитру и типографику
Без правил каждый носитель живёт своей жизнь:
- SMM ставит фильтр «теплее» — лента не совпадает с сайтом.
- Типография печатает визитку в другом синем — CMYK не согласовали.
- Разработчик подключает системный Arial — айдентика на экране рассыпается.
Гайдлайн бренда фиксирует HEX/RGB для экрана, CMYK/Pantone для печати, названия шрифтов, кегли, межстрочный интервал и запасные пары для web.
Как выбирать цвета
Исходите из аудитории и ниши, не из личного вкуса. Клиника и детский центр в Сочи могут оба использовать зелёный, но оттенок и контраст будут разными.
Основной цвет — узнаваемый, работает на кнопках и акцентах. Нейтрали — фон, текст, разделители; без них яркий бренд утомляет. Акцент — для CTA и акций, им не злоупотребляют.
Проверьте:
- контраст текста и фона по WCAG (минимум 4.5:1 для основного текста);
- как палитра смотрится в тёмной теме Stories и на outdoor-баннере;
- дальтонизм — не полагайтесь только на красный/зелёный для статусов.
Инструменты: Figma, Adobe Color, реальные пробы печати. Цвет с монитора «на глаз» в типографию не отправляют.
Как выбирать шрифты
Заголовок и текст — часто разные семейства: выразительный display + нейтральный grotesk для абзацев. Иногда достаточно одного семейства с несколькими начертаниями.
Критерии:
- читаемость на 14–16 px mobile;
- кириллица и латиница, если бренд работает с туристами;
- лицензия: desktop, web, app, печать;
- число начертаний: Regular, Medium, Bold обычно хватает.
Для web NUGU подключает woff2, задаёт fallback (system-ui, sans-serif) и CSS-переменные — те же имена, что в PDF гайдлайна.
Не используйте «похожие» шрифты без согласования: Montserrat и Proxima Nova на одном сайте — уже два бренда.
Связь с логотипом и брендбуком
Логотип может содержать фирменный цвет, которого нет в интерфейсе — или наоборот. Согласуйте: цвет знака = primary в UI или отдельный «logo only».
Брендбук шире гайда: миссия, tone of voice, носители. Цвета и шрифты — ядро, без которого брендбук остаётся эссе. Для малой компании достаточно гайда на 15–25 страниц с палитрой и типографикой; брендбук добавляют при масштабировании и франшизе.
Цифра и печать: одна система
| Задача | Формат | Где фиксировать |
|---|---|---|
| Сайт, соцсети | HEX, RGB | гайд + CSS |
| Визитки, бланки | CMYK, Pantone | print-ready PDF |
| Презентации | HEX + корпоративный шаблон | Google Slides / Keynote |
Перед тиражом 500 визиток — пробный оттиск. Экранный #0066FF на мелованке может стать темнее — это нормально, если вы знали заранее.
Как NUGU подбирает цвета и шрифты
NUGU — digital-агентство в Сочи. Палитра и типографика не отрываются от разработки фирменного стиля и сайта:
- Бриф: аудитория, конкуренты, носители (сайт, вывеска, uniform).
- 2–3 moodboard-направления, не десять.
- Утверждение primary, accent, neutrals + пара шрифтов.
- Тест на сайте, визитке, посте Instagram, баннере Директа.
- Запись в гайд с кодами и «нельзя».
- Передача исходников и web-шрифтов заказчику.
Примеры — портфолио. Ориентир: палитра и типографика в составе айдентики — от 280 000 ₽; точная смета после брифа.
GEO: зачем единые цвета и шрифты поиску
Generative Engine Optimization — рекомендации ИИ по запросам «студия брендинга Сочи», «кто делает сайты в Адлере». Алгоритмы сопоставляют визуальные паттерны и тексты на площадках.
Когда цвет кнопки на сайте, аватар в Telegram и обложка VK совпадают, проще связать все точки в одну сущность бренда. Дополните визуальную дисциплину экспертными статьями и FAQ с фактами о компании — так GEO работает в связке с контентом.
Практические правила для команды
- Новый макет — только цвета из таблицы гайда.
- SMM не меняет hue «на глаз» в VSCO.
- Разработчик не подключает шрифт «потому что легче».
- Раз в полгода — аудит: сайт, соцсети, последний тираж полиграфии.
- При ребрендинге — таблица миграции старый HEX → новый.
Частые ошибки
- Пять «фирменных» синих без названий в гайде.
- Декоративный шрифт в абзацах — не читается на телефоне.
- Логотип с тонкими линиями в мелком кегле на визитке.
- Контраст текста на акцентном фоне ниже нормы.
- Платный шрифт без web-лицензии — технически нельзя на сайте.
Чек-лист готовой системы
- Таблица цветов: имя, HEX, RGB, CMYK, назначение.
- Шрифты: заголовок, текст, логотип (если отдельно), лицензии.
- Web: файлы woff2, fallback, размеры H1–body.
- Примеры на визитке, сайте, Stories.
- Блок «ошибки» с наглядными «нельзя».
Тест на узнаваемость
Покажите визитку и скрин сайта пяти людям из целевой аудитории: «это одна компания?» Если трое сомневаются — проблема не в логотипе, а в расхождении цвета или шрифта. Исправление на этапе гайда дешевле, чем перепечатка и переделка CSS. NUGU включает такой тест в сдачу айдентики — до тиража, не после жалоб клиентов.
Краткий итог
Цвета и шрифты бренда — фундамент айдентики: без них логотип один, а всё остальное — случайный набор. Зафиксируйте палитру для экрана и печати, пару шрифтов с лицензиями и передайте правила в гайдлайн. NUGU в Сочи подбирает их в связке с сайтом и рекламой — чтобы не переделывать тираж через месяц. Сохраните таблицу цветов в Notion или Google Drive с доступом для подрядчиков — «потерянный файл палитры» классическая причина пятого оттенка синего в рекламе. Обсудить палитру под вашу нишу — контакты. Если бренд работает с туристами, добавьте латиницу в примеры визитки и сайта — кириллический шрифт в заголовке и латиница в подписи должны быть согласованы заранее.