# Дизайн-система натхненна Cohere

> Category: Штучний інтелект і великі мовні моделі
> Корпоративна AI-платформа. Яскраві градієнти, естетика інформаційно насиченої панелі керування.

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

Інтерфейс Cohere — це відполірована корпоративна панель керування: впевнена, чиста та розроблена так, щоб AI сприймався як серйозна інфраструктура, а не споживацька іграшка. Досвід розгортається на яскравому білому полотні, де контент організовано в щедро заокруглені картки (радіус 22px), що створюють органічну, хмарну мову контейнерування. Цей сайт звертається до CTO та корпоративних архітекторів: професійний, але не холодний; витончений, але не залякуючий.

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

Колір використовується з надзвичайною стриманістю — інтерфейс майже повністю чорно-білий із холодно-сірими рамками (`#d9d9dd`, `#e5e7eb`). Пурпурно-фіолетовий з'являється лише в фотографічних смугах-«героях», градієнтних секціях та в інтерактивному синьому (`#1863dc`), що сигналізує стани наведення й фокусу. Така хроматична стриманість означає, що коли колір все ж з'являється — на скриншотах продукту, корпоративних фотографіях і в темно-пурпурній секції — він несе максимальну візуальну вагу.

**Ключові характеристики:**
- Яскраво-біле полотно з холодно-сірими рамками-контейнерами
- Фірмовий радіус 22px — впізнавана «заокругленість картки Cohere»
- Подвійний кастомний шрифт: CohereText (дисплейний із засічками) + Unica77 (рубаний для основного тексту)
- Корпоративна хроматична стриманість: чорний, білий, холодні сірі, мінімальний пурпурно-синій акцент
- Глибокі пурпурно-фіолетові секції-«герої» для різкого контрасту
- «Привидні» / прозорі кнопки, що переходять у синій при наведенні
- Корпоративна фотографія з різноманітними реальними прикладами застосування
- CohereMono для коду та технічних підписів із трансформацією у верхній регістр

## 2. Кольорова палітра та ролі

### Основні кольори
- **Cohere Black** (`#000000`): Основний колір тексту заголовків і елементів максимальної виразності.
- **Near Black** (`#212121`): Стандартний колір посилань основного тексту — трохи м'якший за чисто чорний.
- **Deep Dark** (`#17171c`): Синюватий відтінок майже чорного для навігації та тексту в темних секціях.

### Вторинні та акцентні кольори
- **Interaction Blue** (`#1863dc`): Основний інтерактивний акцент — з'являється при наведенні на кнопки, в станах фокусу та активних посиланнях. Єдиний хроматичний колір дій.
- **Ring Blue** (`#4c6ee6` з прозорістю 50%): Колір ring у Tailwind для індикаторів фокусу з клавіатури.
- **Focus Purple** (`#9b60aa`): Колір рамки фокусу для поля вводу — приглушений фіолетовий.

### Поверхні та фони
- **Pure White** (`#ffffff`): Основний фон сторінки та поверхня карток.
- **Snow** (`#fafafa`): Ледь помітно підвищені поверхні та фони світлих секцій.
- **Lightest Gray** (`#f2f2f2`): Рамки карток і найм'якші лінії контейнерування.

### Нейтральні кольори та текст
- **Muted Slate** (`#93939f`): Знебарвлені посилання у підвалі та третинний текст — холодно-сірий із легким синьо-фіолетовим відтінком.
- **Border Cool** (`#d9d9dd`): Стандартні рамки секцій і елементів списку — холодний, трохи пурпурно-сірий.
- **Border Light** (`#e5e7eb`): Більш світлий варіант рамки — стандартний gray-200 від Tailwind.

### Система градієнтів
- **Пурпурно-фіолетова смуга-«герой»**: Секції глибокого пурпурного градієнту, що утворюють різкий контраст на тлі білого полотна. З'являються як повноширинні смуги, що вміщують скриншоти продукту і ключові повідомлення.
- **Темний градієнт підвалу**: Сторінка переходить від глибокого пурпурного/темно-коричневого до чорного підвалу, створюючи ефект «присмерку».

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

### Сімейство шрифтів
- **Display**: `CohereText`, резервні варіанти: `Space Grotesk, Inter, ui-sans-serif, system-ui`
- **Body / UI**: `Unica77 Cohere Web`, резервні варіанти: `Inter, Arial, ui-sans-serif, system-ui`
- **Code**: `CohereMono`, резервні варіанти: `Arial, ui-sans-serif, system-ui`
- **Іконки**: `CohereIconDefault` (кастомний іконковий шрифт)

### Ієрархія

| Роль | Шрифт | Розмір | Насиченість | Міжрядковий інтервал | Трекінг | Примітки |
|------|-------|--------|-------------|----------------------|---------|----------|
| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (щільний) | -1.44px | Максимальний вплив, авторитет засічок |
| Display Secondary | CohereText | 60px (3.75rem) | 400 | 1.00 (щільний) | -1.2px | Великі заголовки секцій |
| Section Heading | Unica77 | 48px (3rem) | 400 | 1.20 (щільний) | -0.48px | Заголовки секцій функцій |
| Sub-heading | Unica77 | 32px (2rem) | 400 | 1.20 (щільний) | -0.32px | Заголовки карток, назви функцій |
| Feature Title | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Менші назви секцій |
| Body Large | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Вступні абзаци |
| Body / Button | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Стандартний текст, текст кнопок |
| Button Medium | Unica77 | 14px (0.88rem) | 500 | 1.71 (розріджений) | normal | Менші кнопки, виділені підписи |
| Caption | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Метадані, описи |
| Uppercase Label | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Підписи секцій у верхньому регістрі |
| Small | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Найменший текст, посилання в підвалі |
| Code Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Мікроскопічні підписи коду у верхньому регістрі |

### Принципи
- **Засічки — для декларацій, рубаний — для утиліти**: 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
- Основний стиль кнопки — невидима до взаємодії

**Dark Solid**
- Фон: темний/чорний
- Текст: Pure White
- Для CTA на світлих поверхнях
- Таблеткоподібна форма або стандартний радіус

**Outlined**
- Контейнерування на основі рамки
- Використовується для другорядних дій

### Картки та контейнери
- Фон: 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: темна суцільна кнопка
- Мобільна: згортається у гамбургер

### Обробка зображень
- Корпоративна фотографія з різноманітними суб'єктами і середовищами
- Фотографія в пурпурному тоні для драматичних секцій
- Скриншоти UI продукту на темних поверхнях
- Зображення з радіусом 22px, що відповідає картковій системі
- Повноширинні секції з пурпурним градієнтом

### Відмінні компоненти

**Система карток 22px**
- Радіус 22px — візуальна підпис Cohere
- Всі основні картки, зображення та контейнери використовують цей радіус
- Створює хмарну, органічну м'якість, відмінну від типових 8–12px

**Смуга корпоративної довіри**
- Логотипи компаній у горизонтальному ряді
- Демонструє корпоративне впровадження
- Чисте монохромне відображення логотипів

**Пурпурні смуги-«герої»**
- Повноширинні глибоко пурпурні секції з вітринами продуктів
- Створюють різкі візуальні розриви в потоці білої сторінки
- Скриншоти продукту плавають у пурпурному середовищі

**Технічні теги у верхньому регістрі**
- CohereMono у верхньому регістрі з трекінгом
- Використовуються як маркери секцій і підписи категорій
- Створює технічну, структуровану інформаційну ієрархію

## 5. Принципи компонування

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

### Сітка та контейнер
- Максимальна ширина контейнера: до 2560px (дуже широкий) з адаптивним масштабуванням
- Герой: по центру з драматичною типографікою
- Секції функцій: багатоколонкові сітки карток
- Корпоративні секції: повноширинні пурпурні смуги
- Виявлено 26 точок зупину — надзвичайно детальна адаптивна система

### Філософія білого простору
- **Корпоративна чіткість**: Кожна секція представляє одну зрозумілу пропозицію з простором для дихання між ними.
- **Фотографія як герой**: Великі фотографічні секції забезпечують візуальний інтерес без потреби в декоративних дизайн-елементах.
- **Групування карток**: Пов'язаний контент згруповано в картки з заокругленнями 22px, утворюючи природні інформаційні кластери.

### Шкала радіусів заокруглення
- Гострий (4px): Навігаційні елементи, малі теги, пагінація
- Комфортний (8px): Діалогові вікна, вторинні контейнери, малі картки
- Щедрий (16px): Виділені контейнери, середні картки
- Великий (20px): Великі картки функцій
- Фірмовий (22px): Основні картки, зображення героїв, головні контейнери — РАДІУС Cohere
- Таблетка (9999px): Кнопки, теги, індикатори стану

## 6. Глибина та підйом

| Рівень | Обробка | Використання |
|--------|---------|--------------|
| Плоский (рівень 0) | Без тіні, без рамки | Фон сторінки, текстові блоки |
| З рамкою (рівень 1) | `1px solid #f2f2f2` або `#d9d9dd` | Стандартні картки, роздільники списків |
| Пурпурна смуга (рівень 2) | Повноширинний темно-пурпурний фон | Секції героїв, вітрини функцій |

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

## 7. Що робити і чого уникати

### Робити
- Використовувати радіус 22px для всіх основних карток і контейнерів — це візуальна підпис
- Використовувати CohereText для дисплейних заголовків (72px, 60px) із від'ємним трекінгом
- Використовувати Unica77 для всього основного та UI-тексту з насиченістю 400
- Зберігати палітру чорно-білою з холодно-сірими рамками
- Використовувати Interaction Blue (#1863dc) лише для інтерактивних станів наведення/фокусу
- Використовувати глибоко пурпурні секції для різких візуальних розривів і вітрин продуктів
- Застосовувати верхній регістр + трекінг для CohereMono в підписах секцій
- Підтримувати корпоративно-відповідну фотографію з різноманітними суб'єктами

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

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

### Точки зупину
| Назва | Ширина | Ключові зміни |
|-------|--------|---------------|
| Small Mobile | <425px | Компактне компонування, мінімальні відступи |
| Mobile | 425–640px | Одна колонка, картки у стопці |
| Large Mobile | 640–768px | Незначні корекції відступів |
| Tablet | 768–1024px | Починаються 2-колонкові сітки |
| Desktop | 1024–1440px | Повне багатоколонкове компонування |
| Large Desktop | 1440–2560px | Максимальна ширина контейнера |

*Виявлено 26 точок зупину — один із найбільш деталізовано адаптивних сайтів у датасеті.*

### Зони дотику
- Кнопки достатнього розміру для взаємодії дотиком
- Навігаційні посилання з комфортними відступами
- Поверхні карток як зони дотику

### Стратегія згортання
- **Навігація**: Повна навігація згортається у гамбургер
- **Сітки функцій**: Багатоколонкова → 2-колонкова → одна колонка
- **Текст героя**: 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)»

### Приклади запитів для компонентів
- «Створи секцію-герой на 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. Пурпурний — для повноширинних секцій, ніколи не для фонів карток