oh-my-design-cli 1.8.6 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/hooks/lib/preferences-parser.cjs +1 -0
- package/.claude/hooks/lib/preferences-writer.cjs +1 -0
- package/.claude/hooks/post-edit-watch.cjs +1 -0
- package/.claude/hooks/session-end-foldin.cjs +1 -0
- package/.claude/hooks/session-state-loader.cjs +1 -0
- package/.claude/hooks/skill-activation.cjs +1 -0
- package/.claude/settings.json +10 -1
- package/.github/assets/logo-bg.png +0 -0
- package/AGENTS.md +20 -1
- package/CHANGELOG.md +482 -0
- package/MIGRATION.md +103 -0
- package/README.ja.md +56 -19
- package/README.ko.md +47 -30
- package/README.md +48 -30
- package/README.zh-TW.md +59 -22
- package/agents/AGENT.md +8 -7
- package/agents/omd-codex-image.md +1 -1
- package/agents/omd-critic.md +6 -7
- package/agents/omd-designer-review.md +1 -1
- package/agents/omd-final-qa.md +1 -1
- package/agents/omd-humanizer.md +38 -0
- package/agents/omd-kr-writer.md +3 -4
- package/agents/omd-locale-adapter.md +12 -16
- package/agents/omd-master.md +24 -19
- package/agents/omd-microcopy.md +1 -1
- package/agents/omd-orchestrator.md +7 -8
- package/agents/omd-slop-auditor.md +31 -0
- package/agents/omd-ux-researcher.md +1 -1
- package/data/reference-fingerprints.json +2761 -85
- package/dist/bin/oh-my-design.js +16 -8
- package/dist/bin/oh-my-design.js.map +1 -1
- package/dist/chunk-UJIHCEYF.js +99 -0
- package/dist/chunk-UJIHCEYF.js.map +1 -0
- package/dist/doctor-LDWSFM3I.js +763 -0
- package/dist/doctor-LDWSFM3I.js.map +1 -0
- package/dist/install-skills-ZZFNJ2II.js +1120 -0
- package/dist/install-skills-ZZFNJ2II.js.map +1 -0
- package/docs/CLI_QUICKSTART.md +157 -0
- package/package.json +25 -4
- package/scripts/postinstall.cjs +5 -4
- package/skills/claude-design/SKILL.md +38 -14
- package/skills/claude-design/references/claude-design-flow.md +11 -11
- package/skills/claude-design/references/codebase-analysis.md +5 -4
- package/skills/omd-final-qa/SKILL.md +1 -1
- package/skills/omd-harness/SKILL.md +51 -50
- package/skills/omd-humanize/SKILL.md +116 -0
- package/skills/omd-humanize/agents/openai.yaml +4 -0
- package/skills/omd-humanize/references/locale-playbooks.md +102 -0
- package/skills/omd-humanize/references/sources.md +11 -0
- package/skills/omd-init/SKILL.md +18 -12
- package/skills/omd-locale-adapter/SKILL.md +58 -91
- package/skills/omd-orchestrator/SKILL.md +11 -5
- package/skills/omd-reference-capture/SKILL.md +80 -26
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-LICENSE.txt +202 -0
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-NOTICE.txt +5 -0
- package/skills/omd-reference-capture/scripts/THIRD_PARTY_NOTICES.md +3 -0
- package/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs +159906 -0
- package/skills/omd-slop-audit/SKILL.md +110 -0
- package/skills/omd-slop-audit/agents/openai.yaml +4 -0
- package/skills/omd-slop-audit/references/pattern-catalog.md +96 -0
- package/skills/omd-slop-audit/references/sources.md +24 -0
- package/web/references/104/DESIGN.md +354 -0
- package/web/references/11st/DESIGN.md +197 -316
- package/web/references/29cm/DESIGN.md +297 -393
- package/web/references/42dot/DESIGN.md +390 -0
- package/web/references/8percent/DESIGN.md +438 -0
- package/web/references/ably/DESIGN.md +267 -572
- package/web/references/acer/DESIGN.md +329 -0
- package/web/references/airbnb/DESIGN.md +219 -557
- package/web/references/airbridge/DESIGN.md +451 -0
- package/web/references/alipay/DESIGN.md +179 -420
- package/web/references/apple/DESIGN.md +224 -498
- package/web/references/asleep/DESIGN.md +402 -0
- package/web/references/au/DESIGN.md +334 -0
- package/web/references/autopedia/DESIGN.md +382 -0
- package/web/references/aws-cloudscape/DESIGN.md +241 -0
- package/web/references/baemin/DESIGN.md +332 -491
- package/web/references/banksalad/DESIGN.md +269 -180
- package/web/references/barogo/DESIGN.md +416 -0
- package/web/references/beusable/DESIGN.md +464 -0
- package/web/references/bigin/DESIGN.md +454 -0
- package/web/references/bilibili/DESIGN.md +206 -374
- package/web/references/bmw/DESIGN.md +162 -276
- package/web/references/brandi/DESIGN.md +184 -325
- package/web/references/buzzvil/DESIGN.md +457 -0
- package/web/references/cafe24/DESIGN.md +472 -0
- package/web/references/catchtable/DESIGN.md +219 -264
- package/web/references/cgv/DESIGN.md +317 -0
- package/web/references/channeltalk/DESIGN.md +210 -336
- package/web/references/china-airlines/DESIGN.md +291 -0
- package/web/references/cjonstyle/DESIGN.md +453 -0
- package/web/references/class101/DESIGN.md +168 -387
- package/web/references/classum/DESIGN.md +228 -203
- package/web/references/claude/DESIGN.md +242 -479
- package/web/references/clay/DESIGN.md +179 -377
- package/web/references/clickhouse/DESIGN.md +254 -343
- package/web/references/codeit/DESIGN.md +470 -0
- package/web/references/cohere/DESIGN.md +214 -324
- package/web/references/coinone/DESIGN.md +199 -179
- package/web/references/corca/DESIGN.md +414 -0
- package/web/references/coupang/DESIGN.md +205 -475
- package/web/references/cursor/DESIGN.md +240 -381
- package/web/references/dabang/DESIGN.md +248 -213
- package/web/references/dable/DESIGN.md +431 -0
- package/web/references/datarize/DESIGN.md +338 -0
- package/web/references/dealicious/DESIGN.md +402 -0
- package/web/references/drdiary/DESIGN.md +404 -0
- package/web/references/elastic/DESIGN.md +238 -0
- package/web/references/elevenlabs/DESIGN.md +183 -321
- package/web/references/elice/DESIGN.md +445 -0
- package/web/references/eslite/DESIGN.md +257 -0
- package/web/references/evaair/DESIGN.md +338 -0
- package/web/references/expo/DESIGN.md +238 -331
- package/web/references/familymart-tw/DESIGN.md +254 -0
- package/web/references/ferrari/DESIGN.md +160 -377
- package/web/references/figma/DESIGN.md +197 -451
- package/web/references/fitpet/DESIGN.md +445 -0
- package/web/references/flex/DESIGN.md +170 -253
- package/web/references/framer/DESIGN.md +197 -340
- package/web/references/freee/DESIGN.md +211 -533
- package/web/references/friendliai/DESIGN.md +431 -0
- package/web/references/frip/DESIGN.md +440 -0
- package/web/references/furiosaai/DESIGN.md +450 -0
- package/web/references/gangnamunni/DESIGN.md +154 -591
- package/web/references/gaudiolab/DESIGN.md +414 -0
- package/web/references/google/DESIGN.md +290 -398
- package/web/references/goorm/DESIGN.md +470 -0
- package/web/references/greencar/DESIGN.md +420 -0
- package/web/references/hackle/DESIGN.md +472 -0
- package/web/references/hashicorp/DESIGN.md +273 -318
- package/web/references/heydealer/DESIGN.md +429 -0
- package/web/references/humanscape/DESIGN.md +433 -0
- package/web/references/hwahae/DESIGN.md +453 -0
- package/web/references/hyundai/DESIGN.md +158 -368
- package/web/references/hyundaicard/DESIGN.md +171 -121
- package/web/references/ibm/DESIGN.md +227 -378
- package/web/references/idus/DESIGN.md +450 -0
- package/web/references/igaworks/DESIGN.md +437 -0
- package/web/references/inflearn/DESIGN.md +221 -366
- package/web/references/intuit/DESIGN.md +244 -0
- package/web/references/jandi/DESIGN.md +191 -291
- package/web/references/jobplanet/DESIGN.md +415 -0
- package/web/references/kakao/DESIGN.md +287 -475
- package/web/references/kakaobank/DESIGN.md +220 -521
- package/web/references/kakaogames/DESIGN.md +220 -0
- package/web/references/kakaopay/DESIGN.md +207 -526
- package/web/references/karrot/DESIGN.md +227 -251
- package/web/references/kb-kookmin/DESIGN.md +308 -0
- package/web/references/kbank/DESIGN.md +220 -175
- package/web/references/kcd/DESIGN.md +432 -0
- package/web/references/kmong/DESIGN.md +281 -356
- package/web/references/krds/DESIGN.md +245 -19
- package/web/references/kream/DESIGN.md +224 -359
- package/web/references/kurly/DESIGN.md +211 -533
- package/web/references/kyobobook/DESIGN.md +445 -0
- package/web/references/lablup/DESIGN.md +474 -0
- package/web/references/lamborghini/DESIGN.md +198 -360
- package/web/references/lemonbase/DESIGN.md +452 -0
- package/web/references/lguplus/DESIGN.md +259 -0
- package/web/references/likelion/DESIGN.md +283 -0
- package/web/references/line/DESIGN.md +396 -355
- package/web/references/linear.app/DESIGN.md +209 -562
- package/web/references/lotteon/DESIGN.md +386 -0
- package/web/references/lovable/DESIGN.md +255 -349
- package/web/references/makinarocks/DESIGN.md +242 -0
- package/web/references/maum-ai/DESIGN.md +423 -0
- package/web/references/medibloc/DESIGN.md +425 -0
- package/web/references/megabox/DESIGN.md +232 -0
- package/web/references/mercari/DESIGN.md +217 -434
- package/web/references/microsoft/DESIGN.md +234 -388
- package/web/references/mildang/DESIGN.md +411 -0
- package/web/references/millie/DESIGN.md +183 -504
- package/web/references/minimax/DESIGN.md +264 -322
- package/web/references/miricanvas/DESIGN.md +182 -355
- package/web/references/miro/DESIGN.md +234 -232
- package/web/references/mistral.ai/DESIGN.md +231 -314
- package/web/references/mixi/DESIGN.md +234 -0
- package/web/references/moin/DESIGN.md +445 -0
- package/web/references/mongodb/DESIGN.md +219 -316
- package/web/references/moreh/DESIGN.md +437 -0
- package/web/references/musinsa/DESIGN.md +184 -510
- package/web/references/mynavi/DESIGN.md +242 -0
- package/web/references/myrealtrip/DESIGN.md +169 -406
- package/web/references/naver/DESIGN.md +328 -499
- package/web/references/naverwebtoon/DESIGN.md +172 -395
- package/web/references/neosapience/DESIGN.md +441 -0
- package/web/references/nhn/DESIGN.md +169 -346
- package/web/references/nhncloud/DESIGN.md +185 -123
- package/web/references/nota/DESIGN.md +451 -0
- package/web/references/notion/DESIGN.md +271 -475
- package/web/references/nrise/DESIGN.md +417 -0
- package/web/references/ohouse/DESIGN.md +210 -549
- package/web/references/oliveyoung/DESIGN.md +217 -326
- package/web/references/ollama/DESIGN.md +241 -308
- package/web/references/onestore/DESIGN.md +248 -0
- package/web/references/palantir/DESIGN.md +256 -0
- package/web/references/panasonic/DESIGN.md +276 -0
- package/web/references/patternfly/DESIGN.md +259 -0
- package/web/references/payhere/DESIGN.md +438 -0
- package/web/references/pega/DESIGN.md +262 -0
- package/web/references/peoplefund/DESIGN.md +431 -0
- package/web/references/petfriends/DESIGN.md +428 -0
- package/web/references/pinkfong/DESIGN.md +199 -367
- package/web/references/pinterest/DESIGN.md +258 -308
- package/web/references/portone/DESIGN.md +446 -0
- package/web/references/poya/DESIGN.md +286 -0
- package/web/references/pozalabs/DESIGN.md +438 -0
- package/web/references/protopie/DESIGN.md +419 -0
- package/web/references/qraft/DESIGN.md +448 -0
- package/web/references/queenit/DESIGN.md +432 -0
- package/web/references/quotabook/DESIGN.md +449 -0
- package/web/references/rebellions/DESIGN.md +449 -0
- package/web/references/recruit/DESIGN.md +247 -0
- package/web/references/remember/DESIGN.md +202 -396
- package/web/references/resend/DESIGN.md +274 -348
- package/web/references/returnzero/DESIGN.md +460 -0
- package/web/references/sakura-internet/DESIGN.md +269 -0
- package/web/references/samsung/DESIGN.md +157 -359
- package/web/references/sandoll/DESIGN.md +445 -0
- package/web/references/sanity/DESIGN.md +241 -375
- package/web/references/saramin/DESIGN.md +465 -0
- package/web/references/scatterlab/DESIGN.md +412 -0
- package/web/references/selectstar/DESIGN.md +439 -0
- package/web/references/servicenow/DESIGN.md +289 -0
- package/web/references/shiftee/DESIGN.md +468 -0
- package/web/references/shinhanbank/DESIGN.md +161 -341
- package/web/references/shinhancard/DESIGN.md +208 -319
- package/web/references/sionic/DESIGN.md +454 -0
- package/web/references/sktelecom/DESIGN.md +310 -0
- package/web/references/socar/DESIGN.md +125 -32
- package/web/references/softbank/DESIGN.md +231 -0
- package/web/references/solapi/DESIGN.md +483 -0
- package/web/references/sony/DESIGN.md +234 -0
- package/web/references/soop/DESIGN.md +261 -0
- package/web/references/spacex/DESIGN.md +184 -323
- package/web/references/spotify/DESIGN.md +253 -394
- package/web/references/squeezebits/DESIGN.md +441 -0
- package/web/references/stayfolio/DESIGN.md +422 -0
- package/web/references/stripe/DESIGN.md +212 -491
- package/web/references/supabase/DESIGN.md +244 -316
- package/web/references/supertone/DESIGN.md +413 -0
- package/web/references/tabling/DESIGN.md +415 -0
- package/web/references/taishinbank/DESIGN.md +243 -0
- package/web/references/teamlab/DESIGN.md +240 -0
- package/web/references/teamsparta/DESIGN.md +472 -0
- package/web/references/tellingme/DESIGN.md +392 -0
- package/web/references/tesla/DESIGN.md +244 -427
- package/web/references/thsr/DESIGN.md +284 -0
- package/web/references/thumbtack/DESIGN.md +302 -0
- package/web/references/together.ai/DESIGN.md +257 -304
- package/web/references/toss/DESIGN.md +251 -593
- package/web/references/toss-securities/DESIGN.md +255 -178
- package/web/references/tossbank/DESIGN.md +195 -491
- package/web/references/toyota/DESIGN.md +238 -0
- package/web/references/tving/DESIGN.md +197 -245
- package/web/references/typed/DESIGN.md +413 -0
- package/web/references/uber/DESIGN.md +256 -333
- package/web/references/udn/DESIGN.md +250 -0
- package/web/references/upbit/DESIGN.md +145 -256
- package/web/references/upstage/DESIGN.md +211 -204
- package/web/references/uswds/DESIGN.md +287 -0
- package/web/references/vercel/DESIGN.md +236 -440
- package/web/references/vuno/DESIGN.md +413 -0
- package/web/references/wanted/DESIGN.md +215 -487
- package/web/references/weverse/DESIGN.md +437 -0
- package/web/references/wise/DESIGN.md +223 -231
- package/web/references/wisetracker/DESIGN.md +462 -0
- package/web/references/wooribank/DESIGN.md +245 -0
- package/web/references/yanolja/DESIGN.md +250 -419
- package/web/references/yeogiotte/DESIGN.md +235 -418
- package/web/references/zapier/DESIGN.md +256 -377
- package/web/references/zendesk/DESIGN.md +288 -0
- package/web/references/zigzag/DESIGN.md +200 -621
- package/dist/install-skills-7UUDOLG2.js +0 -734
- package/dist/install-skills-7UUDOLG2.js.map +0 -1
|
@@ -4,636 +4,298 @@ name: Airbnb
|
|
|
4
4
|
country: US
|
|
5
5
|
category: consumer-tech
|
|
6
6
|
homepage: "https://www.airbnb.com"
|
|
7
|
-
primary_color: "#
|
|
7
|
+
primary_color: "#ff385c"
|
|
8
8
|
logo:
|
|
9
9
|
type: simpleicons
|
|
10
10
|
slug: airbnb
|
|
11
|
-
verified: "2026-
|
|
11
|
+
verified: "2026-07-12"
|
|
12
12
|
omd: "0.1"
|
|
13
13
|
ds:
|
|
14
14
|
name: Airbnb Brand Hub
|
|
15
15
|
url: "https://brand.withairbnb.com"
|
|
16
16
|
type: brand
|
|
17
|
-
description: Airbnb's
|
|
18
|
-
|
|
17
|
+
description: Airbnb's official identity and asset-use guidance; public marketplace, Newsroom, Help, and native-product evidence remain separate domains.
|
|
18
|
+
verification_v2:
|
|
19
|
+
schema: 2
|
|
20
|
+
checked: "2026-07-12"
|
|
21
|
+
surfaces:
|
|
22
|
+
- { id: home, kind: public-marketplace, url: "https://www.airbnb.co.kr/", inspected: "2026-07-12" }
|
|
23
|
+
- { id: release, kind: official-newsroom, url: "https://news.airbnb.com/product-releases/airbnb-2026-summer-release/", inspected: "2026-07-12" }
|
|
24
|
+
- { id: help, kind: official-help, url: "https://www.airbnb.com/help/article/2503", inspected: "2026-07-12" }
|
|
25
|
+
sources:
|
|
26
|
+
- { id: home-live, kind: product-surface, url: "https://www.airbnb.co.kr/", captured: "2026-07-12" }
|
|
27
|
+
- { id: release-live, kind: official-doc, url: "https://news.airbnb.com/product-releases/airbnb-2026-summer-release/", captured: "2026-07-12" }
|
|
28
|
+
- { id: help-live, kind: official-doc, url: "https://www.airbnb.com/help/article/2503", captured: "2026-07-12" }
|
|
29
|
+
- { id: brand-official, kind: brand-asset, url: "https://brand.withairbnb.com", captured: "2026-07-12" }
|
|
30
|
+
conflicts: []
|
|
31
|
+
claims:
|
|
32
|
+
"tokens.colors.primary": &home_evidence { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-12" }
|
|
33
|
+
"tokens.colors.canvas": *home_evidence
|
|
34
|
+
"tokens.colors.foreground": *home_evidence
|
|
35
|
+
"tokens.colors.secondary": *home_evidence
|
|
36
|
+
"tokens.colors.disabled": *home_evidence
|
|
37
|
+
"tokens.colors.surface": *home_evidence
|
|
38
|
+
"tokens.colors.surface-soft": *home_evidence
|
|
39
|
+
"tokens.colors.divider": &help_evidence { surface_id: help, source_id: help-live, method: live-inspect, captured: "2026-07-12" }
|
|
40
|
+
"tokens.typography.family.ui": *home_evidence
|
|
41
|
+
"tokens.typography.family.editorial": &release_evidence { surface_id: release, source_id: release-live, method: live-inspect, captured: "2026-07-12" }
|
|
42
|
+
"tokens.typography.title.size": *home_evidence
|
|
43
|
+
"tokens.typography.title.weight": *home_evidence
|
|
44
|
+
"tokens.typography.title.lineHeight": *home_evidence
|
|
45
|
+
"tokens.typography.title.use": *home_evidence
|
|
46
|
+
"tokens.typography.body.size": *home_evidence
|
|
47
|
+
"tokens.typography.body.weight": *home_evidence
|
|
48
|
+
"tokens.typography.body.lineHeight": *home_evidence
|
|
49
|
+
"tokens.typography.body.use": *home_evidence
|
|
50
|
+
"tokens.typography.action.size": *home_evidence
|
|
51
|
+
"tokens.typography.action.weight": *home_evidence
|
|
52
|
+
"tokens.typography.action.lineHeight": *home_evidence
|
|
53
|
+
"tokens.typography.action.use": *home_evidence
|
|
54
|
+
"tokens.typography.reading.size": *help_evidence
|
|
55
|
+
"tokens.typography.reading.weight": *help_evidence
|
|
56
|
+
"tokens.typography.reading.lineHeight": *help_evidence
|
|
57
|
+
"tokens.typography.reading.use": *help_evidence
|
|
58
|
+
"tokens.typography.newsroom.size": *release_evidence
|
|
59
|
+
"tokens.typography.newsroom.weight": *release_evidence
|
|
60
|
+
"tokens.typography.newsroom.lineHeight": *release_evidence
|
|
61
|
+
"tokens.typography.newsroom.use": *release_evidence
|
|
62
|
+
"tokens.spacing.xs": *home_evidence
|
|
63
|
+
"tokens.spacing.sm": *home_evidence
|
|
64
|
+
"tokens.spacing.md": *home_evidence
|
|
65
|
+
"tokens.spacing.lg": *help_evidence
|
|
66
|
+
"tokens.spacing.xl": *home_evidence
|
|
67
|
+
"tokens.rounded.control": *home_evidence
|
|
68
|
+
"tokens.rounded.search": *home_evidence
|
|
69
|
+
"tokens.rounded.card": *home_evidence
|
|
70
|
+
"tokens.rounded.full": *home_evidence
|
|
71
|
+
"tokens.components.hosting-action.type": *home_evidence
|
|
72
|
+
"tokens.components.hosting-action.bg": *home_evidence
|
|
73
|
+
"tokens.components.hosting-action.fg": *home_evidence
|
|
74
|
+
"tokens.components.hosting-action.radius": *home_evidence
|
|
75
|
+
"tokens.components.hosting-action.padding": *home_evidence
|
|
76
|
+
"tokens.components.hosting-action.height": *home_evidence
|
|
77
|
+
"tokens.components.hosting-action.font": *home_evidence
|
|
78
|
+
"tokens.components.hosting-action.states": *home_evidence
|
|
79
|
+
"tokens.components.hosting-action.use": *home_evidence
|
|
80
|
+
"tokens.components.category-tab.type": *home_evidence
|
|
81
|
+
"tokens.components.category-tab.bg": *home_evidence
|
|
82
|
+
"tokens.components.category-tab.fg": *home_evidence
|
|
83
|
+
"tokens.components.category-tab.radius": *home_evidence
|
|
84
|
+
"tokens.components.category-tab.padding": *home_evidence
|
|
85
|
+
"tokens.components.category-tab.font": *home_evidence
|
|
86
|
+
"tokens.components.category-tab.states": *home_evidence
|
|
87
|
+
"tokens.components.category-tab.use": *home_evidence
|
|
88
|
+
"tokens.components.icon-action.type": *home_evidence
|
|
89
|
+
"tokens.components.icon-action.bg": *home_evidence
|
|
90
|
+
"tokens.components.icon-action.fg": *home_evidence
|
|
91
|
+
"tokens.components.icon-action.radius": *home_evidence
|
|
92
|
+
"tokens.components.icon-action.size": *home_evidence
|
|
93
|
+
"tokens.components.icon-action.states": *home_evidence
|
|
94
|
+
"tokens.components.icon-action.use": *home_evidence
|
|
95
|
+
"tokens.components.disabled-icon-action.type": *home_evidence
|
|
96
|
+
"tokens.components.disabled-icon-action.bg": *home_evidence
|
|
97
|
+
"tokens.components.disabled-icon-action.fg": *home_evidence
|
|
98
|
+
"tokens.components.disabled-icon-action.radius": *home_evidence
|
|
99
|
+
"tokens.components.disabled-icon-action.size": *home_evidence
|
|
100
|
+
"tokens.components.disabled-icon-action.states": *home_evidence
|
|
101
|
+
"tokens.components.disabled-icon-action.use": *home_evidence
|
|
102
|
+
"tokens.components.search-shell.type": *home_evidence
|
|
103
|
+
"tokens.components.search-shell.bg": *home_evidence
|
|
104
|
+
"tokens.components.search-shell.fg": *home_evidence
|
|
105
|
+
"tokens.components.search-shell.radius": *home_evidence
|
|
106
|
+
"tokens.components.search-shell.height": *home_evidence
|
|
107
|
+
"tokens.components.search-shell.font": *home_evidence
|
|
108
|
+
"tokens.components.search-shell.states": *home_evidence
|
|
109
|
+
"tokens.components.search-shell.use": *home_evidence
|
|
110
|
+
"tokens.components.help-list-row.type": *help_evidence
|
|
111
|
+
"tokens.components.help-list-row.bg": *help_evidence
|
|
112
|
+
"tokens.components.help-list-row.fg": *help_evidence
|
|
113
|
+
"tokens.components.help-list-row.border": *help_evidence
|
|
114
|
+
"tokens.components.help-list-row.radius": *help_evidence
|
|
115
|
+
"tokens.components.help-list-row.padding": *help_evidence
|
|
116
|
+
"tokens.components.help-list-row.font": *help_evidence
|
|
117
|
+
"tokens.components.help-list-row.use": *help_evidence
|
|
19
118
|
tokens:
|
|
20
|
-
source:
|
|
21
|
-
extracted: "2026-
|
|
22
|
-
note: "
|
|
119
|
+
source: reconciled
|
|
120
|
+
extracted: "2026-07-12"
|
|
121
|
+
note: "Fresh marketplace, Newsroom, and Help capture. Rausch remains a current identity accent, but no universal red CTA geometry is promoted without matching current component evidence."
|
|
23
122
|
colors:
|
|
24
123
|
primary: "#ff385c"
|
|
25
|
-
primary-active: "#e00b41"
|
|
26
|
-
brand: "#ff5a5f"
|
|
27
|
-
luxe: "#460479"
|
|
28
|
-
plus: "#92174d"
|
|
29
124
|
canvas: "#ffffff"
|
|
30
125
|
foreground: "#222222"
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
muted: "#929292"
|
|
34
|
-
on-primary: "#ffffff"
|
|
35
|
-
error: "#c13515"
|
|
36
|
-
error-hover: "#b32505"
|
|
37
|
-
link: "#428bff"
|
|
38
|
-
hairline: "#dddddd"
|
|
39
|
-
border: "#c1c1c1"
|
|
126
|
+
secondary: "#6a6a6a"
|
|
127
|
+
disabled: "#c1c1c1"
|
|
40
128
|
surface: "#f2f2f2"
|
|
41
|
-
|
|
42
|
-
|
|
129
|
+
surface-soft: "#ebebeb"
|
|
130
|
+
divider: "#dddddd"
|
|
43
131
|
typography:
|
|
44
|
-
family: {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
button: { size: 16, weight: 500, lineHeight: 1.25, use: "Button labels" }
|
|
53
|
-
body: { size: 14, weight: 400, lineHeight: 1.43, use: "Standard body, links" }
|
|
54
|
-
body-medium: { size: 14, weight: 500, lineHeight: 1.29, use: "Medium body" }
|
|
55
|
-
caption-salt: { size: 14, weight: 600, lineHeight: 1.43, use: "Caption with salt feature" }
|
|
56
|
-
small: { size: 13, weight: 400, lineHeight: 1.23, use: "Descriptions" }
|
|
57
|
-
tag: { size: 12, weight: 400, lineHeight: 1.33, use: "Tags, prices" }
|
|
58
|
-
badge: { size: 11, weight: 600, lineHeight: 1.18, use: "Badge with salt feature" }
|
|
59
|
-
micro-uppercase: { size: 8, weight: 700, lineHeight: 1.25, tracking: 0.32, use: "Uppercase micro labels" }
|
|
60
|
-
spacing: { xs: 4, sm: 8, base: 16, md: 22, lg: 24, xl: 32 }
|
|
61
|
-
rounded: { sm: 4, md: 8, badge: 14, lg: 20, xl: 32, full: 9999 }
|
|
62
|
-
shadow:
|
|
63
|
-
card: "rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px"
|
|
64
|
-
hover: "rgba(0,0,0,0.08) 0px 4px 12px"
|
|
65
|
-
listing-hover: "rgba(0,0,0,0.12) 0px 8px 24px"
|
|
66
|
-
focus-ring: "rgb(255,255,255) 0px 0px 0px 4px"
|
|
132
|
+
family: { ui: "Airbnb Cereal VF", editorial: "Cereal" }
|
|
133
|
+
title: { size: 22, weight: 500, lineHeight: 1.18, use: "Repeated public marketplace section heading" }
|
|
134
|
+
body: { size: 14, weight: 400, lineHeight: 1.43, use: "Marketplace body and list text" }
|
|
135
|
+
action: { size: 14, weight: 500, lineHeight: 1.29, use: "Marketplace tabs and compact actions" }
|
|
136
|
+
reading: { size: 16, weight: 400, lineHeight: 1.5, use: "Help article body and long-form list content" }
|
|
137
|
+
newsroom: { size: 18, weight: 400, lineHeight: 1.56, use: "Newsroom editorial copy" }
|
|
138
|
+
spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 }
|
|
139
|
+
rounded: { control: 8, search: 32, card: 12, full: 9999 }
|
|
67
140
|
components_harvested: true
|
|
68
141
|
components:
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
icon-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
search-field: { type: input, bg: "#ffffff", radius: 9999, use: "66px tall header search bar, 1px #dddddd border, pill radius" }
|
|
76
|
-
category-pill: { type: tab, fg: "#222222", font: "14px/500", use: "category nav", active: "2px #222222 bottom border" }
|
|
142
|
+
hosting-action: { type: button, bg: "transparent", fg: "#222222", radius: "20px", padding: "11px 12px", height: "40px", font: "14px / 500", states: "pressed observed", use: "Current public hosting entry action" }
|
|
143
|
+
category-tab: { type: tab, bg: "transparent", fg: "#6a6a6a", radius: "8px", padding: "0 16px", font: "14px / 500", states: "selected and tab-selected observed; selected text resolves to #222222", use: "Current public category navigation" }
|
|
144
|
+
icon-action: { type: button, bg: "#f2f2f2", fg: "#222222", radius: "9999px", size: "28px", states: "hover and pressed observed", use: "Current compact circular marketplace control" }
|
|
145
|
+
disabled-icon-action: { type: button, bg: "#f2f2f2", fg: "#c1c1c1", radius: "9999px", size: "28px", states: "disabled, focus, hover, and pressed captured", use: "Disabled compact circular marketplace control" }
|
|
146
|
+
search-shell: { type: input, bg: "#ebebeb", fg: "#222222", radius: "32px", height: "66px", font: "14px / 500", states: "hover and pressed observed on the shell; input remains transparent", use: "Current public marketplace search shell" }
|
|
147
|
+
help-list-row: { type: listItem, bg: "transparent", fg: "#222222", border: "0 0 1px #dddddd", radius: "0px", padding: "24px 0", font: "14px / 400 / 20.02px", use: "Current official Help article list row" }
|
|
77
148
|
---
|
|
78
149
|
|
|
79
150
|
# Design System Inspiration of Airbnb
|
|
80
151
|
|
|
81
152
|
## 1. Visual Theme & Atmosphere
|
|
82
153
|
|
|
83
|
-
Airbnb
|
|
154
|
+
Airbnb is a global marketplace for homes, experiences, and services, built around the idea that travel can be organized through people and place rather than a conventional hotel inventory. Its current public product remains photography-led: a white canvas, near-black type, restrained gray controls, and compact category navigation leave most of the emotional work to destinations, hosts, and activities. Rausch pink (`#ff385c`) still appears as an identity accent on the current marketplace, but neutral structure carries the majority of the inspected interface.
|
|
84
155
|
|
|
85
|
-
The
|
|
156
|
+
The 2026 product story broadens that marketplace. Airbnb's official Summer Release introduces new search and planning work across homes, experiences, services, and adjacent travel needs, while the Help surface continues to explain the platform as a connected set of guest, host, and service-provider journeys. This evolution makes evidence boundaries especially important: marketplace UI, Newsroom editorial presentation, Help content, official brand assets, and native app behavior are related parts of Airbnb, but they are not interchangeable token sources.
|
|
86
157
|
|
|
87
|
-
|
|
158
|
+
Airbnb Cereal is the strongest repeatable visual signature. `Airbnb Cereal VF` was loaded and used across 973 visible marketplace and Help elements; the Newsroom loaded its `Cereal` family across 68 elements. Rounded controls, pill-like search geometry, direct labels, and generous image space create an approachable system without requiring decorative chrome.
|
|
88
159
|
|
|
89
160
|
**Key Characteristics:**
|
|
90
|
-
-
|
|
91
|
-
-
|
|
92
|
-
-
|
|
93
|
-
-
|
|
94
|
-
-
|
|
95
|
-
- Circular navigation controls (50% radius)
|
|
96
|
-
- Photography-first listing cards — images are the hero content
|
|
97
|
-
- Near-black text (`#222222`) — warm, not cold
|
|
98
|
-
- Luxe Purple (`#460479`) and Plus Magenta (`#92174d`) for premium tiers
|
|
161
|
+
- Photography and place content lead; UI neutrals stay deliberately quiet
|
|
162
|
+
- Rausch `#ff385c` is a current identity accent, not an inferred fill for every CTA
|
|
163
|
+
- Airbnb Cereal VF spans navigation, headings, lists, inputs, and controls
|
|
164
|
+
- 20–32px pill geometry for public actions and search; full circles for icon controls
|
|
165
|
+
- Separate visual domains for marketplace, Newsroom, Help, brand assets, and native product
|
|
99
166
|
|
|
100
167
|
## 2. Color Palette & Roles
|
|
101
168
|
|
|
102
|
-
|
|
103
|
-
- **
|
|
104
|
-
- **
|
|
105
|
-
- **
|
|
106
|
-
- **
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
-
|
|
111
|
-
|
|
112
|
-
### Text Scale
|
|
113
|
-
- **Near Black** (`#222222`): `--palette-text-primary`, primary text — warm, not cold
|
|
114
|
-
- **Focused Gray** (`#3f3f3f`): `--palette-text-focused`, focused state text
|
|
115
|
-
- **Secondary Gray** (`#6a6a6a`): Secondary text, descriptions
|
|
116
|
-
- **Disabled** (`rgba(0,0,0,0.24)`): `--palette-text-material-disabled`, disabled state
|
|
117
|
-
- **Link Disabled** (`#929292`): `--palette-text-link-disabled`, disabled links
|
|
118
|
-
|
|
119
|
-
### Interactive
|
|
120
|
-
- **Legal Blue** (`#428bff`): `--palette-text-legal`, legal links, informational
|
|
121
|
-
- **Border Gray** (`#c1c1c1`): Border color for cards and dividers
|
|
122
|
-
- **Light Surface** (`#f2f2f2`): Circular navigation buttons, secondary surfaces
|
|
123
|
-
|
|
124
|
-
### Surface & Shadows
|
|
125
|
-
- **Pure White** (`#ffffff`): Page background, card surfaces
|
|
126
|
-
- **Card Shadow** (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`): Three-layer warm lift
|
|
127
|
-
- **Hover Shadow** (`rgba(0,0,0,0.08) 0px 4px 12px`): Button hover elevation
|
|
169
|
+
- **Identity accent** (`#ff385c`): currently observed on the marketplace; retained as Airbnb's primary identity color without inventing a universal component role.
|
|
170
|
+
- **Canvas** (`#ffffff`) and **foreground** (`#222222`): the dominant marketplace and Help pairing.
|
|
171
|
+
- **Secondary** (`#6a6a6a`): category labels and supporting marketplace text.
|
|
172
|
+
- **Disabled** (`#c1c1c1`): disabled circular-control content.
|
|
173
|
+
- **Surface** (`#f2f2f2`): compact circular controls and quiet utility surfaces.
|
|
174
|
+
- **Soft search surface** (`#ebebeb`): current 66px marketplace search shell.
|
|
175
|
+
- **Divider** (`#dddddd`): official Help list-row separation.
|
|
176
|
+
|
|
177
|
+
Newsroom-local black/white controls and `#f7f7f7` panels remain editorial-domain observations. Earlier Luxe, Plus, error, legal-link, and generic semantic colors are omitted because the current inspected surfaces did not establish those roles.
|
|
128
178
|
|
|
129
179
|
## 3. Typography Rules
|
|
130
180
|
|
|
131
|
-
### Font
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
|
138
|
-
|
|
139
|
-
|
|
|
140
|
-
|
|
141
|
-
|
|
|
142
|
-
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
| Small | Airbnb Cereal VF | 13px (0.81rem) | 400 | 1.23 (tight) | normal | Descriptions |
|
|
151
|
-
| Tag | Airbnb Cereal VF | 12px (0.75rem) | 400–700 | 1.33 | normal | Tags, prices |
|
|
152
|
-
| Badge | Airbnb Cereal VF | 11px (0.69rem) | 600 | 1.18 (tight) | normal | `"salt"` feature |
|
|
153
|
-
| Micro Uppercase | Airbnb Cereal VF | 8px (0.50rem) | 700 | 1.25 (tight) | 0.32px | `text-transform: uppercase` |
|
|
154
|
-
|
|
155
|
-
### Principles
|
|
156
|
-
- **Warm weight range**: 500–700 dominate. No weight 300 or 400 for headings — Airbnb's type is always at least medium weight, creating a warm, confident voice.
|
|
157
|
-
- **Negative tracking on headings**: -0.18px to -0.44px letter-spacing on display creates intimate, cozy headings rather than cold, compressed ones.
|
|
158
|
-
- **"salt" OpenType feature**: Stylistic alternates on specific UI elements (badges, captions) create subtle glyph variations that add visual interest.
|
|
159
|
-
- **Variable font precision**: Cereal VF enables continuous weight interpolation, though the design system uses discrete stops at 500, 600, and 700.
|
|
181
|
+
### Font evidence boundary
|
|
182
|
+
|
|
183
|
+
| Evidence class | Resolution |
|
|
184
|
+
|---|---|
|
|
185
|
+
| Official product-use | First-party marketplace and Help surfaces establish Airbnb Cereal as Airbnb's public product family. |
|
|
186
|
+
| Live surface-use | Airbnb Cereal VF loaded/high with 973 visible uses; Cereal loaded/high with 68 Newsroom uses. |
|
|
187
|
+
| Official distributed asset | Cereal is delivered as a first-party webfont but is not represented as a freely installable or redistributable asset. |
|
|
188
|
+
| Declared-only | Cereal Italic and HE/JP/KR/Thai variable families were declared on the Newsroom but had zero visible use in this capture. |
|
|
189
|
+
| Unresolved | Authenticated booking flows, native apps, and locale-specific runtime overrides remain unresolved. |
|
|
190
|
+
|
|
191
|
+
| Role | Family | Size | Weight | Line height |
|
|
192
|
+
|---|---|---:|---:|---:|
|
|
193
|
+
| Marketplace section title | Airbnb Cereal VF | 22px | 500 | 26px |
|
|
194
|
+
| Marketplace body/list | Airbnb Cereal VF | 14px | 400 | 20.02px |
|
|
195
|
+
| Marketplace action/tab | Airbnb Cereal VF | 14px | 500 | 18px |
|
|
196
|
+
| Help reading text | Airbnb Cereal VF | 16px | 400 | 24px |
|
|
197
|
+
| Newsroom editorial copy | Cereal | 18px | 400 | 28px |
|
|
198
|
+
|
|
199
|
+
Do not render Circular, system-ui, or another sans as though it were Airbnb Cereal. If the authorized font cannot load, preserve metadata and omit the specimen.
|
|
160
200
|
|
|
161
201
|
## 4. Component Stylings
|
|
162
202
|
|
|
163
|
-
###
|
|
164
|
-
|
|
165
|
-
Verified against `getdesign.md/airbnb/design-md` (canonical token taxonomy) and `airbnb.com` (rendered values). Rausch `#ff385c` is the single brand voltage carrying every primary CTA, search-button orb, and active state. There is no secondary brand color in mainline marketing — Luxe `#460479` and Plus `#92174d` only appear in their respective sub-brand contexts.
|
|
166
|
-
|
|
167
|
-
**Primary (Rausch)**
|
|
168
|
-
- Background: `#ff385c`
|
|
169
|
-
- Text: `#ffffff`
|
|
170
|
-
- Border: none
|
|
171
|
-
- Radius: 8px
|
|
172
|
-
- Padding: 14px 24px
|
|
173
|
-
- Font: 16px / 600 / Airbnb Cereal VF
|
|
174
|
-
- Active: `#e00b41` background
|
|
175
|
-
- Disabled: `#dddddd` background
|
|
176
|
-
- Use: Primary CTA — "Reserve", "Continue", "Save" — the workhorse Rausch button (48px tall)
|
|
177
|
-
|
|
178
|
-
**Secondary (Outline)**
|
|
179
|
-
- Background: `#ffffff`
|
|
180
|
-
- Text: `#222222`
|
|
181
|
-
- Border: 1px solid `#222222`
|
|
182
|
-
- Radius: 8px
|
|
183
|
-
- Padding: 13px 23px
|
|
184
|
-
- Font: 16px / 600 / Airbnb Cereal VF
|
|
185
|
-
- Use: Secondary action paired with a Primary Rausch (Cancel, Edit)
|
|
186
|
-
|
|
187
|
-
**Tertiary (Text)**
|
|
188
|
-
- Background: transparent
|
|
189
|
-
- Text: `#222222`
|
|
190
|
-
- Border: none
|
|
191
|
-
- Radius: 0
|
|
192
|
-
- Padding: 0
|
|
193
|
-
- Font: 16px / 600 / Airbnb Cereal VF (underline)
|
|
194
|
-
- Use: Inline text-link CTA — minimal chrome, body-flow
|
|
195
|
-
|
|
196
|
-
**Rausch Pill (Compact)**
|
|
197
|
-
- Background: `#ff385c`
|
|
198
|
-
- Text: `#ffffff`
|
|
199
|
-
- Border: none
|
|
200
|
-
- Radius: 9999px
|
|
201
|
-
- Padding: 10px 20px
|
|
202
|
-
- Font: 14px / 600 / Airbnb Cereal VF
|
|
203
|
-
- Use: Compact CTA in dense layouts — pill shape distinguishes from rectangle Primary
|
|
204
|
-
|
|
205
|
-
**Search Orb**
|
|
206
|
-
- Background: `#ff385c`
|
|
207
|
-
- Text: `#ffffff`
|
|
208
|
-
- Border: none
|
|
209
|
-
- Radius: 9999px
|
|
210
|
-
- Padding: 0
|
|
211
|
-
- Font: 14px / 600 / Airbnb Cereal VF
|
|
212
|
-
- Use: Round 48px search submit button at end of the search bar — the signature Airbnb glyph
|
|
213
|
-
|
|
214
|
-
**Icon Button (Circle)**
|
|
215
|
-
- Background: `#f2f2f2`
|
|
216
|
-
- Text: `#222222`
|
|
217
|
-
- Border: none
|
|
218
|
-
- Radius: 50%
|
|
219
|
-
- Padding: 0
|
|
220
|
-
- Font: 14px / 600 / Airbnb Cereal VF
|
|
221
|
-
- Use: 32×32 dense icon control (filter, share, favorite)
|
|
222
|
-
|
|
223
|
-
**Icon Button (Outline)**
|
|
224
|
-
- Background: `#ffffff`
|
|
225
|
-
- Text: `#222222`
|
|
226
|
-
- Border: 1px solid `#dddddd`
|
|
227
|
-
- Radius: 50%
|
|
228
|
-
- Padding: 0
|
|
229
|
-
- Font: 14px / 600 / Airbnb Cereal VF
|
|
230
|
-
- Hover: shadow `rgba(0,0,0,0.08) 0px 4px 12px` + scale(1.04)
|
|
231
|
-
- Active: 4px white border ring + focus shadow
|
|
232
|
-
- Use: 40×40 carousel arrow / gallery navigation
|
|
233
|
-
|
|
234
|
-
### Inputs
|
|
235
|
-
|
|
236
|
-
**Search Field**
|
|
237
|
-
- Background: `#ffffff`
|
|
238
|
-
- Text: `#222222`
|
|
239
|
-
- Border: 1px solid `#dddddd`
|
|
240
|
-
- Radius: 50px
|
|
241
|
-
- Padding: 0 24px
|
|
242
|
-
- Font: 14px / 600 / Airbnb Cereal VF (label) + 14px / 400 (value)
|
|
243
|
-
- Placeholder: `#717171`
|
|
244
|
-
- Focus: shadow `0px 4px 16px rgba(0,0,0,0.08)`
|
|
245
|
-
- Use: Header search bar — full pill (50px radius), 66px tall, dominant component (verified at airbnb.com)
|
|
246
|
-
|
|
247
|
-
**Default**
|
|
248
|
-
- Background: `#ffffff`
|
|
249
|
-
- Text: `#222222`
|
|
250
|
-
- Border: 1px solid `#b0b0b0`
|
|
251
|
-
- Radius: 8px
|
|
252
|
-
- Padding: 14px 12px
|
|
253
|
-
- Font: 16px / 400 / Airbnb Cereal VF
|
|
254
|
-
- Placeholder: `#717171`
|
|
255
|
-
- Focus: 2px solid `#222222`
|
|
256
|
-
- Use: Form field (login, profile, host listing) — 56px tall (verified at getdesign.md)
|
|
257
|
-
|
|
258
|
-
### Cards
|
|
259
|
-
|
|
260
|
-
**Listing Card**
|
|
261
|
-
- Background: `#ffffff`
|
|
262
|
-
- Text: `#222222`
|
|
263
|
-
- Border: none
|
|
264
|
-
- Radius: 12px
|
|
265
|
-
- Padding: 0
|
|
266
|
-
- Shadow: none (relies on photography for visual weight)
|
|
267
|
-
- Hover: scale(1.02) + shadow `rgba(0,0,0,0.12) 0px 8px 24px`
|
|
268
|
-
- Use: Search-result listing card — photo at top fills card width, metadata below
|
|
269
|
-
|
|
270
|
-
**Standard**
|
|
271
|
-
- Background: `#ffffff`
|
|
272
|
-
- Border: none
|
|
273
|
-
- Radius: 12px
|
|
274
|
-
- Padding: 24px
|
|
275
|
-
- Shadow: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`
|
|
276
|
-
- Use: Three-layer warm shadow lift — modal panels, host dashboard cards
|
|
277
|
-
|
|
278
|
-
**Large**
|
|
279
|
-
- Background: `#ffffff`
|
|
280
|
-
- Border: none
|
|
281
|
-
- Radius: 32px
|
|
282
|
-
- Padding: 32px
|
|
283
|
-
- Shadow: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`
|
|
284
|
-
- Use: Hero/feature surfaces — "Become a Host" panels, plus tier cards
|
|
285
|
-
|
|
286
|
-
### Badges
|
|
287
|
-
|
|
288
|
-
**Category Pill**
|
|
289
|
-
- Background: transparent
|
|
290
|
-
- Text: `#222222`
|
|
291
|
-
- Border: none
|
|
292
|
-
- Radius: 8px
|
|
293
|
-
- Padding: 10px
|
|
294
|
-
- Font: 14px / 500 / Airbnb Cereal VF
|
|
295
|
-
- Active: text `#222222` + 2px bottom border `#222222` underline
|
|
296
|
-
- Use: Category filter pills below header (Trending, Beachfront, Cabins…) — verified at airbnb.com
|
|
297
|
-
|
|
298
|
-
**Guest Favorite**
|
|
299
|
-
- Background: `#ffffff`
|
|
300
|
-
- Text: `#222222`
|
|
301
|
-
- Border: 1px solid `#dddddd`
|
|
302
|
-
- Radius: 9999px
|
|
303
|
-
- Padding: 4px 10px
|
|
304
|
-
- Font: 12px / 600 / Airbnb Cereal VF
|
|
305
|
-
- Use: Listing-card overlay marker for "Guest favorite" properties (verified at getdesign.md)
|
|
306
|
-
|
|
307
|
-
**New Tag**
|
|
308
|
-
- Background: `#ffffff`
|
|
309
|
-
- Text: `#222222`
|
|
310
|
-
- Border: 1px solid `#dddddd`
|
|
311
|
-
- Radius: 9999px
|
|
312
|
-
- Padding: 2px 6px
|
|
313
|
-
- Font: 11px / 700 / Airbnb Cereal VF (uppercase tracking)
|
|
314
|
-
- Use: NEW listing marker — uppercase tight pill (verified at getdesign.md)
|
|
315
|
-
|
|
316
|
-
**Status (Plus / Luxe)**
|
|
317
|
-
- Background: `#ffffff`
|
|
318
|
-
- Text: `#222222`
|
|
319
|
-
- Border: 1px solid `#dddddd`
|
|
320
|
-
- Radius: 14px
|
|
321
|
-
- Padding: 4px 8px
|
|
322
|
-
- Font: 11px / 700 / Airbnb Cereal VF
|
|
323
|
-
- Use: Tier markers ("PLUS", "LUXE", "Superhost") — uppercase, narrow padding
|
|
324
|
-
|
|
325
|
-
### Navigation
|
|
326
|
-
- White sticky header with search bar centered
|
|
327
|
-
- Airbnb logo (Rausch Red) left-aligned
|
|
328
|
-
- Category filter pills: horizontal scroll below search
|
|
329
|
-
- Circular nav controls for carousel navigation
|
|
330
|
-
- "Become a Host" text link, avatar/menu right-aligned
|
|
331
|
-
|
|
332
|
-
### Image Treatment
|
|
333
|
-
- Listing photography fills card top with generous height
|
|
334
|
-
- Image carousel with dot indicators
|
|
335
|
-
- Heart/wishlist icon overlay on images
|
|
336
|
-
- 8px–14px radius on contained images
|
|
203
|
+
### Current marketplace components
|
|
337
204
|
|
|
338
|
-
|
|
205
|
+
#### Hosting action
|
|
206
|
+
- Transparent / `#222222`, 20px radius, 40px height, `11px 12px`
|
|
207
|
+
- Airbnb Cereal VF 14px/500; pressed state observed
|
|
208
|
+
|
|
209
|
+
#### Category tab
|
|
210
|
+
- Transparent / `#6a6a6a`, 8px radius, `0 16px`
|
|
211
|
+
- Selected and tab-selected states observed; selected text resolves to `#222222`
|
|
212
|
+
|
|
213
|
+
#### Circular icon controls
|
|
214
|
+
- Active compact control: `#f2f2f2` / `#222222`, 28px circle
|
|
215
|
+
- Disabled sibling: `#f2f2f2` / `#c1c1c1`, 28px circle
|
|
216
|
+
- Hover and pressed were observed; the disabled sibling also exposed disabled and focus states
|
|
339
217
|
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
218
|
+
#### Search shell
|
|
219
|
+
- `#ebebeb` / `#222222`, 32px radius, 66px height
|
|
220
|
+
- The shell exposes hover/pressed behavior; its inner text input is transparent and uses 14px/500
|
|
221
|
+
|
|
222
|
+
### Official Help component
|
|
223
|
+
|
|
224
|
+
#### Help list row
|
|
225
|
+
- Transparent / `#222222`, 1px `#dddddd` bottom divider
|
|
226
|
+
- `24px 0` padding, 14px/400/20.02px
|
|
227
|
+
|
|
228
|
+
Red Reserve buttons, listing cards, modal dialogs, badges, inputs, and booking states are not promoted without a current inspectable path that establishes their exact role and geometry.
|
|
344
229
|
|
|
345
230
|
## 5. Layout Principles
|
|
346
231
|
|
|
347
|
-
|
|
348
|
-
-
|
|
349
|
-
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
- Full-width header with centered search
|
|
353
|
-
- Category pill bar: horizontal scrollable row
|
|
354
|
-
- Listing grid: responsive multi-column (3–5 columns on desktop)
|
|
355
|
-
- Full-width footer with link columns
|
|
356
|
-
|
|
357
|
-
### Whitespace Philosophy
|
|
358
|
-
- **Travel-magazine spacing**: Generous vertical padding between sections creates a leisurely browsing pace — you're meant to scroll slowly, like browsing a magazine.
|
|
359
|
-
- **Photography density**: Listing cards are packed relatively tightly, but each image is large enough to feel immersive.
|
|
360
|
-
- **Search bar prominence**: The search bar gets maximum vertical space in the header — finding your destination is the primary action.
|
|
361
|
-
|
|
362
|
-
### Border Radius Scale
|
|
363
|
-
- Subtle (4px): Small links
|
|
364
|
-
- Standard (8px): Buttons, tabs, search elements
|
|
365
|
-
- Badge (14px): Status badges, labels
|
|
366
|
-
- Card (20px): Feature cards, large buttons
|
|
367
|
-
- Large (32px): Large containers, hero elements
|
|
368
|
-
- Circle (50%): Nav controls, avatars, icons
|
|
232
|
+
- Give photography the largest visual area and keep utility controls compact.
|
|
233
|
+
- Build hierarchy with white space, type weight, and neutral surfaces before shadows.
|
|
234
|
+
- Use 32px search-shell geometry as a role-specific container, not a universal pill.
|
|
235
|
+
- Keep marketplace category navigation horizontally scannable and stateful.
|
|
236
|
+
- Treat Help and Newsroom layout measurements as domain-local unless a shared implementation is directly verified.
|
|
369
237
|
|
|
370
238
|
## 6. Depth & Elevation
|
|
371
239
|
|
|
372
|
-
|
|
373
|
-
|-------|-----------|-----|
|
|
374
|
-
| Flat (Level 0) | No shadow | Page background, text blocks |
|
|
375
|
-
| Card (Level 1) | `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` | Listing cards, search bar |
|
|
376
|
-
| Hover (Level 2) | `rgba(0,0,0,0.08) 0px 4px 12px` | Button hover, interactive lift |
|
|
377
|
-
| Active Focus (Level 3) | `rgb(255,255,255) 0px 0px 0px 4px` + focus ring | Active/focused elements |
|
|
378
|
-
|
|
379
|
-
**Shadow Philosophy**: Airbnb's three-layer shadow system creates a warm, natural lift. Layer 1 (`0px 0px 0px 1px` at 0.02 opacity) is an ultra-subtle border. Layer 2 (`0px 2px 6px` at 0.04) provides soft ambient shadow. Layer 3 (`0px 4px 8px` at 0.1) adds the primary lift. This graduated approach creates shadows that feel like natural light rather than CSS effects.
|
|
240
|
+
The current marketplace components promoted here are flat. Newsroom consent UI exposed an 8px panel with a strong `0 8px 28px rgba(0,0,0,.28)` shadow, but that cookie-specific surface is not a general Airbnb product elevation token.
|
|
380
241
|
|
|
381
242
|
## 7. Do's and Don'ts
|
|
382
243
|
|
|
383
244
|
### Do
|
|
384
|
-
- Use
|
|
385
|
-
-
|
|
386
|
-
-
|
|
387
|
-
-
|
|
388
|
-
- Use generous border-radius: 8px for buttons, 20px for cards, 50% for controls
|
|
389
|
-
- Use photography as the primary visual content — listings are image-first
|
|
390
|
-
- Apply negative letter-spacing (-0.18px to -0.44px) on headings for intimacy
|
|
391
|
-
- Use circular (50%) buttons for carousel/navigation controls
|
|
245
|
+
- Use Airbnb Cereal only when an authorized source can load it.
|
|
246
|
+
- Keep the neutral marketplace hierarchy and photography-first composition.
|
|
247
|
+
- Preserve Rausch as identity evidence while assigning component roles only from current capture.
|
|
248
|
+
- Separate marketplace, Help, Newsroom, brand, and native evidence.
|
|
392
249
|
|
|
393
250
|
### Don't
|
|
394
|
-
-
|
|
395
|
-
-
|
|
396
|
-
-
|
|
397
|
-
-
|
|
398
|
-
- Don't use sharp corners (0–4px) on cards — the generous rounding (20px+) is core
|
|
399
|
-
- Don't introduce additional brand colors beyond the Rausch/Luxe/Plus system
|
|
400
|
-
- Don't override the palette token system — use `--palette-*` variables consistently
|
|
251
|
+
- Do not recreate old Reserve, Luxe, Plus, error, or shadow tokens from memory.
|
|
252
|
+
- Do not turn Rausch into a default fill for every control.
|
|
253
|
+
- Do not promote a Newsroom cookie button or Help row as a marketplace product primitive.
|
|
254
|
+
- Do not substitute system UI fonts and label the result Airbnb Cereal.
|
|
401
255
|
|
|
402
256
|
## 8. Responsive Behavior
|
|
403
257
|
|
|
404
|
-
|
|
405
|
-
| Name | Width | Key Changes |
|
|
406
|
-
|------|-------|-------------|
|
|
407
|
-
| Mobile Small | <375px | Single column, compact search |
|
|
408
|
-
| Mobile | 375–550px | Standard mobile listing grid |
|
|
409
|
-
| Tablet Small | 550–744px | 2-column listings |
|
|
410
|
-
| Tablet | 744–950px | Search bar expansion |
|
|
411
|
-
| Desktop Small | 950–1128px | 3-column listings |
|
|
412
|
-
| Desktop | 1128–1440px | 4-column grid, full header |
|
|
413
|
-
| Large Desktop | 1440–1920px | 5-column grid |
|
|
414
|
-
| Ultra-wide | >1920px | Maximum grid width |
|
|
415
|
-
|
|
416
|
-
*Note: Airbnb has 61 detected breakpoints — one of the most granular responsive systems observed, reflecting their obsession with layout at every possible screen size.*
|
|
417
|
-
|
|
418
|
-
### Touch Targets
|
|
419
|
-
- Circular nav buttons: adequate 50% radius sizing
|
|
420
|
-
- Listing cards: full-card tap target on mobile
|
|
421
|
-
- Search bar: prominently sized for thumb interaction
|
|
422
|
-
- Category pills: horizontally scrollable with generous padding
|
|
423
|
-
|
|
424
|
-
### Collapsing Strategy
|
|
425
|
-
- Listing grid: 5 → 4 → 3 → 2 → 1 columns
|
|
426
|
-
- Search: expanded bar → compact bar → overlay
|
|
427
|
-
- Category pills: horizontal scroll at all sizes
|
|
428
|
-
- Navigation: full header → mobile simplified
|
|
429
|
-
- Map: side panel → overlay/toggle
|
|
430
|
-
|
|
431
|
-
### Image Behavior
|
|
432
|
-
- Listing photos: carousel with swipe on mobile
|
|
433
|
-
- Responsive image sizing with aspect ratio maintained
|
|
434
|
-
- Heart overlay positioned consistently across sizes
|
|
435
|
-
- Photo quality adjusts based on viewport
|
|
258
|
+
The inspected public surfaces maintain large media areas, horizontally navigable category controls, compact circular actions, and reflowing text. Exact native-app breakpoints, authenticated booking layouts, and locale-specific truncation behavior remain unresolved.
|
|
436
259
|
|
|
437
260
|
## 9. Agent Prompt Guide
|
|
438
261
|
|
|
439
|
-
|
|
440
|
-
- Background: Pure White (`#ffffff`)
|
|
441
|
-
- Text: Near Black (`#222222`)
|
|
442
|
-
- Brand accent: Rausch Red (`#ff385c`)
|
|
443
|
-
- Secondary text: `#6a6a6a`
|
|
444
|
-
- Disabled: `rgba(0,0,0,0.24)`
|
|
445
|
-
- Card border: `rgba(0,0,0,0.02) 0px 0px 0px 1px`
|
|
446
|
-
- Card shadow: full three-layer stack
|
|
447
|
-
- Button surface: `#f2f2f2`
|
|
448
|
-
|
|
449
|
-
### Example Component Prompts
|
|
450
|
-
- "Create a listing card: white background, 20px radius. Three-layer shadow: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px. Photo area on top (16:10 ratio), details below: 16px Airbnb Cereal VF weight 600 title, 14px weight 400 description in #6a6a6a."
|
|
451
|
-
- "Design search bar: white background, full card shadow, 32px radius on container. Search text at 14px Cereal VF weight 400. Red search button (#ff385c, 50% radius, white icon)."
|
|
452
|
-
- "Build category pill bar: horizontal scrollable row. Each pill: 14px Cereal VF weight 600, #222222 text, bottom border on active. Circular prev/next arrows (#f2f2f2 bg, 50% radius)."
|
|
453
|
-
- "Create a CTA button: #222222 background, white text, 8px radius, 16px Cereal VF weight 500, 0px 24px padding. Hover: brand red accent."
|
|
454
|
-
- "Design a heart/wishlist button: transparent background, 50% radius, white heart icon with dark shadow outline."
|
|
455
|
-
|
|
456
|
-
### Iteration Guide
|
|
457
|
-
1. Start with white — the photography provides all the color
|
|
458
|
-
2. Rausch Red (#ff385c) is the singular accent — use sparingly for CTAs only
|
|
459
|
-
3. Near-black (#222222) for text — the warmth matters
|
|
460
|
-
4. Three-layer shadows create natural, warm lift — always use all three layers
|
|
461
|
-
5. Generous radius: 8px buttons, 20px cards, 50% controls
|
|
462
|
-
6. Cereal VF at 500–700 weight — no thin weights for any heading
|
|
463
|
-
7. Photography is hero — every listing card is image-first
|
|
464
|
-
|
|
465
|
-
---
|
|
262
|
+
> Build a photography-led travel marketplace on a white canvas with `#222222` type, quiet `#6a6a6a` hierarchy, Airbnb Cereal VF, 20–32px role-specific pills, compact circular controls, and Rausch used only as a verified identity accent. Omit unverified booking, card, modal, and semantic states.
|
|
466
263
|
|
|
467
264
|
## 10. Voice & Tone
|
|
468
265
|
|
|
469
|
-
Airbnb's
|
|
470
|
-
|
|
471
|
-
| Context | Tone |
|
|
472
|
-
|---|---|
|
|
473
|
-
| Hero headlines | Warm, inviting, second-person. "Find a place to stay." |
|
|
474
|
-
| Listing descriptions | Specific, human-scale. "Sleeps 4" not "Max occupancy: 4". |
|
|
475
|
-
| CTAs | Gentle imperative. "Continue", "Reserve", "Send message". Never "Buy now". |
|
|
476
|
-
| Host-facing copy | Partnered, respectful. Hosts are capitalized (Host, Superhost), not "providers" or "suppliers". |
|
|
477
|
-
| Error messages | Apologetic-but-specific. Explains what happened and how to recover. |
|
|
478
|
-
| Onboarding (guest) | Encouraging without being sycophantic. Walks first-time guests through trust features. |
|
|
479
|
-
| Trust & Safety copy | Serious but warm. Reads like a thoughtful letter, not a legal document. |
|
|
480
|
-
| Marketing long-form | Travel-magazine-editorial. Stories of specific Hosts and Guests. |
|
|
481
|
-
|
|
482
|
-
**Forbidden phrases.** "Revolutionary", "disrupt", "next-generation", "game-changer" — the voice is human, not tech-industry. "Book now!" with exclamation — Airbnb treats booking as a trust decision, not a shopping impulse. "Unlock" (as in "Unlock amazing stays") — unlocking is a transactional metaphor and this product is about belonging. Cold-booking vocabulary: "accommodations", "units", "properties" where "homes" works. Scarcity pressure ("Only 2 left!") on product surfaces — this would betray the hospitality thesis.
|
|
266
|
+
Airbnb's current public language is welcoming, concrete, and action-oriented. It names a place, activity, service, or next step directly and allows imagery to carry aspiration. Marketplace labels should help a guest compare location, timing, category, or offering without unnecessary travel jargon. Host-facing language should make responsibility and next steps clear. Help content becomes procedural and explicit; Newsroom content becomes explanatory and product-led. Safety and policy language should remain direct, specific, and calm. Avoid generic luxury language, exaggerated belonging claims, and unsupported outcome metrics.
|
|
483
267
|
|
|
484
268
|
## 11. Brand Narrative
|
|
485
269
|
|
|
486
|
-
Airbnb
|
|
487
|
-
|
|
488
|
-
In **July 2014**, Airbnb launched its first major rebrand: the **Bélo** logo (a universal symbol intended to evoke belonging) and the tagline *"Belong Anywhere."* Brian Chesky's launch essay framed the thesis directly: *"A house is just a space, but a home is where you belong. And what makes this global community so special is that for the very first time, you can belong anywhere."* The campaign framed belonging as *"the universal human yearning to belong — the desire to feel welcomed, and respected, and appreciated for who you are, no matter where you might be."*
|
|
489
|
-
|
|
490
|
-
That 2014 thesis is still the company's foundation, but the positioning has evolved substantially. In **May 2024**, the **Icons Release** introduced a new category — *"extraordinary experiences from the world's greatest icons"* — with partnerships across sports, music, and film, alongside group-trip features (shared wishlists, a redesigned Messages tab). In **2025**, the **Summer Release** expanded Airbnb into a three-pillar platform — **Homes, Experiences, and Services** — launching 10 service categories across 260 cities and a curated "Airbnb Originals" line. Brian Chesky framed the shift verbatim: *"With the launch of services and experiences, we're changing travel again. Now you can Airbnb more than an Airbnb."* The 2025 release shipped with a **visual-language refresh toward 3D, skeuomorphic, Pixar-inspired iconography** — *"vibrant, tactile, and full of depth"*, with *"smooth animations, subtle lighting, soft curves, and drop-shadows"* — while deliberately preserving the **Cereal** typeface, **Rausch Red** accent, and the underlying Belong-Anywhere thesis. The brand evolved into what Airbnb now frames as an "everything app" without abandoning any of the 2014 foundation.
|
|
491
|
-
|
|
492
|
-
What Airbnb refuses: the "hotel booking site" aesthetic (stock photography, star ratings as the only trust signal, "Book Now" pressure tactics), the gig-economy aesthetic (minimalist-cold, platform-as-intermediary), and any design choice that would reduce a home to a commodity. What it embraces: photography-first listing cards where the Host's own photos are the hero content, Rausch Red (`#ff385c`) — named after the company's early office address on Rausch Street, so the brand color is a personal reference rather than a committee decision — generous border-radius that reads as soft rather than precise, and a Bélo logo designed so anyone, anywhere, could draw it.
|
|
270
|
+
Airbnb grew by reframing accommodation as access to people and places, then expanded that frame into experiences and services. Its visual system follows the same logic: the Bélo and Rausch identify the brand, but photographs, host offerings, and local context create the actual variety. The 2026 release continues this evolution by treating planning as a broader connected journey rather than a single lodging search. Homes remain the marketplace foundation, while experiences and services bring more of a trip into the same discovery environment. This increases the importance of clear category, availability, and offering boundaries. The brand's warmth comes from the people and places represented, not from applying coral to every interaction. Airbnb Cereal, rounded controls, direct labels, and generous image areas form the stable frame that lets highly varied inventory still feel like one product.
|
|
493
271
|
|
|
494
272
|
## 12. Principles
|
|
495
273
|
|
|
496
|
-
1. **
|
|
497
|
-
2. **
|
|
498
|
-
3. **
|
|
499
|
-
4. **
|
|
500
|
-
5. **Warm minimalism.** White canvas, Rausch Red as singular accent, near-black (`#222222`) text with a whiff of warmth, generous radius throughout. The palette refuses the "cool gray institutional" default of travel-tech.
|
|
501
|
-
6. **Trust is designed.** Every trust-signaling element — reviews, Host verification, cancellation policies, identity verification — is a first-class UI element, not buried in small print. Warmth without trust is hospitality theater.
|
|
502
|
-
7. **Pay attention to the in-between moments.** Empty states, error states, between-booking follow-ups — these are where belonging is either reinforced or broken. A generic "No results found" state is an Airbnb failure.
|
|
503
|
-
8. **The Bélo is universal on purpose.** The 2014 Bélo was designed so anyone, anywhere, could draw it. Brand marks are not decoration — they are symbols of the community they represent, and community symbols must be replicable by the community.
|
|
504
|
-
9. **Hospitality is more than a look.** Design decisions are judged against whether a real Host would feel dignified showing their listing inside this chrome. If the answer is "not quite", the chrome is wrong.
|
|
505
|
-
10. **The super-app is an extension of hospitality, not a pivot from it.** *(Contemporary, 2024–2025 era.)* The 2024 **Icons Release** and 2025 expansion to **Homes + Experiences + Services** inherit the 2014 "Belong Anywhere" thesis — the unit of belonging scales from a home stay to an experience or a service, but the emotional register stays hospitable. The 2025 shift to 3D / skeuomorphic / Pixar-inspired iconography kept Cereal, Rausch Red, and the warm-minimalist chrome intact precisely because the brand is evolving, not rebooting. A redesign that introduced a cold palette or a sans-serif brand type would violate the thesis, no matter how "modern" it looked.
|
|
274
|
+
1. **Let the place lead.** UI should frame photography and real offerings rather than compete with them.
|
|
275
|
+
2. **Make discovery approachable.** Rounded geometry and direct language reduce perceived complexity.
|
|
276
|
+
3. **Reserve brand voltage.** Identity color should clarify ownership or a verified high-value role, not decorate every action.
|
|
277
|
+
4. **Keep evidence domains explicit.** Marketplace, editorial, support, brand, and native surfaces cannot silently substitute for one another.
|
|
506
278
|
|
|
507
279
|
## 13. Personas
|
|
508
280
|
|
|
509
|
-
|
|
281
|
+
First-party material establishes task contexts only:
|
|
282
|
+
- A guest exploring homes, experiences, or services.
|
|
283
|
+
- A host presenting and managing an offering.
|
|
284
|
+
- A traveler seeking official Help before or after a booking-related task.
|
|
510
285
|
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
**Dimitri Stavros, 58, Thessaloniki.** Retired and runs a 2-bedroom Superhost listing in his family's village home. Uses the Host app daily. Values that the Host-facing copy treats him as a partner, not a gig-economy worker. Reads every update to Airbnb's cancellation policies carefully because they affect his household income. Would leave the platform if the Host tools ever felt more extractive than collaborative.
|
|
514
|
-
|
|
515
|
-
**Aisha Mohammed, 27, Cairo.** Software engineer working fully remote. Uses Airbnb for 30–90 day "slow travel" stays — Lisbon, Mexico City, Medellín. Filters aggressively for listings with workspace photos and fiber internet mentions. Has written a Medium post about her personal rotation of Superhosts in four cities. Sees Airbnb more as "a distributed home network" than a travel product.
|
|
516
|
-
|
|
517
|
-
**Kenji and Yuki Watanabe, 44 and 41, Yokohama.** Family of four. Book 2–3 Airbnb stays per year for multigenerational trips where hotel rooms would require 2–3 separate rooms. Value the "entire home" filter specifically because it lets grandparents and grandchildren share a kitchen. Read reviews filtered by the "Families" tag. Distrust listings that use professional staging photography — they prefer the slightly-imperfect real-Host photos as a trust signal.
|
|
286
|
+
Project-specific names, ages, income, trip frequency, team structure, and success metrics are intentionally unspecified and must come from the product brief.
|
|
518
287
|
|
|
519
288
|
## 14. States
|
|
520
289
|
|
|
521
|
-
|
|
522
|
-
|---|---|
|
|
523
|
-
| **Empty (search, no results)** | Single warm line in near-black (`#222222`): "We couldn't find any homes matching all your filters." One soft-CTA link in Rausch Red: "Clear filters". No illustration. Filter chips visible above so users can adjust in place. |
|
|
524
|
-
| **Empty (wishlist, first use)** | Warm-gray body text: "Save places you love by tapping the heart on any home." One ghost CTA: "Explore homes". No illustration, no sparkles, no tour. |
|
|
525
|
-
| **Empty (messages, new user)** | Near-black headline + warm-gray body: "Your conversations with Hosts will appear here." Nothing more — Airbnb trusts that this becomes obvious once you book. |
|
|
526
|
-
| **Loading (search results)** | Warm-tone skeleton cards preserving the listing-card shape (image area + 3 text lines + price). 1.2s shimmer in a lighter warm tone. Skeletons use the same 12px+ radius as real cards — no geometric surprise on paint-in. |
|
|
527
|
-
| **Loading (map pan)** | Result pins fade at `motion-fast` as the user drags; map tiles load underneath. No blocking overlay, no "Loading..." text on the map. |
|
|
528
|
-
| **Error (booking failed)** | Warm apology + specific cause + recovery path. *"Your booking didn't go through. Please try again, or contact the Host directly."* Rausch Red used only on the "Try again" button. Never a bright red banner. |
|
|
529
|
-
| **Error (form validation)** | Field-level. Ultra-thin border switches from warm gray to Rausch Red. 13px warm message below: what's invalid and what would be valid. |
|
|
530
|
-
| **Error (Host decline)** | Warm, explanatory surface. Not framed as failure — framed as "this Host isn't available; here are similar homes". The rejection is never hidden, but the alternative is immediate and present. |
|
|
531
|
-
| **Success (booking confirmed)** | Dedicated confirmation screen. Host's first name + photo + welcome note if they wrote one. Check-in details prominent. Rausch Red only on the "Message Host" button. Past tense: "You're booked." |
|
|
532
|
-
| **Success (review submitted)** | Brief warm-gray inline confirmation: "Thanks for your review." 4s auto-dismiss. No toast spam; reviews are a small ritual, treated quietly. |
|
|
533
|
-
| **Skeleton** | Warm-tone blocks at exact final card dimensions. Shimmer in a lighter warm tone, never cool blue. Photography placeholder is a subtle warm gradient, never a blank gray square — even skeletons respect the photography-first principle. |
|
|
534
|
-
| **Disabled** | Opacity on text and warm-border together. Rausch Red actions become `rgba(255,56,92,0.3)` — faded warm red, not switched to gray. |
|
|
535
|
-
| **Loading (Host publishing a listing)** | Multi-step progress with named steps ("Photos uploaded", "Description saved", "Calendar synced"). Warm, specific, never abstract "Loading..." text. |
|
|
290
|
+
Marketplace circular controls expose focus, hover, pressed, and disabled states. Category navigation exposes selected/tab-selected states. Search shells expose hover and pressed behavior. Booking loading, error, success, authentication, and empty states remain absent.
|
|
536
291
|
|
|
537
292
|
## 15. Motion & Easing
|
|
538
293
|
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|---|---|---|
|
|
543
|
-
| `motion-instant` | 0ms | State commits, selection, keyboard confirm |
|
|
544
|
-
| `motion-fast` | 160ms | Hover, focus, heart-icon toggle, map pin interactions |
|
|
545
|
-
| `motion-standard` | 260ms | Sheet, modal, gallery swipe, card expand |
|
|
546
|
-
| `motion-slow` | 400ms | Full-screen photo gallery transitions, rare hero reveals |
|
|
547
|
-
|
|
548
|
-
**Easings**:
|
|
549
|
-
|
|
550
|
-
| Token | Curve | Use |
|
|
551
|
-
|---|---|---|
|
|
552
|
-
| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — sheets, modals, filter drawers |
|
|
553
|
-
| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
|
|
554
|
-
| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |
|
|
555
|
-
| `ease-warm` | `cubic-bezier(0.25, 0.8, 0.25, 1)` | Heart-icon toggle, Wishlist save — slightly more settled at the end, matching the emotional register of saving a home |
|
|
556
|
-
|
|
557
|
-
**Signature motions.**
|
|
558
|
-
|
|
559
|
-
1. **Heart-icon save (Wishlist).** The heart transitions from outline to filled Rausch Red over `motion-fast` with `ease-warm`. A small scale pulse (`0.9 → 1.05 → 1.0`) accompanies the color fill. This is the one place Airbnb's UI allows a tiny "joy" motion — saving a home to come back to later is an emotional act, not a neutral bookmark.
|
|
560
|
-
2. **Photo gallery swipe.** Full-screen photos swipe at `motion-standard` with `ease-standard`. No parallax on the photos themselves; the user should feel like they're looking at real photographs, not a marketing carousel.
|
|
561
|
-
3. **Search filter drawer.** Filter drawer rises at `motion-standard` with `ease-enter`. Backdrop fades in synchronously. Dismissal at `motion-fast` with `ease-exit`.
|
|
562
|
-
4. **Map pin selection.** When a result pin is tapped, the corresponding listing card slides into focus at the bottom of the screen at `motion-standard` with `ease-enter`. The pin itself scales `1.0 → 1.15` over `motion-fast` to confirm selection.
|
|
563
|
-
5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. The heart-icon pulse becomes an instant color switch. Gallery transitions become cuts. The product stays fully functional; hospitality voice is preserved through copy, not through motion.
|
|
564
|
-
|
|
565
|
-
<!--
|
|
566
|
-
OmD v0.1 Sources — Philosophy Layer (sections 10–15)
|
|
567
|
-
|
|
568
|
-
Direct verification via WebFetch / WebSearch (2026-04-19):
|
|
569
|
-
|
|
570
|
-
Historical (2014 era) — the foundation still in force:
|
|
571
|
-
- Brian Chesky, "Belong Anywhere" (Medium, July 2014) — confirms the tagline
|
|
572
|
-
launch and this verbatim framing used directly in §10 and §11:
|
|
573
|
-
"really, we're about home. You see, a house is just a space, but a
|
|
574
|
-
home is where you belong. And what makes this global community so
|
|
575
|
-
special is that for the very first time, you can belong anywhere."
|
|
576
|
-
https://medium.com/@bchesky/belong-anywhere-ccf42702d010
|
|
577
|
-
- "How Airbnb Found a Mission—and a Brand" (Fortune longform) — confirms
|
|
578
|
-
the July 2014 rebrand context, the Bélo logo naming (by then-CMO
|
|
579
|
-
Jonathan Mildenhall), and the campaign framing verbatim:
|
|
580
|
-
"the universal human yearning to belong — the desire to feel
|
|
581
|
-
welcomed, and respected, and appreciated for who you are, no
|
|
582
|
-
matter where you might be."
|
|
583
|
-
https://fortune.com/longform/airbnb-travel-mission-brand/
|
|
584
|
-
|
|
585
|
-
Contemporary (2024–2025 era) — the current positioning:
|
|
586
|
-
- Airbnb 2024 Summer Release (Icons launch) — WebSearch confirms verbatim:
|
|
587
|
-
"extraordinary experiences from the world's greatest icons"
|
|
588
|
-
Also confirmed: the Icons category launch with partners across sports,
|
|
589
|
-
music, and film; group-trip features (shared wishlists, redesigned
|
|
590
|
-
Messages tab). Announced by Brian Chesky in a 34-minute video release.
|
|
591
|
-
https://news.airbnb.com/airbnb-2024-summer-release/
|
|
592
|
-
- Airbnb 2025 Summer Release — WebSearch confirms Brian Chesky verbatim:
|
|
593
|
-
"With the launch of services and experiences, we're changing travel
|
|
594
|
-
again. Now you can Airbnb more than an Airbnb."
|
|
595
|
-
Three-pillar expansion confirmed (Homes + Experiences + Services), 10
|
|
596
|
-
launch categories (including Chefs) across 260 cities, Airbnb Originals
|
|
597
|
-
line.
|
|
598
|
-
https://news.airbnb.com/airbnb-2025-summer-release/
|
|
599
|
-
https://www.airbnb.com/release
|
|
600
|
-
- Medium / Design Bootcamp, "Airbnb Summer 2025 update" — confirms the
|
|
601
|
-
visual-language refresh verbatim:
|
|
602
|
-
"3D, skeuomorphic, Pixar-inspired icons — vibrant, tactile, and full
|
|
603
|
-
of depth"
|
|
604
|
-
"smooth animations, subtle lighting, soft curves, and drop-shadows"
|
|
605
|
-
"playful, utility-driven icon set with consistent visual language —
|
|
606
|
-
curved, bold, and full of personality"
|
|
607
|
-
Also confirms that Cereal typeface and existing logo were preserved
|
|
608
|
-
through the 2025 redesign — evolution, not reboot.
|
|
609
|
-
|
|
610
|
-
Note: Direct WebFetch of https://news.airbnb.com/ and https://www.airbnb.com/
|
|
611
|
-
returned HTTP 403 (likely bot protection), so 2024–2025 release quotes
|
|
612
|
-
above were captured via WebSearch against the same underlying source pages
|
|
613
|
-
and cross-confirmed against the Medium analysis piece.
|
|
614
|
-
|
|
615
|
-
Base DESIGN.md (sections 1–9) is the source for all token-level claims
|
|
616
|
-
(Rausch Red #ff385c, Airbnb Cereal VF typeface, three-layer shadow stacks,
|
|
617
|
-
generous radius scale 8px–32px, Near-Black #222222, Luxe Purple #460479
|
|
618
|
-
and Plus Magenta #92174d for premium tiers).
|
|
619
|
-
|
|
620
|
-
Not independently verified via WebFetch — widely documented public facts used:
|
|
621
|
-
- Airbnb was founded in 2008 in San Francisco by Brian Chesky, Joe Gebbia,
|
|
622
|
-
and Nathan Blecharczyk; the origin story involving air mattresses during
|
|
623
|
-
a San Francisco design conference is widely documented.
|
|
624
|
-
- Rausch Red (#ff385c) is reported to be named after Rausch Street, the
|
|
625
|
-
location of an early Airbnb office.
|
|
626
|
-
- Airbnb's Host / Superhost program terminology is widely used in
|
|
627
|
-
the company's own product and Host-facing surfaces.
|
|
628
|
-
|
|
629
|
-
Personas (§13) are fictional archetypes informed by publicly observable
|
|
630
|
-
Airbnb user segments (leisure travelers, Hosts / Superhosts, long-stay
|
|
631
|
-
remote workers, multigenerational family travelers). Names are illustrative;
|
|
632
|
-
they do not refer to real people.
|
|
633
|
-
|
|
634
|
-
Interpretive claims (e.g., "hospitality is more than a look", "the Bélo is
|
|
635
|
-
universal on purpose", "warm minimalism refuses the cool-gray institutional
|
|
636
|
-
default") are editorial readings connecting Airbnb's stated 2014 brand
|
|
637
|
-
thesis to the design system, not directly sourced Airbnb statements.
|
|
638
|
-
-->
|
|
294
|
+
No reusable duration or easing curve is promoted. Captured interaction states establish state availability, not a universal Airbnb motion token.
|
|
295
|
+
|
|
296
|
+
---
|
|
639
297
|
|
|
298
|
+
**Verified:** 2026-07-12 (omd:migrate)
|
|
299
|
+
**Tier 1 sources:** https://www.airbnb.co.kr/ ; https://news.airbnb.com/product-releases/airbnb-2026-summer-release/ ; https://www.airbnb.com/help/article/2503 ; https://brand.withairbnb.com
|
|
300
|
+
**Tier 2 attempts:** getdesign.md/airbnb supplied a directory entry only; Refero was retained only as a historical conflict candidate
|
|
301
|
+
**Conflicts unresolved:** none
|