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

Design System Inspired by Airbnb

Category: E-Commerce & Ritel Marketplace perjalanan. Aksen koral hangat, berbasis fotografi, antarmuka membulat.

1. Tema Visual & Atmosfer

Desain Airbnb tahun 2026 terasa seperti majalah perjalanan yang kebetulan menjadi aplikasi — kanvas putih bersih memberi jalan pada fotografi penuh layar, dan antarmuka itu sendiri menghilang agar listing dapat bernapas. Koral-merah muda Rausch yang khas (#ff385c) digunakan dengan hemat namun tak salah kenal: CTA pencarian, indikator tab aktif, tombol aksi utama, dan sesekali harga atau ikon hati wishlist. Semua yang lain adalah skala abu-abu yang disiplin, dengan #222222 membawa hampir setiap baris teks.

Yang membuat sistem ini tak terbantahkan sebagai Airbnb adalah betapa besar kepercayaan yang ditempatkan pada konten. Foto properti ditampilkan dalam skala hero, 4:3 dengan perlakuan radius tepi-ke-tepi. Pergantian kategori terjadi melalui pemilih tri-tab (Rumah / Pengalaman / Layanan) yang menggunakan ikon bergambar render 3D (rumah dengan atap miring, balon udara panas, bel layanan) — fisik, taktil, hampir seperti mainan — dipasangkan dengan label Airbnb Cereal VF yang tajam. Ini adalah produk konsumen langka di mana render 3D dan antarmuka tipografi murni hadir berdampingan tanpa ketegangan.

Permukaan terbaru adalah lini produk Pengalaman — krom yang sama, namun kepadatan kartu yang lebih kaya, lebih banyak fotografi, dan panel pemesanan yang ditambatkan di tengah dengan harga rel-kanan yang menempel. Halaman detail listing (baik kamar maupun pengalaman) mengikuti template yang ketat: kisi gambar hero penuh layar → kartu pemesanan membulat yang tumpang tindih (menempel saat digulir) → fasilitas → ulasan (penghargaan Favorit Tamu menggunakan peringkat 4.81 besar di tengah dengan lockup lingkaran karangan bunga) → peta → profil tuan rumah → pengungkapan. Ritme ini konsisten baik saat memesan kamar maupun tur yacht.

Karakteristik Utama:

• Koral-merah muda Rausch (#ff385c) sebagai warna merek aksen tunggal, hanya digunakan untuk CTA utama dan tombol pencarian
• Fotografi penuh layar dalam format 4:3 / 16:9 dengan pembulatan sudut halus (14–20 px) sebagai kosakata visual utama
• Ikon kategori render 3D dipasangkan dengan tab tipografi — satu-satunya tempat sistem ini memperbolehkan ilustrasi
• Tombol ikon bulat 50% (panah kembali, bagikan, favorit, panah karusel) tersebar di seluruh antarmuka
• Airbnb Cereal VF membawa setiap label, dari catatan hukum 8 px hingga heading seksi 28 px — sistem satu keluarga
• Pengkodean warna tingkat produk: Airbnb Plus (magenta #92174d), Airbnb Luxe (ungu gelap #460479), Airbnb (koral Rausch)
• Lockup penghargaan Favorit Tamu — angka peringkat raksasa terpusat di antara dua karangan bunga laurel, salah satu momen paling dikenali dalam sistem
• Panel pemesanan menempel dengan tumpukan harga → tanggal → tamu, disematkan di rel kanan pada desktop, berubah menjadi bilah "Pesan" yang ditambatkan di bawah pada mobile
• Navigasi bawah mobile yang menempel (Jelajahi / Daftar Keinginan / Masuk) dengan tint Rausch status aktif

2. Palet Warna & Peran

Primer

• Rausch (#ff385c): Koral-merah muda khas merek. Variabel CSS --palette-bg-primary-core. Digunakan untuk: tombol utama "Pesan", tombol kirim pencarian, garis bawah tab aktif, isian hati wishlist, penekanan harga. Warna dengan visibilitas tertinggi tunggal di setiap halaman.

Sekunder & Aksen

• Deep Rausch (#e00b41): Varian yang lebih jenuh. Variabel CSS --palette-bg-tertiary-core. Digunakan untuk status tombol ditekan/aktif dan titik akhir gradien.
• Plus Magenta (#92174d): Variabel CSS --palette-bg-primary-plus. Warna merek untuk tingkat produk Airbnb Plus — penawaran listing yang dikurasi kelas atas.
• Luxe Purple (#460479): Variabel CSS --palette-bg-primary-luxe. Warna merek untuk tingkat produk Airbnb Luxe — sewa villa/perkebunan.
• Info Blue (#428bff): Variabel CSS --palette-text-legal. Digunakan untuk tautan hukum/informatif (syarat, privasi, pengungkapan) — satu-satunya warna tautan non-monokrom dalam sistem.

Permukaan & Latar Belakang

• Canvas White (#ffffff): Latar belakang halaman default. Setiap kartu, setiap kontainer, setiap halaman detail dimulai di sini.
• Soft Cloud (#f7f7f7): Tint sub-permukaan halus yang digunakan pada latar belakang footer, pembungkus tampilan peta, dan bagian "segalanya" yang ingin mundur dari putih primer.
• Hairline Gray (#dddddd): Warna border 1 px yang ada di mana-mana — memisahkan kartu, baris fasilitas, panel ulasan, kolom footer. Kuda pekerja sistem tata letak.

Netral & Teks

• Ink Black (#222222): Variabel CSS --palette-text-primary. Hampir-hitam sistem. Setiap heading, setiap paragraf teks, setiap label navigasi, setiap harga. Digunakan untuk ~90% dari semua teks di halaman.
• Charcoal (#3f3f3f): Variabel CSS --palette-text-focused. Digunakan dalam teks input yang difokuskan dan salinan penekanan satu langkah di bawah.
• Ash Gray (#6a6a6a): Variabel CSS --palette-bg-tertiary-hover. Label sekunder, salinan gaya subtitle "Sewa cottage" di bawah nama kota, tautan footer yang diredam.
• Mute Gray (#929292): Variabel CSS --palette-text-link-disabled. Tombol dinonaktifkan dan metadata prioritas rendah.
• Stone Gray (#c1c1c1): Pembagi tersier, goresan ikon, avatar placeholder.

Semantik & Aksen

• Error Red (#c13515): Variabel CSS --palette-text-primary-error. Kesalahan validasi formulir, peringatan aksi destruktif.
• Deep Error (#b32505): Variabel CSS --palette-text-secondary-error-hover. Varian ditekan/aktif dari status kesalahan.
• Translucent Black (rgba(0, 0, 0, 0.24)): Variabel CSS --palette-text-material-disabled. Label bergaya material yang dinonaktifkan.

Sistem Gradien

Gradien merek Airbnb muncul dengan hemat, biasanya hanya pada wordmark dan momen tombol pencarian bermerek:

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

Sapuan koral → magenta ini adalah "momen bermerek" — tidak pernah digunakan sebagai permukaan penuh, hanya sebagai isian pil sempit atau perlakuan logo.

3. Aturan Tipografi

Keluarga Font

• Airbnb Cereal VF (primer dan satu-satunya): Sans-serif berbobot variabel yang membawa seluruh sistem. Fallback (secara berurutan): Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif.

Bobot yang diamati dalam token yang diekstrak: 500, 600, 700. Tidak ada 400-reguler — bobot "tubuh" sistem adalah 500, yang memberikan setiap blok teks kepadatan ekstra halus yang terbaca sebagai percaya diri dan disengaja.

Fitur OpenType: salt (alternatif stilistik) digunakan pada label 11 px dan 14 px berbobot 600 yang kompak — kemungkinan untuk angka yang lebih ketat dan pembentukan karakter khusus. Tidak ada fitur ligatur atau angka pecahan yang diamati.

Hierarki

Peran	Ukuran	Bobot	Tinggi Baris	Spasi Huruf	Catatan
Heading Seksi	28 px / 1,75 rem	700	1,43	0	"Inspirasi untuk perjalanan masa depan" — heading tingkat halaman
Heading Sub-seksi	22 px / 1,38 rem	500	1,18	-0,44 px	"Yang ditawarkan tempat ini", "Temui tuan rumah" — pembagi konten
Judul Kartu	21 px / 1,31 rem	700	1,43	0	Heading panel ulasan, judul utama kartu
Judul Listing	20 px / 1,25 rem	600	1,20	-0,18 px	"Tur Yacht Kelompok Kecil, Anggur & Buah Tak Terbatas" — headline listing di halaman detail
Subjudul Tebal	16 px / 1,00 rem	600	1,25	0	Nama tuan rumah, nama kota
Teks Medium	16 px / 1,00 rem	500	1,25	0	Teks tubuh utama di halaman detail
Tombol Besar	16 px / 1,00 rem	500	1,25	0	"Pesan", "Jadi tuan rumah"
Tombol Default	14 px / 0,88 rem	500	1,29	0	Label tombol standar
Tautan	14 px / 0,88 rem	500	1,43	0	Tautan nav, tautan footer
Keterangan Medium	14 px / 0,88 rem	500	1,29	0	Metadata, baris subtitle ("Sewa cottage", "Sewa villa")
Keterangan Tebal	14 px / 0,88 rem	600	1,43	0	Fitur salt diaktifkan — statistik numerik, penekanan teks kecil
Keterangan Kecil	13 px / 0,81 rem	400	1,23	0	Tanggal ulasan, micro-metadata
Mikro Default	12 px / 0,75 rem	400	1,33	0	Disclaimer footer, micro-copy hukum
Mikro Tebal	12 px / 0,75 rem	700	1,33	0	Label pil "BARU"
Badge Huruf Kapital	11 px / 0,69 rem	600	1,18	0	Fitur salt — badge kategori/status kompak
Superskrip	8 px / 0,50 rem	700	1,25	0,32 px	Huruf kapital — catatan kaki harga, ekor desimal

Prinsip

• Satu keluarga, banyak bobot. Airbnb Cereal VF menangani segalanya dari teks hukum 8 px hingga heading halaman 28 px — identitas visual berasal dari keluarga itu sendiri, bukan dari pencampuran tipografi.
• 500 adalah 400 yang baru. Bobot "reguler" sistem adalah 500, memberikan setiap paragraf tekstur yang sedikit lebih percaya diri dari default web.
• Tracking negatif hanya pada tipe display. Heading 20 px ke atas mengompresi tracking sebesar -0,18 hingga -0,44 px untuk terasa terpahat; ukuran tubuh tetap pada 0 tracking untuk keterbacaan.
• Tinggi baris ketat untuk headline, longgar untuk tubuh. Tipe display berjalan pada 1,18–1,25 (ketat); tubuh dan keterangan membuka diri ke 1,43 untuk kenyamanan bentuk panjang.
• Tidak ada huruf kapital semua kecuali pada 8 px. Satu-satunya transformasi huruf kapital dalam sistem adalah superskrip 8 px — di tempat lain, huruf kalimat dengan pergeseran bobot halus melakukan pekerjaan.

Catatan tentang Pengganti Font

Airbnb Cereal VF adalah milik perusahaan. Pengganti open-source terdekat adalah Circular Std (masih komersial) atau Inter (gratis, Google Fonts) dengan spasi huruf dikurangi sebesar -0,01 em pada ukuran display. Untuk kesetiaan merek yang ketat, rantai fallback yang didokumentasikan (Circular, -apple-system, system-ui) merender dengan layak pada macOS/iOS di mana system-ui diselesaikan ke San Francisco, yang memiliki proporsi serupa.

4. Penataan Gaya Komponen

Tombol

CTA Utama ("Pesan", "Cari", "Tambah tanggal")

• Latar belakang: Rausch #ff385c
• Teks: Canvas White #ffffff, Airbnb Cereal 500, 16 px
• Padding: ~14 px vertikal, 24 px horizontal
• Radius: 8 px (persegi panjang) atau 50% (varian ikon bulat)
• Border: tidak ada
• Aktif/ditekan: transform: scale(0.92) ditambah cincin fokus 2 px #222222 pada 0 0 0 2px

Tombol Sekunder ("Jadi tuan rumah", aksi tersier dengan garis tepi)

• Latar belakang: #ffffff
• Teks: Ink Black #222222, Airbnb Cereal 500, 14–16 px
• Padding: 10 px 16 px
• Radius: 20 px (pil) atau 8 px (persegi panjang)
• Border: 1 px solid Hairline Gray #dddddd

Tombol Hanya Ikon Bulat (panah kembali, bagikan, favorit, kontrol karusel)

• Latar belakang: #f2f2f2 (putih sedikit mati) atau putih dengan border hitam transparan 1 px
• Ikon: goresan garis #222222, 16–20 px
• Ukuran: diameter 32–44 px
• Radius: 50%
• Aktif/ditekan: transform: scale(0.92); cincin putih halus 4 px 0 0 0 4px rgb(255,255,255) untuk memisahkan dari latar belakang fotografi berwarna

Tombol Dinonaktifkan

• Latar belakang: #f2f2f2
• Teks: Stone Gray #c1c1c1
• Opasitas: 0,5

Tombol Tab Pil (pemilih kategori "Rumah / Pengalaman / Layanan")

• Latar belakang: transparan
• Teks: Ink Black #222222, Airbnb Cereal 500, 16 px
• Padding: 8 px 14 px
• Status aktif: garis bawah Ink Black 2 px di bawah label
• Dipasangkan dengan ikon bergambar render 3D 36–48 px di atas label

Kartu & Kontainer

Kartu Listing (kisi beranda, hasil pencarian)

• Latar belakang: #ffffff
• Radius: 14 px pada gambar, teks duduk langsung di bawah pada latar belakang transparan
• Gambar: rasio 4:3, penuh layar, dibulatkan dengan radius 14 px yang sama
• Padding: tidak ada pada kontainer luar; 12 px jarak antara gambar dan baris metadata
• Bayangan: tidak ada — pemisahan berasal dari ruang putih dan radius intrinsik foto
• Pola metadata: Kota/wilayah di baris 1 (16 px 600), jarak/durasi di baris 2 (14 px 500 Ash Gray), rentang tanggal di baris 3, baris harga dengan "per malam" di bagian bawah

Panel Pemesanan Halaman Detail (rel kanan yang menempel di halaman kamar/pengalaman)

• Latar belakang: #ffffff
• Radius: 14–20 px
• Border: 1 px solid Hairline Gray #dddddd
• Bayangan: 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 — elevasi halus tiga lapis yang ditumpuk
• Padding: 24 px
• Lebar: ~370 px, disematkan 120–140 px di bawah bagian atas viewport
• Konten: headline harga → pemilih tanggal → dropdown tamu → CTA utama → catatan kaki "Anda belum akan ditagih"

Kartu Kisi Fasilitas (di halaman detail listing)

• Latar belakang: #ffffff
• Border: 1 px solid Hairline Gray #dddddd pada tingkat baris (bukan per item)
• Padding: 16 px vertikal per baris fasilitas
• Pola ikon + label: ikon garis 24 px di sebelah kiri, label berbobot 500 16 px di sebelah kanan

Kartu Ulasan (ulasan individual di halaman detail)

• Latar belakang: #ffffff, tidak ada border
• Padding: 0 (mengandalkan celah kisi)
• Konten: avatar bulat 40 px + nama berbobot 600 16 px + tanggal Ash Gray 400 14 px dalam satu baris, kemudian paragraf tubuh berbobot 500 14 px di bawah

Input & Formulir

Bilah Pencarian (beranda utama)

• Latar belakang: #ffffff
• Border: 1 px solid Hairline Gray #dddddd membungkus ketiga segmen (Di mana / Kapan / Siapa)
• Radius: 32 px (pil penuh)
• Bayangan: rgba(0, 0, 0, 0.04) 0 2px 6px 0 — rasa mengambang yang halus
• Struktur: tiga segmen dibagi oleh pembagi vertikal tipis, setiap segmen memiliki label berbobot 500 12 px di atas placeholder berbobot 500 14 px
• Kirim: tombol ikon bulat Rausch di tepi kanan, diameter 48 px

Input Teks (formulir generik)

• Latar belakang: #ffffff
• Border: 1 px solid Hairline Gray #dddddd
• Radius: 8 px
• Padding: 14 px 16 px
• Fokus: border beralih ke Ink Black, menambahkan cincin luar hitam 0 0 0 2px
• Kesalahan: border beralih ke #c13515 (Error Red), teks pembantu menggunakan warna yang sama

Pemilih Tanggal

• Kisi kalender: tata letak 7 kolom, sel hari bulat 50% lebar 40–44 px
• Rentang yang dipilih: latar belakang Ink Black #222222 dengan angka putih
• Jangkar awal/akhir: lingkaran terisi yang lebih besar; tanggal tengah menggunakan tint Soft Cloud #f7f7f7

Navigasi

Nav Atas (Desktop)

• Tinggi: ~80 px
• Latar belakang: #ffffff
• Kiri: lockup wordmark+logo Airbnb dalam Rausch (102×32 px)
• Tengah: pemilih kategori tri-tab (Rumah / Pengalaman / Layanan) dengan ikon 3D 36–48 px ditumpuk di atas label berbobot 500 16 px; tab aktif memiliki garis bawah Ink Black 2 px
• Kanan: tautan teks "Jadi tuan rumah", kemudian globe bulat 32 px (bahasa), kemudian menu avatar hamburger 36 px
• Border bawah: 1 px solid Hairline Gray #dddddd

Nav Atas (Mobile)

• Pil pencarian satu baris menempati lebar penuh: placeholder "Mulai pencarian Anda" dengan ikon kaca pembesar kecil
• Di bawah: pemilih kategori tri-tab bertahan (Rumah / Pengalaman / Layanan) — ikon bergambar menyusut ke ~28 px
• Bilah tab yang disematkan di bawah: Jelajahi (status aktif Rausch) / Daftar Keinginan / Masuk — ikon 24 px di atas label 12 px

Nav Sekunder Halaman Detail Listing

• Guliran horizontal yang menempel dari tautan jangkar (Foto · Fasilitas · Ulasan · Lokasi · Tuan Rumah) muncul saat menggulir melewati gambar hero
• Tinggi: 56 px
• Border bawah: 1 px solid Hairline Gray

Perlakuan Gambar

• Rasio aspek utama: 4:3 untuk kisi listing beranda, 16:9 untuk fotografi hero pengalaman, 1:1 untuk avatar
• Radius: 14 px pada gambar kisi listing, 20 px pada bingkai foto hero halaman detail, 50% pada avatar
• Kisi gambar di halaman detail: kisi lima foto dengan satu gambar besar di sebelah kiri (lebar 50%) dan empat foto lebih kecil dalam kisi 2×2 di sebelah kanan, semua berbagi kontainer membulat luar 20 px
• Lazy loading: penggunaan intensif loading="lazy" dengan pratinjau placeholder yang dikaburkan
• Karusel: tombol panah bulat 32 px melapisi gambar, dipusatkan secara vertikal; indikator titik duduk 12 px di atas tepi bawah

Komponen Khas

Lockup Penghargaan Favorit Tamu (ditampilkan secara menonjol di halaman detail listing dengan peringkat tinggi)

• Angka peringkat terpusat dirender pada 44–56 px berbobot 700
• Dua ilustrasi SVG karangan bunga laurel yang digambar tangan mengapit kiri dan kanan pada ~48 px tinggi
• Di bawah: label "Favorit Tamu" pada 12 px 700 huruf kapital dengan tracking 0,32 px, dan sub-label pendek pada 14 px 500 Ash Gray
• Blok lebar penuh, tidak ada border kontainer — duduk langsung di atas kanvas putih

Pemilih Kategori Tri-Tab (muncul di bagian atas setiap permukaan penelusuran)

• Tiga tab: Rumah / Pengalaman / Layanan
• Setiap tab: ikon bergambar render 3D (~48 px tinggi) di atas label berbobot 500 16 px
• Pengalaman dan Layanan saat ini membawa pil "BARU" biru navy kecil (teks putih 12 px 700 pada latar belakang biru gelap) yang mengambang di kanan atas ikon
• Tab aktif: garis bawah Ink Black 2 px di bawah label

Kisi Kota Inspirasi (beranda "Inspirasi untuk perjalanan masa depan")

• Kisi 6 kolom tautan destinasi di desktop, 2 kolom di mobile
• Setiap sel: nama kota 16 px 600 di baris 1, subtitle tipe sewa Ash Gray 500 14 px di baris 2 ("Sewa cottage", "Sewa villa")
• Tidak ada gambar — kisi hanya teks
• Dengan tab di atas berdasarkan kategori (Populer / Seni & budaya / Pantai / Pegunungan / Alam terbuka / Hal yang bisa dilakukan / Tips perjalanan & inspirasi / Apartemen ramah Airbnb) — tab aktif memiliki garis bawah 2 px dan pergeseran bobot

Kartu Pesan Tetap (halaman detail listing)

• Tetap tersemat 120 px di bawah bagian atas viewport di desktop saat pengguna menggulir melewati hero
• Mengempis menjadi bilah bawah lebar penuh di mobile dengan label "Dari $X / malam" dan pil Rausch "Pesan"
• Selalu menampilkan: headline harga → tampilan tanggal → pemilih tamu → CTA Rausch → disclaimer "Anda belum akan ditagih"

Kartu Tuan Rumah Pengalaman (halaman detail pengalaman)

• Kontainer membulat lebar penuh dengan foto sampul 3:2 di atas
• Avatar tuan rumah (bulat, 56 px) tumpang tindih tepi bawah sampul sebesar 50%
• Di bawah tumpang tindih: nama tuan rumah pada 16 px 700, lama tuan rumah pada 14 px 500 Ash Gray, tombol pil Rausch kecil "Hubungi tuan rumah"
• Digunakan sebagai transisi antara ulasan dan blok fasilitas/lokasi

Strip "Hal yang perlu diketahui" (halaman detail listing)

• Kisi 3 kolom blok aturan/kebijakan (Aturan rumah, Keamanan & properti, Kebijakan pembatalan)
• Setiap kolom: ikon di atas, heading 16 px 600, tubuh Ash Gray 14 px 500, tautan "Tampilkan lebih banyak" dalam garis bawah Ink Black
• Pemisah: border atas dan bawah Hairline Gray 1 px pada seluruh strip

5. Prinsip Tata Letak

Sistem Spasi

• Unit dasar: 8 px
• Skala yang diekstrak: 2, 3, 4, 5,5, 6, 8, 10, 11, 12, 15, 16, 18,5, 22, 24, 32 px — granular dengan segelintir nilai di luar kisi yang digunakan untuk penyelarasan ikon yang sempurna piksel
• Padding seksi: ~48–64 px atas/bawah di desktop, 24–32 px di mobile
• Padding internal kartu: 24 px pada panel pemesanan dan kartu besar, 16 px pada baris fasilitas, 12 px pada metadata kartu listing
• Celah antar kartu listing: 24 px desktop, 16 px mobile
• Antara baris teks bertumpuk: 4–8 px (sangat ketat — memperkuat rasa "informasi padat" dari listing perjalanan)

Kisi & Kontainer

• Lebar konten maksimum: 1760–1920 px pada ultra-wide (Airbnb membiarkan kisi bernafas lebih jauh dari kebanyakan situs); 1280 px di sebagian besar halaman detail
• Kisi listing beranda: 6 kolom pada ≥1760 px, 5 pada ≥1440 px, 4 pada ≥1128 px, 3 pada ≥800 px, 2 pada ≥550 px, 1 di bawahnya
• Halaman detail: 2 kolom asimetris — konten utama ~58%, panel pemesanan tetap ~36% di sebelah kanan, ~6% celah
• Footer: 3 kolom Dukungan / Hosting / Airbnb

Filosofi Ruang Putih

Airbnb sangat informatif namun tidak pernah sempit. Ruang putih digunakan untuk mengelompokkan — kartu listing memiliki 24 px celah sehingga setiap foto terbaca sebagai objek yang berbeda, tetapi metadata di bawah setiap kartu menggunakan celah 4–8 px sehingga harga/kota/tanggal terasa seperti satu unit. Panel pemesanan halaman detail memiliki padding internal 24 px, tetapi baris di dalamnya (pemilih tanggal, pemilih tamu, CTA) ditumpuk pada 12 px — batas antara kartu dan halaman melakukan lebih banyak pekerjaan pemisahan daripada konten di dalamnya.

Skala Radius Border

Radius	Penggunaan
4 px	Tag jangkar inline, chip tag
8 px	Tombol teks, dropdown, tombol utilitas kecil
14 px	Fotografi kartu listing, kontainer konten generik, badge
20 px	Tombol membulat utama (bentuk pil), gambar besar, panel pemesanan
32 px	Pil bilah pencarian, kontainer ekstra besar
50%	Semua tombol ikon bulat, semua avatar, hati wishlist — geometri bulat khas sistem

6. Kedalaman & Elevasi

Level	Perlakuan	Penggunaan
0	Tanpa bayangan	Kartu listing, konten tubuh, bagian hanya teks
1	rgba(0, 0, 0, 0.08) 0 4px 12px	Tombol ikon aktif/ditekan (mis. kembali, bagikan, favorit) — angkatan halus untuk menunjukkan interaksi
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	Kartu panel pemesanan tetap, modal, menu dropdown — elevasi tiga lapis khas sistem
Cincin Fokus	0 0 0 2px #222222	Tombol status aktif, input pencarian yang difokuskan
Cincin Pemisah Putih	rgb(255, 255, 255) 0 0 0 4px	Tombol bulat yang dilapisi pada foto — cincin putih 4 px dengan bersih memisahkan tombol dari latar belakang gambar berwarna

Filosofi bayangan: Airbnb menggunakan bayangan berlapis bertumpuk daripada satu bayangan tunggal. Bayangan tiga lapis panel pemesanan terbaca sebagai satu angkatan yang kohesif tetapi sebenarnya adalah tiga bayangan terpisah pada nilai opasitas/keburaman yang berbeda — menciptakan anti-aliasing halus di perimeter bayangan yang terasa premium tanpa menjadi berat.

Kedalaman Dekoratif

• Fotografi sebagai kedalaman: sistem sangat mengandalkan fotografi penuh layar untuk menciptakan kedalaman visual; bayangan dan gradien digunakan dengan hemat sehingga foto melakukan pekerjaan berat
• Lockup karangan bunga laurel: penghargaan Favorit Tamu menggunakan dua ilustrasi SVG laurel yang memberikan angka peringkat yang sebaliknya datar sebuah kehadiran seremonial, seperti piala
• Ikon kategori render 3D: ikon Rumah/Pengalaman/Layanan memiliki pencahayaan internal lembut mereka sendiri dan bayangan lempar halus yang dipanggang dalam karya seni — satu-satunya tempat merek memperbolehkan ilustrasi "dimensional"

7. Yang Boleh dan Tidak Boleh

Yang Boleh

• Cadangkan Rausch #ff385c untuk aksi utama dan indikator tab aktif — jangan pernah mengencerkannya dengan penggunaan dekoratif.
• Biarkan fotografi bernafas — potongan 4:3 dengan sudut membulat 14–20 px, tidak ada teks yang dilapisi, tidak ada penutup gradien.
• Gunakan Ink Black #222222 untuk setiap lapisan teks di bawah Rausch — ini adalah hampir-hitam sistem, tidak pernah #000000 yang sesungguhnya.
• Pasangkan ikon bergambar 3D pemilih kategori tri-tab dengan tipografi datar — jangan mencampur gaya ilustrasi dalam satu permukaan.
• Tumpuk tiga bayangan buram rendah (~2%, 4%, 10%) untuk menciptakan elevasi panel pemesanan yang khas.
• Gunakan border Hairline Gray #dddddd 1 px untuk setiap pembagi kartu-ke-kartu dan baris-ke-baris.
• Perlakukan panel pemesanan sebagai tetap di desktop, mengempis menjadi bilah pesan yang ditambatkan di bawah di mobile.
• Gunakan spasi 4–8 px dalam grup metadata dan 24 px antar kartu — kepadatan informasi adalah disengaja.

Yang Tidak Boleh

• Jangan memperkenalkan warna aksen sekunder di luar palet tingkat produk Rausch / Plus Magenta / Luxe Purple.
• Jangan menempatkan teks di dalam foto — keterangan selalu duduk di bawah gambar, tidak pernah dilapisi.
• Jangan menggunakan label huruf kapital semua kecuali untuk peran superskrip 8 px tunggal.
• Jangan membulatkan tombol ikon ke apapun selain 50% — bulat adalah geometri khas sistem.
• Jangan menambahkan bayangan ke kartu listing — mereka duduk di atas kanvas putih tanpa elevasi.
• Jangan menggunakan latar belakang gradien — satu-satunya gradien dalam sistem adalah sapuan Rausch → magenta yang sempit pada wordmark.
• Jangan menggunakan bobot font 400-regular — bobot tubuh Airbnb Cereal adalah 500.
• Jangan mengganti Airbnb Cereal VF dengan typeface display yang berbeda — sistem ini sengaja satu keluarga.

8. Perilaku Responsif

Breakpoint

Airbnb mendeklarasikan ~60 breakpoint (artefak waktu desain dari pustaka komponen mereka), tetapi pergeseran tata letak yang berarti terjadi pada kumpulan yang jauh lebih kecil:

Nama	Lebar	Perubahan Utama
Ultra-wide	≥1760 px	Kisi listing 6 kolom, lebar konten maksimum 1760–1920 px
Desktop XL	1440–1759 px	Kisi 5 kolom, nav penuh terlihat, panel pemesanan tetap di rel kanan
Desktop	1128–1439 px	Kisi 4 kolom, panel pemesanan tetap bertahan
Laptop	1024–1127 px	Kisi 3–4 kolom, nav kategori tetap horizontal
Tablet	800–1023 px	Kisi 3 kolom, pencarian global dapat mengempis menjadi pil satu baris
Tablet kecil	550–799 px	Kisi 2 kolom, panel pemesanan turun ke blok inline lebar penuh
Mobile	375–549 px	Tata letak bertumpuk 1 kolom, bilah tab yang disematkan di bawah muncul (Jelajahi / Daftar Keinginan / Masuk)
Mobile kecil	<375 px	Padding tepi mengencang ke 16 px; ikon pemilih kategori menyusut ke ~28 px

Target Sentuh

Semua elemen interaktif memenuhi atau melebihi 44×44 px. Keluarga tombol ikon bulat secara khusus berukuran 32–44 px dengan padding area hit yang diperluas 8–12 px. Tombol Pesan Rausch utama adalah ~48 px tinggi. Area hit pemilih kategori tri-tab adalah seluruh persegi panjang label-plus-ikon (biasanya ~64×80 px per tab).

Strategi Mengempis

• Nav: Nav atas mempertahankan wordmark Airbnb + pemilih tri-tab di tablet dan lebih besar; di mobile pemilih meluncur tepat di bawah pil pencarian, dan kontrol globe/avatar berpindah ke bilah tab yang ditambatkan di bawah.
• Bilah pencarian: Pil tiga segmen (Di mana / Kapan / Siapa) dengan tombol kirim bulat Rausch di desktop; mengempis menjadi pil "Mulai pencarian Anda" satu baris di mobile, mengetuknya membuka lembar pencarian layar penuh.
• Panel pemesanan: Rel kanan tetap pada ≥1128 px; inline dalam kolom konten utama antara 800–1127 px; pil "Pesan" yang disematkan di bawah pada <800 px.
• Kisi listing: Mengalir 6 → 5 → 4 → 3 → 2 → 1 kolom di seluruh breakpoint.
• Kisi gambar halaman detail: Tata letak lima gambar (1 besar + 4 kecil) di desktop; menjadi karusel penuh layar yang dapat digesek di mobile dengan indikator titik halaman.
• Footer: Tata letak 3 kolom mengempis menjadi satu kolom bertumpuk pada <800 px.

Perilaku Gambar

• loading="lazy" universal, dengan thumbnail pratinjau im_w= yang diparameter URL yang dikaburkan disajikan terlebih dahulu
• Gambar responsif menggunakan CDN muscache.com Airbnb dengan parameter kueri im_w untuk pengiriman berbasis lebar (im_w=240, im_w=720, im_w=1200, im_w=2400)
• Tidak ada pemotongan art-direction — gambar yang sama diskalakan naik/turun di seluruh breakpoint
• Karusel secara otomatis menyesuaikan tinggi foto untuk mempertahankan rasio 4:3 yang konsisten terlepas dari aspek sumber

9. Panduan Prompt untuk Agen

Referensi Warna Cepat

• CTA utama: "Rausch (#ff385c)"
• Latar belakang halaman: "Canvas White (#ffffff)"
• Sub-permukaan: "Soft Cloud (#f7f7f7)"
• Teks heading/tubuh: "Ink Black (#222222)"
• Teks sekunder: "Ash Gray (#6a6a6a)"
• Border/pembagi: "Hairline Gray (#dddddd)"
• Kesalahan: "Error Red (#c13515)"
• Tautan info: "Info Blue (#428bff)"
• Aksen tingkat Luxe: "Luxe Purple (#460479)"
• Aksen tingkat Plus: "Plus Magenta (#92174d)"

Contoh Prompt Komponen

• "Buat tombol Pesan utama: latar belakang Rausch (#ff385c), label putih Airbnb Cereal berbobot 500 pada 16 px, padding 14 px × 24 px, border-radius 8 px, tanpa bayangan. Pada aktif/ditekan tambahkan transform: scale(0.92) dengan cincin fokus Ink Black 2 px (0 0 0 2px #222222)."
• "Buat kartu listing dengan foto penuh layar 4:3 pada border-radius 14 px, tanpa bayangan kontainer; di bawah gambar tumpuk tiga baris teks dengan celah 4 px: nama kota pada 16 px 600 Ink Black, tipe sewa pada 14 px 500 Ash Gray (#6a6a6a), dan rentang harga dalam 16 px 500 Ink Black dengan sufiks per malam 14 px."
• "Rancang panel pemesanan tetap: latar belakang putih, border-radius 14 px, border Hairline Gray (#dddddd) 1 px, bayangan elevasi 3 lapis (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 24 px, lebar 370 px, disematkan 120 px di bawah bagian atas viewport di desktop. Konten: headline harga, pemilih tanggal, dropdown tamu, CTA utama Rausch, dan disclaimer Ash Gray 12 px Anda belum akan ditagih."
• "Buat pemilih kategori tri-tab: tiga tab dengan lebar yang sama berlabel Rumah, Pengalaman, Layanan; setiap tab memiliki ikon bergambar render 3D ~48 px (rumah, balon, bel) di atas label Ink Black berbobot 500 16 px; tab aktif mendapat garis bawah Ink Black 2 px; tambahkan pil BARU putih kecil 12 px 700 pada latar belakang biru navy gelap di kanan atas ikon Pengalaman dan Layanan."
• "Render lockup penghargaan Favorit Tamu: angka peringkat terpusat pada 52 px berbobot 700 Ink Black, diapit kiri dan kanan oleh karangan bunga SVG laurel yang digambar tangan pada ~48 px tinggi; di bawah, label huruf kapital FAVORIT TAMU 12 px 700 dengan tracking 0,32 px; sub-label pada 14 px 500 Ash Gray; blok lebar penuh duduk langsung di atas kanvas putih tanpa border kontainer."

Panduan Iterasi

Saat menyempurnakan layar yang ada yang dibuat dengan sistem desain ini:

1. Fokus pada SATU komponen sekaligus.
2. Rujuk nama warna spesifik dan kode hex dari dokumen ini (mis. "Ink Black #222222", bukan "abu-abu gelap").
3. Gunakan deskripsi bahasa alami di samping pengukuran ("elevasi tiga lapis halus" daripada string bayangan panjang).
4. Deskripsikan "rasa" yang diinginkan ("seperti majalah, fotografi-pertama" vs "utilitas padat").
5. Selalu default ke Airbnb Cereal VF berbobot 500 untuk tubuh dan 600–700 untuk penekanan — tidak pernah 400.
6. Jaga merah muda Rausch tetap langka — jika lebih dari satu elemen berwarna Rausch muncul per viewport, pertimbangkan apakah salah satunya harus dinetralisasi.

Celah yang Diketahui

• Kartu kisi listing beranda: kisi kartu properti utama (permukaan visual utama airbnb.com) tidak sepenuhnya ditangkap dalam screenshot beranda yang diekstrak — konten hanya dimuat sebagian. Spesifikasi Kartu Listing di atas disimpulkan dari struktur kisi Inspirasi dan konvensi Airbnb yang lebih luas; konfirmasikan rasio aspek yang tepat dan hierarki metadata terhadap situs langsung sebelum digunakan dalam produksi.
• Ikon kategori Pengalaman: ikon bergambar 3D untuk Rumah / Pengalaman / Layanan disajikan sebagai aset raster; spesifikasi file sumber yang tepat (SVG vs PNG, dimensi piksel yang dirender) tidak didokumentasikan di sini.
• Timing animasi dan transisi: tidak ditangkap — ruang lingkup ekstraksi statis.
• Mode gelap: Airbnb tidak mengirimkan mode gelap asli dalam permukaan produk yang diekstrak; dokumen ini hanya mendeskripsikan tema mode terang tunggal.