④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 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。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,312 @@
+# Дизайн-система, натхненна 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 та посилань