Общая основа
Тёмно-синий, основной синий, успех и ошибка, радиусы, интервалы и кольца фокуса согласованы и узнаваемы в CRM и на сайте.
Бренд · Продукт · Сайт
Две системы.
Две системы.
Один бренд.
AgenticUltimate использует общую основу бренда и две дизайн-системы на её базе: одну для интерфейса дополнения, другую для AgenticUltimate.
Зачем две дизайн-системы?
Продукт и маркетинг решают разные задачи. Общая основа сохраняет узнаваемость бренда, а раздельные слои токенов не дают CRM выглядеть как лендинг, а сайту — как панель администратора.
Разные роли
Дополнение оптимизирует плотность и удобство работы. Сайт — понятность, конверсию и премиальный образ с умеренными акцентами.
Масштабируемость
Новые модули и страницы используют документированные токены и компоненты: меньше визуальных исключений, быстрее реализация.
AgenticUltimate UI 1.0
Дизайн-система продукта (дополнение)
Для интерфейса SuiteCRM: формы, таблицы, диалоги, мастера и плотные рабочие области. Функционально, понятно, на корпоративном уровне.
| Область | Содержание |
|---|---|
| Цвета | Тёмно-синий (#001631), основной (#165DCC), смысловые цвета статусов, поверхности для светлых рабочих контекстов |
| Типографика | Компактная шкала интерфейса для подписей, таблиц и форм — читаемость при высокой плотности информации |
| Интервалы и радиусы | Основа 4/8/12/16/24/32; радиусы sm–lg для полей, карточек и диалогов |
| Компоненты | Кнопки, поля, списки, диалоги, вкладки, таблицы, шаги мастеров, значки статуса |
| Плотность | Необязательный компактный вид для администрирования и списков |
Целевая аудитория — администраторы и опытные пользователи CRM. Каждое решение отвечает на вопрос: помогает ли оно быстрее и надёжнее работать с данными?
AgenticUltimate Web 1.0
Дизайн-система сайта (маркетинг)
Для AgenticUltimate: главный блок, карточки возможностей, доверие, мегаменю, тёмная тема. Премиально, технологично, с умеренным голубым и фиолетовым.
Принципы
Понятность важнее эффектов — не более 1–2 градиентов на экран.
Один доминирующий цвет — основной цвет ведёт, голубой и фиолетовый поддерживают.
Карточки объясняют пользу — мягкие тени, тонкие рамки, ненавязчивое наведение.
Элементы
Крупная типографика, вводные значки, карточки возможностей, полосы доверия, визуализации продукта, завершающие призывы, мегаменю. Светлая и тёмная темы из одного источника токенов.
| Семейство токенов | Примеры |
|---|---|
| Основа бренда | --su-navy, --su-primary, --su-ink |
| Акценты | --su-cyan, --su-violet (умеренно) |
| Поверхности | Плоская · Приподнятая · Возвышенная · Главная |
| Тени | От --su-shadow-sm до --su-shadow-lg, наведение без неонового кольца |
| Движение | Короткие переходы с учётом prefers-reduced-motion |
Связь с продуктом
Что общее, а что намеренно разделено.
Общее
Тёмно-синий и основной синий · Успех/опасность · Радиусы sm–lg · Базовые интервалы · Кольцо фокуса основного цвета · Название бренда и стиль иконок
Только сайт
Голубые/фиолетовые акценты и градиенты · Фоны сияния · Крупные заголовки · Бегущая строка и маркетинговые тени · Стекло умеренно (шапка)
Для команд и реализации
Как использовать системы ежедневно.
Развивать продукт
AgenticUltimate UI 1.0 — ориентир для новых экранов дополнения. Используйте существующие компоненты прежде, чем создавать варианты.
Расширять сайт
AgenticUltimate Web 1.0 и токены в site.css. Новые разделы строятся по схемам: главный блок → доверие → возможности → призыв.
Обеспечивать качество
Проверяйте контраст, управление клавиатурой и сокращение анимации. PageSpeed и доступность остаются частью стандарта поставки.
Изучить дизайн-системы вживую
Интерактивная дизайн-система сайта показывает токены, компоненты и тёмную тему. Интерфейс продукта остаётся ориентиром для дополнения SuiteCRM.