@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/clickhouse/components.html ADDED
@@ -0,0 +1,506 @@
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>ClickHouse — reference components</title>
7
+ <meta
8
+ name="description"
9
+ content="Reference fixture for design-systems/clickhouse. Pure black canvas,
10
+ neon volt accent (#faff69), Inter Black (900) display at 96px,
11
+ charcoal-bordered cards, terminal-grade database aesthetic."
12
+ />
13
+
14
+ <style>
15
+ :root {
16
+ --bg: #000000;
17
+ --surface: #141414;
18
+ --surface-warm: var(--surface);
19
+
20
+ --fg: #ffffff;
21
+ --fg-2: #a0a0a0;
22
+ --muted: #a0a0a0;
23
+ --meta: #585858;
24
+
25
+ --border: rgba(65, 65, 65, 0.8);
26
+ --border-soft: #343434;
27
+
28
+ --accent: #faff69;
29
+ --accent-on: #151515;
30
+ --accent-hover: #1d1d1d;
31
+ --accent-active: #f4f692;
32
+
33
+ --success: #166534;
34
+ --warn: #eab308;
35
+ --danger: #dc2626;
36
+
37
+ --font-display: "Inter", "Basier", Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
38
+ --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
39
+ --font-mono: "Inconsolata", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
40
+
41
+ --text-xs: 12px;
42
+ --text-sm: 14px;
43
+ --text-base: 16px;
44
+ --text-lg: 20px;
45
+ --text-xl: 24px;
46
+ --text-2xl: 36px;
47
+ --text-3xl: 72px;
48
+ --text-4xl: 96px;
49
+
50
+ --leading-body: 1.5;
51
+ --leading-tight: 1.0;
52
+ --tracking-display: normal;
53
+
54
+ --space-1: 4px;
55
+ --space-2: 8px;
56
+ --space-3: 12px;
57
+ --space-4: 16px;
58
+ --space-5: 20px;
59
+ --space-6: 24px;
60
+ --space-8: 32px;
61
+ --space-12: 48px;
62
+
63
+ --section-y-desktop: 64px;
64
+ --section-y-tablet: 48px;
65
+ --section-y-phone: 32px;
66
+
67
+ --radius-sm: 4px;
68
+ --radius-md: 8px;
69
+ --radius-lg: 8px;
70
+ --radius-pill: 9999px;
71
+
72
+ --elev-flat: none;
73
+ --elev-ring: 0 0 0 1px var(--border);
74
+ --elev-raised: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
75
+
76
+ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
77
+
78
+ --motion-fast: 150ms;
79
+ --motion-base: 200ms;
80
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
81
+
82
+ --container-max: 1280px;
83
+ --container-gutter-desktop: 24px;
84
+ --container-gutter-tablet: 16px;
85
+ --container-gutter-phone: 12px;
86
+ }
87
+
88
+ /* ─── Reset ─────────────────────────────────────────────── */
89
+ *, *::before, *::after { box-sizing: border-box; }
90
+ html, body { margin: 0; padding: 0; }
91
+ body {
92
+ background: var(--bg);
93
+ color: var(--fg);
94
+ font-family: var(--font-body);
95
+ font-size: var(--text-base);
96
+ line-height: var(--leading-body);
97
+ -webkit-font-smoothing: antialiased;
98
+ }
99
+
100
+ /* ─── Layout ─────────────────────────────────────────────── */
101
+ .container {
102
+ max-width: var(--container-max);
103
+ margin-inline: auto;
104
+ padding-inline: var(--container-gutter-desktop);
105
+ }
106
+ section { padding-block: var(--section-y-desktop); }
107
+ section + section { border-top: 1px solid var(--border); }
108
+ @media (max-width: 1023px) {
109
+ .container { padding-inline: var(--container-gutter-tablet); }
110
+ section { padding-block: var(--section-y-tablet); }
111
+ }
112
+ @media (max-width: 639px) {
113
+ .container { padding-inline: var(--container-gutter-phone); }
114
+ section { padding-block: var(--section-y-phone); }
115
+ }
116
+
117
+ /* ─── Typography — weight IS hierarchy ──────────────────── */
118
+ h1, h2, h3 {
119
+ font-family: var(--font-display);
120
+ line-height: var(--leading-tight);
121
+ margin: 0;
122
+ color: var(--fg);
123
+ }
124
+ h1 {
125
+ font-size: var(--text-4xl);
126
+ font-weight: 900; /* Inter Black — the weapon */
127
+ letter-spacing: var(--tracking-display);
128
+ }
129
+ h2 {
130
+ font-size: var(--text-2xl);
131
+ font-weight: 600; /* Basier-style feature heading */
132
+ line-height: 1.30;
133
+ }
134
+ h3 {
135
+ font-size: var(--text-xl);
136
+ font-weight: 700;
137
+ line-height: 1.17;
138
+ }
139
+ p { margin: 0; }
140
+ .lead {
141
+ font-size: var(--text-lg);
142
+ color: var(--muted);
143
+ line-height: 1.56;
144
+ font-weight: 400;
145
+ }
146
+ .body-muted { color: var(--muted); }
147
+ .body-sm { font-size: var(--text-sm); }
148
+ .body-mono { font-family: var(--font-mono); font-weight: 600; }
149
+ /* Uppercase overline — DESIGN.md: 14px / weight 600 / 1.4px tracking */
150
+ .eyebrow {
151
+ font-size: var(--text-sm);
152
+ color: var(--muted);
153
+ text-transform: uppercase;
154
+ letter-spacing: 1.4px;
155
+ font-weight: 600;
156
+ line-height: 1.43;
157
+ }
158
+ .stack-3 > * + * { margin-block-start: var(--space-3); }
159
+ .stack-4 > * + * { margin-block-start: var(--space-4); }
160
+ .stack-5 > * + * { margin-block-start: var(--space-5); }
161
+ .stack-6 > * + * { margin-block-start: var(--space-6); }
162
+
163
+ /* ─── Buttons — sharp 4px radius, terminal-grade ────────── */
164
+ .btn {
165
+ display: inline-flex;
166
+ align-items: center;
167
+ gap: var(--space-2);
168
+ padding: 12px 16px;
169
+ border-radius: var(--radius-sm);
170
+ font-family: var(--font-body);
171
+ font-size: var(--text-base);
172
+ font-weight: 600;
173
+ line-height: 1;
174
+ cursor: pointer;
175
+ border: 1px solid var(--surface);
176
+ background: var(--surface);
177
+ color: var(--fg);
178
+ text-decoration: none;
179
+ transition: background-color var(--motion-fast) var(--ease-standard),
180
+ color var(--motion-fast) var(--ease-standard),
181
+ border-color var(--motion-fast) var(--ease-standard);
182
+ }
183
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
184
+ /* Neon Primary — the eye-catching CTA: neon-on-black, hover inverts to dark */
185
+ .btn-primary {
186
+ background: var(--accent);
187
+ color: var(--accent-on);
188
+ border-color: var(--accent);
189
+ padding: 0 16px;
190
+ height: 40px;
191
+ }
192
+ .btn-primary:hover {
193
+ background: var(--accent-hover);
194
+ color: var(--accent);
195
+ }
196
+ .btn-primary:active { color: var(--accent-active); }
197
+ /* Forest Green — the "Get Started" conversion button */
198
+ .btn-success {
199
+ background: var(--success);
200
+ color: var(--fg);
201
+ border-color: var(--surface);
202
+ }
203
+ .btn-success:hover { background: #3a3a3a; color: rgba(255, 255, 255, 0.8); }
204
+ .btn-success:active { color: var(--accent-active); }
205
+ /* Ghost / Outlined — olive-tinted border, transparent bg */
206
+ .btn-ghost {
207
+ background: transparent;
208
+ color: var(--fg);
209
+ border-color: #4f5100;
210
+ padding: 0 var(--space-8);
211
+ height: 40px;
212
+ }
213
+ .btn-ghost:hover { background: var(--surface); }
214
+ .btn-ghost:active { color: var(--accent-active); }
215
+ /* Dark solid — standard action button */
216
+ .btn-dark {
217
+ background: var(--surface);
218
+ color: var(--fg);
219
+ border-color: var(--surface);
220
+ }
221
+ .btn-dark:hover { background: #3a3a3a; color: rgba(255, 255, 255, 0.8); }
222
+ .btn-dark:active { color: var(--accent-active); }
223
+
224
+ /* ─── Inputs — dark fill, charcoal border ───────────────── */
225
+ .field { display: flex; flex-direction: column; gap: var(--space-2); }
226
+ .field label { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
227
+ .field input {
228
+ padding: 12px 14px;
229
+ border-radius: var(--radius-sm);
230
+ border: 1px solid var(--border);
231
+ background: var(--surface);
232
+ color: var(--fg);
233
+ font-family: var(--font-body);
234
+ font-size: var(--text-sm);
235
+ outline: none;
236
+ transition: border-color var(--motion-fast) var(--ease-standard),
237
+ box-shadow var(--motion-fast) var(--ease-standard);
238
+ }
239
+ .field input:focus-visible {
240
+ border-color: var(--accent);
241
+ box-shadow: var(--focus-ring);
242
+ }
243
+ .field input::placeholder { color: var(--meta); }
244
+ .field-help { font-size: var(--text-xs); color: var(--muted); }
245
+
246
+ /* ─── Cards — charcoal-bordered containment ─────────────── */
247
+ .card {
248
+ background: transparent;
249
+ border: 1px 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
+ }
256
+ .card-neon {
257
+ border-color: var(--accent);
258
+ }
259
+ .card-stat {
260
+ background: transparent;
261
+ border: 1px solid var(--border-soft);
262
+ border-radius: var(--radius-md);
263
+ padding: var(--space-6);
264
+ }
265
+ .stat-number {
266
+ font-family: var(--font-display);
267
+ font-size: var(--text-3xl);
268
+ font-weight: 700;
269
+ line-height: 1.0;
270
+ color: var(--fg);
271
+ letter-spacing: -0.02em;
272
+ }
273
+ .stat-number-accent { color: var(--accent); }
274
+ .stat-label {
275
+ margin-block-start: var(--space-3);
276
+ font-size: var(--text-sm);
277
+ color: var(--muted);
278
+ }
279
+
280
+ /* ─── Badges ────────────────────────────────────────────── */
281
+ .badge {
282
+ display: inline-flex; align-items: center; gap: var(--space-2);
283
+ padding: 4px var(--space-3);
284
+ border-radius: var(--radius-pill);
285
+ font-size: var(--text-xs); font-weight: 600; line-height: 1.6;
286
+ border: 1px solid var(--border);
287
+ }
288
+ .badge-success {
289
+ color: var(--accent);
290
+ background: color-mix(in oklab, var(--accent), transparent 92%);
291
+ border-color: color-mix(in oklab, var(--accent), transparent 70%);
292
+ }
293
+ .badge-muted {
294
+ color: var(--muted);
295
+ background: var(--surface);
296
+ border-color: var(--border-soft);
297
+ }
298
+ .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
299
+
300
+ /* ─── Links — always hover to neon ──────────────────────── */
301
+ a { color: var(--fg); text-decoration: none; transition: color var(--motion-fast) var(--ease-standard); }
302
+ a:hover { color: var(--accent); }
303
+ .link-accent { color: var(--accent); }
304
+ kbd {
305
+ font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
306
+ padding: 2px 6px; border-radius: var(--radius-sm);
307
+ border: 1px solid var(--border); background: var(--surface); color: var(--fg-2);
308
+ }
309
+
310
+ /* ─── Code block — Inconsolata, terminal aesthetic ──────── */
311
+ .code-block {
312
+ font-family: var(--font-mono);
313
+ font-size: var(--text-base);
314
+ font-weight: 600;
315
+ line-height: var(--leading-body);
316
+ background: var(--surface);
317
+ border: 1px solid var(--border);
318
+ border-radius: var(--radius-sm);
319
+ padding: var(--space-4) var(--space-5);
320
+ color: var(--fg);
321
+ overflow-x: auto;
322
+ white-space: pre;
323
+ }
324
+ .code-block .tok-kw { color: var(--accent); }
325
+ .code-block .tok-com { color: var(--meta); }
326
+ .code-block .tok-str { color: var(--fg-2); }
327
+
328
+ /* ─── Layout helpers ────────────────────────────────────── */
329
+ .hero-grid {
330
+ display: grid;
331
+ grid-template-columns: 1.5fr 1fr;
332
+ gap: var(--space-12);
333
+ align-items: end;
334
+ }
335
+ @media (max-width: 1023px) {
336
+ .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); align-items: stretch; }
337
+ }
338
+ .hero-actions {
339
+ display: flex; gap: var(--space-3);
340
+ margin-block-start: var(--space-6);
341
+ flex-wrap: wrap;
342
+ }
343
+ .hero-meta {
344
+ display: flex; flex-direction: column; gap: var(--space-4);
345
+ padding: var(--space-5);
346
+ border: 1px solid var(--border);
347
+ border-radius: var(--radius-md);
348
+ background: var(--surface);
349
+ }
350
+ .stats-bar {
351
+ display: grid;
352
+ grid-template-columns: repeat(3, 1fr);
353
+ gap: var(--space-5);
354
+ margin-block-start: var(--space-8);
355
+ }
356
+ @media (max-width: 639px) {
357
+ .stats-bar { grid-template-columns: 1fr; }
358
+ }
359
+ .features-grid {
360
+ display: grid;
361
+ grid-template-columns: repeat(3, 1fr);
362
+ gap: var(--space-5);
363
+ }
364
+ @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
365
+ @media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
366
+ .form-row {
367
+ display: grid;
368
+ grid-template-columns: 1.2fr 1fr;
369
+ gap: var(--space-12);
370
+ align-items: start;
371
+ }
372
+ @media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
373
+ .form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 440px; }
374
+ .form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
375
+ .icon { width: 16px; height: 16px; flex-shrink: 0; }
376
+ .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
377
+ </style>
378
+ </head>
379
+ <body>
380
+ <main class="container">
381
+ <section data-od-id="hero">
382
+ <div class="hero-grid">
383
+ <div class="stack-5">
384
+ <p class="eyebrow">Reference fixture · clickhouse</p>
385
+ <h1>The fastest open-source OLAP database.</h1>
386
+ <p class="lead" style="max-width: 56ch">
387
+ Sub-second analytical queries over petabytes. A columnar engine built
388
+ for real-time analytics, observability, and the agentic workloads of
389
+ the next decade — running on commodity hardware.
390
+ </p>
391
+ <div class="hero-actions">
392
+ <a href="./tokens.css" class="btn btn-primary">
393
+ Run a query
394
+ <svg class="icon" viewBox="0 0 24 24" fill="none"
395
+ stroke="currentColor" stroke-width="2"
396
+ stroke-linecap="round" stroke-linejoin="round"
397
+ aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
398
+ </a>
399
+ <a href="./DESIGN.md" class="btn btn-success">Get started</a>
400
+ <a href="./tokens.css" class="btn btn-ghost">Read the docs</a>
401
+ </div>
402
+ </div>
403
+ <aside class="hero-meta" aria-label="Cluster status">
404
+ <div class="row-between">
405
+ <span class="body-sm body-muted">Cluster</span>
406
+ <span class="badge badge-success">
407
+ <span class="badge-dot" aria-hidden="true"></span>
408
+ Operational
409
+ </span>
410
+ </div>
411
+ <pre class="code-block" aria-label="Sample query"><span class="tok-com">-- 1.2B rows · 38ms</span>
412
+ <span class="tok-kw">SELECT</span> country,
413
+ <span class="tok-kw">count</span>(*) <span class="tok-kw">AS</span> hits
414
+ <span class="tok-kw">FROM</span> events
415
+ <span class="tok-kw">WHERE</span> ts &gt; <span class="tok-str">'2026-05-01'</span>
416
+ <span class="tok-kw">GROUP BY</span> country
417
+ <span class="tok-kw">ORDER BY</span> hits <span class="tok-kw">DESC</span>
418
+ <span class="tok-kw">LIMIT</span> 10;</pre>
419
+ <p class="body-sm body-muted">Press <kbd>⌘</kbd> <kbd>K</kbd> to open the query palette.</p>
420
+ </aside>
421
+ </div>
422
+
423
+ <div class="stats-bar" role="list">
424
+ <article class="card-stat" role="listitem">
425
+ <div class="stat-number stat-number-accent">100×</div>
426
+ <p class="stat-label">Faster than row-oriented stores on analytical workloads.</p>
427
+ </article>
428
+ <article class="card-stat" role="listitem">
429
+ <div class="stat-number">38<span style="font-size: var(--text-2xl); color: var(--muted)">ms</span></div>
430
+ <p class="stat-label">P95 latency on 1.2B-row aggregations, single replica.</p>
431
+ </article>
432
+ <article class="card-stat" role="listitem">
433
+ <div class="stat-number">2.2PB</div>
434
+ <p class="stat-label">Largest production cluster — and growing every quarter.</p>
435
+ </article>
436
+ </div>
437
+ </section>
438
+
439
+ <section data-od-id="features">
440
+ <div class="stack-3">
441
+ <p class="eyebrow">What this fixture exercises</p>
442
+ <h2 style="max-width: 26ch">Engineered for the workloads other databases can't keep up with.</h2>
443
+ </div>
444
+ <div class="features-grid" style="margin-block-start: var(--space-8)">
445
+ <article class="card card-neon">
446
+ <p class="eyebrow" style="color: var(--accent)">Featured</p>
447
+ <h3>Columnar at the core</h3>
448
+ <p class="body-muted body-sm">
449
+ A vectorized execution engine reads only the columns a query touches.
450
+ Compression ratios of 10–100× shrink storage and accelerate scans.
451
+ </p>
452
+ <a href="./tokens.css" class="body-sm link-accent">Inspect tokens →</a>
453
+ </article>
454
+ <article class="card">
455
+ <h3>Real-time ingestion</h3>
456
+ <p class="body-muted body-sm">
457
+ Millions of rows per second per node. Kafka, S3, JDBC, HTTP —
458
+ ingest from anywhere, query while writes are still in flight.
459
+ </p>
460
+ <a href="./DESIGN.md" class="body-sm">Read the spec →</a>
461
+ </article>
462
+ <article class="card">
463
+ <h3>SQL you already know</h3>
464
+ <p class="body-muted body-sm">
465
+ ANSI SQL plus a powerful expression library. Window functions,
466
+ JSON, geospatial, arrays — every analytical primitive, native.
467
+ </p>
468
+ <a href="./tokens.css" class="body-sm">Browse functions →</a>
469
+ </article>
470
+ </div>
471
+ </section>
472
+
473
+ <section data-od-id="form">
474
+ <div class="form-row">
475
+ <div class="stack-4">
476
+ <p class="eyebrow">Form components</p>
477
+ <h2>Spin up a cluster in 30 seconds.</h2>
478
+ <p class="body-muted" style="max-width: 48ch">
479
+ Inputs use the same charcoal-bordered geometry as the cards. Focus
480
+ ring is neon volt — unified interactive feedback across the system.
481
+ </p>
482
+ <p class="body-sm body-muted">
483
+ Already running ClickHouse? <a href="#" class="link-accent">Connect an existing cluster</a>.
484
+ </p>
485
+ </div>
486
+ <form class="form" onsubmit="event.preventDefault();">
487
+ <div class="field">
488
+ <label for="email">Work email</label>
489
+ <input id="email" type="email" placeholder="you@company.com" autocomplete="email" required />
490
+ <p class="field-help">We'll send your free-tier credentials and nothing else.</p>
491
+ </div>
492
+ <div class="field">
493
+ <label for="region">Region</label>
494
+ <input id="region" type="text" placeholder="us-east-1" value="us-east-1" />
495
+ <p class="field-help">Pick a region close to your data sources for lowest latency.</p>
496
+ </div>
497
+ <div class="form-actions">
498
+ <button type="submit" class="btn btn-success">Create cluster</button>
499
+ <button type="button" class="btn btn-ghost">View pricing</button>
500
+ </div>
501
+ </form>
502
+ </div>
503
+ </section>
504
+ </main>
505
+ </body>
506
+ </html>
package/dist/designer/data/systems/clickhouse/tokens.css ADDED
@@ -0,0 +1,135 @@
1
+ /* ─────────────────────────────────────────────────────────────────────────
2
+ * design-systems/clickhouse/tokens.css
3
+ *
4
+ * Structured token bindings for "Design System Inspired by ClickHouse".
5
+ * High-performance cockpit in acid yellow-green on obsidian black —
6
+ * pure black canvas, neon volt accents, extra-heavy Inter (900) display,
7
+ * charcoal-bordered cards, terminal-grade aesthetic.
8
+ *
9
+ * Key brand decisions encoded here:
10
+ * - Pure Black (#000000) page bg — never dark gray as page bg
11
+ * - Neon Volt (#faff69) as sole chromatic accent — maximum contrast on black
12
+ * - Charcoal borders (rgba(65,65,65,0.8)) — primary depth mechanism
13
+ * - Inter as primary, Basier as secondary display, Inconsolata for code
14
+ * - 96px display headlines with weight 900 — text as physical mass
15
+ * - Tight 1.0 leading on display sizes — billboard scale
16
+ * - Sharp 4px radius on buttons, 8px on cards — database precision geometry
17
+ * - Forest Green (#166534) doubles as --success — brand-aligned semantic
18
+ * ─────────────────────────────────────────────────────────────────── */
19
+
20
+ :root {
21
+ /* ─── Surface ─────────────────────────────────────────────────────
22
+ * Dark void: pure black canvas, near-black surfaces.
23
+ * The black is absolute (#000000) — never softened to dark gray. */
24
+ --bg: #000000; /* Pure Black — the page canvas, absolute */
25
+ --surface: #141414; /* Near Black — buttons, lifted dark surfaces */
26
+ --surface-warm: var(--surface); /* alias — no warm tier in the cool-neutral palette */
27
+
28
+ /* ─── Foreground ──────────────────────────────────────────────────
29
+ * Pure White on black for primary, Silver for secondary.
30
+ * All neutrals are perfectly neutral — no warm undertone. */
31
+ --fg: #ffffff; /* Pure White — primary text on dark surfaces */
32
+ --fg-2: #a0a0a0; /* Silver — secondary body text on dark */
33
+ --muted: #a0a0a0; /* Silver — captions, muted content */
34
+ --meta: #585858; /* Mid Gray — metadata, deepest neutral text */
35
+
36
+ /* ─── Border ──────────────────────────────────────────────────────
37
+ * Charcoal at 80% opacity — the workhorse for all card containment.
38
+ * Deep charcoal for inner separators that should not visually compete. */
39
+ --border: rgba(65, 65, 65, 0.8); /* Charcoal — primary card edge */
40
+ --border-soft: #343434; /* Deep Charcoal — inner separator, quieter */
41
+
42
+ /* ─── Accent ──────────────────────────────────────────────────────
43
+ * Neon Volt — the literal ClickHouse brand mark. Sole chromatic
44
+ * interruption on the obsidian canvas. Used on CTAs, link hovers,
45
+ * featured borders. Hover/active swap to dark variants per DESIGN.md:
46
+ * the neon CTA's hover INVERTS to near-black bg; active dims to pale. */
47
+ --accent: #faff69; /* Neon Volt — signature acid yellow-green */
48
+ --accent-on: #151515; /* Near Black text on neon — maximum readability */
49
+ --accent-hover: #1d1d1d; /* Brand-specific: neon CTA inverts to dark on hover */
50
+ --accent-active: #f4f692; /* Pale Yellow — DESIGN.md active/pressed state */
51
+
52
+ /* ─── Semantic ────────────────────────────────────────────────────
53
+ * Forest Green doubles as success — it's already the brand's
54
+ * "Get Started" CTA color, so it's natively part of the palette.
55
+ * Warn and danger use schema defaults to stay distinguishable. */
56
+ --success: #166534; /* Forest Green — brand-aligned secondary CTA / success */
57
+ --warn: #eab308;
58
+ --danger: #dc2626;
59
+
60
+ /* ─── Typography ──────────────────────────────────────────────────
61
+ * Inter is the primary face — full weight spectrum (400/500/600/700/900).
62
+ * Basier is the secondary display face for feature anchors at weight 600.
63
+ * Inconsolata for code blocks at weight 600 — terminal-like rendering. */
64
+ --font-display: "Inter", "Basier", Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
65
+ --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
66
+ --font-mono: "Inconsolata", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
67
+
68
+ /* Type scale — DESIGN.md §3. 96px display mega, 72px hero, 36px feature.
69
+ * Weight 900 is reserved for --text-4xl in components; 700 carries the
70
+ * rest. Tight leading at scale — text feels architectural. */
71
+ --text-xs: 12px; /* Small — smallest text */
72
+ --text-sm: 14px; /* Caption / Uppercase Label (1.4px tracking) */
73
+ --text-base: 16px; /* Body / Button / Code */
74
+ --text-lg: 20px; /* Feature Title */
75
+ --text-xl: 24px; /* Sub-heading / Card title */
76
+ --text-2xl: 36px; /* Feature Heading (Basier 600) */
77
+ --text-3xl: 72px; /* Display / Hero (Inter 700) */
78
+ --text-4xl: 96px; /* Display Mega — Inter Black (900) */
79
+
80
+ --leading-body: 1.5;
81
+ --leading-tight: 1.0; /* Display ultra-tight — physical mass */
82
+ --tracking-display: normal; /* DESIGN.md: normal letter-spacing on display */
83
+
84
+ /* ─── Spacing ─────────────────────────────────────────────────────
85
+ * 8px base grid. Section vertical spacing 48–64px (generous). */
86
+ --space-1: 4px;
87
+ --space-2: 8px;
88
+ --space-3: 12px;
89
+ --space-4: 16px;
90
+ --space-5: 20px;
91
+ --space-6: 24px;
92
+ --space-8: 32px;
93
+ --space-12: 48px;
94
+
95
+ --section-y-desktop: 64px; /* DESIGN.md: 48–64px generous section rhythm */
96
+ --section-y-tablet: 48px;
97
+ --section-y-phone: 32px;
98
+
99
+ /* ─── Radius ──────────────────────────────────────────────────────
100
+ * Sharp (4px) on buttons / badges / code blocks — database precision.
101
+ * Comfortable (8px) on cards. Never round corners beyond 8px. */
102
+ --radius-sm: 4px; /* Sharp — buttons, badges, small elements */
103
+ --radius-md: 8px; /* Comfortable — cards, containers */
104
+ --radius-lg: 8px; /* Same — DESIGN.md caps radius at 8px */
105
+ --radius-pill: 9999px; /* Pill — toggle indicators, status badges */
106
+
107
+ /* ─── Elevation ───────────────────────────────────────────────────
108
+ * Shadows are barely visible on black — depth comes from borders.
109
+ * Level 2 subtle shadow declared for parity; the real depth signal
110
+ * is --elev-ring (charcoal hairline) and neon-border highlights. */
111
+ --elev-flat: none;
112
+ --elev-ring: 0 0 0 1px var(--border);
113
+ --elev-raised: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
114
+
115
+ /* ─── Focus ring ──────────────────────────────────────────────────
116
+ * Neon-tinted focus — unified interactive feedback signal across
117
+ * links, buttons, and inputs. Always shifts toward the accent. */
118
+ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
119
+
120
+ /* ─── Motion ──────────────────────────────────────────────────────
121
+ * Standard durations — ClickHouse's intensity is in color and weight,
122
+ * not motion. Snappy enough to feel performant. */
123
+ --motion-fast: 150ms;
124
+ --motion-base: 200ms;
125
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
126
+
127
+ /* ─── Layout ──────────────────────────────────────────────────────
128
+ * 1280px container — wide enough for multi-column dense data layouts
129
+ * while still tractable on standard desktops (DESIGN.md tops at 2200px
130
+ * for ultra-wide; 1280px is the workable default). */
131
+ --container-max: 1280px;
132
+ --container-gutter-desktop: 24px;
133
+ --container-gutter-tablet: 16px;
134
+ --container-gutter-phone: 12px;
135
+ }