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。
313 lines
30 KiB
Markdown
313 lines
30 KiB
Markdown
# Дизайн-система, натхненна Notion
|
||
|
||
> Category: Продуктивність і SaaS
|
||
> Універсальний робочий простір. Теплий мінімалізм, заголовки із засічками, м'які поверхні.
|
||
|
||
## 1. Візуальна тема та атмосфера
|
||
|
||
Вебсайт Notion утілює філософію самого інструмента: чисте полотно, яке не стає у вас на шляху. Дизайн-система побудована на теплих нейтральних відтінках, а не на холодних сірих, створюючи виразно доступний мінімалізм, що відчувається радше як якісний папір, ніж стерильне скло. Полотно сторінки чисто біле (`#ffffff`), але текст не чисто чорний -- це теплий, майже чорний відтінок (`rgba(0,0,0,0.95)`), який непомітно пом'якшує досвід читання. Шкала теплих сірих (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) несе тонкі жовто-коричневі підтони, надаючи інтерфейсу тактильну, майже аналогову теплоту.
|
||
|
||
Кастомний шрифт NotionInter (модифікований Inter) є хребтом системи. У великих розмірах (64px) він використовує агресивний від'ємний міжлітерний інтервал (-2.125px), створюючи заголовки, що відчуваються стиснутими й точними. Діапазон насиченості ширший, ніж у типових системах: 400 для основного тексту, 500 для елементів UI, 600 для напівжирних міток і 700 для великих заголовків. Функції OpenType `"lnum"` (стандартні цифри) і `"locl"` (локалізовані форми) увімкнені для більшого тексту, додаючи типографічної витонченості, яка винагороджує уважне читання.
|
||
|
||
Те, що робить візуальну мову Notion відмітною, — це її філософія меж. Замість важких меж чи тіней Notion використовує надтонкі межі `1px solid rgba(0,0,0,0.1)` -- межі, що існують як шепіт, ледь помітні лінії поділу, які створюють структуру без ваги. Система тіней так само стримана: багатошарові стоси з кумулятивною непрозорістю, що ніколи не перевищує 0.05, створюючи глибину, яку радше відчувають, ніж бачать.
|
||
|
||
**Ключові характеристики:**
|
||
- NotionInter (модифікований Inter) із від'ємним міжлітерним інтервалом у великих розмірах (-2.125px при 64px)
|
||
- Тепла нейтральна палітра: сірі несуть жовто-коричневі підтони (`#f6f5f4` теплий білий, `#31302e` теплий темний)
|
||
- Майже чорний текст через `rgba(0,0,0,0.95)` -- не чисто чорний, створює мікротеплоту
|
||
- Надтонкі межі: `1px solid rgba(0,0,0,0.1)` повсюди -- поділ вагою шепоту
|
||
- Багатошарові стоси тіней із непрозорістю нижче 0.05 для ледь помітної глибини
|
||
- Notion Blue (`#0075de`) як єдиний акцентний колір для CTA та інтерактивних елементів
|
||
- Значки-пігулки (радіус 9999px) із тонованим синім тлом для індикаторів стану
|
||
- Базова одиниця інтервалу 8px з органічною, нежорсткою шкалою
|
||
|
||
## 2. Палітра кольорів і ролі
|
||
|
||
### Основні
|
||
- **Notion Black** (`rgba(0,0,0,0.95)` / `#000000f2`): Основний текст, заголовки, основний контент. 95% непрозорості пом'якшує чистий чорний без втрати читабельності.
|
||
- **Pure White** (`#ffffff`): Тло сторінки, поверхні карток, текст кнопки на синьому.
|
||
- **Notion Blue** (`#0075de`): Основний CTA, колір посилання, інтерактивний акцент -- єдиний насичений колір у базовому обрамленні UI.
|
||
|
||
### Вторинні бренду
|
||
- **Deep Navy** (`#213183`): Вторинний колір бренду, використовується помірно для акцентування та темних секцій функцій.
|
||
- **Active Blue** (`#005bab`): Активний/натиснутий стан кнопки -- темніший варіант Notion Blue.
|
||
|
||
### Шкала теплих нейтральних
|
||
- **Warm White** (`#f6f5f4`): Тонування поверхні тла, чергування секцій, тонке заповнення картки. Жовтий підтон є ключовим.
|
||
- **Warm Dark** (`#31302e`): Тло темної поверхні, текст темної секції. Тепліший за стандартні сірі.
|
||
- **Warm Gray 500** (`#615d59`): Вторинний текст, описи, приглушені мітки.
|
||
- **Warm Gray 300** (`#a39e98`): Текст-заповнювач, вимкнені стани, текст підписів.
|
||
|
||
### Семантичні акцентні кольори
|
||
- **Teal** (`#2a9d99`): Стани успіху, позитивні індикатори.
|
||
- **Green** (`#1aae39`): Підтвердження, значки завершення.
|
||
- **Orange** (`#dd5b00`): Стани попередження, індикатори уваги.
|
||
- **Pink** (`#ff64c8`): Декоративний акцент, виділення функцій.
|
||
- **Purple** (`#391c57`): Преміум-функції, глибокі акценти.
|
||
- **Brown** (`#523410`): Земляний акцент, теплі секції функцій.
|
||
|
||
### Інтерактивні
|
||
- **Link Blue** (`#0075de`): Основний колір посилання з підкресленням при наведенні.
|
||
- **Link Light Blue** (`#62aef0`): Світліший варіант посилання для темного тла.
|
||
- **Focus Blue** (`#097fe8`): Кільце фокуса на інтерактивних елементах.
|
||
- **Badge Blue Bg** (`#f2f9ff`): Тло значка-пігулки, тонована синя поверхня.
|
||
- **Badge Blue Text** (`#097fe8`): Текст значка-пігулки, темніший синій для читабельності.
|
||
|
||
### Тіні та глибина
|
||
- **Card Shadow** (`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`): Багатошарове підняття картки.
|
||
- **Deep Shadow** (`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px`): П'ятишарове глибоке підняття для модальних вікон і виділеного контенту.
|
||
- **Whisper Border** (`1px solid rgba(0,0,0,0.1)`): Стандартна межа поділу -- картки, роздільники, секції.
|
||
|
||
## 3. Правила типографіки
|
||
|
||
### Сімейство шрифтів
|
||
- **Основний**: `NotionInter`, із запасними: `Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol`
|
||
- **Функції OpenType**: `"lnum"` (стандартні цифри) і `"locl"` (локалізовані форми) увімкнені для великого та заголовкового тексту.
|
||
|
||
### Ієрархія
|
||
|
||
| Роль | Шрифт | Розмір | Насиченість | Висота рядка | Міжлітерний інтервал | Примітки |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (щільна) | -2.125px | Максимальне стиснення, білборд-заголовки |
|
||
| Display Secondary | NotionInter | 54px (3.38rem) | 700 | 1.04 (щільна) | -1.875px | Вторинний hero, заголовки функцій |
|
||
| Section Heading | NotionInter | 48px (3.00rem) | 700 | 1.00 (щільна) | -1.5px | Заголовки секцій функцій, із `"lnum"` |
|
||
| Sub-heading Large | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Заголовки карток, підсекції функцій |
|
||
| Sub-heading | NotionInter | 26px (1.63rem) | 700 | 1.23 (щільна) | -0.625px | Підзаголовки секцій, заголовки контенту |
|
||
| Card Title | NotionInter | 22px (1.38rem) | 700 | 1.27 (щільна) | -0.25px | Картки функцій, заголовки списків |
|
||
| Body Large | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Вступи, описи функцій |
|
||
| Body | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Стандартний текст для читання |
|
||
| Body Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Навігація, виділений текст UI |
|
||
| Body Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Сильні мітки, активні стани |
|
||
| Body Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Заголовки в розмірі основного тексту |
|
||
| Nav / Button | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Навігаційні посилання, текст кнопки |
|
||
| Caption | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Метадані, вторинні мітки |
|
||
| Caption Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Підписи контенту, описи |
|
||
| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Значки-пігулки, теги, мітки стану |
|
||
| Micro Label | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Малі метадані, часові позначки |
|
||
|
||
### Принципи
|
||
- **Стиснення в масштабі**: NotionInter у великих розмірах використовує міжлітерний інтервал -2.125px при 64px, поступово послаблюючись до -0.625px при 26px і normal при 16px. Стиснення створює щільність у заголовках, зберігаючи читабельність у розмірах основного тексту.
|
||
- **Система з чотирьох насиченостей**: 400 (основний/читання), 500 (UI/інтерактивний), 600 (акцент/навігація), 700 (заголовки/великі). Ширший діапазон насиченості порівняно з більшістю систем дозволяє нюансовану ієрархію.
|
||
- **Тепле масштабування**: Висота рядка стискається зі збільшенням розміру -- 1.50 в основному тексті (16px), 1.23-1.27 у підзаголовках, 1.00-1.04 у великих. Це створює щільніші, більш виразні заголовки.
|
||
- **Мікротрекінг значків**: Текст значка 12px використовує додатний міжлітерний інтервал (0.125px) -- єдиний додатний трекінг у системі, що створює ширший, більш розбірливий малий текст.
|
||
|
||
## 4. Стилі компонентів
|
||
|
||
### Кнопки
|
||
|
||
**Primary Blue**
|
||
- Тло: `#0075de` (Notion Blue)
|
||
- Текст: `#ffffff`
|
||
- Відступи: 8px 16px
|
||
- Радіус: 4px (тонкий)
|
||
- Межа: `1px solid transparent`
|
||
- Наведення: тло темнішає до `#005bab`
|
||
- Активний: трансформація scale(0.9)
|
||
- Фокус: контур фокуса `2px solid`, тінь `var(--shadow-level-200)`
|
||
- Використання: Основний CTA ("Get Notion free", "Try it")
|
||
|
||
**Secondary / Tertiary**
|
||
- Тло: `rgba(0,0,0,0.05)` (напівпрозорий теплий сірий)
|
||
- Текст: `#000000` (майже чорний)
|
||
- Відступи: 8px 16px
|
||
- Радіус: 4px
|
||
- Наведення: колір тексту зміщується, scale(1.05)
|
||
- Активний: трансформація scale(0.9)
|
||
- Використання: Вторинні дії, надсилання форм
|
||
|
||
**Ghost / Link Button**
|
||
- Тло: прозоре
|
||
- Текст: `rgba(0,0,0,0.95)`
|
||
- Декорація: підкреслення при наведенні
|
||
- Використання: Третинні дії, вбудовані посилання
|
||
|
||
**Pill Badge Button**
|
||
- Тло: `#f2f9ff` (тонований синій)
|
||
- Текст: `#097fe8`
|
||
- Відступи: 4px 8px
|
||
- Радіус: 9999px (повна пігулка)
|
||
- Шрифт: 12px насиченість 600
|
||
- Використання: Значки стану, мітки функцій, теги "New"
|
||
|
||
### Картки та контейнери
|
||
- Тло: `#ffffff`
|
||
- Межа: `1px solid rgba(0,0,0,0.1)` (межа шепоту)
|
||
- Радіус: 12px (стандартні картки), 16px (виділені/hero картки)
|
||
- Тінь: `rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`
|
||
- Наведення: тонке посилення тіні
|
||
- Картки із зображеннями: радіус верху 12px, зображення заповнює верхню половину
|
||
|
||
### Поля введення та форми
|
||
- Тло: `#ffffff`
|
||
- Текст: `rgba(0,0,0,0.9)`
|
||
- Межа: `1px solid #dddddd`
|
||
- Відступи: 6px
|
||
- Радіус: 4px
|
||
- Фокус: синє кільце контуру
|
||
- Заповнювач: теплий сірий `#a39e98`
|
||
|
||
### Навігація
|
||
- Чиста горизонтальна навігація на білому, не липка
|
||
- Логотип бренду вирівняний ліворуч (іконка 33x34px + словесний знак)
|
||
- Посилання: NotionInter 15px насиченість 500-600, майже чорний текст
|
||
- Наведення: зміщення кольору на `var(--color-link-primary-text-hover)`
|
||
- CTA: синя кнопка-пігулка ("Get Notion free") вирівняна праворуч
|
||
- Мобільна: згортання гамбургер-меню
|
||
- Випадні меню продуктів із багаторівневими категоризованими меню
|
||
|
||
### Обробка зображень
|
||
- Скріншоти продукту з межею `1px solid rgba(0,0,0,0.1)`
|
||
- Зображення із заокругленим верхом: радіус `12px 12px 0px 0px`
|
||
- Скріншоти попереднього перегляду панелі/робочого простору домінують у секціях функцій
|
||
- Тепле градієнтне тло за hero-ілюстраціями (декоративні ілюстрації персонажів)
|
||
|
||
### Відмітні компоненти
|
||
|
||
**Картки функцій з ілюстраціями**
|
||
- Великі ілюстративні заголовки (Велика хвиля, скріншоти UI продукту)
|
||
- Картка з радіусом 12px із межею шепоту
|
||
- Заголовок 22px насиченість 700, опис 16px насиченість 400
|
||
- Варіант тла в теплому білому (`#f6f5f4`) для чергованих секцій
|
||
|
||
**Панель довіри / Сітка логотипів**
|
||
- Логотипи компаній (секція довірених команд) у кольорах їхнього бренду
|
||
- Горизонтальне прокручування або сіткове розташування з кількістю команд
|
||
- Відображення метрики: патерн велике число + опис
|
||
|
||
**Картки метрик**
|
||
- Відображення великого числа (наприклад, "$4,200 ROI")
|
||
- NotionInter 40px+ насиченість 700 для метрики
|
||
- Опис нижче в теплому сірому основному тексті
|
||
- Контейнер картки з межею шепоту
|
||
|
||
## 5. Принципи компонування
|
||
|
||
### Система інтервалів
|
||
- Базова одиниця: 8px
|
||
- Шкала: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px
|
||
- Нежорстка органічна шкала з дробовими значеннями (5.6px, 6.4px) для мікрокорекцій
|
||
|
||
### Сітка та контейнер
|
||
- Максимальна ширина контенту: приблизно 1200px
|
||
- Hero: центрований одностовпчиковий зі щедрим верхнім відступом (80-120px)
|
||
- Секції функцій: сітки на 2-3 стовпці для карток
|
||
- Тло секцій у теплому білому (`#f6f5f4`) на всю ширину для чергування
|
||
- Скріншоти коду/панелі як обмежені межею шепоту
|
||
|
||
### Філософія білого простору
|
||
- **Щедрий вертикальний ритм**: 64-120px між основними секціями. Notion дає контенту дихати завдяки великим вертикальним відступам.
|
||
- **Тепле чергування**: Білі секції чергуються з секціями в теплому білому (`#f6f5f4`), створюючи м'який візуальний ритм без різких колірних розривів.
|
||
- **Щільність із пріоритетом контенту**: Блоки основного тексту компактні (висота рядка 1.50), але оточені щедрим полем, створюючи острівці читабельного контенту в морі білого простору.
|
||
|
||
### Шкала радіуса межі
|
||
- Мікро (4px): Кнопки, поля введення, функціональні інтерактивні елементи
|
||
- Тонкий (5px): Посилання, елементи списку, елементи меню
|
||
- Стандартний (8px): Малі картки, контейнери, вбудовані елементи
|
||
- Комфортний (12px): Стандартні картки, контейнери функцій, верхи зображень
|
||
- Великий (16px): Hero-картки, виділений контент, промоблоки
|
||
- Повна пігулка (9999px): Значки, пігулки, індикатори стану
|
||
- Коло (100%): Індикатори вкладок, аватари
|
||
|
||
## 6. Глибина та підняття
|
||
|
||
| Рівень | Обробка | Використання |
|
||
|-------|-----------|-----|
|
||
| Плаский (Level 0) | Без тіні, без межі | Тло сторінки, текстові блоки |
|
||
| Шепіт (Level 1) | `1px solid rgba(0,0,0,0.1)` | Стандартні межі, контури карток, роздільники |
|
||
| М'яка картка (Level 2) | 4-шаровий стос тіней (макс. непрозорість 0.04) | Картки контенту, блоки функцій |
|
||
| Глибока картка (Level 3) | 5-шаровий стос тіней (макс. непрозорість 0.05, розмиття 52px) | Модальні вікна, виділені панелі, hero-елементи |
|
||
| Фокус (Доступність) | Контур `2px solid var(--focus-color)` | Фокус клавіатури на всіх інтерактивних елементах |
|
||
|
||
**Філософія тіні**: Система тіней Notion використовує кілька шарів з надзвичайно низькою індивідуальною непрозорістю (0.01 до 0.05), які накопичуються в м'яке, природно виглядаюче підняття. 4-шарова тінь картки простягається від розмиття 1.04px до 18px, створюючи градієнт глибини, а не одну тверду тінь. 5-шарова глибока тінь простягається до розмиття 52px при непрозорості 0.05, виробляючи навколишню оклюзію, що відчувається як природне світло, а не комп'ютерно згенерована глибина. Цей пошаровий підхід робить елементи вбудованими в сторінку, а не такими, що плавають над нею.
|
||
|
||
### Декоративна глибина
|
||
- Hero-секція: декоративні ілюстрації персонажів (грайливий, намальований від руки стиль)
|
||
- Чергування секцій: зміщення тла від білого до теплого білого (`#f6f5f4`)
|
||
- Без твердих меж секцій -- розділення йде від змін кольору тла та інтервалів
|
||
|
||
## 7. Адаптивна поведінка
|
||
|
||
### Точки зламу
|
||
| Назва | Ширина | Ключові зміни |
|
||
|------|-------|-------------|
|
||
| Mobile Small | <400px | Щільний один стовпець, мінімальні відступи |
|
||
| Mobile | 400-600px | Стандартний мобільний, складене компонування |
|
||
| Tablet Small | 600-768px | Починаються 2-стовпчикові сітки |
|
||
| Tablet | 768-1080px | Повні сітки карток, розширені відступи |
|
||
| Desktop Small | 1080-1200px | Стандартне настільне компонування |
|
||
| Desktop | 1200-1440px | Повне компонування, максимальна ширина контенту |
|
||
| Large Desktop | >1440px | Центроване, щедрі поля |
|
||
|
||
### Цілі дотику
|
||
- Кнопки використовують комфортні відступи (8px-16px по вертикалі)
|
||
- Навігаційні посилання при 15px з достатнім інтервалом
|
||
- Значки-пігулки мають 8px горизонтального відступу для цілей дотику
|
||
- Перемикач мобільного меню використовує стандартну гамбургер-кнопку
|
||
|
||
### Стратегія згортання
|
||
- Hero: 64px великий -> масштабується до 40px -> 26px на мобільному, зберігає пропорційний міжлітерний інтервал
|
||
- Навігація: горизонтальні посилання + синій CTA -> гамбургер-меню
|
||
- Картки функцій: 3-стовпчикові -> 2-стовпчикові -> один стовпець складений
|
||
- Скріншоти продукту: зберігають співвідношення сторін з адаптивними зображеннями
|
||
- Логотипи панелі довіри: сітка -> горизонтальне прокручування на мобільному
|
||
- Підвал: багатостовпчиковий -> складений один стовпець
|
||
- Інтервал секцій: 80px+ -> 48px на мобільному
|
||
|
||
### Поведінка зображень
|
||
- Скріншоти робочого простору зберігають межу шепоту в усіх розмірах
|
||
- Hero-ілюстрації масштабуються пропорційно
|
||
- Скріншоти продукту використовують адаптивні зображення з узгодженим радіусом межі
|
||
- Секції в теплому білому на всю ширину зберігають обробку від краю до краю
|
||
|
||
## 8. Доступність та стани
|
||
|
||
### Система фокуса
|
||
- Усі інтерактивні елементи отримують видимі індикатори фокуса
|
||
- Контур фокуса: `2px solid` з кольором фокуса + тінь level 200
|
||
- Навігація Tab підтримується в усіх інтерактивних компонентах
|
||
- Текст високого контрасту: майже чорний на білому перевищує WCAG AAA (>14:1 співвідношення)
|
||
|
||
### Інтерактивні стани
|
||
- **За замовчуванням**: Стандартний вигляд із межами шепоту
|
||
- **Наведення**: Зміщення кольору на тексті, scale(1.05) на кнопках, підкреслення на посиланнях
|
||
- **Активний/Натиснутий**: трансформація scale(0.9), темніший варіант тла
|
||
- **Фокус**: Синє кільце контуру з посиленням тіні
|
||
- **Вимкнений**: Теплий сірий (`#a39e98`) текст, зменшена непрозорість
|
||
|
||
### Колірний контраст
|
||
- Основний текст (rgba(0,0,0,0.95)) на білому: ~18:1 співвідношення
|
||
- Вторинний текст (#615d59) на білому: ~5.5:1 співвідношення (WCAG AA)
|
||
- Синій CTA (#0075de) на білому: ~4.6:1 співвідношення (WCAG AA для великого тексту)
|
||
- Текст значка (#097fe8) на тлі значка (#f2f9ff): ~4.5:1 співвідношення (WCAG AA для великого тексту)
|
||
|
||
## 9. Посібник із підказок для агента
|
||
|
||
### Швидкий довідник кольорів
|
||
- Основний CTA: Notion Blue (`#0075de`)
|
||
- Тло: Pure White (`#ffffff`)
|
||
- Альтернативне тло: Warm White (`#f6f5f4`)
|
||
- Текст заголовка: Майже чорний (`rgba(0,0,0,0.95)`)
|
||
- Основний текст: Майже чорний (`rgba(0,0,0,0.95)`)
|
||
- Вторинний текст: Warm Gray 500 (`#615d59`)
|
||
- Приглушений текст: Warm Gray 300 (`#a39e98`)
|
||
- Межа: `1px solid rgba(0,0,0,0.1)`
|
||
- Посилання: Notion Blue (`#0075de`)
|
||
- Кільце фокуса: Focus Blue (`#097fe8`)
|
||
|
||
### Приклади підказок для компонентів
|
||
- "Створи hero-секцію на білому тлі. Заголовок 64px NotionInter насиченість 700, висота рядка 1.00, міжлітерний інтервал -2.125px, колір rgba(0,0,0,0.95). Підзаголовок 20px насиченість 600, висота рядка 1.40, колір #615d59. Синя кнопка CTA (#0075de, радіус 4px, відступи 8px 16px, білий текст) і ghost-кнопка (прозоре тло, майже чорний текст, підкреслення при наведенні)."
|
||
- "Спроєктуй картку: біле тло, межа 1px solid rgba(0,0,0,0.1), радіус 12px. Використай стос тіней: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Заголовок 22px NotionInter насиченість 700, міжлітерний інтервал -0.25px. Основний текст 16px насиченість 400, колір #615d59."
|
||
- "Побудуй значок-пігулку: тло #f2f9ff, текст #097fe8, радіус 9999px, відступи 4px 8px, 12px NotionInter насиченість 600, міжлітерний інтервал 0.125px."
|
||
- "Створи навігацію: білий заголовок. NotionInter 15px насиченість 600 для посилань, майже чорний текст. Синій CTA-пігулка 'Get Notion free' вирівняний праворуч (тло #0075de, білий текст, радіус 4px)."
|
||
- "Спроєктуй чергуване компонування секцій: білі секції чергуються з секціями в теплому білому (#f6f5f4). Кожна секція має 64-80px вертикального відступу, max-width 1200px центроване. Заголовок секції 48px насиченість 700, висота рядка 1.00, міжлітерний інтервал -1.5px."
|
||
|
||
### Посібник з ітерацій
|
||
1. Завжди використовуй теплі нейтральні відтінки -- сірі Notion мають жовто-коричневі підтони (#f6f5f4, #31302e, #615d59, #a39e98), ніколи синьо-сірі
|
||
2. Міжлітерний інтервал масштабується з розміром шрифту: -2.125px при 64px, -1.875px при 54px, -0.625px при 26px, normal при 16px
|
||
3. Чотири насиченості: 400 (читання), 500 (взаємодія), 600 (акцент), 700 (оголошення)
|
||
4. Межі — це шепіт: 1px solid rgba(0,0,0,0.1) -- ніколи важчі
|
||
5. Тіні використовують 4-5 шарів з індивідуальною непрозорістю, що ніколи не перевищує 0.05
|
||
6. Тло секцій у теплому білому (#f6f5f4) є важливим для візуального ритму
|
||
7. Значки-пігулки (9999px) для стану/тегів, радіус 4px для кнопок і полів введення
|
||
8. Notion Blue (#0075de) — єдиний насичений колір у базовому UI -- використовуй його помірно для CTA та посилань
|