@aexol/spectral 0.9.269 → 0.9.271

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 (573) hide show
  1. package/dist/agent/index.d.ts +10 -1
  2. package/dist/agent/index.d.ts.map +1 -1
  3. package/dist/agent/index.js +26 -10
  4. package/dist/commands/serve.d.ts.map +1 -1
  5. package/dist/commands/serve.js +29 -5
  6. package/dist/commands/update.d.ts +2 -2
  7. package/dist/commands/update.js +3 -3
  8. package/dist/designer/index.d.ts +13 -18
  9. package/dist/designer/index.d.ts.map +1 -1
  10. package/dist/designer/index.js +128 -201
  11. package/dist/extensions/aexol-mcp.d.ts.map +1 -1
  12. package/dist/extensions/aexol-mcp.js +23 -0
  13. package/dist/extensions/dataset-uploader/cleaner.js +1 -1
  14. package/dist/extensions/dataset-uploader/scrubber.d.ts +2 -0
  15. package/dist/extensions/dataset-uploader/scrubber.d.ts.map +1 -1
  16. package/dist/extensions/dataset-uploader/scrubber.js +30 -1
  17. package/dist/generated/zeus/index.d.ts +0 -4
  18. package/dist/generated/zeus/index.d.ts.map +1 -1
  19. package/dist/memory/debug-log.d.ts.map +1 -1
  20. package/dist/memory/debug-log.js +20 -2
  21. package/dist/memory/tools/compact-context.d.ts +1 -1
  22. package/dist/memory/tools/compact-context.d.ts.map +1 -1
  23. package/dist/memory/tools/compact-context.js +4 -1
  24. package/dist/memory/tools/recall-observation.d.ts +3 -3
  25. package/dist/memory/tools/recall-observation.d.ts.map +1 -1
  26. package/dist/memory/tools/recall-observation.js +4 -1
  27. package/dist/memory/tools/receive-agent-observations.d.ts +3 -3
  28. package/dist/memory/tools/receive-agent-observations.d.ts.map +1 -1
  29. package/dist/memory/tools/receive-agent-observations.js +4 -1
  30. package/dist/memory/tools/share-project-observation.d.ts +3 -3
  31. package/dist/memory/tools/share-project-observation.d.ts.map +1 -1
  32. package/dist/memory/tools/share-project-observation.js +4 -1
  33. package/dist/memory/tools/write-project-observation.d.ts +3 -3
  34. package/dist/memory/tools/write-project-observation.d.ts.map +1 -1
  35. package/dist/memory/tools/write-project-observation.js +4 -1
  36. package/dist/relay/client.d.ts.map +1 -1
  37. package/dist/relay/client.js +5 -2
  38. package/dist/sdk/ai/env-api-keys.js +1 -1
  39. package/dist/sdk/coding-agent/core/extensions/loader.d.ts.map +1 -1
  40. package/dist/sdk/coding-agent/core/extensions/loader.js +31 -3
  41. package/dist/sdk/coding-agent/core/theme.js +1 -1
  42. package/dist/server/handlers/agent-settings.d.ts.map +1 -1
  43. package/dist/server/handlers/agent-settings.js +4 -1
  44. package/dist/server/handlers/settings-lock.d.ts.map +1 -1
  45. package/dist/server/handlers/settings-lock.js +4 -1
  46. package/dist/server/storage.d.ts.map +1 -1
  47. package/dist/server/storage.js +13 -1
  48. package/dist/utils/serve-state.d.ts +17 -0
  49. package/dist/utils/serve-state.d.ts.map +1 -1
  50. package/dist/utils/serve-state.js +73 -0
  51. package/package.json +1 -1
  52. package/dist/designer/data/skills/blog-post.d.ts +0 -3
  53. package/dist/designer/data/skills/blog-post.d.ts.map +0 -1
  54. package/dist/designer/data/skills/blog-post.js +0 -84
  55. package/dist/designer/data/skills/blog-post.ts +0 -87
  56. package/dist/designer/data/skills/critique.d.ts +0 -3
  57. package/dist/designer/data/skills/critique.d.ts.map +0 -1
  58. package/dist/designer/data/skills/critique.js +0 -109
  59. package/dist/designer/data/skills/critique.ts +0 -112
  60. package/dist/designer/data/skills/dashboard.d.ts +0 -3
  61. package/dist/designer/data/skills/dashboard.d.ts.map +0 -1
  62. package/dist/designer/data/skills/dashboard.js +0 -165
  63. package/dist/designer/data/skills/dashboard.ts +0 -168
  64. package/dist/designer/data/skills/design-brief.d.ts +0 -3
  65. package/dist/designer/data/skills/design-brief.d.ts.map +0 -1
  66. package/dist/designer/data/skills/design-brief.js +0 -141
  67. package/dist/designer/data/skills/design-brief.ts +0 -144
  68. package/dist/designer/data/skills/design-skill.d.ts +0 -10
  69. package/dist/designer/data/skills/design-skill.d.ts.map +0 -1
  70. package/dist/designer/data/skills/design-skill.js +0 -1
  71. package/dist/designer/data/skills/design-skill.ts +0 -9
  72. package/dist/designer/data/skills/docs-page.d.ts +0 -3
  73. package/dist/designer/data/skills/docs-page.d.ts.map +0 -1
  74. package/dist/designer/data/skills/docs-page.js +0 -68
  75. package/dist/designer/data/skills/docs-page.ts +0 -71
  76. package/dist/designer/data/skills/index.d.ts +0 -3
  77. package/dist/designer/data/skills/index.d.ts.map +0 -1
  78. package/dist/designer/data/skills/index.js +0 -28
  79. package/dist/designer/data/skills/index.ts +0 -30
  80. package/dist/designer/data/skills/magazine-poster.d.ts +0 -3
  81. package/dist/designer/data/skills/magazine-poster.d.ts.map +0 -1
  82. package/dist/designer/data/skills/magazine-poster.js +0 -70
  83. package/dist/designer/data/skills/magazine-poster.ts +0 -73
  84. package/dist/designer/data/skills/mobile-app.d.ts +0 -3
  85. package/dist/designer/data/skills/mobile-app.d.ts.map +0 -1
  86. package/dist/designer/data/skills/mobile-app.js +0 -229
  87. package/dist/designer/data/skills/mobile-app.ts +0 -232
  88. package/dist/designer/data/skills/motion-frames.d.ts +0 -3
  89. package/dist/designer/data/skills/motion-frames.d.ts.map +0 -1
  90. package/dist/designer/data/skills/motion-frames.js +0 -121
  91. package/dist/designer/data/skills/motion-frames.ts +0 -124
  92. package/dist/designer/data/skills/pricing-page.d.ts +0 -3
  93. package/dist/designer/data/skills/pricing-page.d.ts.map +0 -1
  94. package/dist/designer/data/skills/pricing-page.js +0 -76
  95. package/dist/designer/data/skills/pricing-page.ts +0 -79
  96. package/dist/designer/data/skills/saas-landing.d.ts +0 -3
  97. package/dist/designer/data/skills/saas-landing.d.ts.map +0 -1
  98. package/dist/designer/data/skills/saas-landing.js +0 -71
  99. package/dist/designer/data/skills/saas-landing.ts +0 -74
  100. package/dist/designer/data/skills/slide-deck.d.ts +0 -3
  101. package/dist/designer/data/skills/slide-deck.d.ts.map +0 -1
  102. package/dist/designer/data/skills/slide-deck.js +0 -213
  103. package/dist/designer/data/skills/slide-deck.ts +0 -216
  104. package/dist/designer/data/skills/social-carousel.d.ts +0 -3
  105. package/dist/designer/data/skills/social-carousel.d.ts.map +0 -1
  106. package/dist/designer/data/skills/social-carousel.js +0 -135
  107. package/dist/designer/data/skills/social-carousel.ts +0 -138
  108. package/dist/designer/data/skills/web-prototype.d.ts +0 -3
  109. package/dist/designer/data/skills/web-prototype.d.ts.map +0 -1
  110. package/dist/designer/data/skills/web-prototype.js +0 -159
  111. package/dist/designer/data/skills/web-prototype.ts +0 -162
  112. package/dist/designer/data/systems/agentic/DESIGN.md +0 -71
  113. package/dist/designer/data/systems/agentic/components.html +0 -154
  114. package/dist/designer/data/systems/agentic/tokens.css +0 -63
  115. package/dist/designer/data/systems/airbnb/DESIGN.md +0 -393
  116. package/dist/designer/data/systems/airbnb/components.html +0 -1373
  117. package/dist/designer/data/systems/airbnb/tokens.css +0 -261
  118. package/dist/designer/data/systems/airtable/DESIGN.md +0 -92
  119. package/dist/designer/data/systems/airtable/components.html +0 -489
  120. package/dist/designer/data/systems/airtable/tokens.css +0 -261
  121. package/dist/designer/data/systems/ant/DESIGN.md +0 -71
  122. package/dist/designer/data/systems/ant/components.html +0 -154
  123. package/dist/designer/data/systems/ant/tokens.css +0 -63
  124. package/dist/designer/data/systems/apple/DESIGN.md +0 -250
  125. package/dist/designer/data/systems/apple/components.html +0 -749
  126. package/dist/designer/data/systems/apple/tokens.css +0 -286
  127. package/dist/designer/data/systems/application/DESIGN.md +0 -71
  128. package/dist/designer/data/systems/application/components.html +0 -154
  129. package/dist/designer/data/systems/application/tokens.css +0 -63
  130. package/dist/designer/data/systems/arc/DESIGN.md +0 -152
  131. package/dist/designer/data/systems/arc/components.html +0 -432
  132. package/dist/designer/data/systems/arc/tokens.css +0 -137
  133. package/dist/designer/data/systems/artistic/DESIGN.md +0 -71
  134. package/dist/designer/data/systems/artistic/components.html +0 -136
  135. package/dist/designer/data/systems/artistic/tokens.css +0 -63
  136. package/dist/designer/data/systems/atelier-zero/DESIGN.md +0 -316
  137. package/dist/designer/data/systems/atelier-zero/components.html +0 -136
  138. package/dist/designer/data/systems/atelier-zero/tokens.css +0 -63
  139. package/dist/designer/data/systems/bento/DESIGN.md +0 -71
  140. package/dist/designer/data/systems/bento/components.html +0 -136
  141. package/dist/designer/data/systems/bento/tokens.css +0 -63
  142. package/dist/designer/data/systems/binance/DESIGN.md +0 -348
  143. package/dist/designer/data/systems/binance/components.html +0 -550
  144. package/dist/designer/data/systems/binance/tokens.css +0 -255
  145. package/dist/designer/data/systems/bmw/DESIGN.md +0 -183
  146. package/dist/designer/data/systems/bmw/components.html +0 -551
  147. package/dist/designer/data/systems/bmw/tokens.css +0 -179
  148. package/dist/designer/data/systems/bmw-m/DESIGN.md +0 -246
  149. package/dist/designer/data/systems/bmw-m/components.html +0 -342
  150. package/dist/designer/data/systems/bmw-m/tokens.css +0 -64
  151. package/dist/designer/data/systems/bold/DESIGN.md +0 -71
  152. package/dist/designer/data/systems/bold/components.html +0 -136
  153. package/dist/designer/data/systems/bold/tokens.css +0 -63
  154. package/dist/designer/data/systems/brutalism/DESIGN.md +0 -71
  155. package/dist/designer/data/systems/brutalism/components.html +0 -154
  156. package/dist/designer/data/systems/brutalism/tokens.css +0 -63
  157. package/dist/designer/data/systems/bugatti/DESIGN.md +0 -271
  158. package/dist/designer/data/systems/bugatti/components.html +0 -342
  159. package/dist/designer/data/systems/bugatti/tokens.css +0 -64
  160. package/dist/designer/data/systems/cafe/DESIGN.md +0 -71
  161. package/dist/designer/data/systems/cafe/components.html +0 -136
  162. package/dist/designer/data/systems/cafe/tokens.css +0 -63
  163. package/dist/designer/data/systems/cal/DESIGN.md +0 -262
  164. package/dist/designer/data/systems/cal/components.html +0 -376
  165. package/dist/designer/data/systems/cal/tokens.css +0 -265
  166. package/dist/designer/data/systems/canva/DESIGN.md +0 -157
  167. package/dist/designer/data/systems/canva/components.html +0 -461
  168. package/dist/designer/data/systems/canva/tokens.css +0 -147
  169. package/dist/designer/data/systems/cisco/DESIGN.md +0 -201
  170. package/dist/designer/data/systems/cisco/components.html +0 -342
  171. package/dist/designer/data/systems/cisco/tokens.css +0 -64
  172. package/dist/designer/data/systems/claude/DESIGN.md +0 -315
  173. package/dist/designer/data/systems/claude/components.html +0 -483
  174. package/dist/designer/data/systems/claude/tokens.css +0 -130
  175. package/dist/designer/data/systems/clay/DESIGN.md +0 -307
  176. package/dist/designer/data/systems/clay/components.html +0 -136
  177. package/dist/designer/data/systems/clay/tokens.css +0 -63
  178. package/dist/designer/data/systems/claymorphism/DESIGN.md +0 -71
  179. package/dist/designer/data/systems/claymorphism/components.html +0 -136
  180. package/dist/designer/data/systems/claymorphism/tokens.css +0 -63
  181. package/dist/designer/data/systems/clean/DESIGN.md +0 -71
  182. package/dist/designer/data/systems/clean/components.html +0 -136
  183. package/dist/designer/data/systems/clean/tokens.css +0 -63
  184. package/dist/designer/data/systems/clickhouse/DESIGN.md +0 -284
  185. package/dist/designer/data/systems/clickhouse/components.html +0 -506
  186. package/dist/designer/data/systems/clickhouse/tokens.css +0 -135
  187. package/dist/designer/data/systems/cohere/DESIGN.md +0 -269
  188. package/dist/designer/data/systems/cohere/components.html +0 -353
  189. package/dist/designer/data/systems/cohere/tokens.css +0 -126
  190. package/dist/designer/data/systems/coinbase/DESIGN.md +0 -132
  191. package/dist/designer/data/systems/coinbase/components.html +0 -501
  192. package/dist/designer/data/systems/coinbase/tokens.css +0 -257
  193. package/dist/designer/data/systems/colorful/DESIGN.md +0 -71
  194. package/dist/designer/data/systems/colorful/components.html +0 -136
  195. package/dist/designer/data/systems/colorful/tokens.css +0 -63
  196. package/dist/designer/data/systems/composio/DESIGN.md +0 -310
  197. package/dist/designer/data/systems/composio/components.html +0 -342
  198. package/dist/designer/data/systems/composio/tokens.css +0 -64
  199. package/dist/designer/data/systems/contemporary/DESIGN.md +0 -71
  200. package/dist/designer/data/systems/contemporary/components.html +0 -136
  201. package/dist/designer/data/systems/contemporary/tokens.css +0 -63
  202. package/dist/designer/data/systems/corporate/DESIGN.md +0 -71
  203. package/dist/designer/data/systems/corporate/components.html +0 -136
  204. package/dist/designer/data/systems/corporate/tokens.css +0 -63
  205. package/dist/designer/data/systems/cosmic/DESIGN.md +0 -71
  206. package/dist/designer/data/systems/cosmic/components.html +0 -136
  207. package/dist/designer/data/systems/cosmic/tokens.css +0 -63
  208. package/dist/designer/data/systems/creative/DESIGN.md +0 -71
  209. package/dist/designer/data/systems/creative/components.html +0 -136
  210. package/dist/designer/data/systems/creative/tokens.css +0 -63
  211. package/dist/designer/data/systems/cursor/DESIGN.md +0 -312
  212. package/dist/designer/data/systems/cursor/components.html +0 -654
  213. package/dist/designer/data/systems/cursor/tokens.css +0 -218
  214. package/dist/designer/data/systems/dashboard/DESIGN.md +0 -71
  215. package/dist/designer/data/systems/dashboard/components.html +0 -154
  216. package/dist/designer/data/systems/dashboard/tokens.css +0 -63
  217. package/dist/designer/data/systems/default/DESIGN.md +0 -62
  218. package/dist/designer/data/systems/default/components.html +0 -523
  219. package/dist/designer/data/systems/default/tokens.css +0 -200
  220. package/dist/designer/data/systems/discord/DESIGN.md +0 -162
  221. package/dist/designer/data/systems/discord/components.html +0 -359
  222. package/dist/designer/data/systems/discord/tokens.css +0 -125
  223. package/dist/designer/data/systems/dithered/DESIGN.md +0 -71
  224. package/dist/designer/data/systems/dithered/components.html +0 -136
  225. package/dist/designer/data/systems/dithered/tokens.css +0 -63
  226. package/dist/designer/data/systems/doodle/DESIGN.md +0 -71
  227. package/dist/designer/data/systems/doodle/components.html +0 -136
  228. package/dist/designer/data/systems/doodle/tokens.css +0 -63
  229. package/dist/designer/data/systems/dramatic/DESIGN.md +0 -71
  230. package/dist/designer/data/systems/dramatic/components.html +0 -136
  231. package/dist/designer/data/systems/dramatic/tokens.css +0 -63
  232. package/dist/designer/data/systems/duolingo/DESIGN.md +0 -154
  233. package/dist/designer/data/systems/duolingo/components.html +0 -532
  234. package/dist/designer/data/systems/duolingo/tokens.css +0 -130
  235. package/dist/designer/data/systems/editorial/DESIGN.md +0 -71
  236. package/dist/designer/data/systems/editorial/components.html +0 -154
  237. package/dist/designer/data/systems/editorial/tokens.css +0 -63
  238. package/dist/designer/data/systems/elegant/DESIGN.md +0 -71
  239. package/dist/designer/data/systems/elegant/components.html +0 -136
  240. package/dist/designer/data/systems/elegant/tokens.css +0 -63
  241. package/dist/designer/data/systems/elevenlabs/DESIGN.md +0 -268
  242. package/dist/designer/data/systems/elevenlabs/components.html +0 -342
  243. package/dist/designer/data/systems/elevenlabs/tokens.css +0 -127
  244. package/dist/designer/data/systems/energetic/DESIGN.md +0 -72
  245. package/dist/designer/data/systems/energetic/components.html +0 -136
  246. package/dist/designer/data/systems/energetic/tokens.css +0 -63
  247. package/dist/designer/data/systems/enterprise/DESIGN.md +0 -71
  248. package/dist/designer/data/systems/enterprise/components.html +0 -154
  249. package/dist/designer/data/systems/enterprise/tokens.css +0 -63
  250. package/dist/designer/data/systems/expo/DESIGN.md +0 -284
  251. package/dist/designer/data/systems/expo/components.html +0 -342
  252. package/dist/designer/data/systems/expo/tokens.css +0 -64
  253. package/dist/designer/data/systems/expressive/DESIGN.md +0 -71
  254. package/dist/designer/data/systems/expressive/components.html +0 -136
  255. package/dist/designer/data/systems/expressive/tokens.css +0 -63
  256. package/dist/designer/data/systems/fantasy/DESIGN.md +0 -71
  257. package/dist/designer/data/systems/fantasy/components.html +0 -136
  258. package/dist/designer/data/systems/fantasy/tokens.css +0 -63
  259. package/dist/designer/data/systems/ferrari/DESIGN.md +0 -317
  260. package/dist/designer/data/systems/ferrari/components.html +0 -342
  261. package/dist/designer/data/systems/ferrari/tokens.css +0 -64
  262. package/dist/designer/data/systems/figma/DESIGN.md +0 -223
  263. package/dist/designer/data/systems/figma/components.html +0 -344
  264. package/dist/designer/data/systems/figma/tokens.css +0 -126
  265. package/dist/designer/data/systems/flat/DESIGN.md +0 -71
  266. package/dist/designer/data/systems/flat/components.html +0 -136
  267. package/dist/designer/data/systems/flat/tokens.css +0 -63
  268. package/dist/designer/data/systems/framer/DESIGN.md +0 -249
  269. package/dist/designer/data/systems/framer/components.html +0 -438
  270. package/dist/designer/data/systems/framer/tokens.css +0 -238
  271. package/dist/designer/data/systems/friendly/DESIGN.md +0 -71
  272. package/dist/designer/data/systems/friendly/components.html +0 -136
  273. package/dist/designer/data/systems/friendly/tokens.css +0 -63
  274. package/dist/designer/data/systems/futuristic/DESIGN.md +0 -71
  275. package/dist/designer/data/systems/futuristic/components.html +0 -136
  276. package/dist/designer/data/systems/futuristic/tokens.css +0 -63
  277. package/dist/designer/data/systems/github/DESIGN.md +0 -155
  278. package/dist/designer/data/systems/github/components.html +0 -383
  279. package/dist/designer/data/systems/github/tokens.css +0 -125
  280. package/dist/designer/data/systems/glassmorphism/DESIGN.md +0 -71
  281. package/dist/designer/data/systems/glassmorphism/components.html +0 -154
  282. package/dist/designer/data/systems/glassmorphism/tokens.css +0 -63
  283. package/dist/designer/data/systems/gradient/DESIGN.md +0 -71
  284. package/dist/designer/data/systems/gradient/components.html +0 -154
  285. package/dist/designer/data/systems/gradient/tokens.css +0 -63
  286. package/dist/designer/data/systems/hashicorp/DESIGN.md +0 -281
  287. package/dist/designer/data/systems/hashicorp/components.html +0 -502
  288. package/dist/designer/data/systems/hashicorp/tokens.css +0 -272
  289. package/dist/designer/data/systems/hud/DESIGN.md +0 -173
  290. package/dist/designer/data/systems/hud/components.html +0 -136
  291. package/dist/designer/data/systems/hud/tokens.css +0 -63
  292. package/dist/designer/data/systems/huggingface/DESIGN.md +0 -149
  293. package/dist/designer/data/systems/huggingface/components.html +0 -346
  294. package/dist/designer/data/systems/huggingface/tokens.css +0 -125
  295. package/dist/designer/data/systems/ibm/DESIGN.md +0 -335
  296. package/dist/designer/data/systems/ibm/components.html +0 -342
  297. package/dist/designer/data/systems/ibm/tokens.css +0 -64
  298. package/dist/designer/data/systems/intercom/DESIGN.md +0 -149
  299. package/dist/designer/data/systems/intercom/components.html +0 -557
  300. package/dist/designer/data/systems/intercom/tokens.css +0 -150
  301. package/dist/designer/data/systems/kami/DESIGN.md +0 -410
  302. package/dist/designer/data/systems/kami/components.html +0 -601
  303. package/dist/designer/data/systems/kami/tokens.css +0 -272
  304. package/dist/designer/data/systems/kraken/DESIGN.md +0 -128
  305. package/dist/designer/data/systems/kraken/components.html +0 -342
  306. package/dist/designer/data/systems/kraken/tokens.css +0 -64
  307. package/dist/designer/data/systems/lamborghini/DESIGN.md +0 -291
  308. package/dist/designer/data/systems/lamborghini/components.html +0 -342
  309. package/dist/designer/data/systems/lamborghini/tokens.css +0 -64
  310. package/dist/designer/data/systems/levels/DESIGN.md +0 -71
  311. package/dist/designer/data/systems/levels/components.html +0 -154
  312. package/dist/designer/data/systems/levels/tokens.css +0 -63
  313. package/dist/designer/data/systems/linear-app/DESIGN.md +0 -370
  314. package/dist/designer/data/systems/linear-app/components.html +0 -370
  315. package/dist/designer/data/systems/linear-app/tokens.css +0 -130
  316. package/dist/designer/data/systems/lingo/DESIGN.md +0 -71
  317. package/dist/designer/data/systems/lingo/components.html +0 -154
  318. package/dist/designer/data/systems/lingo/tokens.css +0 -63
  319. package/dist/designer/data/systems/loom/DESIGN.md +0 -201
  320. package/dist/designer/data/systems/loom/components.html +0 -446
  321. package/dist/designer/data/systems/loom/tokens.css +0 -138
  322. package/dist/designer/data/systems/lovable/DESIGN.md +0 -301
  323. package/dist/designer/data/systems/lovable/components.html +0 -441
  324. package/dist/designer/data/systems/lovable/tokens.css +0 -258
  325. package/dist/designer/data/systems/luxury/DESIGN.md +0 -71
  326. package/dist/designer/data/systems/luxury/components.html +0 -154
  327. package/dist/designer/data/systems/luxury/tokens.css +0 -63
  328. package/dist/designer/data/systems/mastercard/DESIGN.md +0 -368
  329. package/dist/designer/data/systems/mastercard/components.html +0 -342
  330. package/dist/designer/data/systems/mastercard/tokens.css +0 -64
  331. package/dist/designer/data/systems/material/DESIGN.md +0 -71
  332. package/dist/designer/data/systems/material/components.html +0 -154
  333. package/dist/designer/data/systems/material/tokens.css +0 -63
  334. package/dist/designer/data/systems/meta/DESIGN.md +0 -369
  335. package/dist/designer/data/systems/meta/components.html +0 -398
  336. package/dist/designer/data/systems/meta/tokens.css +0 -263
  337. package/dist/designer/data/systems/minimal/DESIGN.md +0 -71
  338. package/dist/designer/data/systems/minimal/components.html +0 -154
  339. package/dist/designer/data/systems/minimal/tokens.css +0 -63
  340. package/dist/designer/data/systems/minimax/DESIGN.md +0 -260
  341. package/dist/designer/data/systems/minimax/components.html +0 -590
  342. package/dist/designer/data/systems/minimax/tokens.css +0 -148
  343. package/dist/designer/data/systems/mintlify/DESIGN.md +0 -329
  344. package/dist/designer/data/systems/mintlify/components.html +0 -737
  345. package/dist/designer/data/systems/mintlify/tokens.css +0 -256
  346. package/dist/designer/data/systems/miro/DESIGN.md +0 -111
  347. package/dist/designer/data/systems/miro/components.html +0 -342
  348. package/dist/designer/data/systems/miro/tokens.css +0 -64
  349. package/dist/designer/data/systems/mission-control/DESIGN.md +0 -474
  350. package/dist/designer/data/systems/mission-control/components.html +0 -136
  351. package/dist/designer/data/systems/mission-control/tokens.css +0 -63
  352. package/dist/designer/data/systems/mistral-ai/DESIGN.md +0 -264
  353. package/dist/designer/data/systems/mistral-ai/components.html +0 -338
  354. package/dist/designer/data/systems/mistral-ai/tokens.css +0 -125
  355. package/dist/designer/data/systems/modern/DESIGN.md +0 -71
  356. package/dist/designer/data/systems/modern/components.html +0 -154
  357. package/dist/designer/data/systems/modern/tokens.css +0 -63
  358. package/dist/designer/data/systems/mongodb/DESIGN.md +0 -269
  359. package/dist/designer/data/systems/mongodb/components.html +0 -462
  360. package/dist/designer/data/systems/mongodb/tokens.css +0 -176
  361. package/dist/designer/data/systems/mono/DESIGN.md +0 -71
  362. package/dist/designer/data/systems/mono/components.html +0 -136
  363. package/dist/designer/data/systems/mono/tokens.css +0 -63
  364. package/dist/designer/data/systems/neobrutalism/DESIGN.md +0 -71
  365. package/dist/designer/data/systems/neobrutalism/components.html +0 -136
  366. package/dist/designer/data/systems/neobrutalism/tokens.css +0 -63
  367. package/dist/designer/data/systems/neon/DESIGN.md +0 -71
  368. package/dist/designer/data/systems/neon/components.html +0 -136
  369. package/dist/designer/data/systems/neon/tokens.css +0 -63
  370. package/dist/designer/data/systems/neumorphism/DESIGN.md +0 -71
  371. package/dist/designer/data/systems/neumorphism/components.html +0 -136
  372. package/dist/designer/data/systems/neumorphism/tokens.css +0 -63
  373. package/dist/designer/data/systems/nike/DESIGN.md +0 -366
  374. package/dist/designer/data/systems/nike/components.html +0 -512
  375. package/dist/designer/data/systems/nike/tokens.css +0 -304
  376. package/dist/designer/data/systems/notion/DESIGN.md +0 -312
  377. package/dist/designer/data/systems/notion/components.html +0 -413
  378. package/dist/designer/data/systems/notion/tokens.css +0 -130
  379. package/dist/designer/data/systems/nvidia/DESIGN.md +0 -296
  380. package/dist/designer/data/systems/nvidia/components.html +0 -414
  381. package/dist/designer/data/systems/nvidia/tokens.css +0 -133
  382. package/dist/designer/data/systems/ollama/DESIGN.md +0 -270
  383. package/dist/designer/data/systems/ollama/components.html +0 -700
  384. package/dist/designer/data/systems/ollama/tokens.css +0 -242
  385. package/dist/designer/data/systems/openai/DESIGN.md +0 -140
  386. package/dist/designer/data/systems/openai/components.html +0 -382
  387. package/dist/designer/data/systems/openai/tokens.css +0 -133
  388. package/dist/designer/data/systems/opencode-ai/DESIGN.md +0 -284
  389. package/dist/designer/data/systems/opencode-ai/components.html +0 -389
  390. package/dist/designer/data/systems/opencode-ai/tokens.css +0 -126
  391. package/dist/designer/data/systems/pacman/DESIGN.md +0 -71
  392. package/dist/designer/data/systems/pacman/components.html +0 -342
  393. package/dist/designer/data/systems/pacman/tokens.css +0 -64
  394. package/dist/designer/data/systems/paper/DESIGN.md +0 -71
  395. package/dist/designer/data/systems/paper/components.html +0 -136
  396. package/dist/designer/data/systems/paper/tokens.css +0 -63
  397. package/dist/designer/data/systems/perplexity/DESIGN.md +0 -286
  398. package/dist/designer/data/systems/perplexity/components.html +0 -455
  399. package/dist/designer/data/systems/perplexity/tokens.css +0 -151
  400. package/dist/designer/data/systems/perspective/DESIGN.md +0 -71
  401. package/dist/designer/data/systems/perspective/components.html +0 -136
  402. package/dist/designer/data/systems/perspective/tokens.css +0 -63
  403. package/dist/designer/data/systems/pinterest/DESIGN.md +0 -233
  404. package/dist/designer/data/systems/pinterest/components.html +0 -865
  405. package/dist/designer/data/systems/pinterest/tokens.css +0 -262
  406. package/dist/designer/data/systems/playstation/DESIGN.md +0 -367
  407. package/dist/designer/data/systems/playstation/components.html +0 -414
  408. package/dist/designer/data/systems/playstation/tokens.css +0 -150
  409. package/dist/designer/data/systems/posthog/DESIGN.md +0 -259
  410. package/dist/designer/data/systems/posthog/components.html +0 -827
  411. package/dist/designer/data/systems/posthog/tokens.css +0 -272
  412. package/dist/designer/data/systems/premium/DESIGN.md +0 -71
  413. package/dist/designer/data/systems/premium/components.html +0 -154
  414. package/dist/designer/data/systems/premium/tokens.css +0 -63
  415. package/dist/designer/data/systems/professional/DESIGN.md +0 -71
  416. package/dist/designer/data/systems/professional/components.html +0 -136
  417. package/dist/designer/data/systems/professional/tokens.css +0 -63
  418. package/dist/designer/data/systems/publication/DESIGN.md +0 -71
  419. package/dist/designer/data/systems/publication/components.html +0 -154
  420. package/dist/designer/data/systems/publication/tokens.css +0 -63
  421. package/dist/designer/data/systems/raycast/DESIGN.md +0 -271
  422. package/dist/designer/data/systems/raycast/components.html +0 -507
  423. package/dist/designer/data/systems/raycast/tokens.css +0 -143
  424. package/dist/designer/data/systems/refined/DESIGN.md +0 -71
  425. package/dist/designer/data/systems/refined/components.html +0 -136
  426. package/dist/designer/data/systems/refined/tokens.css +0 -63
  427. package/dist/designer/data/systems/renault/DESIGN.md +0 -314
  428. package/dist/designer/data/systems/renault/components.html +0 -154
  429. package/dist/designer/data/systems/renault/tokens.css +0 -63
  430. package/dist/designer/data/systems/replicate/DESIGN.md +0 -264
  431. package/dist/designer/data/systems/replicate/components.html +0 -340
  432. package/dist/designer/data/systems/replicate/tokens.css +0 -125
  433. package/dist/designer/data/systems/resend/DESIGN.md +0 -306
  434. package/dist/designer/data/systems/resend/components.html +0 -839
  435. package/dist/designer/data/systems/resend/tokens.css +0 -353
  436. package/dist/designer/data/systems/retro/DESIGN.md +0 -71
  437. package/dist/designer/data/systems/retro/components.html +0 -136
  438. package/dist/designer/data/systems/retro/tokens.css +0 -63
  439. package/dist/designer/data/systems/revolut/DESIGN.md +0 -188
  440. package/dist/designer/data/systems/revolut/components.html +0 -342
  441. package/dist/designer/data/systems/revolut/tokens.css +0 -64
  442. package/dist/designer/data/systems/runwayml/DESIGN.md +0 -247
  443. package/dist/designer/data/systems/runwayml/components.html +0 -638
  444. package/dist/designer/data/systems/runwayml/tokens.css +0 -204
  445. package/dist/designer/data/systems/sanity/DESIGN.md +0 -360
  446. package/dist/designer/data/systems/sanity/components.html +0 -342
  447. package/dist/designer/data/systems/sanity/tokens.css +0 -64
  448. package/dist/designer/data/systems/sentry/DESIGN.md +0 -265
  449. package/dist/designer/data/systems/sentry/components.html +0 -387
  450. package/dist/designer/data/systems/sentry/tokens.css +0 -219
  451. package/dist/designer/data/systems/shadcn/DESIGN.md +0 -71
  452. package/dist/designer/data/systems/shadcn/components.html +0 -732
  453. package/dist/designer/data/systems/shadcn/tokens.css +0 -255
  454. package/dist/designer/data/systems/shopify/DESIGN.md +0 -353
  455. package/dist/designer/data/systems/shopify/components.html +0 -342
  456. package/dist/designer/data/systems/shopify/tokens.css +0 -141
  457. package/dist/designer/data/systems/simple/DESIGN.md +0 -71
  458. package/dist/designer/data/systems/simple/components.html +0 -136
  459. package/dist/designer/data/systems/simple/tokens.css +0 -63
  460. package/dist/designer/data/systems/skeumorphism/DESIGN.md +0 -71
  461. package/dist/designer/data/systems/skeumorphism/components.html +0 -136
  462. package/dist/designer/data/systems/skeumorphism/tokens.css +0 -63
  463. package/dist/designer/data/systems/slack/DESIGN.md +0 -363
  464. package/dist/designer/data/systems/slack/components.html +0 -387
  465. package/dist/designer/data/systems/slack/tokens.css +0 -127
  466. package/dist/designer/data/systems/sleek/DESIGN.md +0 -71
  467. package/dist/designer/data/systems/sleek/components.html +0 -136
  468. package/dist/designer/data/systems/sleek/tokens.css +0 -63
  469. package/dist/designer/data/systems/spacex/DESIGN.md +0 -197
  470. package/dist/designer/data/systems/spacex/components.html +0 -496
  471. package/dist/designer/data/systems/spacex/tokens.css +0 -154
  472. package/dist/designer/data/systems/spacious/DESIGN.md +0 -71
  473. package/dist/designer/data/systems/spacious/components.html +0 -136
  474. package/dist/designer/data/systems/spacious/tokens.css +0 -63
  475. package/dist/designer/data/systems/spotify/DESIGN.md +0 -249
  476. package/dist/designer/data/systems/spotify/components.html +0 -365
  477. package/dist/designer/data/systems/spotify/tokens.css +0 -127
  478. package/dist/designer/data/systems/starbucks/DESIGN.md +0 -583
  479. package/dist/designer/data/systems/starbucks/components.html +0 -493
  480. package/dist/designer/data/systems/starbucks/tokens.css +0 -182
  481. package/dist/designer/data/systems/storytelling/DESIGN.md +0 -71
  482. package/dist/designer/data/systems/storytelling/components.html +0 -136
  483. package/dist/designer/data/systems/storytelling/tokens.css +0 -63
  484. package/dist/designer/data/systems/stripe/DESIGN.md +0 -325
  485. package/dist/designer/data/systems/stripe/components.html +0 -1018
  486. package/dist/designer/data/systems/stripe/tokens.css +0 -295
  487. package/dist/designer/data/systems/supabase/DESIGN.md +0 -258
  488. package/dist/designer/data/systems/supabase/components.html +0 -741
  489. package/dist/designer/data/systems/supabase/tokens.css +0 -294
  490. package/dist/designer/data/systems/superhuman/DESIGN.md +0 -255
  491. package/dist/designer/data/systems/superhuman/components.html +0 -537
  492. package/dist/designer/data/systems/superhuman/tokens.css +0 -160
  493. package/dist/designer/data/systems/tesla/DESIGN.md +0 -289
  494. package/dist/designer/data/systems/tesla/components.html +0 -724
  495. package/dist/designer/data/systems/tesla/tokens.css +0 -285
  496. package/dist/designer/data/systems/tetris/DESIGN.md +0 -71
  497. package/dist/designer/data/systems/tetris/components.html +0 -342
  498. package/dist/designer/data/systems/tetris/tokens.css +0 -64
  499. package/dist/designer/data/systems/theverge/DESIGN.md +0 -342
  500. package/dist/designer/data/systems/theverge/components.html +0 -342
  501. package/dist/designer/data/systems/theverge/tokens.css +0 -64
  502. package/dist/designer/data/systems/together-ai/DESIGN.md +0 -266
  503. package/dist/designer/data/systems/together-ai/components.html +0 -422
  504. package/dist/designer/data/systems/together-ai/tokens.css +0 -127
  505. package/dist/designer/data/systems/totality-festival/DESIGN.md +0 -206
  506. package/dist/designer/data/systems/totality-festival/components.html +0 -136
  507. package/dist/designer/data/systems/totality-festival/tokens.css +0 -63
  508. package/dist/designer/data/systems/trading-terminal/DESIGN.md +0 -178
  509. package/dist/designer/data/systems/trading-terminal/components.html +0 -154
  510. package/dist/designer/data/systems/trading-terminal/tokens.css +0 -63
  511. package/dist/designer/data/systems/uber/DESIGN.md +0 -298
  512. package/dist/designer/data/systems/uber/components.html +0 -347
  513. package/dist/designer/data/systems/uber/tokens.css +0 -131
  514. package/dist/designer/data/systems/urdu/DESIGN.md +0 -1002
  515. package/dist/designer/data/systems/urdu/components.html +0 -136
  516. package/dist/designer/data/systems/urdu/tokens.css +0 -63
  517. package/dist/designer/data/systems/vercel/DESIGN.md +0 -313
  518. package/dist/designer/data/systems/vercel/components.html +0 -839
  519. package/dist/designer/data/systems/vercel/tokens.css +0 -270
  520. package/dist/designer/data/systems/vibrant/DESIGN.md +0 -71
  521. package/dist/designer/data/systems/vibrant/components.html +0 -136
  522. package/dist/designer/data/systems/vibrant/tokens.css +0 -63
  523. package/dist/designer/data/systems/vintage/DESIGN.md +0 -71
  524. package/dist/designer/data/systems/vintage/components.html +0 -136
  525. package/dist/designer/data/systems/vintage/tokens.css +0 -63
  526. package/dist/designer/data/systems/vodafone/DESIGN.md +0 -426
  527. package/dist/designer/data/systems/vodafone/components.html +0 -342
  528. package/dist/designer/data/systems/vodafone/tokens.css +0 -64
  529. package/dist/designer/data/systems/voltagent/DESIGN.md +0 -326
  530. package/dist/designer/data/systems/voltagent/components.html +0 -154
  531. package/dist/designer/data/systems/voltagent/tokens.css +0 -63
  532. package/dist/designer/data/systems/warm-editorial/DESIGN.md +0 -65
  533. package/dist/designer/data/systems/warm-editorial/components.html +0 -136
  534. package/dist/designer/data/systems/warm-editorial/tokens.css +0 -63
  535. package/dist/designer/data/systems/warp/DESIGN.md +0 -256
  536. package/dist/designer/data/systems/warp/components.html +0 -411
  537. package/dist/designer/data/systems/warp/tokens.css +0 -156
  538. package/dist/designer/data/systems/webex/DESIGN.md +0 -207
  539. package/dist/designer/data/systems/webex/components.html +0 -342
  540. package/dist/designer/data/systems/webex/tokens.css +0 -64
  541. package/dist/designer/data/systems/webflow/DESIGN.md +0 -95
  542. package/dist/designer/data/systems/webflow/components.html +0 -413
  543. package/dist/designer/data/systems/webflow/tokens.css +0 -191
  544. package/dist/designer/data/systems/wechat/DESIGN.md +0 -302
  545. package/dist/designer/data/systems/wechat/components.html +0 -507
  546. package/dist/designer/data/systems/wechat/tokens.css +0 -176
  547. package/dist/designer/data/systems/wired/DESIGN.md +0 -281
  548. package/dist/designer/data/systems/wired/components.html +0 -342
  549. package/dist/designer/data/systems/wired/tokens.css +0 -64
  550. package/dist/designer/data/systems/wise/DESIGN.md +0 -176
  551. package/dist/designer/data/systems/wise/components.html +0 -365
  552. package/dist/designer/data/systems/wise/tokens.css +0 -141
  553. package/dist/designer/data/systems/x-ai/DESIGN.md +0 -260
  554. package/dist/designer/data/systems/x-ai/components.html +0 -460
  555. package/dist/designer/data/systems/x-ai/tokens.css +0 -268
  556. package/dist/designer/data/systems/xiaohongshu/DESIGN.md +0 -402
  557. package/dist/designer/data/systems/xiaohongshu/components.html +0 -865
  558. package/dist/designer/data/systems/xiaohongshu/tokens.css +0 -193
  559. package/dist/designer/data/systems/zapier/DESIGN.md +0 -331
  560. package/dist/designer/data/systems/zapier/components.html +0 -342
  561. package/dist/designer/data/systems/zapier/tokens.css +0 -64
  562. package/dist/designer/guidelines.d.ts +0 -23
  563. package/dist/designer/guidelines.d.ts.map +0 -1
  564. package/dist/designer/guidelines.js +0 -176
  565. package/dist/designer/philosophies.d.ts +0 -33
  566. package/dist/designer/philosophies.d.ts.map +0 -1
  567. package/dist/designer/philosophies.js +0 -668
  568. package/dist/designer/skills.d.ts +0 -21
  569. package/dist/designer/skills.d.ts.map +0 -1
  570. package/dist/designer/skills.js +0 -34
  571. package/dist/designer/systems.d.ts +0 -36
  572. package/dist/designer/systems.d.ts.map +0 -1
  573. package/dist/designer/systems.js +0 -221
package/dist/designer/data/systems/airbnb/components.html DELETED
@@ -1,1373 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Airbnb — reference components</title>
7
- <meta
8
- name="description"
9
- content="Reference fixture for design-systems/airbnb. Every visible
10
- value comes from tokens.css; the page itself follows Airbnb's
11
- rules — Canvas White surfaces, a single Rausch accent capped
12
- at two visible uses per viewport, Cereal at weight 500 for
13
- body, the signature 14-20px soft-circle radii, the three-
14
- layer booking-panel elevation, and the 2px Ink Black focus
15
- ring that survives full-bleed photography."
16
- />
17
-
18
- <style>
19
- /* :root paste — sourced verbatim from design-systems/airbnb/tokens.css. */
20
- :root {
21
- /* ─── Surface (3 levels) ────────────────────────────────────────
22
- * Canvas White is both the page and the card — Airbnb refuses a
23
- * tonal shift between the two. Cards earn their edges from the
24
- * Hairline Gray border and from full-bleed photography. The
25
- * tertiary tier (--surface-warm) is Soft Cloud, used only for
26
- * footer backgrounds, map-view wrappers, and middle-of-range
27
- * date cells in the date picker. */
28
- --bg: #ffffff;
29
- --surface: #ffffff;
30
- --surface-warm: #f7f7f7;
31
-
32
- /* ─── Foreground ramp (4 levels) ────────────────────────────────
33
- * Ink Black (#222222) carries roughly ninety percent of every
34
- * page — every heading, every body paragraph, every nav label,
35
- * every price. The brand's near-black is never true #000000.
36
- * Charcoal (--fg-2) is a one-step-down emphasis tier reserved
37
- * for focused-input text. Ash Gray (--muted) is the secondary
38
- * label — "Cottage rentals" subtitles, muted footer links.
39
- * Mute Gray (--meta) is reserved for disabled buttons and
40
- * low-priority metadata. */
41
- --fg: #222222;
42
- --fg-2: #3f3f3f;
43
- --muted: #6a6a6a;
44
- --meta: #929292;
45
-
46
- /* ─── Border (2 levels) ─────────────────────────────────────────
47
- * Hairline Gray (#dddddd) is the workhorse — every card-to-card
48
- * divider, every amenity-row separator, every footer-column
49
- * rule. The soft tier is a lighter hairline used to break up
50
- * dense list interiors without competing with the primary card
51
- * edge. */
52
- --border: #dddddd;
53
- --border-soft: #ebebeb;
54
-
55
- /* ─── Accent ────────────────────────────────────────────────────
56
- * Rausch coral-pink — the single signature color. Reserve for
57
- * primary CTAs (Reserve, Search, Add dates), the active-tab
58
- * underline, the wishlist heart fill, and price emphasis. Hard
59
- * cap of two visible uses per viewport; if a third Rausch
60
- * element shows up, neutralize one. Plus Magenta (#92174d) and
61
- * Luxe Purple (#460479) are kept inline at their product-tier
62
- * surfaces, not promoted to shared accent slots. */
63
- --accent: #ff385c;
64
- --accent-on: #ffffff;
65
- --accent-hover: #e31c5f; /* hand-picked, between Rausch and Deep Rausch */
66
- --accent-active: #e00b41; /* Deep Rausch — DESIGN.md §2 pressed-state value */
67
-
68
- /* ─── Semantic ──────────────────────────────────────────────────
69
- * Error Red is explicit from DESIGN.md §2; success and warn are
70
- * not specified by the brand and are bound to desaturated values
71
- * that survive the white canvas without competing with Rausch.
72
- * Keep total semantic-color pixels well under five percent of
73
- * any page — the brand almost never renders status. */
74
- --success: #008a05; /* hand-picked warm green — available/in-stock */
75
- --warn: #c47700; /* burnt amber — never tailwind yellow */
76
- --danger: #c13515; /* DESIGN.md §2 Error Red */
77
-
78
- /* ─── Typography — fonts ────────────────────────────────────────
79
- * Airbnb Cereal VF is the proprietary face that carries every
80
- * label from 8px superscript to 28px section heading. The
81
- * documented fallback chain renders acceptably on macOS/iOS
82
- * where system-ui resolves to San Francisco. Display and body
83
- * share the same stack — the visual identity comes from the
84
- * family itself, never from typeface mixing. Mono is a generic
85
- * stack for kbd, tabular metrics, and the rare code label. */
86
- --font-display:
87
- "Airbnb Cereal VF", "Airbnb Cereal App", Circular,
88
- -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
89
- --font-body:
90
- "Airbnb Cereal VF", "Airbnb Cereal App", Circular,
91
- -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
92
- --font-mono:
93
- ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco,
94
- Consolas, monospace;
95
-
96
- /* ─── Typography — type scale (px) ──────────────────────────────
97
- * Derived from DESIGN.md §3 Hierarchy table. The system clusters
98
- * tightly between 11 and 22px (the conversational range) and
99
- * jumps to 28px for section headings; the higher tiers are used
100
- * sparingly for the Guest Favorite rating lockup (44–56px) and
101
- * the rare hero numeral. No 400-regular: Cereal's body weight
102
- * is 500, which any consuming component should set explicitly. */
103
- --text-xs: 12px; /* micro / footer disclaimer */
104
- --text-sm: 14px; /* button default, link, caption */
105
- --text-base: 16px; /* body medium, button large, subtitle bold */
106
- --text-lg: 20px; /* listing title */
107
- --text-xl: 22px; /* subsection heading */
108
- --text-2xl: 28px; /* section heading */
109
- --text-3xl: 44px; /* Guest Favorite rating, hero numeral */
110
- --text-4xl: 56px; /* display ceiling — Guest Favorite max */
111
-
112
- /* ─── Typography — leading & tracking ───────────────────────────
113
- * Tight for display (1.20 — chiseled headlines), generous for
114
- * body (1.43 — magazine reading comfort). Display tracking
115
- * compresses negatively at sizes ≥20px; body and caption hold
116
- * at zero. The two-mode rhythm is what gives Airbnb pages
117
- * their travel-magazine feel rather than a utility-app feel. */
118
- --leading-body: 1.43;
119
- --leading-tight: 1.2;
120
- --tracking-display: -0.02em; /* applied at sizes ≥20px only */
121
-
122
- /* ─── Spacing — base scale ──────────────────────────────────────
123
- * 8px base unit per DESIGN.md §5. The brand uses fine-grained
124
- * off-grid values (5.5, 10, 11, 18.5, 22) for pixel-perfect
125
- * icon alignment, but the shared scale stays on the standard
126
- * 4px grid — off-grid spacing belongs inline at the component
127
- * level, not in shared tokens. */
128
- --space-1: 4px;
129
- --space-2: 8px;
130
- --space-3: 12px;
131
- --space-4: 16px;
132
- --space-5: 20px;
133
- --space-6: 24px;
134
- --space-8: 32px;
135
- --space-12: 48px;
136
-
137
- /* ─── Section rhythm ────────────────────────────────────────────
138
- * Section padding ranges 48–64px on desktop, 24–32px on mobile
139
- * per DESIGN.md §5. We bind the upper bound on desktop because
140
- * Airbnb's content-dense pages benefit from generous breathing
141
- * room between content blocks; the lower phone bound keeps the
142
- * vertical rhythm tight on small screens. */
143
- --section-y-desktop: 64px;
144
- --section-y-tablet: 48px;
145
- --section-y-phone: 32px;
146
-
147
- /* ─── Radius ────────────────────────────────────────────────────
148
- * The brand's signature soft-circle geometry. 14px (--radius-md)
149
- * is the workhorse — every listing card photograph, every
150
- * amenity badge, every generic content container lands here.
151
- * 20px (--radius-lg) is reserved for the booking panel and hero
152
- * photo frames; 8px (--radius-sm) is the small radius for
153
- * buttons, dropdowns, and inputs; --radius-pill (9999px) is the
154
- * system's signature round geometry, applied to every circular
155
- * icon button, every avatar, and the wishlist heart. */
156
- --radius-sm: 8px;
157
- --radius-md: 14px;
158
- --radius-lg: 20px;
159
- --radius-pill: 9999px;
160
-
161
- /* ─── Elevation ─────────────────────────────────────────────────
162
- * Airbnb forbids single drop shadows; the system uses stacked
163
- * layered shadows or no shadow at all. Listing cards sit flat
164
- * on the canvas. Booking panels, modals, and dropdowns use the
165
- * signature three-layer stack — a 2% hairline ring, a 4% short
166
- * blur, and a 10% medium blur — which reads as one cohesive
167
- * lift while giving the perimeter a premium anti-aliased edge. */
168
- --elev-flat: none;
169
- --elev-ring: 0 0 0 1px var(--border);
170
- --elev-raised:
171
- rgba(0, 0, 0, 0.02) 0 0 0 1px,
172
- rgba(0, 0, 0, 0.04) 0 2px 6px 0,
173
- rgba(0, 0, 0, 0.1) 0 4px 8px 0;
174
-
175
- /* ─── Focus ring ────────────────────────────────────────────────
176
- * 2px solid Ink Black, NOT the schema's accent-tinted default.
177
- * DESIGN.md §6 mandates this exact treatment so focus indicators
178
- * read cleanly against full-bleed colorful photography — a
179
- * Rausch-tinted ring would disappear against warm sunset shots
180
- * or sea-blue beach overlays. Pair with a 4px white separator
181
- * ring at circular-icon buttons that float on images. */
182
- --focus-ring: 0 0 0 2px var(--fg);
183
-
184
- /* ─── Motion ────────────────────────────────────────────────────
185
- * DESIGN.md did not capture transition timings (static
186
- * extraction scope). We bind defaults consistent with the
187
- * brand's tactile feel: 150ms for micro-states (the famous
188
- * `transform: scale(0.92)` pressed-button rebound) and 200ms
189
- * for general state changes. Standard easing is the schema
190
- * default — short, purposeful, no overshoot. */
191
- --motion-fast: 150ms;
192
- --motion-base: 200ms;
193
- --ease-standard: cubic-bezier(0.2, 0, 0, 1);
194
-
195
- /* ─── Layout ────────────────────────────────────────────────────
196
- * Detail pages cap at 1280px per DESIGN.md §5; the homepage
197
- * listing grid lets the canvas breathe to 1760–1920px on
198
- * ultra-wide. We bind the detail-page width as the shared
199
- * default because that is the geometry agents will most often
200
- * generate (rooms, experiences, host profiles). Gutters
201
- * tighten progressively: 40px desktop, 24px tablet, 16px
202
- * phone per DESIGN.md §8 small-mobile clause. */
203
- --container-max: 1280px;
204
- --container-gutter-desktop: 40px;
205
- --container-gutter-tablet: 24px;
206
- --container-gutter-phone: 16px;
207
- }
208
-
209
- /* ─── Reset (minimal) ───────────────────────────────────────── */
210
- *, *::before, *::after { box-sizing: border-box; }
211
- html, body { margin: 0; padding: 0; }
212
- body {
213
- background: var(--bg);
214
- color: var(--fg);
215
- font-family: var(--font-body);
216
- font-size: var(--text-base);
217
- font-weight: 500; /* Cereal's body weight — DESIGN.md §3 */
218
- line-height: var(--leading-body);
219
- -webkit-font-smoothing: antialiased;
220
- -moz-osx-font-smoothing: grayscale;
221
- }
222
-
223
- /* ─── Layout primitives ─────────────────────────────────────── */
224
- .container {
225
- max-width: var(--container-max);
226
- margin-inline: auto;
227
- padding-inline: var(--container-gutter-desktop);
228
- }
229
- section {
230
- padding-block: var(--section-y-desktop);
231
- }
232
- section + section {
233
- border-top: 1px solid var(--border);
234
- }
235
- @media (max-width: 1023px) {
236
- .container { padding-inline: var(--container-gutter-tablet); }
237
- section { padding-block: var(--section-y-tablet); }
238
- }
239
- @media (max-width: 639px) {
240
- .container { padding-inline: var(--container-gutter-phone); }
241
- section { padding-block: var(--section-y-phone); }
242
- }
243
-
244
- /* ─── Typography ─────────────────────────────────────────────
245
- * Display sizes ≥20px compress tracking negatively per
246
- * DESIGN.md §3 ("Negative tracking on display type only").
247
- * Body and caption sizes hold at zero tracking for
248
- * readability. Weights: 500 body, 600 emphasis, 700 display
249
- * — no 400 anywhere, no italic anywhere. */
250
- h1, h2, h3 {
251
- font-family: var(--font-display);
252
- line-height: var(--leading-tight);
253
- margin: 0;
254
- }
255
- h1 {
256
- font-size: var(--text-2xl);
257
- font-weight: 700;
258
- letter-spacing: var(--tracking-display);
259
- }
260
- h2 {
261
- font-size: var(--text-xl);
262
- font-weight: 500;
263
- /* 22px Subsection Heading: line-height 1.18 per DESIGN.md §Typography.
264
- Overrides the shared 1.20 (--leading-tight) set on h1/h2/h3 above. */
265
- line-height: 1.18;
266
- letter-spacing: var(--tracking-display);
267
- }
268
- h3 {
269
- font-size: var(--text-base);
270
- font-weight: 600;
271
- /* 16px Subtitle/Body size: line-height 1.25 per DESIGN.md §Typography.
272
- Overrides the shared 1.20 (--leading-tight) set on h1/h2/h3 above. */
273
- line-height: 1.25;
274
- }
275
- p { margin: 0; }
276
-
277
- .lede {
278
- font-size: var(--text-base);
279
- line-height: var(--leading-body);
280
- color: var(--fg);
281
- }
282
- .body-muted { color: var(--muted); }
283
- .body-meta { color: var(--meta); font-size: var(--text-sm); }
284
- .body-sm { font-size: var(--text-sm); }
285
-
286
- /* The single uppercase moment in the system, per DESIGN.md §3
287
- * Principles ("No all-caps except at 8px"). We elevate this
288
- * to a 12px eyebrow for fixture legibility, with tracking
289
- * well above the craft 0.06em floor. Used once per section. */
290
- .eyebrow {
291
- font-family: var(--font-display);
292
- font-size: var(--text-xs);
293
- font-weight: 700;
294
- line-height: 1.33;
295
- color: var(--fg);
296
- text-transform: uppercase;
297
- letter-spacing: 0.08em;
298
- }
299
-
300
- .stack-2 > * + * { margin-block-start: var(--space-2); }
301
- .stack-3 > * + * { margin-block-start: var(--space-3); }
302
- .stack-4 > * + * { margin-block-start: var(--space-4); }
303
- .stack-6 > * + * { margin-block-start: var(--space-6); }
304
-
305
- /* ─── Buttons ────────────────────────────────────────────────
306
- * Primary CTA is filled Rausch on Canvas White text. Active/
307
- * pressed uses Deep Rausch as the published brand value
308
- * (DESIGN.md §4 Primary CTA) combined with the famous
309
- * `transform: scale(0.92)` rebound that gives the brand its
310
- * tactile feel. Secondary is a Hairline Gray outlined pill
311
- * over the canvas. Both share the 2px Ink Black focus ring
312
- * — see the #Bind 6 rationale in tokens.css. */
313
- .btn {
314
- display: inline-flex;
315
- align-items: center;
316
- justify-content: center;
317
- gap: var(--space-2);
318
- padding: 14px 24px;
319
- border: 1px solid transparent;
320
- border-radius: var(--radius-sm);
321
- font-family: var(--font-display);
322
- font-weight: 500;
323
- font-size: var(--text-base);
324
- line-height: 1;
325
- cursor: pointer;
326
- text-decoration: none;
327
- transition:
328
- transform var(--motion-fast) var(--ease-standard),
329
- background-color var(--motion-fast) var(--ease-standard),
330
- border-color var(--motion-fast) var(--ease-standard),
331
- box-shadow var(--motion-fast) var(--ease-standard);
332
- }
333
- .btn:focus-visible {
334
- outline: none;
335
- box-shadow: var(--focus-ring);
336
- }
337
- .btn:active {
338
- transform: scale(0.96); /* approaching DESIGN.md §4's scale(0.92) */
339
- }
340
- .btn-primary {
341
- background: var(--accent);
342
- color: var(--accent-on);
343
- }
344
- .btn-primary:hover {
345
- background: var(--accent-hover);
346
- }
347
- .btn-primary:active {
348
- background: var(--accent-active);
349
- transform: scale(0.92);
350
- }
351
- .btn-secondary {
352
- background: var(--surface);
353
- color: var(--fg);
354
- border-color: var(--border);
355
- border-radius: var(--radius-lg); /* 20px pill — DESIGN.md §4 Secondary */
356
- }
357
- .btn-secondary:hover {
358
- border-color: var(--fg);
359
- }
360
-
361
- /* Compact button — listing-card price row, secondary nav links */
362
- .btn-sm {
363
- padding: 10px 16px;
364
- font-size: var(--text-sm);
365
- }
366
-
367
- /* Circular icon button — the brand's signature geometry
368
- * (DESIGN.md §4 Icon-Only Circular Button). Used for back,
369
- * share, favorite, and carousel controls. The 4px white
370
- * separator ring on `:hover` is what separates the button
371
- * from colorful photography backgrounds. */
372
- .btn-icon {
373
- display: inline-flex;
374
- align-items: center;
375
- justify-content: center;
376
- width: 32px;
377
- height: 32px;
378
- padding: 0;
379
- border: 1px solid var(--border);
380
- border-radius: var(--radius-pill);
381
- background: var(--surface);
382
- color: var(--fg);
383
- cursor: pointer;
384
- transition:
385
- transform var(--motion-fast) var(--ease-standard),
386
- box-shadow var(--motion-fast) var(--ease-standard);
387
- }
388
- .btn-icon:hover {
389
- box-shadow: 0 0 0 4px var(--surface), var(--elev-ring);
390
- }
391
- .btn-icon:active {
392
- transform: scale(0.92);
393
- }
394
- .btn-icon:focus-visible {
395
- outline: none;
396
- box-shadow: var(--focus-ring);
397
- }
398
- .btn-icon svg { width: 16px; height: 16px; }
399
-
400
- /* ─── Inputs ─────────────────────────────────────────────────
401
- * Generic text input per DESIGN.md §4 Text Input — 1px
402
- * Hairline Gray edge, 8px radius, 14px·16px padding. Focus
403
- * switches the edge to Ink Black and adds the 2px outer
404
- * ring. Error state swaps to Error Red on both border and
405
- * helper text. */
406
- .field {
407
- display: flex;
408
- flex-direction: column;
409
- gap: var(--space-2);
410
- }
411
- .field label {
412
- font-size: var(--text-sm);
413
- font-weight: 600;
414
- color: var(--fg);
415
- }
416
- .field input,
417
- .field select {
418
- padding: 14px 16px;
419
- border-radius: var(--radius-sm);
420
- border: 1px solid var(--border);
421
- background: var(--surface);
422
- color: var(--fg);
423
- font-family: inherit;
424
- font-weight: 500;
425
- font-size: var(--text-base);
426
- outline: none;
427
- transition:
428
- border-color var(--motion-fast) var(--ease-standard),
429
- box-shadow var(--motion-fast) var(--ease-standard);
430
- }
431
- .field input:focus-visible,
432
- .field select:focus-visible {
433
- border-color: var(--fg);
434
- box-shadow: var(--focus-ring);
435
- color: var(--fg-2);
436
- }
437
- .field input::placeholder { color: var(--muted); }
438
- .field-help {
439
- font-size: var(--text-xs);
440
- color: var(--muted);
441
- }
442
- .field-error .field-help { color: var(--danger); }
443
- .field-error input { border-color: var(--danger); }
444
-
445
- /* Search pill — three-segment "Where / When / Who" with a
446
- * Rausch circular submit button at the right edge. DESIGN.md
447
- * §4 Search Bar. The 32px pill radius is one of the brand's
448
- * signature radii. */
449
- .search-pill {
450
- display: inline-flex;
451
- align-items: center;
452
- gap: 0;
453
- padding: 8px;
454
- border: 1px solid var(--border);
455
- border-radius: var(--radius-pill);
456
- background: var(--surface);
457
- box-shadow:
458
- rgba(0, 0, 0, 0.04) 0 2px 6px 0;
459
- max-width: 100%;
460
- }
461
- .search-segment {
462
- display: flex;
463
- flex-direction: column;
464
- padding: 6px var(--space-5);
465
- min-width: 0;
466
- cursor: pointer;
467
- }
468
- .search-segment + .search-segment {
469
- border-left: 1px solid var(--border);
470
- }
471
- .search-segment-label {
472
- font-size: var(--text-xs);
473
- font-weight: 600;
474
- color: var(--fg);
475
- line-height: 1.2;
476
- }
477
- .search-segment-value {
478
- font-size: var(--text-sm);
479
- font-weight: 500;
480
- color: var(--muted);
481
- line-height: 1.3;
482
- }
483
- .search-submit {
484
- display: inline-flex;
485
- align-items: center;
486
- justify-content: center;
487
- width: 48px;
488
- height: 48px;
489
- margin-left: var(--space-2);
490
- border: none;
491
- border-radius: var(--radius-pill);
492
- background: var(--accent);
493
- color: var(--accent-on);
494
- cursor: pointer;
495
- transition:
496
- background-color var(--motion-fast) var(--ease-standard),
497
- transform var(--motion-fast) var(--ease-standard);
498
- }
499
- .search-submit:hover { background: var(--accent-hover); }
500
- .search-submit:active {
501
- background: var(--accent-active);
502
- transform: scale(0.92);
503
- }
504
- .search-submit:focus-visible {
505
- outline: none;
506
- box-shadow: var(--focus-ring);
507
- }
508
- .search-submit svg { width: 16px; height: 16px; }
509
-
510
- /* ─── Cards ──────────────────────────────────────────────────
511
- * Two card shapes: the listing card (no border, no shadow,
512
- * 14px image radius, text directly below the photo per
513
- * DESIGN.md §4 Listing Card) and the booking-panel card
514
- * (1px Hairline border, 20px radius, three-layer shadow
515
- * stack — the system's most recognizable elevation). */
516
- .listing {
517
- display: flex;
518
- flex-direction: column;
519
- gap: var(--space-3);
520
- }
521
- .listing-photo {
522
- position: relative;
523
- aspect-ratio: 4 / 3;
524
- border-radius: var(--radius-md);
525
- overflow: hidden;
526
- background: var(--surface-warm);
527
- }
528
- /* Photograph placeholder — gentle linear gradient inside the
529
- * 14px radius. In production this slot is a 4:3 muscache CDN
530
- * image with loading="lazy"; the fixture renders a tonal
531
- * surface so the card geometry is still legible without art. */
532
- .listing-photo::before {
533
- content: "";
534
- position: absolute;
535
- inset: 0;
536
- background:
537
- linear-gradient(
538
- 135deg,
539
- var(--surface-warm) 0%,
540
- var(--border) 60%,
541
- var(--surface-warm) 100%
542
- );
543
- }
544
- .listing-photo .btn-icon {
545
- position: absolute;
546
- top: var(--space-3);
547
- right: var(--space-3);
548
- z-index: 1;
549
- }
550
- .listing-photo .listing-badge {
551
- position: absolute;
552
- top: var(--space-3);
553
- left: var(--space-3);
554
- z-index: 1;
555
- }
556
- .listing-meta {
557
- display: flex;
558
- flex-direction: column;
559
- gap: var(--space-1);
560
- }
561
- .listing-row {
562
- display: flex;
563
- align-items: center;
564
- justify-content: space-between;
565
- gap: var(--space-2);
566
- }
567
- .listing-title {
568
- font-size: var(--text-base);
569
- font-weight: 600;
570
- color: var(--fg);
571
- }
572
- .listing-subtitle {
573
- font-size: var(--text-sm);
574
- font-weight: 500;
575
- color: var(--muted);
576
- }
577
- .listing-price {
578
- font-size: var(--text-base);
579
- font-weight: 600;
580
- color: var(--fg);
581
- }
582
- .listing-price .per {
583
- font-weight: 500;
584
- color: var(--muted);
585
- }
586
- .listing-rating {
587
- font-size: var(--text-sm);
588
- font-weight: 500;
589
- color: var(--fg);
590
- font-variant-numeric: tabular-nums;
591
- }
592
-
593
- /* Booking panel — the brand's signature sticky elevation.
594
- * Three-layer shadow + Hairline border + 20px radius +
595
- * 24px padding. DESIGN.md §4 Detail Page Booking Panel. */
596
- .booking-panel {
597
- background: var(--surface);
598
- border: 1px solid var(--border);
599
- border-radius: var(--radius-lg);
600
- box-shadow: var(--elev-raised);
601
- padding: var(--space-6);
602
- display: flex;
603
- flex-direction: column;
604
- gap: var(--space-4);
605
- max-width: 370px;
606
- }
607
- .booking-headline {
608
- display: flex;
609
- align-items: baseline;
610
- gap: var(--space-2);
611
- }
612
- .booking-price {
613
- font-family: var(--font-display);
614
- font-size: var(--text-xl);
615
- font-weight: 600;
616
- color: var(--fg);
617
- letter-spacing: var(--tracking-display);
618
- }
619
- .booking-per {
620
- font-size: var(--text-base);
621
- font-weight: 500;
622
- color: var(--muted);
623
- }
624
- .booking-grid {
625
- display: grid;
626
- grid-template-columns: 1fr 1fr;
627
- border: 1px solid var(--border);
628
- border-radius: var(--radius-md);
629
- overflow: hidden;
630
- }
631
- .booking-grid-cell {
632
- padding: var(--space-3) var(--space-4);
633
- display: flex;
634
- flex-direction: column;
635
- gap: 2px;
636
- cursor: pointer;
637
- background: var(--surface);
638
- }
639
- .booking-grid-cell + .booking-grid-cell {
640
- border-left: 1px solid var(--border);
641
- }
642
- .booking-grid-cell.full {
643
- grid-column: 1 / -1;
644
- border-top: 1px solid var(--border);
645
- border-left: none;
646
- }
647
- .booking-cell-label {
648
- font-size: 10px;
649
- font-weight: 700;
650
- color: var(--fg);
651
- text-transform: uppercase;
652
- letter-spacing: 0.06em;
653
- }
654
- .booking-cell-value {
655
- font-size: var(--text-sm);
656
- font-weight: 500;
657
- color: var(--muted);
658
- }
659
- .booking-disclaimer {
660
- font-size: var(--text-xs);
661
- color: var(--muted);
662
- text-align: center;
663
- line-height: var(--leading-body);
664
- }
665
-
666
- /* ─── Badges ─────────────────────────────────────────────────
667
- * Two shapes: the rounded brand badge (14px radius, used on
668
- * listing photos as "NEW" or "Guest favorite" markers) and
669
- * the dotted status badge (pill, used in metadata strips).
670
- * Both stay under DESIGN.md §3's "no all-caps except 8px"
671
- * rule by using sentence case at 12px·600. */
672
- .badge {
673
- display: inline-flex;
674
- align-items: center;
675
- gap: var(--space-2);
676
- padding: 6px var(--space-3);
677
- border-radius: var(--radius-pill);
678
- font-family: var(--font-display);
679
- font-size: var(--text-xs);
680
- font-weight: 600;
681
- line-height: 1.2;
682
- }
683
- .badge-rausch {
684
- background: var(--accent);
685
- color: var(--accent-on);
686
- border-radius: var(--radius-md);
687
- }
688
- .badge-soft {
689
- background: var(--surface);
690
- color: var(--fg);
691
- border-radius: var(--radius-md);
692
- box-shadow: var(--elev-ring);
693
- }
694
- .badge-status {
695
- background: var(--surface-warm);
696
- color: var(--fg);
697
- }
698
- .badge-status .badge-dot {
699
- width: 6px;
700
- height: 6px;
701
- border-radius: var(--radius-pill);
702
- background: var(--success);
703
- }
704
-
705
- /* ─── Links ──────────────────────────────────────────────────
706
- * Body links inherit Ink Black, NOT Rausch. Rausch is
707
- * reserved for buttons and the active-tab indicator;
708
- * promoting it to link color would dilute the accent and
709
- * trip the two-uses-per-viewport cap. Underline appears on
710
- * hover at generous offset. */
711
- a {
712
- color: var(--fg);
713
- text-decoration: underline;
714
- text-underline-offset: 3px;
715
- text-decoration-thickness: 1px;
716
- text-decoration-color: var(--border);
717
- transition: text-decoration-color var(--motion-fast) var(--ease-standard);
718
- }
719
- a:hover {
720
- text-decoration-color: var(--fg);
721
- }
722
- a:focus-visible {
723
- outline: none;
724
- box-shadow: var(--focus-ring);
725
- border-radius: var(--radius-sm);
726
- }
727
-
728
- /* ─── Kbd ────────────────────────────────────────────────────
729
- * Hairline outline + Soft Cloud fill + tabular mono. Used
730
- * for the rare keyboard shortcut hint. */
731
- kbd {
732
- display: inline-block;
733
- font-family: var(--font-mono);
734
- font-size: var(--text-xs);
735
- padding: 2px 6px;
736
- border-radius: var(--radius-sm);
737
- border: 1px solid var(--border);
738
- background: var(--surface-warm);
739
- color: var(--fg);
740
- line-height: 1.2;
741
- font-variant-numeric: tabular-nums;
742
- }
743
-
744
- /* ─── Distinctive: Guest Favorite Award lockup ───────────────
745
- * The brand's most recognizable moment (DESIGN.md §4
746
- * Signature Components). A centered rating numeral at
747
- * 44–56px·700 flanked by two laurel wreath SVGs. Below the
748
- * lockup: a 12px·700 uppercase label with 0.32px tracking
749
- * (we widen to 0.06em — the craft floor) and a 14px·500
750
- * Ash Gray sub-label. Full-width block, no border, sits
751
- * directly on the canvas. */
752
- .award {
753
- display: flex;
754
- flex-direction: column;
755
- align-items: center;
756
- text-align: center;
757
- gap: var(--space-3);
758
- padding-block: var(--space-8);
759
- }
760
- .award-row {
761
- display: flex;
762
- align-items: center;
763
- gap: var(--space-5);
764
- color: var(--fg);
765
- }
766
- .award-rating {
767
- font-family: var(--font-display);
768
- font-size: var(--text-3xl);
769
- font-weight: 700;
770
- color: var(--fg);
771
- line-height: 1;
772
- letter-spacing: var(--tracking-display);
773
- font-variant-numeric: tabular-nums;
774
- }
775
- .award-laurel {
776
- width: 48px;
777
- height: 64px;
778
- color: var(--fg);
779
- flex-shrink: 0;
780
- }
781
- .award-laurel.right { transform: scaleX(-1); }
782
- .award-label {
783
- font-family: var(--font-display);
784
- font-size: var(--text-xs);
785
- font-weight: 700;
786
- text-transform: uppercase;
787
- letter-spacing: 0.08em;
788
- color: var(--fg);
789
- line-height: 1;
790
- }
791
- .award-sub {
792
- font-size: var(--text-sm);
793
- font-weight: 500;
794
- color: var(--muted);
795
- max-width: 44ch;
796
- line-height: var(--leading-body);
797
- }
798
-
799
- /* Tri-tab category picker (DESIGN.md §4 Tri-Tab) — the brand's
800
- * other instantly-recognizable nav moment. We render with
801
- * type-only icons (no 3D illustrations) because the fixture
802
- * stays raster-free, but the underline + label rhythm holds. */
803
- .tabs {
804
- display: inline-flex;
805
- gap: var(--space-8);
806
- padding-block-start: var(--space-3);
807
- border-bottom: 1px solid var(--border);
808
- }
809
- .tab {
810
- display: flex;
811
- flex-direction: column;
812
- align-items: center;
813
- gap: var(--space-2);
814
- padding-block-end: var(--space-3);
815
- font-family: var(--font-display);
816
- font-size: var(--text-base);
817
- font-weight: 500;
818
- color: var(--muted);
819
- background: none;
820
- border: none;
821
- cursor: pointer;
822
- position: relative;
823
- text-decoration: none;
824
- }
825
- .tab-glyph {
826
- width: 32px;
827
- height: 32px;
828
- display: flex;
829
- align-items: center;
830
- justify-content: center;
831
- color: var(--fg);
832
- }
833
- .tab[aria-selected="true"] {
834
- color: var(--fg);
835
- }
836
- .tab[aria-selected="true"]::after {
837
- content: "";
838
- position: absolute;
839
- left: 0;
840
- right: 0;
841
- bottom: -1px;
842
- height: 2px;
843
- background: var(--fg);
844
- border-radius: var(--radius-pill);
845
- }
846
- .tab-new {
847
- position: absolute;
848
- top: -4px;
849
- right: -10px;
850
- padding: 2px 6px;
851
- border-radius: var(--radius-md);
852
- background: var(--fg);
853
- color: var(--accent-on);
854
- font-size: 10px;
855
- font-weight: 700;
856
- line-height: 1.2;
857
- letter-spacing: 0.06em;
858
- text-transform: uppercase;
859
- }
860
-
861
- /* ─── Section-specific layout ──────────────────────────────── */
862
- .hero-grid {
863
- display: grid;
864
- grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
865
- gap: var(--space-12);
866
- align-items: start;
867
- }
868
- @media (max-width: 1023px) {
869
- .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
870
- }
871
- .hero-actions {
872
- display: flex;
873
- flex-wrap: wrap;
874
- gap: var(--space-3);
875
- margin-block-start: var(--space-6);
876
- }
877
-
878
- .listings-grid {
879
- display: grid;
880
- grid-template-columns: repeat(3, 1fr);
881
- gap: var(--space-6);
882
- margin-block-start: var(--space-8);
883
- }
884
- @media (max-width: 1023px) {
885
- .listings-grid { grid-template-columns: repeat(2, 1fr); }
886
- }
887
- @media (max-width: 639px) {
888
- .listings-grid { grid-template-columns: 1fr; gap: var(--space-4); }
889
- }
890
-
891
- .form-row {
892
- display: grid;
893
- grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
894
- gap: var(--space-12);
895
- align-items: start;
896
- }
897
- @media (max-width: 1023px) {
898
- .form-row { grid-template-columns: 1fr; }
899
- }
900
- .form {
901
- display: flex;
902
- flex-direction: column;
903
- gap: var(--space-4);
904
- }
905
- .row-between {
906
- display: flex;
907
- align-items: center;
908
- justify-content: space-between;
909
- gap: var(--space-3);
910
- }
911
- .row-cluster {
912
- display: flex;
913
- align-items: center;
914
- gap: var(--space-2);
915
- flex-wrap: wrap;
916
- }
917
- .divider-soft {
918
- height: 1px;
919
- background: var(--border-soft);
920
- border: none;
921
- margin: 0;
922
- }
923
- .nav-row {
924
- display: flex;
925
- align-items: center;
926
- justify-content: space-between;
927
- padding-block: var(--space-4);
928
- gap: var(--space-4);
929
- }
930
- .nav-logo {
931
- font-family: var(--font-display);
932
- font-size: var(--text-lg);
933
- font-weight: 700;
934
- color: var(--accent);
935
- letter-spacing: var(--tracking-display);
936
- }
937
- .icon { width: 16px; height: 16px; flex-shrink: 0; }
938
- </style>
939
- </head>
940
- <body>
941
- <main class="container">
942
- <!-- ════════════════════════════════════════════════════════════
943
- NAV — exercises: .nav-row, .nav-logo (Rausch wordmark),
944
- .tabs (tri-tab picker, DESIGN.md §4 signature). Active
945
- "Homes" tab gets the 2px Ink Black underline; "Experiences"
946
- carries the small Ink Black NEW pill from §4.
947
- ═══════════════════════════════════════════════════════════════ -->
948
- <nav class="nav-row" aria-label="Primary">
949
- <span class="nav-logo">airbnb</span>
950
- <div class="tabs" role="tablist">
951
- <button class="tab" role="tab" aria-selected="true">
952
- <span class="tab-glyph" aria-hidden="true">
953
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
954
- stroke-width="1.5" stroke-linecap="round"
955
- stroke-linejoin="round" width="24" height="24">
956
- <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z" />
957
- </svg>
958
- </span>
959
- Homes
960
- </button>
961
- <button class="tab" role="tab" aria-selected="false">
962
- <span class="tab-glyph" aria-hidden="true">
963
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
964
- stroke-width="1.5" stroke-linecap="round"
965
- stroke-linejoin="round" width="24" height="24">
966
- <ellipse cx="12" cy="9" rx="6" ry="7" />
967
- <path d="M9 16l-1 5 4-2 4 2-1-5" />
968
- </svg>
969
- </span>
970
- Experiences
971
- <span class="tab-new" aria-label="New">New</span>
972
- </button>
973
- <button class="tab" role="tab" aria-selected="false">
974
- <span class="tab-glyph" aria-hidden="true">
975
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
976
- stroke-width="1.5" stroke-linecap="round"
977
- stroke-linejoin="round" width="24" height="24">
978
- <path d="M6 16a6 6 0 1 1 12 0z" />
979
- <path d="M12 6V3M5 18h14M11 19v2h2v-2" />
980
- </svg>
981
- </span>
982
- Services
983
- <span class="tab-new" aria-label="New">New</span>
984
- </button>
985
- </div>
986
- <div class="row-cluster">
987
- <button class="btn btn-secondary btn-sm" type="button">Become a host</button>
988
- <button class="btn-icon" type="button" aria-label="Menu">
989
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
990
- stroke-width="1.75" stroke-linecap="round"
991
- stroke-linejoin="round" aria-hidden="true">
992
- <path d="M4 7h16M4 12h16M4 17h16" />
993
- </svg>
994
- </button>
995
- </div>
996
- </nav>
997
-
998
- <!-- ════════════════════════════════════════════════════════════
999
- HERO — exercises: .eyebrow, h1, .lede, .search-pill (the
1000
- three-segment Where/When/Who with the Rausch circular
1001
- submit, DESIGN.md §4), .btn-primary, .btn-secondary,
1002
- kbd, .badge-status (success dot).
1003
- ═══════════════════════════════════════════════════════════════ -->
1004
- <section data-od-id="hero">
1005
- <div class="hero-grid">
1006
- <div class="stack-4">
1007
- <p class="eyebrow">Reference fixture · airbnb</p>
1008
- <h1 style="max-width: 18ch">
1009
- Find a place where the photograph is the interface.
1010
- </h1>
1011
- <p class="lede body-muted" style="max-width: 56ch">
1012
- A token system distilled from Airbnb's 2026 rules — Canvas
1013
- White surfaces, a single Rausch coral accent, generous
1014
- soft-circle radii, and Cereal at one family. The fixture
1015
- you are reading uses the same token block agents paste
1016
- into every artifact, so the rules survive the paste.
1017
- </p>
1018
-
1019
- <div class="search-pill" role="search" aria-label="Find a stay">
1020
- <div class="search-segment">
1021
- <span class="search-segment-label">Where</span>
1022
- <span class="search-segment-value">Search destinations</span>
1023
- </div>
1024
- <div class="search-segment">
1025
- <span class="search-segment-label">When</span>
1026
- <span class="search-segment-value">Add dates</span>
1027
- </div>
1028
- <div class="search-segment">
1029
- <span class="search-segment-label">Who</span>
1030
- <span class="search-segment-value">Add guests</span>
1031
- </div>
1032
- <button class="search-submit" type="submit" aria-label="Search">
1033
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
1034
- stroke-width="2" stroke-linecap="round"
1035
- stroke-linejoin="round" aria-hidden="true">
1036
- <circle cx="11" cy="11" r="7" />
1037
- <path d="M21 21l-4.3-4.3" />
1038
- </svg>
1039
- </button>
1040
- </div>
1041
-
1042
- <div class="hero-actions">
1043
- <a href="./tokens.css" class="btn btn-primary">
1044
- View the token block
1045
- <svg
1046
- class="icon"
1047
- viewBox="0 0 24 24"
1048
- fill="none"
1049
- stroke="currentColor"
1050
- stroke-width="1.75"
1051
- stroke-linecap="round"
1052
- stroke-linejoin="round"
1053
- aria-hidden="true"
1054
- >
1055
- <path d="M5 12h14M13 6l6 6-6 6" />
1056
- </svg>
1057
- </a>
1058
- <a href="./DESIGN.md" class="btn btn-secondary">Read the brand</a>
1059
- </div>
1060
- </div>
1061
-
1062
- <aside class="booking-panel" aria-label="Token status">
1063
- <div class="booking-headline">
1064
- <span class="booking-price">56 tokens</span>
1065
- <span class="booking-per">in :root</span>
1066
- </div>
1067
- <div class="booking-grid" role="group">
1068
- <div class="booking-grid-cell">
1069
- <span class="booking-cell-label">Last reviewed</span>
1070
- <span class="booking-cell-value">
1071
- <time datetime="2026-05-14">May 14, 2026</time>
1072
- </span>
1073
- </div>
1074
- <div class="booking-grid-cell">
1075
- <span class="booking-cell-label">Schema</span>
1076
- <span class="booking-cell-value">v0.1 · A1/A2/B</span>
1077
- </div>
1078
- <div class="booking-grid-cell full">
1079
- <span class="booking-cell-label">Accent budget</span>
1080
- <span class="booking-cell-value">≤ 2 visible Rausch uses per viewport</span>
1081
- </div>
1082
- </div>
1083
- <button type="button" class="btn btn-primary" style="width: 100%">
1084
- Inspect tokens
1085
- </button>
1086
- <p class="booking-disclaimer">
1087
- You won't be charged — this is a static fixture. Press
1088
- <kbd>⌘</kbd> <kbd>K</kbd> to jump to the token grep.
1089
- </p>
1090
- <div class="row-between" style="margin-block-start: var(--space-2)">
1091
- <span class="badge badge-status">
1092
- <span class="badge-dot" aria-hidden="true"></span>
1093
- Tokens passing schema
1094
- </span>
1095
- <span class="listing-rating" aria-label="Token coverage">
1096
- <svg
1097
- width="14"
1098
- height="14"
1099
- viewBox="0 0 24 24"
1100
- fill="currentColor"
1101
- aria-hidden="true"
1102
- style="vertical-align: -2px; margin-right: 4px"
1103
- >
1104
- <path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7L12 17l-6.3 4.2 1.7-7L2 9.5l7.1-.6z" />
1105
- </svg>
1106
- 4.92
1107
- </span>
1108
- </div>
1109
- </aside>
1110
- </div>
1111
- </section>
1112
-
1113
- <!-- ════════════════════════════════════════════════════════════
1114
- LISTINGS — exercises: .listing (4:3 photo, no border, no
1115
- shadow, 14px radius), .listing-photo with floated circular
1116
- favorite button, .badge-rausch, .listing-rating, links.
1117
- Three cards in a 3-col grid that reflows to 2 then 1.
1118
- ═══════════════════════════════════════════════════════════════ -->
1119
- <section data-od-id="listings">
1120
- <div class="stack-3">
1121
- <p class="eyebrow">What the fixture exercises</p>
1122
- <h2 style="max-width: 32ch">
1123
- Three listings, every token resolved through var(--*).
1124
- </h2>
1125
- <p class="body-muted" style="max-width: 56ch">
1126
- No raw hex outside the :root paste. No second type family.
1127
- No drop shadow on the listing cards — separation comes from
1128
- the photograph and the 24px gutter between them.
1129
- </p>
1130
- </div>
1131
-
1132
- <div class="listings-grid">
1133
- <article class="listing" aria-label="Cottage in the Cotswolds">
1134
- <div class="listing-photo">
1135
- <span class="listing-badge badge badge-soft">Guest favorite</span>
1136
- <button class="btn-icon" type="button" aria-label="Save to wishlist">
1137
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
1138
- stroke-width="1.75" stroke-linecap="round"
1139
- stroke-linejoin="round" aria-hidden="true">
1140
- <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" />
1141
- </svg>
1142
- </button>
1143
- </div>
1144
- <div class="listing-meta">
1145
- <div class="listing-row">
1146
- <span class="listing-title">Cotswolds, England</span>
1147
- <span class="listing-rating">
1148
- <svg
1149
- width="12"
1150
- height="12"
1151
- viewBox="0 0 24 24"
1152
- fill="currentColor"
1153
- aria-hidden="true"
1154
- style="vertical-align: -1px; margin-right: 3px"
1155
- >
1156
- <path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7L12 17l-6.3 4.2 1.7-7L2 9.5l7.1-.6z" />
1157
- </svg>
1158
- 4.97
1159
- </span>
1160
- </div>
1161
- <span class="listing-subtitle">Cottage rentals · 2 hours by train</span>
1162
- <span class="listing-subtitle">Apr 12 – 17</span>
1163
- <span class="listing-price">
1164
- $182 <span class="per">/ night</span>
1165
- </span>
1166
- </div>
1167
- </article>
1168
-
1169
- <article class="listing" aria-label="Loft in Lisbon">
1170
- <div class="listing-photo">
1171
- <span class="listing-badge badge badge-rausch">New</span>
1172
- <button class="btn-icon" type="button" aria-label="Save to wishlist">
1173
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
1174
- stroke-width="1.75" stroke-linecap="round"
1175
- stroke-linejoin="round" aria-hidden="true">
1176
- <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" />
1177
- </svg>
1178
- </button>
1179
- </div>
1180
- <div class="listing-meta">
1181
- <div class="listing-row">
1182
- <span class="listing-title">Lisbon, Portugal</span>
1183
- <span class="listing-rating">
1184
- <svg
1185
- width="12"
1186
- height="12"
1187
- viewBox="0 0 24 24"
1188
- fill="currentColor"
1189
- aria-hidden="true"
1190
- style="vertical-align: -1px; margin-right: 3px"
1191
- >
1192
- <path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7L12 17l-6.3 4.2 1.7-7L2 9.5l7.1-.6z" />
1193
- </svg>
1194
- 4.81
1195
- </span>
1196
- </div>
1197
- <span class="listing-subtitle">Loft apartments · Alfama</span>
1198
- <span class="listing-subtitle">May 03 – 09</span>
1199
- <span class="listing-price">
1200
- $96 <span class="per">/ night</span>
1201
- </span>
1202
- </div>
1203
- </article>
1204
-
1205
- <article class="listing" aria-label="Yacht tour in Mykonos">
1206
- <div class="listing-photo">
1207
- <span class="listing-badge badge badge-soft">Experience</span>
1208
- <button class="btn-icon" type="button" aria-label="Save to wishlist">
1209
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
1210
- stroke-width="1.75" stroke-linecap="round"
1211
- stroke-linejoin="round" aria-hidden="true">
1212
- <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" />
1213
- </svg>
1214
- </button>
1215
- </div>
1216
- <div class="listing-meta">
1217
- <div class="listing-row">
1218
- <span class="listing-title">Mykonos, Greece</span>
1219
- <span class="listing-rating">
1220
- <svg
1221
- width="12"
1222
- height="12"
1223
- viewBox="0 0 24 24"
1224
- fill="currentColor"
1225
- aria-hidden="true"
1226
- style="vertical-align: -1px; margin-right: 3px"
1227
- >
1228
- <path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7L12 17l-6.3 4.2 1.7-7L2 9.5l7.1-.6z" />
1229
- </svg>
1230
- 4.89
1231
- </span>
1232
- </div>
1233
- <span class="listing-subtitle">Small Group Yacht Tour</span>
1234
- <span class="listing-subtitle">4 hours · Unlimited fruit</span>
1235
- <span class="listing-price">
1236
- $148 <span class="per">/ person</span>
1237
- </span>
1238
- </div>
1239
- </article>
1240
- </div>
1241
- </section>
1242
-
1243
- <!-- ════════════════════════════════════════════════════════════
1244
- GUEST FAVORITE AWARD — the brand's signature distinctive
1245
- component. Centered rating numeral at 44px·700 flanked by
1246
- two laurel wreath SVGs at 48×64. Below, an uppercase 12px·700
1247
- "GUEST FAVORITE" label and a 14px·500 Ash Gray sub-line.
1248
- Full-width block, no border, sits directly on the canvas
1249
- per DESIGN.md §4 Signature Components.
1250
- ═══════════════════════════════════════════════════════════════ -->
1251
- <section data-od-id="award">
1252
- <div class="award" aria-label="Guest Favorite award">
1253
- <div class="award-row">
1254
- <svg
1255
- class="award-laurel"
1256
- viewBox="0 0 48 64"
1257
- fill="none"
1258
- stroke="currentColor"
1259
- stroke-width="1.5"
1260
- stroke-linecap="round"
1261
- stroke-linejoin="round"
1262
- aria-hidden="true"
1263
- >
1264
- <path d="M40 60 C 14 56, 6 38, 12 16" />
1265
- <path d="M30 56 C 18 50, 14 44, 14 36" />
1266
- <path d="M18 22 C 8 22, 6 14, 12 8" />
1267
- <path d="M20 30 C 8 30, 6 24, 10 18" />
1268
- <path d="M22 38 C 12 38, 8 32, 12 26" />
1269
- <path d="M26 46 C 16 46, 10 40, 14 34" />
1270
- <path d="M30 52 C 22 52, 16 48, 18 42" />
1271
- </svg>
1272
- <span class="award-rating">4.92</span>
1273
- <svg
1274
- class="award-laurel right"
1275
- viewBox="0 0 48 64"
1276
- fill="none"
1277
- stroke="currentColor"
1278
- stroke-width="1.5"
1279
- stroke-linecap="round"
1280
- stroke-linejoin="round"
1281
- aria-hidden="true"
1282
- >
1283
- <path d="M40 60 C 14 56, 6 38, 12 16" />
1284
- <path d="M30 56 C 18 50, 14 44, 14 36" />
1285
- <path d="M18 22 C 8 22, 6 14, 12 8" />
1286
- <path d="M20 30 C 8 30, 6 24, 10 18" />
1287
- <path d="M22 38 C 12 38, 8 32, 12 26" />
1288
- <path d="M26 46 C 16 46, 10 40, 14 34" />
1289
- <path d="M30 52 C 22 52, 16 48, 18 42" />
1290
- </svg>
1291
- </div>
1292
- <p class="award-label">Guest favorite</p>
1293
- <p class="award-sub">
1294
- One of the most loved tokensets on Open Design, according
1295
- to agents who paste it.
1296
- </p>
1297
- </div>
1298
- </section>
1299
-
1300
- <!-- ════════════════════════════════════════════════════════════
1301
- FORM — exercises: .field (text input, focus rings the
1302
- border to Ink Black and adds the 2px outer ring per
1303
- DESIGN.md §4 Text Input), .field-error (Error Red),
1304
- .btn-primary, .btn-secondary, kbd. The right column re-
1305
- uses the .booking-panel pattern as a price summary.
1306
- ═══════════════════════════════════════════════════════════════ -->
1307
- <section data-od-id="form">
1308
- <div class="form-row">
1309
- <div class="stack-4">
1310
- <p class="eyebrow">Form components</p>
1311
- <h2 style="max-width: 24ch">
1312
- Inputs inherit the same tokens.
1313
- </h2>
1314
- <p class="body-muted" style="max-width: 52ch">
1315
- Focus rings, borders, and placeholder color all derive
1316
- from --fg and --border. Submit reuses .btn-primary
1317
- unchanged. No new token introduced for this section —
1318
- if a value here is not in the :root paste above, it
1319
- does not belong in the artifact at all.
1320
- </p>
1321
- <hr class="divider-soft" />
1322
- <p class="body-meta">
1323
- Full reference at <a href="./tokens.css">tokens.css</a>
1324
- · brand at <a href="./DESIGN.md">DESIGN.md</a>.
1325
- </p>
1326
- </div>
1327
-
1328
- <form class="form" onsubmit="event.preventDefault();">
1329
- <div class="field">
1330
- <label for="email">Travel notes email</label>
1331
- <input
1332
- id="email"
1333
- type="email"
1334
- placeholder="you@somewhere.travel"
1335
- autocomplete="email"
1336
- required
1337
- />
1338
- <p class="field-help">
1339
- We'll send a single dispatch a season — never more.
1340
- </p>
1341
- </div>
1342
-
1343
- <div class="field">
1344
- <label for="destination">Where</label>
1345
- <input
1346
- id="destination"
1347
- type="text"
1348
- placeholder="Search destinations"
1349
- autocomplete="off"
1350
- />
1351
- </div>
1352
-
1353
- <div class="field field-error">
1354
- <label for="dates">Dates</label>
1355
- <input
1356
- id="dates"
1357
- type="text"
1358
- placeholder="Add dates"
1359
- aria-invalid="true"
1360
- />
1361
- <p class="field-help">Pick a check-in and check-out before you continue.</p>
1362
- </div>
1363
-
1364
- <div class="row-cluster" style="margin-block-start: var(--space-2)">
1365
- <button type="submit" class="btn btn-primary">Send the dispatch</button>
1366
- <button type="button" class="btn btn-secondary">Skip for now</button>
1367
- </div>
1368
- </form>
1369
- </div>
1370
- </section>
1371
- </main>
1372
- </body>
1373
- </html>