@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/bento/components.html ADDED
@@ -0,0 +1,136 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Bento - reference components</title>
7
+ <meta name="description" content="Reference fixture for design-systems/bento: modular bento interface with friendly tiles, soft borders, and balanced product density." />
8
+ <style>
9
+ :root {
10
+ --bg: #f5f8ff;
11
+ --surface: #ffffff;
12
+ --surface-warm: #eaf1ff;
13
+ --fg: #101828;
14
+ --fg-2: #344054;
15
+ --muted: #667085;
16
+ --meta: #2563eb;
17
+ --border: #d7e0ef;
18
+ --border-soft: #edf2f8;
19
+ --accent: #2563eb;
20
+ --accent-on: #ffffff;
21
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
22
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
23
+ --success: #16a34a;
24
+ --warn: #f59e0b;
25
+ --danger: #ef4444;
26
+ --font-display: Inter, system-ui, sans-serif;
27
+ --font-body: Inter, system-ui, sans-serif;
28
+ --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
29
+ --text-xs: 12px;
30
+ --text-sm: 14px;
31
+ --text-base: 16px;
32
+ --text-lg: 18px;
33
+ --text-xl: 24px;
34
+ --text-2xl: 36px;
35
+ --text-3xl: 54px;
36
+ --text-4xl: 76px;
37
+ --leading-body: 1.52;
38
+ --leading-tight: 1.06;
39
+ --tracking-display: -0.025em;
40
+ --space-1: 4px;
41
+ --space-2: 8px;
42
+ --space-3: 12px;
43
+ --space-4: 16px;
44
+ --space-5: 20px;
45
+ --space-6: 24px;
46
+ --space-8: 32px;
47
+ --space-12: 48px;
48
+ --section-y-desktop: 96px;
49
+ --section-y-tablet: 68px;
50
+ --section-y-phone: 48px;
51
+ --radius-sm: 10px;
52
+ --radius-md: 16px;
53
+ --radius-lg: 24px;
54
+ --radius-pill: 9999px;
55
+ --elev-flat: none;
56
+ --elev-ring: 0 0 0 1px var(--border);
57
+ --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11);
58
+ --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22);
59
+ --motion-fast: 150ms;
60
+ --motion-base: 240ms;
61
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
62
+ --container-max: 1180px;
63
+ --container-gutter-desktop: 36px;
64
+ --container-gutter-tablet: 24px;
65
+ --container-gutter-phone: 16px;
66
+ }
67
+
68
+ *, *::before, *::after { box-sizing: border-box; }
69
+ html, body { margin: 0; padding: 0; }
70
+ body { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
71
+ .page { min-height: 100vh; background: radial-gradient(circle at 80% 10%, rgba(37, 99, 235, 0.16), transparent 34%), #f5f8ff; }
72
+ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
73
+ section { padding-block: var(--section-y-desktop); }
74
+ @media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } section { padding-block: var(--section-y-tablet); } }
75
+ @media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } section { padding-block: var(--section-y-phone); } }
76
+ h1, h2, h3, p { margin: 0; }
77
+ h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
78
+ h1 { max-width: 840px; font-size: var(--text-4xl); font-weight: 760; }
79
+ h2 { font-size: var(--text-3xl); font-weight: 700; }
80
+ h3 { font-size: var(--text-xl); font-weight: 700; }
81
+ .eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
82
+ .lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }
83
+ .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; }
84
+ .stack > * + * { margin-block-start: var(--space-4); }
85
+ .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
86
+ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
87
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
88
+ .btn-primary { background: var(--accent); color: var(--accent-on); }
89
+ .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
90
+ .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
91
+ .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
92
+ .panel { background: color-mix(in oklab, var(--surface), transparent 4%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); overflow: hidden; }
93
+ .panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
94
+ .status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--meta); font: 700 var(--text-xs) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
95
+ .status::before { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); content: ""; }
96
+ .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-soft); }
97
+ .metric { padding: var(--space-5); border-right: 1px solid var(--border-soft); }
98
+ .metric:last-child { border-right: 0; }
99
+ .metric strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
100
+ .metric span { color: var(--muted); font-size: var(--text-sm); }
101
+ .card-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
102
+ .mini-card { min-height: 148px; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-warm); }
103
+ .mini-card p, .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
104
+ .swatches { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
105
+ .swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
106
+ .swatch.accent { background: var(--accent); } .swatch.surface { background: var(--surface); } .swatch.warm { background: var(--surface-warm); } .swatch.fg { background: var(--fg); }
107
+ .field { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); }
108
+ label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
109
+ input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; }
110
+ input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
111
+ .lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
112
+ .tile { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
113
+ @media (max-width: 860px) { .hero, .lower { grid-template-columns: 1fr; } .metric-grid, .card-row { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); } .metric:last-child { border-bottom: 0; } }
114
+ </style>
115
+ </head>
116
+ <body>
117
+ <main class="page">
118
+ <section>
119
+ <div class="container hero">
120
+ <div class="stack">
121
+ <p class="eyebrow">Bento design system</p>
122
+ <h1>Modular bento grid</h1>
123
+ <p class="lead">Compact product storytelling built from tidy tiles, nested panels, and friendly hierarchy.</p>
124
+ <div class="actions" aria-label="Reference actions"><a class="btn btn-primary" href="#">Primary action</a><a class="btn btn-secondary" href="#">Secondary action</a></div>
125
+ </div>
126
+ <article class="panel" aria-label="Bento component preview">
127
+ <div class="panel-head"><div><p class="eyebrow">Live module</p><h3>Reference component</h3></div><span class="status">online</span></div>
128
+ <div class="metric-grid"><div class="metric"><strong>98%</strong><span>Signal quality</span></div><div class="metric"><strong>24</strong><span>Active flows</span></div><div class="metric"><strong>3.2s</strong><span>Response time</span></div></div>
129
+ <div class="card-row"><div class="mini-card"><h3>Palette</h3><p>modular bento interface with friendly tiles, soft borders, and balanced product density.</p><div class="swatches" aria-label="Token swatches"><span class="swatch accent"></span><span class="swatch surface"></span><span class="swatch warm"></span><span class="swatch fg"></span></div></div><div class="mini-card"><h3>Control</h3><p>Focus, hover, and status states share the same system signal.</p><div class="field"><label for="bento-input">Reference input</label><input id="bento-input" value="Bento system token" /></div></div></div>
130
+ </article>
131
+ </div>
132
+ </section>
133
+ <section><div class="container lower"><article class="tile"><p class="eyebrow">Typography</p><h2>Display rhythm</h2><p>Headlines use the display stack with the declared scale and leading.</p></article><article class="tile"><p class="eyebrow">Surface</p><h2>Layer system</h2><p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p></article><article class="tile"><p class="eyebrow">Interaction</p><h2>Motion states</h2><p>Buttons, inputs, and panels use system-specific focus rings and easing.</p></article></div></section>
134
+ </main>
135
+ </body>
136
+ </html>
package/dist/designer/data/systems/bento/tokens.css ADDED
@@ -0,0 +1,63 @@
1
+ /* design-systems/bento/tokens.css
2
+ * Structured token bindings for Bento.
3
+ * modular bento interface with friendly tiles, soft borders, and balanced product density.
4
+ */
5
+
6
+ :root {
7
+ --bg: #f5f8ff;
8
+ --surface: #ffffff;
9
+ --surface-warm: #eaf1ff;
10
+ --fg: #101828;
11
+ --fg-2: #344054;
12
+ --muted: #667085;
13
+ --meta: #2563eb;
14
+ --border: #d7e0ef;
15
+ --border-soft: #edf2f8;
16
+ --accent: #2563eb;
17
+ --accent-on: #ffffff;
18
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
19
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
20
+ --success: #16a34a;
21
+ --warn: #f59e0b;
22
+ --danger: #ef4444;
23
+ --font-display: Inter, system-ui, sans-serif;
24
+ --font-body: Inter, system-ui, sans-serif;
25
+ --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
26
+ --text-xs: 12px;
27
+ --text-sm: 14px;
28
+ --text-base: 16px;
29
+ --text-lg: 18px;
30
+ --text-xl: 24px;
31
+ --text-2xl: 36px;
32
+ --text-3xl: 54px;
33
+ --text-4xl: 76px;
34
+ --leading-body: 1.52;
35
+ --leading-tight: 1.06;
36
+ --tracking-display: -0.025em;
37
+ --space-1: 4px;
38
+ --space-2: 8px;
39
+ --space-3: 12px;
40
+ --space-4: 16px;
41
+ --space-5: 20px;
42
+ --space-6: 24px;
43
+ --space-8: 32px;
44
+ --space-12: 48px;
45
+ --section-y-desktop: 96px;
46
+ --section-y-tablet: 68px;
47
+ --section-y-phone: 48px;
48
+ --radius-sm: 10px;
49
+ --radius-md: 16px;
50
+ --radius-lg: 24px;
51
+ --radius-pill: 9999px;
52
+ --elev-flat: none;
53
+ --elev-ring: 0 0 0 1px var(--border);
54
+ --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11);
55
+ --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22);
56
+ --motion-fast: 150ms;
57
+ --motion-base: 240ms;
58
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
59
+ --container-max: 1180px;
60
+ --container-gutter-desktop: 36px;
61
+ --container-gutter-tablet: 24px;
62
+ --container-gutter-phone: 16px;
63
+ }
package/dist/designer/data/systems/binance/DESIGN.md ADDED
@@ -0,0 +1,348 @@
1
+ # Design System Inspired by Binance.US
2
+
3
+ > Category: Fintech & Crypto
4
+ > Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency.
5
+
6
+ ## 1. Visual Theme & Atmosphere
7
+
8
+ Binance.US radiates the polished urgency of a digital trading floor — a space where money moves and decisions happen in seconds. The design is a two-tone composition that alternates between stark white trading surfaces and deep near-black panels (`#222126`), creating a visual rhythm that mirrors the bull-and-bear duality of crypto markets. Binance Yellow (`#F0B90B`) cuts through this monochrome foundation like a gold ingot on a steel desk — unmistakable, confident, and engineered to guide every eye toward the next action.
9
+
10
+ The interface speaks the language of fintech trust. Custom BinancePlex typography gives every headline and data point a proprietary gravitas, while generous whitespace and restrained decoration keep the focus on numbers, charts, and call-to-action buttons. The design avoids visual complexity in favor of operational clarity — every element exists to either inform or convert. Product screenshots of the mobile trading app dominate the middle sections, presented on floating device mockups against golden gradients, reinforcing that this is a platform you carry with you.
11
+
12
+ What makes Binance.US distinctive is the tension between warmth and precision. The golden yellow brand color — warm, optimistic, almost celebratory — lives inside a system of cold, clinical grey text and razor-sharp borders. This isn't a playful fintech like Robinhood or a corporate fortress like Fidelity — it's a crypto-native platform that wraps cutting-edge trading technology in the visual language of established finance.
13
+
14
+ **Key Characteristics:**
15
+ - Two-tone light/dark section alternation — white surfaces for trust, dark panels for depth
16
+ - Binance Yellow (`#F0B90B`) as the singular accent color driving all primary actions
17
+ - BinancePlex custom typeface providing proprietary brand identity at every text level
18
+ - Pill-shaped CTA buttons (50px radius) that demand attention
19
+ - Floating device mockups on golden gradients for product showcasing
20
+ - Crypto price tickers with real-time data prominently displayed
21
+ - Shadow-light elevation with subtle 5% opacity card shadows
22
+
23
+ ## 2. Color Palette & Roles
24
+
25
+ ### Primary
26
+
27
+ - **Binance Yellow** (`#F0B90B`): The signature — primary CTA backgrounds, brand accent, active states, link color. The single most important color in the system
28
+ - **Binance Gold** (`#FFD000`): Lighter gold variant used for pill button borders, secondary CTA fills, and golden gradient highlights
29
+ - **Light Gold** (`#F8D12F`): Soft gold for gradient endpoints and hover-adjacent states
30
+
31
+ ### Secondary & Accent
32
+
33
+ - **Active Yellow** (`#D0980B`): Darkened yellow for active/pressed button states — the "clicked" gold
34
+ - **Focus Blue** (`#1EAEDB`): Accessibility focus state — appears on hover and focus for all interactive elements
35
+
36
+ ### Surface & Background
37
+
38
+ - **Pure White** (`#FFFFFF`): Primary page canvas, card surfaces, light section backgrounds
39
+ - **Snow** (`#F5F5F5`): Subtle surface differentiation, input backgrounds, alternating row fills
40
+ - **Binance Dark** (`#222126`): Dark section backgrounds, footer canvas, "Trusted by millions" panel — a near-black with a faint purple undertone
41
+ - **Dark Card** (`#2B2F36`): Card surfaces within dark sections, elevated dark containers
42
+ - **Ink** (`#1E2026`): Button text on yellow backgrounds, deepest text color on light surfaces
43
+
44
+ ### Neutrals & Text
45
+
46
+ - **Primary Text** (`#1E2026`): Main body text, headings on light backgrounds — near-black with slight warmth
47
+ - **Secondary Text** (`#32313A`): Navigation links, descriptive copy on light surfaces
48
+ - **Slate** (`#848E9C`): Tertiary text, metadata, timestamps, footer links — the workhorse grey
49
+ - **Steel** (`#686A6C`): Disabled-adjacent text, subtle labels
50
+ - **Muted** (`#777E90`): Secondary navigation links, less prominent footer text
51
+ - **Hover Dark** (`#1A1A1A`): Universal link hover color — text darkens on hover
52
+
53
+ ### Semantic & Accent
54
+
55
+ - **Crypto Green** (`#0ECB81`): Positive price movement, success states, "up" indicators
56
+ - **Crypto Red** (`#F6465D`): Negative price movement, error states, "down" indicators
57
+ - **Border Light** (`#E6E8EA`): Standard card and section borders on light backgrounds
58
+ - **Border Gold** (`#FFD000`): Active/selected state borders, pill button outlines
59
+
60
+ ### Gradient System
61
+
62
+ - **Golden Glow**: Radial gradient from `#F0B90B` center to `#F8D12F` edge — used behind product mockup screenshots
63
+ - **Dark Fade**: Linear gradient from `#222126` to transparent — used for dark section transitions
64
+ - **Hero Shimmer**: Subtle animated gold gradient on hero section accents
65
+
66
+ ## 3. Typography Rules
67
+
68
+ ### Font Family
69
+
70
+ **Primary:** BinancePlex (custom proprietary typeface designed by Binance)
71
+ - Fallbacks: Arial, sans-serif
72
+ - Replaced DIN Next to solve multi-language spacing issues
73
+ - Available in weights: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
74
+
75
+ **System:** system-ui stack for cookie banners and third-party UI
76
+ - Fallbacks: Segoe UI, Roboto, Helvetica, Arial
77
+
78
+ ### Hierarchy
79
+
80
+ | Role | Size | Weight | Line Height | Letter Spacing | Notes |
81
+ |------|------|--------|-------------|----------------|-------|
82
+ | Display Hero | 60px | 700 | 1.08 | — | Hero headlines, maximum impact |
83
+ | Display Secondary | 34px | 700 | 1.00 | — | Section titles on dark backgrounds |
84
+ | Heading 1 | 28px | 500 | 1.00 | — | Major section headings |
85
+ | Heading 2 | 24px | 700 | 1.00 | — | Feature headings, card titles |
86
+ | Heading 3 | 24px | 600 | 1.00 | — | Subsection headings |
87
+ | Heading 4 | 20px | 600 | 1.25 | — | Card headings, feature labels |
88
+ | Body Large | 20px | 500 | 1.50 | — | Hero subtitle, lead paragraphs |
89
+ | Body | 16px | 500 | 1.50 | — | Standard body text |
90
+ | Body SemiBold | 16px | 600 | 1.30 | — | Emphasized body, nav links |
91
+ | Body Bold | 16px | 700 | 1.50 | — | Strong emphasis text |
92
+ | Button | 16px | 600 | 1.25 | 0.16px | Primary button text |
93
+ | Button Small | 14.4px | 600 | 1.60 | 0.72px | Secondary buttons, wider tracking |
94
+ | Caption | 14px | 500 | 1.43 | — | Metadata, labels, prices |
95
+ | Caption SemiBold | 14px | 600 | 1.50 | — | Emphasized captions |
96
+ | Small | 12px | 600 | 1.00 | — | Tags, badges, fine print |
97
+ | Tiny | 11px | 500 | 1.00 | — | Micro-labels, chart annotations |
98
+
99
+ ### Principles
100
+
101
+ BinancePlex is engineered for data-dense interfaces where numbers and text must coexist at multiple scales. The typeface has tabular numerals by default — critical for price columns and portfolio values that need perfect vertical alignment. Weights lean toward the heavier end (500-700), giving the interface a sense of authority and confidence that's essential for a financial platform. The tight line-heights (1.00-1.25) on headings create a stacked, compressed feel that mirrors the density of trading dashboards, while body text opens up to 1.50 for comfortable reading of educational and marketing content.
102
+
103
+ ## 4. Component Stylings
104
+
105
+ ### Buttons
106
+
107
+ **Primary (Yellow Fill)**
108
+ - Background: Binance Yellow (`#F0B90B`)
109
+ - Text: Ink (`#1E2026`), 16px/600, BinancePlex
110
+ - Border: none
111
+ - Border radius: slightly rounded (6px)
112
+ - Padding: 6px 32px
113
+ - Hover: shifts to Focus Blue (`#1EAEDB`) with white text
114
+ - Active: darkens to Active Yellow (`#D0980B`)
115
+ - Focus: Focus Blue (`#1EAEDB`) bg, 1px black border, 2px black outline, opacity 0.9
116
+ - Transition: background 200ms ease
117
+
118
+ **Primary Pill (Gold)**
119
+ - Background: Binance Gold (`#FFD000`)
120
+ - Text: White (`#FFFFFF`)
121
+ - Border: 1px solid `#FFD000`
122
+ - Border radius: full pill (50px)
123
+ - Padding: 10px horizontal
124
+ - Shadow: `rgb(153,153,153) 0px 2px 10px -3px`
125
+ - Hover: shifts to Focus Blue (`#1EAEDB`) with white text
126
+
127
+ **Secondary (White Outlined)**
128
+ - Background: White (`#FFFFFF`)
129
+ - Text: Binance Yellow (`#F0B90B`)
130
+ - Border: 1px solid `#F0B90B`
131
+ - Border radius: full pill (50px)
132
+ - Padding: 10px horizontal
133
+ - Shadow: `rgb(153,153,153) 0px 2px 10px -3px`
134
+ - Hover: shifts to Focus Blue bg, white text
135
+
136
+ **Disabled**
137
+ - Background: `#E6E8EA`
138
+ - Text: `#848E9C`
139
+ - Cursor: not-allowed
140
+
141
+ ### Cards & Containers
142
+
143
+ - Background: White (`#FFFFFF`) on light sections, Dark Card (`#2B2F36`) on dark sections
144
+ - Border: 1px solid `#E6E8EA` on light cards
145
+ - Border radius: medium rounded (12px) for content cards, tight (8px) for data cards
146
+ - Shadow: `rgba(32, 32, 37, 0.05) 0px 3px 5px 0px` — barely visible, trust-building
147
+ - Hover: shadow intensifies to `rgba(8, 8, 8, 0.05) 0px 3px 5px 5px`
148
+ - Transition: box-shadow 200ms ease
149
+
150
+ ### Inputs & Forms
151
+
152
+ - Background: White (`#FFFFFF`) or Snow (`#F5F5F5`)
153
+ - Text: Ink (`#1E2026`)
154
+ - Border: 1px solid `#E6E8EA`
155
+ - Border radius: 8px
156
+ - Padding: 0px 12px (compact for trading context)
157
+ - Focus: border shifts to black (`#000000`), 1px outline
158
+ - Placeholder: Slate (`#848E9C`)
159
+ - Transition: border-color 200ms ease
160
+
161
+ ### Navigation
162
+
163
+ - Background: White (`#FFFFFF`), sticky
164
+ - Height: ~64px
165
+ - Left: Binance logo (SVG, yellow mark + dark wordmark)
166
+ - Center/Right: navigation links in 14px/600 BinancePlex, color `#32313A`
167
+ - CTA: Yellow pill button "Get Started" in nav right
168
+ - Hover: links darken to `#1A1A1A`
169
+ - Mobile: hamburger menu, full-height overlay
170
+ - Top: optional promotional banner bar
171
+
172
+ ### Image Treatment
173
+
174
+ - Product mockups: device frames on golden gradient backgrounds, floating with subtle shadow
175
+ - Hero images: full-width contained within card-like areas with rounded corners (24px)
176
+ - Video sections: 24px radius with embedded player controls
177
+ - App screenshots: dark-themed trading UI shown within phone/tablet bezels
178
+ - Crypto icons: 48px circular with brand colors
179
+
180
+ ### Trust Indicators
181
+
182
+ - Real-time crypto price ticker (BTC, BNB, SOL with green/red price change)
183
+ - "Trusted by millions" section with statistics on dark background
184
+ - Security badges and regulatory compliance mentions
185
+ - QR code for direct app download in footer
186
+
187
+ ## 5. Layout Principles
188
+
189
+ ### Spacing System
190
+
191
+ Base unit: 8px
192
+
193
+ | Token | Value | Use |
194
+ |-------|-------|-----|
195
+ | space-1 | 4px | Tight inline gaps, icon padding |
196
+ | space-2 | 8px | Base unit, button icon gaps, tight margins |
197
+ | space-3 | 12px | Card internal padding, input padding |
198
+ | space-4 | 16px | Standard padding, section margins |
199
+ | space-5 | 20px | Card gaps, medium padding |
200
+ | space-6 | 24px | Section internal padding |
201
+ | space-7 | 32px | Section breaks, large padding |
202
+ | space-8 | 48px | Major section padding |
203
+ | space-9 | 64px | Hero section padding |
204
+ | space-10 | 80px | Large section spacing |
205
+
206
+ ### Grid & Container
207
+
208
+ - Max container width: 1200px (centered)
209
+ - Hero area: single column with side-by-side text + image above 1024px
210
+ - Feature grid: 3-column on desktop, single column on mobile
211
+ - Product showcase: 2-column (text + device mockup)
212
+ - Horizontal padding: 32px desktop, 16px mobile
213
+ - Grid gap: 24px between feature cards
214
+
215
+ ### Whitespace Philosophy
216
+
217
+ Binance.US uses whitespace as a trust signal. Generous padding around the hero section and between content blocks creates a sense of spaciousness that counters the information density typically associated with crypto exchanges. The light sections breathe — wide margins around headlines and ample spacing between cards — while dark sections compress, packing features into tighter grids to convey capability and depth. The overall rhythm alternates between "inviting entry" (light, spacious) and "deep functionality" (dark, dense).
218
+
219
+ ### Border Radius Scale
220
+
221
+ | Value | Context |
222
+ |-------|---------|
223
+ | 1px | Subtle edge softening, fine UI elements |
224
+ | 2px | Close buttons, micro-interactive elements |
225
+ | 6px | Primary buttons (non-pill), small cards |
226
+ | 8px | Form inputs, data cards, image containers |
227
+ | 10px | Navigation pills, tag containers |
228
+ | 12px | Content cards, feature containers |
229
+ | 24px | Video containers, hero imagery, large cards |
230
+ | 50px | Pill buttons (CTA), search inputs, full-round elements |
231
+
232
+ ## 6. Depth & Elevation
233
+
234
+ | Level | Treatment | Use |
235
+ |-------|-----------|-----|
236
+ | Flat | No shadow, solid background | Default for inline elements |
237
+ | Subtle | `rgba(32, 32, 37, 0.05) 0px 3px 5px` | Content cards, resting state |
238
+ | Medium | `rgba(8, 8, 8, 0.05) 0px 3px 5px 5px` | Hovered cards, elevated containers |
239
+ | Pill Shadow | `rgb(153,153,153) 0px 2px 10px -3px` | Pill CTA buttons, floating actions |
240
+ | Heavy | `rgba(0,0,0) 0px 32px 37px` | Modal overlays, dropdown menus |
241
+
242
+ Binance.US uses a whisper-light shadow system. Card shadows are barely perceptible at 5% opacity — they exist not for dramatic depth but as subtle ground cues that keep cards from feeling pasted onto the surface. The pill button shadow is the exception: slightly more visible to give CTAs a "floating" quality that invites clicks. The philosophy is pragmatic — in a financial context, heavy shadows feel frivolous, while no shadows at all feel flat and untrustworthy. The 5% sweet spot communicates professionalism.
243
+
244
+ ### Decorative Depth
245
+
246
+ - **Golden gradient backgrounds**: Behind device mockup sections, radial golden glow centered on the product
247
+ - **Dark-to-light section transitions**: Hard cut (no gradient blend) between white and `#222126` sections
248
+ - **Price ticker strip**: Flat, borderless, reads as a data bar rather than a decorative element
249
+
250
+ ## 7. Do's and Don'ts
251
+
252
+ ### Do
253
+
254
+ - Use Binance Yellow (`#F0B90B`) exclusively for primary CTAs and brand accents — it's the single point of color
255
+ - Keep light and dark sections strictly alternating for visual rhythm
256
+ - Use BinancePlex at weight 500+ for all interactive elements — this is a confidence-forward design
257
+ - Apply 50px radius to all primary CTA pill buttons — the signature interactive shape
258
+ - Maintain 12px radius on content cards for a polished but not overly rounded feel
259
+ - Show real-time data prominently (prices, percentages, stats) — numbers build trust
260
+ - Use Slate (`#848E9C`) for all secondary/metadata text — the universal quiet voice
261
+ - Keep shadows at 5% opacity or less — barely there but present
262
+
263
+ ### Don't
264
+
265
+ - Don't introduce additional brand colors — Binance Yellow is the only accent; all other color is data-driven (green up, red down)
266
+ - Don't use rounded corners above 12px on content cards — only CTAs and video containers go higher
267
+ - Don't add heavy shadows or hover lift effects — this is a restrained financial platform
268
+ - Don't use BinancePlex below weight 500 for headings — lighter weights undermine authority
269
+ - Don't place yellow text on yellow backgrounds — always ensure high contrast pairing
270
+ - Don't mix pill (50px) and square (6px) button styles in the same row
271
+ - Don't soften the dark sections — `#222126` should feel authoritative, not grey
272
+ - Don't use decorative illustrations — imagery should be product screenshots or data visualizations
273
+ - Don't add animation beyond subtle transitions (200ms ease) — financial platforms need stability
274
+ - Don't use colored backgrounds for semantic states in cards — keep cards white or dark, use text color for semantic meaning
275
+
276
+ ## 8. Responsive Behavior
277
+
278
+ ### Breakpoints
279
+
280
+ | Name | Width | Key Changes |
281
+ |------|-------|-------------|
282
+ | Mobile | <425px | Single column, stacked hero, hamburger nav, 16px padding |
283
+ | Small Mobile | 425-599px | Wider mobile layout, price ticker wraps |
284
+ | Tablet Small | 600-768px | 2-column feature grid begins |
285
+ | Tablet | 769-896px | Hero side-by-side layout begins |
286
+ | Desktop Small | 897-1024px | Full nav expands, 3-column features |
287
+ | Desktop | 1024-1280px | Full layout, max content width |
288
+ | Large Desktop | 1280-1440px | Increased margins, centered container |
289
+ | XL Desktop | >1440px | Max-width container (1200px) with expanded margins |
290
+
291
+ ### Touch Targets
292
+
293
+ - Minimum touch target: 44x44px (WCAG AAA)
294
+ - Pill CTA buttons: 48px height minimum
295
+ - Nav links: 44px touch area
296
+ - Crypto ticker items: full-width tappable rows on mobile
297
+ - App download buttons: large tap zones (50px+)
298
+
299
+ ### Collapsing Strategy
300
+
301
+ - **Navigation**: Full horizontal links → hamburger menu below 897px; logo and "Get Started" CTA remain visible
302
+ - **Hero section**: Side-by-side (text left, image right) → stacked (text top, image below) at 768px
303
+ - **Feature grid**: 3-col → 2-col at 768px → 1-col at 600px
304
+ - **Price ticker**: Horizontal row → wrapping or scrollable at 600px
305
+ - **Section padding**: 64px → 48px → 32px → 16px as viewport narrows
306
+ - **Device mockups**: Scale down proportionally, maintain centered positioning
307
+ - **Footer**: Multi-column → stacked accordion sections on mobile
308
+
309
+ ### Image Behavior
310
+
311
+ - Device mockups: CSS-scaled with max-width constraints, maintain aspect ratio
312
+ - Hero imagery: contained within rounded containers (24px), scale proportionally
313
+ - App screenshots: responsive width with fixed aspect ratio
314
+ - QR code: fixed 120px square, hidden on mobile (replaced with direct app store links)
315
+
316
+ ## 9. Agent Prompt Guide
317
+
318
+ ### Quick Color Reference
319
+
320
+ - Primary CTA: Binance Yellow (`#F0B90B`)
321
+ - Secondary CTA: Binance Gold (`#FFD000`)
322
+ - Background Light: Pure White (`#FFFFFF`)
323
+ - Background Dark: Binance Dark (`#222126`)
324
+ - Heading text: Ink (`#1E2026`)
325
+ - Body text: Slate (`#848E9C`)
326
+ - Border: Border Light (`#E6E8EA`)
327
+ - Positive: Crypto Green (`#0ECB81`)
328
+ - Negative: Crypto Red (`#F6465D`)
329
+
330
+ ### Example Component Prompts
331
+
332
+ - "Create a hero section with white background, a 60px/700 bold headline in Ink (#1E2026), a 20px/500 subtitle in Slate (#848E9C), and a Binance Yellow (#F0B90B) pill button (50px radius) with dark text (#1E2026)"
333
+ - "Design a crypto price ticker strip showing BTC, BNB, SOL prices in 14px/600 Ink (#1E2026) with green (#0ECB81) or red (#F6465D) percentage changes, on a white background with #E6E8EA bottom border"
334
+ - "Build a feature card grid (3-column, 24px gap) with 12px radius white cards, subtle shadow (rgba(32,32,37,0.05) 0px 3px 5px), each containing a yellow (#F0B90B) icon, 20px/600 heading, and 14px/500 #848E9C description"
335
+ - "Create a dark section (#222126) with a 34px/700 white headline centered, and a 3-column feature grid using dark cards (#2B2F36) with 12px radius and yellow (#F0B90B) accent icons"
336
+ - "Design a sticky navigation bar with white background, Binance logo left, 14px/600 #32313A nav links center, and a yellow (#F0B90B) pill button (50px radius, 6px padding 32px) labeled 'Get Started' right"
337
+
338
+ ### Iteration Guide
339
+
340
+ When refining existing screens generated with this design system:
341
+ 1. Focus on ONE component at a time
342
+ 2. Reference specific color names and hex codes from this document
343
+ 3. Remember: Binance Yellow (#F0B90B) is the ONLY accent color — everything else is grey/dark/white
344
+ 4. Use the dark/light section alternation for visual pacing
345
+ 5. Numbers and data should be prominent — this is a financial platform
346
+ 6. Pill buttons (50px radius) for CTAs, regular buttons (6px radius) for form actions
347
+ 7. Keep shadows almost invisible (5% opacity) — trust comes from clarity, not depth
348
+ 8. BinancePlex at 600+ weight for any text that needs to feel authoritative