@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/shopify/components.html ADDED
@@ -0,0 +1,342 @@
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>Shopify — reference components</title>
7
+ <meta
8
+ name="description"
9
+ content="Reference fixture for design-systems/shopify. Every visible
10
+ value comes from tokens.css. Shopify's signature moves: dark-first
11
+ cinematic (void black canvas), NeueHaasGrotesk ultra-light display,
12
+ full-pill CTAs, neon green (#36F4A4) focus rings only."
13
+ />
14
+
15
+ <style>
16
+ :root {
17
+ --bg: #000000;
18
+ --surface: #02090a;
19
+ --surface-warm: #061a1c;
20
+
21
+ --fg: #ffffff;
22
+ --fg-2: #ffffff;
23
+ --muted: #a1a1aa;
24
+ --meta: #71717a;
25
+
26
+ --border: #1e2c31;
27
+ --border-soft: #3f3f46;
28
+
29
+ --accent: #36f4a4;
30
+ --accent-on: #000000;
31
+ --accent-hover: #2de097;
32
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
33
+
34
+ --success: #36f4a4;
35
+ --warn: #eab308;
36
+ --danger: #dc2626;
37
+
38
+ --font-display: "NeueHaasGrotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
39
+ --font-body: "Inter Variable", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
40
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
41
+
42
+ --text-xs: 12px;
43
+ --text-sm: 14px;
44
+ --text-base: 18px;
45
+ --text-lg: 20px;
46
+ --text-xl: 32px;
47
+ --text-2xl: 48px;
48
+ --text-3xl: 70px;
49
+ --text-4xl: 96px;
50
+
51
+ --leading-body: 1.56;
52
+ --leading-tight: 1.00;
53
+ --tracking-display: 0em;
54
+
55
+ --space-1: 4px;
56
+ --space-2: 8px;
57
+ --space-3: 12px;
58
+ --space-4: 16px;
59
+ --space-5: 24px;
60
+ --space-6: 28px;
61
+ --space-8: 36px;
62
+ --space-12: 64px;
63
+
64
+ --section-y-desktop: 96px;
65
+ --section-y-tablet: 64px;
66
+ --section-y-phone: 40px;
67
+
68
+ --radius-sm: 9999px;
69
+ --radius-md: 8px;
70
+ --radius-lg: 12px;
71
+ --radius-pill: 9999px;
72
+
73
+ --elev-flat: none;
74
+ --elev-ring: 0 0 0 1px var(--border);
75
+ --elev-raised:
76
+ rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
77
+ rgba(0, 0, 0, 0.1) 0px 2px 2px,
78
+ rgba(0, 0, 0, 0.1) 0px 4px 4px,
79
+ rgba(0, 0, 0, 0.1) 0px 8px 8px,
80
+ rgba(255, 255, 255, 0.03) 0px 1px 0px inset;
81
+
82
+ --focus-ring: 0 0 0 2px #36f4a4;
83
+
84
+ --motion-fast: 150ms;
85
+ --motion-base: 200ms;
86
+ --ease-standard: ease;
87
+
88
+ --container-max: 1280px;
89
+ --container-gutter-desktop: 64px;
90
+ --container-gutter-tablet: 32px;
91
+ --container-gutter-phone: 16px;
92
+ }
93
+
94
+ *, *::before, *::after { box-sizing: border-box; }
95
+ html, body { margin: 0; padding: 0; }
96
+ body {
97
+ background: var(--bg);
98
+ color: var(--muted);
99
+ font-family: var(--font-body);
100
+ font-size: var(--text-base);
101
+ line-height: var(--leading-body);
102
+ /* ss03 on all text per brand spec. */
103
+ font-feature-settings: "ss03";
104
+ -webkit-font-smoothing: antialiased;
105
+ }
106
+
107
+ .container {
108
+ max-width: var(--container-max);
109
+ margin-inline: auto;
110
+ padding-inline: var(--container-gutter-desktop);
111
+ }
112
+ section { padding-block: var(--section-y-desktop); }
113
+ section + section { border-top: 1px solid var(--border); }
114
+ @media (max-width: 1023px) {
115
+ .container { padding-inline: var(--container-gutter-tablet); }
116
+ section { padding-block: var(--section-y-tablet); }
117
+ }
118
+ @media (max-width: 639px) {
119
+ .container { padding-inline: var(--container-gutter-phone); }
120
+ section { padding-block: var(--section-y-phone); }
121
+ }
122
+
123
+ /* ─── Typography ─────────────────────────── */
124
+ h1, h2, h3 {
125
+ font-family: var(--font-display);
126
+ font-weight: 330; /* ultra-light — the Shopify signature */
127
+ margin: 0;
128
+ color: var(--fg);
129
+ font-feature-settings: "ss03";
130
+ line-height: var(--leading-tight);
131
+ }
132
+ h1 {
133
+ font-size: var(--text-4xl);
134
+ /* 96px display: weight 330, line-height 1.00. */
135
+ }
136
+ h2 {
137
+ font-size: var(--text-3xl);
138
+ /* 70px heading 1: line-height 1.00. */
139
+ }
140
+ h3 {
141
+ font-size: var(--text-xl);
142
+ /* 32px heading 4: line-height 1.14, tracking 0.32px (positive).
143
+ Overrides the shared 1.00 set above. */
144
+ line-height: 1.14;
145
+ letter-spacing: 0.32px;
146
+ font-weight: 360;
147
+ }
148
+ p { margin: 0; }
149
+ .lead {
150
+ font-size: var(--text-lg);
151
+ line-height: 1.40;
152
+ color: var(--muted);
153
+ font-weight: 500;
154
+ letter-spacing: 0.3px;
155
+ }
156
+ .body-muted { color: var(--muted); }
157
+ .stack-3 > * + * { margin-block-start: var(--space-3); }
158
+ .stack-4 > * + * { margin-block-start: var(--space-4); }
159
+ .stack-6 > * + * { margin-block-start: var(--space-6); }
160
+
161
+ /* ─── Buttons — full pill for all CTAs. ──── */
162
+ .btn {
163
+ display: inline-flex;
164
+ align-items: center;
165
+ gap: var(--space-2);
166
+ padding: 12px 26px 12px 16px;
167
+ border-radius: var(--radius-sm); /* 9999px full pill */
168
+ font-family: var(--font-display);
169
+ font-size: var(--text-base);
170
+ font-weight: 400;
171
+ font-feature-settings: "ss03";
172
+ line-height: 1.5;
173
+ cursor: pointer;
174
+ border: 2px solid transparent;
175
+ transition: all var(--motion-base) var(--ease-standard);
176
+ text-decoration: none;
177
+ }
178
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
179
+ .btn-primary {
180
+ background: var(--fg);
181
+ color: var(--bg);
182
+ border-color: transparent;
183
+ }
184
+ .btn-primary:hover { opacity: 0.9; }
185
+ .btn-ghost {
186
+ background: transparent;
187
+ color: var(--fg);
188
+ border-color: var(--fg);
189
+ }
190
+ .btn-ghost:hover { background: var(--fg); color: var(--bg); }
191
+
192
+ /* ─── Cards ──────────────────────────────── */
193
+ .card {
194
+ background: var(--surface);
195
+ border: 1px solid var(--border);
196
+ border-radius: var(--radius-md);
197
+ padding: var(--space-6);
198
+ box-shadow: var(--elev-raised);
199
+ transition: box-shadow var(--motion-base) var(--ease-standard);
200
+ }
201
+
202
+ /* ─── Stats ──────────────────────────────── */
203
+ .stat {
204
+ display: flex;
205
+ flex-direction: column;
206
+ gap: var(--space-2);
207
+ }
208
+ .stat-number {
209
+ font-family: var(--font-display);
210
+ font-size: var(--text-3xl);
211
+ font-weight: 750;
212
+ color: var(--fg);
213
+ font-feature-settings: "ss03";
214
+ line-height: 1.00;
215
+ }
216
+
217
+ /* ─── Inputs ─────────────────────────────── */
218
+ .field { display: flex; flex-direction: column; gap: var(--space-2); }
219
+ .field label { font-size: var(--text-sm); font-weight: 500; color: var(--muted); }
220
+ .field input {
221
+ background: var(--surface-warm);
222
+ color: var(--fg);
223
+ border: 1px solid var(--border-soft);
224
+ border-radius: var(--radius-md);
225
+ padding: 12px 16px;
226
+ font-family: var(--font-body);
227
+ font-size: var(--text-base);
228
+ outline: none;
229
+ transition: border-color var(--motion-fast) var(--ease-standard),
230
+ box-shadow var(--motion-fast) var(--ease-standard);
231
+ }
232
+ .field input::placeholder { color: var(--meta); }
233
+ .field input:focus {
234
+ border-color: var(--accent);
235
+ box-shadow: var(--focus-ring);
236
+ }
237
+
238
+ /* ─── Layout ─────────────────────────────── */
239
+ .hero-grid {
240
+ display: grid;
241
+ grid-template-columns: 1fr 1fr;
242
+ gap: var(--space-12);
243
+ align-items: center;
244
+ }
245
+ @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
246
+ .stats-grid {
247
+ display: grid;
248
+ grid-template-columns: repeat(3, 1fr);
249
+ gap: var(--space-8);
250
+ }
251
+ @media (max-width: 639px) { .stats-grid { grid-template-columns: 1fr; } }
252
+ .hero-actions { display: flex; gap: var(--space-4); margin-block-start: var(--space-8); flex-wrap: wrap; }
253
+ .icon { width: 16px; height: 16px; flex-shrink: 0; }
254
+ </style>
255
+ </head>
256
+ <body>
257
+ <main class="container">
258
+ <!-- HERO -->
259
+ <section data-od-id="hero">
260
+ <div class="hero-grid">
261
+ <div class="stack-6">
262
+ <h1>Commerce is yours to own.</h1>
263
+ <p class="lead" style="max-width:46ch">
264
+ Start, run, and grow your business. Shopify's cinematic dark canvas
265
+ stages commerce like a product keynote. Ultra-light NeueHaasGrotesk
266
+ at 96px. Every value from tokens.css.
267
+ </p>
268
+ <div class="hero-actions">
269
+ <a href="./tokens.css" class="btn btn-primary">
270
+ Start for free
271
+ <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
272
+ stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
273
+ <path d="M5 12h14M13 6l6 6-6 6"/>
274
+ </svg>
275
+ </a>
276
+ <a href="./DESIGN.md" class="btn btn-ghost">Read the spec</a>
277
+ </div>
278
+ </div>
279
+
280
+ <aside>
281
+ <div class="card">
282
+ <p style="font-size:var(--text-sm);color:var(--meta);margin-bottom:var(--space-4)">Commerce data</p>
283
+ <div class="stats-grid" style="grid-template-columns:1fr 1fr">
284
+ <div class="stat">
285
+ <span class="stat-number">150M+</span>
286
+ <span style="font-size:var(--text-sm);color:var(--muted)">buyers served</span>
287
+ </div>
288
+ <div class="stat">
289
+ <span class="stat-number">15+</span>
290
+ <span style="font-size:var(--text-sm);color:var(--muted)">years in commerce</span>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </aside>
295
+ </div>
296
+ </section>
297
+
298
+ <!-- FEATURES -->
299
+ <section data-od-id="features" style="background:var(--surface-warm);margin-inline:calc(var(--container-gutter-desktop)*-1);padding-inline:var(--container-gutter-desktop)">
300
+ <h2 style="max-width:24ch;margin-bottom:var(--space-8)">Built for scale.</h2>
301
+
302
+ <div class="stats-grid">
303
+ <div class="stat">
304
+ <span style="font-family:var(--font-display);font-size:var(--text-3xl);font-weight:750;color:var(--fg);font-feature-settings:'ss03';line-height:1">96px</span>
305
+ <span style="font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-2)">Display XL, weight 330 — featherweight monumental type</span>
306
+ </div>
307
+ <div class="stat">
308
+ <span style="font-family:var(--font-display);font-size:var(--text-3xl);font-weight:750;color:var(--accent);font-feature-settings:'ss03';line-height:1">#36F4A4</span>
309
+ <span style="font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-2)">Neon Green — focus rings only, never fills large surfaces</span>
310
+ </div>
311
+ <div class="stat">
312
+ <span style="font-family:var(--font-display);font-size:var(--text-3xl);font-weight:750;color:var(--fg);font-feature-settings:'ss03';line-height:1">9999px</span>
313
+ <span style="font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-2)">Full pill for all primary CTAs — non-negotiable brand rule</span>
314
+ </div>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- FORM -->
319
+ <section data-od-id="form">
320
+ <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
321
+ <div class="stack-4">
322
+ <h3>Start your free trial.</h3>
323
+ <p style="font-size:var(--text-base);color:var(--muted);line-height:var(--leading-body);margin-top:var(--space-3)">
324
+ Dark input surfaces. Border: 1px solid #3f3f46 at rest.
325
+ Focus: 2px solid neon green. 8px radius on inputs.
326
+ </p>
327
+ </div>
328
+ <form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
329
+ onsubmit="event.preventDefault()">
330
+ <div class="field">
331
+ <label for="email">Email address</label>
332
+ <input id="email" type="email" placeholder="you@store.com" />
333
+ </div>
334
+ <div style="margin-top:var(--space-2)">
335
+ <button type="submit" class="btn btn-primary">Start for free</button>
336
+ </div>
337
+ </form>
338
+ </div>
339
+ </section>
340
+ </main>
341
+ </body>
342
+ </html>
package/dist/designer/data/systems/shopify/tokens.css ADDED
@@ -0,0 +1,141 @@
1
+ /* ─────────────────────────────────────────────────────────────────────────
2
+ * design-systems/shopify/tokens.css
3
+ *
4
+ * Structured token bindings for the "Shopify" brand — dark-first cinematic,
5
+ * ethereal ultra-light display type, neon green accent.
6
+ *
7
+ * Brand identity in three sentences:
8
+ * 1. Darkness as theatre — deep forest-teal surfaces (not pure black:
9
+ * #000000 root, #02090A cards, #061A1C sections, #102620 elevated)
10
+ * create a nocturnal keynote atmosphere, staged like a product reveal.
11
+ * 2. NeueHaasGrotesk variable at monumental scale (96px) with impossible
12
+ * lightness (weight 330–400, OpenType ss03); Inter Variable handles
13
+ * body at unusual weights (420/450/550); combined they feel etched.
14
+ * 3. Neon Green (#36F4A4) is the singular high-energy accent — pulsing
15
+ * like a bioluminescent signal exclusively for focus rings and accent
16
+ * highlights; white is the only text color on dark.
17
+ *
18
+ * Schema decisions:
19
+ * - --bg: #000000 (void — root page background, true black).
20
+ * - --surface: #02090A (deep teal — card surfaces).
21
+ * - --surface-warm: #061A1C (dark forest — section backgrounds).
22
+ * - --fg: #ffffff (white — the only text color on dark).
23
+ * - --fg-2: #ffffff (same; no secondary ink split on dark canvas).
24
+ * - --muted: #a1a1aa (muted zinc — secondary text, descriptions).
25
+ * - --meta: #71717a (shade-50 — timestamps, tertiary info).
26
+ * - --border: #1e2c31 (dark card border); --border-soft: #3f3f46.
27
+ * - --accent: #36F4A4 (neon green — focus/accent only, not bg).
28
+ * - --accent-on: #000000 (black text on neon green).
29
+ * - --tracking-display: 0em (NeueHaasGrotesk at 96px tracks neutral).
30
+ * - --leading-tight: 1.00 (display XL line-height at 96px).
31
+ * - --radius-sm: 9999px (full pill for all CTAs per brand identity).
32
+ * ─────────────────────────────────────────────────────────────────── */
33
+
34
+ :root {
35
+ /* ─── Surface ──────────────────────────────────────────────────── */
36
+ --bg: #000000; /* void — true black root */
37
+ --surface: #02090a; /* deep teal — card surfaces */
38
+ --surface-warm: #061a1c; /* dark forest — section backgrounds */
39
+
40
+ /* ─── Foreground ───────────────────────────────────────────────── */
41
+ --fg: #ffffff; /* white — only text color on dark */
42
+ --fg-2: #ffffff; /* same; no secondary ink split */
43
+ --muted: #a1a1aa; /* muted zinc — secondary text */
44
+ --meta: #71717a; /* shade-50 — timestamps, tertiary */
45
+
46
+ /* ─── Border ───────────────────────────────────────────────────── */
47
+ --border: #1e2c31; /* dark card border */
48
+ --border-soft: #3f3f46; /* shade-70 — subtle dividers */
49
+
50
+ /* ─── Accent ───────────────────────────────────────────────────── */
51
+ /* Neon Green is precious — focus rings and critical accent highlights only.
52
+ It never fills large surfaces. --accent-on is black for contrast. */
53
+ --accent: #36f4a4; /* neon green */
54
+ --accent-on: #000000;
55
+ --accent-hover: #2de097; /* slightly darker neon on hover */
56
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
57
+
58
+ /* ─── Semantic ─────────────────────────────────────────────────── */
59
+ --success: #36f4a4; /* neon green — success state */
60
+ --warn: #eab308;
61
+ --danger: #dc2626;
62
+
63
+ /* ─── Typography ───────────────────────────────────────────────── */
64
+ --font-display: "NeueHaasGrotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
65
+ --font-body: "Inter Variable", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
66
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
67
+
68
+ /* Type scale — DESIGN.md §Typography Hierarchy.
69
+ * NeueHaasGrotesk from 96px (display XL) to 24px (heading 6).
70
+ * Inter Variable from 20px (body large) to 12px (label).
71
+ * Schema spine maps the key stops. */
72
+ --text-xs: 12px; /* label — uppercase, wide-tracked */
73
+ --text-sm: 14px; /* caption — metadata */
74
+ --text-base: 18px; /* body — standard Inter reading */
75
+ --text-lg: 20px; /* body large — lead paragraphs */
76
+ --text-xl: 32px; /* heading 4 — card headings */
77
+ --text-2xl: 48px; /* heading 3 — feature titles */
78
+ --text-3xl: 70px; /* heading 1 — section titles */
79
+ --text-4xl: 96px; /* display XL — cinematic hero */
80
+
81
+ /* Leading + tracking.
82
+ * --leading-tight=1.00: display XL at 96px.
83
+ * h2 (70px) → 1.00; h3 (48px) → 1.14 per DESIGN.md.
84
+ * --tracking-display: 0em (NeueHaasGrotesk tracks neutral at display).
85
+ * NB: positive tracking (0.32px–2.4px) exists at smaller NeueHaas sizes
86
+ * and is set inline in components.html. */
87
+ --leading-body: 1.56;
88
+ --leading-tight: 1.00;
89
+ --tracking-display: 0em;
90
+
91
+ /* ─── Spacing ──────────────────────────────────────────────────── */
92
+ /* 8px base unit per DESIGN.md §Spacing System. */
93
+ --space-1: 4px;
94
+ --space-2: 8px;
95
+ --space-3: 12px;
96
+ --space-4: 16px;
97
+ --space-5: 24px;
98
+ --space-6: 28px;
99
+ --space-8: 36px;
100
+ --space-12: 64px;
101
+
102
+ /* Section rhythm — theatrical pacing: vast dark expanse between sections. */
103
+ --section-y-desktop: 96px;
104
+ --section-y-tablet: 64px;
105
+ --section-y-phone: 40px;
106
+
107
+ /* ─── Radius ───────────────────────────────────────────────────── */
108
+ /* Full pill for all primary CTAs — non-negotiable brand identity.
109
+ Cards: 8px standard, 12px featured. */
110
+ --radius-sm: 9999px; /* full pill — all CTA buttons */
111
+ --radius-md: 8px; /* standard cards, inputs */
112
+ --radius-lg: 12px; /* featured cards */
113
+ --radius-pill: 9999px;
114
+
115
+ /* ─── Elevation ────────────────────────────────────────────────── */
116
+ /* Multi-layered shadow: 1px ring + progressive blur + inset white glow.
117
+ Shadows are "ambient occlusion" on dark surfaces, not traditional lift. */
118
+ --elev-flat: none;
119
+ --elev-ring: 0 0 0 1px var(--border);
120
+ --elev-raised:
121
+ rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
122
+ rgba(0, 0, 0, 0.1) 0px 2px 2px,
123
+ rgba(0, 0, 0, 0.1) 0px 4px 4px,
124
+ rgba(0, 0, 0, 0.1) 0px 8px 8px,
125
+ rgba(255, 255, 255, 0.03) 0px 1px 0px inset;
126
+
127
+ /* ─── Focus ────────────────────────────────────────────────────── */
128
+ /* Neon Green focus ring — 2px ring, brand signature. */
129
+ --focus-ring: 0 0 0 2px #36f4a4;
130
+
131
+ /* ─── Motion ───────────────────────────────────────────────────── */
132
+ --motion-fast: 150ms;
133
+ --motion-base: 200ms;
134
+ --ease-standard: ease;
135
+
136
+ /* ─── Layout ───────────────────────────────────────────────────── */
137
+ --container-max: 1280px;
138
+ --container-gutter-desktop: 64px;
139
+ --container-gutter-tablet: 32px;
140
+ --container-gutter-phone: 16px;
141
+ }
package/dist/designer/data/systems/simple/DESIGN.md ADDED
@@ -0,0 +1,71 @@
1
+ # Design System Inspired by Simple
2
+
3
+ > Category: Modern & Minimal
4
+ > Straightforward, no-frills design with clean typography, neutral colors, and intuitive layouts that stay out of the way.
5
+
6
+ ## 1. Visual Theme & Atmosphere
7
+
8
+ Straightforward, no-frills design with clean typography, neutral colors, and intuitive layouts that stay out of the way.
9
+
10
+ - **Visual style:** minimal, clean
11
+ - **Color stance:** primary, neutral, success, warning, danger
12
+ - **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
13
+
14
+ ## 2. Color
15
+
16
+ - **Primary:** `#3B82F6` — Token from style foundations.
17
+ - **Secondary:** `#8B5CF6` — Token from style foundations.
18
+ - **Success:** `#16A34A` — Token from style foundations.
19
+ - **Warning:** `#D97706` — Token from style foundations.
20
+ - **Danger:** `#DC2626` — Token from style foundations.
21
+ - **Surface:** `#FFFFFF` — Token from style foundations.
22
+ - **Text:** `#111827` — Token from style foundations.
23
+ - **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
24
+
25
+ - Favor Primary (#3B82F6) for CTA emphasis.
26
+ - Use Surface (#FFFFFF) for large backgrounds and cards.
27
+ - Keep body copy on Text (#111827) for legibility.
28
+
29
+ ## 3. Typography
30
+
31
+ - **Scale:** 12/14/16/20/24/32
32
+ - **Families:** primary=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 `#3B82F6`; secondary actions stay neutral.
51
+ - Inputs: strong focus-visible states, clear labels, and predictable error messaging.
52
+ - Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
53
+
54
+ ## 7. Motion & Interaction
55
+
56
+ - Use subtle transitions that emphasize Primary (#3B82F6) as the interaction signal.
57
+ - Default to short, purposeful transitions (150–250ms) with stable easing.
58
+ - Ensure hover, focus-visible, active, disabled, and loading states are explicit.
59
+
60
+ ## 8. Voice & Brand
61
+
62
+ - Tone should reflect the visual style: concise, confident, and product-specific.
63
+ - Keep microcopy action-oriented and avoid generic filler language.
64
+ - Preserve the style identity in headlines while keeping UI labels literal and clear.
65
+
66
+ ## 9. Anti-patterns
67
+
68
+ - Do not introduce off-palette colors when an existing token can solve the problem.
69
+ - Do not flatten hierarchy by using the same type size/weight for all text.
70
+ - Do not add decorative effects that reduce readability or accessibility.
71
+ - Do not mix unrelated visual metaphors in the same interface.