Брендбук · версия 1.0 · сентябрь 2026
Визуальные системы
продукта и компании
Первая вкладка – продукт «ИИ для экспертов», вторая – корпоративный сайт AI CJM. Каждое значение на этой странице взято из рабочих файлов сайтов, а компоненты ниже работают ровно так же, как в бою.
Палитра
Тёплая бумага вместо белого, королевский синий как единственное действие, кислотный лайм как второй акцент и тени. Девять токенов, больше цветов в системе нет.
#f2f0eapaperфон страницы#fffef9surfaceкарточки и поверхности#111827inkтекст, обводки#596170mutedвторичный текст#cdd1d8lineразделители#1248ffroyalкнопки, ссылки, акцент#092a91royal-darkhover синего#d9ff57acidподсветка, жёсткие тени#101d3bnavyтёмные блоки и карточкиШрифты
Два семейства, оба отдаются с нашего сервера, без обращения к чужим CDN.
Onest
Основной · весь текст и заголовки
Соберите личную AI-систему
Локальные TTF в assets/fonts/, подключение через @font-face, font-display: swap.
IBM Plex Mono
Служебный · метки, номера, даты
ОНЛАЙН · 3 НЕДЕЛИ · 01–06
Только прописными, трекинг .08em. Абзацы моноширинным не набираются.
Типографика
Заголовки живут на отрицательном трекинге и почти нулевом интерлиньяже: плотный, газетный ритм.
Соберите личную AI-систему
Что изменится
От отдельных чатов – к рабочей системе
Интеграции с внешними сервисами
За шесть занятий пройдите путь от рабочего AI-контекста до собственного инструмента.
Базовый текст страницы. Переносы управляются через text-wrap: pretty, автоматический перенос по слогам отключён.
Онлайн · 3 недели · старт 30 августа
Форма, линии и тени
Углы острые. Тень одна и всегда жёсткая – сдвиг без размытия, как штамп на бумаге.
только кнопка и модалкакарточки, тарифы, календарь13px 13px 0 acid9px 9px 0 royal1px solid #cdd1d88px сверху, royalСетка и ритм
- Контейнер
- 1240px
- Поля страницы
- 24 / 16px
- Шаг секции
- 120 / 76px
- Зазор сеток
- 14–16px
- Колонок в модулях
- 2
Компоненты
Кнопки
Кнопка на тёмном
Метки
Программа · 6 занятий
Выбирают чащеКарточка-модуль, светлая
Контекст и агент
Личная база знаний и первый рабочий агент.
Карточка-модуль, тёмная
Интеграции
Почта, календарь, мессенджеры и диск в одном контуре.
Карточка-модуль, акцентная
Свой инструмент
От описания задачи до работающего прототипа.
Тариф
Средний
49 900 ₽
- Шесть живых занятий
- Две групповые консультации
- Бессрочный доступ к записям
Вопрос и ответ
Когда проходит программа?
Шесть живых занятий по понедельникам и четвергам в 18:00 МСК.
Порядок экранов
- Шапка с одним действием
- Первый экран и орбита
- Четыре цифры о формате
- Что изменится
- Программа, шесть модулей
- Как устроена программа и календарь
- Примеры по ролям
- Автор, отзывы, документы
- Тарифы
- Границы программы
- Вопросы до оплаты
- Реквизиты и документы
Правила
Как надо
- Один синий на действие, лайм на подсветку итога
- Тень только жёсткая, сдвигом, без размытия
- Чередовать светлые и тёмные полосы по вертикали
- Метки и цифры набирать моноширинным
- Заголовки держать на плотном отрицательном трекинге
Как нельзя
- Скруглять карточки и добавлять мягкие тени
- Заливать лаймом крупные поверхности
- Ставить два равных призыва на один экран
- Набирать абзацы моноширинным шрифтом
- Подключать шрифты со сторонних CDN
Палитра
Белая премиальная база, холодный серый для чередования секций и глубокий синий для акцентных панелей. Тёплых оттенков в системе нет.
#ffffffbgфон страницы и карточек#f4f7fbbg-1чередующиеся секции, мокапы#0b1f4dbg-blueглубокие панели, футер, форма#0f172ainkосновной текст#566075ink-2описания#8089a0ink-3подписи и мета#1D4ED8accentкнопки, активные ссылки#2563EBaccent-brightакцентное слово, фокус#1A43BCaccent-inkнажатие и наведение#e3e8f0lineрамки карточек, сетка#eef1f6line-softграницы секций#ffd6d6error-on-deepошибка поля на тёмномШрифт
Одно семейство на весь сайт, раздаётся со своего сервера четырьмя кириллическими и латинскими подмножествами.
Inter
Единственное семейство · 400–800
Помогаем строить AI-Native компании
Моноширинного начертания в системе нет: технические подписи набираются тем же Inter в малом кегле.
Типографика
Заголовки идут на средних весах 520–600 с сильным отрицательным трекингом. Акцентное слово выделяется курсивом и синим, а не жирностью.
Помогаем строить
AI-Native компании
Экспертиза
Обучение команд
Повышаем личную эффективность сотрудников и скорость бизнес-процессов через системный подход.
Базовый текст страницы: описания продуктов, кейсов и услуг.
Форма, линии и тени
Радиус равен нулю во всей системе. Тень ровно одна, мягкая и глубокая, и живёт только под фотографиями.
кнопки, карточки, поля0 24px 70px rgba(15,23,42,.12)1px solid #e3e8f01px solid #eef1f6#0b1f4d без рамки2px #2563eb, отступ 3pxСетка и ритм
- Контейнер
- 1376px
- Поля страницы
- 32 / 18px
- Шаг секции
- 52–76px
- Сетка карточек
- на линиях, без зазора
- Переходы
- 160–220ms
Компоненты
Кнопки
Кнопка и ссылка
Кнопка на глубокой панели
Карточка экспертизы
Диагностика
Смотрим процессы и находим места, где ИИ даёт измеримую скорость.
Метрики первого экрана
- 60+
- компаний
- 1200
- сотрудников
- 7 лет
- в отрасли
Глубокая панель
Системный подход вместо разрозненных экспериментов
Поле формы
Знак бренда
AI CJM
Порядок экранов
- Шапка, прилипающая к верху
- Первый экран с метриками
- Фото-полоса на глубоком синем
- Лента логотипов клиентов
- Экспертиза, три карточки
- Собственные продукты
- Кейсы
- Форма заявки на тёмном
- Футер с крупным знаком
Правила
Как надо
- Строить композицию на линиях сетки, а не на карточках с тенями
- Выделять смысл курсивом и синим, а не жирностью
- Держать один синий на действие во всех разделах
- Поля формы делать подчёркиванием, без рамок
- Говорить утвердительно, без сравнений с конкурентами
Как нельзя
- Скруглять углы и добавлять вторую тень
- Вводить второй акцентный цвет
- Смешивать со старой кремово-оранжевой темой
- Ставить заголовки на весе 800
- Подключать шрифты со сторонних CDN