@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
@@ -1,342 +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>The Verge - reference components</title>
7
- <meta
8
- name="description"
9
- content="Reference fixture for design-systems/theverge: high-energy technology magazine with black surfaces, magenta signal, and dense editorial cards."
10
- />
11
- <style>
12
- :root {
13
- --bg: #050505;
14
- --surface: #111111;
15
- --surface-warm: #211022;
16
- --fg: #ffffff;
17
- --fg-2: #e5e7eb;
18
- --muted: #9ca3af;
19
- --meta: #ff00a8;
20
- --border: #2b2b2b;
21
- --border-soft: #1d1d1d;
22
- --accent: #ff00a8;
23
- --accent-on: #ffffff;
24
- --accent-hover: color-mix(in oklab, var(--accent), black 8%);
25
- --accent-active: color-mix(in oklab, var(--accent), black 14%);
26
- --success: #22c55e;
27
- --warn: #facc15;
28
- --danger: #ef4444;
29
- --font-display: "PolySans", "Helvetica Neue", Arial, sans-serif;
30
- --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
31
- --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
32
- --text-xs: 12px;
33
- --text-sm: 14px;
34
- --text-base: 16px;
35
- --text-lg: 19px;
36
- --text-xl: 26px;
37
- --text-2xl: 42px;
38
- --text-3xl: 66px;
39
- --text-4xl: 96px;
40
- --leading-body: 1.48;
41
- --leading-tight: 0.95;
42
- --tracking-display: -0.035em;
43
- --space-1: 4px;
44
- --space-2: 8px;
45
- --space-3: 12px;
46
- --space-4: 16px;
47
- --space-5: 20px;
48
- --space-6: 24px;
49
- --space-8: 32px;
50
- --space-12: 48px;
51
- --section-y-desktop: 88px;
52
- --section-y-tablet: 64px;
53
- --section-y-phone: 44px;
54
- --radius-sm: 4px;
55
- --radius-md: 8px;
56
- --radius-lg: 12px;
57
- --radius-pill: 9999px;
58
- --elev-flat: none;
59
- --elev-ring: 0 0 0 1px var(--border);
60
- --elev-raised: 0 24px 70px rgba(255, 0, 168, 0.12);
61
- --focus-ring: 0 0 0 4px rgba(255, 0, 168, 0.30);
62
- --motion-fast: 120ms;
63
- --motion-base: 200ms;
64
- --ease-standard: cubic-bezier(0.2, 0, 0, 1);
65
- --container-max: 1240px;
66
- --container-gutter-desktop: 36px;
67
- --container-gutter-tablet: 28px;
68
- --container-gutter-phone: 18px;
69
- }
70
-
71
- *, *::before, *::after { box-sizing: border-box; }
72
- html, body { margin: 0; padding: 0; }
73
- body {
74
- min-height: 100vh;
75
- background: var(--bg);
76
- color: var(--fg);
77
- font-family: var(--font-body);
78
- font-size: var(--text-base);
79
- line-height: var(--leading-body);
80
- -webkit-font-smoothing: antialiased;
81
- }
82
- .page {
83
- min-height: 100vh;
84
- background: linear-gradient(135deg, #050505 0%, #211022 62%, #ff00a8 100%);
85
- }
86
- .container {
87
- max-width: var(--container-max);
88
- margin-inline: auto;
89
- padding-inline: var(--container-gutter-desktop);
90
- }
91
- section { padding-block: var(--section-y-desktop); }
92
- @media (max-width: 1023px) {
93
- .container { padding-inline: var(--container-gutter-tablet); }
94
- section { padding-block: var(--section-y-tablet); }
95
- }
96
- @media (max-width: 639px) {
97
- .container { padding-inline: var(--container-gutter-phone); }
98
- section { padding-block: var(--section-y-phone); }
99
- }
100
- h1, h2, h3, p { margin: 0; }
101
- h1, h2, h3 {
102
- font-family: var(--font-display);
103
- line-height: var(--leading-tight);
104
- letter-spacing: var(--tracking-display);
105
- }
106
- h1 { max-width: 820px; font-size: var(--text-4xl); font-weight: 700; }
107
- h2 { font-size: var(--text-3xl); font-weight: 650; }
108
- h3 { font-size: var(--text-xl); font-weight: 650; }
109
- .eyebrow {
110
- color: var(--meta);
111
- font-family: var(--font-mono);
112
- font-size: var(--text-xs);
113
- font-weight: 700;
114
- letter-spacing: 0.12em;
115
- text-transform: uppercase;
116
- }
117
- .lead {
118
- max-width: 620px;
119
- color: var(--fg-2);
120
- font-size: var(--text-lg);
121
- }
122
- .hero {
123
- display: grid;
124
- grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
125
- gap: var(--space-8);
126
- align-items: center;
127
- }
128
- .stack > * + * { margin-block-start: var(--space-4); }
129
- .actions {
130
- display: flex;
131
- flex-wrap: wrap;
132
- gap: var(--space-3);
133
- margin-block-start: var(--space-6);
134
- }
135
- .btn {
136
- display: inline-flex;
137
- align-items: center;
138
- justify-content: center;
139
- min-height: 44px;
140
- padding: 0 var(--space-5);
141
- border: 1px solid transparent;
142
- border-radius: var(--radius-md);
143
- font: 700 var(--text-sm) / 1 var(--font-body);
144
- text-decoration: none;
145
- cursor: pointer;
146
- transition:
147
- background-color var(--motion-fast) var(--ease-standard),
148
- border-color var(--motion-fast) var(--ease-standard),
149
- color var(--motion-fast) var(--ease-standard),
150
- transform var(--motion-fast) var(--ease-standard),
151
- box-shadow var(--motion-fast) var(--ease-standard);
152
- }
153
- .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
154
- .btn-primary { background: var(--accent); color: var(--accent-on); }
155
- .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
156
- .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
157
- .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
158
- .panel {
159
- background: color-mix(in oklab, var(--surface), transparent 4%);
160
- border: 1px solid var(--border);
161
- border-radius: var(--radius-lg);
162
- box-shadow: var(--elev-raised);
163
- overflow: hidden;
164
- }
165
- .panel-head {
166
- display: flex;
167
- align-items: center;
168
- justify-content: space-between;
169
- gap: var(--space-4);
170
- padding: var(--space-5);
171
- border-bottom: 1px solid var(--border-soft);
172
- }
173
- .status {
174
- display: inline-flex;
175
- align-items: center;
176
- gap: var(--space-2);
177
- color: var(--meta);
178
- font: 700 var(--text-xs) / 1 var(--font-mono);
179
- text-transform: uppercase;
180
- letter-spacing: 0.08em;
181
- }
182
- .status::before {
183
- width: 8px;
184
- height: 8px;
185
- border-radius: var(--radius-pill);
186
- background: var(--success);
187
- content: "";
188
- }
189
- .metric-grid {
190
- display: grid;
191
- grid-template-columns: repeat(3, minmax(0, 1fr));
192
- border-bottom: 1px solid var(--border-soft);
193
- }
194
- .metric {
195
- padding: var(--space-5);
196
- border-right: 1px solid var(--border-soft);
197
- }
198
- .metric:last-child { border-right: 0; }
199
- .metric strong {
200
- display: block;
201
- font-family: var(--font-display);
202
- font-size: var(--text-2xl);
203
- line-height: var(--leading-tight);
204
- }
205
- .metric span { color: var(--muted); font-size: var(--text-sm); }
206
- .card-row {
207
- display: grid;
208
- grid-template-columns: 1fr 1fr;
209
- gap: var(--space-4);
210
- padding: var(--space-5);
211
- }
212
- .mini-card {
213
- min-height: 148px;
214
- padding: var(--space-5);
215
- border: 1px solid var(--border-soft);
216
- border-radius: var(--radius-md);
217
- background: var(--surface-warm);
218
- }
219
- .mini-card p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
220
- .swatches {
221
- display: flex;
222
- gap: var(--space-2);
223
- margin-block-start: var(--space-4);
224
- }
225
- .swatch {
226
- width: 32px;
227
- height: 32px;
228
- border-radius: var(--radius-sm);
229
- border: 1px solid var(--border);
230
- }
231
- .swatch.accent { background: var(--accent); }
232
- .swatch.surface { background: var(--surface); }
233
- .swatch.warm { background: var(--surface-warm); }
234
- .swatch.fg { background: var(--fg); }
235
- .field {
236
- display: grid;
237
- gap: var(--space-2);
238
- margin-block-start: var(--space-5);
239
- }
240
- label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
241
- input {
242
- width: 100%;
243
- min-height: 46px;
244
- padding: 0 var(--space-4);
245
- border: 1px solid var(--border);
246
- border-radius: var(--radius-sm);
247
- background: var(--surface);
248
- color: var(--fg);
249
- font: inherit;
250
- }
251
- input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
252
- .lower {
253
- display: grid;
254
- grid-template-columns: repeat(3, minmax(0, 1fr));
255
- gap: var(--space-4);
256
- }
257
- .tile {
258
- padding: var(--space-5);
259
- border: 1px solid var(--border);
260
- border-radius: var(--radius-md);
261
- background: var(--surface);
262
- }
263
- .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
264
- @media (max-width: 860px) {
265
- .hero, .lower { grid-template-columns: 1fr; }
266
- .metric-grid, .card-row { grid-template-columns: 1fr; }
267
- .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); }
268
- .metric:last-child { border-bottom: 0; }
269
- }
270
- </style>
271
- </head>
272
- <body>
273
- <main class="page">
274
- <section>
275
- <div class="container hero">
276
- <div class="stack">
277
- <p class="eyebrow">The Verge design system</p>
278
- <h1>Tech culture front page</h1>
279
- <p class="lead">Editorial density, neon-magenta signal, and magazine section rhythm.</p>
280
- <div class="actions" aria-label="Reference actions">
281
- <a class="btn btn-primary" href="#">Primary neon editorial CTA</a>
282
- <a class="btn btn-secondary" href="#">Secondary action</a>
283
- </div>
284
- </div>
285
- <article class="panel" aria-label="The Verge component preview">
286
- <div class="panel-head">
287
- <div>
288
- <p class="eyebrow">Live module</p>
289
- <h3>story rail card</h3>
290
- </div>
291
- <span class="status">online</span>
292
- </div>
293
- <div class="metric-grid">
294
- <div class="metric"><strong>98%</strong><span>Signal quality</span></div>
295
- <div class="metric"><strong>24</strong><span>Active flows</span></div>
296
- <div class="metric"><strong>3.2s</strong><span>Response time</span></div>
297
- </div>
298
- <div class="card-row">
299
- <div class="mini-card">
300
- <h3>Palette</h3>
301
- <p>high-energy technology magazine with black surfaces, magenta signal, and dense editorial cards.</p>
302
- <div class="swatches" aria-label="Token swatches">
303
- <span class="swatch accent"></span>
304
- <span class="swatch surface"></span>
305
- <span class="swatch warm"></span>
306
- <span class="swatch fg"></span>
307
- </div>
308
- </div>
309
- <div class="mini-card">
310
- <h3>Control</h3>
311
- <p>Focus, hover, and status states share the same brand signal.</p>
312
- <div class="field">
313
- <label for="theverge-input">Reference input</label>
314
- <input id="theverge-input" value="The Verge system token" />
315
- </div>
316
- </div>
317
- </div>
318
- </article>
319
- </div>
320
- </section>
321
- <section>
322
- <div class="container lower">
323
- <article class="tile">
324
- <p class="eyebrow">Typography</p>
325
- <h2>Display rhythm</h2>
326
- <p>Headlines use the brand display stack with the declared scale and leading.</p>
327
- </article>
328
- <article class="tile">
329
- <p class="eyebrow">Surface</p>
330
- <h2>Layer system</h2>
331
- <p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p>
332
- </article>
333
- <article class="tile">
334
- <p class="eyebrow">Interaction</p>
335
- <h2>Motion states</h2>
336
- <p>Buttons, inputs, and panels use brand-specific focus rings and easing.</p>
337
- </article>
338
- </div>
339
- </section>
340
- </main>
341
- </body>
342
- </html>
@@ -1,64 +0,0 @@
1
- /* design-systems/theverge/tokens.css
2
- *
3
- * Structured token bindings for The Verge.
4
- * high-energy technology magazine with black surfaces, magenta signal, and dense editorial cards.
5
- */
6
-
7
- :root {
8
- --bg: #050505;
9
- --surface: #111111;
10
- --surface-warm: #211022;
11
- --fg: #ffffff;
12
- --fg-2: #e5e7eb;
13
- --muted: #9ca3af;
14
- --meta: #ff00a8;
15
- --border: #2b2b2b;
16
- --border-soft: #1d1d1d;
17
- --accent: #ff00a8;
18
- --accent-on: #ffffff;
19
- --accent-hover: color-mix(in oklab, var(--accent), black 8%);
20
- --accent-active: color-mix(in oklab, var(--accent), black 14%);
21
- --success: #22c55e;
22
- --warn: #facc15;
23
- --danger: #ef4444;
24
- --font-display: "PolySans", "Helvetica Neue", Arial, sans-serif;
25
- --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
26
- --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
27
- --text-xs: 12px;
28
- --text-sm: 14px;
29
- --text-base: 16px;
30
- --text-lg: 19px;
31
- --text-xl: 26px;
32
- --text-2xl: 42px;
33
- --text-3xl: 66px;
34
- --text-4xl: 96px;
35
- --leading-body: 1.48;
36
- --leading-tight: 0.95;
37
- --tracking-display: -0.035em;
38
- --space-1: 4px;
39
- --space-2: 8px;
40
- --space-3: 12px;
41
- --space-4: 16px;
42
- --space-5: 20px;
43
- --space-6: 24px;
44
- --space-8: 32px;
45
- --space-12: 48px;
46
- --section-y-desktop: 88px;
47
- --section-y-tablet: 64px;
48
- --section-y-phone: 44px;
49
- --radius-sm: 4px;
50
- --radius-md: 8px;
51
- --radius-lg: 12px;
52
- --radius-pill: 9999px;
53
- --elev-flat: none;
54
- --elev-ring: 0 0 0 1px var(--border);
55
- --elev-raised: 0 24px 70px rgba(255, 0, 168, 0.12);
56
- --focus-ring: 0 0 0 4px rgba(255, 0, 168, 0.30);
57
- --motion-fast: 120ms;
58
- --motion-base: 200ms;
59
- --ease-standard: cubic-bezier(0.2, 0, 0, 1);
60
- --container-max: 1240px;
61
- --container-gutter-desktop: 36px;
62
- --container-gutter-tablet: 28px;
63
- --container-gutter-phone: 18px;
64
- }
@@ -1,266 +0,0 @@
1
- # Design System Inspired by Together AI
2
-
3
- > Category: AI & LLM
4
- > Open-source AI infrastructure. Technical, blueprint-style design.
5
-
6
- ## 1. Visual Theme & Atmosphere
7
-
8
- Together AI's interface is a pastel-gradient dreamscape built for enterprise AI infrastructure — a design that somehow makes GPU clusters and model inference feel light, airy, and optimistic. The hero section blooms with soft pink-blue-lavender gradients and abstract, painterly illustrations that evoke clouds and flight, establishing a visual metaphor for the "AI-Native Cloud" proposition. Against this softness, the typography cuts through with precision: "The Future" display font at 64px with aggressive negative tracking (-1.92px) creates dense, authoritative headline blocks.
9
-
10
- The design straddles two worlds: a bright, white-canvas light side where pastel gradients and stats cards create an approachable platform overview, and a dark navy universe (`#010120` — not gray-black but a deep midnight blue) where research papers and technical content live. This dual-world approach elegantly separates the "business" messaging (light, friendly, stat-driven) from the "research" messaging (dark, serious, academic).
11
-
12
- What makes Together AI distinctive is its type system. "The Future" handles all display and body text with a geometric modernist aesthetic, while "PP Neue Montreal Mono" provides uppercase labels with meticulous letter-spacing — creating a "technical infrastructure company with taste" personality. The brand accents — magenta (`#ef2cc1`) and orange (`#fc4c02`) — appear sparingly in the gradient and illustrations, never polluting the clean UI.
13
-
14
- **Key Characteristics:**
15
- - Soft pastel gradients (pink, blue, lavender) against pure white canvas
16
- - Deep midnight blue (`#010120`) for dark/research sections — not gray-black
17
- - Custom "The Future" font with aggressive negative letter-spacing throughout
18
- - PP Neue Montreal Mono for uppercase technical labels
19
- - Sharp geometry (4px, 8px radius) — not rounded, not pill
20
- - Magenta (#ef2cc1) + orange (#fc4c02) brand accents in illustrations only
21
- - Lavender (#bdbbff) as a soft secondary accent
22
- - Enterprise stats prominently displayed (2x, 60%, 90%)
23
- - Dark-blue-tinted shadows (rgba(1, 1, 32, 0.1))
24
-
25
- ## 2. Color Palette & Roles
26
-
27
- ### Primary
28
- - **Brand Magenta** (`#ef2cc1`): The primary brand accent — a vivid pink-magenta used in gradient illustrations and the highest-signal brand moments. Never used as UI chrome.
29
- - **Brand Orange** (`#fc4c02`): The secondary brand accent — a vivid orange for gradient endpoints and warm accent moments.
30
- - **Dark Blue** (`#010120`): The primary dark surface — a deep midnight blue-black used for research sections, footer, and dark containers. Not gray, not black — distinctly blue.
31
-
32
- ### Secondary & Accent
33
- - **Soft Lavender** (`#bdbbff`): A gentle blue-violet used for subtle accents, secondary indicators, and soft UI highlights.
34
- - **Black 40** (`#00000066`): Semi-transparent black for de-emphasized overlays and secondary text.
35
-
36
- ### Surface & Background
37
- - **Pure White** (`#ffffff`): The primary light-section page background.
38
- - **Dark Blue** (`#010120`): Dark-section backgrounds — research, footer, technical content.
39
- - **Glass Light** (`rgba(255, 255, 255, 0.12)`): Frosted glass button backgrounds on dark sections.
40
- - **Glass Dark** (`rgba(0, 0, 0, 0.08)`): Subtle tinted surfaces on light sections.
41
-
42
- ### Neutrals & Text
43
- - **Pure Black** (`#000000`): Primary text on light surfaces.
44
- - **Pure White** (`#ffffff`): Primary text on dark surfaces.
45
- - **Black 8%** (`rgba(0, 0, 0, 0.08)`): Borders and subtle containment on light surfaces.
46
- - **White 12%** (`rgba(255, 255, 255, 0.12)`): Borders and containment on dark surfaces.
47
-
48
- ### Gradient System
49
- - **Pastel Cloud Gradient**: Soft pink → lavender → soft blue gradients in hero illustrations. These appear in abstract, painterly forms — clouds, feathers, flowing shapes — that create visual warmth without literal meaning.
50
- - **Hero Gradient**: The hero background uses soft pastel tints layered over white, creating a dawn-like atmospheric effect.
51
-
52
- ## 3. Typography Rules
53
-
54
- ### Font Family
55
- - **Primary**: `The Future`, with fallback: `Arial`
56
- - **Monospace / Labels**: `PP Neue Montreal Mono`, with fallback: `Georgia`
57
-
58
- ### Hierarchy
59
-
60
- | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
61
- |------|------|------|--------|-------------|----------------|-------|
62
- | Display / Hero | The Future | 64px (4rem) | 400–500 | 1.00–1.10 (tight) | -1.92px | Maximum impact, dense blocks |
63
- | Section Heading | The Future | 40px (2.5rem) | 500 | 1.20 (tight) | -0.8px | Feature section titles |
64
- | Sub-heading | The Future | 28px (1.75rem) | 500 | 1.15 (tight) | -0.42px | Card headings |
65
- | Feature Title | The Future | 22px (1.38rem) | 500 | 1.15 (tight) | -0.22px | Small feature headings |
66
- | Body Large | The Future | 18px (1.13rem) | 400–500 | 1.30 (tight) | -0.18px | Descriptions, sections |
67
- | Body / Button | The Future | 16px (1rem) | 400–500 | 1.25–1.30 | -0.16px | Standard body, nav, buttons |
68
- | Caption | The Future | 14px (0.88rem) | 400–500 | 1.40 | normal | Metadata, descriptions |
69
- | Mono Label | PP Neue Montreal Mono | 16px (1rem) | 500 | 1.00 (tight) | 0.08px | Uppercase section labels |
70
- | Mono Small | PP Neue Montreal Mono | 11px (0.69rem) | 500 | 1.00–1.40 | 0.055–0.08px | Small uppercase tags |
71
- | Mono Micro | PP Neue Montreal Mono | 10px (0.63rem) | 400 | 1.40 | 0.05px | Smallest uppercase labels |
72
-
73
- ### Principles
74
- - **Negative tracking everywhere**: Every size of "The Future" uses negative letter-spacing (-0.16px to -1.92px), creating consistently tight, modern text.
75
- - **Mono for structure**: PP Neue Montreal Mono in uppercase with positive letter-spacing creates technical "label" moments that structure the page without competing with display text.
76
- - **Weight 500 as emphasis**: The system uses 400 (regular) and 500 (medium) — no bold. Medium weight marks headings and emphasis.
77
- - **Tight line-heights throughout**: Even body text uses 1.25–1.30 line-height — tighter than typical, creating a dense, information-rich feel.
78
-
79
- ## 4. Component Stylings
80
-
81
- ### Buttons
82
-
83
- **Glass on Dark**
84
- - Background: `rgba(255, 255, 255, 0.12)` (frosted glass)
85
- - Text: Pure White (`#ffffff`)
86
- - Radius: sharp (4px)
87
- - Opacity: 0.5
88
- - Hover: transparent dark overlay
89
- - Used on dark sections — subtle, glass-like
90
-
91
- **Dark Solid**
92
- - Background: Dark Blue (`#010120`) or Pure Black
93
- - Text: Pure White
94
- - Radius: sharp (4px)
95
- - The primary CTA on light surfaces
96
-
97
- **Outlined Light**
98
- - Border: `1px solid rgba(0, 0, 0, 0.08)`
99
- - Background: transparent or subtle glass
100
- - Text: Pure Black
101
- - Radius: sharp (4px)
102
- - Secondary actions on light surfaces
103
-
104
- ### Cards & Containers
105
- - Background: Pure White or subtle glass tint
106
- - Border: `1px solid rgba(0, 0, 0, 0.08)` on light; `1px solid rgba(255, 255, 255, 0.12)` on dark
107
- - Radius: sharp (4px) for badges and small elements; comfortable (8px) for larger containers
108
- - Shadow: dark-blue-tinted (`rgba(1, 1, 32, 0.1) 0px 4px 10px`) — warm and subtle
109
- - Stats cards with large numbers prominently displayed
110
-
111
- ### Badges / Tags
112
- - Background: `rgba(0, 0, 0, 0.04)` (light) or `rgba(255, 255, 255, 0.12)` (dark)
113
- - Text: Black (light) or White (dark)
114
- - Padding: 2px 8px (compact)
115
- - Radius: sharp (4px)
116
- - Border: `1px solid rgba(0, 0, 0, 0.08)`
117
- - PP Neue Montreal Mono, uppercase, 16px
118
-
119
- ### Navigation
120
- - Clean horizontal nav on white/transparent
121
- - Logo: Together AI wordmark
122
- - Links: The Future at 16px, weight 400
123
- - CTA: Dark solid button
124
- - Hover: no text-decoration
125
-
126
- ### Image Treatment
127
- - Abstract pastel gradient illustrations (cloud/feather forms)
128
- - Product UI screenshots on dark/light surfaces
129
- - Team photos in editorial style
130
- - Research paper cards with dark backgrounds
131
-
132
- ### Distinctive Components
133
-
134
- **Stats Bar**
135
- - Large performance metrics (2x, 60%, 90%)
136
- - Bold display numbers
137
- - Short descriptive captions beneath
138
- - Clean horizontal layout
139
-
140
- **Mono Section Labels**
141
- - PP Neue Montreal Mono, uppercase, 11px, letter-spacing 0.055px
142
- - Used as navigational signposts throughout the page
143
- - Technical, structured feel
144
-
145
- **Research Section**
146
- - Dark Blue (#010120) background
147
- - White text, research paper thumbnails
148
- - Creates a distinct "academic" zone
149
-
150
- **Large Footer Logo**
151
- - "together" wordmark rendered at massive scale in the dark footer
152
- - Creates a brand-statement closing moment
153
-
154
- ## 5. Layout Principles
155
-
156
- ### Spacing System
157
- - Base unit: 8px
158
- - Scale: 1px, 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 44px, 48px, 80px, 100px, 120px
159
- - Button/badge padding: 2px 8px (compact)
160
- - Card internal padding: approximately 24–32px
161
- - Section vertical spacing: generous (80–120px)
162
-
163
- ### Grid & Container
164
- - Max container width: approximately 1200px, centered
165
- - Hero: centered with pastel gradient background
166
- - Feature sections: multi-column card grids
167
- - Stats: horizontal row of metric cards
168
- - Research: dark full-width section
169
-
170
- ### Whitespace Philosophy
171
- - **Optimistic breathing room**: Generous spacing between sections creates an open, inviting feel that makes enterprise AI infrastructure feel accessible.
172
- - **Dual atmosphere**: Light sections breathe with whitespace; dark sections are denser with content.
173
- - **Stats as visual anchors**: Large numbers with small captions create natural focal points.
174
-
175
- ### Border Radius Scale
176
- - Sharp (4px): Buttons, badges, tags, small interactive elements — the primary radius
177
- - Comfortable (8px): Larger containers, feature cards
178
-
179
- *This is a deliberately restrained radius system — no pills, no generous rounding. The sharp geometry contrasts with the soft pastel gradients.*
180
-
181
- ## 6. Depth & Elevation
182
-
183
- | Level | Treatment | Use |
184
- |-------|-----------|-----|
185
- | Flat (Level 0) | No shadow, no border | Page background, text blocks |
186
- | Contained (Level 1) | `1px solid rgba(0,0,0,0.08)` (light) or `rgba(255,255,255,0.12)` (dark) | Cards, badges, containers |
187
- | Elevated (Level 2) | `rgba(1, 1, 32, 0.1) 0px 4px 10px` | Feature cards, hover states |
188
- | Dark Zone (Level 3) | Dark Blue (#010120) full-width background | Research, footer, technical sections |
189
-
190
- **Shadow Philosophy**: Together AI uses a single, distinctive shadow — tinted with Dark Blue (`rgba(1, 1, 32, 0.1)`) rather than generic black. This gives elevated elements a subtle blue-ish cast that ties them to the brand's midnight-blue dark mode. The shadow is soft (10px blur, 4px offset) and always downward — creating gentle paper-hover elevation.
191
-
192
- ## 7. Do's and Don'ts
193
-
194
- ### Do
195
- - Use pastel gradients (pink/blue/lavender) for hero illustrations and decorative backgrounds
196
- - Use Dark Blue (#010120) for dark sections — never generic gray-black
197
- - Apply negative letter-spacing on all "The Future" text (scaled by size)
198
- - Use PP Neue Montreal Mono in uppercase for section labels and technical markers
199
- - Keep border-radius sharp (4px) for badges and interactive elements
200
- - Use the dark-blue-tinted shadow for elevation
201
- - Maintain the light/dark section duality — business (light) vs research (dark)
202
- - Show enterprise stats prominently with large display numbers
203
-
204
- ### Don't
205
- - Don't use Brand Magenta (#ef2cc1) or Brand Orange (#fc4c02) as UI colors — they're for illustrations only
206
- - Don't use pill-shaped or generously rounded corners — the geometry is sharp
207
- - Don't use generic gray-black for dark sections — always Dark Blue (#010120)
208
- - Don't use positive letter-spacing on "The Future" — it's always negative
209
- - Don't use bold (700+) weight — 400–500 is the full range
210
- - Don't use warm-toned shadows — always dark-blue-tinted
211
- - Don't reduce section spacing below 48px — the open feeling is core
212
- - Don't mix in additional typefaces — "The Future" + PP Neue Montreal Mono is the pair
213
-
214
- ## 8. Responsive Behavior
215
-
216
- ### Breakpoints
217
- | Name | Width | Key Changes |
218
- |------|-------|-------------|
219
- | Mobile | <479px | Compact layout, stacked everything |
220
- | Large Mobile | 479–767px | Single column, hamburger nav |
221
- | Tablet | 768–991px | 2-column grids begin |
222
- | Desktop | 992px+ | Full multi-column layout |
223
-
224
- ### Touch Targets
225
- - Buttons with adequate padding
226
- - Card surfaces as touch targets
227
- - Navigation links at comfortable 16px
228
-
229
- ### Collapsing Strategy
230
- - **Navigation**: Collapses to hamburger on mobile
231
- - **Hero text**: 64px → 40px → 28px progressive scaling
232
- - **Stats bar**: Horizontal → stacked vertical
233
- - **Feature grids**: Multi-column → single column
234
- - **Research section**: Cards stack vertically
235
-
236
- ### Image Behavior
237
- - Pastel illustrations scale proportionally
238
- - Product screenshots maintain aspect ratio
239
- - Team photos scale within containers
240
-
241
- ## 9. Agent Prompt Guide
242
-
243
- ### Quick Color Reference
244
- - Primary Text (light): "Pure Black (#000000)"
245
- - Primary Text (dark): "Pure White (#ffffff)"
246
- - Page Background: "Pure White (#ffffff)"
247
- - Dark Surface: "Dark Blue (#010120)"
248
- - Brand Accent 1: "Brand Magenta (#ef2cc1)"
249
- - Brand Accent 2: "Brand Orange (#fc4c02)"
250
- - Soft Accent: "Soft Lavender (#bdbbff)"
251
- - Border (light): "rgba(0, 0, 0, 0.08)"
252
-
253
- ### Example Component Prompts
254
- - "Create a hero section on white with soft pastel gradients (pink → lavender → blue) as background. Headline at 64px 'The Future' weight 500, line-height 1.10, letter-spacing -1.92px. Pure Black text. Include a dark blue CTA button (#010120, 4px radius)."
255
- - "Design a stats card: large display number (64px, weight 500) with a small caption below (14px). White background, 8px radius, dark-blue-tinted shadow (rgba(1, 1, 32, 0.1) 0px 4px 10px)."
256
- - "Build a section label: PP Neue Montreal Mono, 11px, weight 500, uppercase, letter-spacing 0.055px. Black text on light, white on dark."
257
- - "Create a dark research section: Dark Blue (#010120) background. White text, section heading at 40px 'The Future' weight 500, letter-spacing -0.8px. Cards with rgba(255, 255, 255, 0.12) border."
258
- - "Design a badge: 4px radius, rgba(0, 0, 0, 0.04) background, 1px solid rgba(0, 0, 0, 0.08) border, 'The Future' 16px text. Padding: 2px 8px."
259
-
260
- ### Iteration Guide
261
- 1. Always specify negative letter-spacing for "The Future" — it's scaled by size
262
- 2. Dark sections use #010120 (midnight blue), never generic black
263
- 3. Shadows are always dark-blue-tinted: rgba(1, 1, 32, 0.1)
264
- 4. Mono labels are always uppercase with positive letter-spacing
265
- 5. Keep radius sharp (4px or 8px) — no pills, no generous rounding
266
- 6. Pastel gradients are for decoration, not UI chrome