Основной текст, темные секции, фон героев.
ICONICA / brand system
Брендбук для новых страниц, статей, услуг, кейсов и портфолио
Страница фиксирует визуальный язык ICONICA так, чтобы по одной ссылке можно было собрать новую верстку: строгую, инженерную, редакционную, с акцентом на e-commerce, стартапы и сложные цифровые продукты.
blueprint logo motion
stroke draw + measuring grid
Позиция
ICONICA выглядит как студия, которая умеет превращать сложные системы в понятные интерфейсы.
Тон точный, уверенный, без рекламной пены
Форма крупная типографика, сетка, короткие смысловые блоки
Акцент синий для действия, лайм для сигнала, желтый для маркировки
01 / Tokens
Цвета
База строится на контрасте черного и белого. Синий отвечает за действие и технологичность, лайм — за живой системный сигнал, желтый — за предупреждение, маркер или важное коммерческое пятно.
Ссылки, CTA, активные состояния, графика.
Статусы, технические подсветки, motion-детали.
Предупреждения, офферы, заметки редактора.
Подписи, вторичная навигация, метаданные.
Панели, таблицы, спокойные редакционные блоки.
02 / Logo
Логотип
Логотип набирается как строгий текстовый знак. На страницах он должен быть заметным, но не декоративным: чистая надпись, много воздуха, черный или белый фон, допускается чертежная анимация на первом экране.
Для шапок, футеров на светлом фоне, навигации и документов.
Для hero, обложек, презентационных блоков и видео-поверхностей.
Можно
Оставлять знак плоским, использовать монохром, давать вокруг логотипа свободное поле не меньше высоты буквы.
Нельзя
Добавлять тени, градиенты, обводки без смысла, помещать знак в капсулу или использовать как мелкую декоративную подпись.
Motion
В первом экране допустимы stroke-draw, линии измерения и мягкое появление сетки.
03 / Typography
Типографика
Основная пара: HelveticaNeueCyr для крупных заголовков и интерфейса, Inter для мелких подписей и данных. Если фирменные файлы недоступны, fallback: Helvetica, Arial, sans-serif.
Hero / 64-88
РАЗРАБАТЫВАЕМ ЦИФРОВЫЕ РЕШЕНИЯ ДЛЯ E-COMMERCE И СТАРТАПОВ
Section / 44-64
Сложную интеграцию нужно объяснять как маршрут, а не как набор технологий.
Article / 18-22
Представьте: вы запустили рекламу, человек перешел на сайт, заполнил форму «Рассчитать проект» и ждет ответа. Если заявка сразу стала сделкой в CRM, менеджер видит задачу, руководитель видит воронку, а маркетолог видит источник обращения.
04 / Page patterns
Паттерны страниц
Новые разделы должны быть собраны из плотных, сканируемых блоков. Дизайн не должен выглядеть как лендинг из универсального конструктора: меньше декора, больше структуры, контраста и полезного контента.
Редакционная статья
Крупный темный hero, sticky-оглавление, рекламный модуль услуги, таблицы, чек-листы, FAQ и блок контакта.
Страница услуги
Проблема, результат, процесс, сроки, команда, кейсы, FAQ, CTA. Много фактуры, без пустых обещаний.
Кейс
Задача, контекст клиента, архитектура решения, интерфейсные фрагменты, метрики, следующий шаг.
Портфолио
Фильтры по технологиям и отраслям, плотная сетка проектов, крупные превью, понятные теги.
Новости
Короткая дата, ясный заголовок, одно ключевое изображение, связь с экспертизой или кейсом.
05 / Components
Компоненты
Базовый набор для сборки новых страниц: кнопки, теги, таблицы, списки шагов, карточки услуг и технические панели.
Битрикс
Laravel
Python
REST API
React
Three.js
Сетка12 колонок / max 1320px
Радиус8px максимум
Интервал16 / 24 / 40 / 72
КонтрастWCAG AA для текста
06 / AI handoff
Бриф для нейросети
Этот блок можно отправлять вместе со ссылкой на брендбук. Он переводит визуальную систему в практические инструкции для генерации новых страниц.
Готовый промпт
Сделай страницу в стиле ICONICA: строгая редакционная digital-студия для e-commerce и стартапов.
Используй черно-белую базу, #2F80ED как главный action-цвет, #52F731 как signal-акцент, #F9CC49 как marker-акцент, #777878 для метаданных.
Типографика: HelveticaNeueCyr/Helvetica/Arial для интерфейса и крупных заголовков, Inter для подписей и данных. Заголовки крупные, uppercase допустим только для hero и коротких меток.
Композиция: много воздуха, строгая сетка, секции на всю ширину, карточки только для повторяемых сущностей. Радиус не больше 8px.
Hero: темный или предельно контрастный, логотип "ИКОНИКА" заметен, можно использовать чертежные линии, stroke-draw, технологичное видео или реальное превью продукта.
Для статей: sticky-оглавление, дата, время чтения, большой lead, таблицы, чек-листы, FAQ, CTA на услугу.
Для услуг: проблема, результат, процесс, технологии, сроки, команда, кейсы, FAQ, форма заявки.
Для кейсов: контекст, задача, решение, архитектура, визуальные фрагменты, метрики, роль ICONICA.
Не делать: бежевые/фиолетовые шаблонные лендинги, мягкие градиентные шары, декоративные карточки внутри карточек, маленький незаметный бренд, маркетинговую воду.