@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/discord/components.html ADDED
@@ -0,0 +1,359 @@
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>Discord — reference components</title>
7
+ <meta
8
+ name="description"
9
+ content="Reference fixture for design-systems/discord. Every visible
10
+ value comes from tokens.css. Discord's signature moves: dark-first
11
+ three-step depth ladder, gg sans with friendly geometry, Blurple
12
+ accent (#5865f2), semi-transparent white borders."
13
+ />
14
+
15
+ <style>
16
+ :root {
17
+ --bg: #313338;
18
+ --surface: #2b2d31;
19
+ --surface-warm: #1e1f22;
20
+
21
+ --fg: #dbdee1;
22
+ --fg-2: #f2f3f5;
23
+ --muted: #949ba4;
24
+ --meta: #80848e;
25
+
26
+ --border: rgba(255, 255, 255, 0.06);
27
+ --border-soft: #3f4147;
28
+
29
+ --accent: #5865f2;
30
+ --accent-on: #ffffff;
31
+ --accent-hover: #4752c4;
32
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
33
+
34
+ --success: #23a55a;
35
+ --warn: #f0b232;
36
+ --danger: #f23f43;
37
+
38
+ --font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
39
+ --font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
40
+ --font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
41
+
42
+ --text-xs: 12px;
43
+ --text-sm: 14px;
44
+ --text-base: 16px;
45
+ --text-lg: 18px;
46
+ --text-xl: 20px;
47
+ --text-2xl: 24px;
48
+ --text-3xl: 32px;
49
+ --text-4xl: 56px;
50
+
51
+ --leading-body: 1.375;
52
+ --leading-tight: 1.10;
53
+ --tracking-display: -0.02em;
54
+
55
+ --space-1: 4px;
56
+ --space-2: 8px;
57
+ --space-3: 12px;
58
+ --space-4: 16px;
59
+ --space-5: 20px;
60
+ --space-6: 24px;
61
+ --space-8: 32px;
62
+ --space-12: 40px;
63
+
64
+ --section-y-desktop: 80px;
65
+ --section-y-tablet: 48px;
66
+ --section-y-phone: 32px;
67
+
68
+ --radius-sm: 4px;
69
+ --radius-md: 8px;
70
+ --radius-lg: 16px;
71
+ --radius-pill: 9999px;
72
+
73
+ --elev-flat: none;
74
+ --elev-ring: 0 0 0 1px var(--border);
75
+ --elev-raised:
76
+ rgba(0, 0, 0, 0.4) 0px 2px 4px,
77
+ 0 0 0 1px rgba(255, 255, 255, 0.06);
78
+
79
+ --focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
80
+
81
+ --motion-fast: 80ms;
82
+ --motion-base: 200ms;
83
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
84
+
85
+ --container-max: 1200px;
86
+ --container-gutter-desktop: 24px;
87
+ --container-gutter-tablet: 16px;
88
+ --container-gutter-phone: 16px;
89
+ }
90
+
91
+ *, *::before, *::after { box-sizing: border-box; }
92
+ html, body { margin: 0; padding: 0; }
93
+ body {
94
+ background: var(--bg);
95
+ color: var(--fg);
96
+ font-family: var(--font-body);
97
+ font-size: var(--text-base);
98
+ line-height: var(--leading-body);
99
+ -webkit-font-smoothing: antialiased;
100
+ }
101
+
102
+ .container {
103
+ max-width: var(--container-max);
104
+ margin-inline: auto;
105
+ padding-inline: var(--container-gutter-desktop);
106
+ }
107
+ section { padding-block: var(--section-y-desktop); }
108
+ section + section { border-top: 1px solid var(--border); }
109
+ @media (max-width: 1023px) {
110
+ .container { padding-inline: var(--container-gutter-tablet); }
111
+ section { padding-block: var(--section-y-tablet); }
112
+ }
113
+ @media (max-width: 639px) {
114
+ .container { padding-inline: var(--container-gutter-phone); }
115
+ section { padding-block: var(--section-y-phone); }
116
+ }
117
+
118
+ /* ─── Typography ─────────────────────────── */
119
+ h1, h2, h3 {
120
+ font-family: var(--font-display);
121
+ font-weight: 800;
122
+ margin: 0;
123
+ color: var(--fg-2);
124
+ line-height: var(--leading-tight);
125
+ }
126
+ h1 {
127
+ font-size: var(--text-4xl);
128
+ letter-spacing: var(--tracking-display);
129
+ }
130
+ h2 {
131
+ font-size: var(--text-3xl);
132
+ /* 32px section: line-height 1.20, normal tracking. */
133
+ line-height: 1.20;
134
+ font-weight: 700;
135
+ }
136
+ h3 {
137
+ font-size: var(--text-2xl);
138
+ /* 24px page heading: line-height 1.25 per DESIGN.md.
139
+ Overrides the shared 1.10 set above. */
140
+ line-height: 1.25;
141
+ font-weight: 700;
142
+ }
143
+ p { margin: 0; }
144
+ .lead { font-size: var(--text-lg); line-height: 1.55; color: var(--muted); font-weight: 400; }
145
+ .body-muted { color: var(--muted); }
146
+ .body-sm { font-size: var(--text-sm); color: var(--muted); }
147
+ .eyebrow {
148
+ font-size: var(--text-xs);
149
+ font-weight: 500;
150
+ color: var(--meta);
151
+ text-transform: uppercase;
152
+ letter-spacing: 0.08em;
153
+ }
154
+ .stack-3 > * + * { margin-block-start: var(--space-3); }
155
+ .stack-4 > * + * { margin-block-start: var(--space-4); }
156
+
157
+ /* ─── Buttons ─────────────────────────────── */
158
+ .btn {
159
+ display: inline-flex;
160
+ align-items: center;
161
+ gap: var(--space-2);
162
+ padding: 8px 16px;
163
+ border-radius: var(--radius-sm);
164
+ font-family: var(--font-body);
165
+ font-size: var(--text-base);
166
+ font-weight: 500;
167
+ line-height: 1;
168
+ cursor: pointer;
169
+ border: none;
170
+ transition: background-color var(--motion-fast) var(--ease-standard);
171
+ text-decoration: none;
172
+ }
173
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
174
+ .btn-primary { background: var(--accent); color: var(--accent-on); }
175
+ .btn-primary:hover { background: var(--accent-hover); }
176
+ .btn-secondary { background: #4e5058; color: #ffffff; }
177
+ .btn-secondary:hover { background: #6d6f78; }
178
+ .btn-danger { background: #da373c; color: #ffffff; }
179
+
180
+ /* ─── Server avatars ─────────────────────── */
181
+ .server-rail {
182
+ display: flex;
183
+ flex-direction: column;
184
+ align-items: center;
185
+ gap: var(--space-2);
186
+ padding: var(--space-3);
187
+ background: var(--surface-warm);
188
+ border-radius: var(--radius-md);
189
+ }
190
+ .server-icon {
191
+ width: 48px;
192
+ height: 48px;
193
+ border-radius: 16px;
194
+ background: var(--accent);
195
+ display: flex;
196
+ align-items: center;
197
+ justify-content: center;
198
+ font-size: var(--text-sm);
199
+ font-weight: 600;
200
+ color: white;
201
+ cursor: pointer;
202
+ transition: border-radius var(--motion-base) cubic-bezier(0.215, 0.61, 0.355, 1);
203
+ }
204
+ .server-icon:hover { border-radius: 50%; }
205
+
206
+ /* ─── Mention pill ───────────────────────── */
207
+ .mention {
208
+ display: inline;
209
+ background: rgba(88, 101, 242, 0.3);
210
+ color: #c9cdfb;
211
+ padding: 0 2px;
212
+ border-radius: 3px;
213
+ font-weight: 500;
214
+ }
215
+
216
+ /* ─── Card ───────────────────────────────── */
217
+ .card {
218
+ background: var(--surface);
219
+ border: 1px solid var(--border-soft);
220
+ border-radius: var(--radius-md);
221
+ padding: var(--space-6);
222
+ }
223
+
224
+ /* ─── Inputs ─────────────────────────────── */
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-2); text-transform: uppercase; letter-spacing: 0.04em; }
227
+ .field input {
228
+ background: var(--surface-warm);
229
+ color: var(--fg);
230
+ border: 1px solid var(--surface-warm);
231
+ border-radius: var(--radius-sm);
232
+ padding: 10px 12px;
233
+ font-size: var(--text-base);
234
+ outline: none;
235
+ transition: border-color var(--motion-fast) var(--ease-standard);
236
+ }
237
+ .field input::placeholder { color: var(--muted); }
238
+ .field input:focus { border-color: var(--accent); }
239
+
240
+ /* ─── Layout ─────────────────────────────── */
241
+ .hero-grid {
242
+ display: grid;
243
+ grid-template-columns: 1.3fr 1fr;
244
+ gap: var(--space-12);
245
+ align-items: center;
246
+ }
247
+ @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
248
+ .features-grid {
249
+ display: grid;
250
+ grid-template-columns: repeat(3, 1fr);
251
+ gap: var(--space-4);
252
+ }
253
+ @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
254
+ @media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
255
+ .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
256
+ </style>
257
+ </head>
258
+ <body>
259
+ <main class="container">
260
+ <!-- HERO -->
261
+ <section data-od-id="hero">
262
+ <div class="hero-grid">
263
+ <div class="stack-4">
264
+ <p class="eyebrow">Reference fixture · discord</p>
265
+ <h1>Your place to talk.</h1>
266
+ <p class="lead" style="max-width:46ch">
267
+ Discord is the easiest way to talk over voice, video, and text.
268
+ Dark-first, Blurple accent, gg sans — every value from tokens.css.
269
+ </p>
270
+ <div class="hero-actions">
271
+ <a href="./tokens.css" class="btn btn-primary">Download for free</a>
272
+ <a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
273
+ </div>
274
+ </div>
275
+
276
+ <aside style="display:flex;gap:var(--space-4);align-items:flex-start">
277
+ <div class="server-rail">
278
+ <div class="server-icon">OD</div>
279
+ <div style="width:32px;height:2px;background:var(--border-soft);border-radius:2px"></div>
280
+ <div class="server-icon" style="background:#23a55a;font-size:18px">🎮</div>
281
+ <div class="server-icon" style="background:#8250df;font-size:18px">🎨</div>
282
+ </div>
283
+ <div class="card stack-3" style="flex:1">
284
+ <p class="eyebrow"># general</p>
285
+ <p style="font-size:var(--text-base);color:var(--fg)">
286
+ <span style="font-weight:500;color:#f2f3f5">Ada</span>&nbsp;
287
+ <span style="font-size:var(--text-xs);color:var(--meta)">Today at 4:32 PM</span>
288
+ </p>
289
+ <p style="font-size:var(--text-base)">
290
+ Adding token fixtures for <span class="mention">@batch-2</span> brands today.
291
+ </p>
292
+ </div>
293
+ </aside>
294
+ </div>
295
+ </section>
296
+
297
+ <!-- FEATURES -->
298
+ <section data-od-id="features">
299
+ <div class="stack-3" style="margin-bottom:var(--space-6)">
300
+ <p class="eyebrow">What this fixture exercises</p>
301
+ <h2>Dark depth through luminance steps.</h2>
302
+ </div>
303
+
304
+ <div class="features-grid">
305
+ <article class="card stack-3">
306
+ <h3>Three-step depth</h3>
307
+ <p class="body-sm">
308
+ #1e1f22 server rail → #2b2d31 sidebar → #313338 chat. Each step
309
+ slightly lighter. No color variation — only luminance.
310
+ </p>
311
+ </article>
312
+ <article class="card stack-3">
313
+ <h3>Blurple accent</h3>
314
+ <p class="body-sm">
315
+ #5865f2 — reserved for CTAs, mentions, and "you" affordances.
316
+ Hover: #4752c4. Used sparingly so it pops against muted neutrals.
317
+ </p>
318
+ </article>
319
+ <article class="card stack-3">
320
+ <h3>gg sans geometry</h3>
321
+ <p class="body-sm">
322
+ Friendly rounded terminals on a/g/s. Weight 400/500/600/700/800 —
323
+ hierarchy through contrast, not color. 16px body never shrinks.
324
+ </p>
325
+ </article>
326
+ </div>
327
+ </section>
328
+
329
+ <!-- FORM -->
330
+ <section data-od-id="form">
331
+ <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
332
+ <div class="stack-4">
333
+ <p class="eyebrow">Form components</p>
334
+ <h2>Inputs on dark surfaces.</h2>
335
+ <p class="lead" style="max-width:44ch">
336
+ Background: #1e1f22. Border shifts to Blurple on focus.
337
+ Labels: uppercase, 0.04em tracking, weight 600.
338
+ </p>
339
+ </div>
340
+ <form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
341
+ onsubmit="event.preventDefault()">
342
+ <div class="field">
343
+ <label for="email">Email</label>
344
+ <input id="email" type="email" placeholder="you@example.com" />
345
+ </div>
346
+ <div class="field">
347
+ <label for="username">Username</label>
348
+ <input id="username" type="text" placeholder="cooluser#1234" />
349
+ </div>
350
+ <div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
351
+ <button type="submit" class="btn btn-primary">Continue</button>
352
+ <button type="button" class="btn btn-secondary">Back</button>
353
+ </div>
354
+ </form>
355
+ </div>
356
+ </section>
357
+ </main>
358
+ </body>
359
+ </html>
package/dist/designer/data/systems/discord/tokens.css ADDED
@@ -0,0 +1,125 @@
1
+ /* ─────────────────────────────────────────────────────────────────────────
2
+ * design-systems/discord/tokens.css
3
+ *
4
+ * Structured token bindings for the "Discord" brand — deep blurple,
5
+ * dark-first surfaces, voice-and-chat for gaming and community.
6
+ *
7
+ * Brand identity in three sentences:
8
+ * 1. Dark-first: three-step depth ladder (#1e1f22 deepest → #2b2d31
9
+ * sidebar → #313338 chat surface), pixel-snapped 1px dividers at
10
+ * low alpha, rounded-square server avatars that morph to circles.
11
+ * 2. gg sans (friendly geometric, Whitney-replacement) for all text at
12
+ * 400/500/600/700/800 weights; 16px body never shrinks; hierarchy
13
+ * comes from weight contrast over color contrast.
14
+ * 3. Blurple (#5865f2) as the single saturated accent — reserved for
15
+ * brand mark, primary CTAs, mentions, and "you" affordances; used
16
+ * sparingly so it pops against the muted dark surface.
17
+ *
18
+ * Schema decisions:
19
+ * - --bg: #313338 (chat surface / primary dark); --surface: #2b2d31.
20
+ * - --surface-warm: #191a1e (deepest — server list rail, level below).
21
+ * - --fg: #dbdee1 (text-normal — cooler than pure white).
22
+ * - --fg-2: #f2f3f5 (header-primary — modal titles, channel headers).
23
+ * - --muted: #949ba4 (text-muted — timestamps, metadata).
24
+ * - --border: rgba(255,255,255,0.06); --border-soft: same.
25
+ * - --accent: #5865f2 (Blurple); --accent-hover: #4752c4.
26
+ * - --tracking-display: -0.02em (display 56px hero per DESIGN.md).
27
+ * - --radius-sm: 4px (buttons/inputs); --radius-md: 8px (cards).
28
+ * ─────────────────────────────────────────────────────────────────── */
29
+
30
+ :root {
31
+ /* ─── Surface ──────────────────────────────────────────────────── */
32
+ --bg: #313338; /* chat surface / primary dark */
33
+ --surface: #2b2d31; /* channel sidebar, settings sidebar */
34
+ --surface-warm: #1e1f22; /* server list rail — deepest layer */
35
+
36
+ /* ─── Foreground ───────────────────────────────────────────────── */
37
+ --fg: #dbdee1; /* text-normal — slightly cooler than white */
38
+ --fg-2: #f2f3f5; /* header-primary — modal titles */
39
+ --muted: #949ba4; /* text-muted — timestamps, server names */
40
+ --meta: #80848e; /* channels-default — inactive sidebar names */
41
+
42
+ /* ─── Border ───────────────────────────────────────────────────── */
43
+ --border: rgba(255, 255, 255, 0.06); /* standard divider */
44
+ --border-soft: #3f4147; /* solid divider for cards */
45
+
46
+ /* ─── Accent ───────────────────────────────────────────────────── */
47
+ --accent: #5865f2; /* Blurple — brand primary CTA */
48
+ --accent-on: #ffffff;
49
+ --accent-hover: #4752c4; /* darker hover */
50
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
51
+
52
+ /* ─── Semantic ─────────────────────────────────────────────────── */
53
+ --success: #23a55a; /* status-online green */
54
+ --warn: #f0b232; /* status-idle yellow */
55
+ --danger: #f23f43; /* status-dnd / destructive red */
56
+
57
+ /* ─── Typography ───────────────────────────────────────────────── */
58
+ --font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
59
+ --font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
60
+ --font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
61
+
62
+ /* Type scale — DESIGN.md §Typography Hierarchy.
63
+ * Discord: 56px display, 24px page heading, 16px body (never shrinks).
64
+ * Schema spine: xs=12 (timestamp/caption), base=16, 4xl=56. */
65
+ --text-xs: 12px; /* timestamp / caption / meta */
66
+ --text-sm: 14px; /* compact metadata */
67
+ --text-base: 16px; /* message body — never below 16px */
68
+ --text-lg: 18px; /* feature heading */
69
+ --text-xl: 20px; /* sub-heading */
70
+ --text-2xl: 24px; /* page heading — settings/profile */
71
+ --text-3xl: 32px; /* section heading */
72
+ --text-4xl: 56px; /* display hero — marketing */
73
+
74
+ /* Leading + tracking.
75
+ * --leading-tight=1.10: 56px hero compression.
76
+ * h2 (32px) → 1.20; h3 (24px) → 1.25 per brand feel.
77
+ * --tracking-display: -0.02em (display 56px per DESIGN.md). */
78
+ --leading-body: 1.375;
79
+ --leading-tight: 1.10;
80
+ --tracking-display: -0.02em;
81
+
82
+ /* ─── Spacing ──────────────────────────────────────────────────── */
83
+ /* 4px base grid per DESIGN.md §Spacing & Layout. */
84
+ --space-1: 4px;
85
+ --space-2: 8px;
86
+ --space-3: 12px;
87
+ --space-4: 16px;
88
+ --space-5: 20px;
89
+ --space-6: 24px;
90
+ --space-8: 32px;
91
+ --space-12: 40px;
92
+
93
+ /* Section rhythm. */
94
+ --section-y-desktop: 80px;
95
+ --section-y-tablet: 48px;
96
+ --section-y-phone: 32px;
97
+
98
+ /* ─── Radius ───────────────────────────────────────────────────── */
99
+ /* 4px for buttons/inputs; 8px for cards. Rounded but not balloon-soft. */
100
+ --radius-sm: 4px;
101
+ --radius-md: 8px;
102
+ --radius-lg: 16px;
103
+ --radius-pill: 9999px;
104
+
105
+ /* ─── Elevation ────────────────────────────────────────────────── */
106
+ /* Dark surfaces: luminance stepping; semi-transparent white borders
107
+ as depth signal rather than drop shadows. */
108
+ --elev-flat: none;
109
+ --elev-ring: 0 0 0 1px var(--border);
110
+ --elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
111
+
112
+ /* ─── Focus ────────────────────────────────────────────────────── */
113
+ --focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
114
+
115
+ /* ─── Motion ───────────────────────────────────────────────────── */
116
+ --motion-fast: 80ms;
117
+ --motion-base: 200ms;
118
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
119
+
120
+ /* ─── Layout ───────────────────────────────────────────────────── */
121
+ --container-max: 1200px;
122
+ --container-gutter-desktop: 24px;
123
+ --container-gutter-tablet: 16px;
124
+ --container-gutter-phone: 16px;
125
+ }
package/dist/designer/data/systems/dithered/DESIGN.md ADDED
@@ -0,0 +1,71 @@
1
+ # Design System Inspired by Dithered
2
+
3
+ > Category: Retro & Nostalgic
4
+ > Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
5
+
6
+ ## 1. Visual Theme & Atmosphere
7
+
8
+ Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
9
+
10
+ - **Visual style:** modern, minimal
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:** 14/16/18/24/32/40
32
+ - **Families:** primary=Open Sans, display=Space Grotesk, 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.