Единая визуальная система для CRM, AI-ассистентов, документов, автоматизаций, сайта и будущих модулей. Основа — глубокий сине-графитовый интерфейс, тёплая светлая рабочая область и фирменный зелёный только там, где нужен акцент.
Этот блок — главный контракт стиля. Если новый экран, лендинг, модуль или AI-макет соответствует ему, он будет выглядеть частью одного продукта, даже если контент и сценарий полностью новые.
Вся продуктовая система строится от трёх ролей. Тёмный создаёт технологичную навигацию и контраст, светлый даёт спокойную рабочую поверхность, яркий зелёный делает бренд узнаваемым и показывает действие.
#151F24 Sidebar, тёмные панели, dark-кнопки, крупные контрастные секции. #FBFBF9 Основной фон продукта и сайта. Тёплый, но визуально нейтральный. #7ED957 Главные действия, active-маркеры, toggle и точечные брендовые акценты. Тёмный цвет не заполняет весь интерфейс. Он формирует навигационный каркас. Рабочая область остаётся светлой, а фирменный зелёный используется только как сигнал действия или текущего состояния.
Карточка остаётся белой на тёплом фоне. Цвет не мешает читать данные.
Семантический цвет показывает смысл, а не украшает интерфейс.
Правило: Deep Blue — навигация и отдельные контрастные поверхности. Canvas — рабочая площадь. Brand Lime — действие. Эти роли не смешиваются.
Чтобы новые экраны не собирались «на глаз», цвета и системные значения должны использоваться по ролям. Это минимальный набор, который можно перенести в CSS variables, Tailwind theme или design tokens.
Inter подходит и для маркетинговых страниц, и для плотного интерфейса. Важнее не количество размеров, а стабильная шкала и одинаковая плотность во всех модулях.
Исправлено: размеры примеров и подписи теперь совпадают. Для интерфейса не используем искусственные веса — подключаем Inter 400/500/600/700/800.
Компоненты используют одни и те же роли цветов. Яркий зелёный не должен превращаться в декоративный фон для всего интерфейса.
Primary: #7ED957 + тёмный текст #151F24. Белый текст на ярком зелёном не используем — контраст слабый.
Brand Lime не заменяет семантику. Ошибка остаётся красной, предупреждение — янтарным, info — синим.
Один SVG-язык: 24×24, stroke 1.8–2px, округлённые окончания. Не смешиваем разные библиотеки и стили.
Геометрия должна быть стабильной. Радиус не привязан к наличию тени: карточка может быть плоской, если она уже отделена фоном или границей.
999px — только pill/status. Не используем случайные 10/14/18px, если нет отдельной причины.
Тени нейтральные, с оттенком Deep Blue. Зелёный glow допускается только как редкий брендовый эффект, а не на каждой карточке.
Основная сетка — 4px. Большинство интерфейсных отступов собираем из 8 / 12 / 16 / 24 / 32px.
Focus должен быть заметен и не зависеть только от изменения цвета текста.
Примеры ниже построены только на реальных модулях продукта. Они показывают не конкретные данные клиентов, а правильное применение дизайн-системы в существующих разделах.
Dark Core остаётся в sidebar. Kanban, фильтры и карточки работают на Warm Canvas. Статусы получают семантические цвета.
#151F24 sidebar · #FBFBF9 canvasЦвет не мешает календарю и расписанию. Основная визуальная иерархия строится размером, spacing и состояниями.
surface #FFFFFF · border #E5E8E2Документы визуально остаются частью той же CRM: те же поверхности, радиусы, borders и status tokens.
same tokens · no separate visual themeДаже AI-модуль не создаёт новый визуальный язык. Отличие формируется содержанием и иконографикой, а не другой палитрой.
one brand system across modulesГлавная задача системы — не сделать каждый экран «брендовым», а сделать продукт единым, предсказуемым и спокойным.
#151F24 используется для навигации, dark surfaces и сильных контрастных секций. Основная работа остаётся на светлом фоне.
#7ED957 показывает главное действие, active, включённый toggle или брендовый акцент. Не красим им всё подряд.
На #7ED957 используем тёмный #151F24. Белый оставляем для Dark Core и более глубоких цветных поверхностей.
Success, warning, danger и info имеют свои цвета. Пользователь должен узнавать смысл быстрее, чем бренд.
24×24, stroke 1.8–2px, мягкая геометрия. Иконки могут быть уникальными, но оптическая масса должна совпадать.
Сначала иерархия, типографика и интервалы. Цвет, тень и градиент добавляются только если несут функцию.