④段整套同步（六节＋ 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,393 @@
+# Design System Inspired by Airbnb
+
+> Category: Електронна комерція та роздрібна торгівля
+> Торговий майданчик для подорожей. Тепло-кораловий акцент, заснований на фотографії, закруглений інтерфейс.
+
+## 1. Візуальна тема та атмосфера
+
+Дизайн Airbnb 2026 року нагадує туристичний журнал, який виявився додатком — бездоганно білі полотна поступаються місцем повноекранній фотографії, а сам інтерфейс зникає, щоб оголошення могли дихати. Характерний корало-рожевий Rausch (`#ff385c`) використовується скупо, але безпомилково впізнавано: CTA пошуку, індикатор активної вкладки, кнопка основної дії, іноді ціна або значок серця в списку бажань. Все інше — дисциплінована шкала сірого, де `#222222` несе майже кожен рядок тексту.
+
+Те, що робить систему безсумнівно Airbnb, — це наскільки велику *довіру* вона виявляє до контенту. Фотографії нерухомості відображаються в масштабі hero, 4:3 з обробкою радіуса від краю до краю. Перемикання категорій відбувається через тривкладковий селектор (Будинки / Враження / Послуги), який використовує 3D-рендеровані ілюстровані значки (будинок з двосхилим дахом, повітряна куля, дзвінок обслуговування) — фізичні, тактильні, майже іграшкові — у поєднанні з чіткими мітками `Airbnb Cereal VF`. Це рідкісний споживчий продукт, де 3D-рендери і суто типографічний інтерфейс співіснують без напруги.
+
+Найновіша поверхня — лінійка продуктів **Враження** — той самий хром, але насиченіша щільність карток, більше фотографій і панель бронювання з центральним прив'язуванням і фіксованою ціною на правій рейці. Сторінки деталей оголошень (як кімнати, так і враження) дотримуються чіткого шаблону: повноекранна сітка зображень hero → перекрита закруглена карточка бронювання (фіксована при прокручуванні) → зручності → відгуки (нагороди «Улюблене серед гостей» використовують великий центрований рейтинг `4.81` з компонуванням лаврового вінка) → карта → профіль господаря → розкриття інформації. Ритм однаковий, незалежно від того, чи бронюєте ви кімнату або яхт-тур.
+
+**Ключові характеристики:**
+- Корало-рожевий Rausch (`#ff385c`) як єдиний акцентний колір бренду, використовується тільки для основних CTA і кнопки пошуку
+- Повноекранна фотографія 4:3 / 16:9 з м'яким заокругленням кутів (14–20 px) як основний візуальний словник
+- 3D-рендеровані значки категорій у поєднанні з типографічними вкладками — єдине місце, де система допускає ілюстрацію
+- Кругові кнопки-значки `50%` (стрілка назад, поширити, обране, стрілки каруселі) розподілені по всьому інтерфейсу
+- `Airbnb Cereal VF` несе кожну мітку, від 8 px юридичної виноски до 28 px заголовка розділу — система однієї сім'ї
+- Колірне кодування рівня продукту: Airbnb Plus (пурпур `#92174d`), Airbnb Luxe (темно-фіолетовий `#460479`), Airbnb (корал Rausch)
+- Компонування нагороди «Улюблене серед гостей» — велике центроване число рейтингу між двома лавровими вінками, один із найвпізнаваніших моментів системи
+- Фіксована панель бронювання зі стеком ціна → дати → гості, прикріплена до правої рейки на десктопі, перетворюється на нижню закріплену панель «Забронювати» на мобільному
+- Фіксована нижня мобільна навігація (Огляд / Списки бажань / Увійти) з відтінком Rausch для активного стану
+
+## 2. Палітра кольорів та ролі
+
+### Основний
+- **Rausch** (`#ff385c`): Характерний корало-рожевий бренду. CSS-змінна `--palette-bg-primary-core`. Використовується для: основна кнопка «Забронювати», кнопка подання пошуку, підкреслення активної вкладки, заповнення серця списку бажань, акцент на ціні. Колір з найвищою видимістю на кожній сторінці.
+
+### Вторинний та акцентний
+- **Deep Rausch** (`#e00b41`): Більш насичений варіант. CSS-змінна `--palette-bg-tertiary-core`. Використовується для натиснутих/активних станів кнопок і кінцевих точок градієнта.
+- **Plus Magenta** (`#92174d`): CSS-змінна `--palette-bg-primary-plus`. Колір бренду для рівня продукту Airbnb Plus — курований пропозиції оголошень преміум класу.
+- **Luxe Purple** (`#460479`): CSS-змінна `--palette-bg-primary-luxe`. Колір бренду для рівня продукту Airbnb Luxe — оренда вілл/маєтків.
+- **Info Blue** (`#428bff`): CSS-змінна `--palette-text-legal`. Використовується для юридичних/інформаційних посилань (умови, конфіденційність, розкриття інформації) — єдиний не монохромний колір посилань у системі.
+
+### Поверхня та фон
+- **Canvas White** (`#ffffff`): Стандартний фон сторінки. Кожна картка, кожен контейнер, кожна сторінка деталей починається тут.
+- **Soft Cloud** (`#f7f7f7`): Ледь помітний відтінок підповерхні, що використовується на фонах нижнього колонтитула, обгортках перегляду карти і «всьому іншому» в розділах, які хочуть відступити від основного білого.
+- **Hairline Gray** (`#dddddd`): Повсюдний колір рамки 1 px — відокремлює картки, рядки зручностей, панелі відгуків, стовпці нижнього колонтитула. Робоча конячина системи компонування.
+
+### Нейтральні та текст
+- **Ink Black** (`#222222`): CSS-змінна `--palette-text-primary`. Майже чорний системи. Кожен заголовок, кожен абзац тексту, кожна мітка навігації, кожна ціна. Використовується для ~90% всього тексту на сторінці.
+- **Charcoal** (`#3f3f3f`): CSS-змінна `--palette-text-focused`. Використовується у тексті введення у фокусованому стані та тексті акцентування на рівень нижче.
+- **Ash Gray** (`#6a6a6a`): CSS-змінна `--palette-bg-tertiary-hover`. Вторинні мітки, текст у стилі субтитрів «Оренда котеджів» під назвами міст, приглушені посилання нижнього колонтитула.
+- **Mute Gray** (`#929292`): CSS-змінна `--palette-text-link-disabled`. Відключені кнопки та метадані низького пріоритету.
+- **Stone Gray** (`#c1c1c1`): Третинні роздільники, штрихи значків, заповнювачі аватарів.
+
+### Семантичний та акцентний
+- **Error Red** (`#c13515`): CSS-змінна `--palette-text-primary-error`. Помилки перевірки форми, попередження про деструктивні дії.
+- **Deep Error** (`#b32505`): CSS-змінна `--palette-text-secondary-error-hover`. Натиснуті/активні варіанти станів помилки.
+- **Translucent Black** (`rgba(0, 0, 0, 0.24)`): CSS-змінна `--palette-text-material-disabled`. Відключені мітки в стилі матеріалу.
+
+### Система градієнтів
+Фірмовий градієнт Airbnb з'являється скупо, зазвичай тільки на словесному знаку і в момент фірмової кнопки пошуку:
+
+```
+linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)
+```
+
+Цей перехід коралово-рожевого → пурпурного — «фірмовий момент» — ніколи не використовується як повна поверхня, тільки як вузьке заповнення таблетки або обробка логотипу.
+
+## 3. Правила типографіки
+
+### Шрифтова сім'я
+- **Airbnb Cereal VF** (основний і єдиний): Власний змінновагаговий безсерифний шрифт, що несе всю систему. Запасні варіанти (за порядком): `Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif`.
+
+Спостережувані ваги у витягнутих токенах: 500, 600, 700. Немає 400-regular — «тілова» вага системи — 500, що надає кожному текстовому блоку ледь помітну додаткову щільність, яка читається як впевнена та навмисна.
+
+OpenType-функції: `salt` (стилістичні альтернативи) використовується на компактних мітках 11 px і 14 px з вагою 600 — ймовірно, для більш щільних цифр і формування спеціальних символів. Функцій лігатур або дробових цифр не спостерігається.
+
+### Ієрархія
+
+| Роль | Розмір | Вага | Висота рядка | Міжлітерний відступ | Примітки |
+|------|------|--------|-------------|----------------|-------|
+| Заголовок розділу | 28 px / 1,75 rem | 700 | 1,43 | 0 | «Натхнення для майбутніх поїздок» — заголовки рівня сторінки |
+| Заголовок підрозділу | 22 px / 1,38 rem | 500 | 1,18 | -0,44 px | «Що пропонує це місце», «Познайомтеся з господарями» — розділювачі контенту |
+| Заголовок картки | 21 px / 1,31 rem | 700 | 1,43 | 0 | Заголовки панелі відгуків, провідні заголовки карток |
+| Назва оголошення | 20 px / 1,25 rem | 600 | 1,20 | -0,18 px | «Яхт-тур для малої групи, необмежене вино та фрукти» — заголовки оголошень на сторінках деталей |
+| Підзаголовок жирний | 16 px / 1,00 rem | 600 | 1,25 | 0 | Ім'я господаря, назва міста |
+| Основний текст середній | 16 px / 1,00 rem | 500 | 1,25 | 0 | Основний текст на сторінках деталей |
+| Кнопка велика | 16 px / 1,00 rem | 500 | 1,25 | 0 | «Забронювати», «Стати господарем» |
+| Кнопка за замовчуванням | 14 px / 0,88 rem | 500 | 1,29 | 0 | Стандартні мітки кнопок |
+| Посилання | 14 px / 0,88 rem | 500 | 1,43 | 0 | Посилання навігації, посилання нижнього колонтитула |
+| Підпис середній | 14 px / 0,88 rem | 500 | 1,29 | 0 | Метадані, рядки підзаголовків («Оренда котеджів», «Оренда вілл») |
+| Підпис жирний | 14 px / 0,88 rem | 600 | 1,43 | 0 | Функція `salt` увімкнена — числова статистика, акцент малого тексту |
+| Підпис малий | 13 px / 0,81 rem | 400 | 1,23 | 0 | Дати відгуків, мікро-метадані |
+| Мікро за замовчуванням | 12 px / 0,75 rem | 400 | 1,33 | 0 | Застереження нижнього колонтитула, юридичний мікротекст |
+| Мікро жирний | 12 px / 0,75 rem | 700 | 1,33 | 0 | Мітки таблетки «НОВЕ» |
+| Значок верхнього регістру | 11 px / 0,69 rem | 600 | 1,18 | 0 | Функція `salt` — компактні значки категорій/статусів |
+| Верхній індекс | 8 px / 0,50 rem | 700 | 1,25 | 0,32 px | Верхній регістр — виноски цін, десяткові хвости |
+
+### Принципи
+- **Одна сім'я, багато ваг.** Airbnb Cereal VF обробляє все від юридичного тексту 8 px до заголовків сторінок 28 px — візуальна ідентичність виходить із самої сім'ї, а не з мікшування шрифтів.
+- **500 — це новий 400.** «Звичайна» вага системи — 500, що надає кожному абзацу дещо впевненішу текстуру, ніж веб-стандарт.
+- **Негативне трекінг тільки для display-типу.** Заголовки від 20 px і більше стискають трекінг на -0,18 до -0,44 px для відчуття вирізьбленості; розміри основного тексту залишаються на 0 трекінгу для читабельності.
+- **Щільні міжрядкові інтервали для заголовків, вільні для тексту.** Display-типи працюють при 1,18–1,25 (щільно); основний текст і підписи відкриваються до 1,43 для комфорту у довгому форматі.
+- **Без усіх великих літер, крім 8 px.** Єдине перетворення великих літер у системі — верхній індекс 8 px — скрізь в іншому місці регістр речення з тонкими змінами ваги робить свою роботу.
+
+### Примітка щодо замінників шрифтів
+Airbnb Cereal VF є власністю. Найближчим замінником з відкритим вихідним кодом є **Circular Std** (все ще комерційний) або **Inter** (безкоштовний, Google Fonts) зі зменшенням міжлітерного відступу на -0,01em при розмірах дисплея. Для суворої відданості бренду задокументований запасний ланцюг (`Circular, -apple-system, system-ui`) відображається прийнятно на macOS/iOS, де `system-ui` перетворюється на San Francisco, який має подібні пропорції.
+
+## 4. Стилі компонентів
+
+### Кнопки
+
+**Основний CTA** («Забронювати», «Пошук», «Додати дати»)
+- Фон: Rausch `#ff385c`
+- Текст: Canvas White `#ffffff`, Airbnb Cereal 500, 16 px
+- Відступ: ~14 px вертикальний, 24 px горизонтальний
+- Радіус: 8 px (прямокутна) або 50% (кругла варіант значка)
+- Рамка: відсутня
+- Активний/натиснутий: `transform: scale(0.92)` плюс кільце фокусу 2 px `#222222` при `0 0 0 2px`
+
+**Вторинна кнопка** («Стати господарем», обведені третинні дії)
+- Фон: `#ffffff`
+- Текст: Ink Black `#222222`, Airbnb Cereal 500, 14–16 px
+- Відступ: 10 px 16 px
+- Радіус: 20 px (таблетка) або 8 px (прямокутна)
+- Рамка: 1 px solid Hairline Gray `#dddddd`
+
+**Кругла кнопка тільки зі значком** (стрілка назад, поширити, обране, елементи керування каруселлю)
+- Фон: `#f2f2f2` (злегка не зовсім білий) або білий з прозорою чорною рамкою 1 px
+- Значок: контурний штрих `#222222`, 16–20 px
+- Розмір: діаметр 32–44 px
+- Радіус: 50%
+- Активний/натиснутий: `transform: scale(0.92)`; тонке біле кільце 4 px `0 0 0 4px rgb(255,255,255)` для відокремлення від кольорових фотографічних фонів
+
+**Відключена кнопка**
+- Фон: `#f2f2f2`
+- Текст: Stone Gray `#c1c1c1`
+- Непрозорість: 0,5
+
+**Кнопка вкладки-таблетки** (селектор категорій «Будинки / Враження / Послуги»)
+- Фон: прозорий
+- Текст: Ink Black `#222222`, Airbnb Cereal 500, 16 px
+- Відступ: 8 px 14 px
+- Активний стан: підкреслення Ink Black 2 px під міткою
+- У парі з 3D-рендерованим ілюстрованим значком 36–48 px над міткою
+
+### Картки та контейнери
+
+**Картка оголошення** (сітка головної сторінки, результати пошуку)
+- Фон: `#ffffff`
+- Радіус: 14 px на зображенні, текст знаходиться безпосередньо під ним на прозорому фоні
+- Зображення: співвідношення сторін 4:3, на весь екран, заокруглене з тим самим радіусом 14 px
+- Відступ: відсутній на зовнішньому контейнері; 12 px відступ між зображенням і рядками метаданих
+- Тінь: відсутня — відокремлення забезпечується пробілом і власним радіусом фотографії
+- Шаблон метаданих: Місто/регіон у рядку 1 (16 px 600), відстань/тривалість у рядку 2 (14 px 500 Ash Gray), діапазон дат у рядку 3, рядок ціни з «за ніч» знизу
+
+**Панель бронювання сторінки деталей** (фіксована права рейка на сторінках кімнати/враження)
+- Фон: `#ffffff`
+- Радіус: 14–20 px
+- Рамка: 1 px solid Hairline Gray `#dddddd`
+- Тінь: `rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0` — укладене триша рове тонке підняття
+- Відступ: 24 px
+- Ширина: ~370 px, закріплена 120–140 px нижче верхньої частини в'юпорту
+- Вміст: заголовок ціни → вибір дати → спадне меню гостей → основний CTA → виноска «Оплата ще не буде здійснена»
+
+**Картка сітки зручностей** (на сторінках деталей оголошень)
+- Фон: `#ffffff`
+- Рамка: 1 px solid Hairline Gray `#dddddd` на рівні рядка (не на елемент)
+- Відступ: 16 px вертикальний на рядок зручності
+- Шаблон значка + мітки: контурний значок 24 px ліворуч, мітка вагою 500 16 px праворуч
+
+**Картка відгуку** (окремий відгук на сторінках деталей)
+- Фон: `#ffffff`, рамки немає
+- Відступ: 0 (спирається на відступи сітки)
+- Вміст: круглий аватар 40 px + ім'я вагою 600 16 px + дата Ash Gray 400 14 px в одному рядку, потім абзац основного тексту вагою 500 14 px нижче
+
+### Поля введення та форми
+
+**Рядок пошуку** (основна головна сторінка)
+- Фон: `#ffffff`
+- Рамка: 1 px solid Hairline Gray `#dddddd`, що охоплює всі три сегменти (Де / Коли / Хто)
+- Радіус: 32 px (повна таблетка)
+- Тінь: `rgba(0, 0, 0, 0.04) 0 2px 6px 0` — тонке відчуття ширяння
+- Структура: три сегменти, розділені тонкими вертикальними роздільниками, кожен сегмент має мітку вагою 500 12 px над заповнювачем вагою 500 14 px
+- Надіслати: кругова кнопка зі значком Rausch на правому краї, діаметр 48 px
+
+**Текстове поле** (загальні форми)
+- Фон: `#ffffff`
+- Рамка: 1 px solid Hairline Gray `#dddddd`
+- Радіус: 8 px
+- Відступ: 14 px 16 px
+- Фокус: рамка перемикається на Ink Black, додається зовнішнє чорне кільце `0 0 0 2px`
+- Помилка: рамка перемикається на `#c13515` (Error Red), допоміжний текст використовує той самий колір
+
+**Вибір дати**
+- Сітка календаря: 7-стовпчикове компонування, кругові комірки днів `50%` шириною 40–44 px
+- Вибраний діапазон: фон Ink Black `#222222` з білими цифрами
+- Якорі початку/кінця: більші заповнені кола; середні дати використовують відтінок Soft Cloud `#f7f7f7`
+
+### Навігація
+
+**Верхня навігація (Десктоп)**
+- Висота: ~80 px
+- Фон: `#ffffff`
+- Ліворуч: компонування словесного знака+логотипу Airbnb у Rausch (102×32 px)
+- По центру: тривкладковий селектор категорій (Будинки / Враження / Послуги) зі значками 3D 36–48 px, складеними над мітками вагою 500 16 px; активна вкладка має підкреслення Ink Black 2 px
+- Праворуч: текстове посилання «Стати господарем», потім кругла куля 32 px (мова), потім гамбургер-меню аватар 36 px
+- Нижня рамка: 1 px solid Hairline Gray `#dddddd`
+
+**Верхня навігація (Мобільний)**
+- Таблетка пошуку в один рядок займає всю ширину: заповнювач «Почніть пошук» з маленькою іконкою лупи
+- Нижче: тривкладковий селектор категорій зберігається (Будинки / Враження / Послуги) — ілюстровані значки зменшуються до ~28 px
+- Фіксована нижня панель вкладок: Огляд (активний стан Rausch) / Списки бажань / Увійти — значки 24 px над мітками 12 px
+
+**Вторинна навігація сторінки деталей оголошення**
+- Фіксоване горизонтальне прокручування якірних посилань (Фотографії · Зручності · Відгуки · Розташування · Господар) з'являється при прокручуванні за героїчним зображенням
+- Висота: 56 px
+- Нижня рамка: 1 px solid Hairline Gray
+
+### Обробка зображень
+
+- **Основні співвідношення сторін**: 4:3 для сіток оголошень на головній сторінці, 16:9 для героїчної фотографії вражень, 1:1 для аватарів
+- **Радіус**: 14 px на зображеннях сітки оголошень, 20 px на рамках героїчного фото сторінки деталей, `50%` на аватарах
+- **Сітка зображень на сторінках деталей**: п'ятифотографічна сітка з одним великим зображенням ліворуч (ширина 50%) і чотирма меншими фотографіями у сітці 2×2 праворуч, усі вони розміщені у зовнішньому заокругленому контейнері 20 px
+- **Відкладене завантаження**: широке використання `loading="lazy"` з розмитими зображеннями попереднього перегляду-заповнювача
+- **Карусель**: кругові кнопки стрілок 32 px перекривають зображення, вертикально центровані; крапкові індикатори розташовані на 12 px вище нижнього краю
+
+### Фірмові компоненти
+
+**Компонування нагороди «Улюблене серед гостей»** (помітно відображається на сторінках деталей оголошень з високим рейтингом)
+- Центрований номер рейтингу відображається при 44–56 px вагою 700
+- Дві намальовані вручну SVG-ілюстрації лаврового вінка облямовують ліво та право на висоті ~48 px
+- Нижче: мітка «Улюблене серед гостей» при 12 px 700 великих літерах з трекінгом `0,32 px` і короткий підпис при 14 px 500 Ash Gray
+- Блок на всю ширину, без рамки контейнера — розміщений безпосередньо на білому полотні
+
+**Тривкладковий селектор категорій** (з'являється у верхній частині кожної пошукової поверхні)
+- Три вкладки: Будинки / Враження / Послуги
+- Кожна вкладка: 3D-рендерований ілюстрований значок (~48 px висоти) над міткою вагою 500 16 px
+- Враження та Послуги наразі мають маленьку темно-синю таблетку «НОВЕ» (білий текст 12 px 700 на темно-синьому фоні), що ширяє у верхньому правому куті значка
+- Активна вкладка: підкреслення Ink Black 2 px під міткою
+
+**Сітка міст для натхнення** (головна сторінка «Натхнення для майбутніх поїздок»)
+- 6-стовпчикова сітка посилань на напрямки на десктопі, 2-стовпчикова на мобільному
+- Кожна комірка: назва міста 16 px 600 у рядку 1, субтитр типу оренди Ash Gray 500 14 px у рядку 2 («Оренда котеджів», «Оренда вілл»)
+- Без зображень — сітка тільки з текстом
+- З вкладками зверху за категорією (Популярне / Мистецтво та культура / Пляж / Гори / На відкритому повітрі / Що робити / Поради щодо подорожей та натхнення / Квартири, дружні до Airbnb) — активна вкладка має підкреслення 2 px і зміну ваги
+
+**Фіксована картка бронювання** (сторінки деталей оголошень)
+- Залишається закріпленою на 120 px нижче верхньої частини в'юпорту на десктопі, поки користувач прокручує повз hero
+- Згортається до нижньої панелі на всю ширину на мобільному з міткою «Від $X / ніч» і таблеткою Rausch «Забронювати»
+- Завжди відображає: заголовок ціни → відображення дати → вибір гостей → Rausch CTA → застереження «Оплата ще не буде здійснена»
+
+**Картка господаря враження** (сторінки деталей вражень)
+- Контейнер на всю ширину із заокругленим верхом і фотографією обкладинки 3:2
+- Аватар господаря (круглий, 56 px) перекриває нижній край обкладинки на 50%
+- Нижче перекриття: ім'я господаря при 16 px 700, стаж господаря при 14 px 500 Ash Gray, маленька кнопка-таблетка Rausch «Написати господарю»
+- Використовується як перехід між відгуками і блоком зручностей/місцезнаходження
+
+**Смуга «Що потрібно знати»** (сторінки деталей оголошень)
+- 3-стовпчикова сітка блоків правил/правил (Правила будинку, Безпека та майно, Правила скасування)
+- Кожен стовпець: значок зверху, заголовок 16 px 600, текст Ash Gray 14 px 500, посилання «Показати більше» з підкресленням Ink Black
+- Роздільник: рамки зверху та знизу 1 px Hairline Gray на всій смузі
+
+## 5. Принципи компонування
+
+### Система відступів
+- **Базова одиниця**: 8 px
+- **Витягнута шкала**: 2, 3, 4, 5,5, 6, 8, 10, 11, 12, 15, 16, 18,5, 22, 24, 32 px — дрібнозернистий з кількома нестандартними значеннями для піксельного вирівнювання значків
+- **Відступ розділу**: ~48–64 px зверху/знизу на десктопі, 24–32 px на мобільному
+- **Внутрішній відступ картки**: 24 px на панелях бронювання і великих картках, 16 px на рядках зручностей, 12 px на метаданих картки оголошення
+- **Відступ між картками оголошень**: 24 px десктоп, 16 px мобільний
+- **Між складеними рядками тексту**: 4–8 px (дуже щільно — підсилює відчуття «насиченої інформації» в оголошеннях про подорожі)
+
+### Сітка та контейнер
+- **Максимальна ширина вмісту**: 1760–1920 px на ультраширокому (Airbnb дозволяє сітці дихати далі, ніж більшість сайтів); 1280 px на більшості сторінок деталей
+- **Сітка оголошень головної сторінки**: 6 стовпців при ≥1760 px, 5 при ≥1440 px, 4 при ≥1128 px, 3 при ≥800 px, 2 при ≥550 px, 1 нижче
+- **Сторінка деталей**: асиметричний 2-стовпчиковий — основний вміст ~58%, фіксована панель бронювання ~36% праворуч, ~6% жолоб
+- **Нижній колонтитул**: 3-стовпчиковий Підтримка / Хостинг / Airbnb
+
+### Філософія пробілів
+Airbnb насичений інформацією, але ніколи не перенасичений. Пробіл використовується для *групування* — картки оголошень мають 24 px жолоб, щоб кожна фотографія читалася як окремий об'єкт, але метадані під кожною карткою використовують відступи 4–8 px, щоб ціна/місто/дата відчувалися як єдина одиниця. Панель бронювання сторінки деталей має 24 px внутрішнього відступу, але рядки в ній (вибір дати, вибір гостей, CTA) складені на 12 px — межа між карткою і сторінкою виконує більше роботи з відокремлення, ніж вміст всередині.
+
+### Шкала радіуса рамки
+| Радіус | Використання |
+|--------|-----|
+| 4 px | Вбудовані теги прив'язки, теги-чипи |
+| 8 px | Текстові кнопки, спадні меню, маленькі службові кнопки |
+| 14 px | Фотографія картки оголошення, загальні контейнери вмісту, значки |
+| 20 px | Основні закруглені кнопки (форма таблетки), великі зображення, панель бронювання |
+| 32 px | Таблетка рядка пошуку, контейнери надвеликого розміру |
+| 50% | Всі кругові кнопки зі значками, всі аватари, серця списку бажань — характерна кругла геометрія системи |
+
+## 6. Глибина та підняття
+
+| Рівень | Обробка | Використання |
+|-------|-----------|-----|
+| 0 | Тіні немає | Картки оголошень, основний вміст, текстові розділи |
+| 1 | `rgba(0, 0, 0, 0.08) 0 4px 12px` | Активні/натиснуті кнопки зі значками (наприклад, назад, поширити, обране) — тонке підняття для позначення взаємодії |
+| 2 | `rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0` | Фіксована картка панелі бронювання, модальні вікна, спадні меню — характерне трирівневе підняття системи |
+| Кільце фокусу | `0 0 0 2px #222222` | Кнопки в активному стані, сфокусоване поле введення пошуку |
+| Біле роздільне кільце | `rgb(255, 255, 255) 0 0 0 4px` | Кругові кнопки, накладені на фотографії — кільце 4 px чітко відокремлює кнопку від кольорових фотографічних фонів |
+
+Філософія тіней: Airbnb використовує **накладені багатошарові тіні** замість однієї падаючої тіні. Тришарова тінь панелі бронювання читається як одне суцільне підняття, але насправді це три окремі тіні при різних значеннях непрозорості/розмиття — що створює тонке згладжування периметра тіні, яке відчувається преміально без важкості.
+
+### Декоративна глибина
+- **Фотографія як глибина**: система значною мірою покладається на повноекранну фотографію для створення візуальної глибини; тіні та градієнти використовуються скупо, щоб фотографії виконували важку роботу
+- **Компонування лаврового вінка**: нагорода «Улюблене серед гостей» використовує дві SVG-ілюстрації лаврового вінка, які надають інакше плоскому числу рейтингу урочисту, трофейну присутність
+- **3D-рендеровані значки категорій**: значки Будинків/Вражень/Послуг мають власне м'яке внутрішнє освітлення і тонкі кинуті тіні, закладені у вигляд — єдине місце, де бренд допускає «об'ємну» ілюстрацію
+
+## 7. Можна та не можна
+
+### Можна
+- Зарезервуйте Rausch `#ff385c` для основних дій і індикатора активної вкладки — ніколи не розбавляйте декоративним використанням.
+- Дайте фотографії дихати — кадрування 4:3 із заокругленими кутами 14–20 px, без накладеного тексту, без градієнтних відбивачів.
+- Використовуйте Ink Black `#222222` для кожного текстового шару нижче Rausch — це майже чорний системи, ніколи справжній `#000000`.
+- Поєднуйте 3D ілюстровані значки тривкладкового селектора категорій з плоскою типографікою — не змішуйте стилі ілюстрацій в межах однієї поверхні.
+- Складіть три тіні з низькою непрозорістю (~2%, 4%, 10%) для створення характерного підняття панелі бронювання.
+- Використовуйте рамки Hairline Gray `#dddddd` 1 px для кожного роздільника картка-до-картки і рядок-до-рядка.
+- Розглядайте панель бронювання як фіксовану на десктопі, що згортається в нижню закріплену панель резервування на мобільному.
+- Використовуйте відступ 4–8 px всередині груп метаданих і 24 px між картками — щільність інформації навмисна.
+
+### Не можна
+- Не вводьте вторинні акцентні кольори поза палітрою рівня продуктів Rausch / Plus Magenta / Luxe Purple.
+- Не розміщуйте текст всередині фотографій — підписи завжди знаходяться під зображенням, ніколи не накладаються.
+- Не використовуйте мітки всіма великими літерами, окрім одиничної ролі верхнього індексу 8 px.
+- Не заокруглюйте кнопки зі значками до чогось іншого, крім 50% — кругла форма є характерною геометрією системи.
+- Не додавайте падаючі тіні до карток оголошень — вони знаходяться на білому полотні без підняття.
+- Не використовуйте градієнтні фони — єдиний градієнт у системі — це вузьке розмиття Rausch → пурпурного на словесному знаку.
+- Не використовуйте вагу шрифту 400-regular — вага тіла Airbnb Cereal — 500.
+- Не замінюйте Airbnb Cereal VF іншим шрифтом дисплея — система навмисно однородинна.
+
+## 8. Адаптивна поведінка
+
+### Точки зупину
+
+Airbnb декларує ~60 точок зупину (артефакт часу дизайну з їх бібліотеки компонентів), але значущі зміни компонування відбуваються при набагато меншому наборі:
+
+| Назва | Ширина | Ключові зміни |
+|------|-------|-------------|
+| Ультраширокий | ≥1760 px | 6-стовпчикова сітка оголошень, максимальна ширина вмісту 1760–1920 px |
+| Десктоп XL | 1440–1759 px | 5-стовпчикова сітка, повна навігація видима, фіксована панель бронювання на правій рейці |
+| Десктоп | 1128–1439 px | 4-стовпчикова сітка, фіксована панель бронювання зберігається |
+| Ноутбук | 1024–1127 px | 3–4-стовпчикова сітка, навігація категорій залишається горизонтальною |
+| Планшет | 800–1023 px | 3-стовпчикова сітка, глобальний пошук може згортатися в одно-рядкову таблетку |
+| Маленький планшет | 550–799 px | 2-стовпчикова сітка, панель бронювання переходить до вбудованого блоку на всю ширину |
+| Мобільний | 375–549 px | 1-стовпчикове складене компонування, з'являється фіксована нижня панель вкладок (Огляд / Списки бажань / Увійти) |
+| Маленький мобільний | <375 px | Крайовий відступ стискається до 16 px; значки селектора категорій зменшуються до ~28 px |
+
+### Цілі дотику
+Усі інтерактивні елементи відповідають 44×44 px або перевищують їх. Сімейство кругових кнопок зі значками спеціально розмірне від 32 до 44 px із розширеним відступом зони попадання 8–12 px. Основна кнопка Rausch «Забронювати» має висоту ~48 px. Зона попадання тривкладкового селектора категорій — це повний прямокутник мітки-плюс-значок (зазвичай ~64×80 px на вкладку).
+
+### Стратегія згортання
+- **Навігація**: Верхня навігація зберігає словесний знак Airbnb + тривкладковий селектор на планшеті та вище; на мобільному селектор ковзає прямо під таблетку пошуку, а елементи керування кулею/аватаром переміщуються на нижню закріплену панель вкладок.
+- **Рядок пошуку**: Трисегментна таблетка (Де / Коли / Хто) з круговою кнопкою подання Rausch на десктопі; на мобільному згортається в одно-рядкову таблетку «Почніть пошук», при натисканні якої відкривається повноекранний аркуш пошуку.
+- **Панель бронювання**: Фіксована права рейка при ≥1128 px; вбудована в основний стовпець вмісту між 800–1127 px; нижня закріплена таблетка «Забронювати» при <800 px.
+- **Сітка оголошень**: Переміщується 6 → 5 → 4 → 3 → 2 → 1 стовпців через точки зупину.
+- **Сітка зображень сторінки деталей**: П'ятизображальне компонування (1 велике + 4 маленьких) на десктопі; перетворюється на повноекранну прокручувану карусель на мобільному з індикаторами точок сторінки.
+- **Нижній колонтитул**: 3-стовпчикове компонування згортається в одно-стовпчикове складене при <800 px.
+
+### Поведінка зображень
+- Універсальне `loading="lazy"` з розмитими мініатюрами попереднього перегляду `im_w=` параметризованими за URL, що подаються першими
+- Адаптивні зображення використовують CDN `muscache.com` Airbnb з параметром запиту `im_w` для доставки на основі ширини (`im_w=240`, `im_w=720`, `im_w=1200`, `im_w=2400`)
+- Без кадрування художнього напряму — те саме зображення масштабується вгору/вниз у точках зупину
+- Каруселі автоматично регулюють висоту фото для підтримки постійного співвідношення 4:3 незалежно від співвідношення джерела
+
+## 9. Посібник із підказок для агента
+
+### Швидка кольорова довідка
+- Основний CTA: «Rausch (#ff385c)»
+- Фон сторінки: «Canvas White (#ffffff)»
+- Підповерхня: «Soft Cloud (#f7f7f7)»
+- Текст заголовка/тіла: «Ink Black (#222222)»
+- Вторинний текст: «Ash Gray (#6a6a6a)»
+- Рамка/роздільник: «Hairline Gray (#dddddd)»
+- Помилка: «Error Red (#c13515)»
+- Інформаційне посилання: «Info Blue (#428bff)»
+- Акцент рівня Luxe: «Luxe Purple (#460479)»
+- Акцент рівня Plus: «Plus Magenta (#92174d)»
+
+### Приклади підказок для компонентів
+- «Створіть основну кнопку «Забронювати»: фон Rausch (`#ff385c`), біла мітка Airbnb Cereal вагою 500 при 16 px, відступ 14 px × 24 px, border-radius 8 px, тіні немає. При активному/натисненому стані додайте `transform: scale(0.92)` з кільцем фокусу Ink Black 2 px (`0 0 0 2px #222222`).»
+- «Збудуйте картку оголошення з повноекранною фотографією 4:3 при border-radius 14 px, без тіні контейнера; під зображенням складіть три рядки тексту з відступами 4 px: назва міста при 16 px 600 Ink Black, тип оренди при 14 px 500 Ash Gray (`#6a6a6a`) і діапазон цін у 16 px 500 Ink Black із суфіксом `за ніч` 14 px.»
+- «Спроектуйте фіксовану панель бронювання: білий фон, border-radius 14 px, рамка Hairline Gray (`#dddddd`) 1 px, тришарова тінь підняття (`rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0`), відступ 24 px, ширина 370 px, закріплена на 120 px нижче верхньої частини в'юпорту на десктопі. Вміст: заголовок ціни, вибір дати, спадне меню гостей, основний CTA Rausch і застереження Ash Gray 12 px `Оплата ще не буде здійснена`.»
+- «Створіть тривкладковий селектор категорій: три рівноширинні вкладки з мітками Будинки, Враження, Послуги; кожна вкладка має 3D-рендерований ілюстрований значок ~48 px (будинок, куля, дзвінок) над міткою Ink Black вагою 500 16 px; активна вкладка отримує підкреслення Ink Black 2 px; додайте маленьку таблетку `НОВЕ` білу 12 px 700 на темно-темно-синьому фоні у верхньому правому куті значків Вражень і Послуг.»
+- «Відтворіть компонування нагороди «Улюблене серед гостей»: центрований номер рейтингу при 52 px вагою 700 Ink Black, облямований ліворуч і праворуч намальованими вручну SVG-лавровими вінками на висоті ~48 px; нижче мітка великими літерами `УЛЮБЛЕНЕ СЕРЕД ГОСТЕЙ` 12 px 700 з трекінгом 0,32 px; підпис при 14 px 500 Ash Gray; блок на всю ширину безпосередньо на білому полотні без рамки контейнера.»
+
+### Посібник із ітерацій
+При вдосконаленні існуючих екранів, створених із цією дизайн-системою:
+1. Зосередьтеся на ОДНОМУ компоненті одночасно.
+2. Посилайтеся на конкретні назви кольорів і коди hex із цього документа (наприклад, «Ink Black #222222», а не «темно-сірий»).
+3. Використовуйте описи природною мовою поряд з вимірюваннями («тонке трирівневе підняття» замість довгого рядка тіні).
+4. Описуйте бажане «відчуття» («як журнал, фотографія на першому місці» проти «щільна утиліта»).
+5. Завжди використовуйте Airbnb Cereal VF вагою 500 для тіла і 600–700 для акцентування — ніколи не 400.
+6. Тримайте рожевий Rausch рідкісним — якщо на один в'юпорт з'являється більше одного елемента кольору Rausch, розгляньте, чи слід нейтралізувати один.
+
+### Відомі прогалини
+- **Картки сітки оголошень головної сторінки**: основна сітка карток нерухомості (основна візуальна поверхня airbnb.com) не була повністю захоплена у витягнутих знімках екрана головної сторінки — вміст завантажився лише частково. Специфікації картки оголошення вище виведені зі структури сітки «Натхнення» та ширших конвенцій Airbnb; перед використанням у виробництві підтвердьте точні співвідношення сторін і ієрархію метаданих на живому сайті.
+- **Значки категорій вражень**: 3D ілюстровані значки для Будинків / Вражень / Послуг подаються як растрові ресурси; їхні точні специфікації вихідних файлів (SVG проти PNG, розміри відтворених пікселів) тут не задокументовані.
+- **Тайминги анімацій та переходів**: не захоплені — обсяг статичного вилучення.
+- **Темний режим**: Airbnb не поставляє вбудований темний режим у витягнутих поверхнях продукту; цей документ описує лише одну тему світлого режиму.