@aexol/spectral 0.9.269 → 0.9.271

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 (573) hide show
  1. package/dist/agent/index.d.ts +10 -1
  2. package/dist/agent/index.d.ts.map +1 -1
  3. package/dist/agent/index.js +26 -10
  4. package/dist/commands/serve.d.ts.map +1 -1
  5. package/dist/commands/serve.js +29 -5
  6. package/dist/commands/update.d.ts +2 -2
  7. package/dist/commands/update.js +3 -3
  8. package/dist/designer/index.d.ts +13 -18
  9. package/dist/designer/index.d.ts.map +1 -1
  10. package/dist/designer/index.js +128 -201
  11. package/dist/extensions/aexol-mcp.d.ts.map +1 -1
  12. package/dist/extensions/aexol-mcp.js +23 -0
  13. package/dist/extensions/dataset-uploader/cleaner.js +1 -1
  14. package/dist/extensions/dataset-uploader/scrubber.d.ts +2 -0
  15. package/dist/extensions/dataset-uploader/scrubber.d.ts.map +1 -1
  16. package/dist/extensions/dataset-uploader/scrubber.js +30 -1
  17. package/dist/generated/zeus/index.d.ts +0 -4
  18. package/dist/generated/zeus/index.d.ts.map +1 -1
  19. package/dist/memory/debug-log.d.ts.map +1 -1
  20. package/dist/memory/debug-log.js +20 -2
  21. package/dist/memory/tools/compact-context.d.ts +1 -1
  22. package/dist/memory/tools/compact-context.d.ts.map +1 -1
  23. package/dist/memory/tools/compact-context.js +4 -1
  24. package/dist/memory/tools/recall-observation.d.ts +3 -3
  25. package/dist/memory/tools/recall-observation.d.ts.map +1 -1
  26. package/dist/memory/tools/recall-observation.js +4 -1
  27. package/dist/memory/tools/receive-agent-observations.d.ts +3 -3
  28. package/dist/memory/tools/receive-agent-observations.d.ts.map +1 -1
  29. package/dist/memory/tools/receive-agent-observations.js +4 -1
  30. package/dist/memory/tools/share-project-observation.d.ts +3 -3
  31. package/dist/memory/tools/share-project-observation.d.ts.map +1 -1
  32. package/dist/memory/tools/share-project-observation.js +4 -1
  33. package/dist/memory/tools/write-project-observation.d.ts +3 -3
  34. package/dist/memory/tools/write-project-observation.d.ts.map +1 -1
  35. package/dist/memory/tools/write-project-observation.js +4 -1
  36. package/dist/relay/client.d.ts.map +1 -1
  37. package/dist/relay/client.js +5 -2
  38. package/dist/sdk/ai/env-api-keys.js +1 -1
  39. package/dist/sdk/coding-agent/core/extensions/loader.d.ts.map +1 -1
  40. package/dist/sdk/coding-agent/core/extensions/loader.js +31 -3
  41. package/dist/sdk/coding-agent/core/theme.js +1 -1
  42. package/dist/server/handlers/agent-settings.d.ts.map +1 -1
  43. package/dist/server/handlers/agent-settings.js +4 -1
  44. package/dist/server/handlers/settings-lock.d.ts.map +1 -1
  45. package/dist/server/handlers/settings-lock.js +4 -1
  46. package/dist/server/storage.d.ts.map +1 -1
  47. package/dist/server/storage.js +13 -1
  48. package/dist/utils/serve-state.d.ts +17 -0
  49. package/dist/utils/serve-state.d.ts.map +1 -1
  50. package/dist/utils/serve-state.js +73 -0
  51. package/package.json +1 -1
  52. package/dist/designer/data/skills/blog-post.d.ts +0 -3
  53. package/dist/designer/data/skills/blog-post.d.ts.map +0 -1
  54. package/dist/designer/data/skills/blog-post.js +0 -84
  55. package/dist/designer/data/skills/blog-post.ts +0 -87
  56. package/dist/designer/data/skills/critique.d.ts +0 -3
  57. package/dist/designer/data/skills/critique.d.ts.map +0 -1
  58. package/dist/designer/data/skills/critique.js +0 -109
  59. package/dist/designer/data/skills/critique.ts +0 -112
  60. package/dist/designer/data/skills/dashboard.d.ts +0 -3
  61. package/dist/designer/data/skills/dashboard.d.ts.map +0 -1
  62. package/dist/designer/data/skills/dashboard.js +0 -165
  63. package/dist/designer/data/skills/dashboard.ts +0 -168
  64. package/dist/designer/data/skills/design-brief.d.ts +0 -3
  65. package/dist/designer/data/skills/design-brief.d.ts.map +0 -1
  66. package/dist/designer/data/skills/design-brief.js +0 -141
  67. package/dist/designer/data/skills/design-brief.ts +0 -144
  68. package/dist/designer/data/skills/design-skill.d.ts +0 -10
  69. package/dist/designer/data/skills/design-skill.d.ts.map +0 -1
  70. package/dist/designer/data/skills/design-skill.js +0 -1
  71. package/dist/designer/data/skills/design-skill.ts +0 -9
  72. package/dist/designer/data/skills/docs-page.d.ts +0 -3
  73. package/dist/designer/data/skills/docs-page.d.ts.map +0 -1
  74. package/dist/designer/data/skills/docs-page.js +0 -68
  75. package/dist/designer/data/skills/docs-page.ts +0 -71
  76. package/dist/designer/data/skills/index.d.ts +0 -3
  77. package/dist/designer/data/skills/index.d.ts.map +0 -1
  78. package/dist/designer/data/skills/index.js +0 -28
  79. package/dist/designer/data/skills/index.ts +0 -30
  80. package/dist/designer/data/skills/magazine-poster.d.ts +0 -3
  81. package/dist/designer/data/skills/magazine-poster.d.ts.map +0 -1
  82. package/dist/designer/data/skills/magazine-poster.js +0 -70
  83. package/dist/designer/data/skills/magazine-poster.ts +0 -73
  84. package/dist/designer/data/skills/mobile-app.d.ts +0 -3
  85. package/dist/designer/data/skills/mobile-app.d.ts.map +0 -1
  86. package/dist/designer/data/skills/mobile-app.js +0 -229
  87. package/dist/designer/data/skills/mobile-app.ts +0 -232
  88. package/dist/designer/data/skills/motion-frames.d.ts +0 -3
  89. package/dist/designer/data/skills/motion-frames.d.ts.map +0 -1
  90. package/dist/designer/data/skills/motion-frames.js +0 -121
  91. package/dist/designer/data/skills/motion-frames.ts +0 -124
  92. package/dist/designer/data/skills/pricing-page.d.ts +0 -3
  93. package/dist/designer/data/skills/pricing-page.d.ts.map +0 -1
  94. package/dist/designer/data/skills/pricing-page.js +0 -76
  95. package/dist/designer/data/skills/pricing-page.ts +0 -79
  96. package/dist/designer/data/skills/saas-landing.d.ts +0 -3
  97. package/dist/designer/data/skills/saas-landing.d.ts.map +0 -1
  98. package/dist/designer/data/skills/saas-landing.js +0 -71
  99. package/dist/designer/data/skills/saas-landing.ts +0 -74
  100. package/dist/designer/data/skills/slide-deck.d.ts +0 -3
  101. package/dist/designer/data/skills/slide-deck.d.ts.map +0 -1
  102. package/dist/designer/data/skills/slide-deck.js +0 -213
  103. package/dist/designer/data/skills/slide-deck.ts +0 -216
  104. package/dist/designer/data/skills/social-carousel.d.ts +0 -3
  105. package/dist/designer/data/skills/social-carousel.d.ts.map +0 -1
  106. package/dist/designer/data/skills/social-carousel.js +0 -135
  107. package/dist/designer/data/skills/social-carousel.ts +0 -138
  108. package/dist/designer/data/skills/web-prototype.d.ts +0 -3
  109. package/dist/designer/data/skills/web-prototype.d.ts.map +0 -1
  110. package/dist/designer/data/skills/web-prototype.js +0 -159
  111. package/dist/designer/data/skills/web-prototype.ts +0 -162
  112. package/dist/designer/data/systems/agentic/DESIGN.md +0 -71
  113. package/dist/designer/data/systems/agentic/components.html +0 -154
  114. package/dist/designer/data/systems/agentic/tokens.css +0 -63
  115. package/dist/designer/data/systems/airbnb/DESIGN.md +0 -393
  116. package/dist/designer/data/systems/airbnb/components.html +0 -1373
  117. package/dist/designer/data/systems/airbnb/tokens.css +0 -261
  118. package/dist/designer/data/systems/airtable/DESIGN.md +0 -92
  119. package/dist/designer/data/systems/airtable/components.html +0 -489
  120. package/dist/designer/data/systems/airtable/tokens.css +0 -261
  121. package/dist/designer/data/systems/ant/DESIGN.md +0 -71
  122. package/dist/designer/data/systems/ant/components.html +0 -154
  123. package/dist/designer/data/systems/ant/tokens.css +0 -63
  124. package/dist/designer/data/systems/apple/DESIGN.md +0 -250
  125. package/dist/designer/data/systems/apple/components.html +0 -749
  126. package/dist/designer/data/systems/apple/tokens.css +0 -286
  127. package/dist/designer/data/systems/application/DESIGN.md +0 -71
  128. package/dist/designer/data/systems/application/components.html +0 -154
  129. package/dist/designer/data/systems/application/tokens.css +0 -63
  130. package/dist/designer/data/systems/arc/DESIGN.md +0 -152
  131. package/dist/designer/data/systems/arc/components.html +0 -432
  132. package/dist/designer/data/systems/arc/tokens.css +0 -137
  133. package/dist/designer/data/systems/artistic/DESIGN.md +0 -71
  134. package/dist/designer/data/systems/artistic/components.html +0 -136
  135. package/dist/designer/data/systems/artistic/tokens.css +0 -63
  136. package/dist/designer/data/systems/atelier-zero/DESIGN.md +0 -316
  137. package/dist/designer/data/systems/atelier-zero/components.html +0 -136
  138. package/dist/designer/data/systems/atelier-zero/tokens.css +0 -63
  139. package/dist/designer/data/systems/bento/DESIGN.md +0 -71
  140. package/dist/designer/data/systems/bento/components.html +0 -136
  141. package/dist/designer/data/systems/bento/tokens.css +0 -63
  142. package/dist/designer/data/systems/binance/DESIGN.md +0 -348
  143. package/dist/designer/data/systems/binance/components.html +0 -550
  144. package/dist/designer/data/systems/binance/tokens.css +0 -255
  145. package/dist/designer/data/systems/bmw/DESIGN.md +0 -183
  146. package/dist/designer/data/systems/bmw/components.html +0 -551
  147. package/dist/designer/data/systems/bmw/tokens.css +0 -179
  148. package/dist/designer/data/systems/bmw-m/DESIGN.md +0 -246
  149. package/dist/designer/data/systems/bmw-m/components.html +0 -342
  150. package/dist/designer/data/systems/bmw-m/tokens.css +0 -64
  151. package/dist/designer/data/systems/bold/DESIGN.md +0 -71
  152. package/dist/designer/data/systems/bold/components.html +0 -136
  153. package/dist/designer/data/systems/bold/tokens.css +0 -63
  154. package/dist/designer/data/systems/brutalism/DESIGN.md +0 -71
  155. package/dist/designer/data/systems/brutalism/components.html +0 -154
  156. package/dist/designer/data/systems/brutalism/tokens.css +0 -63
  157. package/dist/designer/data/systems/bugatti/DESIGN.md +0 -271
  158. package/dist/designer/data/systems/bugatti/components.html +0 -342
  159. package/dist/designer/data/systems/bugatti/tokens.css +0 -64
  160. package/dist/designer/data/systems/cafe/DESIGN.md +0 -71
  161. package/dist/designer/data/systems/cafe/components.html +0 -136
  162. package/dist/designer/data/systems/cafe/tokens.css +0 -63
  163. package/dist/designer/data/systems/cal/DESIGN.md +0 -262
  164. package/dist/designer/data/systems/cal/components.html +0 -376
  165. package/dist/designer/data/systems/cal/tokens.css +0 -265
  166. package/dist/designer/data/systems/canva/DESIGN.md +0 -157
  167. package/dist/designer/data/systems/canva/components.html +0 -461
  168. package/dist/designer/data/systems/canva/tokens.css +0 -147
  169. package/dist/designer/data/systems/cisco/DESIGN.md +0 -201
  170. package/dist/designer/data/systems/cisco/components.html +0 -342
  171. package/dist/designer/data/systems/cisco/tokens.css +0 -64
  172. package/dist/designer/data/systems/claude/DESIGN.md +0 -315
  173. package/dist/designer/data/systems/claude/components.html +0 -483
  174. package/dist/designer/data/systems/claude/tokens.css +0 -130
  175. package/dist/designer/data/systems/clay/DESIGN.md +0 -307
  176. package/dist/designer/data/systems/clay/components.html +0 -136
  177. package/dist/designer/data/systems/clay/tokens.css +0 -63
  178. package/dist/designer/data/systems/claymorphism/DESIGN.md +0 -71
  179. package/dist/designer/data/systems/claymorphism/components.html +0 -136
  180. package/dist/designer/data/systems/claymorphism/tokens.css +0 -63
  181. package/dist/designer/data/systems/clean/DESIGN.md +0 -71
  182. package/dist/designer/data/systems/clean/components.html +0 -136
  183. package/dist/designer/data/systems/clean/tokens.css +0 -63
  184. package/dist/designer/data/systems/clickhouse/DESIGN.md +0 -284
  185. package/dist/designer/data/systems/clickhouse/components.html +0 -506
  186. package/dist/designer/data/systems/clickhouse/tokens.css +0 -135
  187. package/dist/designer/data/systems/cohere/DESIGN.md +0 -269
  188. package/dist/designer/data/systems/cohere/components.html +0 -353
  189. package/dist/designer/data/systems/cohere/tokens.css +0 -126
  190. package/dist/designer/data/systems/coinbase/DESIGN.md +0 -132
  191. package/dist/designer/data/systems/coinbase/components.html +0 -501
  192. package/dist/designer/data/systems/coinbase/tokens.css +0 -257
  193. package/dist/designer/data/systems/colorful/DESIGN.md +0 -71
  194. package/dist/designer/data/systems/colorful/components.html +0 -136
  195. package/dist/designer/data/systems/colorful/tokens.css +0 -63
  196. package/dist/designer/data/systems/composio/DESIGN.md +0 -310
  197. package/dist/designer/data/systems/composio/components.html +0 -342
  198. package/dist/designer/data/systems/composio/tokens.css +0 -64
  199. package/dist/designer/data/systems/contemporary/DESIGN.md +0 -71
  200. package/dist/designer/data/systems/contemporary/components.html +0 -136
  201. package/dist/designer/data/systems/contemporary/tokens.css +0 -63
  202. package/dist/designer/data/systems/corporate/DESIGN.md +0 -71
  203. package/dist/designer/data/systems/corporate/components.html +0 -136
  204. package/dist/designer/data/systems/corporate/tokens.css +0 -63
  205. package/dist/designer/data/systems/cosmic/DESIGN.md +0 -71
  206. package/dist/designer/data/systems/cosmic/components.html +0 -136
  207. package/dist/designer/data/systems/cosmic/tokens.css +0 -63
  208. package/dist/designer/data/systems/creative/DESIGN.md +0 -71
  209. package/dist/designer/data/systems/creative/components.html +0 -136
  210. package/dist/designer/data/systems/creative/tokens.css +0 -63
  211. package/dist/designer/data/systems/cursor/DESIGN.md +0 -312
  212. package/dist/designer/data/systems/cursor/components.html +0 -654
  213. package/dist/designer/data/systems/cursor/tokens.css +0 -218
  214. package/dist/designer/data/systems/dashboard/DESIGN.md +0 -71
  215. package/dist/designer/data/systems/dashboard/components.html +0 -154
  216. package/dist/designer/data/systems/dashboard/tokens.css +0 -63
  217. package/dist/designer/data/systems/default/DESIGN.md +0 -62
  218. package/dist/designer/data/systems/default/components.html +0 -523
  219. package/dist/designer/data/systems/default/tokens.css +0 -200
  220. package/dist/designer/data/systems/discord/DESIGN.md +0 -162
  221. package/dist/designer/data/systems/discord/components.html +0 -359
  222. package/dist/designer/data/systems/discord/tokens.css +0 -125
  223. package/dist/designer/data/systems/dithered/DESIGN.md +0 -71
  224. package/dist/designer/data/systems/dithered/components.html +0 -136
  225. package/dist/designer/data/systems/dithered/tokens.css +0 -63
  226. package/dist/designer/data/systems/doodle/DESIGN.md +0 -71
  227. package/dist/designer/data/systems/doodle/components.html +0 -136
  228. package/dist/designer/data/systems/doodle/tokens.css +0 -63
  229. package/dist/designer/data/systems/dramatic/DESIGN.md +0 -71
  230. package/dist/designer/data/systems/dramatic/components.html +0 -136
  231. package/dist/designer/data/systems/dramatic/tokens.css +0 -63
  232. package/dist/designer/data/systems/duolingo/DESIGN.md +0 -154
  233. package/dist/designer/data/systems/duolingo/components.html +0 -532
  234. package/dist/designer/data/systems/duolingo/tokens.css +0 -130
  235. package/dist/designer/data/systems/editorial/DESIGN.md +0 -71
  236. package/dist/designer/data/systems/editorial/components.html +0 -154
  237. package/dist/designer/data/systems/editorial/tokens.css +0 -63
  238. package/dist/designer/data/systems/elegant/DESIGN.md +0 -71
  239. package/dist/designer/data/systems/elegant/components.html +0 -136
  240. package/dist/designer/data/systems/elegant/tokens.css +0 -63
  241. package/dist/designer/data/systems/elevenlabs/DESIGN.md +0 -268
  242. package/dist/designer/data/systems/elevenlabs/components.html +0 -342
  243. package/dist/designer/data/systems/elevenlabs/tokens.css +0 -127
  244. package/dist/designer/data/systems/energetic/DESIGN.md +0 -72
  245. package/dist/designer/data/systems/energetic/components.html +0 -136
  246. package/dist/designer/data/systems/energetic/tokens.css +0 -63
  247. package/dist/designer/data/systems/enterprise/DESIGN.md +0 -71
  248. package/dist/designer/data/systems/enterprise/components.html +0 -154
  249. package/dist/designer/data/systems/enterprise/tokens.css +0 -63
  250. package/dist/designer/data/systems/expo/DESIGN.md +0 -284
  251. package/dist/designer/data/systems/expo/components.html +0 -342
  252. package/dist/designer/data/systems/expo/tokens.css +0 -64
  253. package/dist/designer/data/systems/expressive/DESIGN.md +0 -71
  254. package/dist/designer/data/systems/expressive/components.html +0 -136
  255. package/dist/designer/data/systems/expressive/tokens.css +0 -63
  256. package/dist/designer/data/systems/fantasy/DESIGN.md +0 -71
  257. package/dist/designer/data/systems/fantasy/components.html +0 -136
  258. package/dist/designer/data/systems/fantasy/tokens.css +0 -63
  259. package/dist/designer/data/systems/ferrari/DESIGN.md +0 -317
  260. package/dist/designer/data/systems/ferrari/components.html +0 -342
  261. package/dist/designer/data/systems/ferrari/tokens.css +0 -64
  262. package/dist/designer/data/systems/figma/DESIGN.md +0 -223
  263. package/dist/designer/data/systems/figma/components.html +0 -344
  264. package/dist/designer/data/systems/figma/tokens.css +0 -126
  265. package/dist/designer/data/systems/flat/DESIGN.md +0 -71
  266. package/dist/designer/data/systems/flat/components.html +0 -136
  267. package/dist/designer/data/systems/flat/tokens.css +0 -63
  268. package/dist/designer/data/systems/framer/DESIGN.md +0 -249
  269. package/dist/designer/data/systems/framer/components.html +0 -438
  270. package/dist/designer/data/systems/framer/tokens.css +0 -238
  271. package/dist/designer/data/systems/friendly/DESIGN.md +0 -71
  272. package/dist/designer/data/systems/friendly/components.html +0 -136
  273. package/dist/designer/data/systems/friendly/tokens.css +0 -63
  274. package/dist/designer/data/systems/futuristic/DESIGN.md +0 -71
  275. package/dist/designer/data/systems/futuristic/components.html +0 -136
  276. package/dist/designer/data/systems/futuristic/tokens.css +0 -63
  277. package/dist/designer/data/systems/github/DESIGN.md +0 -155
  278. package/dist/designer/data/systems/github/components.html +0 -383
  279. package/dist/designer/data/systems/github/tokens.css +0 -125
  280. package/dist/designer/data/systems/glassmorphism/DESIGN.md +0 -71
  281. package/dist/designer/data/systems/glassmorphism/components.html +0 -154
  282. package/dist/designer/data/systems/glassmorphism/tokens.css +0 -63
  283. package/dist/designer/data/systems/gradient/DESIGN.md +0 -71
  284. package/dist/designer/data/systems/gradient/components.html +0 -154
  285. package/dist/designer/data/systems/gradient/tokens.css +0 -63
  286. package/dist/designer/data/systems/hashicorp/DESIGN.md +0 -281
  287. package/dist/designer/data/systems/hashicorp/components.html +0 -502
  288. package/dist/designer/data/systems/hashicorp/tokens.css +0 -272
  289. package/dist/designer/data/systems/hud/DESIGN.md +0 -173
  290. package/dist/designer/data/systems/hud/components.html +0 -136
  291. package/dist/designer/data/systems/hud/tokens.css +0 -63
  292. package/dist/designer/data/systems/huggingface/DESIGN.md +0 -149
  293. package/dist/designer/data/systems/huggingface/components.html +0 -346
  294. package/dist/designer/data/systems/huggingface/tokens.css +0 -125
  295. package/dist/designer/data/systems/ibm/DESIGN.md +0 -335
  296. package/dist/designer/data/systems/ibm/components.html +0 -342
  297. package/dist/designer/data/systems/ibm/tokens.css +0 -64
  298. package/dist/designer/data/systems/intercom/DESIGN.md +0 -149
  299. package/dist/designer/data/systems/intercom/components.html +0 -557
  300. package/dist/designer/data/systems/intercom/tokens.css +0 -150
  301. package/dist/designer/data/systems/kami/DESIGN.md +0 -410
  302. package/dist/designer/data/systems/kami/components.html +0 -601
  303. package/dist/designer/data/systems/kami/tokens.css +0 -272
  304. package/dist/designer/data/systems/kraken/DESIGN.md +0 -128
  305. package/dist/designer/data/systems/kraken/components.html +0 -342
  306. package/dist/designer/data/systems/kraken/tokens.css +0 -64
  307. package/dist/designer/data/systems/lamborghini/DESIGN.md +0 -291
  308. package/dist/designer/data/systems/lamborghini/components.html +0 -342
  309. package/dist/designer/data/systems/lamborghini/tokens.css +0 -64
  310. package/dist/designer/data/systems/levels/DESIGN.md +0 -71
  311. package/dist/designer/data/systems/levels/components.html +0 -154
  312. package/dist/designer/data/systems/levels/tokens.css +0 -63
  313. package/dist/designer/data/systems/linear-app/DESIGN.md +0 -370
  314. package/dist/designer/data/systems/linear-app/components.html +0 -370
  315. package/dist/designer/data/systems/linear-app/tokens.css +0 -130
  316. package/dist/designer/data/systems/lingo/DESIGN.md +0 -71
  317. package/dist/designer/data/systems/lingo/components.html +0 -154
  318. package/dist/designer/data/systems/lingo/tokens.css +0 -63
  319. package/dist/designer/data/systems/loom/DESIGN.md +0 -201
  320. package/dist/designer/data/systems/loom/components.html +0 -446
  321. package/dist/designer/data/systems/loom/tokens.css +0 -138
  322. package/dist/designer/data/systems/lovable/DESIGN.md +0 -301
  323. package/dist/designer/data/systems/lovable/components.html +0 -441
  324. package/dist/designer/data/systems/lovable/tokens.css +0 -258
  325. package/dist/designer/data/systems/luxury/DESIGN.md +0 -71
  326. package/dist/designer/data/systems/luxury/components.html +0 -154
  327. package/dist/designer/data/systems/luxury/tokens.css +0 -63
  328. package/dist/designer/data/systems/mastercard/DESIGN.md +0 -368
  329. package/dist/designer/data/systems/mastercard/components.html +0 -342
  330. package/dist/designer/data/systems/mastercard/tokens.css +0 -64
  331. package/dist/designer/data/systems/material/DESIGN.md +0 -71
  332. package/dist/designer/data/systems/material/components.html +0 -154
  333. package/dist/designer/data/systems/material/tokens.css +0 -63
  334. package/dist/designer/data/systems/meta/DESIGN.md +0 -369
  335. package/dist/designer/data/systems/meta/components.html +0 -398
  336. package/dist/designer/data/systems/meta/tokens.css +0 -263
  337. package/dist/designer/data/systems/minimal/DESIGN.md +0 -71
  338. package/dist/designer/data/systems/minimal/components.html +0 -154
  339. package/dist/designer/data/systems/minimal/tokens.css +0 -63
  340. package/dist/designer/data/systems/minimax/DESIGN.md +0 -260
  341. package/dist/designer/data/systems/minimax/components.html +0 -590
  342. package/dist/designer/data/systems/minimax/tokens.css +0 -148
  343. package/dist/designer/data/systems/mintlify/DESIGN.md +0 -329
  344. package/dist/designer/data/systems/mintlify/components.html +0 -737
  345. package/dist/designer/data/systems/mintlify/tokens.css +0 -256
  346. package/dist/designer/data/systems/miro/DESIGN.md +0 -111
  347. package/dist/designer/data/systems/miro/components.html +0 -342
  348. package/dist/designer/data/systems/miro/tokens.css +0 -64
  349. package/dist/designer/data/systems/mission-control/DESIGN.md +0 -474
  350. package/dist/designer/data/systems/mission-control/components.html +0 -136
  351. package/dist/designer/data/systems/mission-control/tokens.css +0 -63
  352. package/dist/designer/data/systems/mistral-ai/DESIGN.md +0 -264
  353. package/dist/designer/data/systems/mistral-ai/components.html +0 -338
  354. package/dist/designer/data/systems/mistral-ai/tokens.css +0 -125
  355. package/dist/designer/data/systems/modern/DESIGN.md +0 -71
  356. package/dist/designer/data/systems/modern/components.html +0 -154
  357. package/dist/designer/data/systems/modern/tokens.css +0 -63
  358. package/dist/designer/data/systems/mongodb/DESIGN.md +0 -269
  359. package/dist/designer/data/systems/mongodb/components.html +0 -462
  360. package/dist/designer/data/systems/mongodb/tokens.css +0 -176
  361. package/dist/designer/data/systems/mono/DESIGN.md +0 -71
  362. package/dist/designer/data/systems/mono/components.html +0 -136
  363. package/dist/designer/data/systems/mono/tokens.css +0 -63
  364. package/dist/designer/data/systems/neobrutalism/DESIGN.md +0 -71
  365. package/dist/designer/data/systems/neobrutalism/components.html +0 -136
  366. package/dist/designer/data/systems/neobrutalism/tokens.css +0 -63
  367. package/dist/designer/data/systems/neon/DESIGN.md +0 -71
  368. package/dist/designer/data/systems/neon/components.html +0 -136
  369. package/dist/designer/data/systems/neon/tokens.css +0 -63
  370. package/dist/designer/data/systems/neumorphism/DESIGN.md +0 -71
  371. package/dist/designer/data/systems/neumorphism/components.html +0 -136
  372. package/dist/designer/data/systems/neumorphism/tokens.css +0 -63
  373. package/dist/designer/data/systems/nike/DESIGN.md +0 -366
  374. package/dist/designer/data/systems/nike/components.html +0 -512
  375. package/dist/designer/data/systems/nike/tokens.css +0 -304
  376. package/dist/designer/data/systems/notion/DESIGN.md +0 -312
  377. package/dist/designer/data/systems/notion/components.html +0 -413
  378. package/dist/designer/data/systems/notion/tokens.css +0 -130
  379. package/dist/designer/data/systems/nvidia/DESIGN.md +0 -296
  380. package/dist/designer/data/systems/nvidia/components.html +0 -414
  381. package/dist/designer/data/systems/nvidia/tokens.css +0 -133
  382. package/dist/designer/data/systems/ollama/DESIGN.md +0 -270
  383. package/dist/designer/data/systems/ollama/components.html +0 -700
  384. package/dist/designer/data/systems/ollama/tokens.css +0 -242
  385. package/dist/designer/data/systems/openai/DESIGN.md +0 -140
  386. package/dist/designer/data/systems/openai/components.html +0 -382
  387. package/dist/designer/data/systems/openai/tokens.css +0 -133
  388. package/dist/designer/data/systems/opencode-ai/DESIGN.md +0 -284
  389. package/dist/designer/data/systems/opencode-ai/components.html +0 -389
  390. package/dist/designer/data/systems/opencode-ai/tokens.css +0 -126
  391. package/dist/designer/data/systems/pacman/DESIGN.md +0 -71
  392. package/dist/designer/data/systems/pacman/components.html +0 -342
  393. package/dist/designer/data/systems/pacman/tokens.css +0 -64
  394. package/dist/designer/data/systems/paper/DESIGN.md +0 -71
  395. package/dist/designer/data/systems/paper/components.html +0 -136
  396. package/dist/designer/data/systems/paper/tokens.css +0 -63
  397. package/dist/designer/data/systems/perplexity/DESIGN.md +0 -286
  398. package/dist/designer/data/systems/perplexity/components.html +0 -455
  399. package/dist/designer/data/systems/perplexity/tokens.css +0 -151
  400. package/dist/designer/data/systems/perspective/DESIGN.md +0 -71
  401. package/dist/designer/data/systems/perspective/components.html +0 -136
  402. package/dist/designer/data/systems/perspective/tokens.css +0 -63
  403. package/dist/designer/data/systems/pinterest/DESIGN.md +0 -233
  404. package/dist/designer/data/systems/pinterest/components.html +0 -865
  405. package/dist/designer/data/systems/pinterest/tokens.css +0 -262
  406. package/dist/designer/data/systems/playstation/DESIGN.md +0 -367
  407. package/dist/designer/data/systems/playstation/components.html +0 -414
  408. package/dist/designer/data/systems/playstation/tokens.css +0 -150
  409. package/dist/designer/data/systems/posthog/DESIGN.md +0 -259
  410. package/dist/designer/data/systems/posthog/components.html +0 -827
  411. package/dist/designer/data/systems/posthog/tokens.css +0 -272
  412. package/dist/designer/data/systems/premium/DESIGN.md +0 -71
  413. package/dist/designer/data/systems/premium/components.html +0 -154
  414. package/dist/designer/data/systems/premium/tokens.css +0 -63
  415. package/dist/designer/data/systems/professional/DESIGN.md +0 -71
  416. package/dist/designer/data/systems/professional/components.html +0 -136
  417. package/dist/designer/data/systems/professional/tokens.css +0 -63
  418. package/dist/designer/data/systems/publication/DESIGN.md +0 -71
  419. package/dist/designer/data/systems/publication/components.html +0 -154
  420. package/dist/designer/data/systems/publication/tokens.css +0 -63
  421. package/dist/designer/data/systems/raycast/DESIGN.md +0 -271
  422. package/dist/designer/data/systems/raycast/components.html +0 -507
  423. package/dist/designer/data/systems/raycast/tokens.css +0 -143
  424. package/dist/designer/data/systems/refined/DESIGN.md +0 -71
  425. package/dist/designer/data/systems/refined/components.html +0 -136
  426. package/dist/designer/data/systems/refined/tokens.css +0 -63
  427. package/dist/designer/data/systems/renault/DESIGN.md +0 -314
  428. package/dist/designer/data/systems/renault/components.html +0 -154
  429. package/dist/designer/data/systems/renault/tokens.css +0 -63
  430. package/dist/designer/data/systems/replicate/DESIGN.md +0 -264
  431. package/dist/designer/data/systems/replicate/components.html +0 -340
  432. package/dist/designer/data/systems/replicate/tokens.css +0 -125
  433. package/dist/designer/data/systems/resend/DESIGN.md +0 -306
  434. package/dist/designer/data/systems/resend/components.html +0 -839
  435. package/dist/designer/data/systems/resend/tokens.css +0 -353
  436. package/dist/designer/data/systems/retro/DESIGN.md +0 -71
  437. package/dist/designer/data/systems/retro/components.html +0 -136
  438. package/dist/designer/data/systems/retro/tokens.css +0 -63
  439. package/dist/designer/data/systems/revolut/DESIGN.md +0 -188
  440. package/dist/designer/data/systems/revolut/components.html +0 -342
  441. package/dist/designer/data/systems/revolut/tokens.css +0 -64
  442. package/dist/designer/data/systems/runwayml/DESIGN.md +0 -247
  443. package/dist/designer/data/systems/runwayml/components.html +0 -638
  444. package/dist/designer/data/systems/runwayml/tokens.css +0 -204
  445. package/dist/designer/data/systems/sanity/DESIGN.md +0 -360
  446. package/dist/designer/data/systems/sanity/components.html +0 -342
  447. package/dist/designer/data/systems/sanity/tokens.css +0 -64
  448. package/dist/designer/data/systems/sentry/DESIGN.md +0 -265
  449. package/dist/designer/data/systems/sentry/components.html +0 -387
  450. package/dist/designer/data/systems/sentry/tokens.css +0 -219
  451. package/dist/designer/data/systems/shadcn/DESIGN.md +0 -71
  452. package/dist/designer/data/systems/shadcn/components.html +0 -732
  453. package/dist/designer/data/systems/shadcn/tokens.css +0 -255
  454. package/dist/designer/data/systems/shopify/DESIGN.md +0 -353
  455. package/dist/designer/data/systems/shopify/components.html +0 -342
  456. package/dist/designer/data/systems/shopify/tokens.css +0 -141
  457. package/dist/designer/data/systems/simple/DESIGN.md +0 -71
  458. package/dist/designer/data/systems/simple/components.html +0 -136
  459. package/dist/designer/data/systems/simple/tokens.css +0 -63
  460. package/dist/designer/data/systems/skeumorphism/DESIGN.md +0 -71
  461. package/dist/designer/data/systems/skeumorphism/components.html +0 -136
  462. package/dist/designer/data/systems/skeumorphism/tokens.css +0 -63
  463. package/dist/designer/data/systems/slack/DESIGN.md +0 -363
  464. package/dist/designer/data/systems/slack/components.html +0 -387
  465. package/dist/designer/data/systems/slack/tokens.css +0 -127
  466. package/dist/designer/data/systems/sleek/DESIGN.md +0 -71
  467. package/dist/designer/data/systems/sleek/components.html +0 -136
  468. package/dist/designer/data/systems/sleek/tokens.css +0 -63
  469. package/dist/designer/data/systems/spacex/DESIGN.md +0 -197
  470. package/dist/designer/data/systems/spacex/components.html +0 -496
  471. package/dist/designer/data/systems/spacex/tokens.css +0 -154
  472. package/dist/designer/data/systems/spacious/DESIGN.md +0 -71
  473. package/dist/designer/data/systems/spacious/components.html +0 -136
  474. package/dist/designer/data/systems/spacious/tokens.css +0 -63
  475. package/dist/designer/data/systems/spotify/DESIGN.md +0 -249
  476. package/dist/designer/data/systems/spotify/components.html +0 -365
  477. package/dist/designer/data/systems/spotify/tokens.css +0 -127
  478. package/dist/designer/data/systems/starbucks/DESIGN.md +0 -583
  479. package/dist/designer/data/systems/starbucks/components.html +0 -493
  480. package/dist/designer/data/systems/starbucks/tokens.css +0 -182
  481. package/dist/designer/data/systems/storytelling/DESIGN.md +0 -71
  482. package/dist/designer/data/systems/storytelling/components.html +0 -136
  483. package/dist/designer/data/systems/storytelling/tokens.css +0 -63
  484. package/dist/designer/data/systems/stripe/DESIGN.md +0 -325
  485. package/dist/designer/data/systems/stripe/components.html +0 -1018
  486. package/dist/designer/data/systems/stripe/tokens.css +0 -295
  487. package/dist/designer/data/systems/supabase/DESIGN.md +0 -258
  488. package/dist/designer/data/systems/supabase/components.html +0 -741
  489. package/dist/designer/data/systems/supabase/tokens.css +0 -294
  490. package/dist/designer/data/systems/superhuman/DESIGN.md +0 -255
  491. package/dist/designer/data/systems/superhuman/components.html +0 -537
  492. package/dist/designer/data/systems/superhuman/tokens.css +0 -160
  493. package/dist/designer/data/systems/tesla/DESIGN.md +0 -289
  494. package/dist/designer/data/systems/tesla/components.html +0 -724
  495. package/dist/designer/data/systems/tesla/tokens.css +0 -285
  496. package/dist/designer/data/systems/tetris/DESIGN.md +0 -71
  497. package/dist/designer/data/systems/tetris/components.html +0 -342
  498. package/dist/designer/data/systems/tetris/tokens.css +0 -64
  499. package/dist/designer/data/systems/theverge/DESIGN.md +0 -342
  500. package/dist/designer/data/systems/theverge/components.html +0 -342
  501. package/dist/designer/data/systems/theverge/tokens.css +0 -64
  502. package/dist/designer/data/systems/together-ai/DESIGN.md +0 -266
  503. package/dist/designer/data/systems/together-ai/components.html +0 -422
  504. package/dist/designer/data/systems/together-ai/tokens.css +0 -127
  505. package/dist/designer/data/systems/totality-festival/DESIGN.md +0 -206
  506. package/dist/designer/data/systems/totality-festival/components.html +0 -136
  507. package/dist/designer/data/systems/totality-festival/tokens.css +0 -63
  508. package/dist/designer/data/systems/trading-terminal/DESIGN.md +0 -178
  509. package/dist/designer/data/systems/trading-terminal/components.html +0 -154
  510. package/dist/designer/data/systems/trading-terminal/tokens.css +0 -63
  511. package/dist/designer/data/systems/uber/DESIGN.md +0 -298
  512. package/dist/designer/data/systems/uber/components.html +0 -347
  513. package/dist/designer/data/systems/uber/tokens.css +0 -131
  514. package/dist/designer/data/systems/urdu/DESIGN.md +0 -1002
  515. package/dist/designer/data/systems/urdu/components.html +0 -136
  516. package/dist/designer/data/systems/urdu/tokens.css +0 -63
  517. package/dist/designer/data/systems/vercel/DESIGN.md +0 -313
  518. package/dist/designer/data/systems/vercel/components.html +0 -839
  519. package/dist/designer/data/systems/vercel/tokens.css +0 -270
  520. package/dist/designer/data/systems/vibrant/DESIGN.md +0 -71
  521. package/dist/designer/data/systems/vibrant/components.html +0 -136
  522. package/dist/designer/data/systems/vibrant/tokens.css +0 -63
  523. package/dist/designer/data/systems/vintage/DESIGN.md +0 -71
  524. package/dist/designer/data/systems/vintage/components.html +0 -136
  525. package/dist/designer/data/systems/vintage/tokens.css +0 -63
  526. package/dist/designer/data/systems/vodafone/DESIGN.md +0 -426
  527. package/dist/designer/data/systems/vodafone/components.html +0 -342
  528. package/dist/designer/data/systems/vodafone/tokens.css +0 -64
  529. package/dist/designer/data/systems/voltagent/DESIGN.md +0 -326
  530. package/dist/designer/data/systems/voltagent/components.html +0 -154
  531. package/dist/designer/data/systems/voltagent/tokens.css +0 -63
  532. package/dist/designer/data/systems/warm-editorial/DESIGN.md +0 -65
  533. package/dist/designer/data/systems/warm-editorial/components.html +0 -136
  534. package/dist/designer/data/systems/warm-editorial/tokens.css +0 -63
  535. package/dist/designer/data/systems/warp/DESIGN.md +0 -256
  536. package/dist/designer/data/systems/warp/components.html +0 -411
  537. package/dist/designer/data/systems/warp/tokens.css +0 -156
  538. package/dist/designer/data/systems/webex/DESIGN.md +0 -207
  539. package/dist/designer/data/systems/webex/components.html +0 -342
  540. package/dist/designer/data/systems/webex/tokens.css +0 -64
  541. package/dist/designer/data/systems/webflow/DESIGN.md +0 -95
  542. package/dist/designer/data/systems/webflow/components.html +0 -413
  543. package/dist/designer/data/systems/webflow/tokens.css +0 -191
  544. package/dist/designer/data/systems/wechat/DESIGN.md +0 -302
  545. package/dist/designer/data/systems/wechat/components.html +0 -507
  546. package/dist/designer/data/systems/wechat/tokens.css +0 -176
  547. package/dist/designer/data/systems/wired/DESIGN.md +0 -281
  548. package/dist/designer/data/systems/wired/components.html +0 -342
  549. package/dist/designer/data/systems/wired/tokens.css +0 -64
  550. package/dist/designer/data/systems/wise/DESIGN.md +0 -176
  551. package/dist/designer/data/systems/wise/components.html +0 -365
  552. package/dist/designer/data/systems/wise/tokens.css +0 -141
  553. package/dist/designer/data/systems/x-ai/DESIGN.md +0 -260
  554. package/dist/designer/data/systems/x-ai/components.html +0 -460
  555. package/dist/designer/data/systems/x-ai/tokens.css +0 -268
  556. package/dist/designer/data/systems/xiaohongshu/DESIGN.md +0 -402
  557. package/dist/designer/data/systems/xiaohongshu/components.html +0 -865
  558. package/dist/designer/data/systems/xiaohongshu/tokens.css +0 -193
  559. package/dist/designer/data/systems/zapier/DESIGN.md +0 -331
  560. package/dist/designer/data/systems/zapier/components.html +0 -342
  561. package/dist/designer/data/systems/zapier/tokens.css +0 -64
  562. package/dist/designer/guidelines.d.ts +0 -23
  563. package/dist/designer/guidelines.d.ts.map +0 -1
  564. package/dist/designer/guidelines.js +0 -176
  565. package/dist/designer/philosophies.d.ts +0 -33
  566. package/dist/designer/philosophies.d.ts.map +0 -1
  567. package/dist/designer/philosophies.js +0 -668
  568. package/dist/designer/skills.d.ts +0 -21
  569. package/dist/designer/skills.d.ts.map +0 -1
  570. package/dist/designer/skills.js +0 -34
  571. package/dist/designer/systems.d.ts +0 -36
  572. package/dist/designer/systems.d.ts.map +0 -1
  573. package/dist/designer/systems.js +0 -221
package/dist/designer/data/systems/flat/components.html DELETED
@@ -1,136 +0,0 @@
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>Flat - reference components</title>
7
- <meta name="description" content="Reference fixture for design-systems/flat: flat interface system with crisp colors, no depth effects, and direct component hierarchy." />
8
- <style>
9
- :root {
10
- --bg: #f5f8ff;
11
- --surface: #ffffff;
12
- --surface-warm: #eaf1ff;
13
- --fg: #101828;
14
- --fg-2: #344054;
15
- --muted: #667085;
16
- --meta: #2563eb;
17
- --border: #d7e0ef;
18
- --border-soft: #edf2f8;
19
- --accent: #2563eb;
20
- --accent-on: #ffffff;
21
- --accent-hover: color-mix(in oklab, var(--accent), black 8%);
22
- --accent-active: color-mix(in oklab, var(--accent), black 14%);
23
- --success: #16a34a;
24
- --warn: #f59e0b;
25
- --danger: #ef4444;
26
- --font-display: Inter, system-ui, sans-serif;
27
- --font-body: Inter, system-ui, sans-serif;
28
- --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
29
- --text-xs: 12px;
30
- --text-sm: 14px;
31
- --text-base: 16px;
32
- --text-lg: 18px;
33
- --text-xl: 24px;
34
- --text-2xl: 36px;
35
- --text-3xl: 54px;
36
- --text-4xl: 76px;
37
- --leading-body: 1.52;
38
- --leading-tight: 1.06;
39
- --tracking-display: -0.025em;
40
- --space-1: 4px;
41
- --space-2: 8px;
42
- --space-3: 12px;
43
- --space-4: 16px;
44
- --space-5: 20px;
45
- --space-6: 24px;
46
- --space-8: 32px;
47
- --space-12: 48px;
48
- --section-y-desktop: 96px;
49
- --section-y-tablet: 68px;
50
- --section-y-phone: 48px;
51
- --radius-sm: 10px;
52
- --radius-md: 16px;
53
- --radius-lg: 24px;
54
- --radius-pill: 9999px;
55
- --elev-flat: none;
56
- --elev-ring: 0 0 0 1px var(--border);
57
- --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11);
58
- --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22);
59
- --motion-fast: 150ms;
60
- --motion-base: 240ms;
61
- --ease-standard: cubic-bezier(0.2, 0, 0, 1);
62
- --container-max: 1180px;
63
- --container-gutter-desktop: 36px;
64
- --container-gutter-tablet: 24px;
65
- --container-gutter-phone: 16px;
66
- }
67
-
68
- *, *::before, *::after { box-sizing: border-box; }
69
- html, body { margin: 0; padding: 0; }
70
- body { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
71
- .page { min-height: 100vh; background: radial-gradient(circle at 80% 10%, rgba(37, 99, 235, 0.16), transparent 34%), #f5f8ff; }
72
- .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
73
- section { padding-block: var(--section-y-desktop); }
74
- @media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } section { padding-block: var(--section-y-tablet); } }
75
- @media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } section { padding-block: var(--section-y-phone); } }
76
- h1, h2, h3, p { margin: 0; }
77
- h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
78
- h1 { max-width: 840px; font-size: var(--text-4xl); font-weight: 760; }
79
- h2 { font-size: var(--text-3xl); font-weight: 700; }
80
- h3 { font-size: var(--text-xl); font-weight: 700; }
81
- .eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
82
- .lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }
83
- .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; }
84
- .stack > * + * { margin-block-start: var(--space-4); }
85
- .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
86
- .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
87
- .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
88
- .btn-primary { background: var(--accent); color: var(--accent-on); }
89
- .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
90
- .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
91
- .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
92
- .panel { background: color-mix(in oklab, var(--surface), transparent 4%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); overflow: hidden; }
93
- .panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
94
- .status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--meta); font: 700 var(--text-xs) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
95
- .status::before { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); content: ""; }
96
- .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-soft); }
97
- .metric { padding: var(--space-5); border-right: 1px solid var(--border-soft); }
98
- .metric:last-child { border-right: 0; }
99
- .metric strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
100
- .metric span { color: var(--muted); font-size: var(--text-sm); }
101
- .card-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
102
- .mini-card { min-height: 148px; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-warm); }
103
- .mini-card p, .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
104
- .swatches { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
105
- .swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
106
- .swatch.accent { background: var(--accent); } .swatch.surface { background: var(--surface); } .swatch.warm { background: var(--surface-warm); } .swatch.fg { background: var(--fg); }
107
- .field { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); }
108
- label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
109
- input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; }
110
- input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
111
- .lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
112
- .tile { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
113
- @media (max-width: 860px) { .hero, .lower { grid-template-columns: 1fr; } .metric-grid, .card-row { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); } .metric:last-child { border-bottom: 0; } }
114
- </style>
115
- </head>
116
- <body>
117
- <main class="page">
118
- <section>
119
- <div class="container hero">
120
- <div class="stack">
121
- <p class="eyebrow">Flat design system</p>
122
- <h1>Flat UI system</h1>
123
- <p class="lead">No-shadow panels, clear color blocks, and simple direct interaction states.</p>
124
- <div class="actions" aria-label="Reference actions"><a class="btn btn-primary" href="#">Primary action</a><a class="btn btn-secondary" href="#">Secondary action</a></div>
125
- </div>
126
- <article class="panel" aria-label="Flat component preview">
127
- <div class="panel-head"><div><p class="eyebrow">Live module</p><h3>Reference component</h3></div><span class="status">online</span></div>
128
- <div class="metric-grid"><div class="metric"><strong>98%</strong><span>Signal quality</span></div><div class="metric"><strong>24</strong><span>Active flows</span></div><div class="metric"><strong>3.2s</strong><span>Response time</span></div></div>
129
- <div class="card-row"><div class="mini-card"><h3>Palette</h3><p>flat interface system with crisp colors, no depth effects, and direct component hierarchy.</p><div class="swatches" aria-label="Token swatches"><span class="swatch accent"></span><span class="swatch surface"></span><span class="swatch warm"></span><span class="swatch fg"></span></div></div><div class="mini-card"><h3>Control</h3><p>Focus, hover, and status states share the same system signal.</p><div class="field"><label for="flat-input">Reference input</label><input id="flat-input" value="Flat system token" /></div></div></div>
130
- </article>
131
- </div>
132
- </section>
133
- <section><div class="container lower"><article class="tile"><p class="eyebrow">Typography</p><h2>Display rhythm</h2><p>Headlines use the display stack with the declared scale and leading.</p></article><article class="tile"><p class="eyebrow">Surface</p><h2>Layer system</h2><p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p></article><article class="tile"><p class="eyebrow">Interaction</p><h2>Motion states</h2><p>Buttons, inputs, and panels use system-specific focus rings and easing.</p></article></div></section>
134
- </main>
135
- </body>
136
- </html>
package/dist/designer/data/systems/flat/tokens.css DELETED
@@ -1,63 +0,0 @@
1
- /* design-systems/flat/tokens.css
2
- * Structured token bindings for Flat.
3
- * flat interface system with crisp colors, no depth effects, and direct component hierarchy.
4
- */
5
-
6
- :root {
7
- --bg: #f5f8ff;
8
- --surface: #ffffff;
9
- --surface-warm: #eaf1ff;
10
- --fg: #101828;
11
- --fg-2: #344054;
12
- --muted: #667085;
13
- --meta: #2563eb;
14
- --border: #d7e0ef;
15
- --border-soft: #edf2f8;
16
- --accent: #2563eb;
17
- --accent-on: #ffffff;
18
- --accent-hover: color-mix(in oklab, var(--accent), black 8%);
19
- --accent-active: color-mix(in oklab, var(--accent), black 14%);
20
- --success: #16a34a;
21
- --warn: #f59e0b;
22
- --danger: #ef4444;
23
- --font-display: Inter, system-ui, sans-serif;
24
- --font-body: Inter, system-ui, sans-serif;
25
- --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
26
- --text-xs: 12px;
27
- --text-sm: 14px;
28
- --text-base: 16px;
29
- --text-lg: 18px;
30
- --text-xl: 24px;
31
- --text-2xl: 36px;
32
- --text-3xl: 54px;
33
- --text-4xl: 76px;
34
- --leading-body: 1.52;
35
- --leading-tight: 1.06;
36
- --tracking-display: -0.025em;
37
- --space-1: 4px;
38
- --space-2: 8px;
39
- --space-3: 12px;
40
- --space-4: 16px;
41
- --space-5: 20px;
42
- --space-6: 24px;
43
- --space-8: 32px;
44
- --space-12: 48px;
45
- --section-y-desktop: 96px;
46
- --section-y-tablet: 68px;
47
- --section-y-phone: 48px;
48
- --radius-sm: 10px;
49
- --radius-md: 16px;
50
- --radius-lg: 24px;
51
- --radius-pill: 9999px;
52
- --elev-flat: none;
53
- --elev-ring: 0 0 0 1px var(--border);
54
- --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11);
55
- --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22);
56
- --motion-fast: 150ms;
57
- --motion-base: 240ms;
58
- --ease-standard: cubic-bezier(0.2, 0, 0, 1);
59
- --container-max: 1180px;
60
- --container-gutter-desktop: 36px;
61
- --container-gutter-tablet: 24px;
62
- --container-gutter-phone: 16px;
63
- }
package/dist/designer/data/systems/framer/DESIGN.md DELETED
@@ -1,249 +0,0 @@
1
- # Design System Inspired by Framer
2
-
3
- > Category: Design & Creative
4
- > Website builder. Bold black and blue, motion-first, design-forward.
5
-
6
- ## 1. Visual Theme & Atmosphere
7
-
8
- Framer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black — not a warm charcoal or a cozy dark gray, but an absolute void (`#000000`) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.
9
-
10
- The typography is the signature move: GT Walsheim with aggressively tight letter-spacing (as extreme as -5.5px on 110px display text) creates headlines that feel compressed, kinetic, almost spring-loaded — like words under pressure that might expand at any moment. The transition to Inter for body text is seamless, with extensive OpenType feature usage (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`) that gives even small text a refined, custom feel. Framer Blue (`#0099ff`) is deployed sparingly but decisively — as link color, border accents, and subtle ring shadows — creating a cold, electric throughline against the warm-less black.
11
-
12
- The overall effect is a nightclub for web designers: dark, precise, seductive, and unapologetically product-forward. Every section exists to showcase what the tool can do, with the website itself serving as proof of concept.
13
-
14
- **Key Characteristics:**
15
- - Pure black (`#000000`) void canvas — absolute dark, not warm or gray-tinted
16
- - GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)
17
- - Framer Blue (`#0099ff`) as the sole accent color — cold, electric, precise
18
- - Pill-shaped buttons (40px–100px radius) — no sharp corners on interactive elements
19
- - Product screenshots as hero art — the tool IS the marketing
20
- - Frosted glass button variants using `rgba(255, 255, 255, 0.1)` on dark surfaces
21
- - Extensive OpenType feature usage across Inter for refined micro-typography
22
-
23
- ## 2. Color Palette & Roles
24
-
25
- ### Primary
26
- - **Pure Black** (`#000000`): Primary background, the void canvas that defines Framer's dark-first identity
27
- - **Pure White** (`#ffffff`): Primary text color on dark surfaces, button text on accent backgrounds
28
- - **Framer Blue** (`#0099ff`): Primary accent color — links, borders, ring shadows, interactive highlights
29
-
30
- ### Secondary & Accent
31
- - **Muted Silver** (`#a6a6a6`): Secondary text, subdued labels, dimmed descriptions on dark surfaces
32
- - **Near Black** (`#090909`): Elevated dark surface, shadow ring color for subtle depth separation
33
-
34
- ### Surface & Background
35
- - **Void Black** (`#000000`): Page background, primary canvas
36
- - **Frosted White** (`rgba(255, 255, 255, 0.1)`): Translucent button backgrounds, glass-effect surfaces on dark
37
- - **Subtle White** (`rgba(255, 255, 255, 0.5)`): Slightly more opaque frosted elements for hover states
38
-
39
- ### Neutrals & Text
40
- - **Pure White** (`#ffffff`): Heading text, high-emphasis body text
41
- - **Muted Silver** (`#a6a6a6`): Body text, descriptions, secondary information
42
- - **Ghost White** (`rgba(255, 255, 255, 0.6)`): Tertiary text, placeholders on dark surfaces
43
-
44
- ### Semantic & Accent
45
- - **Framer Blue** (`#0099ff`): Links, interactive borders, focus rings
46
- - **Blue Glow** (`rgba(0, 153, 255, 0.15)`): Focus ring shadow, subtle blue halo around interactive elements
47
- - **Default Link Blue** (`#0000ee`): Standard browser link color (used sparingly in content areas)
48
-
49
- ### Gradient System
50
- - No prominent gradient usage — Framer relies on pure flat black surfaces with occasional blue-tinted glows for depth
51
- - Subtle radial glow effects behind product screenshots using Framer Blue at very low opacity
52
-
53
- ## 3. Typography Rules
54
-
55
- ### Font Family
56
- - **Display**: `GT Walsheim Framer Medium` / `GT Walsheim Medium` — custom geometric sans-serif, weight 500. Fallbacks: `GT Walsheim Framer Medium Placeholder`, system sans-serif
57
- - **Body/UI**: `Inter Variable` / `Inter` — variable sans-serif with extensive OpenType features. Fallbacks: `Inter Placeholder`, `-apple-system`, `system-ui`
58
- - **Accent**: `Mona Sans` — GitHub's open-source font, used for select elements at ultra-light weight (100)
59
- - **Monospace**: `Azeret Mono` — companion mono for code and technical labels
60
- - **Rounded**: `Open Runde` — small rounded companion font for micro-labels
61
-
62
- ### Hierarchy
63
-
64
- | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
65
- |------|------|------|--------|-------------|----------------|-------|
66
- | Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |
67
- | Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |
68
- | Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |
69
- | Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |
70
- | Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |
71
- | Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
72
- | Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |
73
- | Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |
74
- | Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
75
- | Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |
76
- | Nav/UI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |
77
- | Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |
78
- | Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
79
- | Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
80
- | Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
81
- | Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
82
- | Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |
83
- | Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |
84
-
85
- ### Principles
86
- - **Compression as personality**: GT Walsheim's extreme negative letter-spacing (-5.5px at 110px) is the defining typographic gesture — headlines feel spring-loaded, urgent, almost breathless
87
- - **OpenType maximalism**: Inter is deployed with 6+ OpenType features simultaneously (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`), creating a subtly custom feel even at body sizes
88
- - **Weight restraint on display**: All GT Walsheim usage is weight 500 (medium) — never bold, never regular. This creates a confident-but-not-aggressive display tone
89
- - **Ultra-tight line heights**: Display text at 0.85 line-height means letters nearly overlap vertically — intentional density that rewards reading at arm's length
90
-
91
- ## 4. Component Stylings
92
-
93
- ### Buttons
94
- - **Frosted Pill**: `rgba(255, 255, 255, 0.1)` background, black text (`#000000`), pill shape (40px radius). The glass-effect button that lives on dark surfaces — translucent, ambient, subtle
95
- - **Solid White Pill**: `rgb(255, 255, 255)` background, black text (`#000000`), full pill shape (100px radius), padding `10px 15px`. The primary CTA — clean, high-contrast on dark, unmissable
96
- - **Ghost**: No visible background, white text, relies on text styling alone. Hover reveals subtle frosted background
97
- - **Transition**: Scale-based animations (matrix transform with 0.85 scale factor), opacity transitions for reveal effects
98
-
99
- ### Cards & Containers
100
- - **Dark Surface Card**: Black or near-black (`#090909`) background, `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` blue ring shadow border, rounded corners (10px–15px radius)
101
- - **Elevated Card**: Multi-layer shadow — `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px` (subtle top highlight) + `rgba(0, 0, 0, 0.25) 0px 10px 30px` (deep ambient shadow)
102
- - **Product Screenshots**: Full-width or padded within dark containers, 8px–12px border-radius for software UI previews
103
- - **Hover**: Subtle glow increase on Framer Blue ring shadow, or brightness shift on frosted surfaces
104
-
105
- ### Inputs & Forms
106
- - Minimal form presence on the marketing site
107
- - Input fields follow dark theme: dark background, subtle border, white text
108
- - Focus state: Framer Blue (`#0099ff`) ring border, `1px solid #0099ff`
109
- - Placeholder text in `rgba(255, 255, 255, 0.4)`
110
-
111
- ### Navigation
112
- - **Dark floating nav bar**: Black background with frosted glass effect, white text links
113
- - **Nav links**: Inter at 15px, weight 400, white text with subtle hover opacity change
114
- - **CTA button**: Pill-shaped, white or frosted, positioned at right end of nav
115
- - **Mobile**: Collapses to hamburger menu, maintains dark theme
116
- - **Sticky behavior**: Nav remains fixed at top on scroll
117
-
118
- ### Image Treatment
119
- - **Product screenshots as hero art**: Full-width embedded UI screenshots with rounded corners (8px–12px)
120
- - **Dark-on-dark composition**: Screenshots placed on black backgrounds with subtle shadow for depth separation
121
- - **16:9 and custom aspect ratios**: Product demos fill their containers
122
- - **No decorative imagery**: All images are functional — showing the tool, the output, or the workflow
123
-
124
- ### Trust & Social Proof
125
- - Customer logos and testimonials in muted gray on dark surfaces
126
- - Minimal ornamentation — the product screenshots serve as the trust signal
127
-
128
- ## 5. Layout Principles
129
-
130
- ### Spacing System
131
- - **Base unit**: 8px
132
- - **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px
133
- - **Section padding**: Large vertical spacing (80px–120px between sections)
134
- - **Card padding**: 15px–30px internal padding
135
- - **Component gaps**: 8px–20px between related elements
136
-
137
- ### Grid & Container
138
- - **Max width**: ~1200px container, centered
139
- - **Column patterns**: Full-width hero, 2-column feature sections, single-column product showcases
140
- - **Asymmetric layouts**: Feature sections often pair text (40%) with screenshot (60%)
141
-
142
- ### Whitespace Philosophy
143
- - **Breathe through darkness**: Generous vertical spacing between sections — the black background means whitespace manifests as void, creating dramatic pauses between content blocks
144
- - **Dense within, spacious between**: Individual components are tightly composed (tight line-heights, compressed text) but float in generous surrounding space
145
- - **Product-first density**: Screenshot areas are allowed to be dense and information-rich, contrasting with the sparse marketing text
146
-
147
- ### Border Radius Scale
148
- - **1px**: Micro-elements, nearly squared precision edges
149
- - **5px–7px**: Small UI elements, image thumbnails — subtly softened
150
- - **8px**: Standard component radius — code blocks, buttons, interactive elements
151
- - **10px–12px**: Cards, product screenshots — comfortably rounded
152
- - **15px–20px**: Large containers, feature cards — generously rounded
153
- - **30px–40px**: Navigation pills, pagination — noticeably rounded
154
- - **100px**: Full pill shape — primary CTAs, tag elements
155
-
156
- ## 6. Depth & Elevation
157
-
158
- | Level | Treatment | Use |
159
- |-------|-----------|-----|
160
- | Level 0 (Flat) | No shadow, pure black surface | Page background, empty areas |
161
- | Level 1 (Ring) | `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` | Card borders, interactive element outlines — Framer Blue glow ring |
162
- | Level 2 (Contained) | `rgb(9, 9, 9) 0px 0px 0px 2px` | Near-black ring for subtle containment on dark surfaces |
163
- | Level 3 (Floating) | `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px` | Elevated cards, floating elements — subtle white top-edge highlight + deep ambient shadow |
164
-
165
- ### Shadow Philosophy
166
- Framer's elevation system is inverted from traditional light-theme designs. Instead of darker shadows on light backgrounds, Framer uses:
167
- - **Blue-tinted ring shadows** at very low opacity (0.15) for containment — a signature move that subtly brands every bordered element
168
- - **White edge highlights** (0.5px) on the top edge of elevated elements — simulating light hitting the top surface
169
- - **Deep ambient shadows** for true floating elements — `rgba(0, 0, 0, 0.25)` at large spread (30px)
170
-
171
- ### Decorative Depth
172
- - **Blue glow auras**: Subtle Framer Blue (`#0099ff`) radial gradients behind key interactive areas
173
- - **No background blur/glassmorphism**: Despite the frosted button effect, there's no heavy glass blur usage — the translucency is achieved through simple rgba opacity
174
-
175
- ## 7. Do's and Don'ts
176
-
177
- ### Do
178
- - Use pure black (`#000000`) as the primary background — not dark gray, not charcoal
179
- - Apply extreme negative letter-spacing on GT Walsheim display text (-3px to -5.5px)
180
- - Keep all buttons pill-shaped (40px+ radius) — never use squared or slightly-rounded buttons
181
- - Use Framer Blue (`#0099ff`) exclusively for interactive accents — links, borders, focus states
182
- - Deploy `rgba(255, 255, 255, 0.1)` for frosted glass surfaces on dark backgrounds
183
- - Maintain GT Walsheim at weight 500 only — the medium weight IS the brand
184
- - Use extensive OpenType features on Inter text (cv01, cv05, cv09, cv11, ss03, ss07)
185
- - Let product screenshots be the visual centerpiece — the tool markets itself
186
- - Apply blue ring shadows (`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px`) for card containment
187
-
188
- ### Don't
189
- - Use warm dark backgrounds (no `#1a1a1a`, `#2d2d2d`, or brownish blacks)
190
- - Apply bold (700+) weight to GT Walsheim display text — medium 500 only
191
- - Introduce additional accent colors beyond Framer Blue — this is a one-accent-color system
192
- - Use large border-radius on non-interactive elements (cards use 10px–15px, only buttons get 40px+)
193
- - Add decorative imagery, illustrations, or icons — the product IS the illustration
194
- - Use positive letter-spacing on headlines — everything is compressed, negative tracking
195
- - Create heavy drop shadows — depth is communicated through subtle rings and minimal ambients
196
- - Place light/white backgrounds behind content sections — the void is sacred
197
- - Use serif or display-weight fonts — the system is geometric sans-serif only
198
-
199
- ## 8. Responsive Behavior
200
-
201
- ### Breakpoints
202
- | Name | Width | Key Changes |
203
- |------|-------|-------------|
204
- | Mobile | <809px | Single column, stacked feature sections, reduced hero text (62px→40px), hamburger nav |
205
- | Tablet | 809px–1199px | 2-column features begin, nav links partially visible, screenshots scale down |
206
- | Desktop | >1199px | Full layout, expanded nav with all links + CTA, 110px display hero, side-by-side features |
207
-
208
- ### Touch Targets
209
- - Pill buttons: minimum 40px height with 10px vertical padding — exceeds 44px WCAG minimum
210
- - Nav links: 15px text with generous padding for touch accessibility
211
- - Mobile CTA buttons: Full-width pills on mobile for easy thumb reach
212
-
213
- ### Collapsing Strategy
214
- - **Navigation**: Full horizontal nav → hamburger menu at mobile breakpoint
215
- - **Hero text**: 110px display → 85px → 62px → ~40px across breakpoints, maintaining extreme negative tracking proportionally
216
- - **Feature sections**: Side-by-side (text + screenshot) → stacked vertically on mobile
217
- - **Product screenshots**: Scale responsively within containers, maintaining aspect ratios
218
- - **Section spacing**: Reduces proportionally — 120px desktop → 60px mobile
219
-
220
- ### Image Behavior
221
- - Product screenshots are responsive, scaling within their container boundaries
222
- - No art direction changes — same crops across breakpoints
223
- - Dark background ensures screenshots maintain visual impact at any size
224
- - Screenshots lazy-load as user scrolls into view
225
-
226
- ## 9. Agent Prompt Guide
227
-
228
- ### Quick Color Reference
229
- - Primary Background: Void Black (`#000000`)
230
- - Primary Text: Pure White (`#ffffff`)
231
- - Accent/CTA: Framer Blue (`#0099ff`)
232
- - Secondary Text: Muted Silver (`#a6a6a6`)
233
- - Frosted Surface: Translucent White (`rgba(255, 255, 255, 0.1)`)
234
- - Elevation Ring: Blue Glow (`rgba(0, 153, 255, 0.15)`)
235
-
236
- ### Example Component Prompts
237
- - "Create a hero section on pure black background with 110px GT Walsheim heading in white, letter-spacing -5.5px, line-height 0.85, and a pill-shaped white CTA button (100px radius) with black text"
238
- - "Design a feature card on black background with a 1px Framer Blue ring shadow border (rgba(0,153,255,0.15)), 12px border-radius, white heading in Inter at 22px weight 700, and muted silver (a6a6a6) body text"
239
- - "Build a navigation bar with black background, white Inter text links at 15px, and a frosted pill button (rgba(255,255,255,0.1) background, 40px radius) as the CTA"
240
- - "Create a product showcase section with a full-width screenshot embedded on black, 10px border-radius, subtle multi-layer shadow (white 0.5px top highlight + rgba(0,0,0,0.25) 30px ambient)"
241
- - "Design a pricing card using pure black surface, Framer Blue (#0099ff) accent for the selected plan border, white text hierarchy (24px Inter bold heading, 14px regular body), and a solid white pill CTA button"
242
-
243
- ### Iteration Guide
244
- When refining existing screens generated with this design system:
245
- 1. Focus on ONE component at a time — the dark canvas makes each element precious
246
- 2. Always verify letter-spacing on GT Walsheim headings — the extreme negative tracking is non-negotiable
247
- 3. Check that Framer Blue appears ONLY on interactive elements — never as decorative background or text color for non-links
248
- 4. Ensure all buttons are pill-shaped — any squared corner immediately breaks the Framer aesthetic
249
- 5. Test frosted glass surfaces by checking they have exactly `rgba(255, 255, 255, 0.1)` — too opaque looks like a bug, too transparent disappears