@aexol/spectral 0.9.270 → 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 (567) 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/memory/debug-log.d.ts.map +1 -1
  14. package/dist/memory/debug-log.js +20 -2
  15. package/dist/memory/tools/compact-context.d.ts +1 -1
  16. package/dist/memory/tools/compact-context.d.ts.map +1 -1
  17. package/dist/memory/tools/compact-context.js +4 -1
  18. package/dist/memory/tools/recall-observation.d.ts +3 -3
  19. package/dist/memory/tools/recall-observation.d.ts.map +1 -1
  20. package/dist/memory/tools/recall-observation.js +4 -1
  21. package/dist/memory/tools/receive-agent-observations.d.ts +3 -3
  22. package/dist/memory/tools/receive-agent-observations.d.ts.map +1 -1
  23. package/dist/memory/tools/receive-agent-observations.js +4 -1
  24. package/dist/memory/tools/share-project-observation.d.ts +3 -3
  25. package/dist/memory/tools/share-project-observation.d.ts.map +1 -1
  26. package/dist/memory/tools/share-project-observation.js +4 -1
  27. package/dist/memory/tools/write-project-observation.d.ts +3 -3
  28. package/dist/memory/tools/write-project-observation.d.ts.map +1 -1
  29. package/dist/memory/tools/write-project-observation.js +4 -1
  30. package/dist/relay/client.d.ts.map +1 -1
  31. package/dist/relay/client.js +5 -2
  32. package/dist/sdk/ai/env-api-keys.js +1 -1
  33. package/dist/sdk/coding-agent/core/extensions/loader.d.ts.map +1 -1
  34. package/dist/sdk/coding-agent/core/extensions/loader.js +31 -3
  35. package/dist/sdk/coding-agent/core/theme.js +1 -1
  36. package/dist/server/handlers/agent-settings.d.ts.map +1 -1
  37. package/dist/server/handlers/agent-settings.js +4 -1
  38. package/dist/server/handlers/settings-lock.d.ts.map +1 -1
  39. package/dist/server/handlers/settings-lock.js +4 -1
  40. package/dist/server/storage.d.ts.map +1 -1
  41. package/dist/server/storage.js +13 -1
  42. package/dist/utils/serve-state.d.ts +17 -0
  43. package/dist/utils/serve-state.d.ts.map +1 -1
  44. package/dist/utils/serve-state.js +73 -0
  45. package/package.json +1 -1
  46. package/dist/designer/data/skills/blog-post.d.ts +0 -3
  47. package/dist/designer/data/skills/blog-post.d.ts.map +0 -1
  48. package/dist/designer/data/skills/blog-post.js +0 -84
  49. package/dist/designer/data/skills/blog-post.ts +0 -87
  50. package/dist/designer/data/skills/critique.d.ts +0 -3
  51. package/dist/designer/data/skills/critique.d.ts.map +0 -1
  52. package/dist/designer/data/skills/critique.js +0 -109
  53. package/dist/designer/data/skills/critique.ts +0 -112
  54. package/dist/designer/data/skills/dashboard.d.ts +0 -3
  55. package/dist/designer/data/skills/dashboard.d.ts.map +0 -1
  56. package/dist/designer/data/skills/dashboard.js +0 -165
  57. package/dist/designer/data/skills/dashboard.ts +0 -168
  58. package/dist/designer/data/skills/design-brief.d.ts +0 -3
  59. package/dist/designer/data/skills/design-brief.d.ts.map +0 -1
  60. package/dist/designer/data/skills/design-brief.js +0 -141
  61. package/dist/designer/data/skills/design-brief.ts +0 -144
  62. package/dist/designer/data/skills/design-skill.d.ts +0 -10
  63. package/dist/designer/data/skills/design-skill.d.ts.map +0 -1
  64. package/dist/designer/data/skills/design-skill.js +0 -1
  65. package/dist/designer/data/skills/design-skill.ts +0 -9
  66. package/dist/designer/data/skills/docs-page.d.ts +0 -3
  67. package/dist/designer/data/skills/docs-page.d.ts.map +0 -1
  68. package/dist/designer/data/skills/docs-page.js +0 -68
  69. package/dist/designer/data/skills/docs-page.ts +0 -71
  70. package/dist/designer/data/skills/index.d.ts +0 -3
  71. package/dist/designer/data/skills/index.d.ts.map +0 -1
  72. package/dist/designer/data/skills/index.js +0 -28
  73. package/dist/designer/data/skills/index.ts +0 -30
  74. package/dist/designer/data/skills/magazine-poster.d.ts +0 -3
  75. package/dist/designer/data/skills/magazine-poster.d.ts.map +0 -1
  76. package/dist/designer/data/skills/magazine-poster.js +0 -70
  77. package/dist/designer/data/skills/magazine-poster.ts +0 -73
  78. package/dist/designer/data/skills/mobile-app.d.ts +0 -3
  79. package/dist/designer/data/skills/mobile-app.d.ts.map +0 -1
  80. package/dist/designer/data/skills/mobile-app.js +0 -229
  81. package/dist/designer/data/skills/mobile-app.ts +0 -232
  82. package/dist/designer/data/skills/motion-frames.d.ts +0 -3
  83. package/dist/designer/data/skills/motion-frames.d.ts.map +0 -1
  84. package/dist/designer/data/skills/motion-frames.js +0 -121
  85. package/dist/designer/data/skills/motion-frames.ts +0 -124
  86. package/dist/designer/data/skills/pricing-page.d.ts +0 -3
  87. package/dist/designer/data/skills/pricing-page.d.ts.map +0 -1
  88. package/dist/designer/data/skills/pricing-page.js +0 -76
  89. package/dist/designer/data/skills/pricing-page.ts +0 -79
  90. package/dist/designer/data/skills/saas-landing.d.ts +0 -3
  91. package/dist/designer/data/skills/saas-landing.d.ts.map +0 -1
  92. package/dist/designer/data/skills/saas-landing.js +0 -71
  93. package/dist/designer/data/skills/saas-landing.ts +0 -74
  94. package/dist/designer/data/skills/slide-deck.d.ts +0 -3
  95. package/dist/designer/data/skills/slide-deck.d.ts.map +0 -1
  96. package/dist/designer/data/skills/slide-deck.js +0 -213
  97. package/dist/designer/data/skills/slide-deck.ts +0 -216
  98. package/dist/designer/data/skills/social-carousel.d.ts +0 -3
  99. package/dist/designer/data/skills/social-carousel.d.ts.map +0 -1
  100. package/dist/designer/data/skills/social-carousel.js +0 -135
  101. package/dist/designer/data/skills/social-carousel.ts +0 -138
  102. package/dist/designer/data/skills/web-prototype.d.ts +0 -3
  103. package/dist/designer/data/skills/web-prototype.d.ts.map +0 -1
  104. package/dist/designer/data/skills/web-prototype.js +0 -159
  105. package/dist/designer/data/skills/web-prototype.ts +0 -162
  106. package/dist/designer/data/systems/agentic/DESIGN.md +0 -71
  107. package/dist/designer/data/systems/agentic/components.html +0 -154
  108. package/dist/designer/data/systems/agentic/tokens.css +0 -63
  109. package/dist/designer/data/systems/airbnb/DESIGN.md +0 -393
  110. package/dist/designer/data/systems/airbnb/components.html +0 -1373
  111. package/dist/designer/data/systems/airbnb/tokens.css +0 -261
  112. package/dist/designer/data/systems/airtable/DESIGN.md +0 -92
  113. package/dist/designer/data/systems/airtable/components.html +0 -489
  114. package/dist/designer/data/systems/airtable/tokens.css +0 -261
  115. package/dist/designer/data/systems/ant/DESIGN.md +0 -71
  116. package/dist/designer/data/systems/ant/components.html +0 -154
  117. package/dist/designer/data/systems/ant/tokens.css +0 -63
  118. package/dist/designer/data/systems/apple/DESIGN.md +0 -250
  119. package/dist/designer/data/systems/apple/components.html +0 -749
  120. package/dist/designer/data/systems/apple/tokens.css +0 -286
  121. package/dist/designer/data/systems/application/DESIGN.md +0 -71
  122. package/dist/designer/data/systems/application/components.html +0 -154
  123. package/dist/designer/data/systems/application/tokens.css +0 -63
  124. package/dist/designer/data/systems/arc/DESIGN.md +0 -152
  125. package/dist/designer/data/systems/arc/components.html +0 -432
  126. package/dist/designer/data/systems/arc/tokens.css +0 -137
  127. package/dist/designer/data/systems/artistic/DESIGN.md +0 -71
  128. package/dist/designer/data/systems/artistic/components.html +0 -136
  129. package/dist/designer/data/systems/artistic/tokens.css +0 -63
  130. package/dist/designer/data/systems/atelier-zero/DESIGN.md +0 -316
  131. package/dist/designer/data/systems/atelier-zero/components.html +0 -136
  132. package/dist/designer/data/systems/atelier-zero/tokens.css +0 -63
  133. package/dist/designer/data/systems/bento/DESIGN.md +0 -71
  134. package/dist/designer/data/systems/bento/components.html +0 -136
  135. package/dist/designer/data/systems/bento/tokens.css +0 -63
  136. package/dist/designer/data/systems/binance/DESIGN.md +0 -348
  137. package/dist/designer/data/systems/binance/components.html +0 -550
  138. package/dist/designer/data/systems/binance/tokens.css +0 -255
  139. package/dist/designer/data/systems/bmw/DESIGN.md +0 -183
  140. package/dist/designer/data/systems/bmw/components.html +0 -551
  141. package/dist/designer/data/systems/bmw/tokens.css +0 -179
  142. package/dist/designer/data/systems/bmw-m/DESIGN.md +0 -246
  143. package/dist/designer/data/systems/bmw-m/components.html +0 -342
  144. package/dist/designer/data/systems/bmw-m/tokens.css +0 -64
  145. package/dist/designer/data/systems/bold/DESIGN.md +0 -71
  146. package/dist/designer/data/systems/bold/components.html +0 -136
  147. package/dist/designer/data/systems/bold/tokens.css +0 -63
  148. package/dist/designer/data/systems/brutalism/DESIGN.md +0 -71
  149. package/dist/designer/data/systems/brutalism/components.html +0 -154
  150. package/dist/designer/data/systems/brutalism/tokens.css +0 -63
  151. package/dist/designer/data/systems/bugatti/DESIGN.md +0 -271
  152. package/dist/designer/data/systems/bugatti/components.html +0 -342
  153. package/dist/designer/data/systems/bugatti/tokens.css +0 -64
  154. package/dist/designer/data/systems/cafe/DESIGN.md +0 -71
  155. package/dist/designer/data/systems/cafe/components.html +0 -136
  156. package/dist/designer/data/systems/cafe/tokens.css +0 -63
  157. package/dist/designer/data/systems/cal/DESIGN.md +0 -262
  158. package/dist/designer/data/systems/cal/components.html +0 -376
  159. package/dist/designer/data/systems/cal/tokens.css +0 -265
  160. package/dist/designer/data/systems/canva/DESIGN.md +0 -157
  161. package/dist/designer/data/systems/canva/components.html +0 -461
  162. package/dist/designer/data/systems/canva/tokens.css +0 -147
  163. package/dist/designer/data/systems/cisco/DESIGN.md +0 -201
  164. package/dist/designer/data/systems/cisco/components.html +0 -342
  165. package/dist/designer/data/systems/cisco/tokens.css +0 -64
  166. package/dist/designer/data/systems/claude/DESIGN.md +0 -315
  167. package/dist/designer/data/systems/claude/components.html +0 -483
  168. package/dist/designer/data/systems/claude/tokens.css +0 -130
  169. package/dist/designer/data/systems/clay/DESIGN.md +0 -307
  170. package/dist/designer/data/systems/clay/components.html +0 -136
  171. package/dist/designer/data/systems/clay/tokens.css +0 -63
  172. package/dist/designer/data/systems/claymorphism/DESIGN.md +0 -71
  173. package/dist/designer/data/systems/claymorphism/components.html +0 -136
  174. package/dist/designer/data/systems/claymorphism/tokens.css +0 -63
  175. package/dist/designer/data/systems/clean/DESIGN.md +0 -71
  176. package/dist/designer/data/systems/clean/components.html +0 -136
  177. package/dist/designer/data/systems/clean/tokens.css +0 -63
  178. package/dist/designer/data/systems/clickhouse/DESIGN.md +0 -284
  179. package/dist/designer/data/systems/clickhouse/components.html +0 -506
  180. package/dist/designer/data/systems/clickhouse/tokens.css +0 -135
  181. package/dist/designer/data/systems/cohere/DESIGN.md +0 -269
  182. package/dist/designer/data/systems/cohere/components.html +0 -353
  183. package/dist/designer/data/systems/cohere/tokens.css +0 -126
  184. package/dist/designer/data/systems/coinbase/DESIGN.md +0 -132
  185. package/dist/designer/data/systems/coinbase/components.html +0 -501
  186. package/dist/designer/data/systems/coinbase/tokens.css +0 -257
  187. package/dist/designer/data/systems/colorful/DESIGN.md +0 -71
  188. package/dist/designer/data/systems/colorful/components.html +0 -136
  189. package/dist/designer/data/systems/colorful/tokens.css +0 -63
  190. package/dist/designer/data/systems/composio/DESIGN.md +0 -310
  191. package/dist/designer/data/systems/composio/components.html +0 -342
  192. package/dist/designer/data/systems/composio/tokens.css +0 -64
  193. package/dist/designer/data/systems/contemporary/DESIGN.md +0 -71
  194. package/dist/designer/data/systems/contemporary/components.html +0 -136
  195. package/dist/designer/data/systems/contemporary/tokens.css +0 -63
  196. package/dist/designer/data/systems/corporate/DESIGN.md +0 -71
  197. package/dist/designer/data/systems/corporate/components.html +0 -136
  198. package/dist/designer/data/systems/corporate/tokens.css +0 -63
  199. package/dist/designer/data/systems/cosmic/DESIGN.md +0 -71
  200. package/dist/designer/data/systems/cosmic/components.html +0 -136
  201. package/dist/designer/data/systems/cosmic/tokens.css +0 -63
  202. package/dist/designer/data/systems/creative/DESIGN.md +0 -71
  203. package/dist/designer/data/systems/creative/components.html +0 -136
  204. package/dist/designer/data/systems/creative/tokens.css +0 -63
  205. package/dist/designer/data/systems/cursor/DESIGN.md +0 -312
  206. package/dist/designer/data/systems/cursor/components.html +0 -654
  207. package/dist/designer/data/systems/cursor/tokens.css +0 -218
  208. package/dist/designer/data/systems/dashboard/DESIGN.md +0 -71
  209. package/dist/designer/data/systems/dashboard/components.html +0 -154
  210. package/dist/designer/data/systems/dashboard/tokens.css +0 -63
  211. package/dist/designer/data/systems/default/DESIGN.md +0 -62
  212. package/dist/designer/data/systems/default/components.html +0 -523
  213. package/dist/designer/data/systems/default/tokens.css +0 -200
  214. package/dist/designer/data/systems/discord/DESIGN.md +0 -162
  215. package/dist/designer/data/systems/discord/components.html +0 -359
  216. package/dist/designer/data/systems/discord/tokens.css +0 -125
  217. package/dist/designer/data/systems/dithered/DESIGN.md +0 -71
  218. package/dist/designer/data/systems/dithered/components.html +0 -136
  219. package/dist/designer/data/systems/dithered/tokens.css +0 -63
  220. package/dist/designer/data/systems/doodle/DESIGN.md +0 -71
  221. package/dist/designer/data/systems/doodle/components.html +0 -136
  222. package/dist/designer/data/systems/doodle/tokens.css +0 -63
  223. package/dist/designer/data/systems/dramatic/DESIGN.md +0 -71
  224. package/dist/designer/data/systems/dramatic/components.html +0 -136
  225. package/dist/designer/data/systems/dramatic/tokens.css +0 -63
  226. package/dist/designer/data/systems/duolingo/DESIGN.md +0 -154
  227. package/dist/designer/data/systems/duolingo/components.html +0 -532
  228. package/dist/designer/data/systems/duolingo/tokens.css +0 -130
  229. package/dist/designer/data/systems/editorial/DESIGN.md +0 -71
  230. package/dist/designer/data/systems/editorial/components.html +0 -154
  231. package/dist/designer/data/systems/editorial/tokens.css +0 -63
  232. package/dist/designer/data/systems/elegant/DESIGN.md +0 -71
  233. package/dist/designer/data/systems/elegant/components.html +0 -136
  234. package/dist/designer/data/systems/elegant/tokens.css +0 -63
  235. package/dist/designer/data/systems/elevenlabs/DESIGN.md +0 -268
  236. package/dist/designer/data/systems/elevenlabs/components.html +0 -342
  237. package/dist/designer/data/systems/elevenlabs/tokens.css +0 -127
  238. package/dist/designer/data/systems/energetic/DESIGN.md +0 -72
  239. package/dist/designer/data/systems/energetic/components.html +0 -136
  240. package/dist/designer/data/systems/energetic/tokens.css +0 -63
  241. package/dist/designer/data/systems/enterprise/DESIGN.md +0 -71
  242. package/dist/designer/data/systems/enterprise/components.html +0 -154
  243. package/dist/designer/data/systems/enterprise/tokens.css +0 -63
  244. package/dist/designer/data/systems/expo/DESIGN.md +0 -284
  245. package/dist/designer/data/systems/expo/components.html +0 -342
  246. package/dist/designer/data/systems/expo/tokens.css +0 -64
  247. package/dist/designer/data/systems/expressive/DESIGN.md +0 -71
  248. package/dist/designer/data/systems/expressive/components.html +0 -136
  249. package/dist/designer/data/systems/expressive/tokens.css +0 -63
  250. package/dist/designer/data/systems/fantasy/DESIGN.md +0 -71
  251. package/dist/designer/data/systems/fantasy/components.html +0 -136
  252. package/dist/designer/data/systems/fantasy/tokens.css +0 -63
  253. package/dist/designer/data/systems/ferrari/DESIGN.md +0 -317
  254. package/dist/designer/data/systems/ferrari/components.html +0 -342
  255. package/dist/designer/data/systems/ferrari/tokens.css +0 -64
  256. package/dist/designer/data/systems/figma/DESIGN.md +0 -223
  257. package/dist/designer/data/systems/figma/components.html +0 -344
  258. package/dist/designer/data/systems/figma/tokens.css +0 -126
  259. package/dist/designer/data/systems/flat/DESIGN.md +0 -71
  260. package/dist/designer/data/systems/flat/components.html +0 -136
  261. package/dist/designer/data/systems/flat/tokens.css +0 -63
  262. package/dist/designer/data/systems/framer/DESIGN.md +0 -249
  263. package/dist/designer/data/systems/framer/components.html +0 -438
  264. package/dist/designer/data/systems/framer/tokens.css +0 -238
  265. package/dist/designer/data/systems/friendly/DESIGN.md +0 -71
  266. package/dist/designer/data/systems/friendly/components.html +0 -136
  267. package/dist/designer/data/systems/friendly/tokens.css +0 -63
  268. package/dist/designer/data/systems/futuristic/DESIGN.md +0 -71
  269. package/dist/designer/data/systems/futuristic/components.html +0 -136
  270. package/dist/designer/data/systems/futuristic/tokens.css +0 -63
  271. package/dist/designer/data/systems/github/DESIGN.md +0 -155
  272. package/dist/designer/data/systems/github/components.html +0 -383
  273. package/dist/designer/data/systems/github/tokens.css +0 -125
  274. package/dist/designer/data/systems/glassmorphism/DESIGN.md +0 -71
  275. package/dist/designer/data/systems/glassmorphism/components.html +0 -154
  276. package/dist/designer/data/systems/glassmorphism/tokens.css +0 -63
  277. package/dist/designer/data/systems/gradient/DESIGN.md +0 -71
  278. package/dist/designer/data/systems/gradient/components.html +0 -154
  279. package/dist/designer/data/systems/gradient/tokens.css +0 -63
  280. package/dist/designer/data/systems/hashicorp/DESIGN.md +0 -281
  281. package/dist/designer/data/systems/hashicorp/components.html +0 -502
  282. package/dist/designer/data/systems/hashicorp/tokens.css +0 -272
  283. package/dist/designer/data/systems/hud/DESIGN.md +0 -173
  284. package/dist/designer/data/systems/hud/components.html +0 -136
  285. package/dist/designer/data/systems/hud/tokens.css +0 -63
  286. package/dist/designer/data/systems/huggingface/DESIGN.md +0 -149
  287. package/dist/designer/data/systems/huggingface/components.html +0 -346
  288. package/dist/designer/data/systems/huggingface/tokens.css +0 -125
  289. package/dist/designer/data/systems/ibm/DESIGN.md +0 -335
  290. package/dist/designer/data/systems/ibm/components.html +0 -342
  291. package/dist/designer/data/systems/ibm/tokens.css +0 -64
  292. package/dist/designer/data/systems/intercom/DESIGN.md +0 -149
  293. package/dist/designer/data/systems/intercom/components.html +0 -557
  294. package/dist/designer/data/systems/intercom/tokens.css +0 -150
  295. package/dist/designer/data/systems/kami/DESIGN.md +0 -410
  296. package/dist/designer/data/systems/kami/components.html +0 -601
  297. package/dist/designer/data/systems/kami/tokens.css +0 -272
  298. package/dist/designer/data/systems/kraken/DESIGN.md +0 -128
  299. package/dist/designer/data/systems/kraken/components.html +0 -342
  300. package/dist/designer/data/systems/kraken/tokens.css +0 -64
  301. package/dist/designer/data/systems/lamborghini/DESIGN.md +0 -291
  302. package/dist/designer/data/systems/lamborghini/components.html +0 -342
  303. package/dist/designer/data/systems/lamborghini/tokens.css +0 -64
  304. package/dist/designer/data/systems/levels/DESIGN.md +0 -71
  305. package/dist/designer/data/systems/levels/components.html +0 -154
  306. package/dist/designer/data/systems/levels/tokens.css +0 -63
  307. package/dist/designer/data/systems/linear-app/DESIGN.md +0 -370
  308. package/dist/designer/data/systems/linear-app/components.html +0 -370
  309. package/dist/designer/data/systems/linear-app/tokens.css +0 -130
  310. package/dist/designer/data/systems/lingo/DESIGN.md +0 -71
  311. package/dist/designer/data/systems/lingo/components.html +0 -154
  312. package/dist/designer/data/systems/lingo/tokens.css +0 -63
  313. package/dist/designer/data/systems/loom/DESIGN.md +0 -201
  314. package/dist/designer/data/systems/loom/components.html +0 -446
  315. package/dist/designer/data/systems/loom/tokens.css +0 -138
  316. package/dist/designer/data/systems/lovable/DESIGN.md +0 -301
  317. package/dist/designer/data/systems/lovable/components.html +0 -441
  318. package/dist/designer/data/systems/lovable/tokens.css +0 -258
  319. package/dist/designer/data/systems/luxury/DESIGN.md +0 -71
  320. package/dist/designer/data/systems/luxury/components.html +0 -154
  321. package/dist/designer/data/systems/luxury/tokens.css +0 -63
  322. package/dist/designer/data/systems/mastercard/DESIGN.md +0 -368
  323. package/dist/designer/data/systems/mastercard/components.html +0 -342
  324. package/dist/designer/data/systems/mastercard/tokens.css +0 -64
  325. package/dist/designer/data/systems/material/DESIGN.md +0 -71
  326. package/dist/designer/data/systems/material/components.html +0 -154
  327. package/dist/designer/data/systems/material/tokens.css +0 -63
  328. package/dist/designer/data/systems/meta/DESIGN.md +0 -369
  329. package/dist/designer/data/systems/meta/components.html +0 -398
  330. package/dist/designer/data/systems/meta/tokens.css +0 -263
  331. package/dist/designer/data/systems/minimal/DESIGN.md +0 -71
  332. package/dist/designer/data/systems/minimal/components.html +0 -154
  333. package/dist/designer/data/systems/minimal/tokens.css +0 -63
  334. package/dist/designer/data/systems/minimax/DESIGN.md +0 -260
  335. package/dist/designer/data/systems/minimax/components.html +0 -590
  336. package/dist/designer/data/systems/minimax/tokens.css +0 -148
  337. package/dist/designer/data/systems/mintlify/DESIGN.md +0 -329
  338. package/dist/designer/data/systems/mintlify/components.html +0 -737
  339. package/dist/designer/data/systems/mintlify/tokens.css +0 -256
  340. package/dist/designer/data/systems/miro/DESIGN.md +0 -111
  341. package/dist/designer/data/systems/miro/components.html +0 -342
  342. package/dist/designer/data/systems/miro/tokens.css +0 -64
  343. package/dist/designer/data/systems/mission-control/DESIGN.md +0 -474
  344. package/dist/designer/data/systems/mission-control/components.html +0 -136
  345. package/dist/designer/data/systems/mission-control/tokens.css +0 -63
  346. package/dist/designer/data/systems/mistral-ai/DESIGN.md +0 -264
  347. package/dist/designer/data/systems/mistral-ai/components.html +0 -338
  348. package/dist/designer/data/systems/mistral-ai/tokens.css +0 -125
  349. package/dist/designer/data/systems/modern/DESIGN.md +0 -71
  350. package/dist/designer/data/systems/modern/components.html +0 -154
  351. package/dist/designer/data/systems/modern/tokens.css +0 -63
  352. package/dist/designer/data/systems/mongodb/DESIGN.md +0 -269
  353. package/dist/designer/data/systems/mongodb/components.html +0 -462
  354. package/dist/designer/data/systems/mongodb/tokens.css +0 -176
  355. package/dist/designer/data/systems/mono/DESIGN.md +0 -71
  356. package/dist/designer/data/systems/mono/components.html +0 -136
  357. package/dist/designer/data/systems/mono/tokens.css +0 -63
  358. package/dist/designer/data/systems/neobrutalism/DESIGN.md +0 -71
  359. package/dist/designer/data/systems/neobrutalism/components.html +0 -136
  360. package/dist/designer/data/systems/neobrutalism/tokens.css +0 -63
  361. package/dist/designer/data/systems/neon/DESIGN.md +0 -71
  362. package/dist/designer/data/systems/neon/components.html +0 -136
  363. package/dist/designer/data/systems/neon/tokens.css +0 -63
  364. package/dist/designer/data/systems/neumorphism/DESIGN.md +0 -71
  365. package/dist/designer/data/systems/neumorphism/components.html +0 -136
  366. package/dist/designer/data/systems/neumorphism/tokens.css +0 -63
  367. package/dist/designer/data/systems/nike/DESIGN.md +0 -366
  368. package/dist/designer/data/systems/nike/components.html +0 -512
  369. package/dist/designer/data/systems/nike/tokens.css +0 -304
  370. package/dist/designer/data/systems/notion/DESIGN.md +0 -312
  371. package/dist/designer/data/systems/notion/components.html +0 -413
  372. package/dist/designer/data/systems/notion/tokens.css +0 -130
  373. package/dist/designer/data/systems/nvidia/DESIGN.md +0 -296
  374. package/dist/designer/data/systems/nvidia/components.html +0 -414
  375. package/dist/designer/data/systems/nvidia/tokens.css +0 -133
  376. package/dist/designer/data/systems/ollama/DESIGN.md +0 -270
  377. package/dist/designer/data/systems/ollama/components.html +0 -700
  378. package/dist/designer/data/systems/ollama/tokens.css +0 -242
  379. package/dist/designer/data/systems/openai/DESIGN.md +0 -140
  380. package/dist/designer/data/systems/openai/components.html +0 -382
  381. package/dist/designer/data/systems/openai/tokens.css +0 -133
  382. package/dist/designer/data/systems/opencode-ai/DESIGN.md +0 -284
  383. package/dist/designer/data/systems/opencode-ai/components.html +0 -389
  384. package/dist/designer/data/systems/opencode-ai/tokens.css +0 -126
  385. package/dist/designer/data/systems/pacman/DESIGN.md +0 -71
  386. package/dist/designer/data/systems/pacman/components.html +0 -342
  387. package/dist/designer/data/systems/pacman/tokens.css +0 -64
  388. package/dist/designer/data/systems/paper/DESIGN.md +0 -71
  389. package/dist/designer/data/systems/paper/components.html +0 -136
  390. package/dist/designer/data/systems/paper/tokens.css +0 -63
  391. package/dist/designer/data/systems/perplexity/DESIGN.md +0 -286
  392. package/dist/designer/data/systems/perplexity/components.html +0 -455
  393. package/dist/designer/data/systems/perplexity/tokens.css +0 -151
  394. package/dist/designer/data/systems/perspective/DESIGN.md +0 -71
  395. package/dist/designer/data/systems/perspective/components.html +0 -136
  396. package/dist/designer/data/systems/perspective/tokens.css +0 -63
  397. package/dist/designer/data/systems/pinterest/DESIGN.md +0 -233
  398. package/dist/designer/data/systems/pinterest/components.html +0 -865
  399. package/dist/designer/data/systems/pinterest/tokens.css +0 -262
  400. package/dist/designer/data/systems/playstation/DESIGN.md +0 -367
  401. package/dist/designer/data/systems/playstation/components.html +0 -414
  402. package/dist/designer/data/systems/playstation/tokens.css +0 -150
  403. package/dist/designer/data/systems/posthog/DESIGN.md +0 -259
  404. package/dist/designer/data/systems/posthog/components.html +0 -827
  405. package/dist/designer/data/systems/posthog/tokens.css +0 -272
  406. package/dist/designer/data/systems/premium/DESIGN.md +0 -71
  407. package/dist/designer/data/systems/premium/components.html +0 -154
  408. package/dist/designer/data/systems/premium/tokens.css +0 -63
  409. package/dist/designer/data/systems/professional/DESIGN.md +0 -71
  410. package/dist/designer/data/systems/professional/components.html +0 -136
  411. package/dist/designer/data/systems/professional/tokens.css +0 -63
  412. package/dist/designer/data/systems/publication/DESIGN.md +0 -71
  413. package/dist/designer/data/systems/publication/components.html +0 -154
  414. package/dist/designer/data/systems/publication/tokens.css +0 -63
  415. package/dist/designer/data/systems/raycast/DESIGN.md +0 -271
  416. package/dist/designer/data/systems/raycast/components.html +0 -507
  417. package/dist/designer/data/systems/raycast/tokens.css +0 -143
  418. package/dist/designer/data/systems/refined/DESIGN.md +0 -71
  419. package/dist/designer/data/systems/refined/components.html +0 -136
  420. package/dist/designer/data/systems/refined/tokens.css +0 -63
  421. package/dist/designer/data/systems/renault/DESIGN.md +0 -314
  422. package/dist/designer/data/systems/renault/components.html +0 -154
  423. package/dist/designer/data/systems/renault/tokens.css +0 -63
  424. package/dist/designer/data/systems/replicate/DESIGN.md +0 -264
  425. package/dist/designer/data/systems/replicate/components.html +0 -340
  426. package/dist/designer/data/systems/replicate/tokens.css +0 -125
  427. package/dist/designer/data/systems/resend/DESIGN.md +0 -306
  428. package/dist/designer/data/systems/resend/components.html +0 -839
  429. package/dist/designer/data/systems/resend/tokens.css +0 -353
  430. package/dist/designer/data/systems/retro/DESIGN.md +0 -71
  431. package/dist/designer/data/systems/retro/components.html +0 -136
  432. package/dist/designer/data/systems/retro/tokens.css +0 -63
  433. package/dist/designer/data/systems/revolut/DESIGN.md +0 -188
  434. package/dist/designer/data/systems/revolut/components.html +0 -342
  435. package/dist/designer/data/systems/revolut/tokens.css +0 -64
  436. package/dist/designer/data/systems/runwayml/DESIGN.md +0 -247
  437. package/dist/designer/data/systems/runwayml/components.html +0 -638
  438. package/dist/designer/data/systems/runwayml/tokens.css +0 -204
  439. package/dist/designer/data/systems/sanity/DESIGN.md +0 -360
  440. package/dist/designer/data/systems/sanity/components.html +0 -342
  441. package/dist/designer/data/systems/sanity/tokens.css +0 -64
  442. package/dist/designer/data/systems/sentry/DESIGN.md +0 -265
  443. package/dist/designer/data/systems/sentry/components.html +0 -387
  444. package/dist/designer/data/systems/sentry/tokens.css +0 -219
  445. package/dist/designer/data/systems/shadcn/DESIGN.md +0 -71
  446. package/dist/designer/data/systems/shadcn/components.html +0 -732
  447. package/dist/designer/data/systems/shadcn/tokens.css +0 -255
  448. package/dist/designer/data/systems/shopify/DESIGN.md +0 -353
  449. package/dist/designer/data/systems/shopify/components.html +0 -342
  450. package/dist/designer/data/systems/shopify/tokens.css +0 -141
  451. package/dist/designer/data/systems/simple/DESIGN.md +0 -71
  452. package/dist/designer/data/systems/simple/components.html +0 -136
  453. package/dist/designer/data/systems/simple/tokens.css +0 -63
  454. package/dist/designer/data/systems/skeumorphism/DESIGN.md +0 -71
  455. package/dist/designer/data/systems/skeumorphism/components.html +0 -136
  456. package/dist/designer/data/systems/skeumorphism/tokens.css +0 -63
  457. package/dist/designer/data/systems/slack/DESIGN.md +0 -363
  458. package/dist/designer/data/systems/slack/components.html +0 -387
  459. package/dist/designer/data/systems/slack/tokens.css +0 -127
  460. package/dist/designer/data/systems/sleek/DESIGN.md +0 -71
  461. package/dist/designer/data/systems/sleek/components.html +0 -136
  462. package/dist/designer/data/systems/sleek/tokens.css +0 -63
  463. package/dist/designer/data/systems/spacex/DESIGN.md +0 -197
  464. package/dist/designer/data/systems/spacex/components.html +0 -496
  465. package/dist/designer/data/systems/spacex/tokens.css +0 -154
  466. package/dist/designer/data/systems/spacious/DESIGN.md +0 -71
  467. package/dist/designer/data/systems/spacious/components.html +0 -136
  468. package/dist/designer/data/systems/spacious/tokens.css +0 -63
  469. package/dist/designer/data/systems/spotify/DESIGN.md +0 -249
  470. package/dist/designer/data/systems/spotify/components.html +0 -365
  471. package/dist/designer/data/systems/spotify/tokens.css +0 -127
  472. package/dist/designer/data/systems/starbucks/DESIGN.md +0 -583
  473. package/dist/designer/data/systems/starbucks/components.html +0 -493
  474. package/dist/designer/data/systems/starbucks/tokens.css +0 -182
  475. package/dist/designer/data/systems/storytelling/DESIGN.md +0 -71
  476. package/dist/designer/data/systems/storytelling/components.html +0 -136
  477. package/dist/designer/data/systems/storytelling/tokens.css +0 -63
  478. package/dist/designer/data/systems/stripe/DESIGN.md +0 -325
  479. package/dist/designer/data/systems/stripe/components.html +0 -1018
  480. package/dist/designer/data/systems/stripe/tokens.css +0 -295
  481. package/dist/designer/data/systems/supabase/DESIGN.md +0 -258
  482. package/dist/designer/data/systems/supabase/components.html +0 -741
  483. package/dist/designer/data/systems/supabase/tokens.css +0 -294
  484. package/dist/designer/data/systems/superhuman/DESIGN.md +0 -255
  485. package/dist/designer/data/systems/superhuman/components.html +0 -537
  486. package/dist/designer/data/systems/superhuman/tokens.css +0 -160
  487. package/dist/designer/data/systems/tesla/DESIGN.md +0 -289
  488. package/dist/designer/data/systems/tesla/components.html +0 -724
  489. package/dist/designer/data/systems/tesla/tokens.css +0 -285
  490. package/dist/designer/data/systems/tetris/DESIGN.md +0 -71
  491. package/dist/designer/data/systems/tetris/components.html +0 -342
  492. package/dist/designer/data/systems/tetris/tokens.css +0 -64
  493. package/dist/designer/data/systems/theverge/DESIGN.md +0 -342
  494. package/dist/designer/data/systems/theverge/components.html +0 -342
  495. package/dist/designer/data/systems/theverge/tokens.css +0 -64
  496. package/dist/designer/data/systems/together-ai/DESIGN.md +0 -266
  497. package/dist/designer/data/systems/together-ai/components.html +0 -422
  498. package/dist/designer/data/systems/together-ai/tokens.css +0 -127
  499. package/dist/designer/data/systems/totality-festival/DESIGN.md +0 -206
  500. package/dist/designer/data/systems/totality-festival/components.html +0 -136
  501. package/dist/designer/data/systems/totality-festival/tokens.css +0 -63
  502. package/dist/designer/data/systems/trading-terminal/DESIGN.md +0 -178
  503. package/dist/designer/data/systems/trading-terminal/components.html +0 -154
  504. package/dist/designer/data/systems/trading-terminal/tokens.css +0 -63
  505. package/dist/designer/data/systems/uber/DESIGN.md +0 -298
  506. package/dist/designer/data/systems/uber/components.html +0 -347
  507. package/dist/designer/data/systems/uber/tokens.css +0 -131
  508. package/dist/designer/data/systems/urdu/DESIGN.md +0 -1002
  509. package/dist/designer/data/systems/urdu/components.html +0 -136
  510. package/dist/designer/data/systems/urdu/tokens.css +0 -63
  511. package/dist/designer/data/systems/vercel/DESIGN.md +0 -313
  512. package/dist/designer/data/systems/vercel/components.html +0 -839
  513. package/dist/designer/data/systems/vercel/tokens.css +0 -270
  514. package/dist/designer/data/systems/vibrant/DESIGN.md +0 -71
  515. package/dist/designer/data/systems/vibrant/components.html +0 -136
  516. package/dist/designer/data/systems/vibrant/tokens.css +0 -63
  517. package/dist/designer/data/systems/vintage/DESIGN.md +0 -71
  518. package/dist/designer/data/systems/vintage/components.html +0 -136
  519. package/dist/designer/data/systems/vintage/tokens.css +0 -63
  520. package/dist/designer/data/systems/vodafone/DESIGN.md +0 -426
  521. package/dist/designer/data/systems/vodafone/components.html +0 -342
  522. package/dist/designer/data/systems/vodafone/tokens.css +0 -64
  523. package/dist/designer/data/systems/voltagent/DESIGN.md +0 -326
  524. package/dist/designer/data/systems/voltagent/components.html +0 -154
  525. package/dist/designer/data/systems/voltagent/tokens.css +0 -63
  526. package/dist/designer/data/systems/warm-editorial/DESIGN.md +0 -65
  527. package/dist/designer/data/systems/warm-editorial/components.html +0 -136
  528. package/dist/designer/data/systems/warm-editorial/tokens.css +0 -63
  529. package/dist/designer/data/systems/warp/DESIGN.md +0 -256
  530. package/dist/designer/data/systems/warp/components.html +0 -411
  531. package/dist/designer/data/systems/warp/tokens.css +0 -156
  532. package/dist/designer/data/systems/webex/DESIGN.md +0 -207
  533. package/dist/designer/data/systems/webex/components.html +0 -342
  534. package/dist/designer/data/systems/webex/tokens.css +0 -64
  535. package/dist/designer/data/systems/webflow/DESIGN.md +0 -95
  536. package/dist/designer/data/systems/webflow/components.html +0 -413
  537. package/dist/designer/data/systems/webflow/tokens.css +0 -191
  538. package/dist/designer/data/systems/wechat/DESIGN.md +0 -302
  539. package/dist/designer/data/systems/wechat/components.html +0 -507
  540. package/dist/designer/data/systems/wechat/tokens.css +0 -176
  541. package/dist/designer/data/systems/wired/DESIGN.md +0 -281
  542. package/dist/designer/data/systems/wired/components.html +0 -342
  543. package/dist/designer/data/systems/wired/tokens.css +0 -64
  544. package/dist/designer/data/systems/wise/DESIGN.md +0 -176
  545. package/dist/designer/data/systems/wise/components.html +0 -365
  546. package/dist/designer/data/systems/wise/tokens.css +0 -141
  547. package/dist/designer/data/systems/x-ai/DESIGN.md +0 -260
  548. package/dist/designer/data/systems/x-ai/components.html +0 -460
  549. package/dist/designer/data/systems/x-ai/tokens.css +0 -268
  550. package/dist/designer/data/systems/xiaohongshu/DESIGN.md +0 -402
  551. package/dist/designer/data/systems/xiaohongshu/components.html +0 -865
  552. package/dist/designer/data/systems/xiaohongshu/tokens.css +0 -193
  553. package/dist/designer/data/systems/zapier/DESIGN.md +0 -331
  554. package/dist/designer/data/systems/zapier/components.html +0 -342
  555. package/dist/designer/data/systems/zapier/tokens.css +0 -64
  556. package/dist/designer/guidelines.d.ts +0 -23
  557. package/dist/designer/guidelines.d.ts.map +0 -1
  558. package/dist/designer/guidelines.js +0 -176
  559. package/dist/designer/philosophies.d.ts +0 -33
  560. package/dist/designer/philosophies.d.ts.map +0 -1
  561. package/dist/designer/philosophies.js +0 -668
  562. package/dist/designer/skills.d.ts +0 -21
  563. package/dist/designer/skills.d.ts.map +0 -1
  564. package/dist/designer/skills.js +0 -34
  565. package/dist/designer/systems.d.ts +0 -36
  566. package/dist/designer/systems.d.ts.map +0 -1
  567. package/dist/designer/systems.js +0 -221
package/dist/designer/data/systems/stripe/components.html DELETED
@@ -1,1018 +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>Inspired by Stripe — reference components</title>
7
- <meta
8
- name="description"
9
- content="Reference fixture for design-systems/stripe. Every visible
10
- value comes from tokens.css; the page itself follows Stripe's
11
- rules — sohne-var with ss01 globally, weight 300 at display
12
- sizes, deep navy (#061b31) headings instead of black, blue-
13
- tinted multi-layer shadows on elevated surfaces, conservative
14
- 4-8px radius, and Stripe Purple capped at ≤2 visible uses
15
- per screen."
16
- />
17
-
18
- <style>
19
- /* :root paste — sourced verbatim from
20
- design-systems/stripe/tokens.css. Keep this block in sync
21
- when tokens.css changes. The agent prompt instructs the
22
- Designer panelist to paste this block as the FIRST thing in
23
- their <style>, then reference everything below via var(...). */
24
- :root {
25
- --bg: #ffffff;
26
- --surface: #ffffff;
27
- --surface-warm: #f6f9fc;
28
-
29
- --fg: #061b31;
30
- --fg-2: #273951;
31
- --muted: #64748d;
32
- --meta: var(--muted);
33
-
34
- --border: #e5edf5;
35
- --border-soft: var(--border);
36
-
37
- --accent: #533afd;
38
- --accent-on: #ffffff;
39
-
40
- --accent-hover: #4434d4;
41
- --accent-active: #2e2b8c;
42
-
43
- --success: #15be53;
44
- --warn: #9b6829;
45
- --danger: #ea2261;
46
-
47
- --font-display:
48
- "sohne-var", "Söhne", "Sohne",
49
- "SF Pro Display", -apple-system, BlinkMacSystemFont,
50
- system-ui, "Helvetica Neue", Arial, sans-serif;
51
- --font-body:
52
- "sohne-var", "Söhne", "Sohne",
53
- "SF Pro Display", -apple-system, BlinkMacSystemFont,
54
- system-ui, "Helvetica Neue", Arial, sans-serif;
55
- --font-mono:
56
- "SourceCodePro", "Source Code Pro",
57
- ui-monospace, "SF Mono", "JetBrains Mono",
58
- Menlo, Monaco, Consolas, monospace;
59
-
60
- --text-xs: 12px;
61
- --text-sm: 14px;
62
- --text-base: 16px;
63
- --text-lg: 18px;
64
- --text-xl: 22px;
65
- --text-2xl: 32px;
66
- --text-3xl: 48px;
67
- --text-4xl: 56px;
68
-
69
- --leading-body: 1.40;
70
- --leading-tight: 1.10;
71
- --tracking-display: -0.02em;
72
-
73
- --space-1: 4px;
74
- --space-2: 8px;
75
- --space-3: 12px;
76
- --space-4: 16px;
77
- --space-5: 20px;
78
- --space-6: 24px;
79
- --space-8: 32px;
80
- --space-12: 48px;
81
-
82
- --section-y-desktop: 96px;
83
- --section-y-tablet: 64px;
84
- --section-y-phone: 40px;
85
-
86
- --radius-sm: 4px;
87
- --radius-md: 6px;
88
- --radius-lg: 8px;
89
- --radius-pill: 9999px;
90
-
91
- --elev-flat: none;
92
- --elev-ring: 0 0 0 1px var(--border);
93
- --elev-raised:
94
- rgba(50, 50, 93, 0.25) 0px 30px 45px -30px,
95
- rgba(0, 0, 0, 0.10) 0px 18px 36px -18px;
96
-
97
- --focus-ring:
98
- 0 0 0 2px var(--accent),
99
- 0 0 0 5px color-mix(in oklab, var(--accent), transparent 75%);
100
-
101
- --motion-fast: 150ms;
102
- --motion-base: 200ms;
103
- --ease-standard: cubic-bezier(0.2, 0, 0, 1);
104
-
105
- --container-max: 1080px;
106
- --container-gutter-desktop: 32px;
107
- --container-gutter-tablet: 24px;
108
- --container-gutter-phone: 16px;
109
- }
110
-
111
- /* ─── Reset (minimal) ───────────────────────────────────────── */
112
- *, *::before, *::after { box-sizing: border-box; }
113
- html, body { margin: 0; padding: 0; }
114
- body {
115
- background: var(--bg);
116
- color: var(--fg);
117
- font-family: var(--font-body);
118
- font-size: var(--text-base);
119
- font-weight: 300; /* Stripe's signature: 300 is body weight */
120
- line-height: var(--leading-body);
121
- /* `"ss01"` is non-negotiable on every sohne-var element
122
- (DESIGN.md §3 Principles). Inheriting from <body> applies
123
- it to every descendant by default; specific components
124
- that need `tnum` for financial tables override locally. */
125
- font-feature-settings: "ss01";
126
- -webkit-font-smoothing: antialiased;
127
- }
128
- strong { font-weight: 400; } /* never 600/700 in sohne-var per DESIGN.md §7 */
129
-
130
- /* ─── Layout primitives ─────────────────────────────────────── */
131
- .container {
132
- max-width: var(--container-max);
133
- margin-inline: auto;
134
- padding-inline: var(--container-gutter-desktop);
135
- }
136
- section {
137
- padding-block: var(--section-y-desktop);
138
- }
139
- section + section {
140
- border-top: 1px solid var(--border);
141
- }
142
- @media (max-width: 1023px) {
143
- .container { padding-inline: var(--container-gutter-tablet); }
144
- section { padding-block: var(--section-y-tablet); }
145
- }
146
- @media (max-width: 639px) {
147
- .container { padding-inline: var(--container-gutter-phone); }
148
- section { padding-block: var(--section-y-phone); }
149
- }
150
-
151
- /* ─── Typography ────────────────────────────────────────────── */
152
- h1, h2, h3 {
153
- font-family: var(--font-display);
154
- font-weight: 300; /* Stripe's anti-convention signature */
155
- line-height: var(--leading-tight);
156
- letter-spacing: var(--tracking-display);
157
- color: var(--fg);
158
- margin: 0;
159
- }
160
- h1 {
161
- font-size: var(--text-4xl);
162
- line-height: 1.03; /* DESIGN.md §3: display hero ratio */
163
- letter-spacing: -0.025em; /* exact -1.4px at 56px */
164
- }
165
- h2 {
166
- font-size: var(--text-2xl);
167
- }
168
- h3 {
169
- font-size: var(--text-xl);
170
- letter-spacing: -0.01em; /* relaxed at 22px per DESIGN.md §3 */
171
- }
172
- p { margin: 0; }
173
-
174
- .lede {
175
- font-size: var(--text-lg);
176
- line-height: var(--leading-body);
177
- color: var(--muted);
178
- max-width: 56ch;
179
- }
180
- .body-muted { color: var(--muted); }
181
- .body-meta { color: var(--meta); font-size: var(--text-sm); }
182
- .body-sm { font-size: var(--text-sm); }
183
-
184
- /* `.eyebrow` is the only place uppercase + tracking is used —
185
- small label, deep-navy on lavender wash. tracking is well
186
- above the craft 0.06em floor. */
187
- .eyebrow {
188
- display: inline-block;
189
- font-size: var(--text-xs);
190
- font-weight: 400;
191
- line-height: 1;
192
- color: var(--accent);
193
- text-transform: uppercase;
194
- letter-spacing: 0.08em;
195
- }
196
-
197
- .stack-3 > * + * { margin-block-start: var(--space-3); }
198
- .stack-4 > * + * { margin-block-start: var(--space-4); }
199
- .stack-6 > * + * { margin-block-start: var(--space-6); }
200
- .stack-8 > * + * { margin-block-start: var(--space-8); }
201
-
202
- /* ─── Buttons ───────────────────────────────────────────────
203
- * Stripe buttons are conservative — 4px radius, 8/16 padding,
204
- * weight-400 sohne-var with ss01. Hover shifts background
205
- * colour; never transforms. Primary uses --accent / --accent-on;
206
- * ghost uses the brand purple as text colour against a
207
- * transparent shell with a purple-tinted border. */
208
- .btn {
209
- display: inline-flex;
210
- align-items: center;
211
- gap: var(--space-2);
212
- padding: 8px 16px;
213
- border-radius: var(--radius-sm);
214
- font-family: var(--font-display);
215
- font-feature-settings: "ss01";
216
- font-weight: 400;
217
- font-size: var(--text-base);
218
- line-height: 1;
219
- cursor: pointer;
220
- border: 1px solid transparent;
221
- background: transparent;
222
- color: var(--fg);
223
- text-decoration: none;
224
- transition:
225
- background-color var(--motion-fast) var(--ease-standard),
226
- border-color var(--motion-fast) var(--ease-standard),
227
- color var(--motion-fast) var(--ease-standard),
228
- box-shadow var(--motion-fast) var(--ease-standard);
229
- }
230
- .btn:focus-visible {
231
- outline: none;
232
- box-shadow: var(--focus-ring);
233
- }
234
- .btn-primary {
235
- background: var(--accent);
236
- color: var(--accent-on);
237
- }
238
- .btn-primary:hover { background: var(--accent-hover); }
239
- .btn-primary:active { background: var(--accent-active); }
240
-
241
- /* Ghost / outlined — DESIGN.md §4 spec verbatim.
242
- The hover wash is the only place we tint --accent with
243
- transparency inline; it's a once-per-page rule rather than
244
- a cross-component pattern, so it stays inline rather than
245
- being promoted to a token. */
246
- .btn-ghost {
247
- background: transparent;
248
- color: var(--accent);
249
- border-color: color-mix(in oklab, var(--accent), white 65%);
250
- }
251
- .btn-ghost:hover {
252
- background: color-mix(in oklab, var(--accent), transparent 95%);
253
- border-color: color-mix(in oklab, var(--accent), white 55%);
254
- }
255
-
256
- /* Compact button for nav and toolbar — 14px / 4px radius */
257
- .btn-sm {
258
- padding: 6px 12px;
259
- font-size: var(--text-sm);
260
- }
261
-
262
- /* ─── Inputs ────────────────────────────────────────────── */
263
- .field {
264
- display: flex;
265
- flex-direction: column;
266
- gap: var(--space-2);
267
- }
268
- .field label {
269
- font-size: var(--text-sm);
270
- font-weight: 400;
271
- color: var(--fg-2); /* dark-slate label per DESIGN.md §4 */
272
- }
273
- .field input,
274
- .field select,
275
- .field textarea {
276
- padding: 10px 12px;
277
- border-radius: var(--radius-sm);
278
- border: 1px solid var(--border);
279
- background: var(--surface);
280
- color: var(--fg);
281
- font-family: inherit;
282
- font-feature-settings: "ss01";
283
- font-size: var(--text-base);
284
- font-weight: 300;
285
- line-height: 1.4;
286
- outline: none;
287
- transition:
288
- border-color var(--motion-fast) var(--ease-standard),
289
- box-shadow var(--motion-fast) var(--ease-standard);
290
- }
291
- .field input:focus-visible,
292
- .field select:focus-visible,
293
- .field textarea:focus-visible {
294
- border-color: var(--accent);
295
- box-shadow: var(--focus-ring);
296
- }
297
- .field input::placeholder { color: var(--muted); }
298
- .field-help {
299
- font-size: var(--text-xs);
300
- color: var(--muted);
301
- }
302
-
303
- /* ─── Cards ─────────────────────────────────────────────────
304
- * Two card flavours:
305
- * .card hairline border, no shadow — for grids and
306
- * form panels where the border IS the edge.
307
- * .card-elevated no border, blue-tinted multi-layer shadow —
308
- * for featured / hero cards where Stripe's
309
- * trademark elevation does the work.
310
- * Both share radius and padding. Hover on .card-elevated
311
- * intensifies the shadow; .card stays static (border doesn't
312
- * pulse). */
313
- .card {
314
- background: var(--surface);
315
- border: 1px solid var(--border);
316
- border-radius: var(--radius-md);
317
- padding: var(--space-6);
318
- display: flex;
319
- flex-direction: column;
320
- gap: var(--space-3);
321
- }
322
- .card-elevated {
323
- background: var(--surface);
324
- border-radius: var(--radius-lg);
325
- padding: var(--space-8);
326
- display: flex;
327
- flex-direction: column;
328
- gap: var(--space-4);
329
- box-shadow: var(--elev-raised);
330
- transition: box-shadow var(--motion-base) var(--ease-standard);
331
- }
332
- .card-elevated:hover {
333
- /* Intensify the near layer; far stays the same so the lift
334
- reads as "drawing closer", not "growing larger". */
335
- box-shadow:
336
- rgba(50, 50, 93, 0.25) 0px 30px 45px -30px,
337
- rgba(0, 0, 0, 0.14) 0px 24px 48px -16px;
338
- }
339
- .card-title {
340
- font-family: var(--font-display);
341
- font-feature-settings: "ss01";
342
- font-weight: 300;
343
- font-size: var(--text-xl);
344
- line-height: 1.12;
345
- letter-spacing: -0.01em;
346
- color: var(--fg);
347
- }
348
-
349
- /* ─── Badges ────────────────────────────────────────────────
350
- * Success badge per DESIGN.md §4. Pill radius is wrong here —
351
- * Stripe uses 4px on badges, never 9999px. */
352
- .badge {
353
- display: inline-flex;
354
- align-items: center;
355
- gap: 6px;
356
- padding: 1px 6px;
357
- border-radius: var(--radius-sm);
358
- font-size: var(--text-xs);
359
- font-weight: 300;
360
- line-height: 1.6;
361
- font-feature-settings: "ss01";
362
- }
363
- .badge-success {
364
- color: var(--success);
365
- background: color-mix(in oklab, var(--success), transparent 80%);
366
- border: 1px solid
367
- color-mix(in oklab, var(--success), transparent 60%);
368
- }
369
- .badge-muted {
370
- color: var(--muted);
371
- background: var(--surface-warm);
372
- border: 1px solid var(--border);
373
- }
374
- .badge-accent {
375
- color: var(--accent);
376
- background: color-mix(in oklab, var(--accent), white 88%);
377
- border: 1px solid
378
- color-mix(in oklab, var(--accent), white 70%);
379
- }
380
- .badge-dot {
381
- width: 6px;
382
- height: 6px;
383
- border-radius: 50%;
384
- background: currentColor;
385
- }
386
-
387
- /* ─── Links ─────────────────────────────────────────────────
388
- * Default link is Stripe Purple. Underline appears only on
389
- * hover, at a generous offset so the rule reads as a
390
- * deliberate gesture. */
391
- a {
392
- color: var(--accent);
393
- text-decoration: none;
394
- font-feature-settings: "ss01";
395
- }
396
- a:hover {
397
- text-decoration: underline;
398
- text-underline-offset: 3px;
399
- text-decoration-thickness: 1px;
400
- }
401
-
402
- /* ─── Kbd ───────────────────────────────────────────────────
403
- * SourceCodePro at 12px, hairline border, navy text. Stripe's
404
- * kbd is small and dense — no padding inflation. */
405
- kbd {
406
- font-family: var(--font-mono);
407
- font-size: 11px;
408
- font-weight: 500;
409
- padding: 2px 6px;
410
- border-radius: var(--radius-sm);
411
- border: 1px solid var(--border);
412
- background: var(--surface-warm);
413
- color: var(--fg-2);
414
- }
415
-
416
- /* ─── Distinctive brand element: gradient halo ──────────────
417
- * Stripe's signature hero decoration is a soft pastel wash
418
- * behind the headline — built here from the brand purple
419
- * mixed at varying transparencies (no raw hex outside :root).
420
- * The halo sits in a layered radial-gradient and lets the
421
- * navy headline read as "floating in twilight". */
422
- .halo {
423
- position: absolute;
424
- inset: -10% -20% -20% -10%;
425
- pointer-events: none;
426
- background:
427
- radial-gradient(
428
- 60% 50% at 15% 30%,
429
- color-mix(in oklab, var(--accent), transparent 70%) 0%,
430
- color-mix(in oklab, var(--accent), transparent 100%) 65%
431
- ),
432
- radial-gradient(
433
- 45% 40% at 85% 20%,
434
- color-mix(in oklab, var(--danger), transparent 75%) 0%,
435
- color-mix(in oklab, var(--danger), transparent 100%) 70%
436
- ),
437
- radial-gradient(
438
- 55% 45% at 70% 80%,
439
- color-mix(in oklab, var(--accent), transparent 80%) 0%,
440
- color-mix(in oklab, var(--accent), transparent 100%) 70%
441
- );
442
- filter: blur(40px);
443
- z-index: 0;
444
- }
445
-
446
- /* ─── Code block ────────────────────────────────────────────
447
- * DESIGN.md §3: SourceCodePro at 12px / weight 500 / 2.00
448
- * line-height. The 2.00 leading is intentional — Stripe's
449
- * payment-integration snippets need to read like prose, not
450
- * like a terminal dump. */
451
- .code {
452
- background: var(--surface-warm);
453
- border: 1px solid var(--border);
454
- border-radius: var(--radius-md);
455
- padding: var(--space-5);
456
- font-family: var(--font-mono);
457
- font-size: var(--text-xs);
458
- font-weight: 500;
459
- line-height: 2.0;
460
- color: var(--fg);
461
- white-space: pre;
462
- overflow-x: auto;
463
- }
464
- .code .k { color: var(--accent); } /* keyword */
465
- .code .s { color: var(--success); } /* string */
466
- .code .c { color: var(--muted); } /* comment */
467
- .code .n { color: var(--fg-2); } /* identifier */
468
-
469
- /* ─── Metric (tabular financial rendering) ──────────────────
470
- * DESIGN.md §3 "Caption Tabular" — `tnum` for any number in
471
- * a data display so columns of figures align. The values use
472
- * deep navy; the labels use slate. */
473
- .metric {
474
- display: flex;
475
- flex-direction: column;
476
- gap: 4px;
477
- }
478
- .metric-value {
479
- font-family: var(--font-display);
480
- font-feature-settings: "tnum", "ss01";
481
- font-weight: 300;
482
- font-size: var(--text-2xl);
483
- line-height: 1.1;
484
- letter-spacing: -0.01em;
485
- color: var(--fg);
486
- }
487
- .metric-label {
488
- font-size: var(--text-sm);
489
- color: var(--muted);
490
- }
491
-
492
- /* ─── Section-specific layout ───────────────────────────── */
493
- .hero {
494
- position: relative;
495
- overflow: hidden;
496
- }
497
- .hero-inner {
498
- position: relative;
499
- z-index: 1;
500
- display: grid;
501
- grid-template-columns: 1.3fr 1fr;
502
- gap: var(--space-12);
503
- align-items: end;
504
- }
505
- @media (max-width: 1023px) {
506
- .hero-inner { grid-template-columns: 1fr; gap: var(--space-8); }
507
- }
508
- .hero h1 {
509
- max-width: 14ch;
510
- margin: 0;
511
- }
512
- .hero-actions {
513
- display: flex;
514
- gap: var(--space-3);
515
- margin-block-start: var(--space-8);
516
- }
517
-
518
- .features-grid {
519
- display: grid;
520
- grid-template-columns: repeat(3, 1fr);
521
- gap: var(--space-5);
522
- margin-block-start: var(--space-8);
523
- }
524
- @media (max-width: 1023px) {
525
- .features-grid { grid-template-columns: 1fr 1fr; }
526
- }
527
- @media (max-width: 639px) {
528
- .features-grid { grid-template-columns: 1fr; }
529
- }
530
-
531
- /* Pricing-style featured card row — exercises .card-elevated
532
- alongside .card so the elevation contrast is visible. */
533
- .pricing-grid {
534
- display: grid;
535
- grid-template-columns: 1fr 1.1fr 1fr;
536
- gap: var(--space-5);
537
- align-items: stretch;
538
- margin-block-start: var(--space-8);
539
- }
540
- @media (max-width: 1023px) {
541
- .pricing-grid { grid-template-columns: 1fr; }
542
- }
543
- .pricing-price {
544
- font-family: var(--font-display);
545
- font-feature-settings: "tnum", "ss01";
546
- font-weight: 300;
547
- font-size: var(--text-3xl);
548
- line-height: 1.05;
549
- letter-spacing: -0.02em;
550
- color: var(--fg);
551
- }
552
- .pricing-price small {
553
- font-size: var(--text-sm);
554
- color: var(--muted);
555
- margin-inline-start: var(--space-2);
556
- font-feature-settings: "ss01";
557
- }
558
- .pricing-list {
559
- list-style: none;
560
- padding: 0;
561
- margin: 0;
562
- display: flex;
563
- flex-direction: column;
564
- gap: var(--space-2);
565
- }
566
- .pricing-list li {
567
- position: relative;
568
- padding-inline-start: var(--space-5);
569
- font-size: var(--text-sm);
570
- color: var(--fg-2);
571
- line-height: 1.5;
572
- }
573
- .pricing-list li::before {
574
- content: "";
575
- position: absolute;
576
- left: 0;
577
- top: 0.45em;
578
- width: 12px;
579
- height: 7px;
580
- border-left: 1.5px solid var(--accent);
581
- border-bottom: 1.5px solid var(--accent);
582
- transform: rotate(-45deg);
583
- transform-origin: 0 100%;
584
- }
585
-
586
- .metric-row {
587
- display: grid;
588
- grid-template-columns: repeat(4, 1fr);
589
- gap: var(--space-8);
590
- }
591
- @media (max-width: 767px) {
592
- .metric-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
593
- }
594
-
595
- .form-row {
596
- display: grid;
597
- grid-template-columns: 1.2fr 1fr;
598
- gap: var(--space-12);
599
- align-items: start;
600
- }
601
- @media (max-width: 1023px) {
602
- .form-row { grid-template-columns: 1fr; }
603
- }
604
- .form {
605
- display: flex;
606
- flex-direction: column;
607
- gap: var(--space-4);
608
- max-width: 460px;
609
- padding: var(--space-6);
610
- background: var(--surface);
611
- border: 1px solid var(--border);
612
- border-radius: var(--radius-lg);
613
- box-shadow: var(--elev-raised);
614
- }
615
- .form-grid-2 {
616
- display: grid;
617
- grid-template-columns: 1fr 1fr;
618
- gap: var(--space-3);
619
- }
620
- .form-actions {
621
- display: flex;
622
- gap: var(--space-3);
623
- margin-block-start: var(--space-2);
624
- align-items: center;
625
- }
626
-
627
- .icon { width: 14px; height: 14px; flex-shrink: 0; }
628
- .row-between {
629
- display: flex;
630
- align-items: center;
631
- justify-content: space-between;
632
- gap: var(--space-3);
633
- }
634
- </style>
635
- </head>
636
- <body>
637
- <main class="container">
638
- <!-- ════════════════════════════════════════════════════════════
639
- HERO — exercises: gradient .halo (Stripe's signature
640
- pastel-wash behind the headline, built entirely from
641
- color-mix() over --accent and --danger), h1 at 56px /
642
- weight 300 / -0.025em (the brand's "whisper authority"),
643
- .lede in slate, .btn-primary + .btn-ghost from DESIGN.md
644
- §4 verbatim. Asymmetric grid on desktop; single column on
645
- tablet.
646
- ═══════════════════════════════════════════════════════════════ -->
647
- <section class="hero" data-od-id="hero">
648
- <div class="halo" aria-hidden="true"></div>
649
-
650
- <div class="hero-inner">
651
- <div class="stack-6">
652
- <span class="eyebrow">Payments · Infrastructure</span>
653
- <h1>Financial infrastructure designed for the internet.</h1>
654
- <p class="lede">
655
- The reference fixture pastes Stripe's token block into a
656
- single <code style="font-family:var(--font-mono);font-size:0.92em;color:var(--fg-2)">&lt;style&gt;</code>
657
- and renders a recognisable Stripe page without authoring
658
- any additional values — every colour, type size, and
659
- shadow below resolves through <code style="font-family:var(--font-mono);font-size:0.92em;color:var(--fg-2)">var(--*)</code>.
660
- </p>
661
- <div class="hero-actions">
662
- <a href="./tokens.css" class="btn btn-primary">
663
- Start now
664
- <svg
665
- class="icon"
666
- viewBox="0 0 24 24"
667
- fill="none"
668
- stroke="currentColor"
669
- stroke-width="1.5"
670
- stroke-linecap="round"
671
- stroke-linejoin="round"
672
- aria-hidden="true"
673
- >
674
- <path d="M5 12h14M13 6l6 6-6 6" />
675
- </svg>
676
- </a>
677
- <a href="./DESIGN.md" class="btn btn-ghost">Contact sales</a>
678
- </div>
679
- </div>
680
-
681
- <aside class="card-elevated" aria-label="Payment summary">
682
- <div class="row-between">
683
- <span class="eyebrow">Payment intent</span>
684
- <span class="badge badge-success">
685
- <span class="badge-dot" aria-hidden="true"></span>
686
- Succeeded
687
- </span>
688
- </div>
689
-
690
- <div class="metric">
691
- <div
692
- class="metric-value"
693
- style="font-size: var(--text-3xl); letter-spacing: -0.02em"
694
- >
695
- $4,280.<span style="color: var(--muted)">00</span>
696
- </div>
697
- <div class="metric-label">
698
- Charged via card_1NqK… · 2026-05-14
699
- </div>
700
- </div>
701
-
702
- <div
703
- style="
704
- display: grid;
705
- grid-template-columns: 1fr 1fr;
706
- gap: var(--space-3);
707
- padding-block-start: var(--space-3);
708
- border-top: 1px solid var(--border);
709
- "
710
- >
711
- <div class="metric">
712
- <div class="metric-label">Net</div>
713
- <div
714
- class="metric-value"
715
- style="font-size: var(--text-base); color: var(--fg-2)"
716
- >
717
- $4,154.88
718
- </div>
719
- </div>
720
- <div class="metric">
721
- <div class="metric-label">Fee</div>
722
- <div
723
- class="metric-value"
724
- style="font-size: var(--text-base); color: var(--fg-2)"
725
- >
726
- $125.12
727
- </div>
728
- </div>
729
- </div>
730
-
731
- <p class="body-sm body-muted">
732
- Press <kbd>⌘</kbd> <kbd>K</kbd> to inspect this token block
733
- in the design-system viewer.
734
- </p>
735
- </aside>
736
- </div>
737
- </section>
738
-
739
- <!-- ════════════════════════════════════════════════════════════
740
- METRICS — exercises: .metric pattern with `tnum`, deep-
741
- navy values, slate labels. Numbers describe the fixture
742
- itself, not invented claims.
743
- ═══════════════════════════════════════════════════════════════ -->
744
- <section data-od-id="metrics">
745
- <div class="stack-3">
746
- <span class="eyebrow">Schema in numbers</span>
747
- <h2 style="max-width: 24ch">
748
- Fifty-six tokens carry every visible value below.
749
- </h2>
750
- </div>
751
-
752
- <div class="metric-row" style="margin-block-start: var(--space-8)">
753
- <div class="metric">
754
- <div class="metric-value">56</div>
755
- <div class="metric-label">tokens in :root</div>
756
- </div>
757
- <div class="metric">
758
- <div class="metric-value">0</div>
759
- <div class="metric-label">brand-C extensions</div>
760
- </div>
761
- <div class="metric">
762
- <div class="metric-value">3</div>
763
- <div class="metric-label">elevation levels (flat · ring · raised)</div>
764
- </div>
765
- <div class="metric">
766
- <div class="metric-value">300</div>
767
- <div class="metric-label">default sohne-var weight</div>
768
- </div>
769
- </div>
770
- </section>
771
-
772
- <!-- ════════════════════════════════════════════════════════════
773
- FEATURES — exercises: h2, .card (hairline border), h3 with
774
- tighter tracking, body text, .features-grid responsive
775
- ladder. Each card describes a real property of this
776
- fixture (no "feature one/two/three" filler).
777
- ═══════════════════════════════════════════════════════════════ -->
778
- <section data-od-id="features">
779
- <div class="stack-3">
780
- <span class="eyebrow">What this fixture exercises</span>
781
- <h2 style="max-width: 30ch">
782
- Every component renders through <code style="font-family:var(--font-mono);font-size:0.92em;color:var(--fg-2)">var(--*)</code> —
783
- no raw hex, no off-token type.
784
- </h2>
785
- </div>
786
-
787
- <div class="features-grid">
788
- <article class="card">
789
- <h3 class="card-title">Shadow as identity</h3>
790
- <p class="body-muted body-sm">
791
- The trademark blue-tinted multi-layer shadow lives at
792
- <code style="font-family:var(--font-mono);font-size:0.92em;color:var(--fg-2)">--elev-raised</code>.
793
- Rebinding it to a neutral drop shadow erases Stripe's
794
- atmosphere even when every colour is right.
795
- </p>
796
- <a href="./tokens.css" class="body-sm">Inspect tokens →</a>
797
- </article>
798
-
799
- <article class="card">
800
- <h3 class="card-title">Light weight as voice</h3>
801
- <p class="body-muted body-sm">
802
- Display sizes run at weight 300 with negative tracking.
803
- Stripe's headlines feel like they don't need to shout;
804
- weight 600 would erase the brand instantly.
805
- </p>
806
- <a href="./DESIGN.md" class="body-sm">Read the spec →</a>
807
- </article>
808
-
809
- <article class="card">
810
- <h3 class="card-title">Accent discipline</h3>
811
- <p class="body-muted body-sm">
812
- <code style="font-family:var(--font-mono);font-size:0.92em;color:var(--fg-2)">--accent</code>
813
- appears at most twice per screen — primary CTA and link
814
- colour. Decorative ruby / magenta gradients live in the
815
- hero halo, not on interactive elements.
816
- </p>
817
- <a href="./tokens.css" class="body-sm">Inspect accent →</a>
818
- </article>
819
- </div>
820
- </section>
821
-
822
- <!-- ════════════════════════════════════════════════════════════
823
- PRICING — exercises: .card-elevated with the trademark
824
- blue-tinted shadow, alongside two .card siblings so the
825
- elevation hierarchy is immediately visible. Tabular numerals
826
- on the price; check-mark feature list keyed to --accent.
827
- ═══════════════════════════════════════════════════════════════ -->
828
- <section data-od-id="pricing">
829
- <div class="stack-3">
830
- <span class="eyebrow">Pricing pattern</span>
831
- <h2 style="max-width: 26ch">
832
- Featured tier lifts via shadow alone — no colour shift, no
833
- border change.
834
- </h2>
835
- </div>
836
-
837
- <div class="pricing-grid">
838
- <article class="card">
839
- <div class="stack-3">
840
- <h3 class="card-title">Starter</h3>
841
- <p class="body-muted body-sm">
842
- For new accounts integrating their first payment flow.
843
- </p>
844
- </div>
845
- <div class="pricing-price">
846
- $0<small>/month</small>
847
- </div>
848
- <ul class="pricing-list">
849
- <li>Standard processing rates</li>
850
- <li>Dashboard access</li>
851
- <li>Email support</li>
852
- </ul>
853
- <a href="./tokens.css" class="btn btn-ghost btn-sm">Start free</a>
854
- </article>
855
-
856
- <article class="card-elevated" aria-label="Featured tier">
857
- <div class="row-between">
858
- <span class="eyebrow">Most popular</span>
859
- <span class="badge badge-accent">Featured</span>
860
- </div>
861
- <h3 class="card-title">Growth</h3>
862
- <div class="pricing-price">
863
- $79<small>/month</small>
864
- </div>
865
- <ul class="pricing-list">
866
- <li>Volume processing discounts</li>
867
- <li>Subscriptions &amp; invoicing</li>
868
- <li>Fraud monitoring</li>
869
- <li>Priority support</li>
870
- </ul>
871
- <a href="./tokens.css" class="btn btn-primary btn-sm">Choose Growth</a>
872
- </article>
873
-
874
- <article class="card">
875
- <div class="stack-3">
876
- <h3 class="card-title">Scale</h3>
877
- <p class="body-muted body-sm">
878
- Custom pricing for high-volume merchants and platforms.
879
- </p>
880
- </div>
881
- <div class="pricing-price">
882
- Custom
883
- </div>
884
- <ul class="pricing-list">
885
- <li>Negotiated processing rates</li>
886
- <li>Dedicated solutions engineer</li>
887
- <li>Custom data residency</li>
888
- </ul>
889
- <a href="./DESIGN.md" class="btn btn-ghost btn-sm">Contact sales</a>
890
- </article>
891
- </div>
892
- </section>
893
-
894
- <!-- ════════════════════════════════════════════════════════════
895
- CODE PREVIEW — exercises: SourceCodePro at 12px / weight
896
- 500 / line-height 2.00 (DESIGN.md §3). Keyword tokens use
897
- --accent; strings use --success; comments use --muted.
898
- ═══════════════════════════════════════════════════════════════ -->
899
- <section data-od-id="code">
900
- <div class="form-row">
901
- <div class="stack-4">
902
- <span class="eyebrow">Integration preview</span>
903
- <h2 style="max-width: 18ch">
904
- Two lines of code, one charge.
905
- </h2>
906
- <p class="body-muted lede">
907
- The monospace face is <code style="font-family:var(--font-mono);font-size:0.95em">SourceCodePro</code>
908
- at 12px / weight 500 / line-height 2.00 — generous leading
909
- so payment snippets read like prose, not like terminal
910
- output.
911
- </p>
912
- <div>
913
- <a href="./tokens.css" class="btn btn-ghost btn-sm">Inspect mono token</a>
914
- </div>
915
- </div>
916
-
917
- <pre class="code"><span class="c">// Create a PaymentIntent on your server.</span>
918
- <span class="k">const</span> <span class="n">intent</span> = <span class="k">await</span> <span class="n">stripe</span>.<span class="n">paymentIntents</span>.<span class="n">create</span>({
919
- <span class="n">amount</span>: <span class="k">4280</span>,
920
- <span class="n">currency</span>: <span class="s">"usd"</span>,
921
- <span class="n">automatic_payment_methods</span>: { <span class="n">enabled</span>: <span class="k">true</span> },
922
- });
923
-
924
- <span class="c">// Return the client secret to the browser.</span>
925
- <span class="k">res</span>.<span class="n">json</span>({ <span class="n">clientSecret</span>: <span class="n">intent</span>.<span class="n">client_secret</span> });</pre>
926
- </div>
927
- </section>
928
-
929
- <!-- ════════════════════════════════════════════════════════════
930
- FORM — exercises: .field, input :focus-visible (purple halo
931
- via --focus-ring), .btn-primary (reused), .btn-ghost,
932
- .field-help. The form panel itself uses .card-elevated so
933
- the trademark shadow frames the inputs.
934
- ═══════════════════════════════════════════════════════════════ -->
935
- <section data-od-id="form">
936
- <div class="form-row">
937
- <div class="stack-4">
938
- <span class="eyebrow">Form components</span>
939
- <h2 style="max-width: 22ch">
940
- Inputs inherit the same tokens.
941
- </h2>
942
- <p class="body-muted lede">
943
- Focus rings, borders, placeholder colour — all derive
944
- from <code style="font-family:var(--font-mono);font-size:0.92em;color:var(--fg-2)">--accent</code>
945
- and <code style="font-family:var(--font-mono);font-size:0.92em;color:var(--fg-2)">--border</code>.
946
- The submit button reuses <code style="font-family:var(--font-mono);font-size:0.92em;color:var(--fg-2)">.btn-primary</code>
947
- unchanged. The panel itself lifts via the trademark
948
- blue-tinted shadow.
949
- </p>
950
- </div>
951
-
952
- <form class="form" onsubmit="event.preventDefault();">
953
- <div class="row-between">
954
- <h3 class="card-title" style="font-size: var(--text-lg)">
955
- Contact sales
956
- </h3>
957
- <span class="badge badge-muted">Secure</span>
958
- </div>
959
-
960
- <div class="form-grid-2">
961
- <div class="field">
962
- <label for="first">First name</label>
963
- <input
964
- id="first"
965
- type="text"
966
- placeholder="Jamie"
967
- autocomplete="given-name"
968
- />
969
- </div>
970
- <div class="field">
971
- <label for="last">Last name</label>
972
- <input
973
- id="last"
974
- type="text"
975
- placeholder="Liu"
976
- autocomplete="family-name"
977
- />
978
- </div>
979
- </div>
980
-
981
- <div class="field">
982
- <label for="email">Work email</label>
983
- <input
984
- id="email"
985
- type="email"
986
- placeholder="jamie@acme.dev"
987
- autocomplete="email"
988
- required
989
- />
990
- <p class="field-help">
991
- We'll send the integration brief and nothing else.
992
- </p>
993
- </div>
994
-
995
- <div class="field">
996
- <label for="volume">Monthly processing volume</label>
997
- <select id="volume">
998
- <option>Under $80k</option>
999
- <option>$80k – $500k</option>
1000
- <option>$500k – $5M</option>
1001
- <option>Over $5M</option>
1002
- </select>
1003
- </div>
1004
-
1005
- <div class="form-actions">
1006
- <button type="submit" class="btn btn-primary">
1007
- Start now
1008
- </button>
1009
- <button type="button" class="btn btn-ghost">
1010
- Skip for now
1011
- </button>
1012
- </div>
1013
- </form>
1014
- </div>
1015
- </section>
1016
- </main>
1017
- </body>
1018
- </html>