admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
270 lines
26 KiB
Markdown
270 lines
26 KiB
Markdown
# Дизайн-система натхненна 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. Пурпурний — для повноширинних секцій, ніколи не для фонів карток
|