@aexol/spectral 0.7.0 → 0.7.1

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 (459) hide show
  1. package/dist/agent/index.js +76 -301
  2. package/dist/cli.js +11 -0
  3. package/dist/designer/data/systems/agentic/DESIGN.md +71 -0
  4. package/dist/designer/data/systems/agentic/components.html +154 -0
  5. package/dist/designer/data/systems/agentic/tokens.css +63 -0
  6. package/dist/designer/data/systems/airbnb/DESIGN.md +393 -0
  7. package/dist/designer/data/systems/airbnb/components.html +1373 -0
  8. package/dist/designer/data/systems/airbnb/tokens.css +261 -0
  9. package/dist/designer/data/systems/airtable/DESIGN.md +92 -0
  10. package/dist/designer/data/systems/airtable/components.html +489 -0
  11. package/dist/designer/data/systems/airtable/tokens.css +261 -0
  12. package/dist/designer/data/systems/ant/DESIGN.md +71 -0
  13. package/dist/designer/data/systems/ant/components.html +154 -0
  14. package/dist/designer/data/systems/ant/tokens.css +63 -0
  15. package/dist/designer/data/systems/apple/DESIGN.md +250 -0
  16. package/dist/designer/data/systems/apple/components.html +749 -0
  17. package/dist/designer/data/systems/apple/tokens.css +286 -0
  18. package/dist/designer/data/systems/application/DESIGN.md +71 -0
  19. package/dist/designer/data/systems/application/components.html +154 -0
  20. package/dist/designer/data/systems/application/tokens.css +63 -0
  21. package/dist/designer/data/systems/arc/DESIGN.md +152 -0
  22. package/dist/designer/data/systems/arc/components.html +432 -0
  23. package/dist/designer/data/systems/arc/tokens.css +137 -0
  24. package/dist/designer/data/systems/artistic/DESIGN.md +71 -0
  25. package/dist/designer/data/systems/artistic/components.html +136 -0
  26. package/dist/designer/data/systems/artistic/tokens.css +63 -0
  27. package/dist/designer/data/systems/atelier-zero/DESIGN.md +316 -0
  28. package/dist/designer/data/systems/atelier-zero/components.html +136 -0
  29. package/dist/designer/data/systems/atelier-zero/tokens.css +63 -0
  30. package/dist/designer/data/systems/bento/DESIGN.md +71 -0
  31. package/dist/designer/data/systems/bento/components.html +136 -0
  32. package/dist/designer/data/systems/bento/tokens.css +63 -0
  33. package/dist/designer/data/systems/binance/DESIGN.md +348 -0
  34. package/dist/designer/data/systems/binance/components.html +550 -0
  35. package/dist/designer/data/systems/binance/tokens.css +255 -0
  36. package/dist/designer/data/systems/bmw/DESIGN.md +183 -0
  37. package/dist/designer/data/systems/bmw/components.html +551 -0
  38. package/dist/designer/data/systems/bmw/tokens.css +179 -0
  39. package/dist/designer/data/systems/bmw-m/DESIGN.md +246 -0
  40. package/dist/designer/data/systems/bmw-m/components.html +342 -0
  41. package/dist/designer/data/systems/bmw-m/tokens.css +64 -0
  42. package/dist/designer/data/systems/bold/DESIGN.md +71 -0
  43. package/dist/designer/data/systems/bold/components.html +136 -0
  44. package/dist/designer/data/systems/bold/tokens.css +63 -0
  45. package/dist/designer/data/systems/brutalism/DESIGN.md +71 -0
  46. package/dist/designer/data/systems/brutalism/components.html +154 -0
  47. package/dist/designer/data/systems/brutalism/tokens.css +63 -0
  48. package/dist/designer/data/systems/bugatti/DESIGN.md +271 -0
  49. package/dist/designer/data/systems/bugatti/components.html +342 -0
  50. package/dist/designer/data/systems/bugatti/tokens.css +64 -0
  51. package/dist/designer/data/systems/cafe/DESIGN.md +71 -0
  52. package/dist/designer/data/systems/cafe/components.html +136 -0
  53. package/dist/designer/data/systems/cafe/tokens.css +63 -0
  54. package/dist/designer/data/systems/cal/DESIGN.md +262 -0
  55. package/dist/designer/data/systems/cal/components.html +376 -0
  56. package/dist/designer/data/systems/cal/tokens.css +265 -0
  57. package/dist/designer/data/systems/canva/DESIGN.md +157 -0
  58. package/dist/designer/data/systems/canva/components.html +461 -0
  59. package/dist/designer/data/systems/canva/tokens.css +147 -0
  60. package/dist/designer/data/systems/cisco/DESIGN.md +201 -0
  61. package/dist/designer/data/systems/cisco/components.html +342 -0
  62. package/dist/designer/data/systems/cisco/tokens.css +64 -0
  63. package/dist/designer/data/systems/claude/DESIGN.md +315 -0
  64. package/dist/designer/data/systems/claude/components.html +483 -0
  65. package/dist/designer/data/systems/claude/tokens.css +130 -0
  66. package/dist/designer/data/systems/clay/DESIGN.md +307 -0
  67. package/dist/designer/data/systems/clay/components.html +136 -0
  68. package/dist/designer/data/systems/clay/tokens.css +63 -0
  69. package/dist/designer/data/systems/claymorphism/DESIGN.md +71 -0
  70. package/dist/designer/data/systems/claymorphism/components.html +136 -0
  71. package/dist/designer/data/systems/claymorphism/tokens.css +63 -0
  72. package/dist/designer/data/systems/clean/DESIGN.md +71 -0
  73. package/dist/designer/data/systems/clean/components.html +136 -0
  74. package/dist/designer/data/systems/clean/tokens.css +63 -0
  75. package/dist/designer/data/systems/clickhouse/DESIGN.md +284 -0
  76. package/dist/designer/data/systems/clickhouse/components.html +506 -0
  77. package/dist/designer/data/systems/clickhouse/tokens.css +135 -0
  78. package/dist/designer/data/systems/cohere/DESIGN.md +269 -0
  79. package/dist/designer/data/systems/cohere/components.html +353 -0
  80. package/dist/designer/data/systems/cohere/tokens.css +126 -0
  81. package/dist/designer/data/systems/coinbase/DESIGN.md +132 -0
  82. package/dist/designer/data/systems/coinbase/components.html +501 -0
  83. package/dist/designer/data/systems/coinbase/tokens.css +257 -0
  84. package/dist/designer/data/systems/colorful/DESIGN.md +71 -0
  85. package/dist/designer/data/systems/colorful/components.html +136 -0
  86. package/dist/designer/data/systems/colorful/tokens.css +63 -0
  87. package/dist/designer/data/systems/composio/DESIGN.md +310 -0
  88. package/dist/designer/data/systems/composio/components.html +342 -0
  89. package/dist/designer/data/systems/composio/tokens.css +64 -0
  90. package/dist/designer/data/systems/contemporary/DESIGN.md +71 -0
  91. package/dist/designer/data/systems/contemporary/components.html +136 -0
  92. package/dist/designer/data/systems/contemporary/tokens.css +63 -0
  93. package/dist/designer/data/systems/corporate/DESIGN.md +71 -0
  94. package/dist/designer/data/systems/corporate/components.html +136 -0
  95. package/dist/designer/data/systems/corporate/tokens.css +63 -0
  96. package/dist/designer/data/systems/cosmic/DESIGN.md +71 -0
  97. package/dist/designer/data/systems/cosmic/components.html +136 -0
  98. package/dist/designer/data/systems/cosmic/tokens.css +63 -0
  99. package/dist/designer/data/systems/creative/DESIGN.md +71 -0
  100. package/dist/designer/data/systems/creative/components.html +136 -0
  101. package/dist/designer/data/systems/creative/tokens.css +63 -0
  102. package/dist/designer/data/systems/cursor/DESIGN.md +312 -0
  103. package/dist/designer/data/systems/cursor/components.html +654 -0
  104. package/dist/designer/data/systems/cursor/tokens.css +218 -0
  105. package/dist/designer/data/systems/dashboard/DESIGN.md +71 -0
  106. package/dist/designer/data/systems/dashboard/components.html +154 -0
  107. package/dist/designer/data/systems/dashboard/tokens.css +63 -0
  108. package/dist/designer/data/systems/default/DESIGN.md +62 -0
  109. package/dist/designer/data/systems/default/components.html +523 -0
  110. package/dist/designer/data/systems/default/tokens.css +200 -0
  111. package/dist/designer/data/systems/discord/DESIGN.md +162 -0
  112. package/dist/designer/data/systems/discord/components.html +359 -0
  113. package/dist/designer/data/systems/discord/tokens.css +125 -0
  114. package/dist/designer/data/systems/dithered/DESIGN.md +71 -0
  115. package/dist/designer/data/systems/dithered/components.html +136 -0
  116. package/dist/designer/data/systems/dithered/tokens.css +63 -0
  117. package/dist/designer/data/systems/doodle/DESIGN.md +71 -0
  118. package/dist/designer/data/systems/doodle/components.html +136 -0
  119. package/dist/designer/data/systems/doodle/tokens.css +63 -0
  120. package/dist/designer/data/systems/dramatic/DESIGN.md +71 -0
  121. package/dist/designer/data/systems/dramatic/components.html +136 -0
  122. package/dist/designer/data/systems/dramatic/tokens.css +63 -0
  123. package/dist/designer/data/systems/duolingo/DESIGN.md +154 -0
  124. package/dist/designer/data/systems/duolingo/components.html +532 -0
  125. package/dist/designer/data/systems/duolingo/tokens.css +130 -0
  126. package/dist/designer/data/systems/editorial/DESIGN.md +71 -0
  127. package/dist/designer/data/systems/editorial/components.html +154 -0
  128. package/dist/designer/data/systems/editorial/tokens.css +63 -0
  129. package/dist/designer/data/systems/elegant/DESIGN.md +71 -0
  130. package/dist/designer/data/systems/elegant/components.html +136 -0
  131. package/dist/designer/data/systems/elegant/tokens.css +63 -0
  132. package/dist/designer/data/systems/elevenlabs/DESIGN.md +268 -0
  133. package/dist/designer/data/systems/elevenlabs/components.html +342 -0
  134. package/dist/designer/data/systems/elevenlabs/tokens.css +127 -0
  135. package/dist/designer/data/systems/energetic/DESIGN.md +72 -0
  136. package/dist/designer/data/systems/energetic/components.html +136 -0
  137. package/dist/designer/data/systems/energetic/tokens.css +63 -0
  138. package/dist/designer/data/systems/enterprise/DESIGN.md +71 -0
  139. package/dist/designer/data/systems/enterprise/components.html +154 -0
  140. package/dist/designer/data/systems/enterprise/tokens.css +63 -0
  141. package/dist/designer/data/systems/expo/DESIGN.md +284 -0
  142. package/dist/designer/data/systems/expo/components.html +342 -0
  143. package/dist/designer/data/systems/expo/tokens.css +64 -0
  144. package/dist/designer/data/systems/expressive/DESIGN.md +71 -0
  145. package/dist/designer/data/systems/expressive/components.html +136 -0
  146. package/dist/designer/data/systems/expressive/tokens.css +63 -0
  147. package/dist/designer/data/systems/fantasy/DESIGN.md +71 -0
  148. package/dist/designer/data/systems/fantasy/components.html +136 -0
  149. package/dist/designer/data/systems/fantasy/tokens.css +63 -0
  150. package/dist/designer/data/systems/ferrari/DESIGN.md +317 -0
  151. package/dist/designer/data/systems/ferrari/components.html +342 -0
  152. package/dist/designer/data/systems/ferrari/tokens.css +64 -0
  153. package/dist/designer/data/systems/figma/DESIGN.md +223 -0
  154. package/dist/designer/data/systems/figma/components.html +344 -0
  155. package/dist/designer/data/systems/figma/tokens.css +126 -0
  156. package/dist/designer/data/systems/flat/DESIGN.md +71 -0
  157. package/dist/designer/data/systems/flat/components.html +136 -0
  158. package/dist/designer/data/systems/flat/tokens.css +63 -0
  159. package/dist/designer/data/systems/framer/DESIGN.md +249 -0
  160. package/dist/designer/data/systems/framer/components.html +438 -0
  161. package/dist/designer/data/systems/framer/tokens.css +238 -0
  162. package/dist/designer/data/systems/friendly/DESIGN.md +71 -0
  163. package/dist/designer/data/systems/friendly/components.html +136 -0
  164. package/dist/designer/data/systems/friendly/tokens.css +63 -0
  165. package/dist/designer/data/systems/futuristic/DESIGN.md +71 -0
  166. package/dist/designer/data/systems/futuristic/components.html +136 -0
  167. package/dist/designer/data/systems/futuristic/tokens.css +63 -0
  168. package/dist/designer/data/systems/github/DESIGN.md +155 -0
  169. package/dist/designer/data/systems/github/components.html +383 -0
  170. package/dist/designer/data/systems/github/tokens.css +125 -0
  171. package/dist/designer/data/systems/glassmorphism/DESIGN.md +71 -0
  172. package/dist/designer/data/systems/glassmorphism/components.html +154 -0
  173. package/dist/designer/data/systems/glassmorphism/tokens.css +63 -0
  174. package/dist/designer/data/systems/gradient/DESIGN.md +71 -0
  175. package/dist/designer/data/systems/gradient/components.html +154 -0
  176. package/dist/designer/data/systems/gradient/tokens.css +63 -0
  177. package/dist/designer/data/systems/hashicorp/DESIGN.md +281 -0
  178. package/dist/designer/data/systems/hashicorp/components.html +502 -0
  179. package/dist/designer/data/systems/hashicorp/tokens.css +272 -0
  180. package/dist/designer/data/systems/hud/DESIGN.md +173 -0
  181. package/dist/designer/data/systems/hud/components.html +136 -0
  182. package/dist/designer/data/systems/hud/tokens.css +63 -0
  183. package/dist/designer/data/systems/huggingface/DESIGN.md +149 -0
  184. package/dist/designer/data/systems/huggingface/components.html +346 -0
  185. package/dist/designer/data/systems/huggingface/tokens.css +125 -0
  186. package/dist/designer/data/systems/ibm/DESIGN.md +335 -0
  187. package/dist/designer/data/systems/ibm/components.html +342 -0
  188. package/dist/designer/data/systems/ibm/tokens.css +64 -0
  189. package/dist/designer/data/systems/intercom/DESIGN.md +149 -0
  190. package/dist/designer/data/systems/intercom/components.html +557 -0
  191. package/dist/designer/data/systems/intercom/tokens.css +150 -0
  192. package/dist/designer/data/systems/kami/DESIGN.md +410 -0
  193. package/dist/designer/data/systems/kami/components.html +601 -0
  194. package/dist/designer/data/systems/kami/tokens.css +272 -0
  195. package/dist/designer/data/systems/kraken/DESIGN.md +128 -0
  196. package/dist/designer/data/systems/kraken/components.html +342 -0
  197. package/dist/designer/data/systems/kraken/tokens.css +64 -0
  198. package/dist/designer/data/systems/lamborghini/DESIGN.md +291 -0
  199. package/dist/designer/data/systems/lamborghini/components.html +342 -0
  200. package/dist/designer/data/systems/lamborghini/tokens.css +64 -0
  201. package/dist/designer/data/systems/levels/DESIGN.md +71 -0
  202. package/dist/designer/data/systems/levels/components.html +154 -0
  203. package/dist/designer/data/systems/levels/tokens.css +63 -0
  204. package/dist/designer/data/systems/linear-app/DESIGN.md +370 -0
  205. package/dist/designer/data/systems/linear-app/components.html +370 -0
  206. package/dist/designer/data/systems/linear-app/tokens.css +130 -0
  207. package/dist/designer/data/systems/lingo/DESIGN.md +71 -0
  208. package/dist/designer/data/systems/lingo/components.html +154 -0
  209. package/dist/designer/data/systems/lingo/tokens.css +63 -0
  210. package/dist/designer/data/systems/loom/DESIGN.md +201 -0
  211. package/dist/designer/data/systems/loom/components.html +446 -0
  212. package/dist/designer/data/systems/loom/tokens.css +138 -0
  213. package/dist/designer/data/systems/lovable/DESIGN.md +301 -0
  214. package/dist/designer/data/systems/lovable/components.html +441 -0
  215. package/dist/designer/data/systems/lovable/tokens.css +258 -0
  216. package/dist/designer/data/systems/luxury/DESIGN.md +71 -0
  217. package/dist/designer/data/systems/luxury/components.html +154 -0
  218. package/dist/designer/data/systems/luxury/tokens.css +63 -0
  219. package/dist/designer/data/systems/mastercard/DESIGN.md +368 -0
  220. package/dist/designer/data/systems/mastercard/components.html +342 -0
  221. package/dist/designer/data/systems/mastercard/tokens.css +64 -0
  222. package/dist/designer/data/systems/material/DESIGN.md +71 -0
  223. package/dist/designer/data/systems/material/components.html +154 -0
  224. package/dist/designer/data/systems/material/tokens.css +63 -0
  225. package/dist/designer/data/systems/meta/DESIGN.md +369 -0
  226. package/dist/designer/data/systems/meta/components.html +398 -0
  227. package/dist/designer/data/systems/meta/tokens.css +263 -0
  228. package/dist/designer/data/systems/minimal/DESIGN.md +71 -0
  229. package/dist/designer/data/systems/minimal/components.html +154 -0
  230. package/dist/designer/data/systems/minimal/tokens.css +63 -0
  231. package/dist/designer/data/systems/minimax/DESIGN.md +260 -0
  232. package/dist/designer/data/systems/minimax/components.html +590 -0
  233. package/dist/designer/data/systems/minimax/tokens.css +148 -0
  234. package/dist/designer/data/systems/mintlify/DESIGN.md +329 -0
  235. package/dist/designer/data/systems/mintlify/components.html +737 -0
  236. package/dist/designer/data/systems/mintlify/tokens.css +256 -0
  237. package/dist/designer/data/systems/miro/DESIGN.md +111 -0
  238. package/dist/designer/data/systems/miro/components.html +342 -0
  239. package/dist/designer/data/systems/miro/tokens.css +64 -0
  240. package/dist/designer/data/systems/mission-control/DESIGN.md +474 -0
  241. package/dist/designer/data/systems/mission-control/components.html +136 -0
  242. package/dist/designer/data/systems/mission-control/tokens.css +63 -0
  243. package/dist/designer/data/systems/mistral-ai/DESIGN.md +264 -0
  244. package/dist/designer/data/systems/mistral-ai/components.html +338 -0
  245. package/dist/designer/data/systems/mistral-ai/tokens.css +125 -0
  246. package/dist/designer/data/systems/modern/DESIGN.md +71 -0
  247. package/dist/designer/data/systems/modern/components.html +154 -0
  248. package/dist/designer/data/systems/modern/tokens.css +63 -0
  249. package/dist/designer/data/systems/mongodb/DESIGN.md +269 -0
  250. package/dist/designer/data/systems/mongodb/components.html +462 -0
  251. package/dist/designer/data/systems/mongodb/tokens.css +176 -0
  252. package/dist/designer/data/systems/mono/DESIGN.md +71 -0
  253. package/dist/designer/data/systems/mono/components.html +136 -0
  254. package/dist/designer/data/systems/mono/tokens.css +63 -0
  255. package/dist/designer/data/systems/neobrutalism/DESIGN.md +71 -0
  256. package/dist/designer/data/systems/neobrutalism/components.html +136 -0
  257. package/dist/designer/data/systems/neobrutalism/tokens.css +63 -0
  258. package/dist/designer/data/systems/neon/DESIGN.md +71 -0
  259. package/dist/designer/data/systems/neon/components.html +136 -0
  260. package/dist/designer/data/systems/neon/tokens.css +63 -0
  261. package/dist/designer/data/systems/neumorphism/DESIGN.md +71 -0
  262. package/dist/designer/data/systems/neumorphism/components.html +136 -0
  263. package/dist/designer/data/systems/neumorphism/tokens.css +63 -0
  264. package/dist/designer/data/systems/nike/DESIGN.md +366 -0
  265. package/dist/designer/data/systems/nike/components.html +512 -0
  266. package/dist/designer/data/systems/nike/tokens.css +304 -0
  267. package/dist/designer/data/systems/notion/DESIGN.md +312 -0
  268. package/dist/designer/data/systems/notion/components.html +413 -0
  269. package/dist/designer/data/systems/notion/tokens.css +130 -0
  270. package/dist/designer/data/systems/nvidia/DESIGN.md +296 -0
  271. package/dist/designer/data/systems/nvidia/components.html +414 -0
  272. package/dist/designer/data/systems/nvidia/tokens.css +133 -0
  273. package/dist/designer/data/systems/ollama/DESIGN.md +270 -0
  274. package/dist/designer/data/systems/ollama/components.html +700 -0
  275. package/dist/designer/data/systems/ollama/tokens.css +242 -0
  276. package/dist/designer/data/systems/openai/DESIGN.md +140 -0
  277. package/dist/designer/data/systems/openai/components.html +382 -0
  278. package/dist/designer/data/systems/openai/tokens.css +133 -0
  279. package/dist/designer/data/systems/opencode-ai/DESIGN.md +284 -0
  280. package/dist/designer/data/systems/opencode-ai/components.html +389 -0
  281. package/dist/designer/data/systems/opencode-ai/tokens.css +126 -0
  282. package/dist/designer/data/systems/pacman/DESIGN.md +71 -0
  283. package/dist/designer/data/systems/pacman/components.html +342 -0
  284. package/dist/designer/data/systems/pacman/tokens.css +64 -0
  285. package/dist/designer/data/systems/paper/DESIGN.md +71 -0
  286. package/dist/designer/data/systems/paper/components.html +136 -0
  287. package/dist/designer/data/systems/paper/tokens.css +63 -0
  288. package/dist/designer/data/systems/perplexity/DESIGN.md +286 -0
  289. package/dist/designer/data/systems/perplexity/components.html +455 -0
  290. package/dist/designer/data/systems/perplexity/tokens.css +151 -0
  291. package/dist/designer/data/systems/perspective/DESIGN.md +71 -0
  292. package/dist/designer/data/systems/perspective/components.html +136 -0
  293. package/dist/designer/data/systems/perspective/tokens.css +63 -0
  294. package/dist/designer/data/systems/pinterest/DESIGN.md +233 -0
  295. package/dist/designer/data/systems/pinterest/components.html +865 -0
  296. package/dist/designer/data/systems/pinterest/tokens.css +262 -0
  297. package/dist/designer/data/systems/playstation/DESIGN.md +367 -0
  298. package/dist/designer/data/systems/playstation/components.html +414 -0
  299. package/dist/designer/data/systems/playstation/tokens.css +150 -0
  300. package/dist/designer/data/systems/posthog/DESIGN.md +259 -0
  301. package/dist/designer/data/systems/posthog/components.html +827 -0
  302. package/dist/designer/data/systems/posthog/tokens.css +272 -0
  303. package/dist/designer/data/systems/premium/DESIGN.md +71 -0
  304. package/dist/designer/data/systems/premium/components.html +154 -0
  305. package/dist/designer/data/systems/premium/tokens.css +63 -0
  306. package/dist/designer/data/systems/professional/DESIGN.md +71 -0
  307. package/dist/designer/data/systems/professional/components.html +136 -0
  308. package/dist/designer/data/systems/professional/tokens.css +63 -0
  309. package/dist/designer/data/systems/publication/DESIGN.md +71 -0
  310. package/dist/designer/data/systems/publication/components.html +154 -0
  311. package/dist/designer/data/systems/publication/tokens.css +63 -0
  312. package/dist/designer/data/systems/raycast/DESIGN.md +271 -0
  313. package/dist/designer/data/systems/raycast/components.html +507 -0
  314. package/dist/designer/data/systems/raycast/tokens.css +143 -0
  315. package/dist/designer/data/systems/refined/DESIGN.md +71 -0
  316. package/dist/designer/data/systems/refined/components.html +136 -0
  317. package/dist/designer/data/systems/refined/tokens.css +63 -0
  318. package/dist/designer/data/systems/renault/DESIGN.md +314 -0
  319. package/dist/designer/data/systems/renault/components.html +154 -0
  320. package/dist/designer/data/systems/renault/tokens.css +63 -0
  321. package/dist/designer/data/systems/replicate/DESIGN.md +264 -0
  322. package/dist/designer/data/systems/replicate/components.html +340 -0
  323. package/dist/designer/data/systems/replicate/tokens.css +125 -0
  324. package/dist/designer/data/systems/resend/DESIGN.md +306 -0
  325. package/dist/designer/data/systems/resend/components.html +839 -0
  326. package/dist/designer/data/systems/resend/tokens.css +353 -0
  327. package/dist/designer/data/systems/retro/DESIGN.md +71 -0
  328. package/dist/designer/data/systems/retro/components.html +136 -0
  329. package/dist/designer/data/systems/retro/tokens.css +63 -0
  330. package/dist/designer/data/systems/revolut/DESIGN.md +188 -0
  331. package/dist/designer/data/systems/revolut/components.html +342 -0
  332. package/dist/designer/data/systems/revolut/tokens.css +64 -0
  333. package/dist/designer/data/systems/runwayml/DESIGN.md +247 -0
  334. package/dist/designer/data/systems/runwayml/components.html +638 -0
  335. package/dist/designer/data/systems/runwayml/tokens.css +204 -0
  336. package/dist/designer/data/systems/sanity/DESIGN.md +360 -0
  337. package/dist/designer/data/systems/sanity/components.html +342 -0
  338. package/dist/designer/data/systems/sanity/tokens.css +64 -0
  339. package/dist/designer/data/systems/sentry/DESIGN.md +265 -0
  340. package/dist/designer/data/systems/sentry/components.html +387 -0
  341. package/dist/designer/data/systems/sentry/tokens.css +219 -0
  342. package/dist/designer/data/systems/shadcn/DESIGN.md +71 -0
  343. package/dist/designer/data/systems/shadcn/components.html +732 -0
  344. package/dist/designer/data/systems/shadcn/tokens.css +255 -0
  345. package/dist/designer/data/systems/shopify/DESIGN.md +353 -0
  346. package/dist/designer/data/systems/shopify/components.html +342 -0
  347. package/dist/designer/data/systems/shopify/tokens.css +141 -0
  348. package/dist/designer/data/systems/simple/DESIGN.md +71 -0
  349. package/dist/designer/data/systems/simple/components.html +136 -0
  350. package/dist/designer/data/systems/simple/tokens.css +63 -0
  351. package/dist/designer/data/systems/skeumorphism/DESIGN.md +71 -0
  352. package/dist/designer/data/systems/skeumorphism/components.html +136 -0
  353. package/dist/designer/data/systems/skeumorphism/tokens.css +63 -0
  354. package/dist/designer/data/systems/slack/DESIGN.md +363 -0
  355. package/dist/designer/data/systems/slack/components.html +387 -0
  356. package/dist/designer/data/systems/slack/tokens.css +127 -0
  357. package/dist/designer/data/systems/sleek/DESIGN.md +71 -0
  358. package/dist/designer/data/systems/sleek/components.html +136 -0
  359. package/dist/designer/data/systems/sleek/tokens.css +63 -0
  360. package/dist/designer/data/systems/spacex/DESIGN.md +197 -0
  361. package/dist/designer/data/systems/spacex/components.html +496 -0
  362. package/dist/designer/data/systems/spacex/tokens.css +154 -0
  363. package/dist/designer/data/systems/spacious/DESIGN.md +71 -0
  364. package/dist/designer/data/systems/spacious/components.html +136 -0
  365. package/dist/designer/data/systems/spacious/tokens.css +63 -0
  366. package/dist/designer/data/systems/spotify/DESIGN.md +249 -0
  367. package/dist/designer/data/systems/spotify/components.html +365 -0
  368. package/dist/designer/data/systems/spotify/tokens.css +127 -0
  369. package/dist/designer/data/systems/starbucks/DESIGN.md +583 -0
  370. package/dist/designer/data/systems/starbucks/components.html +493 -0
  371. package/dist/designer/data/systems/starbucks/tokens.css +182 -0
  372. package/dist/designer/data/systems/storytelling/DESIGN.md +71 -0
  373. package/dist/designer/data/systems/storytelling/components.html +136 -0
  374. package/dist/designer/data/systems/storytelling/tokens.css +63 -0
  375. package/dist/designer/data/systems/stripe/DESIGN.md +325 -0
  376. package/dist/designer/data/systems/stripe/components.html +1018 -0
  377. package/dist/designer/data/systems/stripe/tokens.css +295 -0
  378. package/dist/designer/data/systems/supabase/DESIGN.md +258 -0
  379. package/dist/designer/data/systems/supabase/components.html +741 -0
  380. package/dist/designer/data/systems/supabase/tokens.css +294 -0
  381. package/dist/designer/data/systems/superhuman/DESIGN.md +255 -0
  382. package/dist/designer/data/systems/superhuman/components.html +537 -0
  383. package/dist/designer/data/systems/superhuman/tokens.css +160 -0
  384. package/dist/designer/data/systems/tesla/DESIGN.md +289 -0
  385. package/dist/designer/data/systems/tesla/components.html +724 -0
  386. package/dist/designer/data/systems/tesla/tokens.css +285 -0
  387. package/dist/designer/data/systems/tetris/DESIGN.md +71 -0
  388. package/dist/designer/data/systems/tetris/components.html +342 -0
  389. package/dist/designer/data/systems/tetris/tokens.css +64 -0
  390. package/dist/designer/data/systems/theverge/DESIGN.md +342 -0
  391. package/dist/designer/data/systems/theverge/components.html +342 -0
  392. package/dist/designer/data/systems/theverge/tokens.css +64 -0
  393. package/dist/designer/data/systems/together-ai/DESIGN.md +266 -0
  394. package/dist/designer/data/systems/together-ai/components.html +422 -0
  395. package/dist/designer/data/systems/together-ai/tokens.css +127 -0
  396. package/dist/designer/data/systems/totality-festival/DESIGN.md +206 -0
  397. package/dist/designer/data/systems/totality-festival/components.html +136 -0
  398. package/dist/designer/data/systems/totality-festival/tokens.css +63 -0
  399. package/dist/designer/data/systems/trading-terminal/DESIGN.md +178 -0
  400. package/dist/designer/data/systems/trading-terminal/components.html +154 -0
  401. package/dist/designer/data/systems/trading-terminal/tokens.css +63 -0
  402. package/dist/designer/data/systems/uber/DESIGN.md +298 -0
  403. package/dist/designer/data/systems/uber/components.html +347 -0
  404. package/dist/designer/data/systems/uber/tokens.css +131 -0
  405. package/dist/designer/data/systems/urdu/DESIGN.md +1002 -0
  406. package/dist/designer/data/systems/urdu/components.html +136 -0
  407. package/dist/designer/data/systems/urdu/tokens.css +63 -0
  408. package/dist/designer/data/systems/vercel/DESIGN.md +313 -0
  409. package/dist/designer/data/systems/vercel/components.html +839 -0
  410. package/dist/designer/data/systems/vercel/tokens.css +270 -0
  411. package/dist/designer/data/systems/vibrant/DESIGN.md +71 -0
  412. package/dist/designer/data/systems/vibrant/components.html +136 -0
  413. package/dist/designer/data/systems/vibrant/tokens.css +63 -0
  414. package/dist/designer/data/systems/vintage/DESIGN.md +71 -0
  415. package/dist/designer/data/systems/vintage/components.html +136 -0
  416. package/dist/designer/data/systems/vintage/tokens.css +63 -0
  417. package/dist/designer/data/systems/vodafone/DESIGN.md +426 -0
  418. package/dist/designer/data/systems/vodafone/components.html +342 -0
  419. package/dist/designer/data/systems/vodafone/tokens.css +64 -0
  420. package/dist/designer/data/systems/voltagent/DESIGN.md +326 -0
  421. package/dist/designer/data/systems/voltagent/components.html +154 -0
  422. package/dist/designer/data/systems/voltagent/tokens.css +63 -0
  423. package/dist/designer/data/systems/warm-editorial/DESIGN.md +65 -0
  424. package/dist/designer/data/systems/warm-editorial/components.html +136 -0
  425. package/dist/designer/data/systems/warm-editorial/tokens.css +63 -0
  426. package/dist/designer/data/systems/warp/DESIGN.md +256 -0
  427. package/dist/designer/data/systems/warp/components.html +411 -0
  428. package/dist/designer/data/systems/warp/tokens.css +156 -0
  429. package/dist/designer/data/systems/webex/DESIGN.md +207 -0
  430. package/dist/designer/data/systems/webex/components.html +342 -0
  431. package/dist/designer/data/systems/webex/tokens.css +64 -0
  432. package/dist/designer/data/systems/webflow/DESIGN.md +95 -0
  433. package/dist/designer/data/systems/webflow/components.html +413 -0
  434. package/dist/designer/data/systems/webflow/tokens.css +191 -0
  435. package/dist/designer/data/systems/wechat/DESIGN.md +302 -0
  436. package/dist/designer/data/systems/wechat/components.html +507 -0
  437. package/dist/designer/data/systems/wechat/tokens.css +176 -0
  438. package/dist/designer/data/systems/wired/DESIGN.md +281 -0
  439. package/dist/designer/data/systems/wired/components.html +342 -0
  440. package/dist/designer/data/systems/wired/tokens.css +64 -0
  441. package/dist/designer/data/systems/wise/DESIGN.md +176 -0
  442. package/dist/designer/data/systems/wise/components.html +365 -0
  443. package/dist/designer/data/systems/wise/tokens.css +141 -0
  444. package/dist/designer/data/systems/x-ai/DESIGN.md +260 -0
  445. package/dist/designer/data/systems/x-ai/components.html +460 -0
  446. package/dist/designer/data/systems/x-ai/tokens.css +268 -0
  447. package/dist/designer/data/systems/xiaohongshu/DESIGN.md +402 -0
  448. package/dist/designer/data/systems/xiaohongshu/components.html +865 -0
  449. package/dist/designer/data/systems/xiaohongshu/tokens.css +193 -0
  450. package/dist/designer/data/systems/zapier/DESIGN.md +331 -0
  451. package/dist/designer/data/systems/zapier/components.html +342 -0
  452. package/dist/designer/data/systems/zapier/tokens.css +64 -0
  453. package/dist/designer/guidelines.js +176 -0
  454. package/dist/designer/index.js +236 -0
  455. package/dist/designer/skills.js +1675 -0
  456. package/dist/designer/systems.js +216 -0
  457. package/dist/server/pi-bridge.js +155 -5
  458. package/dist/server/session-stream.js +45 -1
  459. package/package.json +1 -1
package/dist/designer/data/systems/airbnb/components.html ADDED
@@ -0,0 +1,1373 @@
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>