open-design/design-systems/cohere/DESIGN-ru.md

# Дизайн-система, вдохновлённая 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` (кастомный иконочный шрифт)

### Иерархия

| Роль | Шрифт | Размер | Насыщенность | Межстрочный | Трекинг | Примечание |
|------|------|------|--------|-------------|----------------|-------|
| Дисплейный / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (плотный) | -1.44px | Максимальный акцент, авторитет антиквы |
| Дисплейный вторичный | CohereText | 60px (3.75rem) | 400 | 1.00 (плотный) | -1.2px | Крупные заголовки секций |
| Заголовок секции | Unica77 | 48px (3rem) | 400 | 1.20 (плотный) | -0.48px | Заголовки разделов с функциями |
| Подзаголовок | Unica77 | 32px (2rem) | 400 | 1.20 (плотный) | -0.32px | Заголовки карточек, названия функций |
| Заголовок функции | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Небольшие заголовки секций |
| Крупный текст | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Вводные абзацы |
| Основной / Кнопка | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Стандартный текст, текст кнопок |
| Средняя кнопка | Unica77 | 14px (0.88rem) | 500 | 1.71 (свободный) | normal | Небольшие кнопки, акцентные метки |
| Подпись | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Метаданные, описания |
| Метка в верхнем регистре | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Метки секций в верхнем регистре |
| Мелкий | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Самый мелкий текст, ссылки в футере |
| Микро-код | 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
- Основной стиль кнопки — невидима до взаимодействия

**Тёмная сплошная**
- Фон: тёмный/чёрный
- Текст: 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. Глубина и уровни поднятия

| Уровень | Обработка | Применение |
|-------|-----------|-----|
| Плоский (0) | Нет тени, нет рамки | Фон страницы, текстовые блоки |
| С рамкой (1) | `1px solid #f2f2f2` или `#d9d9dd` | Стандартные карточки, разделители списков |
| Пурпурная полоса (2) | Полноширинный тёмно-пурпурный фон | Hero-секции, демонстрация функций |

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

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

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

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

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

### Брейкпоинты
| Название | Ширина | Ключевые изменения |
|------|-------|-------------|
| Маленький мобильный | <425px | Компактная компоновка, минимальные отступы |
| Мобильный | 425–640px | Одна колонка, карточки в столбик |
| Крупный мобильный | 640–768px | Незначительные корректировки отступов |
| Планшет | 768–1024px | Начинаются двухколоночные сетки |
| Десктоп | 1024–1440px | Полная многоколоночная компоновка |
| Крупный десктоп | 1440–2560px | Максимальная ширина контейнера |

*Обнаружено 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. Пурпурный — для полноширинных секций, никогда не для фонов карточек
-											术语更名第一步：执行会话／任务会话 ⇒ 项目会话（口径块 ＋ 触发词表）＋ 落地 9 份"说人话"新稿
										
										
											2026-10-08 22:10:12 +08:00
+								# Дизайн-система, вдохновлённая 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` (кастомный иконочный шрифт)
 								### Иерархия
 								| Роль | Шрифт | Размер | Насыщенность | Межстрочный | Трекинг | Примечание |
 								|------|------|------|--------|-------------|----------------|-------|
 								| Дисплейный / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (плотный) | -1.44px | Максимальный акцент, авторитет антиквы |
 								| Дисплейный вторичный | CohereText | 60px (3.75rem) | 400 | 1.00 (плотный) | -1.2px | Крупные заголовки секций |
 								| Заголовок секции | Unica77 | 48px (3rem) | 400 | 1.20 (плотный) | -0.48px | Заголовки разделов с функциями |
 								| Подзаголовок | Unica77 | 32px (2rem) | 400 | 1.20 (плотный) | -0.32px | Заголовки карточек, названия функций |
 								| Заголовок функции | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Небольшие заголовки секций |
 								| Крупный текст | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Вводные абзацы |
 								| Основной / Кнопка | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Стандартный текст, текст кнопок |
 								| Средняя кнопка | Unica77 | 14px (0.88rem) | 500 | 1.71 (свободный) | normal | Небольшие кнопки, акцентные метки |
 								| Подпись | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Метаданные, описания |
 								| Метка в верхнем регистре | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Метки секций в верхнем регистре |
 								| Мелкий | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Самый мелкий текст, ссылки в футере |
 								| Микро-код | 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
 								- Основной стиль кнопки — невидима до взаимодействия
 								**Тёмная сплошная**
 								- Фон: тёмный/чёрный
 								- Текст: 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. Глубина и уровни поднятия
 								| Уровень | Обработка | Применение |
 								|-------|-----------|-----|
 								| Плоский (0) | Нет тени, нет рамки | Фон страницы, текстовые блоки |
 								| С рамкой (1) | `1px solid #f2f2f2` или `#d9d9dd` | Стандартные карточки, разделители списков |
 								| Пурпурная полоса (2) | Полноширинный тёмно-пурпурный фон | Hero-секции, демонстрация функций |
 								**Философия теней**: Cohere практически без теней. Глубина передаётся через **контраст цвета фона** (белые карточки на пурпурных полосах, белая поверхность на snow), **ограничение рамками** (холодно-серые рамки) и драматическое **чередование светлых и тёмных секций**. Когда элементам нужна высота, они достигают её, будучи белыми на тёмном, а не через тени.
 								## 7. Что делать и чего избегать
 								### Делать
 								- Использовать радиус скругления 22px на всех основных карточках и контейнерах — это визуальная подпись
 								- Использовать CohereText для дисплейных заголовков (72px, 60px) с отрицательным трекингом
 								- Использовать Unica77 для всего основного и интерфейсного текста с насыщенностью 400
 								- Поддерживать палитру чёрно-белой с холодно-серыми рамками
 								- Использовать Interaction Blue (#1863dc) только для интерактивных состояний наведения/фокуса
 								- Использовать глубокие пурпурные секции для драматических визуальных разрывов и демонстрации продукта
 								- Применять верхний регистр + межбуквенное расстояние на CohereMono для меток секций
 								- Поддерживать корпоративную фотографию с разнообразными персонажами
 								### Не делать
 								- Не использовать радиус скругления, отличный от 22px, на основных карточках — фирменный радиус важен
 								- Не вводить тёплые цвета — палитра строго холодных тонов
 								- Не использовать тяжёлые тени — глубина достигается за счёт цветового контраста и рамок
 								- Не использовать жирное начертание (700+) для основного текста — диапазон 400–500
 								- Не пропускать иерархию антиква/гротеск — CohereText для заголовков, Unica77 для текста
 								- Не использовать пурпурный как цвет поверхности карточек — пурпурный зарезервирован для полноширинных секций
 								- Не сокращать отступы между секциями ниже 40px — корпоративные компоновки требуют пространства для дыхания
 								- Не применять декоративные элементы на кнопках по умолчанию — ghost/прозрачная — базовое состояние
 								## 8. Адаптивное поведение
 								### Брейкпоинты
 								| Название | Ширина | Ключевые изменения |
 								|------|-------|-------------|
 								| Маленький мобильный | <425px | Компактная компоновка, минимальные отступы |
 								| Мобильный | 425–640px | Одна колонка, карточки в столбик |
 								| Крупный мобильный | 640–768px | Незначительные корректировки отступов |
 								| Планшет | 768–1024px | Начинаются двухколоночные сетки |
 								| Десктоп | 1024–1440px | Полная многоколоночная компоновка |
 								| Крупный десктоп | 1440–2560px | Максимальная ширина контейнера |
 								*Обнаружено 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).»
 								### Руководство по итерации
 . Фокусируйся на ОДНОМ компоненте за раз
 . Всегда используй радиус 22px для основных карточек — «округлость карточки Cohere»
 . Указывай шрифт — CohereText для заголовков, Unica77 для текста, CohereMono для меток
 . Интерактивные элементы используют Interaction Blue (#1863dc) только при наведении
 . Поддерживай белые поверхности с холодно-серыми рамками — никаких тёплых тонов
 . Пурпурный — для полноширинных секций, никогда не для фонов карточек