workbuddy_skills/open-design/design-systems/airbnb/DESIGN-uk.md

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 не поставляє вбудований темний режим у витягнутих поверхнях продукту; цей документ описує лише одну тему світлого режиму.