@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/claude/components.html ADDED
@@ -0,0 +1,483 @@
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>Claude (Anthropic) — reference components</title>
7
+ <meta
8
+ name="description"
9
+ content="Reference fixture for design-systems/claude. Literary salon aesthetic:
10
+ warm parchment canvas, terracotta accent, Anthropic Serif headings.
11
+ Every visible value comes from tokens.css via var(--*)."
12
+ />
13
+
14
+ <style>
15
+ /* :root paste — sourced verbatim from
16
+ design-systems/claude/tokens.css. Keep in sync when tokens change. */
17
+ :root {
18
+ --bg: #f5f4ed;
19
+ --surface: #faf9f5;
20
+ --surface-warm: #e8e6dc;
21
+
22
+ --fg: #141413;
23
+ --fg-2: #3d3d3a;
24
+ --muted: #5e5d59;
25
+ --meta: #87867f;
26
+
27
+ --border: #f0eee6;
28
+ --border-soft: #e8e6dc;
29
+
30
+ --accent: #c96442;
31
+ --accent-on: #faf9f5;
32
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
33
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
34
+
35
+ --success: #17a34a;
36
+ --warn: #eab308;
37
+ --danger: #b53333;
38
+
39
+ --font-display: "Anthropic Serif", Georgia, "Times New Roman", serif;
40
+ --font-body: "Anthropic Sans", "Arial", system-ui, -apple-system, sans-serif;
41
+ --font-mono: "Anthropic Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
42
+
43
+ --text-xs: 10px;
44
+ --text-sm: 14px;
45
+ --text-base: 16px;
46
+ --text-lg: 20px;
47
+ --text-xl: 25px;
48
+ --text-2xl: 32px;
49
+ --text-3xl: 52px;
50
+ --text-4xl: 64px;
51
+
52
+ --leading-body: 1.6;
53
+ --leading-tight: 1.1;
54
+ --tracking-display: 0em;
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: 48px;
68
+
69
+ --radius-sm: 8px;
70
+ --radius-md: 12px;
71
+ --radius-lg: 16px;
72
+ --radius-pill: 9999px;
73
+
74
+ --elev-flat: none;
75
+ --elev-ring: 0 0 0 1px var(--border);
76
+ --elev-raised: rgba(0, 0, 0, 0.05) 0px 4px 24px;
77
+
78
+ --focus-ring: 0 0 0 3px rgba(56, 152, 236, 0.3);
79
+
80
+ --motion-fast: 150ms;
81
+ --motion-base: 200ms;
82
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
83
+
84
+ --container-max: 1200px;
85
+ --container-gutter-desktop: 24px;
86
+ --container-gutter-tablet: 16px;
87
+ --container-gutter-phone: 12px;
88
+ }
89
+
90
+ /* ─── Reset (minimal) ───────────────────────────────────── */
91
+ *, *::before, *::after { box-sizing: border-box; }
92
+ html, body { margin: 0; padding: 0; }
93
+ body {
94
+ background: var(--bg);
95
+ color: var(--fg);
96
+ font-family: var(--font-body);
97
+ font-size: var(--text-base);
98
+ line-height: var(--leading-body);
99
+ -webkit-font-smoothing: antialiased;
100
+ }
101
+
102
+ /* ─── Layout primitives ─────────────────────────────────── */
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 — Anthropic Serif for all headings ─────── */
120
+ h1, h2, h3 {
121
+ font-family: var(--font-display);
122
+ font-weight: 500; /* Claude uses weight 500 for all serif headings */
123
+ line-height: var(--leading-tight);
124
+ margin: 0;
125
+ letter-spacing: var(--tracking-display);
126
+ }
127
+ h1 { font-size: var(--text-4xl); }
128
+ h2 { font-size: var(--text-2xl); }
129
+ h3 { font-size: var(--text-xl); }
130
+ p { margin: 0; }
131
+ .lead {
132
+ font-size: var(--text-lg);
133
+ color: var(--muted);
134
+ line-height: var(--leading-body);
135
+ }
136
+ .body-muted { color: var(--muted); }
137
+ .body-sm { font-size: var(--text-sm); }
138
+ .eyebrow {
139
+ font-family: var(--font-body);
140
+ font-size: var(--text-xs);
141
+ color: var(--meta);
142
+ text-transform: uppercase;
143
+ letter-spacing: 0.5px;
144
+ font-weight: 500;
145
+ }
146
+ .stack-3 > * + * { margin-block-start: var(--space-3); }
147
+ .stack-4 > * + * { margin-block-start: var(--space-4); }
148
+ .stack-6 > * + * { margin-block-start: var(--space-6); }
149
+
150
+ /* ─── Buttons ───────────────────────────────────────────── */
151
+ .btn {
152
+ display: inline-flex;
153
+ align-items: center;
154
+ gap: var(--space-2);
155
+ padding: 9px 16px 9px 12px;
156
+ border-radius: var(--radius-sm);
157
+ font-family: var(--font-body);
158
+ font-size: var(--text-sm);
159
+ font-weight: 500;
160
+ line-height: 1;
161
+ cursor: pointer;
162
+ border: none;
163
+ transition:
164
+ box-shadow var(--motion-fast) var(--ease-standard),
165
+ background-color var(--motion-fast) var(--ease-standard);
166
+ text-decoration: none;
167
+ }
168
+ .btn:active { transform: translateY(1px); }
169
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
170
+ /* Primary: Terracotta Brand — the only button with chromatic color */
171
+ .btn-primary {
172
+ background: var(--accent);
173
+ color: var(--accent-on);
174
+ box-shadow: var(--accent) 0px 0px 0px 0px, var(--accent) 0px 0px 0px 1px;
175
+ }
176
+ .btn-primary:hover { background: var(--accent-hover); }
177
+ .btn-primary:active { background: var(--accent-active); }
178
+ /* Secondary: Warm Sand — workhorse button */
179
+ .btn-secondary {
180
+ background: var(--surface-warm);
181
+ color: var(--fg-2);
182
+ box-shadow: var(--surface-warm) 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px;
183
+ }
184
+ .btn-secondary:hover {
185
+ background: color-mix(in oklab, var(--surface-warm), black 4%);
186
+ }
187
+
188
+ /* ─── Inputs ────────────────────────────────────────────── */
189
+ .field {
190
+ display: flex;
191
+ flex-direction: column;
192
+ gap: var(--space-2);
193
+ }
194
+ .field label {
195
+ font-size: var(--text-sm);
196
+ font-weight: 500;
197
+ color: var(--fg-2);
198
+ }
199
+ .field input {
200
+ padding: 10px 12px;
201
+ border-radius: var(--radius-md);
202
+ border: 1px solid var(--border-soft);
203
+ background: var(--surface);
204
+ color: var(--fg);
205
+ font-family: var(--font-body);
206
+ font-size: var(--text-sm);
207
+ outline: none;
208
+ transition:
209
+ border-color var(--motion-fast) var(--ease-standard),
210
+ box-shadow var(--motion-fast) var(--ease-standard);
211
+ }
212
+ .field input:focus-visible {
213
+ border-color: #3898ec; /* Focus Blue — the only cool color in Claude */
214
+ box-shadow: var(--focus-ring);
215
+ }
216
+ .field input::placeholder { color: var(--meta); }
217
+ .field-help {
218
+ font-size: var(--text-xs);
219
+ color: var(--meta);
220
+ }
221
+
222
+ /* ─── Cards — ivory surface, whisper shadow ─────────────── */
223
+ .card {
224
+ background: var(--surface);
225
+ border: 1px solid var(--border);
226
+ border-radius: var(--radius-sm);
227
+ padding: var(--space-6);
228
+ display: flex;
229
+ flex-direction: column;
230
+ gap: var(--space-3);
231
+ box-shadow: var(--elev-raised);
232
+ }
233
+
234
+ /* ─── Badges ────────────────────────────────────────────── */
235
+ .badge {
236
+ display: inline-flex;
237
+ align-items: center;
238
+ gap: var(--space-2);
239
+ padding: 3px var(--space-3);
240
+ border-radius: var(--radius-pill);
241
+ font-family: var(--font-body);
242
+ font-size: var(--text-xs);
243
+ font-weight: 500;
244
+ line-height: 1.6;
245
+ text-transform: uppercase;
246
+ letter-spacing: 0.12px;
247
+ }
248
+ .badge-success {
249
+ color: var(--success);
250
+ background: color-mix(in oklab, var(--success), transparent 90%);
251
+ }
252
+ .badge-muted {
253
+ color: var(--muted);
254
+ background: color-mix(in oklab, var(--muted), transparent 88%);
255
+ }
256
+ .badge-dot {
257
+ width: 6px; height: 6px;
258
+ border-radius: 50%;
259
+ background: currentColor;
260
+ }
261
+
262
+ /* ─── Links ─────────────────────────────────────────────── */
263
+ a {
264
+ color: var(--fg-2);
265
+ text-decoration: none;
266
+ }
267
+ a:hover {
268
+ color: var(--accent);
269
+ text-decoration: none;
270
+ }
271
+
272
+ /* ─── Kbd ───────────────────────────────────────────────── */
273
+ kbd {
274
+ font-family: var(--font-mono);
275
+ font-size: var(--text-xs);
276
+ padding: 2px 6px;
277
+ border-radius: 4px;
278
+ border: 1px solid var(--border-soft);
279
+ background: var(--surface-warm);
280
+ color: var(--muted);
281
+ }
282
+
283
+ /* ─── Section layouts ───────────────────────────────────── */
284
+ .hero-grid {
285
+ display: grid;
286
+ grid-template-columns: 1.4fr 1fr;
287
+ gap: var(--space-12);
288
+ align-items: end;
289
+ }
290
+ @media (max-width: 1023px) {
291
+ .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
292
+ }
293
+ .hero-actions {
294
+ display: flex;
295
+ gap: var(--space-3);
296
+ margin-block-start: var(--space-6);
297
+ flex-wrap: wrap;
298
+ }
299
+ .hero-meta {
300
+ display: flex;
301
+ flex-direction: column;
302
+ gap: var(--space-3);
303
+ padding: var(--space-5);
304
+ border: 1px solid var(--border);
305
+ border-radius: var(--radius-sm);
306
+ background: var(--surface);
307
+ box-shadow: var(--elev-raised);
308
+ }
309
+ .features-grid {
310
+ display: grid;
311
+ grid-template-columns: repeat(3, 1fr);
312
+ gap: var(--space-5);
313
+ }
314
+ @media (max-width: 1023px) {
315
+ .features-grid { grid-template-columns: 1fr 1fr; }
316
+ }
317
+ @media (max-width: 639px) {
318
+ .features-grid { grid-template-columns: 1fr; }
319
+ }
320
+ .form-row {
321
+ display: grid;
322
+ grid-template-columns: 1.4fr 1fr;
323
+ gap: var(--space-12);
324
+ align-items: start;
325
+ }
326
+ @media (max-width: 1023px) {
327
+ .form-row { grid-template-columns: 1fr; }
328
+ }
329
+ .form {
330
+ display: flex;
331
+ flex-direction: column;
332
+ gap: var(--space-4);
333
+ max-width: 420px;
334
+ }
335
+ .form-actions {
336
+ display: flex;
337
+ gap: var(--space-3);
338
+ margin-block-start: var(--space-2);
339
+ }
340
+ .icon { width: 16px; height: 16px; flex-shrink: 0; }
341
+ .row-between {
342
+ display: flex;
343
+ align-items: center;
344
+ justify-content: space-between;
345
+ gap: var(--space-3);
346
+ }
347
+ </style>
348
+ </head>
349
+ <body>
350
+ <main class="container">
351
+ <!-- ════════════════════════════════════════════════════════
352
+ HERO — exercises: h1 (Anthropic Serif 500), .lead,
353
+ .eyebrow, .btn-primary (terracotta), .btn-secondary
354
+ (warm sand), kbd, .badge-success, hero-grid.
355
+ ════════════════════════════════════════════════════════════ -->
356
+ <section data-od-id="hero">
357
+ <div class="hero-grid">
358
+ <div class="stack-4">
359
+ <p class="eyebrow">Reference fixture · claude</p>
360
+ <h1>Thoughtful conversations, made tangible.</h1>
361
+ <p class="lead" style="max-width: 52ch">
362
+ A warm, literary design system built on parchment — where
363
+ every interaction carries the weight of a considered reply.
364
+ </p>
365
+ <div class="hero-actions">
366
+ <a href="./tokens.css" class="btn btn-primary">
367
+ View tokens
368
+ <svg class="icon" viewBox="0 0 24 24" fill="none"
369
+ stroke="currentColor" stroke-width="1.75"
370
+ stroke-linecap="round" stroke-linejoin="round"
371
+ aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
372
+ </a>
373
+ <a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
374
+ </div>
375
+ </div>
376
+
377
+ <aside class="hero-meta" aria-label="System status">
378
+ <div class="row-between">
379
+ <span class="body-sm" style="color: var(--muted)">Model status</span>
380
+ <span class="badge badge-success">
381
+ <span class="badge-dot" aria-hidden="true"></span>
382
+ Available
383
+ </span>
384
+ </div>
385
+ <p class="body-sm body-muted">
386
+ Last reviewed
387
+ <time datetime="2026-05-15">2026-05-15</time> · v1.0
388
+ </p>
389
+ <p class="body-sm body-muted">
390
+ Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens.
391
+ </p>
392
+ </aside>
393
+ </div>
394
+ </section>
395
+
396
+ <!-- ════════════════════════════════════════════════════════
397
+ FEATURES — exercises: h2, h3, .card (ivory + whisper
398
+ shadow), .body-muted, link, .features-grid.
399
+ ════════════════════════════════════════════════════════════ -->
400
+ <section data-od-id="features">
401
+ <div class="stack-3">
402
+ <p class="eyebrow">What this fixture exercises</p>
403
+ <h2 style="max-width: 30ch">
404
+ Warm parchment, terracotta, and the gentlest possible containment.
405
+ </h2>
406
+ </div>
407
+
408
+ <div class="features-grid" style="margin-block-start: var(--space-8)">
409
+ <article class="card">
410
+ <h3>Parchment surface tokens</h3>
411
+ <p class="body-muted body-sm">
412
+ --bg (#f5f4ed) → --surface (#faf9f5) → --surface-warm (#e8e6dc).
413
+ Three warm tiers with yellow-brown undertones — no cool grays anywhere.
414
+ </p>
415
+ <a href="./tokens.css" class="body-sm">Inspect tokens →</a>
416
+ </article>
417
+
418
+ <article class="card">
419
+ <h3>Terracotta discipline</h3>
420
+ <p class="body-muted body-sm">
421
+ --accent (#c96442) appears only on the primary CTA and brand
422
+ moments. The warm sand secondary button keeps the screen
423
+ from feeling mono-terracotta.
424
+ </p>
425
+ <a href="./DESIGN.md" class="body-sm">Read the rule →</a>
426
+ </article>
427
+
428
+ <article class="card">
429
+ <h3>Serif/sans hierarchy</h3>
430
+ <p class="body-muted body-sm">
431
+ Anthropic Serif weight 500 for all headings — the single weight
432
+ gives every title the gravitas of a published title. Anthropic
433
+ Sans handles UI text with quiet efficiency.
434
+ </p>
435
+ <a href="./tokens.css" class="body-sm">Inspect typography →</a>
436
+ </article>
437
+ </div>
438
+ </section>
439
+
440
+ <!-- ════════════════════════════════════════════════════════
441
+ FORM — exercises: .field, input :focus-visible (Focus
442
+ Blue), .btn-primary, .btn-secondary, .field-help.
443
+ ════════════════════════════════════════════════════════════ -->
444
+ <section data-od-id="form">
445
+ <div class="form-row">
446
+ <div class="stack-4">
447
+ <p class="eyebrow">Form components</p>
448
+ <h2>Inputs in the same warm context.</h2>
449
+ <p class="body-muted" style="max-width: 48ch">
450
+ Focus rings use Focus Blue (#3898ec) — the ONLY cool color in
451
+ the entire Claude system. It exists purely for accessibility.
452
+ Everything else stays warm.
453
+ </p>
454
+ </div>
455
+
456
+ <form class="form" onsubmit="event.preventDefault();">
457
+ <div class="field">
458
+ <label for="email">Work email</label>
459
+ <input
460
+ id="email"
461
+ type="email"
462
+ placeholder="you@team.dev"
463
+ autocomplete="email"
464
+ required
465
+ />
466
+ <p class="field-help">
467
+ We'll send a copy of the spec and nothing else.
468
+ </p>
469
+ </div>
470
+ <div class="form-actions">
471
+ <button type="submit" class="btn btn-primary">
472
+ Send the spec
473
+ </button>
474
+ <button type="button" class="btn btn-secondary">
475
+ Skip for now
476
+ </button>
477
+ </div>
478
+ </form>
479
+ </div>
480
+ </section>
481
+ </main>
482
+ </body>
483
+ </html>
package/dist/designer/data/systems/claude/tokens.css ADDED
@@ -0,0 +1,130 @@
1
+ /* ─────────────────────────────────────────────────────────────────────────
2
+ * design-systems/claude/tokens.css
3
+ *
4
+ * Structured token bindings for "Design System Inspired by Claude (Anthropic)".
5
+ * Literary salon aesthetic: warm parchment canvas, terracotta accent,
6
+ * exclusive warm-toned neutrals, Anthropic Serif for all headlines.
7
+ *
8
+ * Key brand decisions encoded here:
9
+ * - Parchment (#f5f4ed) as page canvas — never pure white
10
+ * - Ivory (#faf9f5) for elevated card surfaces
11
+ * - Terracotta (#c96442) as the single brand accent — earthy, un-tech
12
+ * - All grays carry a yellow-brown undertone — no cool blue-grays
13
+ * - Serif for headings, sans for UI — the typographic identity split
14
+ * - Ring-based depth (0 0 0 1px) instead of traditional drop shadows
15
+ * - Generous body line-height (1.60) for a literary reading experience
16
+ * - Focus blue (#3898ec) is the only cool color — accessibility only
17
+ * ─────────────────────────────────────────────────────────────────── */
18
+
19
+ :root {
20
+ /* ─── Surface (3 levels) ─────────────────────────────────────────
21
+ * Parchment (bg) → Ivory (surface) → Warm Sand (surface-warm).
22
+ * Never use pure white as a page background — the warm cream IS
23
+ * the Claude personality. */
24
+ --bg: #f5f4ed;
25
+ --surface: #faf9f5;
26
+ --surface-warm: #e8e6dc; /* Warm Sand — button bg, prominent interactive surfaces */
27
+
28
+ /* ─── Foreground ramp (4 levels) ────────────────────────────────
29
+ * Every gray carries a yellow-brown undertone. No cool blue-grays. */
30
+ --fg: #141413; /* Anthropic Near Black — warmest "black" in any major tech brand */
31
+ --fg-2: #3d3d3a; /* Dark Warm — dark text links, emphasized secondary text */
32
+ --muted: #5e5d59; /* Olive Gray — secondary body text */
33
+ --meta: #87867f; /* Stone Gray — tertiary text, footnotes, metadata */
34
+
35
+ /* ─── Border (2 levels) ──────────────────────────────────────────
36
+ * Cream-tinted borders — the gentlest possible containment. */
37
+ --border: #f0eee6; /* Border Cream — standard light-theme border */
38
+ --border-soft: #e8e6dc; /* Border Warm — section dividers, emphasized containment */
39
+
40
+ /* ─── Accent ──────────────────────────────────────────────────────
41
+ * Terracotta Brand — the only chromatic element on most screens.
42
+ * Used for primary CTA buttons and highest-signal brand moments only. */
43
+ --accent: #c96442;
44
+ --accent-on: #faf9f5; /* Ivory — fg when terracotta is the bg */
45
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
46
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
47
+
48
+ /* ─── Semantic ────────────────────────────────────────────────────
49
+ * Error Crimson is a warm, deep red — serious without alarming.
50
+ * Focus Blue (#3898ec) is the sole cool color in the system,
51
+ * reserved for accessibility (input focus rings). */
52
+ --success: #17a34a;
53
+ --warn: #eab308;
54
+ --danger: #b53333; /* Error Crimson — warm red, not standard danger red */
55
+
56
+ /* ─── Typography ──────────────────────────────────────────────────
57
+ * Anthropic Serif (Georgia fallback) for all headlines — the single
58
+ * weight (500) gives every heading the gravitas of a published title.
59
+ * Anthropic Sans for all UI/body — quiet functional efficiency. */
60
+ --font-display: "Anthropic Serif", Georgia, "Times New Roman", serif;
61
+ --font-body: "Anthropic Sans", "Arial", system-ui, -apple-system, sans-serif;
62
+ --font-mono: "Anthropic Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
63
+
64
+ /* Type scale — DESIGN.md §3 Typography Rules.
65
+ * 64px hero → 52px section → 36px sub → 32px card → 25px small */
66
+ --text-xs: 10px; /* Overline — uppercase labels at smallest scale */
67
+ --text-sm: 14px; /* Caption — metadata, descriptions */
68
+ --text-base: 16px; /* Body Standard */
69
+ --text-lg: 20px; /* Body Large — intro paragraphs */
70
+ --text-xl: 25px; /* Sub-heading Small */
71
+ --text-2xl: 32px; /* Sub-heading — card titles, feature names */
72
+ --text-3xl: 52px; /* Section Heading */
73
+ --text-4xl: 64px; /* Display / Hero — maximum impact, book-title presence */
74
+
75
+ --leading-body: 1.6; /* Relaxed — closer to a book than a dashboard */
76
+ --leading-tight: 1.1; /* Tight headings — serif letterforms breathe naturally */
77
+ --tracking-display: 0em; /* Serif faces carry authority; no compression needed */
78
+
79
+ /* ─── Spacing ─────────────────────────────────────────────────────
80
+ * 8px base unit per DESIGN.md §5. Card internal padding ~24–32px. */
81
+ --space-1: 4px;
82
+ --space-2: 8px;
83
+ --space-3: 12px;
84
+ --space-4: 16px;
85
+ --space-5: 20px;
86
+ --space-6: 24px;
87
+ --space-8: 32px;
88
+ --space-12: 48px;
89
+
90
+ --section-y-desktop: 96px; /* Editorial pacing — generous like a magazine spread */
91
+ --section-y-tablet: 64px;
92
+ --section-y-phone: 48px;
93
+
94
+ /* ─── Radius ──────────────────────────────────────────────────────
95
+ * Claude's softness: comfortably rounded (8px) for standard,
96
+ * generously rounded (12px) for primary, very rounded (16px) for
97
+ * featured containers. No sharp corners — softness is core identity. */
98
+ --radius-sm: 8px; /* Comfortably rounded — standard buttons, cards */
99
+ --radius-md: 12px; /* Generously rounded — primary buttons, inputs, nav */
100
+ --radius-lg: 16px; /* Very rounded — featured containers, video players */
101
+ --radius-pill: 9999px; /* Chip-like elements (use sparingly) */
102
+
103
+ /* ─── Elevation ───────────────────────────────────────────────────
104
+ * Ring shadows (0px 0px 0px 1px) instead of drop shadows.
105
+ * The signature is a border-like halo — shadow pretending to be
106
+ * a border. Drop shadows only at 0.05 opacity when truly needed. */
107
+ --elev-flat: none;
108
+ --elev-ring: 0 0 0 1px var(--border); /* Border-like halo */
109
+ --elev-raised: rgba(0, 0, 0, 0.05) 0px 4px 24px; /* Whisper soft — barely visible lift */
110
+
111
+ /* ─── Focus ring ──────────────────────────────────────────────────
112
+ * Focus Blue (#3898ec) is the ONLY cool color in the Claude system.
113
+ * Reserved exclusively for accessibility / keyboard focus. */
114
+ --focus-ring: 0 0 0 3px rgba(56, 152, 236, 0.3);
115
+
116
+ /* ─── Motion ──────────────────────────────────────────────────────
117
+ * Short, purposeful transitions. The editorial warmth doesn't need
118
+ * animation energy — interactions should feel calm. */
119
+ --motion-fast: 150ms;
120
+ --motion-base: 200ms;
121
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
122
+
123
+ /* ─── Layout ──────────────────────────────────────────────────────
124
+ * 1200px container, editorial layout. Hero is centered, feature
125
+ * sections use 2–3 column card grids. */
126
+ --container-max: 1200px;
127
+ --container-gutter-desktop: 24px;
128
+ --container-gutter-tablet: 16px;
129
+ --container-gutter-phone: 12px;
130
+ }