oh-my-design-cli 1.8.7 → 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.
Files changed (247) hide show
  1. package/.claude/hooks/lib/preferences-parser.cjs +1 -0
  2. package/.claude/hooks/lib/preferences-writer.cjs +1 -0
  3. package/.claude/hooks/post-edit-watch.cjs +1 -0
  4. package/.claude/hooks/session-end-foldin.cjs +1 -0
  5. package/.claude/hooks/session-state-loader.cjs +1 -0
  6. package/.claude/hooks/skill-activation.cjs +1 -0
  7. package/.claude/settings.json +10 -1
  8. package/.github/assets/logo-bg.png +0 -0
  9. package/AGENTS.md +20 -1
  10. package/CHANGELOG.md +482 -0
  11. package/MIGRATION.md +103 -0
  12. package/README.ja.md +56 -19
  13. package/README.ko.md +47 -30
  14. package/README.md +48 -30
  15. package/README.zh-TW.md +59 -22
  16. package/agents/AGENT.md +8 -7
  17. package/agents/omd-codex-image.md +1 -1
  18. package/agents/omd-critic.md +6 -7
  19. package/agents/omd-designer-review.md +1 -1
  20. package/agents/omd-final-qa.md +1 -1
  21. package/agents/omd-humanizer.md +38 -0
  22. package/agents/omd-kr-writer.md +3 -4
  23. package/agents/omd-locale-adapter.md +12 -16
  24. package/agents/omd-master.md +24 -19
  25. package/agents/omd-microcopy.md +1 -1
  26. package/agents/omd-orchestrator.md +7 -8
  27. package/agents/omd-slop-auditor.md +31 -0
  28. package/agents/omd-ux-researcher.md +1 -1
  29. package/data/reference-fingerprints.json +1995 -38
  30. package/dist/bin/oh-my-design.js +16 -8
  31. package/dist/bin/oh-my-design.js.map +1 -1
  32. package/dist/chunk-UJIHCEYF.js +99 -0
  33. package/dist/chunk-UJIHCEYF.js.map +1 -0
  34. package/dist/doctor-LDWSFM3I.js +763 -0
  35. package/dist/doctor-LDWSFM3I.js.map +1 -0
  36. package/dist/install-skills-ZZFNJ2II.js +1120 -0
  37. package/dist/install-skills-ZZFNJ2II.js.map +1 -0
  38. package/docs/CLI_QUICKSTART.md +157 -0
  39. package/package.json +25 -4
  40. package/scripts/postinstall.cjs +5 -4
  41. package/skills/claude-design/SKILL.md +38 -14
  42. package/skills/claude-design/references/claude-design-flow.md +11 -11
  43. package/skills/claude-design/references/codebase-analysis.md +5 -4
  44. package/skills/omd-final-qa/SKILL.md +1 -1
  45. package/skills/omd-harness/SKILL.md +51 -50
  46. package/skills/omd-humanize/SKILL.md +116 -0
  47. package/skills/omd-humanize/agents/openai.yaml +4 -0
  48. package/skills/omd-humanize/references/locale-playbooks.md +102 -0
  49. package/skills/omd-humanize/references/sources.md +11 -0
  50. package/skills/omd-init/SKILL.md +18 -12
  51. package/skills/omd-locale-adapter/SKILL.md +58 -91
  52. package/skills/omd-orchestrator/SKILL.md +11 -5
  53. package/skills/omd-reference-capture/SKILL.md +80 -26
  54. package/skills/omd-reference-capture/scripts/PLAYWRIGHT-LICENSE.txt +202 -0
  55. package/skills/omd-reference-capture/scripts/PLAYWRIGHT-NOTICE.txt +5 -0
  56. package/skills/omd-reference-capture/scripts/THIRD_PARTY_NOTICES.md +3 -0
  57. package/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs +159906 -0
  58. package/skills/omd-slop-audit/SKILL.md +110 -0
  59. package/skills/omd-slop-audit/agents/openai.yaml +4 -0
  60. package/skills/omd-slop-audit/references/pattern-catalog.md +96 -0
  61. package/skills/omd-slop-audit/references/sources.md +24 -0
  62. package/web/references/104/DESIGN.md +354 -0
  63. package/web/references/11st/DESIGN.md +197 -316
  64. package/web/references/29cm/DESIGN.md +297 -393
  65. package/web/references/42dot/DESIGN.md +390 -0
  66. package/web/references/8percent/DESIGN.md +438 -0
  67. package/web/references/ably/DESIGN.md +267 -572
  68. package/web/references/acer/DESIGN.md +329 -0
  69. package/web/references/airbnb/DESIGN.md +219 -557
  70. package/web/references/alipay/DESIGN.md +179 -420
  71. package/web/references/apple/DESIGN.md +224 -498
  72. package/web/references/asleep/DESIGN.md +402 -0
  73. package/web/references/au/DESIGN.md +334 -0
  74. package/web/references/autopedia/DESIGN.md +382 -0
  75. package/web/references/aws-cloudscape/DESIGN.md +241 -0
  76. package/web/references/baemin/DESIGN.md +332 -491
  77. package/web/references/banksalad/DESIGN.md +269 -180
  78. package/web/references/barogo/DESIGN.md +416 -0
  79. package/web/references/beusable/DESIGN.md +464 -0
  80. package/web/references/bilibili/DESIGN.md +206 -374
  81. package/web/references/bmw/DESIGN.md +162 -276
  82. package/web/references/brandi/DESIGN.md +184 -325
  83. package/web/references/catchtable/DESIGN.md +219 -264
  84. package/web/references/cgv/DESIGN.md +317 -0
  85. package/web/references/channeltalk/DESIGN.md +210 -336
  86. package/web/references/china-airlines/DESIGN.md +291 -0
  87. package/web/references/cjonstyle/DESIGN.md +453 -0
  88. package/web/references/class101/DESIGN.md +168 -387
  89. package/web/references/classum/DESIGN.md +228 -203
  90. package/web/references/claude/DESIGN.md +242 -479
  91. package/web/references/clay/DESIGN.md +179 -377
  92. package/web/references/clickhouse/DESIGN.md +254 -343
  93. package/web/references/cohere/DESIGN.md +214 -324
  94. package/web/references/coinone/DESIGN.md +199 -179
  95. package/web/references/corca/DESIGN.md +414 -0
  96. package/web/references/coupang/DESIGN.md +205 -475
  97. package/web/references/cursor/DESIGN.md +240 -381
  98. package/web/references/dabang/DESIGN.md +248 -213
  99. package/web/references/dable/DESIGN.md +431 -0
  100. package/web/references/datarize/DESIGN.md +217 -330
  101. package/web/references/dealicious/DESIGN.md +402 -0
  102. package/web/references/drdiary/DESIGN.md +404 -0
  103. package/web/references/elastic/DESIGN.md +238 -0
  104. package/web/references/elevenlabs/DESIGN.md +183 -321
  105. package/web/references/eslite/DESIGN.md +257 -0
  106. package/web/references/evaair/DESIGN.md +338 -0
  107. package/web/references/expo/DESIGN.md +238 -331
  108. package/web/references/familymart-tw/DESIGN.md +254 -0
  109. package/web/references/ferrari/DESIGN.md +160 -377
  110. package/web/references/figma/DESIGN.md +197 -451
  111. package/web/references/fitpet/DESIGN.md +445 -0
  112. package/web/references/flex/DESIGN.md +170 -253
  113. package/web/references/framer/DESIGN.md +197 -340
  114. package/web/references/freee/DESIGN.md +211 -533
  115. package/web/references/friendliai/DESIGN.md +431 -0
  116. package/web/references/frip/DESIGN.md +440 -0
  117. package/web/references/gangnamunni/DESIGN.md +154 -591
  118. package/web/references/gaudiolab/DESIGN.md +414 -0
  119. package/web/references/google/DESIGN.md +290 -398
  120. package/web/references/hashicorp/DESIGN.md +273 -318
  121. package/web/references/heydealer/DESIGN.md +429 -0
  122. package/web/references/humanscape/DESIGN.md +433 -0
  123. package/web/references/hyundai/DESIGN.md +158 -368
  124. package/web/references/hyundaicard/DESIGN.md +171 -121
  125. package/web/references/ibm/DESIGN.md +227 -378
  126. package/web/references/idus/DESIGN.md +450 -0
  127. package/web/references/igaworks/DESIGN.md +437 -0
  128. package/web/references/inflearn/DESIGN.md +221 -366
  129. package/web/references/intuit/DESIGN.md +244 -0
  130. package/web/references/jandi/DESIGN.md +191 -291
  131. package/web/references/jobplanet/DESIGN.md +415 -0
  132. package/web/references/kakao/DESIGN.md +287 -475
  133. package/web/references/kakaobank/DESIGN.md +220 -521
  134. package/web/references/kakaogames/DESIGN.md +220 -0
  135. package/web/references/kakaopay/DESIGN.md +207 -526
  136. package/web/references/karrot/DESIGN.md +227 -251
  137. package/web/references/kb-kookmin/DESIGN.md +308 -0
  138. package/web/references/kbank/DESIGN.md +220 -175
  139. package/web/references/kmong/DESIGN.md +281 -356
  140. package/web/references/krds/DESIGN.md +245 -19
  141. package/web/references/kream/DESIGN.md +224 -359
  142. package/web/references/kurly/DESIGN.md +211 -533
  143. package/web/references/lamborghini/DESIGN.md +198 -360
  144. package/web/references/lguplus/DESIGN.md +259 -0
  145. package/web/references/likelion/DESIGN.md +283 -0
  146. package/web/references/line/DESIGN.md +396 -355
  147. package/web/references/linear.app/DESIGN.md +209 -562
  148. package/web/references/lotteon/DESIGN.md +386 -0
  149. package/web/references/lovable/DESIGN.md +255 -349
  150. package/web/references/makinarocks/DESIGN.md +149 -349
  151. package/web/references/maum-ai/DESIGN.md +423 -0
  152. package/web/references/medibloc/DESIGN.md +425 -0
  153. package/web/references/megabox/DESIGN.md +232 -0
  154. package/web/references/mercari/DESIGN.md +217 -434
  155. package/web/references/microsoft/DESIGN.md +234 -388
  156. package/web/references/mildang/DESIGN.md +411 -0
  157. package/web/references/millie/DESIGN.md +183 -504
  158. package/web/references/minimax/DESIGN.md +264 -322
  159. package/web/references/miricanvas/DESIGN.md +182 -355
  160. package/web/references/miro/DESIGN.md +234 -232
  161. package/web/references/mistral.ai/DESIGN.md +231 -314
  162. package/web/references/mixi/DESIGN.md +234 -0
  163. package/web/references/moin/DESIGN.md +445 -0
  164. package/web/references/mongodb/DESIGN.md +219 -316
  165. package/web/references/musinsa/DESIGN.md +184 -510
  166. package/web/references/mynavi/DESIGN.md +242 -0
  167. package/web/references/myrealtrip/DESIGN.md +169 -406
  168. package/web/references/naver/DESIGN.md +328 -499
  169. package/web/references/naverwebtoon/DESIGN.md +172 -395
  170. package/web/references/nhn/DESIGN.md +169 -346
  171. package/web/references/nhncloud/DESIGN.md +185 -123
  172. package/web/references/notion/DESIGN.md +271 -475
  173. package/web/references/nrise/DESIGN.md +417 -0
  174. package/web/references/ohouse/DESIGN.md +210 -549
  175. package/web/references/oliveyoung/DESIGN.md +217 -326
  176. package/web/references/ollama/DESIGN.md +241 -308
  177. package/web/references/onestore/DESIGN.md +248 -0
  178. package/web/references/palantir/DESIGN.md +256 -0
  179. package/web/references/panasonic/DESIGN.md +276 -0
  180. package/web/references/patternfly/DESIGN.md +259 -0
  181. package/web/references/payhere/DESIGN.md +438 -0
  182. package/web/references/pega/DESIGN.md +262 -0
  183. package/web/references/peoplefund/DESIGN.md +431 -0
  184. package/web/references/petfriends/DESIGN.md +428 -0
  185. package/web/references/pinkfong/DESIGN.md +199 -367
  186. package/web/references/pinterest/DESIGN.md +258 -308
  187. package/web/references/poya/DESIGN.md +286 -0
  188. package/web/references/pozalabs/DESIGN.md +438 -0
  189. package/web/references/protopie/DESIGN.md +419 -0
  190. package/web/references/qraft/DESIGN.md +448 -0
  191. package/web/references/quotabook/DESIGN.md +449 -0
  192. package/web/references/recruit/DESIGN.md +247 -0
  193. package/web/references/remember/DESIGN.md +202 -396
  194. package/web/references/resend/DESIGN.md +274 -348
  195. package/web/references/sakura-internet/DESIGN.md +269 -0
  196. package/web/references/samsung/DESIGN.md +157 -359
  197. package/web/references/sandoll/DESIGN.md +445 -0
  198. package/web/references/sanity/DESIGN.md +241 -375
  199. package/web/references/scatterlab/DESIGN.md +412 -0
  200. package/web/references/selectstar/DESIGN.md +439 -0
  201. package/web/references/servicenow/DESIGN.md +289 -0
  202. package/web/references/shinhanbank/DESIGN.md +161 -341
  203. package/web/references/shinhancard/DESIGN.md +208 -319
  204. package/web/references/sionic/DESIGN.md +454 -0
  205. package/web/references/sktelecom/DESIGN.md +310 -0
  206. package/web/references/socar/DESIGN.md +125 -32
  207. package/web/references/softbank/DESIGN.md +231 -0
  208. package/web/references/sony/DESIGN.md +234 -0
  209. package/web/references/soop/DESIGN.md +261 -0
  210. package/web/references/spacex/DESIGN.md +184 -323
  211. package/web/references/spotify/DESIGN.md +253 -394
  212. package/web/references/squeezebits/DESIGN.md +441 -0
  213. package/web/references/stayfolio/DESIGN.md +422 -0
  214. package/web/references/stripe/DESIGN.md +212 -491
  215. package/web/references/supabase/DESIGN.md +244 -316
  216. package/web/references/tabling/DESIGN.md +415 -0
  217. package/web/references/taishinbank/DESIGN.md +243 -0
  218. package/web/references/teamlab/DESIGN.md +240 -0
  219. package/web/references/teamsparta/DESIGN.md +472 -0
  220. package/web/references/tellingme/DESIGN.md +392 -0
  221. package/web/references/tesla/DESIGN.md +244 -427
  222. package/web/references/thsr/DESIGN.md +284 -0
  223. package/web/references/thumbtack/DESIGN.md +302 -0
  224. package/web/references/together.ai/DESIGN.md +257 -304
  225. package/web/references/toss/DESIGN.md +251 -593
  226. package/web/references/toss-securities/DESIGN.md +255 -178
  227. package/web/references/tossbank/DESIGN.md +195 -491
  228. package/web/references/toyota/DESIGN.md +238 -0
  229. package/web/references/tving/DESIGN.md +197 -245
  230. package/web/references/typed/DESIGN.md +413 -0
  231. package/web/references/uber/DESIGN.md +256 -333
  232. package/web/references/udn/DESIGN.md +250 -0
  233. package/web/references/upbit/DESIGN.md +145 -256
  234. package/web/references/upstage/DESIGN.md +211 -204
  235. package/web/references/uswds/DESIGN.md +287 -0
  236. package/web/references/vercel/DESIGN.md +236 -440
  237. package/web/references/wanted/DESIGN.md +215 -487
  238. package/web/references/wise/DESIGN.md +223 -231
  239. package/web/references/wisetracker/DESIGN.md +462 -0
  240. package/web/references/wooribank/DESIGN.md +245 -0
  241. package/web/references/yanolja/DESIGN.md +250 -419
  242. package/web/references/yeogiotte/DESIGN.md +235 -418
  243. package/web/references/zapier/DESIGN.md +256 -377
  244. package/web/references/zendesk/DESIGN.md +288 -0
  245. package/web/references/zigzag/DESIGN.md +200 -621
  246. package/dist/install-skills-7UUDOLG2.js +0 -734
  247. 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: "#ff5a5f"
7
+ primary_color: "#ff385c"
8
8
  logo:
9
9
  type: simpleicons
10
10
  slug: airbnb
11
- verified: "2026-05-15"
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 brand guidelines hub with logo, color, and visual identity rules.
18
- og_image: "https://firebasestorage.googleapis.com/v0/b/standards-site-beta.appspot.com/o/documents%2Fa130cd31136%2F099b28f7432%2Fmeta%2Fstandards---project-thumbnail.png?alt=media&token=b1ee4a9a-cb2a-4dd9-ae43-01dd309d6f17"
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: prose-derived
21
- extracted: "2026-06-08"
22
- note: "primary = live Rausch Red #ff385c (--palette-bg-primary-core); brand frontmatter primary_color is legacy Rausch #ff5a5f; single brand voltage, photography-first"
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
- focused: "#3f3f3f"
32
- body: "#6a6a6a"
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
- placeholder: "#717171"
42
- disabled-bg: "#dddddd"
129
+ surface-soft: "#ebebeb"
130
+ divider: "#dddddd"
43
131
  typography:
44
- family: { sans: "Airbnb Cereal VF", fallback: "Circular, -apple-system, system-ui, Roboto, Helvetica Neue" }
45
- section-heading: { size: 28, weight: 700, lineHeight: 1.43, use: "Primary headings" }
46
- card-heading: { size: 22, weight: 600, lineHeight: 1.18, tracking: -0.44, use: "Category / card titles" }
47
- card-heading-medium: { size: 22, weight: 500, lineHeight: 1.18, tracking: -0.44, use: "Lighter card-title variant" }
48
- subheading: { size: 21, weight: 700, lineHeight: 1.43, use: "Bold sub-headings" }
49
- feature-title: { size: 20, weight: 600, lineHeight: 1.20, tracking: -0.18, use: "Feature headings" }
50
- ui-medium: { size: 16, weight: 500, lineHeight: 1.25, use: "Nav, emphasized text" }
51
- ui-semibold: { size: 16, weight: 600, lineHeight: 1.25, use: "Strong emphasis" }
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
- button-primary: { type: button, bg: "#ff385c", fg: "#ffffff", radius: 8, padding: "14px 24px", font: "16px/600", use: "primary CTA; active #e00b41; disabled #dddddd" }
70
- button-secondary: { type: button, bg: "#ffffff", fg: "#222222", radius: 8, use: "secondary action, 1px #222222 border" }
71
- search-orb: { type: button, bg: "#ff385c", fg: "#ffffff", radius: 9999, use: "48px round search submit, white icon" }
72
- icon-button-circle: { type: button, bg: "#f2f2f2", fg: "#222222", radius: 9999, use: "32x32 dense circular control" }
73
- listing-card: { type: card, bg: "#ffffff", radius: 12, use: "no shadow (photography-led); hover scale + listing-hover shadow" }
74
- card-standard: { type: card, bg: "#ffffff", radius: 12, padding: "24px", use: "three-layer card shadow" }
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's website is a warm, photography-forward marketplace that feels like flipping through a travel magazine where every page invites you to book. The design operates on a foundation of pure white (`#ffffff`) with the iconic Rausch Red (`#ff385c`) named after Airbnb's first street address serving as the singular brand accent. The result is a clean, airy canvas where listing photography, category icons, and the red CTA button are the only sources of color.
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 typography uses Airbnb Cereal VF a custom variable font that's warm and approachable, with rounded terminals that echo the brand's "belong anywhere" philosophy. The font operates in a tight weight range: 500 (medium) for most UI, 600 (semibold) for emphasis, and 700 (bold) for primary headings. Slight negative letter-spacing (-0.18px to -0.44px) on headings creates a cozy, intimate reading experience rather than the compressed efficiency of tech companies.
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
- What distinguishes Airbnb is its palette-based token system (`--palette-*`) and multi-layered shadow approach. The primary card shadow uses a three-layer stack (`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`) that creates a subtle, warm lift. Combined with generous border-radius (8px–32px), circular navigation controls (50%), and a category pill bar with horizontal scrolling, the interface feels tactile and inviting designed for browsing, not commanding.
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
- - Pure white canvas with Rausch Red (`#ff385c`) as singular brand accent
91
- - Airbnb Cereal VF custom variable font with warm, rounded terminals
92
- - Palette-based token system (`--palette-*`) for systematic color management
93
- - Three-layer card shadows: border ring + soft blur + stronger blur
94
- - Generous border-radius: 8px buttons, 14px badges, 20px cards, 32px large elements
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
- ### Primary Brand
103
- - **Rausch Red** (`#ff385c`): `--palette-bg-primary-core`, primary CTA, brand accent, active states
104
- - **Deep Rausch** (`#e00b41`): `--palette-bg-tertiary-core`, pressed/dark variant of brand red
105
- - **Error Red** (`#c13515`): `--palette-text-primary-error`, error text on light
106
- - **Error Dark** (`#b32505`): `--palette-text-secondary-error-hover`, error hover
107
-
108
- ### Premium Tiers
109
- - **Luxe Purple** (`#460479`): `--palette-bg-primary-luxe`, Airbnb Luxe tier branding
110
- - **Plus Magenta** (`#92174d`): `--palette-bg-primary-plus`, Airbnb Plus tier branding
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 Family
132
- - **Primary**: `Airbnb Cereal VF`, fallbacks: `Circular, -apple-system, system-ui, Roboto, Helvetica Neue`
133
- - **OpenType Features**: `"salt"` (stylistic alternates) on specific caption elements
134
-
135
- ### Hierarchy
136
-
137
- | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
138
- |------|------|------|--------|-------------|----------------|-------|
139
- | Section Heading | Airbnb Cereal VF | 28px (1.75rem) | 700 | 1.43 | normal | Primary headings |
140
- | Card Heading | Airbnb Cereal VF | 22px (1.38rem) | 600 | 1.18 (tight) | -0.44px | Category/card titles |
141
- | Card Heading Medium | Airbnb Cereal VF | 22px (1.38rem) | 500 | 1.18 (tight) | -0.44px | Lighter variant |
142
- | Sub-heading | Airbnb Cereal VF | 21px (1.31rem) | 700 | 1.43 | normal | Bold sub-headings |
143
- | Feature Title | Airbnb Cereal VF | 20px (1.25rem) | 600 | 1.20 (tight) | -0.18px | Feature headings |
144
- | UI Medium | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Nav, emphasized text |
145
- | UI Semibold | Airbnb Cereal VF | 16px (1.00rem) | 600 | 1.25 (tight) | normal | Strong emphasis |
146
- | Button | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Button labels |
147
- | Body / Link | Airbnb Cereal VF | 14px (0.88rem) | 400 | 1.43 | normal | Standard body |
148
- | Body Medium | Airbnb Cereal VF | 14px (0.88rem) | 500 | 1.29 (tight) | normal | Medium body |
149
- | Caption Salt | Airbnb Cereal VF | 14px (0.88rem) | 600 | 1.43 | normal | `"salt"` feature |
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
- ### Buttons
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
- **Verified:** 2026-05-08
341
- **Tier 1 sources:** airbnb.com (live DOM via playwright — search pill 50px / 48px height confirmed; Hosting ghost button 20px radius / 14px·500; Icon round buttons 50% on 40×40, fill `#f2f2f2`; content card hover hit area 20px radius)
342
- **Tier 2 sources:** styles.refero.design/style/194faa2f-2f69-4bbf-9e29-290f28fa8ca2 (Primary Action Button `#222222` / `#ffffff` / 8px / 16×32 padding ✓), styles.refero.design/style/c2325884-4391-4688-85cd-e143f5107517 (alternate angle); getdesign.md/airbnb — only directory snippet ("Travel marketplace. Warm coral accent.").
343
- **Conflicts unresolved:** none. Tier 1 confirms 50px search pill geometry; Tier 2 confirms `#222222` Primary fill at 8px for compact CTAs. Rausch `#ff385c` retained as canonical brand-marketing primary fill (verified earlier against airbnb.design).
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
- ### Spacing System
348
- - Base unit: 8px
349
- - Scale: 2px, 3px, 4px, 6px, 8px, 10px, 11px, 12px, 15px, 16px, 22px, 24px, 32px
350
-
351
- ### Grid & Container
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
- | Level | Treatment | Use |
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 `#222222` (warm near-black) for text never pure `#000000`
385
- - Apply Rausch Red (`#ff385c`) only for primary CTAs and brand moments — it's the singular accent
386
- - Use Airbnb Cereal VF at weight 500–700 the warm weight range is intentional
387
- - Apply the three-layer card shadow for all elevated surfaces
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
- - Don't use pure black (`#000000`) for text always `#222222` (warm)
395
- - Don't apply Rausch Red to backgrounds or large surfaces — it's an accent only
396
- - Don't use thin font weights (300, 400) for headings 500 minimum
397
- - Don't use heavy shadows (>0.1 opacity as primary layer) keep them warm and graduated
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
- ### Breakpoints
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
- ### Quick Color Reference
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 voice is hospitality made legible — warm, unhurried, grounded in human scale. The anchor phrase is *"Belong Anywhere,"* adopted as the company's official tagline in July 2014 at the same time the **Bélo** logo launched. That phrase locates the entire voice: not transactional ("Book a room"), not distantly aspirational ("Luxury redefined"), but universal and present-tense. Headlines read like invitations. Error messages read like apologies from someone who genuinely cares. Even legal and safety surfaces preserve the Host-Guest metaphor rather than slipping into corporate passive voice.
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 was founded in **August 2008** in San Francisco by **Brian Chesky** (CEO), **Joe Gebbia**, and **Nathan Blecharczyk** (engineer) ([Airbnb — Wikipedia](https://en.wikipedia.org/wiki/Airbnb), [Hostaway Airbnb Founders](https://www.hostaway.com/blog/airbnb-founders/)). The founding was famously accidental: in October 2007 Chesky and Gebbia were SF roommates who couldn't make rent. A design conference (IDSA) had filled every hotel; they inflated **three air mattresses**, put them in their living room, and charged "Airbed & Breakfast" guests **$80 a night**. Three attendees took the offer. Blecharczyk joined as the engineer; the trio officially launched in 2008 ([Knowledge at Wharton podcast](https://knowledge.wharton.upenn.edu/podcast/knowledge-at-wharton-podcast/the-inside-story-behind-the-unlikely-rise-of-airbnb/)). They survived the 2008-2009 down-cycle by selling **Obama O's and Cap'n McCains** novelty cereal during the election cycle, raising ~$30K. Y Combinator W09 batch followed. **IPO December 10, 2020** (NASDAQ: ABNB) at $131B peak valuation. Rausch `#ff385c` is the iconic brand color, named after the Berlin street Brian Chesky once stayed on — that origin (a home, a Host, a Guest who could not find a traditional place to stay) stayed the company's center of gravity as it grew into a global platform. That origin a home, a Host, a Guest who could not find a traditional place to stay stayed the company's center of gravity as it grew into a global platform.
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. **Belong anywhere.** *(Airbnb's official tagline since July 2014, verbatim.)* Every surface should feel like an invitation, not a transaction. If a design move reads as transactional pressure ("Only 2 left! Book now!"), it violates the thesis.
497
- 2. **Home, not accommodation.** *(Brian Chesky, 2014, verbatim: "A house is just a space, but a home is where you belong.")* Copy, illustration, and imagery refer to "homes", never "units", "properties", or "accommodations".
498
- 3. **Hosts are capital H.** Hosts are partners, not suppliers. Product copy capitalizes the role (Host, Superhost) as a form of respect. Guest is lowercase when used as a common noun; guests are universal, Hosts are individual.
499
- 4. **Photography is the hero.** Listing cards, search results, marketing pages the Host's photography is the primary visual. The chrome's job is to get out of the way of that photography.
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
- *Personas below are fictional archetypes informed by publicly observable Airbnb user segments (leisure travelers, Hosts, long-stay remote workers, multigenerational family travelers), not individual people.*
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
- **Léa Dubois, 31, Paris.** Marketing manager at a fashion startup. Books 4–6 Airbnb stays a year, mostly short European weekends with her partner. Reads listing descriptions carefully; checks the Host's review history *before* the listing photos. Would rather pay 20% more for a Superhost with a long review history than save money on a new listing. Notices when Airbnb's empty-state copy is warm or cold and judges the product accordingly.
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
- | State | Treatment |
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
- **Durations**:
540
-
541
- | Token | Value | Use |
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