@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/cosmic/DESIGN.md ADDED
@@ -0,0 +1,71 @@
1
+ # Design System Inspired by Cosmic
2
+
3
+ > Category: Creative & Artistic
4
+ > Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.
5
+
6
+ ## 1. Visual Theme & Atmosphere
7
+
8
+ Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.
9
+
10
+ - **Visual style:** playful, premium
11
+ - **Color stance:** primary, neutral, success, warning, danger
12
+ - **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
13
+
14
+ ## 2. Color
15
+
16
+ - **Primary:** `#3B82F6` — Token from style foundations.
17
+ - **Secondary:** `#8B5CF6` — Token from style foundations.
18
+ - **Success:** `#16A34A` — Token from style foundations.
19
+ - **Warning:** `#D97706` — Token from style foundations.
20
+ - **Danger:** `#DC2626` — Token from style foundations.
21
+ - **Surface:** `#FFFFFF` — Token from style foundations.
22
+ - **Text:** `#111827` — Token from style foundations.
23
+ - **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
24
+
25
+ - Favor Primary (#3B82F6) for CTA emphasis.
26
+ - Use Surface (#FFFFFF) for large backgrounds and cards.
27
+ - Keep body copy on Text (#111827) for legibility.
28
+
29
+ ## 3. Typography
30
+
31
+ - **Scale:** 12/14/16/20/24/32
32
+ - **Families:** primary=Audiowide, display=Audiowide, mono=JetBrains Mono
33
+ - **Weights:** 400
34
+ - Headings should carry the style personality; body text should optimize scanability and contrast.
35
+
36
+ ## 4. Spacing & Grid
37
+
38
+ - **Spacing scale:** 4/8/12/16/24/32
39
+ - Keep vertical rhythm consistent across sections and components.
40
+ - Align columns and modules to a predictable grid; avoid ad-hoc offsets.
41
+
42
+ ## 5. Layout & Composition
43
+
44
+ - Prefer clear content blocks with consistent internal padding.
45
+ - Keep hierarchy obvious: headline → support text → primary action.
46
+ - Use whitespace to separate concerns before adding borders or shadows.
47
+
48
+ ## 6. Components
49
+
50
+ - Buttons: primary action uses `#3B82F6`; secondary actions stay neutral.
51
+ - Inputs: strong focus-visible states, clear labels, and predictable error messaging.
52
+ - Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
53
+
54
+ ## 7. Motion & Interaction
55
+
56
+ - Use subtle transitions that emphasize Primary (#3B82F6) as the interaction signal.
57
+ - Default to short, purposeful transitions (150–250ms) with stable easing.
58
+ - Ensure hover, focus-visible, active, disabled, and loading states are explicit.
59
+
60
+ ## 8. Voice & Brand
61
+
62
+ - Tone should reflect the visual style: concise, confident, and product-specific.
63
+ - Keep microcopy action-oriented and avoid generic filler language.
64
+ - Preserve the style identity in headlines while keeping UI labels literal and clear.
65
+
66
+ ## 9. Anti-patterns
67
+
68
+ - Do not introduce off-palette colors when an existing token can solve the problem.
69
+ - Do not flatten hierarchy by using the same type size/weight for all text.
70
+ - Do not add decorative effects that reduce readability or accessibility.
71
+ - Do not mix unrelated visual metaphors in the same interface.
package/dist/designer/data/systems/cosmic/components.html ADDED
@@ -0,0 +1,136 @@
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>Cosmic - reference components</title>
7
+ <meta name="description" content="Reference fixture for design-systems/cosmic: cosmic dark interface with star-field depth, luminous violet-blue accents, and spacious modules." />
8
+ <style>
9
+ :root {
10
+ --bg: #070711;
11
+ --surface: #111126;
12
+ --surface-warm: #1e1540;
13
+ --fg: #f8f7ff;
14
+ --fg-2: #d6ccff;
15
+ --muted: #9d8ad4;
16
+ --meta: #c084fc;
17
+ --border: #34265e;
18
+ --border-soft: #241c42;
19
+ --accent: #c084fc;
20
+ --accent-on: #13051f;
21
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
22
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
23
+ --success: #39ff88;
24
+ --warn: #fff34d;
25
+ --danger: #ff4d8d;
26
+ --font-display: Inter, system-ui, sans-serif;
27
+ --font-body: Inter, system-ui, sans-serif;
28
+ --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
29
+ --text-xs: 12px;
30
+ --text-sm: 14px;
31
+ --text-base: 16px;
32
+ --text-lg: 18px;
33
+ --text-xl: 24px;
34
+ --text-2xl: 36px;
35
+ --text-3xl: 54px;
36
+ --text-4xl: 76px;
37
+ --leading-body: 1.52;
38
+ --leading-tight: 1.06;
39
+ --tracking-display: -0.025em;
40
+ --space-1: 4px;
41
+ --space-2: 8px;
42
+ --space-3: 12px;
43
+ --space-4: 16px;
44
+ --space-5: 20px;
45
+ --space-6: 24px;
46
+ --space-8: 32px;
47
+ --space-12: 48px;
48
+ --section-y-desktop: 96px;
49
+ --section-y-tablet: 68px;
50
+ --section-y-phone: 48px;
51
+ --radius-sm: 10px;
52
+ --radius-md: 16px;
53
+ --radius-lg: 24px;
54
+ --radius-pill: 9999px;
55
+ --elev-flat: none;
56
+ --elev-ring: 0 0 0 1px var(--border);
57
+ --elev-raised: 0 24px 80px rgba(192, 132, 252, 0.22);
58
+ --focus-ring: 0 0 0 4px rgba(192, 132, 252, 0.32);
59
+ --motion-fast: 150ms;
60
+ --motion-base: 240ms;
61
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
62
+ --container-max: 1180px;
63
+ --container-gutter-desktop: 36px;
64
+ --container-gutter-tablet: 24px;
65
+ --container-gutter-phone: 16px;
66
+ }
67
+
68
+ *, *::before, *::after { box-sizing: border-box; }
69
+ html, body { margin: 0; padding: 0; }
70
+ body { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
71
+ .page { min-height: 100vh; background: radial-gradient(circle at 78% 10%, rgba(192, 132, 252, 0.35), transparent 34%), radial-gradient(circle at 20% 20%, rgba(45, 212, 191, 0.22), transparent 32%), #070711; }
72
+ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
73
+ section { padding-block: var(--section-y-desktop); }
74
+ @media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } section { padding-block: var(--section-y-tablet); } }
75
+ @media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } section { padding-block: var(--section-y-phone); } }
76
+ h1, h2, h3, p { margin: 0; }
77
+ h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
78
+ h1 { max-width: 840px; font-size: var(--text-4xl); font-weight: 760; }
79
+ h2 { font-size: var(--text-3xl); font-weight: 700; }
80
+ h3 { font-size: var(--text-xl); font-weight: 700; }
81
+ .eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
82
+ .lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }
83
+ .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; }
84
+ .stack > * + * { margin-block-start: var(--space-4); }
85
+ .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
86
+ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
87
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
88
+ .btn-primary { background: var(--accent); color: var(--accent-on); }
89
+ .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
90
+ .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
91
+ .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
92
+ .panel { background: color-mix(in oklab, var(--surface), transparent 4%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); overflow: hidden; }
93
+ .panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
94
+ .status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--meta); font: 700 var(--text-xs) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
95
+ .status::before { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); content: ""; }
96
+ .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-soft); }
97
+ .metric { padding: var(--space-5); border-right: 1px solid var(--border-soft); }
98
+ .metric:last-child { border-right: 0; }
99
+ .metric strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
100
+ .metric span { color: var(--muted); font-size: var(--text-sm); }
101
+ .card-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
102
+ .mini-card { min-height: 148px; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-warm); }
103
+ .mini-card p, .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
104
+ .swatches { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
105
+ .swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
106
+ .swatch.accent { background: var(--accent); } .swatch.surface { background: var(--surface); } .swatch.warm { background: var(--surface-warm); } .swatch.fg { background: var(--fg); }
107
+ .field { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); }
108
+ label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
109
+ input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; }
110
+ input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
111
+ .lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
112
+ .tile { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
113
+ @media (max-width: 860px) { .hero, .lower { grid-template-columns: 1fr; } .metric-grid, .card-row { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); } .metric:last-child { border-bottom: 0; } }
114
+ </style>
115
+ </head>
116
+ <body>
117
+ <main class="page">
118
+ <section>
119
+ <div class="container hero">
120
+ <div class="stack">
121
+ <p class="eyebrow">Cosmic design system</p>
122
+ <h1>Cosmic exploration interface</h1>
123
+ <p class="lead">Space-like depth, luminous signals, and immersive cards for speculative experiences.</p>
124
+ <div class="actions" aria-label="Reference actions"><a class="btn btn-primary" href="#">Primary action</a><a class="btn btn-secondary" href="#">Secondary action</a></div>
125
+ </div>
126
+ <article class="panel" aria-label="Cosmic component preview">
127
+ <div class="panel-head"><div><p class="eyebrow">Live module</p><h3>Reference component</h3></div><span class="status">online</span></div>
128
+ <div class="metric-grid"><div class="metric"><strong>98%</strong><span>Signal quality</span></div><div class="metric"><strong>24</strong><span>Active flows</span></div><div class="metric"><strong>3.2s</strong><span>Response time</span></div></div>
129
+ <div class="card-row"><div class="mini-card"><h3>Palette</h3><p>cosmic dark interface with star-field depth, luminous violet-blue accents, and spacious modules.</p><div class="swatches" aria-label="Token swatches"><span class="swatch accent"></span><span class="swatch surface"></span><span class="swatch warm"></span><span class="swatch fg"></span></div></div><div class="mini-card"><h3>Control</h3><p>Focus, hover, and status states share the same system signal.</p><div class="field"><label for="cosmic-input">Reference input</label><input id="cosmic-input" value="Cosmic system token" /></div></div></div>
130
+ </article>
131
+ </div>
132
+ </section>
133
+ <section><div class="container lower"><article class="tile"><p class="eyebrow">Typography</p><h2>Display rhythm</h2><p>Headlines use the display stack with the declared scale and leading.</p></article><article class="tile"><p class="eyebrow">Surface</p><h2>Layer system</h2><p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p></article><article class="tile"><p class="eyebrow">Interaction</p><h2>Motion states</h2><p>Buttons, inputs, and panels use system-specific focus rings and easing.</p></article></div></section>
134
+ </main>
135
+ </body>
136
+ </html>
package/dist/designer/data/systems/cosmic/tokens.css ADDED
@@ -0,0 +1,63 @@
1
+ /* design-systems/cosmic/tokens.css
2
+ * Structured token bindings for Cosmic.
3
+ * cosmic dark interface with star-field depth, luminous violet-blue accents, and spacious modules.
4
+ */
5
+
6
+ :root {
7
+ --bg: #070711;
8
+ --surface: #111126;
9
+ --surface-warm: #1e1540;
10
+ --fg: #f8f7ff;
11
+ --fg-2: #d6ccff;
12
+ --muted: #9d8ad4;
13
+ --meta: #c084fc;
14
+ --border: #34265e;
15
+ --border-soft: #241c42;
16
+ --accent: #c084fc;
17
+ --accent-on: #13051f;
18
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
19
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
20
+ --success: #39ff88;
21
+ --warn: #fff34d;
22
+ --danger: #ff4d8d;
23
+ --font-display: Inter, system-ui, sans-serif;
24
+ --font-body: Inter, system-ui, sans-serif;
25
+ --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
26
+ --text-xs: 12px;
27
+ --text-sm: 14px;
28
+ --text-base: 16px;
29
+ --text-lg: 18px;
30
+ --text-xl: 24px;
31
+ --text-2xl: 36px;
32
+ --text-3xl: 54px;
33
+ --text-4xl: 76px;
34
+ --leading-body: 1.52;
35
+ --leading-tight: 1.06;
36
+ --tracking-display: -0.025em;
37
+ --space-1: 4px;
38
+ --space-2: 8px;
39
+ --space-3: 12px;
40
+ --space-4: 16px;
41
+ --space-5: 20px;
42
+ --space-6: 24px;
43
+ --space-8: 32px;
44
+ --space-12: 48px;
45
+ --section-y-desktop: 96px;
46
+ --section-y-tablet: 68px;
47
+ --section-y-phone: 48px;
48
+ --radius-sm: 10px;
49
+ --radius-md: 16px;
50
+ --radius-lg: 24px;
51
+ --radius-pill: 9999px;
52
+ --elev-flat: none;
53
+ --elev-ring: 0 0 0 1px var(--border);
54
+ --elev-raised: 0 24px 80px rgba(192, 132, 252, 0.22);
55
+ --focus-ring: 0 0 0 4px rgba(192, 132, 252, 0.32);
56
+ --motion-fast: 150ms;
57
+ --motion-base: 240ms;
58
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
59
+ --container-max: 1180px;
60
+ --container-gutter-desktop: 36px;
61
+ --container-gutter-tablet: 24px;
62
+ --container-gutter-phone: 16px;
63
+ }
package/dist/designer/data/systems/creative/DESIGN.md ADDED
@@ -0,0 +1,71 @@
1
+ # Design System Inspired by Creative
2
+
3
+ > Category: Creative & Artistic
4
+ > Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.
5
+
6
+ ## 1. Visual Theme & Atmosphere
7
+
8
+ Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.
9
+
10
+ - **Visual style:** playful
11
+ - **Color stance:** primary, secondary, neutral, success, warning, danger
12
+ - **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
13
+
14
+ ## 2. Color
15
+
16
+ - **Primary:** `#3B82F6` — Token from style foundations.
17
+ - **Secondary:** `#8B5CF6` — Token from style foundations.
18
+ - **Success:** `#16A34A` — Token from style foundations.
19
+ - **Warning:** `#D97706` — Token from style foundations.
20
+ - **Danger:** `#DC2626` — Token from style foundations.
21
+ - **Surface:** `#FFFFFF` — Token from style foundations.
22
+ - **Text:** `#111827` — Token from style foundations.
23
+ - **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
24
+
25
+ - Favor Primary (#3B82F6) for CTA emphasis.
26
+ - Use Surface (#FFFFFF) for large backgrounds and cards.
27
+ - Keep body copy on Text (#111827) for legibility.
28
+
29
+ ## 3. Typography
30
+
31
+ - **Scale:** 12/14/16/20/24/32
32
+ - **Families:** primary=Bangers, display=Bangers, mono=IBM Plex Mono
33
+ - **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
34
+ - Headings should carry the style personality; body text should optimize scanability and contrast.
35
+
36
+ ## 4. Spacing & Grid
37
+
38
+ - **Spacing scale:** 4/8/12/16/24/32
39
+ - Keep vertical rhythm consistent across sections and components.
40
+ - Align columns and modules to a predictable grid; avoid ad-hoc offsets.
41
+
42
+ ## 5. Layout & Composition
43
+
44
+ - Prefer clear content blocks with consistent internal padding.
45
+ - Keep hierarchy obvious: headline → support text → primary action.
46
+ - Use whitespace to separate concerns before adding borders or shadows.
47
+
48
+ ## 6. Components
49
+
50
+ - Buttons: primary action uses `#3B82F6`; secondary actions stay neutral.
51
+ - Inputs: strong focus-visible states, clear labels, and predictable error messaging.
52
+ - Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
53
+
54
+ ## 7. Motion & Interaction
55
+
56
+ - Use subtle transitions that emphasize Primary (#3B82F6) as the interaction signal.
57
+ - Default to short, purposeful transitions (150–250ms) with stable easing.
58
+ - Ensure hover, focus-visible, active, disabled, and loading states are explicit.
59
+
60
+ ## 8. Voice & Brand
61
+
62
+ - Tone should reflect the visual style: concise, confident, and product-specific.
63
+ - Keep microcopy action-oriented and avoid generic filler language.
64
+ - Preserve the style identity in headlines while keeping UI labels literal and clear.
65
+
66
+ ## 9. Anti-patterns
67
+
68
+ - Do not introduce off-palette colors when an existing token can solve the problem.
69
+ - Do not flatten hierarchy by using the same type size/weight for all text.
70
+ - Do not add decorative effects that reduce readability or accessibility.
71
+ - Do not mix unrelated visual metaphors in the same interface.
package/dist/designer/data/systems/creative/components.html ADDED
@@ -0,0 +1,136 @@
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>Creative - reference components</title>
7
+ <meta name="description" content="Reference fixture for design-systems/creative: creative workspace language with warm bright panels, rounded controls, and energetic accent states." />
8
+ <style>
9
+ :root {
10
+ --bg: #fff8d7;
11
+ --surface: #ffffff;
12
+ --surface-warm: #ffef9f;
13
+ --fg: #1d1836;
14
+ --fg-2: #4c426c;
15
+ --muted: #796f91;
16
+ --meta: #ff6b00;
17
+ --border: #eadfba;
18
+ --border-soft: #f5eccd;
19
+ --accent: #ff6b00;
20
+ --accent-on: #ffffff;
21
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
22
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
23
+ --success: #2e9d57;
24
+ --warn: #ffb020;
25
+ --danger: #e5484d;
26
+ --font-display: Inter, system-ui, sans-serif;
27
+ --font-body: Inter, system-ui, sans-serif;
28
+ --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
29
+ --text-xs: 12px;
30
+ --text-sm: 14px;
31
+ --text-base: 16px;
32
+ --text-lg: 18px;
33
+ --text-xl: 24px;
34
+ --text-2xl: 36px;
35
+ --text-3xl: 54px;
36
+ --text-4xl: 76px;
37
+ --leading-body: 1.52;
38
+ --leading-tight: 1.06;
39
+ --tracking-display: -0.025em;
40
+ --space-1: 4px;
41
+ --space-2: 8px;
42
+ --space-3: 12px;
43
+ --space-4: 16px;
44
+ --space-5: 20px;
45
+ --space-6: 24px;
46
+ --space-8: 32px;
47
+ --space-12: 48px;
48
+ --section-y-desktop: 96px;
49
+ --section-y-tablet: 68px;
50
+ --section-y-phone: 48px;
51
+ --radius-sm: 10px;
52
+ --radius-md: 16px;
53
+ --radius-lg: 24px;
54
+ --radius-pill: 9999px;
55
+ --elev-flat: none;
56
+ --elev-ring: 0 0 0 1px var(--border);
57
+ --elev-raised: 0 18px 44px rgba(29, 24, 54, 0.14);
58
+ --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26);
59
+ --motion-fast: 150ms;
60
+ --motion-base: 240ms;
61
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
62
+ --container-max: 1180px;
63
+ --container-gutter-desktop: 36px;
64
+ --container-gutter-tablet: 24px;
65
+ --container-gutter-phone: 16px;
66
+ }
67
+
68
+ *, *::before, *::after { box-sizing: border-box; }
69
+ html, body { margin: 0; padding: 0; }
70
+ body { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
71
+ .page { min-height: 100vh; background: linear-gradient(135deg, #fff8d7 0%, #ffef9f 52%, #ffffff 100%); }
72
+ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
73
+ section { padding-block: var(--section-y-desktop); }
74
+ @media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } section { padding-block: var(--section-y-tablet); } }
75
+ @media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } section { padding-block: var(--section-y-phone); } }
76
+ h1, h2, h3, p { margin: 0; }
77
+ h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
78
+ h1 { max-width: 840px; font-size: var(--text-4xl); font-weight: 760; }
79
+ h2 { font-size: var(--text-3xl); font-weight: 700; }
80
+ h3 { font-size: var(--text-xl); font-weight: 700; }
81
+ .eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
82
+ .lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }
83
+ .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; }
84
+ .stack > * + * { margin-block-start: var(--space-4); }
85
+ .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
86
+ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
87
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
88
+ .btn-primary { background: var(--accent); color: var(--accent-on); }
89
+ .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
90
+ .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
91
+ .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
92
+ .panel { background: color-mix(in oklab, var(--surface), transparent 4%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); overflow: hidden; }
93
+ .panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
94
+ .status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--meta); font: 700 var(--text-xs) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
95
+ .status::before { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); content: ""; }
96
+ .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-soft); }
97
+ .metric { padding: var(--space-5); border-right: 1px solid var(--border-soft); }
98
+ .metric:last-child { border-right: 0; }
99
+ .metric strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
100
+ .metric span { color: var(--muted); font-size: var(--text-sm); }
101
+ .card-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
102
+ .mini-card { min-height: 148px; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-warm); }
103
+ .mini-card p, .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
104
+ .swatches { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
105
+ .swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
106
+ .swatch.accent { background: var(--accent); } .swatch.surface { background: var(--surface); } .swatch.warm { background: var(--surface-warm); } .swatch.fg { background: var(--fg); }
107
+ .field { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); }
108
+ label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
109
+ input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; }
110
+ input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
111
+ .lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
112
+ .tile { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
113
+ @media (max-width: 860px) { .hero, .lower { grid-template-columns: 1fr; } .metric-grid, .card-row { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); } .metric:last-child { border-bottom: 0; } }
114
+ </style>
115
+ </head>
116
+ <body>
117
+ <main class="page">
118
+ <section>
119
+ <div class="container hero">
120
+ <div class="stack">
121
+ <p class="eyebrow">Creative design system</p>
122
+ <h1>Creative campaign workspace</h1>
123
+ <p class="lead">Flexible cards, expressive accents, and friendly controls for concept-led work.</p>
124
+ <div class="actions" aria-label="Reference actions"><a class="btn btn-primary" href="#">Primary action</a><a class="btn btn-secondary" href="#">Secondary action</a></div>
125
+ </div>
126
+ <article class="panel" aria-label="Creative component preview">
127
+ <div class="panel-head"><div><p class="eyebrow">Live module</p><h3>Reference component</h3></div><span class="status">online</span></div>
128
+ <div class="metric-grid"><div class="metric"><strong>98%</strong><span>Signal quality</span></div><div class="metric"><strong>24</strong><span>Active flows</span></div><div class="metric"><strong>3.2s</strong><span>Response time</span></div></div>
129
+ <div class="card-row"><div class="mini-card"><h3>Palette</h3><p>creative workspace language with warm bright panels, rounded controls, and energetic accent states.</p><div class="swatches" aria-label="Token swatches"><span class="swatch accent"></span><span class="swatch surface"></span><span class="swatch warm"></span><span class="swatch fg"></span></div></div><div class="mini-card"><h3>Control</h3><p>Focus, hover, and status states share the same system signal.</p><div class="field"><label for="creative-input">Reference input</label><input id="creative-input" value="Creative system token" /></div></div></div>
130
+ </article>
131
+ </div>
132
+ </section>
133
+ <section><div class="container lower"><article class="tile"><p class="eyebrow">Typography</p><h2>Display rhythm</h2><p>Headlines use the display stack with the declared scale and leading.</p></article><article class="tile"><p class="eyebrow">Surface</p><h2>Layer system</h2><p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p></article><article class="tile"><p class="eyebrow">Interaction</p><h2>Motion states</h2><p>Buttons, inputs, and panels use system-specific focus rings and easing.</p></article></div></section>
134
+ </main>
135
+ </body>
136
+ </html>
package/dist/designer/data/systems/creative/tokens.css ADDED
@@ -0,0 +1,63 @@
1
+ /* design-systems/creative/tokens.css
2
+ * Structured token bindings for Creative.
3
+ * creative workspace language with warm bright panels, rounded controls, and energetic accent states.
4
+ */
5
+
6
+ :root {
7
+ --bg: #fff8d7;
8
+ --surface: #ffffff;
9
+ --surface-warm: #ffef9f;
10
+ --fg: #1d1836;
11
+ --fg-2: #4c426c;
12
+ --muted: #796f91;
13
+ --meta: #ff6b00;
14
+ --border: #eadfba;
15
+ --border-soft: #f5eccd;
16
+ --accent: #ff6b00;
17
+ --accent-on: #ffffff;
18
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
19
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
20
+ --success: #2e9d57;
21
+ --warn: #ffb020;
22
+ --danger: #e5484d;
23
+ --font-display: Inter, system-ui, sans-serif;
24
+ --font-body: Inter, system-ui, sans-serif;
25
+ --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
26
+ --text-xs: 12px;
27
+ --text-sm: 14px;
28
+ --text-base: 16px;
29
+ --text-lg: 18px;
30
+ --text-xl: 24px;
31
+ --text-2xl: 36px;
32
+ --text-3xl: 54px;
33
+ --text-4xl: 76px;
34
+ --leading-body: 1.52;
35
+ --leading-tight: 1.06;
36
+ --tracking-display: -0.025em;
37
+ --space-1: 4px;
38
+ --space-2: 8px;
39
+ --space-3: 12px;
40
+ --space-4: 16px;
41
+ --space-5: 20px;
42
+ --space-6: 24px;
43
+ --space-8: 32px;
44
+ --space-12: 48px;
45
+ --section-y-desktop: 96px;
46
+ --section-y-tablet: 68px;
47
+ --section-y-phone: 48px;
48
+ --radius-sm: 10px;
49
+ --radius-md: 16px;
50
+ --radius-lg: 24px;
51
+ --radius-pill: 9999px;
52
+ --elev-flat: none;
53
+ --elev-ring: 0 0 0 1px var(--border);
54
+ --elev-raised: 0 18px 44px rgba(29, 24, 54, 0.14);
55
+ --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26);
56
+ --motion-fast: 150ms;
57
+ --motion-base: 240ms;
58
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
59
+ --container-max: 1180px;
60
+ --container-gutter-desktop: 36px;
61
+ --container-gutter-tablet: 24px;
62
+ --container-gutter-phone: 16px;
63
+ }