Airbnb
Isang tahimik na puting gallery wall na may isang coral red bookmark
Ang Airbnb ay gumagamit ng istilo ng "puting canvas," kung saan nangingibabaw ang potograpiya: halos bawat screen ay isang tahimik na monochrome frame, na nagbibigay-daan sa mga full-screen na larawan ng mga ari-arian na maiparating ang pangkalahatang impresyon, na may iisang, mayamang coral-red accent (Rausch) bilang tanging kulay na nagpapahiwatig ng aksyon. Ang typeface ay isang geometric sans-serif (Airbnb Cereal VF)—karamihan ay maliliit, may kumpiyansang sukat—para sa body text, interface, at mga heading ng seksyon (22-22)—na may masikip na negatibong linya at malawak na line spacing, na ginagawang mababasa ang mga card na may siksik na teksto. Ang interface ay patag, walang frame, at bilugan: 12-3 radii sa mga card at kontrol, bilog na hugis-pill na mga button, at malambot at patong-patong na mga anino para lamang sa mga kitang-kitang elemento tulad ng search bar. Ang lahat ng iba pa—mga card, mga item sa listahan, mga link—ay umaasa sa puting espasyo at pinong linya sa halip na mga chrome accent.
Isang full-width na layout na walang takdang maximum width limit—ang nilalaman ay umaabot mula gilid hanggang gilid sa loob ng viewable area, na may humigit-kumulang 40px ng horizontal padding sa bawat gilid sa desktop. Ang hero ay isang lumulutang na search capsule, na nakasentro sa isang neutral na puting canvas na walang larawan o pamagat—ang search bar AY ang hero. Sa ibaba ng paghahanap, ang pahina ay lilipat sa mga patayong nakasalansan, pahalang na nag-i-scroll na seksyon (apat na row ang makikita: Mga Tampok na Bahay, Magagandang Hotel, Ibang Lungsod, Available Next Month), bawat isa ay humigit-kumulang 320px ang taas, na pinaghihiwalay ng 48px na patayong gutter. Ang bawat seksyon ay gumagamit ng 7-card grid na may horizontal overflow at arrow navigation. Ang footer ay isang 3-column grid ng mga link sa isang #f7f7f7 background, na sinusundan ng isang bottom bar na may impormasyon sa copyright, mga opsyon sa wika/pera, at mga icon ng social media. Ang navigation ay isang nakapirming top bar na may nakasentrong tab navigation at mga kontrol na nakahanay sa kanan.
Nangingibabaw ang potograpiya sa sistemang biswal, kung saan ang mga full-screen na larawan ng mga listahan ng real estate ang nagsisilbing pangunahing uri ng nilalaman. Lahat ng larawan ay mainit at maliwanag na mga kuha sa loob at labas ng mga totoong bahay at hotel, na pinoproseso gamit ang natural na pagwawasto ng kulay (nang walang mabibigat na filter o duotone). Ang mga larawan ay mahigpit na pinutol gamit ang 1:1 aspect ratio para sa mga listing card, na pumupuno sa gilid ng card nang walang mga bleed. Ang mga icon sa buong interface ay may monochrome outline (line weight ~16–16), na ginagamit nang matipid para sa mga kategorya ng nabigasyon at mga kontrol ng UI. Ang logo ang tanging multicolor graphic element (Rausch). Walang mga ilustrasyon, walang 3D render, walang abstract graphics—ang visual na wika ay purong potograpiya at minimalist na monochrome iconography sa isang malambot na puting canvas.
Paleta
Tatak
- Rausch
#ff385c— Ang pula ay ginagamit bilang pandekorasyon na palamuti para sa mga icon, karatula, at maliliit na detalyeng grapiko. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon. - Rausch 600
#e00b41— Isang pinindot at madilim na bersyon ng pinturang Rausch para sa mga ibabaw na ginagamit bilang brand accents sa mga hover/active na ibabaw.
Neutral
- Hof
#222222— Ang body copy, pangunahing teksto, mga heading, mga balangkas ng icon, at nakabaligtad na background ay isang neutral na kulay na malapit sa itim, na nagsisilbing batayan para sa buong sistemang achromatic. - Foggy
#6a6a6a— Pangalawang teksto, mga naka-mute na caption, pantulong na teksto, hindi pinaganang pagpuno ng icon, at discreet metadata sa ibaba ng mga pamagat ng card. - Grey 500
#c1c1c1— Hindi pinagana ang teksto, placeholder text sa mga input field, at naka-mute na icon na nagbabalangkas kung saan kailangan ang pagbawas ng diin sa status. - Bebe
#ebebeb— Manipis na mga hangganan, mga nakasalungguhit na input field, mga separator sa pagitan ng mga linya ng listahan, at mga banayad na linyang naghahati. - Deco
#dddddd— Mga larawan sa background ng card para sa mga hindi aktibong container, placeholder, at mga disabled na estado ng card. - Faint
#f7f7f7— Ang larawan sa background ng page canvas, footer surface, at hover state para sa mga interactive na elemento ay malambot at kremang kulay na nagpapaiba sa pahinang ito mula sa mga purong puting card.
Tipograpiya
mula 11 hanggang 28px · 5 hakbang
- Airbnb Cereal VF — kapalit: Circular · mga balangkas 400, 500, 600, 700 · Isang pasadyang geometric sans-serif na font na idinisenyo para sa Airbnb. Ang body text ay nakaposisyon sa 14px/400, ang mga UI label ay 16px/500, ang mga section heading ay 20px/600, 22px/500 na may masikip na espasyo ng mga letra na -0.02em, at ang mga page heading ay 28px/700. Ang mga negatibong espasyo ng letra ay bumababa kasabay ng pagtaas ng laki, isang katangian ng mga geometric sans-serif na font sa mas malalaking screen. Pinapagana ang feature na "salt" alternate glyph.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 12px |
| Radius ng buton | 9999px |
| Radius ng card | 12px |
| Mga anino | malambot na anino |
| Sa pagitan ng mga seksyon | 48px |
| Lapad ng pahina | 1440px |
Gagawa ang AI ng website mo sa estilong Airbnb at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Apple (España) — puting display case ng gallery
- Silencio — Isang puting silid na may mga lumulutang na artifact. Isang gallery display na gawa sa mainit na papel, kung saan ang bawat elemento ay pumuwesto laban sa isang negatibong backdrop ng volume, at ang katahimikan ay isang sinadyang desisyon sa disenyo.
- Oakâme — Isang Provençal workshop na nasisinagan ng araw na inukit mula sa mainit na bato
- Nike — Isang monochrome gallery ng mga nagawa sa palakasan – mga puting pader, ang produkto bilang isang likhang sining, chrome na natunaw sa likuran
- Arc — industriyal na puting gallery sa ibabaw ng tubig sa hatinggabi
- Rivian — Isang de-kuryenteng monolito sa kongkretong pader ng gallery. Inilalarawan ng Rivian ang bawat sasakyan bilang isang iskultura laban sa isang malawak na puting espasyo, na may napakalaking tipograpiya na nagiging isang elemento ng arkitektura, at isang mainit na dilaw na sumisira sa monokromatikong atmospera, tulad ng sikat ng araw sa isang matte na ibabaw.
- Analogue — Itim na display case ng gallery – mga paninda na nakapatong sa kawalan
- ddna — mainit na display case ng museo sa hindi ginamot na linen
- Zellerfeld — Isang pagawaan ng iskultor sa puting marmol—ang mga monolitikong ibabaw ng pedestal, isang kislap ng kobalt, isang bulong ng maliliit na letra mula sahig hanggang kisame
- UY Studio — Ang galeriyang bato ng monasteryo ay isang tahimik na espasyo na may mga pader na kongkreto, kung saan nakatayo ang mga bote ng pabango sa mga puting plinth, na naliliwanagan ng isang 400-watt na lampara at apat na mainit na kulay abong bombilya.
- Basic.Space — galeriya ng kuratoryal sa puting marmol
- COS — isang naka-istilong gallery na may mga puting pader