Дизайн-система, вдохновлённая Cohere

Category: ИИ и языковые модели Корпоративная AI-платформа. Яркие градиенты, эстетика насыщенных дашбордов.

1. Визуальная тема и атмосфера

Интерфейс Cohere — это отполированная корпоративная командная панель: уверенная, лаконичная, созданная с целью показать ИИ как серьёзную инфраструктуру, а не потребительскую игрушку. Всё разворачивается на ярко-белом холсте, где контент организован в щедро скруглённые карточки (радиус 22px), формирующие органичный, «облачный» визуальный язык. Сайт обращается к техническим директорам и корпоративным архитекторам: профессионально без холодности, сложно без излишней строгости.

Дизайн-язык соединяет два мира через систему из двух шрифтов: CohereText — кастомная дисплейная антиква с плотным трекингом — придаёт заголовкам авторитет технологического манифеста, тогда как Unica77 Cohere Web отвечает за весь основной и интерфейсный текст с геометрической швейцарской точностью. Это сочетание антиквы и гротеска создаёт личность «уверенный авторитет встречает инженерную ясность», идеально отражающую корпоративную AI-платформу.

Цвет используется с крайней сдержанностью — интерфейс почти полностью чёрно-белый с холодными серыми границами (#d9d9dd, #e5e7eb). Пурпурно-фиолетовый появляется лишь в фотографических hero-полосах, градиентных секциях и интерактивном синем (#1863dc), сигнализирующем состояния наведения и фокуса. Такая хроматическая сдержанность означает, что когда цвет всё же появляется — в скриншотах продукта, корпоративной фотографии и глубокой пурпурной секции — он несёт максимальный визуальный вес.

Ключевые характеристики:

• Ярко-белый холст с холодными серыми разграничивающими рамками
• Радиус скругления 22px — отличительная «округлость карточки Cohere»
• Два кастомных шрифта: CohereText (дисплейная антиква) + Unica77 (основной гротеск)
• Корпоративная хроматическая сдержанность: чёрный, белый, холодные серые, минимальный пурпурно-синий акцент
• Глубокие пурпурно-фиолетовые hero-секции для драматического контраста
• Ghost/прозрачные кнопки, переходящие в синий при наведении
• Корпоративная фотография, демонстрирующая разнообразные реальные сценарии
• CohereMono для кода и технических меток с трансформацией в верхний регистр

2. Цветовая палитра и роли

Основные цвета

• Cohere Black (#000000): Основной цвет заголовков и элементов максимального акцента.
• Near Black (#212121): Стандартный цвет ссылок в тексте — чуть мягче чистого чёрного.
• Deep Dark (#17171c): Сине-тёмный почти-чёрный для навигации и текста на тёмных секциях.

Вторичные цвета и акценты

• Interaction Blue (#1863dc): Основной интерактивный акцент — появляется при наведении на кнопки, в состояниях фокуса и активных ссылках. Единственный хроматический цвет действий.
• Ring Blue (#4c6ee6 с 50%): Цвет Tailwind ring для индикаторов фокуса с клавиатуры.
• Focus Purple (#9b60aa): Цвет рамки фокуса у полей ввода — приглушённый фиолетовый.

Поверхности и фоны

• Pure White (#ffffff): Основной фон страницы и поверхность карточек.
• Snow (#fafafa): Деликатно приподнятые поверхности и фоны светлых секций.
• Lightest Gray (#f2f2f2): Рамки карточек и самые мягкие разграничивающие линии.

Нейтральные цвета и текст

• Muted Slate (#93939f): Приглушённые ссылки в футере и третичный текст — холодно-тонированный серый с лёгким сине-фиолетовым оттенком.
• Border Cool (#d9d9dd): Стандартные рамки секций и элементов списков — холодный серый с едва заметным пурпурным тоном.
• Border Light (#e5e7eb): Более светлый вариант рамки — стандартный gray-200 из Tailwind.

Система градиентов

• Пурпурно-фиолетовая hero-полоса: Глубокие пурпурные градиентные секции, создающие драматический контраст на белом холсте. Размещаются как полноширинные полосы, содержащие скриншоты продукта и ключевые сообщения.
• Тёмный градиент футера: Страница переходит через глубокий пурпурный/угольный к чёрному футеру, создавая эффект «сумерек».

3. Правила типографики

Семейства шрифтов

• Дисплейный: CohereText, с запасными: Space Grotesk, Inter, ui-sans-serif, system-ui
• Основной / UI: Unica77 Cohere Web, с запасными: Inter, Arial, ui-sans-serif, system-ui
• Код: CohereMono, с запасными: Arial, ui-sans-serif, system-ui
• Иконки: CohereIconDefault (кастомный иконочный шрифт)

Иерархия

Принципы

• Антиква для деклараций, гротеск для утилит: CohereText несёт голос бренда на дисплейном уровне — засечки придают заголовкам авторитет публикуемого исследования. Unica77 справляется с любыми функциональными задачами в швейцарско-геометрической нейтральности.
• Отрицательный трекинг на крупных размерах: CohereText использует -1.2px до -1.44px межбуквенного расстояния при 60–72px, создавая плотные, выразительные текстовые блоки.
• Единственная насыщенность текста: Почти всё использование Unica77 — насыщенность 400. Насыщенность 500 появляется только для небольшого акцента кнопок. Система опирается на размер и отступы, а не на контраст насыщенности.
• Метки кода в верхнем регистре: CohereMono использует верхний регистр с положительным межбуквенным расстоянием (0.16–0.28px) для технических тегов и маркеров секций.

4. Стилизация компонентов

Кнопки

Ghost / Прозрачная

• Фон: прозрачный (rgba(255, 255, 255, 0))
• Текст: Cohere Black (#000000)
• Рамка не видна
• При наведении: текст переходит в Interaction Blue (#1863dc), прозрачность 0.8
• При фокусе: сплошная обводка 2px в Interaction Blue
• Основной стиль кнопки — невидима до взаимодействия

Тёмная сплошная

• Фон: тёмный/чёрный
• Текст: Pure White
• Для CTA на светлых поверхностях
• Форма пилюли или стандартный радиус

С обводкой

• Ограничение через рамку
• Используется для вторичных действий

Карточки и контейнеры

• Фон: Pure White (#ffffff)
• Рамка: тонкая сплошная Lightest Gray (1px solid #f2f2f2) для деликатных карточек; Cool Border (#d9d9dd) для акцентных
• Радиус: 22px — фирменный радиус Cohere для основных карточек, изображений и диалоговых контейнеров. Также 4px, 8px, 16px, 20px для меньших элементов
• Тень: минимальная — Cohere опирается на цвет фона и рамки, а не на тени
• Особое: 0px 0px 22px 22px радиус (скругление только снизу) для контейнеров секций
• Диалог: радиус 8px для модальных окон

Поля ввода и формы

• Текст: белый на тёмном инпуте, чёрный на светлом
• Рамка фокуса: Focus Purple (#9b60aa) с 1px solid
• Тень фокуса: красное кольцо (rgb(179, 0, 0) 0px 0px 0px 2px) — вероятно, для индикации ошибки
• Обводка фокуса: Interaction Blue сплошная 2px

Навигация

• Чистая горизонтальная навигация на белом или тёмном фоне
• Логотип: надпись Cohere (кастомный SVG)
• Ссылки: тёмный текст 16px Unica77
• CTA: тёмная сплошная кнопка
• Мобильная: коллапс в бургер

Обработка изображений

• Корпоративная фотография с разнообразными персонажами и окружением
• Фотография с пурпурным оттенком для драматических секций
• Скриншоты интерфейса продукта на тёмных поверхностях
• Изображения с радиусом 22px в соответствии с системой карточек
• Полноширинные секции с пурпурным градиентом

Особые компоненты

Система карточек 22px

• Радиус скругления 22px — визуальная подпись Cohere
• Все основные карточки, изображения и контейнеры используют этот радиус
• Создаёт облачную, органичную мягкость, отличающую от типичных 8–12px

Полоса корпоративного доверия

• Логотипы компаний, расположенные в горизонтальной полосе
• Демонстрирует корпоративное внедрение
• Чистая монохромная обработка логотипов

Пурпурные hero-полосы

• Полноширинные глубоко пурпурные секции для демонстрации продукта
• Создают драматические визуальные разрывы в потоке белой страницы
• Скриншоты продукта парят в пурпурном окружении

Теги кода в верхнем регистре

• CohereMono в верхнем регистре с межбуквенным расстоянием
• Используется как маркеры секций и метки категоризации
• Создаёт техническую, структурированную иерархию информации

5. Принципы компоновки

Система отступов

• Базовая единица: 8px
• Шкала: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
• Внутренние отступы кнопок варьируются в зависимости от варианта
• Внутренние отступы карточек: примерно 24–32px
• Вертикальные отступы секций: щедрые (56–60px между секциями)

Сетка и контейнер

• Максимальная ширина контейнера: до 2560px (очень широкий) с адаптивным масштабированием
• Hero: по центру с драматической типографикой
• Секции с функциями: многоколоночные сетки карточек
• Корпоративные секции: полноширинные пурпурные полосы
• Обнаружено 26 брейкпоинтов — исключительно детализированная адаптивная система

Философия белого пространства

• Корпоративная ясность: Каждая секция представляет одно чёткое предложение с пространством для дыхания между ними.
• Фотография как герой: Крупные фотографические секции обеспечивают визуальный интерес без необходимости в декоративных дизайн-элементах.
• Группировка в карточки: Связанный контент объединяется в карточки со скруглением 22px, создавая естественные кластеры информации.

Шкала радиуса скругления

• Острый (4px): Элементы навигации, мелкие теги, пагинация
• Комфортный (8px): Диалоговые окна, вторичные контейнеры, маленькие карточки
• Щедрый (16px): Акцентные контейнеры, средние карточки
• Крупный (20px): Большие карточки с функциями
• Фирменный (22px): Основные карточки, hero-изображения, главные контейнеры — ФИРМЕННЫЙ радиус Cohere
• Пилюля (9999px): Кнопки, теги, индикаторы статуса

6. Глубина и уровни поднятия

Философия теней: Cohere практически без теней. Глубина передаётся через контраст цвета фона (белые карточки на пурпурных полосах, белая поверхность на snow), ограничение рамками (холодно-серые рамки) и драматическое чередование светлых и тёмных секций. Когда элементам нужна высота, они достигают её, будучи белыми на тёмном, а не через тени.

7. Что делать и чего избегать

Делать

• Использовать радиус скругления 22px на всех основных карточках и контейнерах — это визуальная подпись
• Использовать CohereText для дисплейных заголовков (72px, 60px) с отрицательным трекингом
• Использовать Unica77 для всего основного и интерфейсного текста с насыщенностью 400
• Поддерживать палитру чёрно-белой с холодно-серыми рамками
• Использовать Interaction Blue (#1863dc) только для интерактивных состояний наведения/фокуса
• Использовать глубокие пурпурные секции для драматических визуальных разрывов и демонстрации продукта
• Применять верхний регистр + межбуквенное расстояние на CohereMono для меток секций
• Поддерживать корпоративную фотографию с разнообразными персонажами

Не делать

• Не использовать радиус скругления, отличный от 22px, на основных карточках — фирменный радиус важен
• Не вводить тёплые цвета — палитра строго холодных тонов
• Не использовать тяжёлые тени — глубина достигается за счёт цветового контраста и рамок
• Не использовать жирное начертание (700+) для основного текста — диапазон 400–500
• Не пропускать иерархию антиква/гротеск — CohereText для заголовков, Unica77 для текста
• Не использовать пурпурный как цвет поверхности карточек — пурпурный зарезервирован для полноширинных секций
• Не сокращать отступы между секциями ниже 40px — корпоративные компоновки требуют пространства для дыхания
• Не применять декоративные элементы на кнопках по умолчанию — ghost/прозрачная — базовое состояние

8. Адаптивное поведение

Брейкпоинты

Обнаружено 26 брейкпоинтов — один из наиболее детализированных адаптивных сайтов в наборе данных.

Цели касания

• Кнопки достаточного размера для касания
• Ссылки навигации с комфортными отступами
• Поверхности карточек как цели касания

Стратегия коллапса

• Навигация: Полная навигация сворачивается в бургер
• Сетки функций: Многоколоночная → 2 колонки → одна колонка
• Текст hero: 72px → 48px → 32px прогрессивное масштабирование
• Пурпурные секции: Сохраняют полную ширину, контент складывается
• Сетки карточек: 3 → 2 → 1 колонка

Поведение изображений

• Фотография пропорционально масштабируется внутри контейнеров со скруглением 22px
• Скриншоты продукта сохраняют соотношение сторон
• Пурпурные секции пропорционально масштабируют фон

9. Руководство по промптам для агента

Краткий справочник цветов

• Основной текст: «Cohere Black (#000000)»
• Фон страницы: «Pure White (#ffffff)»
• Вторичный текст: «Near Black (#212121)»
• Акцент при наведении: «Interaction Blue (#1863dc)»
• Приглушённый текст: «Muted Slate (#93939f)»
• Рамки карточек: «Lightest Gray (#f2f2f2)»
• Рамки секций: «Border Cool (#d9d9dd)»

Примеры промптов для компонентов

• «Создай hero-секцию на Pure White (#ffffff) с CohereText размером 72px, насыщенность 400, межстрочный 1.0, трекинг -1.44px. Текст Cohere Black. Подзаголовок в Unica77 18px насыщенность 400, межстрочный 1.4.»
• «Спроектируй карточку функции с радиусом 22px, рамкой 1px solid Lightest Gray (#f2f2f2) на белом фоне. Заголовок в Unica77 32px, трекинг -0.32px. Текст в Unica77 16px, Muted Slate (#93939f).»
• «Создай ghost-кнопку: прозрачный фон, текст Cohere Black в Unica77 16px. При наведении текст переходит в Interaction Blue (#1863dc) с прозрачностью 0.8. При фокусе: сплошная обводка 2px в Interaction Blue.»
• «Создай полноширинную секцию глубокого пурпурного с белым текстом. CohereText 60px для заголовка. Скриншот продукта парит внутри со скруглением 22px.»
• «Спроектируй метку секции в CohereMono 14px, верхний регистр, трекинг 0.28px. Текст Muted Slate (#93939f).»

Руководство по итерации

1. Фокусируйся на ОДНОМ компоненте за раз
2. Всегда используй радиус 22px для основных карточек — «округлость карточки Cohere»
3. Указывай шрифт — CohereText для заголовков, Unica77 для текста, CohereMono для меток
4. Интерактивные элементы используют Interaction Blue (#1863dc) только при наведении
5. Поддерживай белые поверхности с холодно-серыми рамками — никаких тёплых тонов
6. Пурпурный — для полноширинных секций, никогда не для фонов карточек