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

System Projektowania Inspirowany Airbnb

Category: E-commerce i handel detaliczny Platforma turystyczna. Ciepły koralowy akcent, dominacja fotografii, zaokrąglony interfejs.

1. Temat Wizualny i Atmosfera

Projekt Airbnb z 2026 roku przypomina magazyn podróżniczy, który przypadkiem stał się aplikacją — czyste białe płótna ustępują miejsca pełnoekranowej fotografii, a sam interfejs znika, by ogłoszenia mogły oddychać. Charakterystyczny koralowo-różowy kolor Rausch (#ff385c) używany jest oszczędnie, ale w sposób nie do pomylenia: CTA wyszukiwania, wskaźnik aktywnej zakładki, przycisk głównej akcji, od czasu do czasu cena lub serduszko listy życzeń. Wszystko pozostałe to zdyscyplinowana skala szarości, gdzie #222222 niesie niemal każdą linię tekstu.

To, co sprawia, że system jest niezaprzeczalnie Airbnb, to ilość wiary, jaką pokłada w treści. Zdjęcia nieruchomości wyświetlane są w skali hero, 4:3 z pełnoekranowym zaokrągleniem krawędzi. Przełączanie kategorii odbywa się przez selektor trzech zakładek (Homes / Experiences / Services) wykorzystujący trójwymiarowe ilustrowane ikony (dom ze spadzistym dachem, balon na ogrzane powietrze, dzwonek serwisowy) — fizyczne, dotykowe, niemal zabawkowe — w połączeniu z precyzyjnymi etykietami Airbnb Cereal VF. Jest to rzadki produkt konsumencki, w którym renderowania 3D i czysto typograficzny interfejs współistnieją bez napięcia.

Najnowszą powierzchnią jest linia produktów Experiences — ten sam chrom, ale gęstsze karty, więcej fotografii i centralnie zakotwiony panel rezerwacji ze stałą prawą sztywnością cenową. Strony szczegółów ogłoszeń (zarówno pokojów, jak i doświadczeń) podążają za ścisłym szablonem: pełnoekranowa siatka obrazów hero → nakładająca się zaokrąglona karta rezerwacji (przyklejona podczas przewijania) → udogodnienia → recenzje (nagrody Guest Favorite używają dużej wyśrodkowanej oceny 4.81 z wieńcem laurowym) → mapa → profil hosta → ujawnienia. Rytm jest spójny niezależnie od tego, czy rezerwujesz pokój, czy rejs jachtem.

Kluczowe Cechy:

• Koralowo-różowy Rausch (#ff385c) jako jedyny kolor akcentowy marki, używany wyłącznie dla głównych CTA i przycisku wyszukiwania
• Pełnoekranowa fotografia w proporcjach 4:3 / 16:9 z delikatnym zaokrągleniem narożników (14–20px) jako podstawowe słownictwo wizualne
• Trójwymiarowe ikony kategorii sparowane z typograficznymi zakładkami — jedyne miejsce, w którym system pozwala na ilustrację
• Okrągłe przyciski ikon 50% (strzałka wstecz, udostępnianie, ulubione, strzałki karuzeli) rozsiane po całym interfejsie
• Airbnb Cereal VF nosi każdą etykietę, od prawnego przypisu 8px do nagłówka sekcji 28px — system jednej rodziny
• Kodowanie kolorów według tier produktu: Airbnb Plus (magenta #92174d), Airbnb Luxe (głęboki fiolet #460479), Airbnb (koral Rausch)
• Lockup nagrody Guest Favorite — wyśrodkowany olbrzymi numer oceny między dwoma wieńcami laurowymi, jeden z najbardziej rozpoznawalnych momentów w systemie
• Przyklejony panel rezerwacji z układem cena → daty → goście, przypięty do prawej szyny na pulpicie, przekształcający się w dolny pasek "Reserve" na urządzeniach mobilnych
• Przyklejona dolna nawigacja mobilna (Explore / Wishlists / Log in) z aktywnym odcieniem Rausch

2. Paleta Kolorów i Role

Podstawowy

• Rausch (#ff385c): Charakterystyczny koralowo-różowy kolor marki. Zmienna CSS --palette-bg-primary-core. Używany dla: głównego przycisku "Reserve", przycisku submit wyszukiwania, podkreślenia aktywnej zakładki, wypełnienia serduszka listy życzeń, akcentowania ceny. Jedyny kolor o najwyższej widoczności na każdej stronie.

Drugorzędny i Akcentowy

• Deep Rausch (#e00b41): Bardziej nasycony wariant. Zmienna CSS --palette-bg-tertiary-core. Używany dla wciśniętych/aktywnych stanów przycisku i punktów końcowych gradientu.
• Plus Magenta (#92174d): Zmienna CSS --palette-bg-primary-plus. Kolor marki dla tiera produktu Airbnb Plus — oferty z wyselekcjonowanymi ogłoszeniami wyższego rzędu.
• Luxe Purple (#460479): Zmienna CSS --palette-bg-primary-luxe. Kolor marki dla tiera produktu Airbnb Luxe — wynajem willi/posiadłości.
• Info Blue (#428bff): Zmienna CSS --palette-text-legal. Używany dla prawnych/informacyjnych linków (regulamin, prywatność, ujawnienia) — jedyny niemonochromatyczny kolor linku w systemie.

Powierzchnia i Tło

• Canvas White (#ffffff): Domyślne tło strony. Każda karta, każdy kontener, każda strona szczegółów zaczyna się tutaj.
• Soft Cloud (#f7f7f7): Subtelny odcień powierzchni używany na tłach stopek, opakowaniach widoku mapy i sekcjach "wszystko inne", które chcą ustąpić miejsca głównemu białemu.
• Hairline Gray (#dddddd): Wszechobecny kolor obramowania 1px — oddziela karty, wiersze udogodnień, panele recenzji, kolumny stopek. Koń roboczy systemu układu.

Neutralne i Tekstowe

• Ink Black (#222222): Zmienna CSS --palette-text-primary. Quasi-czarny systemu. Każdy nagłówek, każdy akapit treści, każda etykieta nawigacyjna, każda cena. Używany dla ~90% całego tekstu na stronie.
• Charcoal (#3f3f3f): Zmienna CSS --palette-text-focused. Używany w tekście pola wejściowego w stanie fokusa i kopii akcentowej o jeden stopień niżej.
• Ash Gray (#6a6a6a): Zmienna CSS --palette-bg-tertiary-hover. Drugorzędne etykiety, kopia w stylu podtytułu "Cottage rentals" pod nazwami miast, wyciszone linki stopki.
• Mute Gray (#929292): Zmienna CSS --palette-text-link-disabled. Wyłączone przyciski i metadane niskiego priorytetu.
• Stone Gray (#c1c1c1): Trzeciorzędne separatory, obrys ikon, awatary zastępcze.

Semantyczne i Akcentowe

• Error Red (#c13515): Zmienna CSS --palette-text-primary-error. Błędy walidacji formularzy, ostrzeżenia o destrukcyjnych akcjach.
• Deep Error (#b32505): Zmienna CSS --palette-text-secondary-error-hover. Wciśnięte/aktywne warianty stanów błędów.
• Translucent Black (rgba(0, 0, 0, 0.24)): Zmienna CSS --palette-text-material-disabled. Wyłączone etykiety w stylu material.

System Gradientów

Gradient marki Airbnb pojawia się rzadko, zazwyczaj tylko na wordmarku i markowym momencie przycisku wyszukiwania:

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

To koralowo-magentowe przejście to "markowy moment" — nigdy nie używane jako pełna powierzchnia, jedynie jako wąskie wypełnienie pilułki lub traktowanie logotypu.

3. Zasady Typografii

Rodzina Fontów

• Airbnb Cereal VF (podstawowy i jedyny): Zastrzeżony bezszeryfowy font o zmiennej wadze, który niesie cały system. Zapasowe (w kolejności): Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif.

Wagi obserwowane w wyekstrahowanych tokenach: 500, 600, 700. Brak 400-regular — "body" wagą systemu jest 500, co nadaje każdemu blokowi tekstu subtelną dodatkową gęstość, która odczytuje się jako pewna i zamierzona.

Funkcje OpenType: salt (alternatywy stylistyczne) używane jest na kompaktowych etykietach 11px i 14px o wadze 600 — prawdopodobnie dla ściślejszych cyfr i kształtowania znaków specjalnych. Nie zaobserwowano funkcji ligatur ani ułamkowych cyfr.

Hierarchia

Rola	Rozmiar	Waga	Wysokość linii	Odstęp liter	Notatki
Section Heading	28px / 1.75rem	700	1.43	0	"Inspiration for future getaways" — nagłówki na poziomie strony
Subsection Heading	22px / 1.38rem	500	1.18	-0.44px	"What this place offers", "Meet the hosts" — separatory treści
Card Title	21px / 1.31rem	700	1.43	0	Nagłówki panelu recenzji, nagłówki wiodące kart
Listing Title	20px / 1.25rem	600	1.20	-0.18px	"Small Group Yacht Tour, Unlimited Wine & Fruits" — nagłówki ogłoszeń na stronach szczegółów
Subtitle Bold	16px / 1.00rem	600	1.25	0	Nazwa hosta, nazwa miasta
Body Medium	16px / 1.00rem	500	1.25	0	Główna treść body na stronach szczegółów
Button Large	16px / 1.00rem	500	1.25	0	"Reserve", "Become a host"
Button Default	14px / 0.88rem	500	1.29	0	Standardowe etykiety przycisków
Link	14px / 0.88rem	500	1.43	0	Linki nawigacyjne, linki stopki
Caption Medium	14px / 0.88rem	500	1.29	0	Metadane, linie podtytułów ("Cottage rentals", "Villa rentals")
Caption Bold	14px / 0.88rem	600	1.43	0	Włączona funkcja salt — statystyki liczbowe, akcent małego tekstu
Caption Small	13px / 0.81rem	400	1.23	0	Daty recenzji, mikro-metadane
Micro Default	12px / 0.75rem	400	1.33	0	Zastrzeżenia stopki, prawny mikro-tekst
Micro Bold	12px / 0.75rem	700	1.33	0	Etykiety pilułek "NEW"
Badge Uppercase	11px / 0.69rem	600	1.18	0	Funkcja salt — kompaktowe odznaki kategorii/statusu
Superscript	8px / 0.50rem	700	1.25	0.32px	Wielkie litery — przypisy cenowe, końcówki dziesiętne

Zasady

• Jedna rodzina, wiele wag. Airbnb Cereal VF obsługuje wszystko od 8px prawniczego do 28px nagłówka strony — tożsamość wizualna pochodzi z samej rodziny, a nie z mieszania krojów pisma.
• 500 to nowe 400. "Regularna" waga systemu to 500, nadająca każdemu akapitowi nieco bardziej pewną fakturę niż domyślna webowa.
• Ujemny tracking tylko dla typografii displayowej. Nagłówki 20px+ kompresują tracking o -0.18 do -0.44px, by wyglądały dłutowato; rozmiary body zachowują tracking 0 dla czytelności.
• Ciasne interlinie dla nagłówków, luźne dla body. Typografia display działa przy 1.18–1.25 (ciasno); body i podpisy otwierają się do 1.43 dla komfortu długoformatowego.
• Bez wielkich liter poza 8px. Jedyna transformacja wielkich liter w systemie to superscript 8px — wszędzie indziej zdaniowe wielkie litery z subtelnymi zmianami wagi wykonują pracę.

Uwaga na Temat Zamienników Fontów

Airbnb Cereal VF jest zastrzeżony. Najbliższym zamiennikiem open-source jest Circular Std (nadal komercyjny) lub Inter (bezpłatny, Google Fonts) z letter-spacing zmniejszonym o -0.01em przy rozmiarach display. Dla ścisłej wierności marki, udokumentowany łańcuch zapasowy (Circular, -apple-system, system-ui) renderuje się akceptowalnie na macOS/iOS, gdzie system-ui rozwiązuje do San Francisco, który ma podobne proporcje.

4. Stylizacja Komponentów

Przyciski

Główny CTA ("Reserve", "Search", "Add dates")

• Tło: Rausch #ff385c
• Tekst: Canvas White #ffffff, Airbnb Cereal 500, 16px
• Padding: ~14px pionowo, 24px poziomo
• Radius: 8px (prostokątny) lub 50% (okrągły wariant ikonowy)
• Obramowanie: brak
• Aktywny/wciśnięty: transform: scale(0.92) plus pierścień fokusu 2px #222222 przy 0 0 0 2px

Przycisk Drugorzędny ("Become a host", zarysowane akcje trzeciorzędne)

• Tło: #ffffff
• Tekst: Ink Black #222222, Airbnb Cereal 500, 14–16px
• Padding: 10px 16px
• Radius: 20px (pilułka) lub 8px (prostokątny)
• Obramowanie: 1px solid Hairline Gray #dddddd

Okrągły Przycisk Tylko z Ikoną (strzałka wstecz, udostępnianie, ulubione, kontrolki karuzeli)

• Tło: #f2f2f2 (lekko off-white) lub biały z przezroczystym czarnym obramowaniem 1px
• Ikona: obrys #222222, 16–20px
• Rozmiar: średnica 32–44px
• Radius: 50%
• Aktywny/wciśnięty: transform: scale(0.92); subtelny biały pierścień 4px 0 0 0 4px rgb(255,255,255) dla oddzielenia od kolorowych fotograficznych teł

Wyłączony Przycisk

• Tło: #f2f2f2
• Tekst: Stone Gray #c1c1c1
• Przezroczystość: 0.5

Przycisk Zakładki Pilułki (selektor kategorii "Homes / Experiences / Services")

• Tło: przezroczyste
• Tekst: Ink Black #222222, Airbnb Cereal 500, 16px
• Padding: 8px 14px
• Stan aktywny: podkreślenie Ink Black 2px pod etykietą
• Sparowany z ilustrowaną ikoną 3D 36–48px nad etykietą

Karty i Kontenery

Karta Ogłoszenia (siatka strony głównej, wyniki wyszukiwania)

• Tło: #ffffff
• Radius: 14px na obrazie, tekst siedzi bezpośrednio poniżej na przezroczystym tle
• Obraz: proporcje 4:3, pełnoekranowy, zaokrąglony z tym samym radiusem 14px
• Padding: brak na zewnętrznym kontenerze; 12px odstęp między obrazem a wierszami metadanych
• Cień: brak — separacja pochodzi z białej przestrzeni i wewnętrznego radiusu fotografii
• Wzorzec metadanych: miasto/region w wierszu 1 (16px 600), odległość/czas trwania w wierszu 2 (14px 500 Ash Gray), zakres dat w wierszu 3, wiersz ceny z "per night" na dole

Panel Rezerwacji Strony Szczegółów (przyklejona prawa szyna na stronach pokojów/doświadczeń)

• Tło: #ffffff
• Radius: 14–20px
• Obramowanie: 1px solid Hairline Gray #dddddd
• Cień: 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 — ułożona trójwarstwowa subtelna elewacja
• Padding: 24px
• Szerokość: ~370px, przypięta 120–140px poniżej górnej krawędzi viewportu
• Treść: nagłówek ceny → selektor dat → dropdown gości → główny CTA → przypis "You won't be charged yet"

Karta Siatki Udogodnień (na stronach szczegółów ogłoszeń)

• Tło: #ffffff
• Obramowanie: 1px solid Hairline Gray #dddddd na poziomie wiersza (nie per element)
• Padding: 16px pionowo na wiersz udogodnienia
• Wzorzec ikona + etykieta: ikona konturu 24px po lewej, etykieta o wadze 500 16px po prawej

Karta Recenzji (indywidualna recenzja na stronach szczegółów)

• Tło: #ffffff, bez obramowania
• Padding: 0 (polega na przerwach siatki)
• Treść: okrągły awatar 40px + nazwa o wadze 600 16px + data Ash Gray 400 14px w jednym wierszu, następnie akapit body o wadze 500 14px poniżej

Pola Wejściowe i Formularze

Pasek Wyszukiwania (główna strona główna)

• Tło: #ffffff
• Obramowanie: 1px solid Hairline Gray #dddddd owijające wszystkie trzy segmenty (Where / When / Who)
• Radius: 32px (pełna pilułka)
• Cień: rgba(0, 0, 0, 0.04) 0 2px 6px 0 — subtelne unoszące się odczucie
• Struktura: trzy segmenty podzielone cienkimi pionowymi separatorami, każdy segment ma etykietę o wadze 500 12px nad symbolem zastępczym o wadze 500 14px
• Submit: okrągły przycisk ikony Rausch na prawej krawędzi, średnica 48px

Pole Tekstowe (ogólne formularze)

• Tło: #ffffff
• Obramowanie: 1px solid Hairline Gray #dddddd
• Radius: 8px
• Padding: 14px 16px
• Fokus: obramowanie zmienia się na Ink Black, dodaje zewnętrzny czarny pierścień 0 0 0 2px
• Błąd: obramowanie zmienia się na #c13515 (Error Red), tekst pomocniczy używa tego samego koloru

Selektor Dat

• Siatka kalendarza: układ 7 kolumn, okrągłe 50% komórki dni szerokie 40–44px
• Wybrany zakres: tło Ink Black #222222 z białymi cyframi
• Kotwice początku/końca: większe wypełnione okręgi; środkowe daty używają odcienia Soft Cloud #f7f7f7

Nawigacja

Górna Nawigacja (Desktop)

• Wysokość: ~80px
• Tło: #ffffff
• Lewa: wordmark+logo Airbnb w Rausch (102×32px)
• Środek: selektor kategorii trzech zakładek (Homes / Experiences / Services) z ikonami 3D 36–48px ułożonymi nad etykietami o wadze 500 16px; aktywna zakładka ma podkreślenie Ink Black 2px
• Prawa: link tekstowy "Become a host", następnie okrąg 32px (język), następnie menu awatara hamburger 36px
• Dolna krawędź: 1px solid Hairline Gray #dddddd

Górna Nawigacja (Mobilna)

• Pilułka wyszukiwania w jednym wierszu zajmuje pełną szerokość: symbol zastępczy "Start your search" z małą ikoną lupy
• Poniżej: selektor kategorii trzech zakładek pozostaje (Homes / Experiences / Services) — ikony ilustracyjne zmniejszają się do ~28px
• Dolny pasek zakładek przyklejony: Explore (aktywny stan Rausch) / Wishlists / Log in — ikony 24px nad etykietami 12px

Drugorzędna Nawigacja Strony Szczegółów Ogłoszenia

• Przyklejone poziome przewijanie linków kotwic (Photos · Amenities · Reviews · Location · Host) pojawia się przy przewijaniu za obrazem hero
• Wysokość: 56px
• Dolna krawędź: 1px solid Hairline Gray

Traktowanie Obrazów

• Podstawowe proporcje: 4:3 dla siatek ogłoszeń strony głównej, 16:9 dla fotografii hero doświadczeń, 1:1 dla awatarów
• Radius: 14px na obrazach siatki ogłoszeń, 20px na ramkach zdjęć hero strony szczegółów, 50% na awatarach
• Siatka obrazów na stronach szczegółów: pięcioobrazowa siatka z jednym dużym obrazem po lewej (szerokość 50%) i czterema mniejszymi zdjęciami w siatce 2×2 po prawej, wszystkie dzielące zewnętrzny zaokrąglony kontener 20px
• Leniwe ładowanie: intensywne użycie loading="lazy" z rozmytymi podglądami zastępczymi
• Karuzela: okrągłe przyciski strzałek 32px nakładają się na obraz, wyśrodkowane pionowo; wskaźniki kropek siedzą 12px powyżej dolnej krawędzi

Charakterystyczne Komponenty

Lockup Nagrody Guest Favorite (widoczny na stronach szczegółów wysoko ocenionych ogłoszeń)

• Wyśrodkowany numer oceny renderowany przy 44–56px wadze 700
• Dwie ręcznie rysowane ilustracje SVG wieńca laurowego flankujące lewo i prawo przy ~48px wysokości
• Poniżej: etykieta "Guest Favorite" przy 12px 700 wielkich literach z trackowaniem 0.32px i krótka podetkieta przy 14px 500 Ash Gray
• Blok pełnej szerokości, bez obramowania kontenera — siedzi bezpośrednio na białym płótnie

Selektor Kategorii Trzech Zakładek (pojawia się na górze każdej powierzchni przeglądania)

• Trzy zakładki: Homes / Experiences / Services
• Każda zakładka: ilustrowana ikona 3D (~48px wysoka) nad etykietą o wadze 500 16px
• Experiences i Services noszą małą granatową pilułkę "NEW" (biały tekst 700 12px na ciemnoniebieskim tle) unosząca się w prawym górnym rogu ikony
• Aktywna zakładka: podkreślenie Ink Black 2px pod etykietą

Siatka Miast Inspiracyjnych (strona główna "Inspiration for future getaways")

• 6-kolumnowa siatka linków do destynacji na pulpicie, 2-kolumnowa na mobile
• Każda komórka: nazwa miasta o wadze 600 16px w wierszu 1, podtytuł stylu wynajmu Ash Gray 500 14px w wierszu 2 ("Cottage rentals", "Villa rentals")
• Bez obrazów — siatka tylko tekstowa
• Podzielona zakładkami powyżej według kategorii (Popular / Arts & culture / Beach / Mountains / Outdoors / Things to do / Travel tips & inspiration / Airbnb-friendly apartments) — aktywna zakładka ma podkreślenie 2px i zmianę wagi

Przyklejona Karta Reserve (strony szczegółów ogłoszeń)

• Pozostaje przyklejona 120px poniżej górnej krawędzi viewportu na pulpicie gdy użytkownik przewija za hero
• Zwija się do dolnego pełnoszerokościowego paska na mobile z etykietą "From $X / night" i Rausch pilułką "Reserve"
• Zawsze pokazuje: nagłówek ceny → wyświetlanie dat → selektor gości → Rausch CTA → zastrzeżenie "You won't be charged yet"

Karta Hosta Doświadczeń (strony szczegółów doświadczeń)

• Zaokrąglony pełnoszerokościowy kontener z okładkową fotografią 3:2 na górze
• Awatar hosta (okrągły, 56px) nakładający się na dolną krawędź okładki o 50%
• Poniżej nakładki: imię hosta przy 16px 700, staż hosta przy 14px 500 Ash Gray, mały Rausch przycisk pilułkowy "Message host"
• Używany jako przejście między recenzjami a blokiem udogodnień/lokalizacji

Pasek "Things to know" (strony szczegółów ogłoszeń)

• 3-kolumnowa siatka bloków zasad/polityk (House rules, Safety & property, Cancellation policy)
• Każda kolumna: ikona na górze, nagłówek o wadze 600 16px, treść Ash Gray 500 14px, link "Show more" z podkreśleniem Ink Black
• Separator: górne i dolne obramowania Hairline Gray 1px na całym pasku

5. Zasady Układu

System Odstępów

• Jednostka bazowa: 8px
• Wyekstrahowana skala: 2, 3, 4, 5.5, 6, 8, 10, 11, 12, 15, 16, 18.5, 22, 24, 32px — szczegółowa z garścią wartości off-grid używanych do precyzyjnego wyrównania ikon piksel po pikselu
• Padding sekcji: ~48–64px góra/dół na pulpicie, 24–32px na mobile
• Wewnętrzny padding karty: 24px na panelach rezerwacji i dużych kartach, 16px na wierszach udogodnień, 12px na metadanych karty ogłoszenia
• Odstęp między kartami ogłoszeń: 24px pulpit, 16px mobile
• Między ułożonymi wierszami tekstu: 4–8px (bardzo ciasno — wzmacnia "gęstą informację" doświadczenia z ogłoszeniami podróżniczymi)

Siatka i Kontener

• Maksymalna szerokość treści: 1760–1920px na ultra-szerokim (Airbnb pozwala siatce oddychać szerzej niż większość stron); 1280px na większości stron szczegółów
• Siatka ogłoszeń strony głównej: 6 kolumn przy ≥1760px, 5 przy ≥1440px, 4 przy ≥1128px, 3 przy ≥800px, 2 przy ≥550px, 1 poniżej
• Strona szczegółów: 2-kolumnowa asymetryczna — główna treść ~58%, przyklejony panel rezerwacji ~36% po prawej, ~6% rynna
• Stopka: 3-kolumnowy Support / Hosting / Airbnb

Filozofia Białej Przestrzeni

Airbnb jest gęsto informatywny, ale nigdy zatłoczony. Biała przestrzeń używana jest do grupowania — karty ogłoszeń mają 24px rynny, by każda fotografia czytała się jako odrębny obiekt, ale metadane pod każdą kartą używają przerw 4–8px, by cena/miasto/data czuły się jak jedna jednostka. Panel rezerwacji strony szczegółów ma wewnętrzny padding 24px, ale wiersze w nim (selektor dat, selektor gości, CTA) są ułożone przy 12px — granica między kartą a stroną wykonuje więcej pracy separacyjnej niż treść wewnątrz.

Skala Zaokrągleń

Radius	Użycie
4px	Wbudowane tagi kotwic, chipy tagów
8px	Przyciski tekstowe, dropdowny, małe przyciski narzędziowe
14px	Fotografia karty ogłoszenia, ogólne kontenery treści, odznaki
20px	Główne zaokrąglone przyciski (kształt pilułki), duże obrazy, panel rezerwacji
32px	Pilułka paska wyszukiwania, bardzo duże kontenery
50%	Wszystkie okrągłe przyciski ikon, wszystkie awatary, serduszka listy życzeń — charakterystyczna okrągła geometria systemu

6. Głębokość i Elewacja

Poziom	Traktowanie	Użycie
0	Brak cienia	Karty ogłoszeń, treść body, sekcje tylko tekstowe
1	rgba(0, 0, 0, 0.08) 0 4px 12px	Aktywne/wciśnięte przyciski ikon (np. wstecz, udostępnianie, ulubione) — subtelne uniesienie wskazujące na interakcję
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	Przyklejona karta panelu rezerwacji, modale, menu dropdown — charakterystyczna trójwarstwowa elewacja systemu
Focus Ring	0 0 0 2px #222222	Przyciski w stanie aktywnym, skupione pole wyszukiwania
White Separator Ring	rgb(255, 255, 255) 0 0 0 4px	Okrągłe przyciski nakładane na fotografie — biały pierścień 4px wyraźnie oddziela przycisk od kolorowych teł obrazów

Filozofia cienia: Airbnb używa ułożonych wielowarstwowych cieni zamiast pojedynczego cienia. Trójwarstwowy cień panelu rezerwacji czyta się jako jeden spójny uniesienie, ale w rzeczywistości to trzy oddzielne cienie przy różnych wartościach przezroczystości/rozmycia — tworząc subtelne antyaliasowanie na obwodzie cienia, które czuje się premium bez przytłaczania.

Dekoracyjna Głębokość

• Fotografia jako głębokość: system w dużym stopniu polega na pełnoekranowej fotografii, aby tworzyć głębię wizualną; cienie i gradienty są używane oszczędnie, by fotografie wykonywały ciężką pracę
• Lockup wieńca laurowego: nagroda Guest Favorite używa dwóch ilustracji SVG wieńca laurowego, które nadają w innym przypadku płaskiej liczbie oceny ceremonialną, trofealną obecność
• Trójwymiarowe ikony kategorii: ikony Homes/Experiences/Services mają własne miękkie wewnętrzne oświetlenie i subtelne rzucane cienie wbudowane w dzieło — jedyne miejsce, w którym marka pozwala na "wymiarową" ilustrację

7. Zalecenia i Zakazy

Zalecenia

• Zarezerwuj Rausch #ff385c dla głównych akcji i wskaźnika aktywnej zakładki — nigdy nie rozcieńczaj go dekoracyjnymi zastosowaniami.
• Pozwól fotografii oddychać — przycinki 4:3 z zaokrąglonymi rogami 14–20px, bez nałożonego tekstu, bez scrims gradientowych.
• Używaj Ink Black #222222 dla każdej warstwy tekstu poniżej Rausch — to quasi-czarny systemu, nigdy prawdziwy #000000.
• Sparuj trójwymiarowe ilustrowane ikony selektora kategorii z płaską typografią — nie mieszaj stylów ilustracji w obrębie jednej powierzchni.
• Układaj trzy cienie o niskiej przezroczystości (~2%, 4%, 10%), aby stworzyć charakterystyczną elewację panelu rezerwacji.
• Używaj obramowania Hairline Gray #dddddd 1px dla każdego separatora karta-karta i wiersz-wiersz.
• Traktuj panel rezerwacji jako przyklejony na pulpicie, zwijający się do paska reserve zakotwiczonego na dole na mobile.
• Używaj odstępów 4–8px w grupach metadanych i 24px między kartami — gęstość informacji jest zamierzona.

Zakazy

• Nie wprowadzaj drugorzędnych kolorów akcentowych poza paletą tierów produktów Rausch / Plus Magenta / Luxe Purple.
• Nie umieszczaj tekstu wewnątrz fotografii — podpisy zawsze siedzą poniżej obrazu, nigdy nałożone.
• Nie używaj etykiet wielkich liter z wyjątkiem jedynej roli superscript 8px.
• Nie zaokrąglaj przycisków ikon do czegokolwiek innego niż 50% — okrągły to charakterystyczna geometria systemu.
• Nie dodawaj cieni do kart ogłoszeń — siedzą na białym płótnie bez elewacji.
• Nie używaj gradientowych teł — jedynym gradientem w systemie jest wąski sweep Rausch → magenta na wordmarku.
• Nie używaj wagi fontu 400-regular — wagą body Airbnb Cereal jest 500.
• Nie zastępuj Airbnb Cereal VF innym krojem displayowym — system jest celowo jednorodzinny.

8. Zachowanie Responsywne

Breakpointy

Airbnb deklaruje ~60 breakpointów (artefakt czasu projektowania z biblioteki komponentów), ale znaczące zmiany układu następują przy znacznie mniejszym zestawie:

Nazwa	Szerokość	Kluczowe Zmiany
Ultra-wide	≥1760px	6-kolumnowa siatka ogłoszeń, maksymalna szerokość treści 1760–1920px
Desktop XL	1440–1759px	Siatka 5-kolumnowa, pełna nawigacja widoczna, przyklejony panel rezerwacji na prawej szynie
Desktop	1128–1439px	Siatka 4-kolumnowa, przyklejony panel rezerwacji pozostaje
Laptop	1024–1127px	Siatka 3–4 kolumnowa, nawigacja kategorii pozostaje pozioma
Tablet	800–1023px	Siatka 3-kolumnowa, globalne wyszukiwanie może zwinąć się do pilułki jednolinijkowej
Small tablet	550–799px	Siatka 2-kolumnowa, panel rezerwacji spada do pełnoszerokościowego bloku inline
Mobile	375–549px	1-kolumnowy ułożony układ, dolny przyklejony pasek zakładek pojawia się (Explore / Wishlists / Log in)
Small mobile	<375px	Padding krawędzi zacieśnia się do 16px; ikony selektora kategorii zmniejszają się do ~28px

Cele Dotykowe

Wszystkie interaktywne elementy spełniają lub przekraczają 44×44px. Rodzina okrągłych przycisków ikon jest specjalnie wyceniana na 32–44px z rozszerzonym paddingiem obszaru trafień 8–12px. Główny przycisk Rausch Reserve ma ~48px wysokości. Obszar trafień selektora kategorii trzech zakładek to pełny prostokąt etykieta-plus-ikona (zazwyczaj ~64×80px na zakładkę).

Strategia Zwijania

• Nav: Górna nawigacja zachowuje wordmark Airbnb + selektor trzech zakładek na tablecie i powyżej; na mobile selektor przesuwa się tuż pod pilułkę wyszukiwania, a kontrolki globe/awatar przenoszą się do dolnego paska zakładek.
• Pasek wyszukiwania: Trójsegmentowa pilułka (Where / When / Who) z okrągłym przyciskiem submit Rausch na pulpicie; zwija się do jednolinijkowej pilułki "Start your search" na mobile, której dotknięcie otwiera pełnoekranowy arkusz wyszukiwania.
• Panel rezerwacji: Przyklejona prawa szyna przy ≥1128px; inline w głównej kolumnie treści między 800–1127px; dolna przyklejona pilułka "Reserve" przy <800px.
• Siatka ogłoszeń: Przeformatowuje 6 → 5 → 4 → 3 → 2 → 1 kolumny przez breakpointy.
• Siatka obrazów strony szczegółów: Pięcioobrazowy układ (1 duży + 4 małe) na pulpicie; staje się przewijaną pełnoekranową karuzelą na mobile ze wskaźnikami kropek strony.
• Stopka: 3-kolumnowy układ zwija się do ułożonej pojedynczej kolumny przy <800px.

Zachowanie Obrazów

• loading="lazy" powszechne, z rozmytymi podglądami miniatur parametryzowanych URL im_w= serwowanych jako pierwsze
• Responsywne obrazy używają CDN muscache.com Airbnb z parametrem zapytania im_w do dostarczania opartego na szerokości (im_w=240, im_w=720, im_w=1200, im_w=2400)
• Brak przycinania artystycznego — ten sam obraz jest skalowany w górę/dół przez breakpointy
• Karuzele automatycznie dostosowują wysokość zdjęcia, aby zachować stały stosunek 4:3 niezależnie od źródłowych proporcji

9. Przewodnik Po Promptach Agenta

Szybkie Odniesienie do Kolorów

• Główny CTA: "Rausch (#ff385c)"
• Tło strony: "Canvas White (#ffffff)"
• Powierzchnia podrzędna: "Soft Cloud (#f7f7f7)"
• Tekst nagłówka / body: "Ink Black (#222222)"
• Tekst drugorzędny: "Ash Gray (#6a6a6a)"
• Obramowanie / separator: "Hairline Gray (#dddddd)"
• Błąd: "Error Red (#c13515)"
• Link informacyjny: "Info Blue (#428bff)"
• Akcent tiera Luxe: "Luxe Purple (#460479)"
• Akcent tiera Plus: "Plus Magenta (#92174d)"

Przykładowe Prompty Komponentów

• "Utwórz główny przycisk Reserve: tło Rausch (#ff385c), biała etykieta Airbnb Cereal 500-weight przy 16px, padding 14px × 24px, border-radius 8px, brak cienia. Przy aktywnym/wciśniętym dodaj transform: scale(0.92) z pierścieniem fokusu Ink Black 2px (0 0 0 2px #222222)."
• "Zbuduj kartę ogłoszenia z pełnoekranową fotografią proporcji 4:3 przy border-radius 14px, bez cienia kontenera; poniżej obrazu ułóż trzy wiersze tekstu z przerwami 4px: nazwa miasta przy 16px 600 Ink Black, typ wynajmu przy 14px 500 Ash Gray (#6a6a6a) i zakres cen przy 16px 500 Ink Black z sufiksem per night 14px."
• "Zaprojektuj przyklejony panel rezerwacji: białe tło, border-radius 14px, obramowanie Hairline Gray (#dddddd) 1px, 3-warstwowy cień elewacji (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), padding 24px, szerokość 370px, przypięty 120px poniżej górnej krawędzi viewportu na pulpicie. Treść: nagłówek ceny, selektor dat, dropdown gości, Rausch główny CTA i zastrzeżenie Ash Gray 12px You won't be charged yet."
• "Utwórz selektor kategorii trzech zakładek: trzy zakładki o równej szerokości oznaczone Homes, Experiences, Services; każda zakładka ma ilustrowaną ikonę 3D (~48px wysoka) (dom, balon, dzwonek) nad etykietą Ink Black o wadze 500 16px; aktywna zakładka ma podkreślenie Ink Black 2px; dodaj małą pilułkę NEW o wadze 700 białą 12px na ciemnoniebieskim tle w prawym górnym rogu ikon Experiences i Services."
• "Wyrenderuj lockup nagrody Guest Favorite: wyśrodkowany numer oceny przy 52px wadze 700 Ink Black, flankowany lewo i prawo ręcznie rysowanymi SVG wieńcami laurowymi ~48px wysokimi; poniżej etykieta GUEST FAVORITE wielkie litery waga 700 12px z trackowaniem 0.32px; podetkieta przy 14px 500 Ash Gray; blok pełnej szerokości siedzący bezpośrednio na białym płótnie bez obramowania kontenera."

Przewodnik po Iteracji

Przy udoskonalaniu istniejących ekranów wygenerowanych z tym systemem projektowania:

1. Skoncentruj się na JEDNYM komponencie na raz.
2. Odwołuj się do konkretnych nazw kolorów i kodów hex z tego dokumentu (np. "Ink Black #222222", nie "ciemny szary").
3. Używaj opisów w naturalnym języku obok pomiarów ("subtelna trójwarstwowa elewacja" zamiast długiego ciągu cieni).
4. Opisz pożądane "odczucie" ("jak magazyn, z priorytetem fotografii" vs "gęsta użyteczność").
5. Zawsze domyślnie stosuj Airbnb Cereal VF wagę 500 dla body i 600–700 dla akcentu — nigdy 400.
6. Zachowaj różowy Rausch w małej ilości — jeśli więcej niż jeden element w kolorze Rausch pojawi się na viewport, rozważ, czy jeden powinien być zneutralizowany.

Znane Luki

• Karty siatki ogłoszeń strony głównej: główna siatka kart nieruchomości (podstawowa powierzchnia wizualna airbnb.com) nie została w pełni uchwycona w wyekstrahowanych zrzutach ekranu strony głównej — treść załadowała się tylko częściowo. Specyfikacje Karty Ogłoszenia powyżej są wywnioskowane ze struktury siatki Inspiration i szerszych konwencji Airbnb; potwierdź dokładne proporcje i hierarchię metadanych na żywej witrynie przed użyciem produkcyjnym.
• Ikony kategorii Experiences: trójwymiarowe ilustrowane ikony dla Homes / Experiences / Services są serwowane jako zasoby rastrowe; ich dokładne specyfikacje pliku źródłowego (SVG vs PNG, wyrenderowane wymiary pikseli) nie są tutaj udokumentowane.
• Czasy animacji i przejść: nie uchwycone — zakres ekstrakcji statycznej.
• Tryb ciemny: Airbnb nie dostarcza natywnego trybu ciemnego w wyekstrahowanych powierzchniach produktu; ten dokument opisuje tylko jeden jasny motyw.