@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/framer/components.html ADDED
@@ -0,0 +1,438 @@
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>Framer — reference components</title>
7
+ <meta
8
+ name="description"
9
+ content="Reference fixture for design-systems/framer. Void black canvas,
10
+ Framer Blue accent, GT Walsheim display with extreme negative
11
+ letter-spacing, pill buttons, blue ring-shadow elevation."
12
+ />
13
+
14
+ <style>
15
+ :root {
16
+ --bg: #000000;
17
+ --surface: #090909;
18
+ --surface-warm: var(--surface);
19
+
20
+ --fg: #ffffff;
21
+ --fg-2: #a6a6a6;
22
+ --muted: rgba(255, 255, 255, 0.6);
23
+ --meta: rgba(255, 255, 255, 0.4);
24
+
25
+ --border: rgba(0, 153, 255, 0.15);
26
+ --border-soft: rgba(255, 255, 255, 0.06);
27
+
28
+ --accent: #0099ff;
29
+ --accent-on: #ffffff;
30
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
31
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
32
+
33
+ --success: #16a34a;
34
+ --warn: #eab308;
35
+ --danger: #dc2626;
36
+
37
+ --font-display: "GT Walsheim Framer Medium", "GT Walsheim Medium", "GT Walsheim", -apple-system, "Segoe UI", Inter, sans-serif;
38
+ --font-body: "Inter Variable", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
39
+ --font-mono: "Azeret Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
40
+
41
+ --text-xs: 12px;
42
+ --text-sm: 14px;
43
+ --text-base: 15px;
44
+ --text-lg: 18px;
45
+ --text-xl: 22px;
46
+ --text-2xl: 32px;
47
+ --text-3xl: 62px;
48
+ --text-4xl: 110px;
49
+
50
+ --leading-body: 1.3;
51
+ --leading-tight: 0.95;
52
+ --tracking-display: -0.05em;
53
+
54
+ --space-1: 4px;
55
+ --space-2: 8px;
56
+ --space-3: 12px;
57
+ --space-4: 16px;
58
+ --space-5: 20px;
59
+ --space-6: 24px;
60
+ --space-8: 32px;
61
+ --space-12: 48px;
62
+
63
+ --section-y-desktop: 120px;
64
+ --section-y-tablet: 80px;
65
+ --section-y-phone: 60px;
66
+
67
+ --radius-sm: 8px;
68
+ --radius-md: 12px;
69
+ --radius-lg: 20px;
70
+ --radius-pill: 9999px;
71
+
72
+ --elev-flat: none;
73
+ --elev-ring: 0 0 0 1px var(--border);
74
+ --elev-raised:
75
+ 0 0.5px 0 0.5px rgba(255, 255, 255, 0.1),
76
+ 0 10px 30px rgba(0, 0, 0, 0.25);
77
+
78
+ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
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 ─────────────────────────────────────────────── */
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
+ font-feature-settings: "cv01", "cv05", "cv09", "cv11", "ss03", "ss07";
101
+ }
102
+
103
+ /* ─── Layout ─────────────────────────────────────────────── */
104
+ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
105
+ section { padding-block: var(--section-y-desktop); }
106
+ section + section { border-top: 1px solid var(--border-soft); }
107
+ @media (max-width: 1199px) {
108
+ .container { padding-inline: var(--container-gutter-tablet); }
109
+ section { padding-block: var(--section-y-tablet); }
110
+ }
111
+ @media (max-width: 809px) {
112
+ .container { padding-inline: var(--container-gutter-phone); }
113
+ section { padding-block: var(--section-y-phone); }
114
+ }
115
+
116
+ /* ─── Typography — GT Walsheim display, Inter body ───────── */
117
+ h1, h2, h3 {
118
+ font-family: var(--font-display);
119
+ font-weight: 500; /* GT Walsheim Medium — the brand weight, never bold */
120
+ line-height: var(--leading-tight);
121
+ margin: 0;
122
+ color: var(--fg);
123
+ }
124
+ /* Display hero: 110px on desktop, scaling down on smaller breakpoints.
125
+ The most extreme 0.85 line-height is reserved for this size only. */
126
+ h1 {
127
+ font-size: var(--text-4xl);
128
+ line-height: 0.85;
129
+ letter-spacing: var(--tracking-display);
130
+ }
131
+ h2 {
132
+ font-size: var(--text-3xl);
133
+ letter-spacing: var(--tracking-display);
134
+ }
135
+ h3 {
136
+ font-size: var(--text-xl);
137
+ font-family: var(--font-body);
138
+ font-weight: 700;
139
+ letter-spacing: -0.025em;
140
+ line-height: 1.2;
141
+ }
142
+ @media (max-width: 1199px) {
143
+ h1 { font-size: 85px; }
144
+ h2 { font-size: 48px; }
145
+ }
146
+ @media (max-width: 809px) {
147
+ h1 { font-size: 56px; letter-spacing: -0.04em; }
148
+ h2 { font-size: 36px; }
149
+ }
150
+ p { margin: 0; }
151
+ .lead { font-size: var(--text-lg); color: var(--fg-2); line-height: var(--leading-body); }
152
+ .body-muted { color: var(--fg-2); }
153
+ .body-sm { font-size: var(--text-sm); }
154
+ .eyebrow {
155
+ font-family: var(--font-body);
156
+ font-size: 11px;
157
+ color: var(--muted);
158
+ text-transform: uppercase;
159
+ letter-spacing: 0.18em;
160
+ font-weight: 500;
161
+ }
162
+ .stack-3 > * + * { margin-block-start: var(--space-3); }
163
+ .stack-4 > * + * { margin-block-start: var(--space-4); }
164
+ .stack-5 > * + * { margin-block-start: var(--space-5); }
165
+ .stack-6 > * + * { margin-block-start: var(--space-6); }
166
+
167
+ /* ─── Buttons — pill shapes, no sharp corners ────────────── */
168
+ .btn {
169
+ display: inline-flex;
170
+ align-items: center;
171
+ gap: var(--space-2);
172
+ padding: 10px 18px;
173
+ border-radius: var(--radius-pill); /* Pill — DESIGN.md: never sharp corners */
174
+ font-family: var(--font-body);
175
+ font-size: var(--text-base);
176
+ font-weight: 500;
177
+ line-height: 1;
178
+ cursor: pointer;
179
+ border: none;
180
+ transition:
181
+ background-color var(--motion-fast) var(--ease-standard),
182
+ color var(--motion-fast) var(--ease-standard),
183
+ transform var(--motion-base) var(--ease-standard);
184
+ text-decoration: none;
185
+ }
186
+ .btn:active { transform: scale(0.97); }
187
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
188
+
189
+ /* Primary: solid white pill on void — DESIGN.md §4 primary CTA */
190
+ .btn-primary {
191
+ background: #ffffff;
192
+ color: #000000;
193
+ }
194
+ .btn-primary:hover { background: color-mix(in oklab, #ffffff, black 6%); }
195
+
196
+ /* Secondary: frosted glass pill on dark — DESIGN.md §4 frosted variant */
197
+ .btn-secondary {
198
+ background: rgba(255, 255, 255, 0.1);
199
+ color: var(--fg);
200
+ backdrop-filter: blur(8px);
201
+ }
202
+ .btn-secondary:hover { background: rgba(255, 255, 255, 0.18); }
203
+
204
+ /* ─── Inputs — dark surface, blue focus ring ─────────────── */
205
+ .field { display: flex; flex-direction: column; gap: var(--space-2); }
206
+ .field label { font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
207
+ .field input {
208
+ padding: 12px 14px;
209
+ border-radius: var(--radius-sm);
210
+ border: 1px solid var(--border-soft);
211
+ background: var(--surface);
212
+ color: var(--fg);
213
+ font-family: var(--font-body);
214
+ font-size: var(--text-base);
215
+ outline: none;
216
+ transition:
217
+ border-color var(--motion-fast) var(--ease-standard),
218
+ box-shadow var(--motion-fast) var(--ease-standard);
219
+ }
220
+ .field input::placeholder { color: var(--meta); }
221
+ .field input:hover { border-color: var(--border); }
222
+ .field input:focus-visible {
223
+ border-color: var(--accent);
224
+ box-shadow: var(--focus-ring);
225
+ }
226
+ .field-help { font-size: var(--text-xs); color: var(--muted); }
227
+
228
+ /* ─── Cards — near-black surface, Framer Blue ring shadow ── */
229
+ .card {
230
+ background: var(--surface);
231
+ border-radius: var(--radius-md);
232
+ padding: var(--space-6);
233
+ display: flex;
234
+ flex-direction: column;
235
+ gap: var(--space-3);
236
+ box-shadow: var(--elev-ring); /* Framer Blue 1px ring — the signature */
237
+ transition: box-shadow var(--motion-base) var(--ease-standard);
238
+ }
239
+ .card:hover {
240
+ box-shadow:
241
+ 0 0 0 1px rgba(0, 153, 255, 0.28),
242
+ var(--elev-raised);
243
+ }
244
+ .card .card-eyebrow {
245
+ font-family: var(--font-mono);
246
+ font-size: var(--text-xs);
247
+ color: var(--accent);
248
+ letter-spacing: 0.04em;
249
+ }
250
+
251
+ /* ─── Badges ────────────────────────────────────────────── */
252
+ .badge {
253
+ display: inline-flex; align-items: center; gap: var(--space-2);
254
+ padding: 4px 10px;
255
+ border-radius: var(--radius-pill);
256
+ font-size: var(--text-xs); font-weight: 500; line-height: 1.4;
257
+ }
258
+ .badge-accent {
259
+ color: var(--accent);
260
+ background: color-mix(in oklab, var(--accent), transparent 88%);
261
+ box-shadow: inset 0 0 0 1px var(--border);
262
+ }
263
+ .badge-muted {
264
+ color: var(--muted);
265
+ background: rgba(255, 255, 255, 0.06);
266
+ }
267
+ .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
268
+
269
+ /* ─── Links ─────────────────────────────────────────────── */
270
+ a { color: var(--accent); text-decoration: none; }
271
+ a:hover { text-decoration: underline; text-underline-offset: 3px; }
272
+ kbd {
273
+ font-family: var(--font-mono); font-size: var(--text-xs);
274
+ padding: 2px 6px; border-radius: var(--radius-sm);
275
+ border: 1px solid var(--border); background: var(--surface); color: var(--fg-2);
276
+ }
277
+
278
+ /* ─── Layout helpers ────────────────────────────────────── */
279
+ .hero { display: flex; flex-direction: column; gap: var(--space-8); }
280
+ .hero-headline { max-width: 16ch; }
281
+ .hero-lead { max-width: 48ch; }
282
+ .hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
283
+ .hero-meta {
284
+ display: flex; align-items: center; gap: var(--space-3);
285
+ margin-block-start: var(--space-6);
286
+ color: var(--meta); font-size: var(--text-sm);
287
+ }
288
+ .hero-divider { width: 4px; height: 4px; border-radius: 50%; background: var(--border-soft); }
289
+
290
+ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
291
+ @media (max-width: 1199px) { .features-grid { grid-template-columns: 1fr 1fr; } }
292
+ @media (max-width: 809px) { .features-grid { grid-template-columns: 1fr; } }
293
+
294
+ .form-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: start; }
295
+ @media (max-width: 1199px) { .form-row { grid-template-columns: 1fr; } }
296
+ .form {
297
+ display: flex; flex-direction: column; gap: var(--space-4);
298
+ max-width: 460px;
299
+ padding: var(--space-6);
300
+ background: var(--surface);
301
+ border-radius: var(--radius-lg);
302
+ box-shadow: var(--elev-raised); /* Floating elevated stack */
303
+ }
304
+ .form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
305
+ .icon { width: 16px; height: 16px; flex-shrink: 0; }
306
+ .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
307
+
308
+ /* ─── Background glow — subtle blue radial behind hero ──── */
309
+ .hero-glow {
310
+ position: relative;
311
+ isolation: isolate;
312
+ }
313
+ .hero-glow::before {
314
+ content: "";
315
+ position: absolute;
316
+ inset: -10% -20% auto -20%;
317
+ height: 60%;
318
+ background: radial-gradient(50% 60% at 50% 0%, rgba(0, 153, 255, 0.15), transparent 70%);
319
+ z-index: -1;
320
+ pointer-events: none;
321
+ }
322
+ </style>
323
+ </head>
324
+ <body>
325
+ <main class="container">
326
+ <section data-od-id="hero" class="hero-glow">
327
+ <div class="hero">
328
+ <div class="stack-6">
329
+ <p class="eyebrow">Reference fixture · framer</p>
330
+ <h1 class="hero-headline">The&nbsp;internet is your canvas.</h1>
331
+ <p class="lead hero-lead">
332
+ Design and ship production-grade sites without writing the
333
+ boilerplate. Every interaction, every breakpoint, every motion
334
+ curve — composed on the void, rendered to the open web.
335
+ </p>
336
+ <div class="hero-actions">
337
+ <a href="./tokens.css" class="btn btn-primary">
338
+ Start designing
339
+ <svg class="icon" viewBox="0 0 24 24" fill="none"
340
+ stroke="currentColor" stroke-width="1.75"
341
+ stroke-linecap="round" stroke-linejoin="round"
342
+ aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
343
+ </a>
344
+ <a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
345
+ </div>
346
+ </div>
347
+ <div class="hero-meta">
348
+ <span>v1.0</span>
349
+ <span class="hero-divider" aria-hidden="true"></span>
350
+ <span>Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens</span>
351
+ <span class="hero-divider" aria-hidden="true"></span>
352
+ <span class="badge badge-accent">
353
+ <span class="badge-dot" aria-hidden="true"></span>
354
+ Live preview
355
+ </span>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <section data-od-id="features">
361
+ <div class="stack-4">
362
+ <p class="eyebrow">What this fixture exercises</p>
363
+ <h2 style="max-width: 18ch">Craft is the product, polish is the proof.</h2>
364
+ </div>
365
+ <div class="features-grid" style="margin-block-start: var(--space-8)">
366
+ <article class="card">
367
+ <span class="card-eyebrow">01 · CANVAS</span>
368
+ <h3>Pure void, no compromise.</h3>
369
+ <p class="body-muted body-sm">
370
+ --bg (#000000) → --surface (#090909) → --accent (#0099ff).
371
+ Absolute black is the foundation — never charcoal, never
372
+ brown-tinted dark gray. The void is the design.
373
+ </p>
374
+ <a href="./tokens.css" class="body-sm">Inspect surface tokens →</a>
375
+ </article>
376
+ <article class="card">
377
+ <span class="card-eyebrow">02 · TYPE</span>
378
+ <h3>Compressed, spring-loaded.</h3>
379
+ <p class="body-muted body-sm">
380
+ GT Walsheim Medium at -0.05em tracking gives display
381
+ text the breathless density Framer is known for. Inter
382
+ for body, with six OpenType features for refined micro-type.
383
+ </p>
384
+ <a href="./DESIGN.md" class="body-sm">Read the typography rules →</a>
385
+ </article>
386
+ <article class="card">
387
+ <span class="card-eyebrow">03 · DEPTH</span>
388
+ <h3>Blue rings, white edges.</h3>
389
+ <p class="body-muted body-sm">
390
+ Cards are contained by a 1px Framer Blue ring shadow
391
+ (rgba(0, 153, 255, 0.15)) — depth comes from light tints,
392
+ not from heavy drop shadows. The blue is the brand.
393
+ </p>
394
+ <a href="./tokens.css" class="body-sm">Inspect elevation →</a>
395
+ </article>
396
+ </div>
397
+ </section>
398
+
399
+ <section data-od-id="form">
400
+ <div class="form-row">
401
+ <div class="stack-5">
402
+ <p class="eyebrow">Form components</p>
403
+ <h2>Inputs in the void.</h2>
404
+ <p class="body-muted" style="max-width: 44ch">
405
+ Form fields sit on the near-black surface with subtle
406
+ translucent borders. Focus lights up the Framer Blue ring —
407
+ a halo, not a hard edge, so the void stays sacred even
408
+ while you type.
409
+ </p>
410
+ <div class="row-between" style="max-width: 44ch">
411
+ <span class="badge badge-muted">
412
+ <span class="badge-dot" aria-hidden="true"></span>
413
+ No tracking
414
+ </span>
415
+ <span class="body-sm" style="color: var(--meta)">Updated <time datetime="2026-05-18">2026-05-18</time></span>
416
+ </div>
417
+ </div>
418
+ <form class="form" onsubmit="event.preventDefault();">
419
+ <div class="field">
420
+ <label for="email">Work email</label>
421
+ <input id="email" type="email" placeholder="you@studio.com" autocomplete="email" required />
422
+ <p class="field-help">We'll send a beta invite and nothing else.</p>
423
+ </div>
424
+ <div class="field">
425
+ <label for="project">Project name</label>
426
+ <input id="project" type="text" placeholder="Untitled canvas" autocomplete="off" />
427
+ <p class="field-help">You can rename it any time from the editor.</p>
428
+ </div>
429
+ <div class="form-actions">
430
+ <button type="submit" class="btn btn-primary">Request access</button>
431
+ <button type="button" class="btn btn-secondary">View showcase</button>
432
+ </div>
433
+ </form>
434
+ </div>
435
+ </section>
436
+ </main>
437
+ </body>
438
+ </html>
package/dist/designer/data/systems/framer/tokens.css ADDED
@@ -0,0 +1,238 @@
1
+ /* ─────────────────────────────────────────────────────────────────────────
2
+ * design-systems/framer/tokens.css
3
+ *
4
+ * Structured token bindings for "Design System Inspired by Framer".
5
+ * Pure black void canvas, Framer Blue accent, GT Walsheim display with
6
+ * extreme negative letter-spacing, Inter body with OpenType features,
7
+ * and a blue-tinted ring-shadow elevation system.
8
+ *
9
+ * Brand-specific schema decisions (each one bends a schema convention
10
+ * to match Framer's voice rather than the cross-brand default):
11
+ *
12
+ * 1. `--bg` is `#000000` (Void Black). DESIGN.md §1 names this as
13
+ * "absolute void, not warm or gray-tinted" — Framer's identity
14
+ * hinges on pure black. `#0a0a0a` or any near-black tint reads
15
+ * as a generic dark theme; the void IS the brand. `--surface`
16
+ * sits at `#090909` (Near Black) for elevated dark surfaces.
17
+ *
18
+ * 2. `--border` is `rgba(0, 153, 255, 0.15)` — the literal Framer
19
+ * Blue ring-shadow alpha. DESIGN.md §6 Level 1 names this single
20
+ * value as the "Framer Blue glow ring" used for card containment.
21
+ * Binding `--border` to the blue alpha lets `--elev-ring`
22
+ * (`0 0 0 1px var(--border)`) reproduce Framer's signature blue
23
+ * hairline by default. `--border-soft` drops to a translucent
24
+ * white for inner row separators that should not light up.
25
+ *
26
+ * 3. `--accent` is Framer Blue (`#0099ff`), the one-and-only chromatic
27
+ * move. DESIGN.md §2 forbids decorative use ("one-accent-color
28
+ * system"). Primary CTAs in Framer are SOLID WHITE, not blue —
29
+ * the components.html encodes that by using `#ffffff` as the
30
+ * primary button background, so `--accent` stays reserved for
31
+ * links, borders, focus rings, and the chromatic moments where
32
+ * blue actually appears.
33
+ *
34
+ * 4. Type scale climbs to 110px (`--text-4xl`) — the GT Walsheim
35
+ * display hero size from DESIGN.md §3. `--leading-tight` drops
36
+ * to `0.95` (the section-display tier) so headings across the
37
+ * scale read compressed-but-not-overlapping; the most extreme
38
+ * 0.85 line-height is reserved for the display hero h1 inline.
39
+ * `--tracking-display` is `-0.05em`, the em-relative form of
40
+ * "-5.5px at 110px" that scales proportionally with size.
41
+ *
42
+ * 5. Section rhythm is generous: `120px` desktop, `80px` tablet,
43
+ * `60px` phone. DESIGN.md §5 describes "80–120px between sections"
44
+ * with whitespace manifesting as "void" — the black background
45
+ * means generous padding reads as dramatic pause, not as wasted
46
+ * space. Container caps at `1200px` per DESIGN.md §5.
47
+ *
48
+ * 6. `--radius-sm: 8px` (DESIGN.md §5: standard component radius
49
+ * for code blocks / buttons / interactive elements). Pill
50
+ * buttons go via `--radius-pill` and override locally — the
51
+ * 40px–100px pill range from DESIGN.md is button-specific and
52
+ * not part of the shared schema.
53
+ *
54
+ * 7. `--elev-raised` reproduces the multi-layer Framer card stack
55
+ * from DESIGN.md §6 Level 3 verbatim: a 0.5px white top-edge
56
+ * highlight (simulating light hitting the top surface) plus a
57
+ * deep ambient 30px shadow (true floating depth). Never drop
58
+ * either layer when overriding — both are required for the
59
+ * "built-not-pasted-onto-page" quality DESIGN.md describes.
60
+ *
61
+ * 8. Foreground ramp binds all four tiers (#ffffff →
62
+ * rgba(255,255,255,0.6) → rgba(255,255,255,0.4)) so cross-brand
63
+ * components targeting `--fg-2`, `--muted`, or `--meta` resolve
64
+ * to Framer's actual ghost-white tiers instead of collapsing.
65
+ * `--fg-2` binds to Muted Silver (#a6a6a6), the documented
66
+ * secondary text color from DESIGN.md §2.
67
+ *
68
+ * Source contracts:
69
+ * - Standard token names: design-systems/_schema/tokens.schema.ts
70
+ * - A2 fallback parity: design-systems/_schema/defaults.css
71
+ * - Lint enforcement: apps/daemon/src/lint-artifact.ts
72
+ *
73
+ * Keep this file additive: never invent token names not also
74
+ * documented in DESIGN.md or the schema. GT Walsheim / Inter / Azeret
75
+ * Mono are not bundled — the font stacks list system fallbacks so
76
+ * artifacts render acceptably even when the custom faces are not
77
+ * loaded, and any host that wants the real faces links them externally.
78
+ * ─────────────────────────────────────────────────────────────────── */
79
+
80
+ :root {
81
+ /* ─── Surface ─────────────────────────────────────────────────────
82
+ * The void: pure black canvas with a near-black elevated surface.
83
+ * No warm tier — `--surface-warm` aliases to surface because the
84
+ * brand explicitly forbids tinted backgrounds (DESIGN.md §7 don't:
85
+ * "no warm dark backgrounds, no charcoal, no brownish blacks"). */
86
+ --bg: #000000; /* Void Black — the foundation canvas */
87
+ --surface: #090909; /* Near Black — elevated dark surface */
88
+ --surface-warm: var(--surface); /* alias — Framer has no warm tier */
89
+
90
+ /* ─── Foreground ramp (4 levels) ──────────────────────────────────
91
+ * Pure white headings, muted silver body, ghost white tertiary,
92
+ * fainter placeholder/disabled. `--fg-2` and `--muted` and `--meta`
93
+ * are independently bound (not aliased) because Framer genuinely
94
+ * uses distinct text tiers across heading, body, caption, and
95
+ * placeholder per DESIGN.md §2. */
96
+ --fg: #ffffff; /* Pure White — headings, primary text */
97
+ --fg-2: #a6a6a6; /* Muted Silver — body description */
98
+ --muted: rgba(255, 255, 255, 0.6); /* Ghost White — captions, tertiary */
99
+ --meta: rgba(255, 255, 255, 0.4); /* Faint White — placeholders, disabled */
100
+
101
+ /* ─── Border ──────────────────────────────────────────────────────
102
+ * Blue ring-shadow as border is THE signature: `rgba(0, 153, 255,
103
+ * 0.15)` at 1px spread is the literal Framer Blue glow ring from
104
+ * DESIGN.md §6 Level 1. Binding `--border` to the blue alpha (not
105
+ * a solid hex) lets `--elev-ring` reproduce Framer's hairline by
106
+ * default. `--border-soft` drops to a translucent white for inner
107
+ * row separators that should not light up the section. */
108
+ --border: rgba(0, 153, 255, 0.15); /* signature Framer Blue ring alpha */
109
+ --border-soft: rgba(255, 255, 255, 0.06); /* inner separator on dark */
110
+
111
+ /* ─── Accent ──────────────────────────────────────────────────────
112
+ * Framer Blue — the cold, electric one-accent-color of the system.
113
+ * DESIGN.md §2 forbids decorative use ("one-accent-color system").
114
+ * Used in links, ring borders, focus rings, and badge tints.
115
+ *
116
+ * Primary CTAs in Framer are SOLID WHITE PILL on black, not blue.
117
+ * components.html encodes that pattern via `background: #ffffff`
118
+ * on the primary button, so `--accent` stays reserved for the
119
+ * chromatic moments where blue actually appears. */
120
+ --accent: #0099ff; /* Framer Blue */
121
+ --accent-on: #ffffff; /* white label when --accent is bg */
122
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
123
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
124
+
125
+ /* ─── Semantic ────────────────────────────────────────────────────
126
+ * Framer's marketing surface rarely renders state. Inherit schema
127
+ * defaults — the brand has no defined success/warn/danger palette
128
+ * of its own; the only declared color is Framer Blue. */
129
+ --success: #16a34a;
130
+ --warn: #eab308;
131
+ --danger: #dc2626;
132
+
133
+ /* ─── Typography ──────────────────────────────────────────────────
134
+ * GT Walsheim Medium for display, Inter for body, Azeret Mono for
135
+ * code. All three lead with the custom faces and fall back to
136
+ * system sans/mono so artifacts render legibly even when the
137
+ * Framer-licensed fonts are not loaded. */
138
+ --font-display: "GT Walsheim Framer Medium", "GT Walsheim Medium", "GT Walsheim", -apple-system, "Segoe UI", Inter, sans-serif;
139
+ --font-body: "Inter Variable", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
140
+ --font-mono: "Azeret Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
141
+
142
+ /* Type scale (px) — DESIGN.md §3. Tops out at 110px display hero;
143
+ * Framer reads HUGE because GT Walsheim at extreme negative tracking
144
+ * compresses the headline into a spring-loaded block. */
145
+ --text-xs: 12px; /* Small Caption */
146
+ --text-sm: 14px; /* Caption / Label */
147
+ --text-base: 15px; /* Body / Nav / UI */
148
+ --text-lg: 18px; /* Body Large */
149
+ --text-xl: 22px; /* Feature Title */
150
+ --text-2xl: 32px; /* Feature Heading */
151
+ --text-3xl: 62px; /* Section Heading */
152
+ --text-4xl: 110px; /* Display Hero — spring-loaded */
153
+
154
+ /* `--leading-tight: 0.95` sits at the Section-Display tier from
155
+ * DESIGN.md §3. The most extreme 0.85 line-height is reserved for
156
+ * the display hero h1 (applied inline in components.html).
157
+ * `--tracking-display: -0.05em` is the em-relative form of
158
+ * "-5.5px at 110px" — letter-spacing in em scales proportionally
159
+ * with size, matching DESIGN.md §3's principle that tracking
160
+ * scales with font size. */
161
+ --leading-body: 1.3;
162
+ --leading-tight: 0.95;
163
+ --tracking-display: -0.05em;
164
+
165
+ /* ─── Spacing ─────────────────────────────────────────────────────
166
+ * 4/8-grid base scale per DESIGN.md §5. The 1/2/3/5/6/10/15/20/30/
167
+ * 35px sub-tier increments from DESIGN.md are inlined per-component
168
+ * because they are too fine to belong in the shared schema. */
169
+ --space-1: 4px;
170
+ --space-2: 8px;
171
+ --space-3: 12px;
172
+ --space-4: 16px;
173
+ --space-5: 20px;
174
+ --space-6: 24px;
175
+ --space-8: 32px;
176
+ --space-12: 48px;
177
+
178
+ /* Section rhythm — DESIGN.md §5: "80–120px between sections" desktop,
179
+ * "120px desktop → 60px mobile" per §8 collapsing strategy. We sit
180
+ * at the upper end of the desktop range (120px) so whitespace reads
181
+ * as dramatic void, drop to 80px on tablet, and 60px on phone (the
182
+ * documented mobile floor). */
183
+ --section-y-desktop: 120px;
184
+ --section-y-tablet: 80px;
185
+ --section-y-phone: 60px;
186
+
187
+ /* ─── Radius ──────────────────────────────────────────────────────
188
+ * DESIGN.md §5 radius scale: 1/5–7/8/10–12/15–20/30–40/100. We bind
189
+ * the four schema tiers to: 8 (button/input/code-block), 12 (cards
190
+ * and product screenshots), 20 (large containers), 9999 (full pill).
191
+ * The 40px–100px pill-button range from DESIGN.md is button-specific
192
+ * and is reached via `--radius-pill` with a local override. */
193
+ --radius-sm: 8px; /* buttons, inputs, code blocks */
194
+ --radius-md: 12px; /* cards, product screenshots */
195
+ --radius-lg: 20px; /* large containers, feature cards */
196
+ --radius-pill: 9999px; /* full pill — CTAs, tag elements */
197
+
198
+ /* ─── Elevation (3 levels) ────────────────────────────────────────
199
+ * Framer's depth system is shadow-led, not blur-led. Three levels:
200
+ *
201
+ * --elev-flat no shadow (page background, void areas)
202
+ * --elev-ring the signature Framer Blue 1px ring (most cards)
203
+ * --elev-raised the multi-layer floating stack (DESIGN.md §6 L3)
204
+ *
205
+ * `--elev-raised` is reproduced VERBATIM from DESIGN.md §6 Level 3:
206
+ * 0.5px white top-edge highlight (light hitting the top surface)
207
+ * 30px deep ambient shadow at 0.25 alpha (true floating depth)
208
+ * Never drop either layer when overriding — both are required for
209
+ * the "floating not pasted-on" quality of Framer's elevated cards. */
210
+ --elev-flat: none;
211
+ --elev-ring: 0 0 0 1px var(--border);
212
+ --elev-raised:
213
+ 0 0.5px 0 0.5px rgba(255, 255, 255, 0.1),
214
+ 0 10px 30px rgba(0, 0, 0, 0.25);
215
+
216
+ /* ─── Focus ring ──────────────────────────────────────────────────
217
+ * Blue glow halo — `rgba(0, 153, 255, 0.15)` (Blue Glow) is the
218
+ * Framer focus tint per DESIGN.md §2. We reproduce it as a 3px
219
+ * alpha ring at `var(--accent)` so the halo softens around inputs
220
+ * without overpowering the void canvas. */
221
+ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
222
+
223
+ /* ─── Motion ──────────────────────────────────────────────────────
224
+ * Standard durations + standard easing. Framer's boldness is in
225
+ * type, color, and product polish — never in long-form animation. */
226
+ --motion-fast: 150ms;
227
+ --motion-base: 200ms;
228
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
229
+
230
+ /* ─── Layout ──────────────────────────────────────────────────────
231
+ * ~1200px max content width per DESIGN.md §5. Gutters narrow on
232
+ * mobile so the void surrounding content stays generous on phones
233
+ * without crushing the dramatic margin. */
234
+ --container-max: 1200px;
235
+ --container-gutter-desktop: 24px;
236
+ --container-gutter-tablet: 16px;
237
+ --container-gutter-phone: 12px;
238
+ }