@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/xiaohongshu/components.html ADDED
@@ -0,0 +1,865 @@
1
+ <!doctype html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>小红书 / Xiaohongshu — reference components</title>
7
+ <meta
8
+ name="description"
9
+ content="Reference fixture for design-systems/xiaohongshu. Every visible
10
+ value comes from tokens.css. 小红书 / RED signature moves: grey
11
+ canvas + white card masonry, PingFang SC throughout, brand red
12
+ used exactly once per screen as accent, full-pill CTAs, soft
13
+ black text (rgba 0,0,0,.8), no shadow until hover."
14
+ />
15
+
16
+ <style>
17
+ :root {
18
+ --bg: #f5f5f5;
19
+ --surface: #ffffff;
20
+ --surface-warm: #fafafa;
21
+
22
+ --fg: rgba(0, 0, 0, 0.8);
23
+ --fg-2: rgba(0, 0, 0, 0.62);
24
+ --muted: rgba(0, 0, 0, 0.45);
25
+ --meta: rgba(0, 0, 0, 0.27);
26
+
27
+ --border: rgba(0, 0, 0, 0.08);
28
+ --border-soft: rgba(0, 0, 0, 0.05);
29
+
30
+ --accent: #ff2442;
31
+ --accent-on: #ffffff;
32
+ --accent-hover: #ff2e4d;
33
+ --accent-active: #e6203a;
34
+
35
+ --success: #02b940;
36
+ --warn: #ff7d03;
37
+ --danger: #ff2442;
38
+
39
+ --font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
40
+ --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
41
+ --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
42
+
43
+ --text-xs: 12px;
44
+ --text-sm: 14px;
45
+ --text-base: 16px;
46
+ --text-lg: 18px;
47
+ --text-xl: 20px;
48
+ --text-2xl: 24px;
49
+ --text-3xl: 28px;
50
+ --text-4xl: 32px;
51
+
52
+ --leading-body: 1.5;
53
+ --leading-tight: 1.25;
54
+ --tracking-display: 0;
55
+
56
+ --space-1: 4px;
57
+ --space-2: 8px;
58
+ --space-3: 12px;
59
+ --space-4: 16px;
60
+ --space-5: 20px;
61
+ --space-6: 24px;
62
+ --space-8: 32px;
63
+ --space-12: 48px;
64
+
65
+ --section-y-desktop: 64px;
66
+ --section-y-tablet: 48px;
67
+ --section-y-phone: 32px;
68
+
69
+ --radius-sm: 8px;
70
+ --radius-md: 12px;
71
+ --radius-lg: 16px;
72
+ --radius-pill: 9999px;
73
+
74
+ --elev-flat: none;
75
+ --elev-ring: 0 0 0 1px var(--border);
76
+ --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
77
+
78
+ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
79
+
80
+ --motion-fast: 150ms;
81
+ --motion-base: 200ms;
82
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
83
+
84
+ --container-max: 1200px;
85
+ --container-gutter-desktop: 24px;
86
+ --container-gutter-tablet: 16px;
87
+ --container-gutter-phone: 12px;
88
+ }
89
+
90
+ /* ─── Reset ─────────────────────────────────────────────── */
91
+ *, *::before, *::after { box-sizing: border-box; }
92
+ html, body { margin: 0; padding: 0; }
93
+ body {
94
+ background: var(--bg);
95
+ color: var(--fg);
96
+ font-family: var(--font-body);
97
+ font-size: var(--text-base);
98
+ line-height: var(--leading-body);
99
+ -webkit-font-smoothing: antialiased;
100
+ -moz-osx-font-smoothing: grayscale;
101
+ }
102
+
103
+ /* ─── Layout primitives ─────────────────────────────────── */
104
+ .container {
105
+ max-width: var(--container-max);
106
+ margin-inline: auto;
107
+ padding-inline: var(--container-gutter-desktop);
108
+ }
109
+ section { padding-block: var(--section-y-desktop); }
110
+ section + section { border-top: 1px solid var(--border-soft); }
111
+ @media (max-width: 1023px) {
112
+ .container { padding-inline: var(--container-gutter-tablet); }
113
+ section { padding-block: var(--section-y-tablet); }
114
+ }
115
+ @media (max-width: 639px) {
116
+ .container { padding-inline: var(--container-gutter-phone); }
117
+ section { padding-block: var(--section-y-phone); }
118
+ }
119
+
120
+ /* ─── Typography — PingFang SC throughout, tracking 0 ───── */
121
+ h1, h2, h3 {
122
+ margin: 0;
123
+ color: var(--fg);
124
+ font-family: var(--font-display);
125
+ line-height: var(--leading-tight);
126
+ letter-spacing: var(--tracking-display);
127
+ }
128
+ h1 { font-size: var(--text-4xl); font-weight: 600; }
129
+ h2 { font-size: var(--text-2xl); font-weight: 600; }
130
+ h3 { font-size: var(--text-xl); font-weight: 600; }
131
+ p { margin: 0; }
132
+ .lead {
133
+ font-size: var(--text-lg);
134
+ color: var(--fg-2);
135
+ line-height: var(--leading-body);
136
+ font-weight: 400;
137
+ }
138
+ .body-muted { color: var(--fg-2); }
139
+ .body-sm { font-size: var(--text-sm); }
140
+ /* Eyebrow stays sentence-case (not uppercase) — Chinese voice */
141
+ .eyebrow {
142
+ font-size: var(--text-xs);
143
+ color: var(--accent);
144
+ font-weight: 500;
145
+ font-family: var(--font-body);
146
+ }
147
+ .stack-2 > * + * { margin-block-start: var(--space-2); }
148
+ .stack-3 > * + * { margin-block-start: var(--space-3); }
149
+ .stack-4 > * + * { margin-block-start: var(--space-4); }
150
+ .stack-6 > * + * { margin-block-start: var(--space-6); }
151
+
152
+ /* ─── Top nav — soft pill segmented ─────────────────────── */
153
+ .topnav {
154
+ display: flex;
155
+ align-items: center;
156
+ justify-content: space-between;
157
+ padding-block: var(--space-4);
158
+ gap: var(--space-4);
159
+ }
160
+ .topnav-brand {
161
+ font-family: var(--font-display);
162
+ font-weight: 600;
163
+ font-size: var(--text-lg);
164
+ color: var(--fg);
165
+ text-decoration: none;
166
+ display: inline-flex;
167
+ align-items: center;
168
+ gap: var(--space-2);
169
+ }
170
+ .topnav-brand-mark {
171
+ display: inline-flex;
172
+ align-items: center;
173
+ justify-content: center;
174
+ width: 28px;
175
+ height: 28px;
176
+ border-radius: var(--radius-pill);
177
+ background: var(--accent);
178
+ color: var(--accent-on);
179
+ font-size: var(--text-xs);
180
+ font-weight: 600;
181
+ letter-spacing: 0.04em;
182
+ }
183
+ .topnav-tabs {
184
+ display: flex;
185
+ align-items: center;
186
+ gap: var(--space-1);
187
+ }
188
+ .topnav-tabs a {
189
+ position: relative;
190
+ padding: var(--space-2) var(--space-3);
191
+ font-size: var(--text-sm);
192
+ font-weight: 400;
193
+ color: var(--muted);
194
+ text-decoration: none;
195
+ transition: color var(--motion-fast) var(--ease-standard);
196
+ }
197
+ .topnav-tabs a:hover { color: var(--fg-2); }
198
+ .topnav-tabs a[aria-current="page"] {
199
+ color: var(--fg);
200
+ font-weight: 600;
201
+ }
202
+ /* DESIGN.md §4: tab indicator is a 2px underline at component-layer red, matched to text width */
203
+ .topnav-tabs a[aria-current="page"]::after {
204
+ content: "";
205
+ position: absolute;
206
+ left: var(--space-3);
207
+ right: var(--space-3);
208
+ bottom: 0;
209
+ height: 2px;
210
+ background: var(--accent-hover);
211
+ border-radius: var(--radius-pill);
212
+ }
213
+ .topnav-right { display: flex; align-items: center; gap: var(--space-3); }
214
+
215
+ /* ─── Buttons — full pill, no shadow ────────────────────── */
216
+ .btn {
217
+ display: inline-flex;
218
+ align-items: center;
219
+ gap: var(--space-2);
220
+ padding: 10px 20px;
221
+ border-radius: var(--radius-pill);
222
+ font-family: var(--font-body);
223
+ font-size: var(--text-sm);
224
+ font-weight: 500;
225
+ line-height: 1;
226
+ cursor: pointer;
227
+ border: 1px solid transparent;
228
+ text-decoration: none;
229
+ transition: background-color var(--motion-fast) var(--ease-standard),
230
+ color var(--motion-fast) var(--ease-standard),
231
+ border-color var(--motion-fast) var(--ease-standard);
232
+ }
233
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
234
+ .btn-primary {
235
+ background: var(--accent);
236
+ color: var(--accent-on);
237
+ }
238
+ .btn-primary:hover { background: var(--accent-hover); }
239
+ .btn-primary:active { background: var(--accent-active); }
240
+ .btn-secondary {
241
+ background: var(--border);
242
+ color: var(--fg);
243
+ }
244
+ .btn-secondary:hover { background: rgba(0, 0, 0, 0.12); }
245
+ .btn-ghost {
246
+ background: transparent;
247
+ color: var(--fg);
248
+ border-color: var(--border);
249
+ }
250
+ .btn-ghost:hover { background: var(--border-soft); }
251
+ /* Follow CTA: feed-card variant per DESIGN.md §4 "Follow Button — three-state" */
252
+ .btn-follow {
253
+ padding: 6px 14px;
254
+ font-size: var(--text-xs);
255
+ font-weight: 500;
256
+ border-radius: var(--radius-pill);
257
+ border: none;
258
+ cursor: pointer;
259
+ background: var(--accent);
260
+ color: var(--accent-on);
261
+ }
262
+ .btn-follow[aria-pressed="true"] {
263
+ background: rgba(0, 0, 0, 0.05);
264
+ color: var(--muted);
265
+ }
266
+
267
+ /* ─── Chips / tags — pill rectangle ─────────────────────── */
268
+ .chip {
269
+ display: inline-flex;
270
+ align-items: center;
271
+ gap: var(--space-2);
272
+ padding: 4px 12px;
273
+ border-radius: var(--radius-pill);
274
+ font-size: var(--text-xs);
275
+ font-weight: 400;
276
+ background: rgba(0, 0, 0, 0.05);
277
+ color: var(--fg-2);
278
+ }
279
+ .chip-trending {
280
+ background: var(--accent);
281
+ color: var(--accent-on);
282
+ font-weight: 500;
283
+ }
284
+ .chip-success {
285
+ background: color-mix(in oklab, var(--success), transparent 88%);
286
+ color: var(--success);
287
+ }
288
+ .dot {
289
+ width: 6px;
290
+ height: 6px;
291
+ border-radius: 50%;
292
+ background: currentColor;
293
+ }
294
+
295
+ /* ─── Cards — 12px radius, flat by default ──────────────── */
296
+ .card {
297
+ background: var(--surface);
298
+ border-radius: var(--radius-md);
299
+ padding: var(--space-6);
300
+ display: flex;
301
+ flex-direction: column;
302
+ gap: var(--space-3);
303
+ transition: box-shadow var(--motion-base) var(--ease-standard),
304
+ transform var(--motion-base) var(--ease-standard);
305
+ }
306
+ /* DESIGN.md §6 "Subtle (1)" — PC card hover only */
307
+ .card:hover {
308
+ box-shadow: var(--elev-raised);
309
+ transform: translateY(-2px);
310
+ }
311
+
312
+ /* ─── Feed card — image flush, footer with heart + count ─ */
313
+ .feed-card {
314
+ background: var(--surface);
315
+ border-radius: var(--radius-md);
316
+ overflow: hidden;
317
+ display: flex;
318
+ flex-direction: column;
319
+ transition: box-shadow var(--motion-base) var(--ease-standard),
320
+ transform var(--motion-base) var(--ease-standard);
321
+ }
322
+ .feed-card:hover {
323
+ box-shadow: var(--elev-raised);
324
+ transform: translateY(-2px);
325
+ }
326
+ .feed-card-cover {
327
+ width: 100%;
328
+ aspect-ratio: 3 / 4;
329
+ display: block;
330
+ background:
331
+ linear-gradient(135deg,
332
+ color-mix(in oklab, var(--accent), white 80%),
333
+ color-mix(in oklab, var(--accent), white 50%));
334
+ position: relative;
335
+ }
336
+ .feed-card-cover-tag {
337
+ position: absolute;
338
+ top: var(--space-3);
339
+ left: var(--space-3);
340
+ padding: 4px 10px;
341
+ border-radius: var(--radius-pill);
342
+ background: rgba(0, 0, 0, 0.45);
343
+ color: #ffffff;
344
+ font-size: var(--text-xs);
345
+ font-weight: 500;
346
+ backdrop-filter: blur(4px);
347
+ }
348
+ .feed-card-body {
349
+ padding: var(--space-3);
350
+ display: flex;
351
+ flex-direction: column;
352
+ gap: var(--space-3);
353
+ }
354
+ .feed-card-title {
355
+ font-size: var(--text-sm);
356
+ font-weight: 500;
357
+ color: var(--fg);
358
+ line-height: 1.43;
359
+ margin: 0;
360
+ display: -webkit-box;
361
+ -webkit-line-clamp: 2;
362
+ -webkit-box-orient: vertical;
363
+ overflow: hidden;
364
+ }
365
+ .feed-card-foot {
366
+ display: flex;
367
+ align-items: center;
368
+ gap: var(--space-2);
369
+ font-size: var(--text-xs);
370
+ color: var(--muted);
371
+ }
372
+ .feed-card-avatar {
373
+ width: 24px;
374
+ height: 24px;
375
+ border-radius: var(--radius-pill);
376
+ background: color-mix(in oklab, var(--accent), white 70%);
377
+ flex-shrink: 0;
378
+ }
379
+ .feed-card-author {
380
+ flex: 1;
381
+ white-space: nowrap;
382
+ overflow: hidden;
383
+ text-overflow: ellipsis;
384
+ color: var(--fg-2);
385
+ }
386
+ .feed-card-likes {
387
+ display: inline-flex;
388
+ align-items: center;
389
+ gap: 2px;
390
+ color: var(--muted);
391
+ font-variant-numeric: tabular-nums;
392
+ }
393
+ .feed-card-likes .icon { color: var(--muted); }
394
+ .feed-card-likes[data-liked="true"] .icon { color: var(--accent); fill: var(--accent); }
395
+
396
+ /* ─── Inputs — F5F5F5 fill, pill, no border ─────────────── */
397
+ .field { display: flex; flex-direction: column; gap: var(--space-2); }
398
+ .field label {
399
+ font-size: var(--text-sm);
400
+ font-weight: 500;
401
+ color: var(--fg);
402
+ }
403
+ .field input, .field textarea {
404
+ background: var(--bg);
405
+ color: var(--fg);
406
+ border: 1px solid transparent;
407
+ border-radius: var(--radius-pill);
408
+ padding: 10px 16px;
409
+ font-family: var(--font-body);
410
+ font-size: var(--text-sm);
411
+ outline: none;
412
+ transition: border-color var(--motion-fast) var(--ease-standard),
413
+ box-shadow var(--motion-fast) var(--ease-standard),
414
+ background-color var(--motion-fast) var(--ease-standard);
415
+ }
416
+ .field textarea {
417
+ border-radius: var(--radius-md);
418
+ padding: var(--space-3) var(--space-4);
419
+ resize: vertical;
420
+ min-height: 88px;
421
+ font-family: var(--font-body);
422
+ }
423
+ .field input::placeholder, .field textarea::placeholder { color: var(--meta); }
424
+ .field input:focus, .field textarea:focus {
425
+ background: var(--surface);
426
+ border-color: var(--border);
427
+ box-shadow: var(--focus-ring);
428
+ }
429
+ .field-help { font-size: var(--text-xs); color: var(--muted); }
430
+
431
+ /* ─── Hero meta sidecar (soft pink-tinted card) ─────────── */
432
+ .hero-meta {
433
+ display: flex;
434
+ flex-direction: column;
435
+ gap: var(--space-4);
436
+ padding: var(--space-6);
437
+ border-radius: var(--radius-lg);
438
+ /* Soft pink-tinted surface — derived from accent at low alpha,
439
+ a brand-friendly tint without introducing a new token. */
440
+ background: color-mix(in oklab, var(--accent), white 92%);
441
+ }
442
+ .hero-meta-title {
443
+ font-size: var(--text-sm);
444
+ font-weight: 600;
445
+ color: var(--fg);
446
+ margin: 0;
447
+ }
448
+ .hero-meta-stats {
449
+ display: grid;
450
+ grid-template-columns: repeat(3, 1fr);
451
+ gap: var(--space-3);
452
+ }
453
+ .hero-meta-stat {
454
+ display: flex;
455
+ flex-direction: column;
456
+ gap: 2px;
457
+ }
458
+ .hero-meta-stat-num {
459
+ font-size: var(--text-xl);
460
+ font-weight: 600;
461
+ color: var(--fg);
462
+ font-variant-numeric: tabular-nums;
463
+ line-height: 1.2;
464
+ }
465
+ .hero-meta-stat-label {
466
+ font-size: var(--text-xs);
467
+ color: var(--muted);
468
+ }
469
+ .hero-meta-foot {
470
+ display: flex;
471
+ align-items: center;
472
+ justify-content: space-between;
473
+ gap: var(--space-3);
474
+ padding-block-start: var(--space-3);
475
+ border-top: 1px solid rgba(0, 0, 0, 0.06);
476
+ }
477
+
478
+ /* ─── Section layouts ───────────────────────────────────── */
479
+ .hero-grid {
480
+ display: grid;
481
+ grid-template-columns: 1.3fr 1fr;
482
+ gap: var(--space-12);
483
+ align-items: center;
484
+ }
485
+ @media (max-width: 1023px) {
486
+ .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
487
+ }
488
+ .hero-actions {
489
+ display: flex;
490
+ gap: var(--space-3);
491
+ margin-block-start: var(--space-6);
492
+ flex-wrap: wrap;
493
+ }
494
+ .features-grid {
495
+ display: grid;
496
+ grid-template-columns: repeat(3, 1fr);
497
+ gap: var(--space-5);
498
+ margin-block-start: var(--space-8);
499
+ }
500
+ @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
501
+ @media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
502
+ .feed-grid {
503
+ display: grid;
504
+ grid-template-columns: repeat(4, 1fr);
505
+ gap: var(--space-3);
506
+ margin-block-start: var(--space-6);
507
+ }
508
+ @media (max-width: 1023px) { .feed-grid { grid-template-columns: repeat(3, 1fr); } }
509
+ @media (max-width: 639px) { .feed-grid { grid-template-columns: repeat(2, 1fr); } }
510
+ .form-row {
511
+ display: grid;
512
+ grid-template-columns: 1fr 1fr;
513
+ gap: var(--space-12);
514
+ align-items: start;
515
+ }
516
+ @media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
517
+ .form {
518
+ display: flex;
519
+ flex-direction: column;
520
+ gap: var(--space-4);
521
+ padding: var(--space-6);
522
+ background: var(--surface);
523
+ border-radius: var(--radius-lg);
524
+ max-width: 480px;
525
+ }
526
+ .form-actions {
527
+ display: flex;
528
+ gap: var(--space-3);
529
+ margin-block-start: var(--space-2);
530
+ }
531
+ .icon { width: 16px; height: 16px; flex-shrink: 0; }
532
+ .icon-lg { width: 18px; height: 18px; flex-shrink: 0; }
533
+ .row-between {
534
+ display: flex;
535
+ align-items: center;
536
+ justify-content: space-between;
537
+ gap: var(--space-3);
538
+ }
539
+ kbd {
540
+ font-family: var(--font-mono);
541
+ font-size: var(--text-xs);
542
+ padding: 2px 6px;
543
+ border-radius: var(--radius-sm);
544
+ border: 1px solid var(--border);
545
+ background: var(--surface);
546
+ color: var(--muted);
547
+ }
548
+ code {
549
+ font-family: var(--font-mono);
550
+ font-size: 0.875em;
551
+ background: rgba(0, 0, 0, 0.05);
552
+ border-radius: var(--radius-sm);
553
+ padding: 1px 6px;
554
+ color: var(--fg);
555
+ }
556
+ </style>
557
+ </head>
558
+ <body>
559
+ <header class="container">
560
+ <nav class="topnav" aria-label="Primary">
561
+ <a class="topnav-brand" href="./DESIGN.md">
562
+ <span class="topnav-brand-mark" aria-hidden="true">RED</span>
563
+ <span>灵感参考</span>
564
+ </a>
565
+ <div class="topnav-tabs" role="tablist">
566
+ <a href="#" role="tab" aria-current="page">发现</a>
567
+ <a href="#" role="tab">关注</a>
568
+ <a href="#" role="tab">附近</a>
569
+ <a href="#" role="tab">购物</a>
570
+ </div>
571
+ <div class="topnav-right">
572
+ <a href="#" class="body-sm" style="color: var(--fg-2); text-decoration: none; font-weight: 500;">登录</a>
573
+ <a href="#" class="btn btn-primary">发布笔记</a>
574
+ </div>
575
+ </nav>
576
+ </header>
577
+
578
+ <main class="container">
579
+ <!-- HERO — 种草 voice, pill CTA, soft pink-tinted sidecar. -->
580
+ <section data-od-id="hero">
581
+ <div class="hero-grid">
582
+ <div class="stack-4">
583
+ <p class="eyebrow">灵感参考 · xiaohongshu</p>
584
+ <h1>标记你的生活，<br />让世界被你种草。</h1>
585
+ <p class="lead" style="max-width: 30ch;">
586
+ 你今天的早餐、出差住的酒店、买了三支才挑对的口红 —
587
+ 都是别人正在寻找的灵感。Show up. 被看见。被收藏。
588
+ </p>
589
+ <div class="hero-actions">
590
+ <a href="./tokens.css" class="btn btn-primary">
591
+ 开始记录
592
+ <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
593
+ stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
594
+ <path d="M5 12h14M13 6l6 6-6 6"/>
595
+ </svg>
596
+ </a>
597
+ <a href="./DESIGN.md" class="btn btn-ghost">阅读设计语言</a>
598
+ </div>
599
+ <p class="body-sm body-muted" style="margin-block-start: var(--space-3);">
600
+ 按 <kbd>⌘</kbd> <kbd>K</kbd> 搜索笔记 · Press <kbd>⌘</kbd> <kbd>K</kbd> to search.
601
+ </p>
602
+ </div>
603
+
604
+ <aside class="hero-meta" aria-label="今日数据 · Today on RED">
605
+ <div class="row-between">
606
+ <p class="hero-meta-title">今日小红书 · Today on RED</p>
607
+ <span class="chip chip-trending">
608
+ <span class="dot" aria-hidden="true"></span>
609
+ 热门
610
+ </span>
611
+ </div>
612
+ <div class="hero-meta-stats">
613
+ <div class="hero-meta-stat">
614
+ <span class="hero-meta-stat-num">3.2亿</span>
615
+ <span class="hero-meta-stat-label">月活用户</span>
616
+ </div>
617
+ <div class="hero-meta-stat">
618
+ <span class="hero-meta-stat-num">8,400万</span>
619
+ <span class="hero-meta-stat-label">日均笔记</span>
620
+ </div>
621
+ <div class="hero-meta-stat">
622
+ <span class="hero-meta-stat-num">72%</span>
623
+ <span class="hero-meta-stat-label">女性用户</span>
624
+ </div>
625
+ </div>
626
+ <div class="hero-meta-foot">
627
+ <span class="body-sm" style="color: var(--muted);">
628
+ Source · xiaohongshu.com · <time datetime="2026-05-18">2026.05</time>
629
+ </span>
630
+ <a href="#" class="body-sm" style="color: var(--accent); text-decoration: none; font-weight: 500;">查看 →</a>
631
+ </div>
632
+ </aside>
633
+ </div>
634
+ </section>
635
+
636
+ <!-- DISCOVER — masonry-style feed mock with bilingual titles. -->
637
+ <section data-od-id="discover">
638
+ <div class="row-between" style="flex-wrap: wrap; gap: var(--space-3);">
639
+ <div class="stack-2">
640
+ <p class="eyebrow">今日发现 · Discover</p>
641
+ <h2>看看大家正在种草什么</h2>
642
+ </div>
643
+ <div style="display: flex; gap: var(--space-2); flex-wrap: wrap;">
644
+ <span class="chip chip-trending">穿搭</span>
645
+ <span class="chip">咖啡</span>
646
+ <span class="chip">旅行</span>
647
+ <span class="chip">护肤</span>
648
+ <span class="chip">家居</span>
649
+ </div>
650
+ </div>
651
+ <div class="feed-grid">
652
+ <article class="feed-card">
653
+ <div class="feed-card-cover" aria-hidden="true">
654
+ <span class="feed-card-cover-tag">视频</span>
655
+ </div>
656
+ <div class="feed-card-body">
657
+ <h3 class="feed-card-title" style="font-family: var(--font-body);">
658
+ 周末和朋友的 brunch 小记 · A slow Saturday in Shanghai
659
+ </h3>
660
+ <div class="feed-card-foot">
661
+ <span class="feed-card-avatar" aria-hidden="true"></span>
662
+ <span class="feed-card-author">小满 · xiaoman</span>
663
+ <span class="feed-card-likes" data-liked="true" aria-label="2.3 万 likes">
664
+ <svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
665
+ <path d="M12 21s-7-4.5-9.5-9C.9 8.8 2.7 5 6 5c2 0 3.3 1 4 2.3C10.7 6 12 5 14 5c3.3 0 5.1 3.8 3.5 7-2.5 4.5-9.5 9-9.5 9z"/>
666
+ </svg>
667
+ 2.3w
668
+ </span>
669
+ </div>
670
+ </div>
671
+ </article>
672
+ <article class="feed-card">
673
+ <div class="feed-card-cover" aria-hidden="true" style="aspect-ratio: 1 / 1;"></div>
674
+ <div class="feed-card-body">
675
+ <h3 class="feed-card-title" style="font-family: var(--font-body);">
676
+ 租房 50㎡ 的暖色客厅改造 — before / after 全记录
677
+ </h3>
678
+ <div class="feed-card-foot">
679
+ <span class="feed-card-avatar" aria-hidden="true" style="background: color-mix(in oklab, var(--success), white 70%);"></span>
680
+ <span class="feed-card-author">桃子家的小屋</span>
681
+ <span class="feed-card-likes" aria-label="8,712 likes">
682
+ <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
683
+ <path d="M12 21s-7-4.5-9.5-9C.9 8.8 2.7 5 6 5c2 0 3.3 1 4 2.3C10.7 6 12 5 14 5c3.3 0 5.1 3.8 3.5 7-2.5 4.5-9.5 9-9.5 9z"/>
684
+ </svg>
685
+ 8,712
686
+ </span>
687
+ </div>
688
+ </div>
689
+ </article>
690
+ <article class="feed-card">
691
+ <div class="feed-card-cover" aria-hidden="true" style="aspect-ratio: 4 / 5; background: linear-gradient(160deg, color-mix(in oklab, var(--accent), white 60%), color-mix(in oklab, var(--warn), white 70%));"></div>
692
+ <div class="feed-card-body">
693
+ <h3 class="feed-card-title" style="font-family: var(--font-body);">
694
+ 第三支才挑对 · 显白程度十级的口红种草清单
695
+ </h3>
696
+ <div class="feed-card-foot">
697
+ <span class="feed-card-avatar" aria-hidden="true" style="background: color-mix(in oklab, var(--warn), white 60%);"></span>
698
+ <span class="feed-card-author">林深 · lin.shen</span>
699
+ <span class="feed-card-likes" data-liked="true" aria-label="1.1 万 likes">
700
+ <svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
701
+ <path d="M12 21s-7-4.5-9.5-9C.9 8.8 2.7 5 6 5c2 0 3.3 1 4 2.3C10.7 6 12 5 14 5c3.3 0 5.1 3.8 3.5 7-2.5 4.5-9.5 9-9.5 9z"/>
702
+ </svg>
703
+ 1.1w
704
+ </span>
705
+ </div>
706
+ </div>
707
+ </article>
708
+ <article class="feed-card">
709
+ <div class="feed-card-cover" aria-hidden="true" style="aspect-ratio: 3 / 4; background: linear-gradient(200deg, color-mix(in oklab, var(--success), white 60%), color-mix(in oklab, var(--success), white 88%));">
710
+ <span class="feed-card-cover-tag">长图</span>
711
+ </div>
712
+ <div class="feed-card-body">
713
+ <h3 class="feed-card-title" style="font-family: var(--font-body);">
714
+ 京都早春三日 · 在小巷里慢慢迷路也很好
715
+ </h3>
716
+ <div class="feed-card-foot">
717
+ <span class="feed-card-avatar" aria-hidden="true" style="background: color-mix(in oklab, var(--success), white 50%);"></span>
718
+ <span class="feed-card-author">远野日记 · tono</span>
719
+ <span class="feed-card-likes" aria-label="6,304 likes">
720
+ <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
721
+ <path d="M12 21s-7-4.5-9.5-9C.9 8.8 2.7 5 6 5c2 0 3.3 1 4 2.3C10.7 6 12 5 14 5c3.3 0 5.1 3.8 3.5 7-2.5 4.5-9.5 9-9.5 9z"/>
722
+ </svg>
723
+ 6,304
724
+ </span>
725
+ </div>
726
+ </div>
727
+ </article>
728
+ </div>
729
+ </section>
730
+
731
+ <!-- FEATURES — three guiding principles, flat cards, hover lift. -->
732
+ <section data-od-id="features">
733
+ <div class="stack-3">
734
+ <p class="eyebrow">为什么这样设计 · Why it looks like this</p>
735
+ <h2 style="max-width: 22ch;">
736
+ 克制做底色，内容才是主角。
737
+ </h2>
738
+ <p class="lead" style="max-width: 56ch;">
739
+ 一个 <code>--accent</code>，一种 <code>PingFang SC</code>，
740
+ 一套 <code>rgba(0,0,0,*)</code> 的浮层灰阶 —
741
+ 其余空间，全部交给图片本身。
742
+ </p>
743
+ </div>
744
+
745
+ <div class="features-grid">
746
+ <article class="card">
747
+ <span class="chip chip-trending" style="align-self: flex-start;">
748
+ <span class="dot" aria-hidden="true"></span>
749
+ 品牌唯一红
750
+ </span>
751
+ <h3>一屏只用一次的红</h3>
752
+ <p class="body-muted body-sm">
753
+ <code>#ff2442</code> 只出现在主要 CTA、心形高亮、
754
+ 热门标签上。同一个页面里出现两次饱和红，画面就立刻
755
+ "降级"成了打折海报，而不是一张笔记。
756
+ </p>
757
+ <a href="./tokens.css" class="body-sm" style="color: var(--accent); text-decoration: none; font-weight: 500;">查看 token →</a>
758
+ </article>
759
+
760
+ <article class="card">
761
+ <span class="chip" style="align-self: flex-start;">柔黑文字</span>
762
+ <h3>从不使用纯黑</h3>
763
+ <p class="body-muted body-sm">
764
+ 标题 <code>rgba(0,0,0,.8)</code>、正文 <code>.62</code>、
765
+ 描述 <code>.45</code>、占位 <code>.27</code> —
766
+ 四级透明黑替代离散灰阶，同一个浮层落在白卡、照片、
767
+ 抽屉上都成立。
768
+ </p>
769
+ <a href="./DESIGN.md" class="body-sm" style="color: var(--accent); text-decoration: none; font-weight: 500;">阅读规则 →</a>
770
+ </article>
771
+
772
+ <article class="card">
773
+ <span class="chip" style="align-self: flex-start;">圆得彻底</span>
774
+ <h3>能按的，一定是 pill</h3>
775
+ <p class="body-muted body-sm">
776
+ 卡片 <code>12px</code>、按钮 <code>9999px</code>。
777
+ 一个直角按钮在这套系统里立刻显得不对 —
778
+ 层次靠间距和圆角，不靠投影。Shadow stays
779
+ off until hover earns it.
780
+ </p>
781
+ <a href="./tokens.css" class="body-sm" style="color: var(--accent); text-decoration: none; font-weight: 500;">检查圆角 →</a>
782
+ </article>
783
+ </div>
784
+ </section>
785
+
786
+ <!-- FORM — pill input on F5F5F5, primary red CTA, follow CTA demo. -->
787
+ <section data-od-id="form">
788
+ <div class="form-row">
789
+ <div class="stack-4">
790
+ <p class="eyebrow">订阅每日灵感 · Daily inspo digest</p>
791
+ <h2>每天一封 · 100 张被收藏最多的笔记。</h2>
792
+ <p class="lead" style="max-width: 44ch;">
793
+ No spam，no third-party，no enterprise tone.
794
+ 一个邮箱，一个发布频率，仅此而已 —
795
+ 我们用 <code>--focus-ring</code> 的 RED 红圈
796
+ 提示你正在专注的输入框。
797
+ </p>
798
+ <ul style="margin: 0; padding-inline-start: var(--space-5); color: var(--fg-2); font-size: var(--text-sm);" class="stack-3">
799
+ <li>输入框背景使用 <code>--bg</code>（#F5F5F5），focus 时升到 <code>--surface</code>。</li>
800
+ <li>提交按钮即 <code>.btn-primary</code> — 系统里只有一种红 CTA。</li>
801
+ <li>占位符使用 <code>--meta</code>，0.27 透明度的最弱一档。</li>
802
+ </ul>
803
+ <div class="row-between" style="margin-block-start: var(--space-4); max-width: 360px;">
804
+ <div class="stack-2" style="display: flex; flex-direction: column;">
805
+ <span class="body-sm" style="color: var(--fg); font-weight: 500;">关注按钮三态</span>
806
+ <span class="body-sm" style="color: var(--muted);">DESIGN.md §4 · Follow Button</span>
807
+ </div>
808
+ <div style="display: flex; gap: var(--space-2);">
809
+ <button type="button" class="btn-follow">+ 关注</button>
810
+ <button type="button" class="btn-follow" aria-pressed="true">已关注</button>
811
+ </div>
812
+ </div>
813
+ </div>
814
+
815
+ <form class="form" onsubmit="event.preventDefault();" aria-label="订阅每日灵感">
816
+ <div class="row-between">
817
+ <p style="font-size: var(--text-sm); font-weight: 600; color: var(--fg); margin: 0;">订阅每日灵感</p>
818
+ <span class="chip chip-success">
819
+ <span class="dot" aria-hidden="true"></span>
820
+ Free · 免费
821
+ </span>
822
+ </div>
823
+ <div class="field">
824
+ <label for="nickname">你的昵称 · Nickname</label>
825
+ <input
826
+ id="nickname"
827
+ type="text"
828
+ placeholder="给未来的自己留个名字"
829
+ autocomplete="nickname"
830
+ />
831
+ </div>
832
+ <div class="field">
833
+ <label for="email">邮箱 · Email</label>
834
+ <input
835
+ id="email"
836
+ type="email"
837
+ placeholder="you@example.com"
838
+ autocomplete="email"
839
+ required
840
+ />
841
+ <p class="field-help">仅用于发送每日灵感清单，可随时退订。</p>
842
+ </div>
843
+ <div class="field">
844
+ <label for="topic">最想被种草的主题 · What to be inspired by</label>
845
+ <textarea
846
+ id="topic"
847
+ placeholder="例如：周末 brunch、出租屋改造、本子文具、晨跑路线…"
848
+ ></textarea>
849
+ </div>
850
+ <div class="form-actions">
851
+ <button type="submit" class="btn btn-primary">
852
+ 立即订阅
853
+ <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
854
+ stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
855
+ <path d="M5 12h14M13 6l6 6-6 6"/>
856
+ </svg>
857
+ </button>
858
+ <button type="button" class="btn btn-ghost">看示例</button>
859
+ </div>
860
+ </form>
861
+ </div>
862
+ </section>
863
+ </main>
864
+ </body>
865
+ </html>