④段整套同步（六节 ＋ 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。

open-design/design-systems/stripe/DESIGN-uk.md

@@ -0,0 +1,325 @@
+# Дизайн-система натхнена Stripe
+
+> Category: Fintech & Crypto
+> Платіжна інфраструктура. Фірмові фіолетові градієнти, елегантність weight-300.
+
+## 1. Візуальна тема та атмосфера
+
+Вебсайт Stripe — золотий стандарт дизайну у fintech: система, якій вдається водночас відчуватися технічною і розкішною, точною і теплою. Сторінка відкривається на чистому білому полотні (`#ffffff`) з глибокими темно-синіми заголовками (`#061b31`) і фірмовим фіолетовим (`#533afd`), що виконує роль і якоря бренду, і інтерактивного акценту. Це не холодний, клінічний фіолетовий корпоративного ПЗ — це насичений, глибокий ультрафіолет, що читається як впевнений і преміальний. Загальне враження — як фінансова установа, переосмислена першокласною шрифтовою компанією.
+
+Кастомний змінний шрифт `sohne-var` — визначальний елемент візуальної ідентичності Stripe. Кожен текстовий елемент активує стилістичний набір OpenType `"ss01"`, який модифікує форми символів, надаючи їм виразно геометричного, сучасного вигляду. На дисплейних розмірах (48px–56px) sohne-var використовує weight 300 — надзвичайно легке насичення для заголовків, що створює ефірний, майже пошепки вимовлений авторитет. Це протилежність конвенції «жирного героїчного заголовку»; заголовки Stripe відчуваються так, ніби їм не потрібно кричати. Від'ємний міжлітерний інтервал (–1,4px при 56px, –0,96px при 48px) стискає текст у щільні, виважені блоки. На менших розмірах система також використовує weight 300 з пропорційно зменшеним трекінгом, а також табличні цифри через `"tnum"` для відображення фінансових даних.
+
+Справжня відмінність Stripe — у системі тіней. Замість плоского або одношарового підходу більшості сайтів, Stripe використовує багатошарові, блакитнуваті тіні: фірмова комбінація `rgba(50,50,93,0.25)` з `rgba(0,0,0,0.1)` створює тіні з холодною, майже атмосферною глибиною — наче елементи ширяють у сутінковому небі. Блакитно-сірий відтінок основного кольору тіні (50,50,93) безпосередньо пов'язаний з темно-синьо-фіолетовою палітрою бренду, роблячи навіть висоту підйому елементів органічно брендованою.
+
+**Ключові характеристики:**
+- sohne-var з OpenType `"ss01"` на всіх текстах — кастомний стилістичний набір, що визначає літерні форми бренду
+- Weight 300 як фірмове насичення заголовків — легке, впевнене, антиконвенційне
+- Від'ємний міжлітерний інтервал на дисплейних розмірах (–1,4px при 56px, з поступовим розслабленням до менших розмірів)
+- Блакитнуваті багатошарові тіні через `rgba(50,50,93,0.25)` — підйом, що відчувається брендованим
+- Темно-сині (`#061b31`) заголовки замість чорних — теплі, преміальні, фінансового класу
+- Консервативні rounded corner (4px–8px) — нічого таблетоподібного, нічого різкого
+- Рубіновий (`#ea2261`) і пурпуровий (`#f96bee`) акценти для градієнтів і декоративних елементів
+- `SourceCodePro` як моноширинний шрифт-компаньйон для коду та технічних підписів
+
+## 2. Колірна палітра та ролі
+
+### Основні
+- **Stripe Purple** (`#533afd`): Основний колір бренду, фони CTA, текст посилань, інтерактивні виділення. Насичений синьо-фіолетовий, що стоїть в основі всієї системи.
+- **Deep Navy** (`#061b31`): `--hds-color-heading-solid`. Основний колір заголовків. Не чорний, не сірий — дуже темно-синій, що додає теплоту й глибину тексту.
+- **Pure White** (`#ffffff`): Фон сторінки, поверхні карток, текст кнопок на темних фонах.
+
+### Брендові та темні
+- **Brand Dark** (`#1c1e54`): `--hds-color-util-brand-900`. Глибокий індиго для темних секцій, фонів підвалу і занурювальних брендових моментів.
+- **Dark Navy** (`#0d253d`): `--hds-color-core-neutral-975`. Найтемніший нейтральний — майже чорний з блакитним підтоном для максимальної глибини без різкості.
+
+### Акцентні кольори
+- **Ruby** (`#ea2261`): `--hds-color-accentColorMode-ruby-icon-solid`. Теплий червоно-рожевий для іконок, попереджень та акцентних елементів.
+- **Magenta** (`#f96bee`): `--hds-color-accentColorMode-magenta-icon-gradientMiddle`. Яскравий рожево-фіолетовий для градієнтів і декоративних виділень.
+- **Magenta Light** (`#ffd7ef`): `--hds-color-util-accent-magenta-100`. Відтінена поверхня для карток і бейджів в рожево-пурпурній темі.
+
+### Інтерактивні
+- **Primary Purple** (`#533afd`): Основний колір посилань, активні стани, виділені елементи.
+- **Purple Hover** (`#4434d4`): Темніший фіолетовий для станів наведення на основні елементи.
+- **Purple Deep** (`#2e2b8c`): `--hds-color-button-ui-iconHover`. Темно-фіолетовий для станів наведення іконок.
+- **Purple Light** (`#b9b9f9`): `--hds-color-action-bg-subduedHover`. М'який лавандовий для приглушених фонів наведення.
+- **Purple Mid** (`#665efd`): `--hds-color-input-selector-text-range`. Колір виділення range-селектора та поля введення.
+
+### Нейтральна шкала
+- **Heading** (`#061b31`): Основні заголовки, текст навігації, виразні підписи.
+- **Label** (`#273951`): `--hds-color-input-text-label`. Підписи форм, вторинні заголовки.
+- **Body** (`#64748d`): Вторинний текст, описи, підписи.
+- **Success Green** (`#15be53`): Статусні бейджі, індикатори успіху (з альфа 0,2–0,4 для фонів/рамок).
+- **Success Text** (`#108c3d`): Колір тексту бейджа успіху.
+- **Lemon** (`#9b6829`): `--hds-color-core-lemon-500`. Акцент для попереджень і виділень.
+
+### Поверхні та рамки
+- **Border Default** (`#e5edf5`): Стандартний колір рамки для карток, розділювачів та контейнерів.
+- **Border Purple** (`#b9b9f9`): Рамки активних/виділених станів кнопок та полів введення.
+- **Border Soft Purple** (`#d6d9fc`): Тонкі фіолетово-відтінені рамки для вторинних елементів.
+- **Border Magenta** (`#ffd7ef`): Рожево-відтінені рамки для елементів у пурпуровій темі.
+- **Border Dashed** (`#362baa`): Пунктирні рамки для зон перетягування та елементів-заповнювачів.
+
+### Кольори тіней
+- **Shadow Blue** (`rgba(50,50,93,0.25)`): Фірмовий — блакитнуватий основний колір тіні.
+- **Shadow Dark Blue** (`rgba(3,3,39,0.25)`): Глибша синя тінь для піднятих елементів.
+- **Shadow Black** (`rgba(0,0,0,0.1)`): Вторинний шар тіні для посилення глибини.
+- **Shadow Ambient** (`rgba(23,23,23,0.08)`): М'яка розсіяна тінь для тонкого підйому.
+- **Shadow Soft** (`rgba(23,23,23,0.06)`): Мінімальна розсіяна тінь для легкого ефекту підйому.
+
+## 3. Правила типографіки
+
+### Сімейство шрифтів
+- **Основний**: `sohne-var`, запасний: `SF Pro Display`
+- **Моноширинний**: `SourceCodePro`, запасний: `SFMono-Regular`
+- **Функції OpenType**: `"ss01"` активовано глобально на всьому тексті sohne-var; `"tnum"` для табличних чисел у фінансових даних та підписах.
+
+### Ієрархія
+
+| Роль | Шрифт | Розмір | Насичення | Висота рядка | Міжлітерний | Функції | Примітки |
+|------|------|------|--------|-------------|----------------|----------|-------|
+| Display Hero | sohne-var | 56px (3.50rem) | 300 | 1.03 (щільний) | -1.4px | ss01 | Максимальний розмір, авторитет пошепки |
+| Display Large | sohne-var | 48px (3.00rem) | 300 | 1.15 (щільний) | -0.96px | ss01 | Вторинні героїчні заголовки |
+| Section Heading | sohne-var | 32px (2.00rem) | 300 | 1.10 (щільний) | -0.64px | ss01 | Назви секцій функцій |
+| Sub-heading Large | sohne-var | 26px (1.63rem) | 300 | 1.12 (щільний) | -0.26px | ss01 | Заголовки карток, підрозділи |
+| Sub-heading | sohne-var | 22px (1.38rem) | 300 | 1.10 (щільний) | -0.22px | ss01 | Менші заголовки секцій |
+| Body Large | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | Описи функцій, вступний текст |
+| Body | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | normal | ss01 | Стандартний текст для читання |
+| Button | sohne-var | 16px (1.00rem) | 400 | 1.00 (щільний) | normal | ss01 | Текст основної кнопки |
+| Button Small | sohne-var | 14px (0.88rem) | 400 | 1.00 (щільний) | normal | ss01 | Вторинні/компактні кнопки |
+| Link | sohne-var | 14px (0.88rem) | 400 | 1.00 (щільний) | normal | ss01 | Посилання навігації |
+| Caption | sohne-var | 13px (0.81rem) | 400 | normal | normal | ss01 | Малі підписи, метадані |
+| Caption Small | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | normal | ss01 | Дрібний текст, часові мітки |
+| Caption Tabular | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | Фінансові дані, числа |
+| Micro | sohne-var | 10px (0.63rem) | 300 | 1.15 (щільний) | 0.1px | ss01 | Крихітні підписи, мітки осей |
+| Micro Tabular | sohne-var | 10px (0.63rem) | 300 | 1.15 (щільний) | -0.3px | tnum | Дані діаграм, малі числа |
+| Nano | sohne-var | 8px (0.50rem) | 300 | 1.07 (щільний) | normal | ss01 | Найменші підписи |
+| Code Body | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (просторий) | normal | -- | Блоки коду, синтаксис |
+| Code Bold | SourceCodePro | 12px (0.75rem) | 700 | 2.00 (просторий) | normal | -- | Жирний код, ключові слова |
+| Code Label | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (просторий) | normal | uppercase | Технічні підписи |
+| Code Micro | SourceCodePro | 9px (0.56rem) | 500 | 1.00 (щільний) | normal | ss01 | Крихітні анотації коду |
+
+### Принципи
+- **Легке насичення як фірмова риса**: Weight 300 на дисплейних розмірах — найвиразніший типографічний вибір Stripe. Там де інші використовують 600–700 для привернення уваги, Stripe використовує легкість як розкіш — текст настільки впевнений, що не потребує насичення для авторитетності.
+- **ss01 скрізь**: Стилістичний набір `"ss01"` є обов'язковим. Він модифікує конкретні гліфи (імовірно, альтернативні форми `a`, `g`, `l`) для більш геометричного, сучасного вигляду всього тексту sohne-var.
+- **Два режими OpenType**: `"ss01"` для дисплейного/основного тексту, `"tnum"` для табличних цифр у фінансових даних. Вони ніколи не перетинаються — число в абзаці використовує ss01, число в таблиці даних — tnum.
+- **Прогресивний трекінг**: Міжлітерний інтервал пропорційно стискається із збільшенням розміру: –1,4px при 56px, –0,96px при 48px, –0,64px при 32px, –0,26px при 26px, normal при 16px і нижче.
+- **Простота двох насичень**: Переважно 300 (основний текст і заголовки) і 400 (UI/кнопки). Жирний (700) у основному шрифті не застосовується — SourceCodePro використовує 500/700 для контрасту в коді.
+
+## 4. Стилі компонентів
+
+### Кнопки
+
+**Primary Purple**
+- Фон: `#533afd`
+- Текст: `#ffffff`
+- Відступи: 8px 16px
+- Радіус: 4px
+- Шрифт: 16px sohne-var насичення 400, `"ss01"`
+- Наведення: фон `#4434d4`
+- Використання: основні CTA («Start now», «Contact sales»)
+
+**Ghost / Outlined**
+- Фон: прозорий
+- Текст: `#533afd`
+- Відступи: 8px 16px
+- Радіус: 4px
+- Рамка: `1px solid #b9b9f9`
+- Шрифт: 16px sohne-var насичення 400, `"ss01"`
+- Наведення: фон змінюється на `rgba(83,58,253,0.05)`
+- Використання: вторинні дії
+
+**Transparent Info**
+- Фон: прозорий
+- Текст: `#2874ad`
+- Відступи: 8px 16px
+- Радіус: 4px
+- Рамка: `1px solid rgba(43,145,223,0.2)`
+- Використання: третинні/інформаційні дії
+
+**Neutral Ghost**
+- Фон: прозорий (`rgba(255,255,255,0)`)
+- Текст: `rgba(16,16,16,0.3)`
+- Відступи: 8px 16px
+- Радіус: 4px
+- Обведення: `1px solid rgb(212,222,233)`
+- Використання: відключені або приглушені дії
+
+### Картки та контейнери
+- Фон: `#ffffff`
+- Рамка: `1px solid #e5edf5` (стандартна) або `1px solid #061b31` (темний акцент)
+- Радіус: 4px (щільний), 5px (стандартний), 6px (комфортний), 8px (виділений)
+- Тінь (стандартна): `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`
+- Тінь (розсіяна): `rgba(23,23,23,0.08) 0px 15px 35px 0px`
+- Наведення: тінь посилюється, часто додається блакитнуватий шар
+
+### Бейджі / Теги / Пілюлі
+**Neutral Pill**
+- Фон: `#ffffff`
+- Текст: `#000000`
+- Відступи: 0px 6px
+- Радіус: 4px
+- Рамка: `1px solid #f6f9fc`
+- Шрифт: 11px насичення 400
+
+**Success Badge**
+- Фон: `rgba(21,190,83,0.2)`
+- Текст: `#108c3d`
+- Відступи: 1px 6px
+- Радіус: 4px
+- Рамка: `1px solid rgba(21,190,83,0.4)`
+- Шрифт: 10px насичення 300
+
+### Поля введення та форми
+- Рамка: `1px solid #e5edf5`
+- Радіус: 4px
+- Фокус: `1px solid #533afd` або фіолетовий кільцевий контур
+- Підпис: `#273951`, 14px sohne-var
+- Текст: `#061b31`
+- Плейсхолдер: `#64748d`
+
+### Навігація
+- Чиста горизонтальна навігація на білому, фіксована з розмитим фоном
+- Логотип бренду вирівняний по лівому краю
+- Посилання: sohne-var 14px насичення 400, текст `#061b31` з `"ss01"`
+- Радіус: 6px на контейнері навігації
+- CTA: фіолетова кнопка вирівняна по правому краю («Sign in», «Start now»)
+- Мобільний: перемикач-гамбургер з радіусом 6px
+
+### Декоративні елементи
+**Пунктирні рамки**
+- `1px dashed #362baa` (фіолетовий) для зон-заповнювачів і перетягування
+- `1px dashed #ffd7ef` (рожевий) для декоративних рамок у пурпуровій темі
+
+**Градієнтні акценти**
+- Градієнти від рубінового до пурпурного (`#ea2261` до `#f96bee`) для героїчних декорацій
+- Темні секції бренду використовують фони `#1c1e54` з білим текстом
+
+## 5. Принципи макету
+
+### Система відступів
+- Базова одиниця: 8px
+- Шкала: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
+- Примітно: шкала щільна на малих значеннях (кожні 2px від 4 до 12), що відображає орієнтований на точність UI Stripe для фінансових даних
+
+### Сітка та контейнер
+- Максимальна ширина вмісту: приблизно 1080px
+- Герой: центрована одна колонка з щедрими відступами, легкі заголовки
+- Секції функцій: сітки з 2–3 колонок для карток функцій
+- Повноширинні темні секції з фоном `#1c1e54` для занурення в бренд
+- Попередній перегляд коду/панелі у вигляді обмежених карток з блакитнуватими тінями
+
+### Філософія порожнього простору
+- **Точні відступи**: На відміну від безмежної порожнечі мінімалістичних систем, Stripe використовує виважений, цілеспрямований порожній простір. Кожен проміжок — навмисний типографічний вибір.
+- **Щільні дані, просторий хром**: Фінансові відображення даних (таблиці, діаграми) щільно упаковані, але UI-хром навколо них — щедро розставлений. Це створює відчуття контрольованої щільності — як добре організована таблиця у красивій рамці.
+- **Ритм секцій**: Білі секції чергуються з темними брендовими секціями (`#1c1e54`), створюючи драматичний світло/темний каданс, що запобігає одноманітності без введення довільних кольорів.
+
+### Шкала радіусів заокруглень
+- Мікро (1px): дрібнозернисті елементи, тонке заокруглення
+- Стандартний (4px): кнопки, поля введення, бейджі, картки — основний робочий кінь
+- Комфортний (5px): стандартні контейнери карток
+- Розслаблений (6px): навігація, більші інтерактивні елементи
+- Великий (8px): виділені картки, героїчні елементи
+- Складений: `0px 0px 6px 6px` для контейнерів із заокругленням знизу (панелі вкладок, підвали випадаючих меню)
+
+## 6. Глибина та підйом
+
+| Рівень | Обробка | Використання |
+|-------|-----------|-----|
+| Flat (Рівень 0) | Без тіні | Фон сторінки, вбудований текст |
+| Ambient (Рівень 1) | `rgba(23,23,23,0.06) 0px 3px 6px` | Тонкий підйом картки, натяки наведення |
+| Standard (Рівень 2) | `rgba(23,23,23,0.08) 0px 15px 35px` | Стандартні картки, панелі вмісту |
+| Elevated (Рівень 3) | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | Виділені картки, випадаючі меню, поповери |
+| Deep (Рівень 4) | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | Модальні вікна, плаваючі панелі |
+| Ring (Доступність) | `2px solid #533afd` outline | Кільце фокусу клавіатури |
+
+**Філософія тіней**: Система тіней Stripe побудована на принципі хроматичної глибини. Там де більшість дизайн-систем використовують нейтрально-сірі або чорні тіні, основний колір тіні Stripe (`rgba(50,50,93,0.25)`) — глибокий синьо-сірий, що перегукується з темно-синьою палітрою бренду. Це створює тіні, що не просто додають глибину — вони додають атмосферу бренду. Багатошаровий підхід поєднує цю блакитнувату тінь з чисто чорним вторинним шаром (`rgba(0,0,0,0.1)`) при різному зміщенні, створюючи паралакс-подібну глибину, де брендована тінь розташована далі від елемента, а нейтральна — ближче. Від'ємні значення розповсюдження (–30px, –18px) забезпечують те, що тіні не виходять за горизонтальні межі елемента, залишаючи підйом вертикальним і контрольованим.
+
+### Декоративна глибина
+- Темні брендові секції (`#1c1e54`) створюють занурювальну глибину через контраст фонового кольору
+- Градієнтні нашарування з переходом від рубінового до пурпурного для героїчних декорацій
+- Колір тіні `rgba(0,55,112,0.08)` (`--hds-color-shadow-sm-top`) для тіней верхнього краю на фіксованих елементах
+
+## 7. Що робити і чого уникати
+
+### Робіть
+- Використовуйте sohne-var з `"ss01"` на кожному текстовому елементі — стилістичний набір І Є брендом
+- Використовуйте weight 300 для всіх заголовків і основного тексту — легкість є фірмовою рисою
+- Застосовуйте блакитнуваті тіні (`rgba(50,50,93,0.25)`) для всіх піднятих елементів
+- Використовуйте `#061b31` (темно-синій) для заголовків замість `#000000` — теплота важлива
+- Тримайте радіус рамки між 4px–8px — консервативне заокруглення є навмисним
+- Використовуйте `"tnum"` для будь-якого табличного/фінансового відображення чисел
+- Нашаровуйте тіні: блакитнувата далека + нейтральна близька для паралаксу глибини
+- Використовуйте фіолетовий `#533afd` як основний інтерактивний/CTA колір
+
+### Не робіть
+- Не використовуйте насичення 600–700 для заголовків sohne-var — weight 300 є голосом бренду
+- Не використовуйте великий радіус рамки (12px+, таблетоподібні форми) на картках або кнопках — Stripe консервативний
+- Не використовуйте нейтрально-сірі тіні — завжди додавайте синій відтінок (`rgba(50,50,93,...)`)
+- Не пропускайте `"ss01"` на жодному тексті sohne-var — альтернативні гліфи визначають особистість
+- Не використовуйте чистий чорний (`#000000`) для заголовків — завжди `#061b31` темно-синій
+- Не використовуйте теплі акцентні кольори (помаранчевий, жовтий) для інтерактивних елементів — фіолетовий є основним
+- Не застосовуйте позитивний міжлітерний інтервал на дисплейних розмірах — Stripe трекінгує щільно
+- Не використовуйте акценти пурпурового/рубінового для кнопок або посилань — вони лише для декорацій/градієнтів
+
+## 8. Адаптивна поведінка
+
+### Точки зупину
+| Назва | Ширина | Ключові зміни |
+|------|-------|-------------|
+| Mobile | <640px | Одна колонка, зменшені розміри заголовків, складені картки |
+| Tablet | 640-1024px | Двоколонні сітки, помірні відступи |
+| Desktop | 1024-1280px | Повний макет, трьохколонні сітки функцій |
+| Large Desktop | >1280px | Центрований вміст з щедрими полями |
+
+### Цільові зони торкання
+- Кнопки використовують комфортні відступи (8px–16px вертикально)
+- Посилання навігації розміром 14px з достатніми відступами
+- Бейджі мають мінімум 6px горизонтального відступу для зон торкання
+- Кнопка перемикача мобільної навігації з радіусом 6px
+
+### Стратегія згортання
+- Герой: 56px дисплей → 32px на мобільному, насичення 300 зберігається
+- Навігація: горизонтальні посилання + CTA → перемикач-гамбургер
+- Картки функцій: 3 колонки → 2 колонки → одна складена колонка
+- Темні брендові секції: зберігають повноширинне оформлення, зменшують внутрішні відступи
+- Таблиці фінансових даних: горизонтальна прокрутка на мобільному
+- Відступи секцій: 64px+ → 40px на мобільному
+- Типографічна шкала стискається: 56px → 48px → 32px розміри героїв по точках зупину
+
+### Поведінка зображень
+- Знімки екрана панелі/продукту зберігають блакитнувату тінь на всіх розмірах
+- Героїчні градієнтні декорації спрощуються на мобільному
+- Блоки коду зберігають оформлення `SourceCodePro`, можуть горизонтально прокручуватися
+- Зображення карток зберігають послідовний радіус рамки 4px–6px
+
+## 9. Посібник із запитів для агентів
+
+### Швидкий довідник кольорів
+- Основний CTA: Stripe Purple (`#533afd`)
+- Наведення CTA: Purple Dark (`#4434d4`)
+- Фон: Pure White (`#ffffff`)
+- Текст заголовків: Deep Navy (`#061b31`)
+- Основний текст: Slate (`#64748d`)
+- Текст підписів: Dark Slate (`#273951`)
+- Рамка: Soft Blue (`#e5edf5`)
+- Посилання: Stripe Purple (`#533afd`)
+- Темна секція: Brand Dark (`#1c1e54`)
+- Успіх: Green (`#15be53`)
+- Декоративні акценти: Ruby (`#ea2261`), Magenta (`#f96bee`)
+
+### Приклади запитів для компонентів
+- «Створи героїчну секцію на білому фоні. Заголовок 48px sohne-var насичення 300, line-height 1.15, letter-spacing -0.96px, колір #061b31, font-feature-settings 'ss01'. Підзаголовок 18px насичення 300, line-height 1.40, колір #64748d. Фіолетова кнопка CTA (#533afd, радіус 4px, відступи 8px 16px, білий текст) і ghost-кнопка (прозора, 1px solid #b9b9f9, текст #533afd, радіус 4px).»
+- «Спроєктуй картку: білий фон, рамка 1px solid #e5edf5, радіус 6px. Тінь: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Назва 22px sohne-var насичення 300, letter-spacing -0.22px, колір #061b31, 'ss01'. Основний текст 16px насичення 300, #64748d.»
+- «Створи бейдж успіху: фон rgba(21,190,83,0.2), текст #108c3d, радіус 4px, відступи 1px 6px, 10px sohne-var насичення 300, рамка 1px solid rgba(21,190,83,0.4).»
+- «Створи навігацію: білий фіксований заголовок з backdrop-filter blur(12px). sohne-var 14px насичення 400 для посилань, текст #061b31, 'ss01'. Фіолетовий CTA 'Start now' вирівняний по правому краю (фон #533afd, білий текст, радіус 4px). Контейнер навігації радіус 6px.»
+- «Спроєктуй темну брендову секцію: фон #1c1e54, білий текст. Заголовок 32px sohne-var насичення 300, letter-spacing -0.64px, 'ss01'. Основний текст 16px насичення 300, rgba(255,255,255,0.7). Картки всередині використовують рамку rgba(255,255,255,0.1) з радіусом 6px.»
+
+### Посібник з ітерацій
+1. Завжди активуйте `font-feature-settings: "ss01"` на тексті sohne-var — це типографічна ДНК бренду
+2. Weight 300 є стандартним; використовуйте 400 лише для кнопок/посилань/навігації
+3. Формула тіні: `rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2`, де Y1/B1 більші (далека тінь), а Y2/B2 менші (близька тінь)
+4. Колір заголовків — `#061b31` (темно-синій), основного тексту — `#64748d` (сланцевий), підписів — `#273951` (темний сланець)
+5. Радіус рамки залишається в діапазоні 4px–8px — ніколи не використовуйте таблетоподібні форми або велике заокруглення
+6. Використовуйте `"tnum"` для будь-яких чисел у таблицях, діаграмах або фінансових відображеннях
+7. Темні секції використовують `#1c1e54` — не чорний, не сірий, а глибокий брендований індиго
+8. SourceCodePro для коду розміром 12px/500 з висотою рядка 2.00 (дуже просторо для читабельності)