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

Design System Inspired by Airbnb

Category: E-Commerce & Detailhandel Reismarktplaats. Warm koraalaccent, fotografiegedreven, afgeronde interface.

1. Visueel Thema & Sfeer

Airbnbs ontwerp van 2026 voelt als een reistijdschrift dat toevallig een app is — makeloos witte doeken maken plaats voor volledigscherm fotografie, en de interface zelf verdwijnt zodat de listings kunnen ademen. De kenmerkende Rausch koraalroze (#ff385c) wordt spaarzaam maar onmiskenbaar gebruikt: zoek-CTA, actieve tab-indicator, primaire actieknop, en het occasionele prijslabel of wenslijst-hart. Al het andere is een gedisciplineerde grijsschaal, waarbij #222222 bijna elke tekstregel draagt.

Wat het systeem onmiskenbaar Airbnb maakt, is hoeveel vertrouwen het in content stelt. Foto's van accommodaties worden op heroformaat weergegeven, 4:3 met een rand-aan-rand radiusbehandeling. Categoriewissel verloopt via een tri-tab-kiezer (Woningen / Ervaringen / Diensten) die 3D gerenderde geïllustreerde iconen gebruikt (een puntdakhuis, een heteluchtballon, een servicebel) — fysiek, tactiel, bijna speelgoedachtig — gecombineerd met scherpe Airbnb Cereal VF-labels. Dit is het zeldzame consumentenproduct waarbij 3D renders en puur typografische interface zonder spanning naast elkaar bestaan.

Het nieuwste oppervlak is de Ervaringen-productlijn — hetzelfde chroom, maar rijkere kaartdichtheid, meer fotografie en een centraal verankerd boekingspaneel met een vaste rechterrail voor de prijs. Detailpagina's van listings (zowel kamers als ervaringen) volgen een strak template: volledigscherm hero-afbeeldingsraster → overlappende afgeronde boekingskaart (vastgezet bij scrollen) → voorzieningen → beoordelingen (Gastfavoriet-awards gebruiken een grote gecentreerde 4.81-beoordeling met een laurierkransopzet) → kaart → gastprofielpagina → openbaarmakingen. Het ritme is consistent, of u nu een kamer of een jachttour boekt.

Kernkenmerken:

• Rausch koraalroze (#ff385c) als enkelvoudige accentmerkkleur, alleen gebruikt voor primaire CTA's en de zoekknop
• Volledigscherm fotografie in 4:3 / 16:9 met zachte hoekafronding (14–20 px) als primair visueel vocabulaire
• 3D gerenderde categorieiconen gecombineerd met typografische tabs — de ene plek waar het systeem illustratie toestaat
• Ronde 50% icoorknoppen (pijl terug, delen, favoriet, carrouselpijlen) verspreid door de interface
• Airbnb Cereal VF draagt elk label, van de juridische voetnoot van 8 px tot de sectiekopregel van 28 px — een eenfamilie-systeem
• Productlaag-kleurcodering: Airbnb Plus (magenta #92174d), Airbnb Luxe (dieppaars #460479), Airbnb (Rausch koraal)
• Gastfavoriet-award-opzet — gecentreerd reusachtig beoordelingsnummer tussen twee laurierkransen, een van de meest herkenbare momenten in het systeem
• Vastgezet boekingspaneel met een prijs → datums → gasten-stapel, verankerd aan de rechterrail op desktop, getransformeerd naar een onderaan verankerde "Reserveer"-balk op mobiel
• Vaste onderste mobiele navigatie (Verkennen / Verlanglijsten / Inloggen) met een actieve Rausch-tint

2. Kleurenpalet & Rollen

Primair

• Rausch (#ff385c): De kenmerkende koraalroze van het merk. CSS-variabele --palette-bg-primary-core. Gebruikt voor: primaire "Reserveer"-knop, zoekknop, actieve tab-onderstreping, wenslijst-hartopvulling, prijsnadruk. De kleur met de hoogste zichtbaarheid op elke pagina.

Secundair & Accent

• Deep Rausch (#e00b41): Een meer verzadigde variant. CSS-variabele --palette-bg-tertiary-core. Gebruikt voor ingedrukte/actieve knoepstatussen en gradiënteindpunten.
• Plus Magenta (#92174d): CSS-variabele --palette-bg-primary-plus. De merkkleur voor de Airbnb Plus-productlaag — een hogere gecureerde listingaanbieding.
• Luxe Purple (#460479): CSS-variabele --palette-bg-primary-luxe. De merkkleur voor de Airbnb Luxe-productlaag — villa/landgoed-verhuur.
• Info Blue (#428bff): CSS-variabele --palette-text-legal. Gebruikt voor juridische/informatieve links (voorwaarden, privacy, openbaarmakingen) — de enige niet-monochrome linkkleur in het systeem.

Oppervlak & Achtergrond

• Canvas White (#ffffff): De standaard paginaachtergrond. Elke kaart, elke container, elke detailpagina begint hier.
• Soft Cloud (#f7f7f7): Subtiele suboppervlaktetint gebruikt op voettekst-achtergronden, kaartweergave-wrappers en "alles-andere"-secties die terug willen treden van het primaire wit.
• Hairline Gray (#dddddd): Alomtegenwoordige 1-px-randkleur — scheidt kaarten, voorzieningenrijen, beoordelingspanelen, voettekstkolommen. Het werkpaard van het lay-outsysteem.

Neutralen & Tekst

• Ink Black (#222222): CSS-variabele --palette-text-primary. Het bijna-zwart van het systeem. Elke koptekst, elke alinea, elk navigatielabel, elke prijs. Gebruikt voor ~90% van alle tekst op een pagina.
• Charcoal (#3f3f3f): CSS-variabele --palette-text-focused. Gebruikt in gefocuste invoertekst en nadrukstekst van één stap lager.
• Ash Gray (#6a6a6a): CSS-variabele --palette-bg-tertiary-hover. Secundaire labels, "Cottage-verhuur"-ondertitelstijl onder stadsnamen, gedempte voettekstlinks.
• Mute Gray (#929292): CSS-variabele --palette-text-link-disabled. Uitgeschakelde knoppen en lage-prioriteit metadata.
• Stone Gray (#c1c1c1): Tertiaire scheidingslijnen, icoonstroeken, plaatshouder-avatars.

Semantisch & Accent

• Error Red (#c13515): CSS-variabele --palette-text-primary-error. Formuliervalidatiefouten, waarschuwingen voor destructieve acties.
• Deep Error (#b32505): CSS-variabele --palette-text-secondary-error-hover. Ingedrukte/actieve varianten van foutstatus.
• Translucent Black (rgba(0, 0, 0, 0.24)): CSS-variabele --palette-text-material-disabled. Uitgeschakelde materiaalstijl-labels.

Gradiëntensysteem

Airbnbs merkgradiënt verschijnt spaarzaam, typisch alleen op het woordmerk en het gebrandmerkte zoekknop-moment:

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

Deze koraal → magenta-sweep is het "gebrandmerkte moment" — nooit gebruikt als volledig oppervlak, alleen als smalle pilvulling of logobehandeling.

3. Typografieregels

Lettertypefamilie

• Airbnb Cereal VF (primair en enig): Het gepatenteerde variabelgewicht sans-serif dat het hele systeem draagt. Fallbacks (in volgorde): Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif.

In de geëxtraheerde tokens waargenomen gewichten: 500, 600, 700. Geen 400-regulier — het "broodtekst"-gewicht van het systeem is 500, wat elk tekstblok een subtiele extra dichtheid geeft die als zelfverzekerd en doordacht leest.

OpenType-functies: salt (stilistische alternatieven) wordt gebruikt op de compacte 11-px- en 14-px-600-gewichtslabels — waarschijnlijk voor nauwere cijfers en speciale-tekenvorming. Geen ligatuur- of gebroken-cijfer-functies waargenomen.

Hiërarchie

Rol	Grootte	Gewicht	Regelhoogte	Letterafstand	Opmerkingen
Sectiekop	28 px / 1,75 rem	700	1,43	0	"Inspiratie voor toekomstige uitstapjes" — koppen op paginaniveau
Subsectiekop	22 px / 1,38 rem	500	1,18	-0,44 px	"Wat deze plek biedt", "Maak kennis met de hosts" — inhoudsscheidingen
Kaarttitel	21 px / 1,31 rem	700	1,43	0	Beoordelingspaneel koppen, hoofdtitels van kaarten
Listingtitel	20 px / 1,25 rem	600	1,20	-0,18 px	"Kleine Groepsjachttour, Onbeperkte Wijn & Fruit" — listingkoppen op detailpagina's
Ondertitel Vet	16 px / 1,00 rem	600	1,25	0	Hostnaam, stadsnaam
Broodtekst Medium	16 px / 1,00 rem	500	1,25	0	Primaire broodtekst op detailpagina's
Knop Groot	16 px / 1,00 rem	500	1,25	0	"Reserveer", "Word host"
Knop Standaard	14 px / 0,88 rem	500	1,29	0	Standaard knooplabels
Link	14 px / 0,88 rem	500	1,43	0	Navigatielinks, voettekstlinks
Bijschrift Medium	14 px / 0,88 rem	500	1,29	0	Metadata, ondertitelregels ("Cottage-verhuur", "Villa-verhuur")
Bijschrift Vet	14 px / 0,88 rem	600	1,43	0	salt-functie ingeschakeld — numerieke statistieken, kleintekst-nadruk
Bijschrift Klein	13 px / 0,81 rem	400	1,23	0	Beoordelingsdatums, micro-metadata
Micro Standaard	12 px / 0,75 rem	400	1,33	0	Voettekst-disclaimers, juridische micro-kopij
Micro Vet	12 px / 0,75 rem	700	1,33	0	"NIEUW"-pillabels
Badge Hoofdletters	11 px / 0,69 rem	600	1,18	0	salt-functie — compacte categorie-/statusbadges
Superscript	8 px / 0,50 rem	700	1,25	0,32 px	Hoofdletters — prijsvoetnoten, decimaalstaarten

Principes

• Één familie, veel gewichten. Airbnb Cereal VF behandelt alles van juridische tekst van 8 px tot paginakoppen van 28 px — de visuele identiteit komt uit de familie zelf, niet uit lettertype-mengen.
• 500 is het nieuwe 400. Het "reguliere" gewicht van het systeem is 500, wat elke alinea een iets zelfverzekerder textuur geeft dan de webstandaard.
• Negatieve tracking alleen bij displaytypen. Koppen van 20 px en groter comprimeren de tracking met -0,18 tot -0,44 px om gebeiteld aan te voelen; broodtekstformaten blijven op 0 tracking voor leesbaarheid.
• Strakke regelhoogten voor koppen, ruimhartig voor broodtekst. Displaytypen draaien op 1,18–1,25 (strak); broodtekst en bijschriften openen naar 1,43 voor langvorm comfort.
• Geen hoofdletters behalve op 8 px. De enige hoofdlettertransformatie in het systeem is het 8-px-superscript — overal anders doet zinschrift met subtiele gewichtsverschuivingen het werk.

Opmerking over Lettertype-substituten

Airbnb Cereal VF is gepatenteerd. Het dichtstbijzijnde open-source substituut is Circular Std (nog commercieel) of Inter (gratis, Google Fonts) met letterafstand verminderd met -0,01 em bij displayformaten. Voor strikte merkentrouw rendert de gedocumenteerde fallback-keten (Circular, -apple-system, system-ui) acceptabel op macOS/iOS waar system-ui wordt omgezet naar San Francisco, dat vergelijkbare proporties heeft.

4. Component-opmaak

Knoppen

Primaire CTA ("Reserveer", "Zoeken", "Datums toevoegen")

• Achtergrond: Rausch #ff385c
• Tekst: Canvas White #ffffff, Airbnb Cereal 500, 16 px
• Opvulling: ~14 px verticaal, 24 px horizontaal
• Radius: 8 px (rechthoekig) of 50% (ronde icovariant)
• Rand: geen
• Actief/ingedrukt: transform: scale(0.92) plus een 2-px-#222222-focusring op 0 0 0 2px

Secundaire Knop ("Word host", omrande tertiaire acties)

• Achtergrond: #ffffff
• Tekst: Ink Black #222222, Airbnb Cereal 500, 14–16 px
• Opvulling: 10 px 16 px
• Radius: 20 px (pil) of 8 px (rechthoekig)
• Rand: 1 px solid Hairline Gray #dddddd

Alleen-icoon Ronde Knop (pijl terug, delen, favoriet, carrouselbesturingen)

• Achtergrond: #f2f2f2 (licht gebroken wit) of wit met 1-px transparante zwarte rand
• Icoon: #222222 contourstreek, 16–20 px
• Grootte: 32–44 px diameter
• Radius: 50%
• Actief/ingedrukt: transform: scale(0.92); subtiele 4-px witte ring 0 0 0 4px rgb(255,255,255) om te scheiden van kleurrijke fotografieachtergronden

Uitgeschakelde Knop

• Achtergrond: #f2f2f2
• Tekst: Stone Gray #c1c1c1
• Doorzichtigheid: 0,5

Piltab-knop (categoriekiezer "Woningen / Ervaringen / Diensten")

• Achtergrond: transparant
• Tekst: Ink Black #222222, Airbnb Cereal 500, 16 px
• Opvulling: 8 px 14 px
• Actieve staat: 2-px Ink Black-onderstreping onder het label
• Gecombineerd met een 3D gerenderd geïllustreerd icoon van 36–48 px boven het label

Kaarten & Containers

Listingkaart (beranda-raster, zoekresultaten)

• Achtergrond: #ffffff
• Radius: 14 px op de afbeelding, tekst zit direct eronder op transparante achtergrond
• Afbeelding: 4:3-beeldverhouding, volledig scherm, afgerond met dezelfde 14-px radius
• Opvulling: geen op de buitenste container; 12 px ruimte tussen afbeelding en metadatarijen
• Schaduw: geen — scheiding komt van witruimte en de intrinsieke radius van de foto
• Metadatapatroon: Stad/regio op regel 1 (16 px 600), afstand/duur op regel 2 (14 px 500 Ash Gray), datumbereik op regel 3, prijsregel met "per nacht" onderaan

Detailpagina Boekingspaneel (vaste rechterrail op kamer-/ervaringspagina's)

• Achtergrond: #ffffff
• Radius: 14–20 px
• Rand: 1 px solid Hairline Gray #dddddd
• Schaduw: 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 — een gestapelde drielaagse subtiele verhoging
• Opvulling: 24 px
• Breedte: ~370 px, vastgezet 120–140 px onder de bovenkant van de viewport
• Inhoud: prijskop → datumkiezer → gastenkeuzelijst → primaire CTA → voetnoot "U wordt nog niet in rekening gebracht"

Voorzieningenraster-kaart (op listingdetailpagina's)

• Achtergrond: #ffffff
• Rand: 1 px solid Hairline Gray #dddddd op rijniveau (niet per item)
• Opvulling: 16 px verticaal per voorzieningsrij
• Icoon + label-patroon: 24-px contouricoon links, 16-px-500-gewichtslabel rechts

Beoordelingskaart (individuele beoordeling op detailpagina's)

• Achtergrond: #ffffff, geen rand
• Opvulling: 0 (afhankelijk van rasterafstanden)
• Inhoud: 40-px ronde avatar + 16-px-600-gewichtsnaam + 14-px-400 Ash Gray datum op één rij, dan 14-px-500 broodtekstalinie eronder

Invoer & Formulieren

Zoekbalk (primaire startpagina)

• Achtergrond: #ffffff
• Rand: 1 px solid Hairline Gray #dddddd om alle drie segmenten (Waar / Wanneer / Wie)
• Radius: 32 px (volledige pil)
• Schaduw: rgba(0, 0, 0, 0.04) 0 2px 6px 0 — subtiel zwevend gevoel
• Structuur: drie segmenten gescheiden door dunne verticale scheidingslijnen, elk segment heeft een 12-px-500-label boven een 14-px-500-plaatshouder
• Verzenden: Rausch ronde icoknop aan de rechterrand, 48-px diameter

Tekstinvoer (generieke formulieren)

• Achtergrond: #ffffff
• Rand: 1 px solid Hairline Gray #dddddd
• Radius: 8 px
• Opvulling: 14 px 16 px
• Focus: rand schakelt over naar Ink Black, voegt 0 0 0 2px zwarte buitenste ring toe
• Fout: rand schakelt over naar #c13515 (Error Red), helptekst gebruikt dezelfde kleur

Datumkiezer

• Kalenderraster: 7-kolomindeling, ronde 50% dagcellen 40–44 px breed
• Geselecteerd bereik: Ink Black #222222 achtergrond met witte cijfers
• Start-/eindankers: grotere gevulde cirkels; middendatums gebruiken Soft Cloud #f7f7f7-tint

Navigatie

Bovenste Nav (Desktop)

• Hoogte: ~80 px
• Achtergrond: #ffffff
• Links: Airbnb woordmerk+logo-opzet in Rausch (102×32 px)
• Midden: tri-tab categoriekiezer (Woningen / Ervaringen / Diensten) met 3D-iconen van 36–48 px gestapeld boven 16-px-500-labels; actieve tab heeft 2-px Ink Black-onderstreping
• Rechts: "Word host"-tekstlink, dan 32-px ronde bol (taal), dan 36-px hamburgermenu avatar
• Onderste rand: 1 px solid Hairline Gray #dddddd

Bovenste Nav (Mobiel)

• Eénregels zoekpil neemt de volledige breedte in: "Begin uw zoekopdracht"-plaatshouder met klein vergrootglas-icoon
• Eronder: tri-tab categoriekiezer blijft bestaan (Woningen / Ervaringen / Diensten) — geïllustreerde iconen krimpen naar ~28 px
• Onderaan vaste tabbar: Verkennen (actieve status Rausch) / Verlanglijsten / Inloggen — 24-px-iconen boven 12-px-labels

Listing Detailpagina Secundaire Nav

• Vaste horizontale scroll van ankerlinks (Foto's · Voorzieningen · Beoordelingen · Locatie · Host) verschijnt bij scrollen voorbij de hero-afbeelding
• Hoogte: 56 px
• Onderste rand: 1 px solid Hairline Gray

Afbeeldingsbehandeling

• Primaire beeldverhoudingen: 4:3 voor listingrasters op de startpagina, 16:9 voor ervaring-herofotografie, 1:1 voor avatars
• Radius: 14 px op listingraster-afbeeldingen, 20 px op detailpagina-herofotoframes, 50% op avatars
• Afbeeldingsraster op detailpagina's: vijf-foto-raster met één grote afbeelding links (50% breedte) en vier kleinere foto's in een 2×2-raster rechts, alle gedeeld in de buitenste afgeronde container van 20 px
• Lazy loading: intensief gebruik van loading="lazy" met vervaagde plaatshoudervoorbeelden
• Carrousel: ronde 32-px pijlknoppen overlappen de afbeelding, verticaal gecentreerd; puntindicatoren zitten 12 px boven de onderrand

Kenmerkende Componenten

Gastfavoriet-award-opzet (prominent weergegeven op detailpagina's van listings met hoge beoordeling)

• Gecentreerd beoordelingsnummer weergegeven op 44–56 px met 700-gewicht
• Twee handgetekende laurierkrans-SVG-illustraties flankeren links en rechts op ~48 px hoogte
• Eronder: "Gastfavoriet"-label op 12 px 700 hoofdletters met 0,32 px-tracking, en een kort sub-label op 14 px 500 Ash Gray
• Volledige breedte blok, geen containerrand — zit direct op wit canvas

Tri-Tab Categoriekiezer (verschijnt bovenaan elk bladeroppervlak)

• Drie tabs: Woningen / Ervaringen / Diensten
• Elke tab: 3D gerenderd geïllustreerd icoon (~48 px hoog) boven 16-px-500-label
• Ervaringen en Diensten dragen momenteel een kleine donkerblauwe "NIEUW"-pil (12-px-700 witte tekst op donkerblauwe achtergrond) zwevend rechtsboven het icoon
• Actieve tab: 2-px Ink Black-onderstreping onder het label

Inspiratiestedenkader (startpagina "Inspiratie voor toekomstige uitstapjes")

• 6-kolomsraster van bestemmingslinks op desktop, 2 kolommen op mobiel
• Elke cel: 16-px-600-stadsnaam op regel 1, 14-px-500 Ash Gray-verhuurtype-ondertitel op regel 2 ("Cottage-verhuur", "Villa-verhuur")
• Geen afbeeldingen — alleen-tekstraster
• Bovenaan met tabs per categorie (Populair / Kunst & cultuur / Strand / Bergen / Buiten / Activiteiten / Reistips & inspiratie / Airbnb-vriendelijke appartementen) — actieve tab heeft 2-px-onderstreping en gewichtsverschuiving

Vaste Reserveerkaart (listingdetailpagina's)

• Blijft vast 120 px onder de bovenkant van de viewport op desktop terwijl de gebruiker voorbij de hero scrolt
• Klapt in tot een volledigbreedte onderbalk op mobiel met een "Vanaf $X / nacht"-label en een Rausch-"Reserveer"-pil
• Altijd weergegeven: prijskop → datumweergave → gastenkiezer → Rausch CTA → disclaimer "U wordt nog niet in rekening gebracht"

Ervaring Gastenkaart (detailpagina's van ervaringen)

• Volledigbreedte afgeronde container met een 3:2 omslagfoto bovenaan
• Gastavatar (rond, 56 px) overlapt de onderrand van de omslag met 50%
• Onder de overlap: hostnaam op 16 px 700, hostervaring op 14 px 500 Ash Gray, kleine Rausch-"Bericht aan host"-pilknop
• Gebruikt als overgang tussen beoordelingen en het voorzieningen-/locatieblok

"Wat u moet weten"-strip (listingdetailpagina's)

• 3-kolomsraster van regel-/beleidsblokken (Huisregels, Veiligheid & eigendom, Annuleringsbeleid)
• Elke kolom: icoon bovenaan, 16-px-600-kop, 14-px-500 Ash Gray-broodtekst, "Meer weergeven"-link in Ink Black-onderstreping
• Scheidingslijn: 1-px Hairline Gray boven- en onderrand op de gehele strip

5. Lay-outprincipes

Spatiëringssysteem

• Basiseenheid: 8 px
• Geëxtraheerde schaal: 2, 3, 4, 5,5, 6, 8, 10, 11, 12, 15, 16, 18,5, 22, 24, 32 px — fijnkorrelig met een handvol off-raster-waarden voor pixelperfecte icoonautozetting
• Sectie-opvulling: ~48–64 px boven/onder op desktop, 24–32 px op mobiel
• Kaart interne opvulling: 24 px op boekingspanelen en grote kaarten, 16 px op voorzieningsrijen, 12 px op listingkaart-metadata
• Tussenruimte tussen listingkaarten: 24 px desktop, 16 px mobiel
• Tussen gestapelde tekstrijen: 4–8 px (zeer krap — versterkt het "dichte informatie"-gevoel van reislistings)

Raster & Container

• Maximale inhoudsbreede: 1760–1920 px op ultrabreed (Airbnb laat het raster verder ademen dan de meeste sites); 1280 px op de meeste detailpagina's
• Startpagina-listingraster: 6 kolommen bij ≥1760 px, 5 bij ≥1440 px, 4 bij ≥1128 px, 3 bij ≥800 px, 2 bij ≥550 px, 1 eronder
• Detailpagina: 2-kolomsasymmetrisch — hoofdinhoud ~58%, vaste boekingspaneel ~36% rechts, ~6% tussenruimte
• Voettekst: 3 kolommen Ondersteuning / Hosting / Airbnb

Witruimtefilosofie

Airbnb is informatief maar nooit benauwd. Witruimte wordt gebruikt om te groeperen — listingkaarten hebben 24 px tussenruimte zodat elke foto als een afzonderlijk object leest, maar de metadata onder elke kaart gebruikt 4–8 px-tussenruimten zodat prijs/stad/datum als één eenheid aanvoelt. Het detailpagina-boekingspaneel heeft 24 px interne opvulling, maar rijen daarbinnen (datumkiezer, gastenkiezer, CTA) zijn gestapeld op 12 px — de grens tussen de kaart en de pagina doet meer scheidingswerk dan de inhoud daarbinnen.

Randradius-schaal

Radius	Gebruik
4 px	Inline ankertags, tag-chips
8 px	Tekstknoppen, keuzelijsten, kleine hulpprogrammaknoppen
14 px	Listingkaartfotografie, generieke inhoudscontainers, badges
20 px	Primaire afgeronde knoppen (pilvorm), grote afbeeldingen, boekingspaneel
32 px	Zoekbalk-pil, extra grote containers
50%	Alle ronde icoorknoppen, alle avatars, wenslijst-harten — de kenmerkende ronde geometrie van het systeem

6. Diepte & Verhoging

Niveau	Behandeling	Gebruik
0	Geen schaduw	Listingkaarten, hoofdinhoud, alleen-tekst-secties
1	rgba(0, 0, 0, 0.08) 0 4px 12px	Actieve/ingedrukte icoorknoppen (bijv. terug, delen, favoriet) — subtiele lift om interactie aan te geven
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	Vaste boekingspaneel-kaart, modals, keuzelijstmenu's — de kenmerkende drielaagse verhoging van het systeem
Focusring	0 0 0 2px #222222	Actieve-statussknoppen, gefocuste zoekinvoer
Witte Scheidingsring	rgb(255, 255, 255) 0 0 0 4px	Ronde knoppen overlapt op foto's — een 4-px witte ring scheidt de knop netjes van kleurrijke afbeeldingsachtergronden

Schaduwfilosofie: Airbnb gebruikt gestapelde gelaagde schaduwen in plaats van één enkele slagschaduw. De drielaagse boekingspaneel-schaduw leest als één samenhangende lift maar bestaat eigenlijk uit drie afzonderlijke schaduwen op verschillende dekking/vervagingswaarden — wat subtiele anti-aliasing creëert aan de omtrek van de schaduw die premium aanvoelt zonder zwaar te zijn.

Decoratieve Diepte

• Fotografie als diepte: het systeem vertrouwt sterk op volledigschermfotografie om visuele diepte te creëren; schaduwen en gradiënten worden spaarzaam gebruikt zodat de foto's het zware werk doen
• Laurierkransopzet: de Gastfavoriet-award gebruikt twee SVG-laurierkransillustaties die het anderszins platte beoordelingsnummer een ceremoniële, trofeeachtige aanwezigheid geven
• 3D gerenderde categorieiconen: de iconen voor Woningen/Ervaringen/Diensten hebben hun eigen zachte interne verlichting en subtiele gegoten schaduwen ingebakken in het artwork — de enige plek waar het merk "dimensionele" illustratie toestaat

7. Wat Wel en Wat Niet

Wat Wel

• Reserveer Rausch #ff385c voor primaire acties en de actieve tab-indicator — verdun het nooit met decoratief gebruik.
• Laat fotografie ademen — 4:3-uitsneden met 14–20-px afgeronde hoeken, geen overlappende tekst, geen gradiëntschermen.
• Gebruik Ink Black #222222 voor elke tekstlaag onder Rausch — dit is het bijna-zwart van het systeem, nooit echt #000000.
• Combineer de 3D-geïllustreerde iconen van de tri-tab categoriekiezer met platte typografie — meng geen illustratiestijlen binnen één enkel oppervlak.
• Stapel drie lage-dekking schaduwen (~2%, 4%, 10%) om de kenmerkende boekingspaneel-verhoging te creëren.
• Gebruik Hairline Gray #dddddd 1-px-randen voor elke kaart-naar-kaart- en rij-naar-rij-scheidingslijn.
• Behandel het boekingspaneel als vastgezet op desktop, inklappend naar een onderaan verankerde reserveringsbalk op mobiel.
• Gebruik 4–8-px-afstand binnen metadatagroepen en 24 px tussen kaarten — informatiedichtheid is opzettelijk.

Wat Niet

• Voer geen secundaire accentkleuren in buiten het Rausch / Plus Magenta / Luxe Purple-productlaagpalet.
• Plaats geen tekst in foto's — bijschriften zitten altijd onder de afbeelding, nooit overlappend.
• Gebruik geen hoofdletterlabels behalve de enkele 8-px-superscript-rol.
• Rond icoorknoppen niet af tot iets anders dan 50% — cirkelvormig is de kenmerkende geometrie van het systeem.
• Voeg geen slagschaduwen toe aan listingkaarten — ze zitten op wit canvas zonder verhoging.
• Gebruik geen gradiëntachtergronden — de enige gradiënt in het systeem is een smalle Rausch → magenta sweep op het woordmerk.
• Gebruik het lettergewicht 400-regulier niet — het broodtekstgewicht van Airbnb Cereal is 500.
• Vervang Airbnb Cereal VF niet door een ander displaylettertype — het systeem is opzettelijk één familie.

8. Responsief Gedrag

Breekpunten

Airbnb declareert ~60 breekpunten (ontwerptijdartefact van hun componentenbibliotheek), maar de betekenisvolle lay-outverschuivingen vinden plaats bij een veel kleinere set:

Naam	Breedte	Belangrijkste Wijzigingen
Ultra-breed	≥1760 px	6-kolomslistingraster, 1760–1920 px maximale inhoudsbreede
Desktop XL	1440–1759 px	5-kolomsraster, volledige nav zichtbaar, vaste boekingspaneel op de rechterrail
Desktop	1128–1439 px	4-kolomsraster, vaste boekingspaneel blijft bestaan
Laptop	1024–1127 px	3–4-kolomsraster, categorienavigatie blijft horizontaal
Tablet	800–1023 px	3-kolomsraster, globale zoekopdracht kan inklapten tot een enkele rijpil
Klein tablet	550–799 px	2-kolomsraster, boekingspaneel daalt naar volledigbreedte inline blok
Mobiel	375–549 px	1-koloms gestapelde indeling, onderaan vaste tabbar verschijnt (Verkennen / Verlanglijsten / Inloggen)
Klein mobiel	<375 px	Randopvulling trekt in naar 16 px; categoriekiezer-iconen krimpen naar ~28 px

Aanraakdoelen

Alle interactieve elementen voldoen aan of overschrijden 44×44 px. De ronde icoorknoopfamilie is specifiek 32–44 px groot met 8–12 px uitgebreide trefgebied-opvulling. De primaire Rausch Reserveer-knop is ~48 px hoog. Het trefgebied van de tri-tab categoriekiezer is het volledige label-plus-icoon rechthoek (typisch ~64×80 px per tab).

Inklapstrategie

• Nav: Bovenste nav houdt Airbnb-woordmerk + tri-tab kiezer op tablet en groter; op mobiel schuift de kiezer net onder de zoekpil, en de bol-/avataronbesturingen verhuizen naar een onderaan verankerde tabbar.
• Zoekbalk: Driesegment-pil (Waar / Wanneer / Wie) met een ronde Rausch-verzendknop op desktop; klapt op mobiel in tot een eenregel "Begin uw zoekopdracht"-pil, waarop tikken een volledigscherm zoekblad opent.
• Boekingspaneel: Vaste rechterrail op ≥1128 px; inline binnen de hoofdinhoudskolom tussen 800–1127 px; onderaan vaste "Reserveer"-pil op <800 px.
• Listingraster: Doorloopt van 6 → 5 → 4 → 3 → 2 → 1 kolommen over breekpunten.
• Detailpagina-afbeeldingsraster: Vijf-afbeelding-indeling (1 groot + 4 klein) op desktop; wordt op mobiel een veegbaar volledigscherm carrousel met paginapuntindicatoren.
• Voettekst: 3-kolomsindeling klapt in naar gestapelde enkele kolom bij <800 px.

Afbeeldingsgedrag

• loading="lazy" universeel, met vervaagde im_w=-URL-geparametriseerde voorbeeldminiaturen als eerste geserveerd
• Responsieve afbeeldingen gebruiken Airbnbs muscache.com-CDN met de im_w-queryparameter voor breedtegebaseerde levering (im_w=240, im_w=720, im_w=1200, im_w=2400)
• Geen art-direction-uitsneden — dezelfde afbeelding wordt op/neer geschaald over breekpunten
• Carrousels passen de foto-hoogte automatisch aan om een consistente 4:3-verhouding te behouden ongeacht de bronverhouding

9. Agent-promptgids

Snelle Kleurenreferentie

• Primaire CTA: "Rausch (#ff385c)"
• Paginaachtergrond: "Canvas White (#ffffff)"
• Suboppervlak: "Soft Cloud (#f7f7f7)"
• Kop-/broodtekst: "Ink Black (#222222)"
• Secundaire tekst: "Ash Gray (#6a6a6a)"
• Rand/scheidingslijn: "Hairline Gray (#dddddd)"
• Fout: "Error Red (#c13515)"
• Info-link: "Info Blue (#428bff)"
• Luxe-laag accent: "Luxe Purple (#460479)"
• Plus-laag accent: "Plus Magenta (#92174d)"

Voorbeeld Componentprompts

• "Maak een primaire Reserveer-knop: Rausch (#ff385c) achtergrond, wit Airbnb Cereal 500-gewicht label op 16 px, 14 px × 24 px opvulling, 8 px border-radius, geen schaduw. Op actief/ingedrukt voeg transform: scale(0.92) toe met een 2-px Ink Black focusring (0 0 0 2px #222222)."
• "Bouw een listingkaart met een 4:3 volledigscherm foto op 14-px border-radius, geen containerschaduw; onder de afbeelding stapel drie tekstrijen met 4-px-tussenruimten: stadsnaam op 16 px 600 Ink Black, verhuurtype op 14 px 500 Ash Gray (#6a6a6a), en prijsrange in 16 px 500 Ink Black met een 14-px per nacht achtervoegsel."
• "Ontwerp een vast boekingspaneel: witte achtergrond, 14-px border-radius, 1-px Hairline Gray (#dddddd) rand, 3-laags verhogingsschaduw (rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0), 24-px opvulling, 370-px breedte, vastgezet 120 px onder de viewport-bovenkant op desktop. Inhoud: prijskop, datumkiezer, gastenkeuzelijst, Rausch primaire CTA, en een 12-px Ash Gray U wordt nog niet in rekening gebracht disclaimer."
• "Maak een tri-tab categoriekiezer: drie gelijkbrede tabs gelabeld Woningen, Ervaringen, Diensten; elke tab heeft een ~48-px 3D gerenderd geïllustreerd icoon (huis, ballon, bel) boven een 16-px-500 Ink Black label; actieve tab krijgt een 2-px Ink Black onderstreping; voeg een kleine 12-px-700 witte NIEUW pil toe op een donker marineblauwe achtergrond rechtsboven de Ervaringen- en Diensten-iconen."
• "Render de Gastfavoriet-award-opzet: een gecentreerd beoordelingsnummer op 52-px 700-gewicht Ink Black, geflankeerd links en rechts door handgetekende SVG-laurierkransen op ~48 px hoog; eronder een 12-px-700 hoofdletters GASTFAVORIET-label met 0,32-px tracking; sub-label op 14 px 500 Ash Gray; volledigbreedte blok direct op wit canvas zonder containerrand."

Iteratiegids

Bij het verfijnen van bestaande schermen gegenereerd met dit ontwerpsysteem:

1. Richt u op ÉÉN component tegelijk.
2. Verwijs naar specifieke kleurnamen en hexcodes uit dit document (bijv. "Ink Black #222222", niet "donkergrijs").
3. Gebruik beschrijvingen in natuurlijke taal naast metingen ("subtiele drielaagse verhoging" in plaats van een lange schaduwstring).
4. Beschrijf het gewenste "gevoel" ("tijdschriftachtig, fotografie-eerst" vs. "dichte hulpprogramma").
5. Standaard altijd Airbnb Cereal VF 500-gewicht voor broodtekst en 600–700 voor nadruk — nooit 400.
6. Houd Rausch-roze schaars — als er meer dan één Rausch-gekleurd element per viewport verschijnt, overweeg of één geneutraliseerd moet worden.

Bekende Lacunes

• Startpagina-listingrasterkaarten: het primaire vastgoedkaartenraster (het primaire visuele oppervlak van airbnb.com) werd niet volledig vastgelegd in de geëxtraheerde startpagina-schermafbeeldingen — inhoud laadde slechts gedeeltelijk. De bovenstaande Listingkaart-specificaties zijn afgeleid van de Inspiratierasterstructuur en de bredere conventies van Airbnb; bevestig exacte beeldverhoudingen en metadatahiërarchie met de live site voor productiegebruik.
• Ervaringen-categorieiconen: de 3D geïllustreerde iconen voor Woningen / Ervaringen / Diensten worden geserveerd als raster-assets; hun exacte bronbestandsspecificaties (SVG vs PNG, gerenderde pixelafmetingen) zijn hier niet gedocumenteerd.
• Animatie- en overgangstimings: niet vastgelegd — statische extractiebereik.
• Donkere modus: Airbnb levert geen native donkere modus in de geëxtraheerde productoppervlakken; dit document beschrijft alleen het enkele lichte-modus-thema.