Дизайн-система, вдохновлённая Airbnb

Category: Электронная коммерция и розничная торговля Маркетплейс путешествий. Тёплый коралловый акцент, фотографии в приоритете, скруглённый интерфейс.

1. Визуальная тема и атмосфера

Дизайн Airbnb в 2026 году напоминает тревел-журнал, который случайно оказался приложением — безупречно белые холсты уступают место фотографиям на всю ширину, а сам интерфейс исчезает, чтобы объявления могли дышать. Фирменный коралово-розовый Rausch (#ff385c) используется скупо, но безошибочно узнаваемо: CTA поиска, индикатор активной вкладки, основная кнопка действия, иногда цена или сердечко вишлиста. Всё остальное — дисциплинированная серая шкала, где #222222 несёт почти каждую строку текста.

То, что делает систему неповторимо Airbnb — это та вера, которую она возлагает на контент. Фотографии объектов отображаются в героическом масштабе, 4:3 с обработкой от края до края с закруглением. Переключение категорий происходит через трёхвкладочный переключатель (Жильё / Впечатления / Услуги), использующий иконки с 3D-рендерингом (домик со скатной крышей, воздушный шар, сервисный колокольчик) — физические, тактильные, почти игрушечные — в паре с чёткими подписями Airbnb Cereal VF. Это редкий потребительский продукт, где 3D-рендеры и чисто типографский интерфейс сосуществуют без напряжения.

Новейшая поверхность — линейка продуктов Впечатления — тот же хром, но более богатая плотность карточек, больше фотографий и центрированная панель бронирования со sticky правой колонкой с ценой. Страницы с деталями объявлений (как комнат, так и впечатлений) следуют жёсткому шаблону: сетка изображений-героев на всю ширину → перекрывающаяся скруглённая карточка бронирования (sticky при прокрутке) → удобства → отзывы (награды Guest Favorite используют большой центрированный рейтинг 4.81 с медальоном из лавровых ветвей) → карта → профиль хозяина → раскрытия. Ритм последователен, бронируете ли вы комнату или яхт-тур.

Ключевые характеристики:

• Коралово-розовый Rausch (#ff385c) как единственный акцентный фирменный цвет, используется только для основных CTA и кнопки поиска
• Фотографии на всю ширину 4:3 / 16:9 с мягким скруглением углов (14–20px) как основной визуальный словарь
• 3D-рендеренные иконки категорий в паре с типографскими вкладками — единственное место, где система допускает иллюстрации
• Круглые кнопки-иконки 50% (стрелка назад, поделиться, в избранное, стрелки карусели) разбросаны по всему интерфейсу
• Airbnb Cereal VF несёт каждую подпись, от 8px сноски до 28px заголовка раздела — система с единственной гарнитурой
• Цветовое кодирование по уровню продукта: Airbnb Plus (пурпурно-розовый #92174d), Airbnb Luxe (тёмно-фиолетовый #460479), Airbnb (коралловый Rausch)
• Медальон награды Guest Favorite — огромное число рейтинга по центру между двумя лавровыми венками, один из самых узнаваемых моментов системы
• Sticky панель бронирования со стеком цена → даты → гости, закреплённая в правой колонке на десктопе, трансформирующаяся в нижнюю закреплённую кнопку «Забронировать» на мобильных
• Нижняя мобильная навигация (Поиск / Списки желаний / Войти) с 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): Повсеместный цвет границы 1px — разделяет карточки, строки удобств, панели отзывов, колонки нижних колонтитулов. Рабочая лошадка системы макетирования.

Нейтральные и текстовые

• Ink Black (#222222): CSS-переменная --palette-text-primary. Почти чёрный системы. Каждый заголовок, каждый абзац основного текста, каждая подпись навигации, каждая цена. Используется для ~90% всего текста на странице.
• Charcoal (#3f3f3f): CSS-переменная --palette-text-focused. Используется в тексте ввода в состоянии 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. Отключённые подписи в стиле material.

Система градиентов

Фирменный градиент Airbnb появляется редко, как правило, только на словесном знаке и в фирменном моменте кнопки поиска:

linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)

Этот переход коралловый → пурпурный является «фирменным моментом» — никогда не используется в качестве полной поверхности, только как узкая заливка пилюли или обработка логотипа.

3. Правила типографики

Семейство шрифтов

• Airbnb Cereal VF (основной и единственный): Проприетарный переменный sans-serif, который несёт всю систему. Запасные варианты (по порядку): Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif.

Начертания, наблюдаемые в извлечённых токенах: 500, 600, 700. Нет 400-regular — «тело» системы имеет начертание 500, что придаёт каждому блоку текста слегка большую плотность, которая читается как уверенная и намеренная.

Функции OpenType: salt (стилистические альтернаты) используется на компактных подписях 11px и 14px 600 — вероятно, для более плотного формирования цифр и специальных символов. Функции лигатур или дробных цифр не наблюдались.

Иерархия

Принципы

• Одна гарнитура, множество начертаний. Airbnb Cereal VF справляется со всем, от юридических 8px до заголовков страниц 28px — визуальная идентичность исходит из самой гарнитуры, а не из смешения шрифтов.
• 500 — новый 400. «Обычное» начертание системы — 500, что придаёт каждому абзацу слегка более уверенную текстуру, чем веб-стандарт.
• Отрицательный кернинг только для отображения. Заголовки 20px и выше сжимают кернинг на -0,18 до -0,44px для вычеканенного вида; размеры основного текста остаются с нулевым кернингом для читаемости.
• Плотные межстрочные интервалы для заголовков, щедрые для текста. Отображаемый тип работает при 1,18–1,25 (плотный); основной текст и подписи открываются до 1,43 для комфорта при длинном чтении.
• Нет заглавных кроме 8px. Единственное преобразование в заглавные в системе — надстрочный 8px — везде в остальном регистр предложения с тонкими изменениями начертания.

Примечание о заменителях шрифтов

Airbnb Cereal VF является проприетарным. Ближайший open-source заменитель — 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, 16px
• Отступы: ~14px по вертикали, 24px по горизонтали
• Радиус: 8px (прямоугольный) или 50% (вариант круглой иконки)
• Граница: нет
• Активное/нажатое: transform: scale(0.92) плюс кольцо фокуса 2px #222222 при 0 0 0 2px

Вторичная кнопка («Стать хозяином», обведённые третичные действия)

• Фон: #ffffff
• Текст: Ink Black #222222, Airbnb Cereal 500, 14–16px
• Отступы: 10px 16px
• Радиус: 20px (пилюля) или 8px (прямоугольный)
• Граница: 1px solid Hairline Gray #dddddd

Круглая кнопка только с иконкой (стрелка назад, поделиться, в избранное, элементы управления каруселью)

• Фон: #f2f2f2 (слегка не белый) или белый с прозрачной чёрной границей 1px
• Иконка: обводка #222222, 16–20px
• Размер: диаметр 32–44px
• Радиус: 50%
• Активное/нажатое: transform: scale(0.92); тонкое белое кольцо 4px 0 0 0 4px rgb(255,255,255) для отделения от цветных фотографических фонов

Отключённая кнопка

• Фон: #f2f2f2
• Текст: Stone Gray #c1c1c1
• Прозрачность: 0,5

Кнопка-вкладка пилюля (переключатель категорий «Жильё / Впечатления / Услуги»)

• Фон: прозрачный
• Текст: Ink Black #222222, Airbnb Cereal 500, 16px
• Отступы: 8px 14px
• Активное состояние: подчёркивание Ink Black 2px под подписью
• В паре с 3D-рендеренной иллюстрированной иконкой 36–48px над подписью

Карточки и контейнеры

Карточка объявления (сетка главной страницы, результаты поиска)

• Фон: #ffffff
• Радиус: 14px на изображении, текст располагается непосредственно под ним на прозрачном фоне
• Изображение: соотношение сторон 4:3, на всю ширину, скруглённое с тем же радиусом 14px
• Отступы: нет на внешнем контейнере; 12px отступ между изображением и строками метаданных
• Тень: нет — разделение обеспечивается пустым пространством и собственным радиусом фотографии
• Шаблон метаданных: город/регион в строке 1 (16px 600), расстояние/продолжительность в строке 2 (14px 500 Ash Gray), диапазон дат в строке 3, строка цены с «за ночь» внизу

Панель бронирования страницы деталей (sticky правая колонка на страницах комнат/впечатлений)

• Фон: #ffffff
• Радиус: 14–20px
• Граница: 1px 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 — тонкое трёхслойное наложенное возвышение
• Отступ: 24px
• Ширина: ~370px, закреплена на 120–140px ниже верха области просмотра
• Содержание: заголовок цены → выбор дат → выпадающий список гостей → основной CTA → сноска «С вас ничего не будет списано сейчас»

Карточка сетки удобств (на страницах деталей объявлений)

• Фон: #ffffff
• Граница: 1px solid Hairline Gray #dddddd на уровне строки (не для каждого элемента)
• Отступ: 16px по вертикали на строку удобства
• Шаблон иконка + подпись: контурная иконка 24px слева, подпись 16px 500 справа

Карточка отзыва (отдельный отзыв на страницах деталей)

• Фон: #ffffff, без границы
• Отступ: 0 (опирается на отступы сетки)
• Содержание: круглый аватар 40px + имя 16px 600 + дата 14px 400 Ash Gray в одной строке, затем абзац основного текста 14px 500 ниже

Поля ввода и формы

Строка поиска (основная страница)

• Фон: #ffffff
• Граница: 1px solid Hairline Gray #dddddd, охватывающий все три сегмента (Куда / Когда / Кто)
• Радиус: 32px (полная пилюля)
• Тень: rgba(0, 0, 0, 0.04) 0 2px 6px 0 — тонкое ощущение парения
• Структура: три сегмента, разделённых тонкими вертикальными разделителями, каждый сегмент имеет подпись 12px 500 над заполнителем 14px 500
• Отправка: круглая кнопка-иконка Rausch у правого края, диаметр 48px

Текстовый ввод (общие формы)

• Фон: #ffffff
• Граница: 1px solid Hairline Gray #dddddd
• Радиус: 8px
• Отступ: 14px 16px
• Фокус: граница переключается на Ink Black, добавляется внешнее чёрное кольцо 0 0 0 2px
• Ошибка: граница переключается на #c13515 (Error Red), вспомогательный текст использует тот же цвет

Выбор дат

• Сетка календаря: 7-колонная разметка, круглые ячейки дней 50% шириной 40–44px
• Выбранный диапазон: фон Ink Black #222222 с белыми цифрами
• Начальные/конечные якоря: более крупные заполненные круги; средние даты используют оттенок Soft Cloud #f7f7f7

Навигация

Верхняя навигация (Десктоп)

• Высота: ~80px
• Фон: #ffffff
• Слева: логотип Airbnb в Rausch (102×32px)
• По центру: трёхвкладочный переключатель категорий (Жильё / Впечатления / Услуги) с 3D-иконками 36–48px, сложенными над подписями 16px 500; активная вкладка имеет подчёркивание Ink Black 2px
• Справа: текстовая ссылка «Стать хозяином», затем круглый глобус 32px (язык), затем гамбургер-меню аватара 36px
• Border-bottom: 1px solid Hairline Gray #dddddd

Верхняя навигация (Мобильная)

• Поисковая пилюля в одну строку занимает всю ширину: заполнитель «Начните поиск» с маленькой иконкой лупы
• Ниже: трёхвкладочный переключатель категорий сохраняется (Жильё / Впечатления / Услуги) — иллюстрированные иконки сжимаются до ~28px
• Нижняя закреплённая панель вкладок: Поиск (активное состояние Rausch) / Списки желаний / Войти — иконки 24px над подписями 12px

Вторичная навигация страницы деталей объявления

• Sticky горизонтальная прокрутка якорных ссылок (Фото · Удобства · Отзывы · Расположение · Хозяин) появляется при прокрутке за изображение-герой
• Высота: 56px
• Border-bottom: 1px solid Hairline Gray

Обработка изображений

• Основные соотношения сторон: 4:3 для сеток объявлений главной страницы, 16:9 для фотографий-героев впечатлений, 1:1 для аватаров
• Радиус: 14px на изображениях сетки объявлений, 20px на рамках фотографий-героев страниц деталей, 50% на аватарах
• Сетка изображений на страницах деталей: сетка из пяти фотографий с одним большим изображением слева (50% ширины) и четырьмя меньшими фотографиями в сетке 2×2 справа, все разделяющие внешний скруглённый контейнер 20px
• Отложенная загрузка: широкое использование loading="lazy" с размытыми превью-заглушками
• Карусель: круглые кнопки-стрелки 32px накладываются на изображение, центрируются по вертикали; точечные индикаторы находятся на 12px выше нижнего края

Фирменные компоненты

Медальон награды Guest Favorite (выделен на страницах деталей высокооценённых объявлений)

• Центрированный номер рейтинга, отрендеренный в 44–56px 700
• Две нарисованные от руки SVG иллюстрации лавровых венков слева и справа высотой ~48px
• Ниже: подпись «Guest Favorite» в 12px 700 заглавными с трекингом 0,32px, и короткая подзаголовочная подпись в 14px 500 Ash Gray
• Блок на всю ширину, без границы контейнера — расположен непосредственно на белом холсте

Трёхвкладочный переключатель категорий (появляется вверху каждой поверхности просмотра)

• Три вкладки: Жильё / Впечатления / Услуги
• Каждая вкладка: 3D-рендеренная иллюстрированная иконка (~48px высотой) над подписью 16px 500
• Впечатления и Услуги в настоящее время несут маленькую тёмно-синюю пилюлю «НОВОЕ» (белый текст 12px 700 на тёмно-синем фоне), плавающую вверху справа от иконки
• Активная вкладка: подчёркивание Ink Black 2px под подписью

Сетка вдохновляющих городов (главная страница «Вдохновение для будущих поездок»)

• Сетка из 6 колонок ссылок на направления на десктопе, 2 колонки на мобильном
• Каждая ячейка: название города 16px 600 в строке 1, подзаголовок типа аренды 14px 500 Ash Gray в строке 2 («Аренда коттеджей», «Аренда вилл»)
• Нет изображений — только текстовая сетка
• Выше разделена по категориям (Популярное / Искусство и культура / Пляж / Горы / Активный отдых / Развлечения / Советы путешественникам и вдохновение / Апартаменты, дружелюбные к Airbnb) — активная вкладка имеет подчёркивание 2px и смену начертания

Sticky карточка бронирования (страницы деталей объявлений)

• Остаётся фиксированной на 120px ниже верха области просмотра на десктопе при прокрутке за герой
• Сворачивается в полноширинную нижнюю панель на мобильном с подписью «От X₽ / ночь» и пилюлей Rausch «Забронировать»
• Всегда отображает: заголовок цены → отображение дат → выбор гостей → CTA Rausch → оговорка «С вас ничего не будет списано сейчас»

Карточка хозяина впечатлений (страницы деталей впечатлений)

• Полноширинный скруглённый контейнер с фотографией обложки 3:2 вверху
• Аватар хозяина (круглый, 56px), перекрывающий нижний край обложки на 50%
• Под перекрытием: имя хозяина в 16px 700, стаж хозяина в 14px 500 Ash Gray, маленькая кнопка-пилюля Rausch «Написать хозяину»
• Используется как переход между отзывами и блоком удобств/расположения

Полоса «Важно знать» (страницы деталей объявлений)

• Сетка из 3 колонок блоков правил/политик (Правила дома, Безопасность и имущество, Политика отмены)
• Каждая колонка: иконка вверху, заголовок 16px 600, основной текст 14px 500 Ash Gray, ссылка «Показать больше» с подчёркиванием Ink Black
• Разделитель: верхние и нижние границы Hairline Gray 1px на всей полосе

5. Принципы макетирования

Система отступов

• Базовая единица: 8px
• Извлечённая шкала: 2, 3, 4, 5,5, 6, 8, 10, 11, 12, 15, 16, 18,5, 22, 24, 32px — мелкозернистая с несколькими внесеточными значениями для пиксель-идеального выравнивания иконок
• Отступ секции: ~48–64px сверху/снизу на десктопе, 24–32px на мобильном
• Внутренний отступ карточки: 24px на панелях бронирования и больших карточках, 16px на строках удобств, 12px на метаданных карточки объявления
• Промежуток между карточками объявлений: 24px десктоп, 16px мобильный
• Между сложенными текстовыми строками: 4–8px (очень плотно — усиливает ощущение «плотной информации» листингов путешествий)

Сетка и контейнер

• Максимальная ширина контента: 1760–1920px на ультрашироких (Airbnb позволяет сетке дышать дальше, чем большинство сайтов); 1280px на большинстве страниц деталей
• Сетка объявлений главной страницы: 6 колонок при ≥1760px, 5 при ≥1440px, 4 при ≥1128px, 3 при ≥800px, 2 при ≥550px, 1 ниже
• Страница деталей: 2 асимметричные колонки — основной контент ~58%, sticky панель бронирования ~36% справа, ~6% желоб
• Нижний колонтитул: 3 колонки Поддержка / Хостинг / Airbnb

Философия пустого пространства

Airbnb информативно насыщен, но никогда не тесен. Пустое пространство используется для группировки — карточки объявлений имеют желоб 24px, чтобы каждая фотография читалась как отдельный объект, но метаданные под каждой карточкой используют промежутки 4–8px, чтобы цена/город/дата ощущались как единица. Панель бронирования страницы деталей имеет внутренний отступ 24px, но строки внутри (выбор дат, выбор гостей, CTA) сложены с 12px — граница между карточкой и страницей выполняет больше работы по разделению, чем содержимое внутри.

Шкала радиусов границ

6. Глубина и возвышение

Философия теней: Airbnb использует наложенные многослойные тени вместо одной падающей тени. Трёхслойная тень панели бронирования читается как одно цельное возвышение, но на самом деле представляет собой три отдельные тени с разными значениями непрозрачности/размытия — создавая тонкое сглаживание на периметре тени, которое выглядит премиально, но не тяжело.

Декоративная глубина

• Фотография как глубина: система сильно опирается на фотографию на всю ширину для создания визуальной глубины; тени и градиенты используются экономно, чтобы фотографии выполняли тяжёлую работу
• Медальон лавровых венков: награда Guest Favorite использует две SVG иллюстрации лавра, которые придают иначе плоскому номеру рейтинга церемониальное, трофейное присутствие
• 3D-рендеренные иконки категорий: иконки Жильё/Впечатления/Услуги имеют собственное мягкое внутреннее освещение и тонкие отброшенные тени, запечённые в иллюстрации — единственное место, где бренд допускает «объёмную» иллюстрацию

7. Что нужно и не нужно делать

Нужно

• Резервировать Rausch #ff385c для основных действий и индикатора активной вкладки — никогда не разбавлять его декоративным использованием.
• Давать фотографии дышать — кадрирование 4:3 с закруглёнными углами 14–20px, без наложенного текста, без градиентных плашек.
• Использовать Ink Black #222222 для каждого слоя текста ниже Rausch — это почти чёрный системы, никогда не настоящий #000000.
• Сочетать 3D-иллюстрированные иконки трёхвкладочного переключателя категорий с плоской типографикой — не смешивать стили иллюстраций на одной поверхности.
• Накладывать три тени с низкой непрозрачностью (~2%, 4%, 10%) для создания фирменного возвышения панели бронирования.
• Использовать границы Hairline Gray #dddddd 1px для каждого разделителя карточка-карточка и строка-строка.
• Обращаться с панелью бронирования как со sticky на десктопе, сворачивающейся в нижнюю закреплённую кнопку на мобильном.
• Использовать отступ 4–8px внутри групп метаданных и 24px между карточками — плотность информации намеренна.

Не нужно

• Не вводить вторичные акцентные цвета за пределами палитры уровней продуктов Rausch / Plus Magenta / Luxe Purple.
• Не размещать текст внутри фотографий — подписи всегда располагаются под изображением, никогда не накладываются.
• Не использовать подписи заглавными буквами, кроме единственной роли надстрочного 8px.
• Не скруглять кнопки-иконки до чего-либо кроме 50% — круглое является фирменной геометрией системы.
• Не добавлять падающие тени к карточкам объявлений — они располагаются на белом холсте без возвышения.
• Не использовать градиентные фоны — единственный градиент в системе — узкий переход Rausch → пурпурный на словесном знаке.
• Не использовать начертание 400-regular — начертание тела Airbnb Cereal — 500.
• Не заменять Airbnb Cereal VF другой отображаемой гарнитурой — система намеренно однофамильная.

8. Адаптивное поведение

Точки останова

Airbnb объявляет ~60 точек останова (артефакт дизайна из их библиотеки компонентов), но значимые сдвиги макета происходят на значительно меньшем наборе:

Цели касания

Все интерактивные элементы соответствуют или превышают 44×44px. Семейство круглых кнопок-иконок специально размером 32–44px с расширенным отступом области касания 8–12px. Основная кнопка Rausch «Забронировать» составляет ~48px в высоту. Область касания трёхвкладочного переключателя категорий — полный прямоугольник подпись-плюс-иконка (обычно ~64×80px на вкладку).

Стратегия сворачивания

• Навигация: Верхняя навигация сохраняет логотип Airbnb + трёхвкладочный переключатель на планшете и выше; на мобильном переключатель скользит сразу под поисковую пилюлю, а элементы управления глобус/аватар перемещаются на нижнюю закреплённую панель вкладок.
• Строка поиска: Трёхсегментная пилюля (Куда / Когда / Кто) с круглой кнопкой отправки Rausch на десктопе; сворачивается в однострочную пилюлю «Начните поиск» на мобильном, нажатие открывает полноэкранный лист поиска.
• Панель бронирования: Sticky правая колонка при ≥1128px; встроенная в основную колонку контента между 800–1127px; закреплённая пилюля «Забронировать» внизу при <800px.
• Сетка объявлений: Переформатируется 6 → 5 → 4 → 3 → 2 → 1 колонок по точкам останова.
• Сетка изображений страницы деталей: Пятиизображенческая разметка (1 большое + 4 маленьких) на десктопе; становится прокручиваемой каруселью на всю ширину на мобильном с точечными индикаторами страниц.
• Нижний колонтитул: 3-колонная разметка сворачивается в сложенную одноколонную при <800px.

Поведение изображений

• loading="lazy" универсально, с размытыми параметризованными im_w= превью-заглушками, загружаемыми первыми
• Адаптивные изображения используют 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 в 16px, отступы 14px × 24px, радиус границы 8px, без тени. При активном/нажатом добавить transform: scale(0.92) с кольцом фокуса Ink Black 2px (0 0 0 2px #222222).»
• «Создать карточку объявления с фотографией 4:3 на всю ширину с радиусом границы 14px, без тени контейнера; под изображением сложить три текстовые строки с промежутками 4px: название города в 16px 600 Ink Black, тип аренды в 14px 500 Ash Gray (#6a6a6a), и ценовой диапазон в 16px 500 Ink Black с суффиксом за ночь 14px.»
• «Спроектировать sticky панель бронирования: белый фон, радиус границы 14px, граница Hairline Gray (#dddddd) 1px, трёхслойная тень возвышения (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), отступ 24px, ширина 370px, закреплена на 120px ниже верха области просмотра на десктопе. Содержание: заголовок цены, выбор дат, выпадающий список гостей, основной CTA Rausch и оговорка Ash Gray 12px С вас ничего не будет списано сейчас.»
• «Создать трёхвкладочный переключатель категорий: три вкладки равной ширины с подписями Жильё, Впечатления, Услуги; каждая вкладка имеет 3D-рендеренную иллюстрированную иконку (~48px высотой) (дом, шар, колокольчик) над подписью 16px 500 Ink Black; активная вкладка получает подчёркивание Ink Black 2px; добавить маленькую пилюлю 12px 700 белая НОВОЕ на тёмно-синем фоне в верхний правый угол иконок Впечатления и Услуги.»
• «Отрендерить медальон награды Guest Favorite: центрированный номер рейтинга в 52px 700 Ink Black, фланкированный слева и справа нарисованными от руки SVG лавровыми венками высотой ~48px; ниже подпись 12px 700 заглавными GUEST FAVORITE с трекингом 0,32px; подзаголовочная подпись в 14px 500 Ash Gray; блок на всю ширину, расположенный непосредственно на белом холсте без границы контейнера.»

Руководство по итерации

При доработке существующих экранов, сгенерированных с этой дизайн-системой:

1. Фокусироваться на ОДНОМ компоненте за раз.
2. Ссылаться на конкретные названия цветов и шестнадцатеричные коды из этого документа (напр., «Ink Black #222222», не «тёмно-серый»).
3. Использовать описания на естественном языке вместе с измерениями («тонкое трёхслойное возвышение» вместо длинной строки теней).
4. Описывать желаемое «ощущение» («стиль журнала, фотография на первом плане» vs «плотная утилитарность»).
5. Всегда использовать по умолчанию Airbnb Cereal VF 500 для тела и 600–700 для акцента — никогда не 400.
6. Держать розовый Rausch редким — если на один видовой экран приходится более одного элемента цвета Rausch, подумать, нужно ли нейтрализовать один из них.

Известные пробелы

• Карточки сетки объявлений главной страницы: основная сетка карточек объектов (основная визуальная поверхность airbnb.com) не была полностью захвачена в извлечённых скриншотах главной страницы — контент загрузился лишь частично. Спецификации карточек объявлений выше выведены из структуры сетки вдохновения и более широких конвенций Airbnb; подтвердите точные соотношения сторон и иерархию метаданных на живом сайте перед использованием в производстве.
• Иконки категорий Впечатления: 3D-иллюстрированные иконки для Жильё / Впечатления / Услуги поставляются как растровые ресурсы; их точные спецификации исходных файлов (SVG vs PNG, отрендеренные пиксельные размеры) здесь не задокументированы.
• Тайминги анимации и переходов: не захвачены — область статичного извлечения.
• Тёмный режим: Airbnb не поставляет нативный тёмный режим в извлечённых поверхностях продукта; этот документ описывает только одну тему светлого режима.