@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/duolingo/components.html ADDED
@@ -0,0 +1,532 @@
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>Duolingo — reference components</title>
7
+ <meta
8
+ name="description"
9
+ content="Reference fixture for design-systems/duolingo. Owl-green gamified
10
+ universe, chunky 4px tactile shadows, big confident type, friendly pill geometry."
11
+ />
12
+
13
+ <style>
14
+ :root {
15
+ --bg: #ffffff;
16
+ --surface: #f7f7f7;
17
+ --surface-warm: var(--surface);
18
+
19
+ --fg: #3c3c3c;
20
+ --fg-2: var(--fg);
21
+ --muted: #777777;
22
+ --meta: #afafaf;
23
+
24
+ --border: #e5e5e5;
25
+ --border-soft: var(--border);
26
+
27
+ --accent: #58cc02;
28
+ --accent-on: #ffffff;
29
+ --accent-hover: #89e219;
30
+ --accent-active: #58a700;
31
+
32
+ --success: #58cc02;
33
+ --warn: #ffc800;
34
+ --danger: #ff4b4b;
35
+
36
+ --font-display: "Feather Bold", "DIN Round Pro", "Helvetica Neue", sans-serif;
37
+ --font-body: "Mona Sans", "Helvetica Neue", system-ui, sans-serif;
38
+ --font-mono: "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
39
+
40
+ --text-xs: 12px;
41
+ --text-sm: 13px;
42
+ --text-base: 15px;
43
+ --text-lg: 18px;
44
+ --text-xl: 24px;
45
+ --text-2xl: 32px;
46
+ --text-3xl: 40px;
47
+ --text-4xl: 56px;
48
+
49
+ --leading-body: 1.5;
50
+ --leading-tight: 1.15;
51
+ --tracking-display: -0.01em;
52
+
53
+ --space-1: 4px;
54
+ --space-2: 8px;
55
+ --space-3: 12px;
56
+ --space-4: 16px;
57
+ --space-5: 20px;
58
+ --space-6: 24px;
59
+ --space-8: 32px;
60
+ --space-12: 48px;
61
+
62
+ --section-y-desktop: 80px;
63
+ --section-y-tablet: 56px;
64
+ --section-y-phone: 40px;
65
+
66
+ --radius-sm: 12px;
67
+ --radius-md: 16px;
68
+ --radius-lg: 20px;
69
+ --radius-pill: 9999px;
70
+
71
+ --elev-flat: none;
72
+ --elev-ring: 0 0 0 2px var(--border);
73
+ --elev-raised: 0 4px 0 #d7d7d7;
74
+
75
+ --focus-ring: 0 0 0 3px rgba(28, 176, 246, 0.2);
76
+
77
+ --motion-fast: 180ms;
78
+ --motion-base: 320ms;
79
+ --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);
80
+
81
+ --container-max: 1080px;
82
+ --container-gutter-desktop: 24px;
83
+ --container-gutter-tablet: 20px;
84
+ --container-gutter-phone: 16px;
85
+ }
86
+
87
+ /* ─── Reset ─────────────────────────────────────────────── */
88
+ *, *::before, *::after { box-sizing: border-box; }
89
+ html, body { margin: 0; padding: 0; }
90
+ body {
91
+ background: var(--bg);
92
+ color: var(--fg);
93
+ font-family: var(--font-body);
94
+ font-size: var(--text-base);
95
+ line-height: var(--leading-body);
96
+ -webkit-font-smoothing: antialiased;
97
+ }
98
+
99
+ /* ─── Layout ────────────────────────────────────────────── */
100
+ .container {
101
+ max-width: var(--container-max);
102
+ margin-inline: auto;
103
+ padding-inline: var(--container-gutter-desktop);
104
+ }
105
+ section { padding-block: var(--section-y-desktop); }
106
+ section + section { border-top: 2px solid var(--border); }
107
+ @media (max-width: 1023px) {
108
+ .container { padding-inline: var(--container-gutter-tablet); }
109
+ section { padding-block: var(--section-y-tablet); }
110
+ }
111
+ @media (max-width: 639px) {
112
+ .container { padding-inline: var(--container-gutter-phone); }
113
+ section { padding-block: var(--section-y-phone); }
114
+ }
115
+
116
+ /* ─── Typography — Feather Bold @ 800 across chrome ─────── */
117
+ h1, h2, h3 {
118
+ font-family: var(--font-display);
119
+ font-weight: 800;
120
+ line-height: var(--leading-tight);
121
+ margin: 0;
122
+ color: var(--fg);
123
+ }
124
+ h1 {
125
+ font-size: var(--text-4xl);
126
+ letter-spacing: var(--tracking-display);
127
+ line-height: 1.05;
128
+ }
129
+ h2 { font-size: var(--text-2xl); letter-spacing: -0.005em; }
130
+ h3 { font-size: var(--text-lg); font-weight: 700; line-height: 1.25; }
131
+ p { margin: 0; }
132
+ .lead { font-size: var(--text-lg); color: var(--fg); line-height: var(--leading-body); }
133
+ .body-muted { color: var(--muted); }
134
+ .body-meta { color: var(--meta); }
135
+ .body-sm { font-size: var(--text-sm); }
136
+ .eyebrow {
137
+ display: inline-block;
138
+ font-family: var(--font-display);
139
+ font-size: var(--text-xs);
140
+ color: var(--accent-active);
141
+ background: color-mix(in oklab, var(--accent), transparent 82%);
142
+ text-transform: uppercase;
143
+ letter-spacing: 0.08em;
144
+ font-weight: 800;
145
+ padding: var(--space-1) var(--space-3);
146
+ border-radius: var(--radius-pill);
147
+ }
148
+ .stack-2 > * + * { margin-block-start: var(--space-2); }
149
+ .stack-3 > * + * { margin-block-start: var(--space-3); }
150
+ .stack-4 > * + * { margin-block-start: var(--space-4); }
151
+ .stack-6 > * + * { margin-block-start: var(--space-6); }
152
+
153
+ /* ─── Buttons — chunky 4px bottom-shadow tactile press ──── */
154
+ .btn {
155
+ display: inline-flex;
156
+ align-items: center;
157
+ justify-content: center;
158
+ gap: var(--space-2);
159
+ padding: 14px var(--space-6);
160
+ border-radius: var(--radius-md);
161
+ font-family: var(--font-display);
162
+ font-size: var(--text-base);
163
+ font-weight: 800;
164
+ line-height: 1.2;
165
+ letter-spacing: 0.04em;
166
+ text-transform: uppercase;
167
+ cursor: pointer;
168
+ border: none;
169
+ text-decoration: none;
170
+ transition:
171
+ background-color var(--motion-fast) var(--ease-standard),
172
+ transform var(--motion-fast) var(--ease-standard),
173
+ box-shadow var(--motion-fast) var(--ease-standard);
174
+ }
175
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
176
+
177
+ /* Primary — Owl Green with darker green underside */
178
+ .btn-primary {
179
+ background: var(--accent);
180
+ color: var(--accent-on);
181
+ box-shadow: 0 4px 0 var(--accent-active);
182
+ }
183
+ .btn-primary:hover { background: var(--accent-hover); }
184
+ .btn-primary:active {
185
+ transform: translateY(4px);
186
+ box-shadow: 0 0 0 var(--accent-active);
187
+ }
188
+
189
+ /* Secondary — White with neutral underside */
190
+ .btn-secondary {
191
+ background: var(--bg);
192
+ color: var(--muted);
193
+ border: 2px solid var(--border);
194
+ box-shadow: 0 4px 0 var(--border);
195
+ padding: 12px calc(var(--space-6) - 2px);
196
+ }
197
+ .btn-secondary:hover { color: var(--fg); border-color: var(--meta); }
198
+ .btn-secondary:active {
199
+ transform: translateY(4px);
200
+ box-shadow: 0 0 0 var(--border);
201
+ }
202
+
203
+ /* Streak — Bee Yellow with warm underside */
204
+ .btn-streak {
205
+ background: var(--warn);
206
+ color: var(--fg);
207
+ box-shadow: 0 4px 0 color-mix(in oklab, var(--warn), black 18%);
208
+ }
209
+ .btn-streak:hover { background: color-mix(in oklab, var(--warn), white 8%); }
210
+ .btn-streak:active {
211
+ transform: translateY(4px);
212
+ box-shadow: 0 0 0 color-mix(in oklab, var(--warn), black 18%);
213
+ }
214
+
215
+ /* ─── Inputs — thick borders, soft eel-blue focus glow ─── */
216
+ .field { display: flex; flex-direction: column; gap: var(--space-2); }
217
+ .field label {
218
+ font-family: var(--font-display);
219
+ font-size: var(--text-sm);
220
+ font-weight: 800;
221
+ color: var(--fg);
222
+ text-transform: uppercase;
223
+ letter-spacing: 0.06em;
224
+ }
225
+ .field input {
226
+ padding: 14px var(--space-4);
227
+ border-radius: var(--radius-sm);
228
+ border: 2px solid var(--border);
229
+ background: var(--bg);
230
+ color: var(--fg);
231
+ font-family: var(--font-body);
232
+ font-size: var(--text-base);
233
+ outline: none;
234
+ transition:
235
+ border-color var(--motion-fast) var(--ease-standard),
236
+ box-shadow var(--motion-fast) var(--ease-standard);
237
+ }
238
+ .field input::placeholder { color: var(--meta); }
239
+ .field input:hover { border-color: var(--meta); }
240
+ .field input:focus-visible {
241
+ border-color: var(--accent);
242
+ box-shadow: var(--focus-ring);
243
+ }
244
+ .field-help { font-size: var(--text-xs); color: var(--muted); }
245
+
246
+ /* ─── Cards / Lesson tiles — chunky offset shadow ───────── */
247
+ .card {
248
+ background: var(--bg);
249
+ border: 2px solid var(--border);
250
+ border-radius: var(--radius-md);
251
+ padding: var(--space-6);
252
+ display: flex;
253
+ flex-direction: column;
254
+ gap: var(--space-3);
255
+ box-shadow: var(--elev-raised);
256
+ transition:
257
+ transform var(--motion-fast) var(--ease-standard),
258
+ box-shadow var(--motion-fast) var(--ease-standard);
259
+ }
260
+ .card:hover {
261
+ transform: translateY(-2px);
262
+ box-shadow: 0 6px 0 #d7d7d7;
263
+ }
264
+ .card-icon {
265
+ width: 56px;
266
+ height: 56px;
267
+ border-radius: var(--radius-pill);
268
+ display: inline-flex;
269
+ align-items: center;
270
+ justify-content: center;
271
+ color: var(--accent-on);
272
+ font-family: var(--font-display);
273
+ font-weight: 800;
274
+ font-size: var(--text-xl);
275
+ box-shadow: 0 3px 0 color-mix(in oklab, currentColor, black 22%);
276
+ }
277
+ .card-icon-green { background: var(--accent); }
278
+ .card-icon-red { background: var(--danger); }
279
+ .card-icon-yellow { background: var(--warn); color: var(--fg); }
280
+
281
+ /* ─── Badges + chips ────────────────────────────────────── */
282
+ .badge {
283
+ display: inline-flex;
284
+ align-items: center;
285
+ gap: var(--space-2);
286
+ padding: var(--space-1) var(--space-3);
287
+ border-radius: var(--radius-pill);
288
+ font-family: var(--font-display);
289
+ font-size: var(--text-xs);
290
+ font-weight: 800;
291
+ letter-spacing: 0.04em;
292
+ line-height: 1.6;
293
+ text-transform: uppercase;
294
+ }
295
+ .badge-success { color: var(--accent-on); background: var(--success); }
296
+ .badge-streak { color: var(--fg); background: var(--warn); }
297
+ .badge-muted { color: var(--muted); background: var(--surface); border: 2px solid var(--border); }
298
+ .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
299
+
300
+ /* ─── Progress bar ──────────────────────────────────────── */
301
+ .progress {
302
+ position: relative;
303
+ background: var(--border);
304
+ border-radius: var(--radius-pill);
305
+ height: 16px;
306
+ overflow: hidden;
307
+ }
308
+ .progress > .progress-fill {
309
+ height: 100%;
310
+ width: 64%;
311
+ background: var(--accent);
312
+ border-radius: var(--radius-pill);
313
+ box-shadow: inset 0 -4px 0 var(--accent-active);
314
+ }
315
+
316
+ /* ─── Mascot panel ──────────────────────────────────────── */
317
+ .mascot-card {
318
+ background: var(--surface);
319
+ border: 2px solid var(--border);
320
+ border-radius: var(--radius-lg);
321
+ padding: var(--space-6);
322
+ display: flex;
323
+ flex-direction: column;
324
+ gap: var(--space-4);
325
+ box-shadow: var(--elev-raised);
326
+ }
327
+ .mascot-row {
328
+ display: flex;
329
+ align-items: center;
330
+ gap: var(--space-4);
331
+ }
332
+ .mascot-svg {
333
+ width: 96px;
334
+ height: 96px;
335
+ flex-shrink: 0;
336
+ filter: drop-shadow(0 3px 0 var(--accent-active));
337
+ }
338
+ .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
339
+
340
+ /* ─── Links + kbd ───────────────────────────────────────── */
341
+ a { color: var(--accent-active); text-decoration: none; font-weight: 700; }
342
+ a:hover { text-decoration: underline; text-underline-offset: 3px; }
343
+ kbd {
344
+ font-family: var(--font-mono);
345
+ font-size: var(--text-xs);
346
+ padding: 2px var(--space-2);
347
+ border-radius: var(--radius-sm);
348
+ border: 2px solid var(--border);
349
+ background: var(--bg);
350
+ color: var(--muted);
351
+ box-shadow: 0 2px 0 var(--border);
352
+ }
353
+
354
+ /* ─── Layout helpers ────────────────────────────────────── */
355
+ .hero-grid {
356
+ display: grid;
357
+ grid-template-columns: 1.4fr 1fr;
358
+ gap: var(--space-12);
359
+ align-items: center;
360
+ }
361
+ @media (max-width: 1023px) {
362
+ .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
363
+ }
364
+ .hero-actions {
365
+ display: flex;
366
+ gap: var(--space-3);
367
+ margin-block-start: var(--space-6);
368
+ flex-wrap: wrap;
369
+ }
370
+ .features-grid {
371
+ display: grid;
372
+ grid-template-columns: repeat(3, 1fr);
373
+ gap: var(--space-5);
374
+ }
375
+ @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
376
+ @media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
377
+ .form-row {
378
+ display: grid;
379
+ grid-template-columns: 1.2fr 1fr;
380
+ gap: var(--space-12);
381
+ align-items: start;
382
+ }
383
+ @media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
384
+ .form {
385
+ display: flex;
386
+ flex-direction: column;
387
+ gap: var(--space-4);
388
+ max-width: 420px;
389
+ background: var(--bg);
390
+ border: 2px solid var(--border);
391
+ border-radius: var(--radius-md);
392
+ padding: var(--space-6);
393
+ box-shadow: var(--elev-raised);
394
+ }
395
+ .form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
396
+ .icon { width: 18px; height: 18px; flex-shrink: 0; }
397
+ </style>
398
+ </head>
399
+ <body>
400
+ <main class="container">
401
+ <section data-od-id="hero">
402
+ <div class="hero-grid">
403
+ <div class="stack-6">
404
+ <span class="eyebrow">Reference fixture · duolingo</span>
405
+ <div class="stack-4">
406
+ <h1>Free language learning for the world.</h1>
407
+ <p class="lead" style="max-width: 48ch">
408
+ 15 minutes a day can teach you a language. Practice with bite-sized lessons,
409
+ keep your streak alive, and let Duo the owl cheer you on every step of the way.
410
+ </p>
411
+ </div>
412
+ <div class="hero-actions">
413
+ <a href="./tokens.css" class="btn btn-primary">
414
+ Get started — it's free
415
+ <svg class="icon" viewBox="0 0 24 24" fill="none"
416
+ stroke="currentColor" stroke-width="3"
417
+ stroke-linecap="round" stroke-linejoin="round"
418
+ aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
419
+ </a>
420
+ <a href="./DESIGN.md" class="btn btn-secondary">I already have an account</a>
421
+ </div>
422
+ </div>
423
+ <aside class="mascot-card" aria-label="Today's lesson">
424
+ <div class="mascot-row">
425
+ <svg class="mascot-svg" viewBox="0 0 96 96" aria-hidden="true">
426
+ <ellipse cx="48" cy="58" rx="34" ry="32" fill="var(--accent)"/>
427
+ <ellipse cx="48" cy="58" rx="22" ry="22" fill="color-mix(in oklab, var(--accent), white 22%)"/>
428
+ <circle cx="36" cy="46" r="9" fill="#ffffff"/>
429
+ <circle cx="60" cy="46" r="9" fill="#ffffff"/>
430
+ <circle cx="36" cy="48" r="4.5" fill="var(--fg)"/>
431
+ <circle cx="60" cy="48" r="4.5" fill="var(--fg)"/>
432
+ <circle cx="34.5" cy="46.5" r="1.6" fill="#ffffff"/>
433
+ <circle cx="58.5" cy="46.5" r="1.6" fill="#ffffff"/>
434
+ <path d="M40 60 L48 67 L56 60 Z" fill="var(--warn)"/>
435
+ <path d="M22 32 Q30 18 42 26" fill="none" stroke="var(--accent-active)" stroke-width="6" stroke-linecap="round"/>
436
+ <path d="M74 32 Q66 18 54 26" fill="none" stroke="var(--accent-active)" stroke-width="6" stroke-linecap="round"/>
437
+ </svg>
438
+ <div class="stack-2">
439
+ <h3>Spanish · Unit 3</h3>
440
+ <p class="body-sm body-muted">Order food at the café</p>
441
+ </div>
442
+ </div>
443
+ <div class="stack-2">
444
+ <div class="row-between">
445
+ <span class="body-sm" style="font-family: var(--font-display); font-weight: 800">Lesson progress</span>
446
+ <span class="body-sm" style="color: var(--muted)">3 / 5 crowns</span>
447
+ </div>
448
+ <div class="progress" aria-label="Lesson progress 64%">
449
+ <div class="progress-fill"></div>
450
+ </div>
451
+ </div>
452
+ <div class="row-between">
453
+ <span class="badge badge-streak">
454
+ <span class="badge-dot" aria-hidden="true"></span>
455
+ 14 day streak
456
+ </span>
457
+ <span class="body-sm" style="color: var(--muted)">+15 XP today</span>
458
+ </div>
459
+ </aside>
460
+ </div>
461
+ </section>
462
+
463
+ <section data-od-id="features">
464
+ <div class="stack-3">
465
+ <span class="eyebrow">What this fixture exercises</span>
466
+ <h2 style="max-width: 22ch">Joy is the curriculum.</h2>
467
+ <p class="body-muted" style="max-width: 56ch">
468
+ Every surface is built for the next correct answer — green to celebrate,
469
+ chunky shadows to invite the press, and Duo waiting on the other side.
470
+ </p>
471
+ </div>
472
+ <div class="features-grid" style="margin-block-start: var(--space-8)">
473
+ <article class="card">
474
+ <span class="card-icon card-icon-green" aria-hidden="true">✓</span>
475
+ <h3>Owl green throughout</h3>
476
+ <p class="body-muted body-sm">
477
+ --accent (#58cc02) covers 30%+ of every screen. Primary CTA, correct
478
+ answer, progress fill — they're all the same affirming green.
479
+ </p>
480
+ <a href="./tokens.css" class="body-sm">Inspect tokens →</a>
481
+ </article>
482
+ <article class="card">
483
+ <span class="card-icon card-icon-yellow" aria-hidden="true">★</span>
484
+ <h3>Tactile 4px shadow</h3>
485
+ <p class="body-muted body-sm">
486
+ --elev-raised drops a hard 4px offset under every button. On :active
487
+ we translateY(4px) and zero the shadow — the button literally presses.
488
+ </p>
489
+ <a href="./DESIGN.md" class="body-sm">Read the rule →</a>
490
+ </article>
491
+ <article class="card">
492
+ <span class="card-icon card-icon-red" aria-hidden="true">!</span>
493
+ <h3>Big confident type</h3>
494
+ <p class="body-muted body-sm">
495
+ --text-4xl (56px) is +25% over typical product brands. Feather Bold at
496
+ 800 is the default — we never whisper, we never apologize for size.
497
+ </p>
498
+ <a href="./tokens.css" class="body-sm">Inspect ladder →</a>
499
+ </article>
500
+ </div>
501
+ </section>
502
+
503
+ <section data-od-id="form">
504
+ <div class="form-row">
505
+ <div class="stack-4">
506
+ <span class="eyebrow">Start your streak</span>
507
+ <h2>One inbox is all it takes.</h2>
508
+ <p class="body-muted" style="max-width: 48ch">
509
+ We'll send a friendly nudge when Duo notices you missed a day. No tricks,
510
+ no spam — just the kind of gentle accountability that turns 15 minutes
511
+ into a year-long habit.
512
+ </p>
513
+ <p class="body-meta body-sm">
514
+ Press <kbd>⌘</kbd> <kbd>K</kbd> to search the lesson library.
515
+ </p>
516
+ </div>
517
+ <form class="form" onsubmit="event.preventDefault();">
518
+ <div class="field">
519
+ <label for="email">Email</label>
520
+ <input id="email" type="email" placeholder="you@duolingo.com" autocomplete="email" required />
521
+ <p class="field-help">Free forever · 600M+ learners worldwide</p>
522
+ </div>
523
+ <div class="form-actions">
524
+ <button type="submit" class="btn btn-primary">Create account</button>
525
+ <button type="button" class="btn btn-secondary">Sign in</button>
526
+ </div>
527
+ </form>
528
+ </div>
529
+ </section>
530
+ </main>
531
+ </body>
532
+ </html>
package/dist/designer/data/systems/duolingo/tokens.css ADDED
@@ -0,0 +1,130 @@
1
+ /* ─────────────────────────────────────────────────────────────────────────
2
+ * design-systems/duolingo/tokens.css
3
+ *
4
+ * Structured token bindings for "Design System Inspired by Duolingo".
5
+ * Bright owl-green gamified universe: chunky 4px bottom-shadows, big
6
+ * confident type, friendly pill geometry, mascot-driven warmth.
7
+ *
8
+ * Key brand decisions encoded here:
9
+ * - Owl Green (#58cc02) — dominant brand color, primary CTA + correct answer
10
+ * - Snow white canvas (#ffffff) — never tinted; optical clarity is the foundation
11
+ * - 4px chunky offset shadow (--elev-raised) — the "tactile press" signature
12
+ * - Feather Bold + Mona Sans — rounded display + Swiss workhorse body
13
+ * - Display starts at 56px — Duolingo never whispers; size is identity
14
+ * - Pill-and-rounded radii — 16px cards, 12px buttons/inputs, 9999px chips
15
+ * - Spring easing (back-out, slight overshoot) — gamified joy in motion
16
+ * - Eel-blue focus ring (#1cb0f6 tinted) — playful contrast to the green brand
17
+ * ─────────────────────────────────────────────────────────────────── */
18
+
19
+ :root {
20
+ /* ─── Surface ─────────────────────────────────────────────────────
21
+ * Snow white canvas with Eel as the section-break tone. Pure optical
22
+ * clarity — Duolingo never tints the page itself, only the chrome. */
23
+ --bg: #ffffff; /* Snow — primary background, the page canvas */
24
+ --surface: #f7f7f7; /* Eel — section break, secondary surface, lesson row */
25
+ --surface-warm: var(--surface); /* alias — palette has no third (warm) surface tier */
26
+
27
+ /* ─── Foreground ──────────────────────────────────────────────────
28
+ * Three real text tiers: Eel Black for primary, Wolf for secondary,
29
+ * Hare for tertiary. Each tier carries clear, child-readable contrast. */
30
+ --fg: #3c3c3c; /* Eel Black — primary text, headings, button labels */
31
+ --fg-2: var(--fg); /* alias — single primary text weight throughout */
32
+ --muted: #777777; /* Wolf — secondary text, captions, dividers */
33
+ --meta: #afafaf; /* Hare — tertiary metadata, placeholder, disabled */
34
+
35
+ /* ─── Border ──────────────────────────────────────────────────────
36
+ * Swan grey at thick 2–3px on most surfaces. Borders are visual,
37
+ * never hairlines — they read as part of the chunky aesthetic. */
38
+ --border: #e5e5e5; /* Swan — standard 2px border, card edge */
39
+ --border-soft: var(--border); /* alias — single border tier (no inner-row separation) */
40
+
41
+ /* ─── Accent ──────────────────────────────────────────────────────
42
+ * Owl Green — the brand IS this green. Used liberally in 30%+ of the
43
+ * surface for buttons, progress bars, success states, brand chrome. */
44
+ --accent: #58cc02;
45
+ --accent-on: #ffffff;
46
+ --accent-hover: #89e219; /* Owl Green Light — hover state, soft fills */
47
+ --accent-active: #58a700; /* Owl Green Deep — pressed state, the chunky shadow color */
48
+
49
+ /* ─── Semantic ────────────────────────────────────────────────────
50
+ * Success IS owl green — DESIGN.md: "primary CTA, correct answer" are
51
+ * the same affordance. Bee Yellow warns; Cardinal Red marks wrong. */
52
+ --success: #58cc02; /* Owl Green — "correct answer" is the brand */
53
+ --warn: #ffc800; /* Bee Yellow — pro badge, achievement glow */
54
+ --danger: #ff4b4b; /* Cardinal Red — wrong answer, life lost */
55
+
56
+ /* ─── Typography ──────────────────────────────────────────────────
57
+ * Feather Bold (rounded display) drives chrome and headings; Mona Sans
58
+ * carries body. Default weight is 800 — Duolingo never whispers. */
59
+ --font-display: "Feather Bold", "DIN Round Pro", "Helvetica Neue", sans-serif;
60
+ --font-body: "Mona Sans", "Helvetica Neue", system-ui, sans-serif;
61
+ --font-mono: "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
62
+
63
+ /* Type scale — DESIGN.md §3. Display 56px is +25–40% above typical
64
+ * product brands; the ladder favors round whole-pixel sizes. */
65
+ --text-xs: 12px; /* Tiny utility, progress numerals */
66
+ --text-sm: 13px; /* Caption — XP counter, metadata */
67
+ --text-base: 15px; /* Body — standard prose */
68
+ --text-lg: 18px; /* H3 / lesson row title / featured body */
69
+ --text-xl: 24px; /* H2 — section heading */
70
+ --text-2xl: 32px; /* H1 — page title */
71
+ --text-3xl: 40px; /* Sub-display — hero secondary, marketing eyebrow */
72
+ --text-4xl: 56px; /* Display — onboarding hero, never timid */
73
+
74
+ --leading-body: 1.5;
75
+ --leading-tight: 1.15; /* Headings — slight breathing under big rounded faces */
76
+ --tracking-display: -0.01em; /* ≈ -0.56px at 56px — confident, not condensed */
77
+
78
+ /* ─── Spacing ─────────────────────────────────────────────────────
79
+ * 4px base unit (DESIGN.md §5): 4, 8, 12, 16, 20, 24, 32, 48. */
80
+ --space-1: 4px;
81
+ --space-2: 8px;
82
+ --space-3: 12px;
83
+ --space-4: 16px;
84
+ --space-5: 20px;
85
+ --space-6: 24px;
86
+ --space-8: 32px;
87
+ --space-12: 48px;
88
+
89
+ /* Section rhythm — generous on desktop, tight on phone so the lesson
90
+ * tree column reads as a continuous flow rather than chunked pages. */
91
+ --section-y-desktop: 80px;
92
+ --section-y-tablet: 56px;
93
+ --section-y-phone: 40px;
94
+
95
+ /* ─── Radius ──────────────────────────────────────────────────────
96
+ * Pill-and-rounded everywhere. Cards 16px (DESIGN.md §4), buttons +
97
+ * inputs 12px, chips and progress bars 9999px — friendly forever. */
98
+ --radius-sm: 12px; /* Inputs, buttons — friendly compact corners */
99
+ --radius-md: 16px; /* Cards, lesson tiles — primary signature */
100
+ --radius-lg: 20px; /* Featured containers, modals */
101
+ --radius-pill: 9999px; /* Chips, progress bars, avatars */
102
+
103
+ /* ─── Elevation ───────────────────────────────────────────────────
104
+ * Chunky 4px bottom-shadow IS Duolingo. Buttons and cards cast a hard
105
+ * offset shadow that reads as a 3D button waiting to be pressed. The
106
+ * raised value pairs with translateY(4px) on :active to "press" it. */
107
+ --elev-flat: none;
108
+ --elev-ring: 0 0 0 2px var(--border); /* 2px ring matches the chunky border weight */
109
+ --elev-raised: 0 4px 0 #d7d7d7; /* Hard tactile shadow — the press affordance */
110
+
111
+ /* ─── Focus ring ──────────────────────────────────────────────────
112
+ * Eel Blue 20% tint (DESIGN.md §4 inputs) — playful contrast against
113
+ * the ambient owl-green brand; signals "you can interact with this". */
114
+ --focus-ring: 0 0 0 3px rgba(28, 176, 246, 0.2);
115
+
116
+ /* ─── Motion ──────────────────────────────────────────────────────
117
+ * 180ms button press, 320ms skill-node unlock; back-out spring with
118
+ * slight overshoot (DESIGN.md §6). Every state change feels gamified. */
119
+ --motion-fast: 180ms;
120
+ --motion-base: 320ms;
121
+ --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);
122
+
123
+ /* ─── Layout ──────────────────────────────────────────────────────
124
+ * 1080px container (DESIGN.md §5) — narrower than a SaaS deck because
125
+ * Duolingo content reads vertically as a focused lesson tree column. */
126
+ --container-max: 1080px;
127
+ --container-gutter-desktop: 24px;
128
+ --container-gutter-tablet: 20px;
129
+ --container-gutter-phone: 16px;
130
+ }