Фирстиль ECOMБрендбукМерчПравила

Брендбук
«Стальная полночь»

Фирменный стиль агентства ECOM Digital: логотип, палитра, типографика и компоненты. Одна система для сайта, постов, КП, Разборов и брифов.

Версия C3 · 2026Unbounded · Manrope · JetBrains Mononavy + красный + синий
01 · Логотип

Знак и логотип

Красный скруглённый квадрат с белой «E/F»-монограммой. Основной локап — знак + «ECOM Digital». Минимум воздуха вокруг — половина высоты знака.

На светлом
ECOMDigital
На navy
ECOMDigital
Не менять цвет знака — только красный #dc2626
Не растягивать и не наклонять
Не ставить на пёстрый фон без подложки
02 · Палитра

Цвета «Стальной полночи»

Navy держит фирменность, красный — действие и цифру, синий — «плюс». Стальной и коралл — служебные акценты. Нейтрали — основа.

фирменный
Navy
#1C2740 → #0D1320
Чипы на лейблах + тёмные поверхности (посты, оффер, гарантия, футер, активное меню).
действие
Красный
#DC2626
Кнопки-CTA, цифры-результаты, бейдж «Рекомендуем», минус/↓. Точечно.
плюс
Синий
#2F74C0
«Хорошо / сильно / рост / ↑». Заменил зелёный — зелёный из системы убран.
тихий
Стальной
#5B86A6 / #7FA6CC
Надзаголовки и подписи, текст на тёмном. Вторичное.
акцент
Коралл
#FF5A4D
Акцент и точка-маркер на тёмном (читабельнее красного на navy).
база
Нейтрали
#FBFBF9 · #172033 · #5F6470
Бумага, чернила, серый. Весь читаемый контент — на светлом.
03 · Роли цветов

Каждый цвет — одна работа

Главное правило: не смешиваем роли. Тогда любой документ читается сам собой.

Navy

Фирменный 2-й: чипы на всех лейблах + тёмные поверхности (посты, оффер, гарантия, активное меню, футер).

Красный

Действие (кнопки), цифра-результат, бейдж «Рекомендуем», минус/↓.

Синий

Плюс / сильно / рост / ↑. Сильные стороны, баллы «хорошо», «результат мечты». Не зелёный.

Стальной

Тихие подписи, текст на тёмном, второстепенное.

Коралл

Акцент и точка-маркер на navy-поверхностях.

04 · Типографика

Три шрифта

Unbounded — заголовки и лого. Manrope — весь UI и текст. JetBrains Mono — цифры, цены, бейджи.

Unbounded · заголовки
Поток клиентов под ключ
Вес 700–900. Крупно, плотный трекинг −0.025em. Только заголовки и лого.
Manrope · UI и текст
Приводим клиентов, которые покупают, и сами обрабатываем заявки. До вас доходят только тёплые.
Вес 400–800. Основной текст, кнопки, навигация, подписи.
JetBrains Mono · цифры
×4,2 · 175 AED · 500+ · 7 лет
Вес 500–800, tabular-nums. Цены, метрики, бейджи, баллы.
05 · Компоненты

Готовые элементы

Бери из единого источника (c3-panel.css / razbor-ui.css) — цвета и шрифты уже правильные.

Чипы — на каждый лейбл
Коммерческое предложение
ТарифыКто мыПрогноз
Надзаголовки, кикеры, теги, статусы. С коралловой точкой — акцентный.
Чип на тёмном (ghost)
Методология Хормози
Оффер — Grand Slam
Внутри navy-плашки чип не виден → стеклянный ghost.
Кнопки
Получить разбор →Смотреть кейсы
Основная — красная (действие). Вторичная — контурная.
Мета-строка + метрика
МебельМинск 🇧🇾Фаза 1
ROI прогноз
×4,2
красная цифра на белом
Теги — одной строкой через красную точку. Цифра — красная.
Активное меню
Выбранный раздел → navy + коралловая риска.
Тёмная поверхность (гвоздь)
Гарантия

Не берём % с бюджета

×4,2
Оффер / гарантия / метрика-результат. Акцент — коралл.
Плюс / минус — синий vs красный (не зелёный)
9/10 Сильное

Открытые цены, рассрочка, активный TikTok.

3/10 Слабое — наш вход

Нет гарантии и отзывов на сайте.

Синий = плюс/сильно (бывший зелёный), красный = минус/слабо.
06 · Правило применения

Коротко — для всей команды

Чип — на каждый лейбл.

Надзаголовок, тег, бейдж, статус → navy-чип с коралловой точкой. Так стиль единый «чуть-чуть везде».

Тёмное — только на «гвозди».

Посты, оффер, гарантия, ключевой блок, активное меню, футер → navy (не чёрный, не графит). Не на абзацы текста.

Красный — действие и цифра.

Кнопки, метрики, «Рекомендуем», минус. Точечно — не красить абзацы.

Синий — плюс.

Хорошее, сильное, рост. Зелёный из системы убран.

Остальное — белое.

Весь читаемый контент: текст, списки, формы, обычные карточки. Сомневаешься — оставь белым.

07 · Иконки

Единый пак · line-стиль

Никаких эмодзи как иконок. Только этот набор — он наследует цвет (navy / красный / синий / коралл) и размер. Источник: c3-icons.css, класс .ico .ico-name.

Нужна иконка, которой нет в паке?

Не рисуй сам и не бери эмодзи. Все иконки — в стиле Lucide (24×24, обводка 2, круглые концы). Берём нужную с lucide.dev → добавляем в c3-icons.css (один источник) → она сразу в стиле. Так пак растёт, но не разъезжается.

Если поставить несуществующую .ico-xxx

Покажется нейтральный пунктирный бокс-плейсхолдер (сигнал «добавь иконку»), а не уродливый квадрат или эмодзи. Стиль не ломается даже при ошибке.

shield
lock
handshake
bolt
rocket
trend
target
chart
user
users
check
calendar
doc
gift
search
mega
star
play
phone
mail
send
coins
clock
pin
globe
gear
edit
link
eye
bulb
alert
info
plus
arrow
briefcase
cart
layers
heart
refresh
percent
нет в паке
ECOM Digital · Брендбук «Стальная полночь» (C3) · 2026 · единый источник: razbor-ui.css · c3-panel.css · c3-icons.css · brand-kit.css