@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/figma/components.html ADDED
@@ -0,0 +1,344 @@
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>Figma — reference components</title>
7
+ <meta
8
+ name="description"
9
+ content="Reference fixture for design-systems/figma. Every visible
10
+ value comes from tokens.css. Figma's signature moves: strictly
11
+ black-and-white interface, figmaSans variable weights (320–700),
12
+ pill (50px) and circular (50%) geometry, dashed focus outlines,
13
+ figmaMono uppercase labels with positive letter-spacing."
14
+ />
15
+
16
+ <style>
17
+ :root {
18
+ --bg: #ffffff;
19
+ --surface: #ffffff;
20
+ --surface-warm: var(--surface);
21
+
22
+ --fg: #000000;
23
+ --fg-2: #000000;
24
+ --muted: rgba(0, 0, 0, 0.55);
25
+ --meta: rgba(0, 0, 0, 0.40);
26
+
27
+ --border: rgba(0, 0, 0, 0.12);
28
+ --border-soft: rgba(0, 0, 0, 0.06);
29
+
30
+ --accent: #000000;
31
+ --accent-on: #ffffff;
32
+ --accent-hover: rgba(0, 0, 0, 0.85);
33
+ --accent-active: rgba(0, 0, 0, 0.08);
34
+
35
+ --success: #16a34a;
36
+ --warn: #eab308;
37
+ --danger: #dc2626;
38
+
39
+ --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
40
+ --font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
41
+ --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
42
+
43
+ --text-xs: 12px;
44
+ --text-sm: 16px;
45
+ --text-base: 16px;
46
+ --text-lg: 20px;
47
+ --text-xl: 26px;
48
+ --text-2xl: 26px;
49
+ --text-3xl: 64px;
50
+ --text-4xl: 86px;
51
+
52
+ --leading-body: 1.40;
53
+ --leading-tight: 1.00;
54
+ --tracking-display: -0.02em;
55
+
56
+ --space-1: 4px;
57
+ --space-2: 8px;
58
+ --space-3: 12px;
59
+ --space-4: 16px;
60
+ --space-5: 20px;
61
+ --space-6: 24px;
62
+ --space-8: 32px;
63
+ --space-12: 48px;
64
+
65
+ --section-y-desktop: 96px;
66
+ --section-y-tablet: 64px;
67
+ --section-y-phone: 40px;
68
+
69
+ --radius-sm: 50px;
70
+ --radius-md: 8px;
71
+ --radius-lg: 8px;
72
+ --radius-pill: 9999px;
73
+
74
+ --elev-flat: none;
75
+ --elev-ring: 0 0 0 1px var(--border);
76
+ --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
77
+
78
+ --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
79
+
80
+ --motion-fast: 150ms;
81
+ --motion-base: 200ms;
82
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
83
+
84
+ --container-max: 1920px;
85
+ --container-gutter-desktop: 40px;
86
+ --container-gutter-tablet: 24px;
87
+ --container-gutter-phone: 16px;
88
+ }
89
+
90
+ *, *::before, *::after { box-sizing: border-box; }
91
+ html, body { margin: 0; padding: 0; }
92
+ body {
93
+ background: var(--bg);
94
+ color: var(--fg);
95
+ font-family: var(--font-body);
96
+ font-size: var(--text-base);
97
+ line-height: var(--leading-body);
98
+ /* OpenType kern on all text — structural, not decorative. */
99
+ font-feature-settings: "kern";
100
+ -webkit-font-smoothing: antialiased;
101
+ }
102
+
103
+ .container {
104
+ max-width: var(--container-max);
105
+ margin-inline: auto;
106
+ padding-inline: var(--container-gutter-desktop);
107
+ }
108
+ section { padding-block: var(--section-y-desktop); }
109
+ section + section { border-top: 1px solid var(--border); }
110
+ @media (max-width: 1023px) {
111
+ .container { padding-inline: var(--container-gutter-tablet); }
112
+ section { padding-block: var(--section-y-tablet); }
113
+ }
114
+ @media (max-width: 639px) {
115
+ .container { padding-inline: var(--container-gutter-phone); }
116
+ section { padding-block: var(--section-y-phone); }
117
+ }
118
+
119
+ /* ─── Typography ─────────────────────────── */
120
+ h1, h2, h3 {
121
+ font-family: var(--font-display);
122
+ font-weight: 400; /* figmaSans light — base display weight */
123
+ margin: 0;
124
+ line-height: var(--leading-tight);
125
+ font-feature-settings: "kern";
126
+ }
127
+ h1 {
128
+ font-size: var(--text-4xl);
129
+ letter-spacing: var(--tracking-display);
130
+ }
131
+ h2 {
132
+ font-size: var(--text-3xl);
133
+ /* 64px section: line-height 1.10, tracking -0.96px (-0.015em). */
134
+ line-height: 1.10;
135
+ letter-spacing: -0.015em;
136
+ }
137
+ h3 {
138
+ font-size: var(--text-xl);
139
+ /* 26px sub-heading: line-height 1.35, tracking -0.26px (-0.01em).
140
+ Overrides the shared 1.00 set above. */
141
+ line-height: 1.35;
142
+ letter-spacing: -0.01em;
143
+ font-weight: 540;
144
+ }
145
+ p { margin: 0; }
146
+ .lead {
147
+ font-size: var(--text-lg);
148
+ line-height: 1.40;
149
+ color: var(--muted);
150
+ font-weight: 330;
151
+ letter-spacing: -0.007em;
152
+ }
153
+ /* figmaMono uppercase label — section signpost. */
154
+ .mono-label {
155
+ font-family: var(--font-mono);
156
+ font-size: 18px;
157
+ font-weight: 400;
158
+ text-transform: uppercase;
159
+ letter-spacing: 0.54px;
160
+ color: var(--fg);
161
+ line-height: 1.30;
162
+ }
163
+ .body-muted { color: var(--muted); }
164
+ .stack-3 > * + * { margin-block-start: var(--space-3); }
165
+ .stack-4 > * + * { margin-block-start: var(--space-4); }
166
+ .stack-6 > * + * { margin-block-start: var(--space-6); }
167
+
168
+ /* ─── Buttons ─────────────────────────────── */
169
+ /* All buttons use pill (50px) or circle (50%) — non-negotiable. */
170
+ .btn {
171
+ display: inline-flex;
172
+ align-items: center;
173
+ gap: var(--space-2);
174
+ padding: 10px 20px;
175
+ border-radius: var(--radius-sm); /* 50px pill */
176
+ font-family: var(--font-display);
177
+ font-size: var(--text-base);
178
+ font-weight: 400;
179
+ font-feature-settings: "kern";
180
+ line-height: 1;
181
+ cursor: pointer;
182
+ border: none;
183
+ transition: background-color var(--motion-fast) var(--ease-standard),
184
+ color var(--motion-fast) var(--ease-standard);
185
+ text-decoration: none;
186
+ }
187
+ /* Figma focus: dashed 2px outline — the editor selection handle echo. */
188
+ .btn:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }
189
+ .btn-black {
190
+ background: var(--fg);
191
+ color: var(--accent-on);
192
+ }
193
+ .btn-black:hover { background: rgba(0, 0, 0, 0.85); }
194
+ .btn-white {
195
+ background: var(--bg);
196
+ color: var(--fg);
197
+ border: 1px solid rgba(0, 0, 0, 0.15);
198
+ }
199
+ .btn-white:hover { background: rgba(0, 0, 0, 0.04); }
200
+
201
+ /* ─── Product tab bar ─────────────────────── */
202
+ .tab-bar {
203
+ display: flex;
204
+ gap: var(--space-2);
205
+ flex-wrap: wrap;
206
+ }
207
+ .tab {
208
+ padding: 8px 18px;
209
+ border-radius: var(--radius-sm); /* 50px pill */
210
+ font-size: var(--text-base);
211
+ font-weight: 480;
212
+ cursor: pointer;
213
+ border: none;
214
+ background: transparent;
215
+ color: var(--fg);
216
+ font-feature-settings: "kern";
217
+ transition: background-color var(--motion-fast) var(--ease-standard);
218
+ }
219
+ .tab:hover { background: rgba(0, 0, 0, 0.06); }
220
+ .tab.active { background: var(--fg); color: var(--accent-on); }
221
+ .tab:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }
222
+
223
+ /* ─── Cards ──────────────────────────────── */
224
+ .card {
225
+ background: var(--bg);
226
+ border-radius: var(--radius-md);
227
+ padding: var(--space-6);
228
+ box-shadow: var(--elev-raised);
229
+ }
230
+
231
+ /* ─── Layout ─────────────────────────────── */
232
+ .hero-grid {
233
+ display: grid;
234
+ grid-template-columns: 1fr 1fr;
235
+ gap: var(--space-12);
236
+ align-items: center;
237
+ }
238
+ @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
239
+ .features-grid {
240
+ display: grid;
241
+ grid-template-columns: repeat(3, 1fr);
242
+ gap: var(--space-5);
243
+ }
244
+ @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
245
+ @media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
246
+ .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
247
+ .icon { width: 16px; height: 16px; flex-shrink: 0; }
248
+ </style>
249
+ </head>
250
+ <body>
251
+ <main class="container">
252
+ <!-- HERO -->
253
+ <section data-od-id="hero">
254
+ <div class="hero-grid">
255
+ <div class="stack-4">
256
+ <p class="mono-label">Reference fixture · figma</p>
257
+ <h1>Nothing great is made alone.</h1>
258
+ <p class="lead" style="max-width:48ch">
259
+ Figma brings teams together to design, prototype, and build.
260
+ A strictly black-and-white interface where product content is the
261
+ hero. Every value below from tokens.css.
262
+ </p>
263
+ <div class="hero-actions">
264
+ <a href="./tokens.css" class="btn btn-black">
265
+ Get started for free
266
+ <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
267
+ stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
268
+ <path d="M5 12h14M13 6l6 6-6 6"/>
269
+ </svg>
270
+ </a>
271
+ <a href="./DESIGN.md" class="btn btn-white">Read the spec</a>
272
+ </div>
273
+ </div>
274
+
275
+ <aside>
276
+ <div class="card">
277
+ <p class="mono-label" style="margin-bottom:var(--space-4)">Product areas</p>
278
+ <div class="tab-bar">
279
+ <button class="tab active">Design</button>
280
+ <button class="tab">Dev Mode</button>
281
+ <button class="tab">Prototype</button>
282
+ <button class="tab">Slides</button>
283
+ </div>
284
+ </div>
285
+ </aside>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- FEATURES -->
290
+ <section data-od-id="features">
291
+ <p class="mono-label" style="margin-bottom:var(--space-6)">What this fixture exercises</p>
292
+
293
+ <div class="features-grid">
294
+ <article class="card stack-3">
295
+ <h3>Variable precision</h3>
296
+ <p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
297
+ Weight stops 320, 330, 340, 450, 480, 540, 700 — the granular
298
+ control IS the design. Hierarchy through micro-differences.
299
+ </p>
300
+ </article>
301
+ <article class="card stack-3">
302
+ <h3 style="font-weight:340">Monochrome chrome</h3>
303
+ <p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
304
+ #000000 and #ffffff only. Color lives in product content —
305
+ gradients, screenshots, and embedded designs — never the shell.
306
+ </p>
307
+ </article>
308
+ <article class="card stack-3">
309
+ <h3>Dashed focus</h3>
310
+ <p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
311
+ 2px dashed outline on all interactive elements — echoes selection
312
+ handles in the Figma editor. The website speaks the product's UI.
313
+ </p>
314
+ </article>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- FORM / ACTIONS -->
319
+ <section data-od-id="actions">
320
+ <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
321
+ <div class="stack-4">
322
+ <p class="mono-label">Actions</p>
323
+ <h2 style="font-size:var(--text-xl);line-height:1.35;letter-spacing:-0.01em;font-weight:540">All buttons use pill (50px) radius.</h2>
324
+ <p class="lead" style="max-width:44ch">
325
+ No sharp corners on interactive elements. Black solid for primary;
326
+ bordered white for secondary. Focus is dashed, never solid.
327
+ </p>
328
+ </div>
329
+ <div style="display:flex;flex-direction:column;gap:var(--space-4)">
330
+ <div style="display:flex;gap:var(--space-3);flex-wrap:wrap">
331
+ <button class="btn btn-black">Primary action</button>
332
+ <button class="btn btn-white">Secondary</button>
333
+ </div>
334
+ <div style="display:flex;gap:var(--space-3);flex-wrap:wrap">
335
+ <button class="tab active">Active tab</button>
336
+ <button class="tab">Inactive tab</button>
337
+ <button class="tab">Another</button>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </section>
342
+ </main>
343
+ </body>
344
+ </html>
package/dist/designer/data/systems/figma/tokens.css ADDED
@@ -0,0 +1,126 @@
1
+ /* ─────────────────────────────────────────────────────────────────────────
2
+ * design-systems/figma/tokens.css
3
+ *
4
+ * Structured token bindings for the "Figma" brand — vibrant product
5
+ * content inside a strictly black-and-white interface shell.
6
+ *
7
+ * Brand identity in three sentences:
8
+ * 1. Monochrome interface absolutely — pure black (#000000) for all
9
+ * text, borders, and solid buttons; pure white (#ffffff) for all
10
+ * backgrounds; no mid-tones in the chrome layer whatsoever.
11
+ * 2. figmaSans variable font at unusual weight stops (320, 330, 340,
12
+ * 450, 480, 540, 700); figmaMono for uppercase section labels with
13
+ * positive letter-spacing; OpenType "kern" on all text.
14
+ * 3. Pill (50px) and circular (50%) geometry on all interactive
15
+ * elements; dashed 2px focus outlines echoing editor selection
16
+ * handles; negative tracking even on body text (-0.14px).
17
+ *
18
+ * Schema decisions:
19
+ * - --bg: #ffffff; --surface: #ffffff (gallery wall — no surface tint).
20
+ * - --surface-warm aliases --surface (B&W system has no warm tier).
21
+ * - --fg: #000000; --muted: rgba(0,0,0,0.55) for secondary text.
22
+ * - --accent: #000000 (black IS the accent in a monochrome system).
23
+ * - --accent-on: #ffffff; hover and active via glass tint overlays.
24
+ * - --tracking-display: -0.02em (-1.72px / 86px normalized).
25
+ * - --leading-tight: 1.00 (display hero line-height).
26
+ * - --radius-sm: 50px (pill — all interactive elements); pill = pill.
27
+ * - Focus: dashed 2px outline — encoded in components.html, not ring.
28
+ * ─────────────────────────────────────────────────────────────────── */
29
+
30
+ :root {
31
+ /* ─── Surface ──────────────────────────────────────────────────── */
32
+ --bg: #ffffff;
33
+ --surface: #ffffff; /* gallery wall — no surface tint */
34
+ --surface-warm: var(--surface); /* no warm tier in B&W system */
35
+
36
+ /* ─── Foreground ───────────────────────────────────────────────── */
37
+ --fg: #000000;
38
+ --fg-2: #000000; /* B&W — no secondary ink tier */
39
+ --muted: rgba(0, 0, 0, 0.55); /* secondary text on white */
40
+ --meta: rgba(0, 0, 0, 0.40); /* metadata, captions */
41
+
42
+ /* ─── Border ───────────────────────────────────────────────────── */
43
+ --border: rgba(0, 0, 0, 0.12); /* minimal — only where structurally needed */
44
+ --border-soft: rgba(0, 0, 0, 0.06);
45
+
46
+ /* ─── Accent ───────────────────────────────────────────────────── */
47
+ /* In a strictly B&W system, black IS the accent (solid CTA). */
48
+ --accent: #000000;
49
+ --accent-on: #ffffff;
50
+ --accent-hover: rgba(0, 0, 0, 0.85);
51
+ --accent-active: rgba(0, 0, 0, 0.08); /* glass dark — secondary button bg */
52
+
53
+ /* ─── Semantic ─────────────────────────────────────────────────── */
54
+ --success: #16a34a;
55
+ --warn: #eab308;
56
+ --danger: #dc2626;
57
+
58
+ /* ─── Typography ───────────────────────────────────────────────── */
59
+ --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
60
+ --font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
61
+ --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
62
+
63
+ /* Type scale — DESIGN.md §Typography Hierarchy.
64
+ * Figma's display range 86px→12px. The schema spine: 86px hero,
65
+ * 64px section, 26px sub-heading, 20px body-large, 16px body. */
66
+ --text-xs: 12px; /* mono small — uppercase tiny labels */
67
+ --text-sm: 16px; /* body / button */
68
+ --text-base: 16px; /* body baseline */
69
+ --text-lg: 20px; /* body large — descriptions */
70
+ --text-xl: 26px; /* sub-heading */
71
+ --text-2xl: 26px; /* sub-heading (same tier, weight varies) */
72
+ --text-3xl: 64px; /* section heading */
73
+ --text-4xl: 86px; /* display / hero */
74
+
75
+ /* Leading + tracking.
76
+ * --leading-tight=1.00: 86px hero compression.
77
+ * --tracking-display: -0.02em = -1.72px / 86px normalized.
78
+ * Body text: -0.14px inline; mono labels: +0.54px inline. */
79
+ --leading-body: 1.40;
80
+ --leading-tight: 1.00;
81
+ --tracking-display: -0.02em;
82
+
83
+ /* ─── Spacing ──────────────────────────────────────────────────── */
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: 48px;
92
+
93
+ /* Section rhythm — gallery-like pacing between product sections. */
94
+ --section-y-desktop: 96px;
95
+ --section-y-tablet: 64px;
96
+ --section-y-phone: 40px;
97
+
98
+ /* ─── Radius ───────────────────────────────────────────────────── */
99
+ /* Figma uses pill (50px) for all CTAs/tabs; 8px for card containers. */
100
+ --radius-sm: 50px; /* pill — all interactive elements */
101
+ --radius-md: 8px; /* cards, images, dialogs */
102
+ --radius-lg: 8px;
103
+ --radius-pill: 9999px;
104
+
105
+ /* ─── Elevation ────────────────────────────────────────────────── */
106
+ /* Depth via background contrast, not shadows. */
107
+ --elev-flat: none;
108
+ --elev-ring: 0 0 0 1px var(--border);
109
+ --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
110
+
111
+ /* ─── Focus ────────────────────────────────────────────────────── */
112
+ /* Figma's signature: dashed 2px outline encoded at component level.
113
+ --focus-ring is used as the fallback shadow for keyboard nav. */
114
+ --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
115
+
116
+ /* ─── Motion ───────────────────────────────────────────────────── */
117
+ --motion-fast: 150ms;
118
+ --motion-base: 200ms;
119
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
120
+
121
+ /* ─── Layout ───────────────────────────────────────────────────── */
122
+ --container-max: 1920px;
123
+ --container-gutter-desktop: 40px;
124
+ --container-gutter-tablet: 24px;
125
+ --container-gutter-phone: 16px;
126
+ }
package/dist/designer/data/systems/flat/DESIGN.md ADDED
@@ -0,0 +1,71 @@
1
+ # Design System Inspired by Flat
2
+
3
+ > Category: Modern & Minimal
4
+ > Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.
5
+
6
+ ## 1. Visual Theme & Atmosphere
7
+
8
+ Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.
9
+
10
+ - **Visual style:** minimal, enterprise
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:** `#F2673C` — 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 (#F2673C) for CTA emphasis.
26
+ - Use Surface (#FFFFFF) for large backgrounds and cards.
27
+ - Keep body copy on Text (#111827) for legibility.
28
+
29
+ ## 3. Typography
30
+
31
+ - **Scale:** 12/14/16/20/24/32
32
+ - **Families:** primary=Inter, display=Inter, mono=JetBrains 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 `#F2673C`; 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 (#F2673C) 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.