@aexol/spectral 0.7.0 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (459) hide show
  1. package/dist/agent/index.js +76 -301
  2. package/dist/cli.js +11 -0
  3. package/dist/designer/data/systems/agentic/DESIGN.md +71 -0
  4. package/dist/designer/data/systems/agentic/components.html +154 -0
  5. package/dist/designer/data/systems/agentic/tokens.css +63 -0
  6. package/dist/designer/data/systems/airbnb/DESIGN.md +393 -0
  7. package/dist/designer/data/systems/airbnb/components.html +1373 -0
  8. package/dist/designer/data/systems/airbnb/tokens.css +261 -0
  9. package/dist/designer/data/systems/airtable/DESIGN.md +92 -0
  10. package/dist/designer/data/systems/airtable/components.html +489 -0
  11. package/dist/designer/data/systems/airtable/tokens.css +261 -0
  12. package/dist/designer/data/systems/ant/DESIGN.md +71 -0
  13. package/dist/designer/data/systems/ant/components.html +154 -0
  14. package/dist/designer/data/systems/ant/tokens.css +63 -0
  15. package/dist/designer/data/systems/apple/DESIGN.md +250 -0
  16. package/dist/designer/data/systems/apple/components.html +749 -0
  17. package/dist/designer/data/systems/apple/tokens.css +286 -0
  18. package/dist/designer/data/systems/application/DESIGN.md +71 -0
  19. package/dist/designer/data/systems/application/components.html +154 -0
  20. package/dist/designer/data/systems/application/tokens.css +63 -0
  21. package/dist/designer/data/systems/arc/DESIGN.md +152 -0
  22. package/dist/designer/data/systems/arc/components.html +432 -0
  23. package/dist/designer/data/systems/arc/tokens.css +137 -0
  24. package/dist/designer/data/systems/artistic/DESIGN.md +71 -0
  25. package/dist/designer/data/systems/artistic/components.html +136 -0
  26. package/dist/designer/data/systems/artistic/tokens.css +63 -0
  27. package/dist/designer/data/systems/atelier-zero/DESIGN.md +316 -0
  28. package/dist/designer/data/systems/atelier-zero/components.html +136 -0
  29. package/dist/designer/data/systems/atelier-zero/tokens.css +63 -0
  30. package/dist/designer/data/systems/bento/DESIGN.md +71 -0
  31. package/dist/designer/data/systems/bento/components.html +136 -0
  32. package/dist/designer/data/systems/bento/tokens.css +63 -0
  33. package/dist/designer/data/systems/binance/DESIGN.md +348 -0
  34. package/dist/designer/data/systems/binance/components.html +550 -0
  35. package/dist/designer/data/systems/binance/tokens.css +255 -0
  36. package/dist/designer/data/systems/bmw/DESIGN.md +183 -0
  37. package/dist/designer/data/systems/bmw/components.html +551 -0
  38. package/dist/designer/data/systems/bmw/tokens.css +179 -0
  39. package/dist/designer/data/systems/bmw-m/DESIGN.md +246 -0
  40. package/dist/designer/data/systems/bmw-m/components.html +342 -0
  41. package/dist/designer/data/systems/bmw-m/tokens.css +64 -0
  42. package/dist/designer/data/systems/bold/DESIGN.md +71 -0
  43. package/dist/designer/data/systems/bold/components.html +136 -0
  44. package/dist/designer/data/systems/bold/tokens.css +63 -0
  45. package/dist/designer/data/systems/brutalism/DESIGN.md +71 -0
  46. package/dist/designer/data/systems/brutalism/components.html +154 -0
  47. package/dist/designer/data/systems/brutalism/tokens.css +63 -0
  48. package/dist/designer/data/systems/bugatti/DESIGN.md +271 -0
  49. package/dist/designer/data/systems/bugatti/components.html +342 -0
  50. package/dist/designer/data/systems/bugatti/tokens.css +64 -0
  51. package/dist/designer/data/systems/cafe/DESIGN.md +71 -0
  52. package/dist/designer/data/systems/cafe/components.html +136 -0
  53. package/dist/designer/data/systems/cafe/tokens.css +63 -0
  54. package/dist/designer/data/systems/cal/DESIGN.md +262 -0
  55. package/dist/designer/data/systems/cal/components.html +376 -0
  56. package/dist/designer/data/systems/cal/tokens.css +265 -0
  57. package/dist/designer/data/systems/canva/DESIGN.md +157 -0
  58. package/dist/designer/data/systems/canva/components.html +461 -0
  59. package/dist/designer/data/systems/canva/tokens.css +147 -0
  60. package/dist/designer/data/systems/cisco/DESIGN.md +201 -0
  61. package/dist/designer/data/systems/cisco/components.html +342 -0
  62. package/dist/designer/data/systems/cisco/tokens.css +64 -0
  63. package/dist/designer/data/systems/claude/DESIGN.md +315 -0
  64. package/dist/designer/data/systems/claude/components.html +483 -0
  65. package/dist/designer/data/systems/claude/tokens.css +130 -0
  66. package/dist/designer/data/systems/clay/DESIGN.md +307 -0
  67. package/dist/designer/data/systems/clay/components.html +136 -0
  68. package/dist/designer/data/systems/clay/tokens.css +63 -0
  69. package/dist/designer/data/systems/claymorphism/DESIGN.md +71 -0
  70. package/dist/designer/data/systems/claymorphism/components.html +136 -0
  71. package/dist/designer/data/systems/claymorphism/tokens.css +63 -0
  72. package/dist/designer/data/systems/clean/DESIGN.md +71 -0
  73. package/dist/designer/data/systems/clean/components.html +136 -0
  74. package/dist/designer/data/systems/clean/tokens.css +63 -0
  75. package/dist/designer/data/systems/clickhouse/DESIGN.md +284 -0
  76. package/dist/designer/data/systems/clickhouse/components.html +506 -0
  77. package/dist/designer/data/systems/clickhouse/tokens.css +135 -0
  78. package/dist/designer/data/systems/cohere/DESIGN.md +269 -0
  79. package/dist/designer/data/systems/cohere/components.html +353 -0
  80. package/dist/designer/data/systems/cohere/tokens.css +126 -0
  81. package/dist/designer/data/systems/coinbase/DESIGN.md +132 -0
  82. package/dist/designer/data/systems/coinbase/components.html +501 -0
  83. package/dist/designer/data/systems/coinbase/tokens.css +257 -0
  84. package/dist/designer/data/systems/colorful/DESIGN.md +71 -0
  85. package/dist/designer/data/systems/colorful/components.html +136 -0
  86. package/dist/designer/data/systems/colorful/tokens.css +63 -0
  87. package/dist/designer/data/systems/composio/DESIGN.md +310 -0
  88. package/dist/designer/data/systems/composio/components.html +342 -0
  89. package/dist/designer/data/systems/composio/tokens.css +64 -0
  90. package/dist/designer/data/systems/contemporary/DESIGN.md +71 -0
  91. package/dist/designer/data/systems/contemporary/components.html +136 -0
  92. package/dist/designer/data/systems/contemporary/tokens.css +63 -0
  93. package/dist/designer/data/systems/corporate/DESIGN.md +71 -0
  94. package/dist/designer/data/systems/corporate/components.html +136 -0
  95. package/dist/designer/data/systems/corporate/tokens.css +63 -0
  96. package/dist/designer/data/systems/cosmic/DESIGN.md +71 -0
  97. package/dist/designer/data/systems/cosmic/components.html +136 -0
  98. package/dist/designer/data/systems/cosmic/tokens.css +63 -0
  99. package/dist/designer/data/systems/creative/DESIGN.md +71 -0
  100. package/dist/designer/data/systems/creative/components.html +136 -0
  101. package/dist/designer/data/systems/creative/tokens.css +63 -0
  102. package/dist/designer/data/systems/cursor/DESIGN.md +312 -0
  103. package/dist/designer/data/systems/cursor/components.html +654 -0
  104. package/dist/designer/data/systems/cursor/tokens.css +218 -0
  105. package/dist/designer/data/systems/dashboard/DESIGN.md +71 -0
  106. package/dist/designer/data/systems/dashboard/components.html +154 -0
  107. package/dist/designer/data/systems/dashboard/tokens.css +63 -0
  108. package/dist/designer/data/systems/default/DESIGN.md +62 -0
  109. package/dist/designer/data/systems/default/components.html +523 -0
  110. package/dist/designer/data/systems/default/tokens.css +200 -0
  111. package/dist/designer/data/systems/discord/DESIGN.md +162 -0
  112. package/dist/designer/data/systems/discord/components.html +359 -0
  113. package/dist/designer/data/systems/discord/tokens.css +125 -0
  114. package/dist/designer/data/systems/dithered/DESIGN.md +71 -0
  115. package/dist/designer/data/systems/dithered/components.html +136 -0
  116. package/dist/designer/data/systems/dithered/tokens.css +63 -0
  117. package/dist/designer/data/systems/doodle/DESIGN.md +71 -0
  118. package/dist/designer/data/systems/doodle/components.html +136 -0
  119. package/dist/designer/data/systems/doodle/tokens.css +63 -0
  120. package/dist/designer/data/systems/dramatic/DESIGN.md +71 -0
  121. package/dist/designer/data/systems/dramatic/components.html +136 -0
  122. package/dist/designer/data/systems/dramatic/tokens.css +63 -0
  123. package/dist/designer/data/systems/duolingo/DESIGN.md +154 -0
  124. package/dist/designer/data/systems/duolingo/components.html +532 -0
  125. package/dist/designer/data/systems/duolingo/tokens.css +130 -0
  126. package/dist/designer/data/systems/editorial/DESIGN.md +71 -0
  127. package/dist/designer/data/systems/editorial/components.html +154 -0
  128. package/dist/designer/data/systems/editorial/tokens.css +63 -0
  129. package/dist/designer/data/systems/elegant/DESIGN.md +71 -0
  130. package/dist/designer/data/systems/elegant/components.html +136 -0
  131. package/dist/designer/data/systems/elegant/tokens.css +63 -0
  132. package/dist/designer/data/systems/elevenlabs/DESIGN.md +268 -0
  133. package/dist/designer/data/systems/elevenlabs/components.html +342 -0
  134. package/dist/designer/data/systems/elevenlabs/tokens.css +127 -0
  135. package/dist/designer/data/systems/energetic/DESIGN.md +72 -0
  136. package/dist/designer/data/systems/energetic/components.html +136 -0
  137. package/dist/designer/data/systems/energetic/tokens.css +63 -0
  138. package/dist/designer/data/systems/enterprise/DESIGN.md +71 -0
  139. package/dist/designer/data/systems/enterprise/components.html +154 -0
  140. package/dist/designer/data/systems/enterprise/tokens.css +63 -0
  141. package/dist/designer/data/systems/expo/DESIGN.md +284 -0
  142. package/dist/designer/data/systems/expo/components.html +342 -0
  143. package/dist/designer/data/systems/expo/tokens.css +64 -0
  144. package/dist/designer/data/systems/expressive/DESIGN.md +71 -0
  145. package/dist/designer/data/systems/expressive/components.html +136 -0
  146. package/dist/designer/data/systems/expressive/tokens.css +63 -0
  147. package/dist/designer/data/systems/fantasy/DESIGN.md +71 -0
  148. package/dist/designer/data/systems/fantasy/components.html +136 -0
  149. package/dist/designer/data/systems/fantasy/tokens.css +63 -0
  150. package/dist/designer/data/systems/ferrari/DESIGN.md +317 -0
  151. package/dist/designer/data/systems/ferrari/components.html +342 -0
  152. package/dist/designer/data/systems/ferrari/tokens.css +64 -0
  153. package/dist/designer/data/systems/figma/DESIGN.md +223 -0
  154. package/dist/designer/data/systems/figma/components.html +344 -0
  155. package/dist/designer/data/systems/figma/tokens.css +126 -0
  156. package/dist/designer/data/systems/flat/DESIGN.md +71 -0
  157. package/dist/designer/data/systems/flat/components.html +136 -0
  158. package/dist/designer/data/systems/flat/tokens.css +63 -0
  159. package/dist/designer/data/systems/framer/DESIGN.md +249 -0
  160. package/dist/designer/data/systems/framer/components.html +438 -0
  161. package/dist/designer/data/systems/framer/tokens.css +238 -0
  162. package/dist/designer/data/systems/friendly/DESIGN.md +71 -0
  163. package/dist/designer/data/systems/friendly/components.html +136 -0
  164. package/dist/designer/data/systems/friendly/tokens.css +63 -0
  165. package/dist/designer/data/systems/futuristic/DESIGN.md +71 -0
  166. package/dist/designer/data/systems/futuristic/components.html +136 -0
  167. package/dist/designer/data/systems/futuristic/tokens.css +63 -0
  168. package/dist/designer/data/systems/github/DESIGN.md +155 -0
  169. package/dist/designer/data/systems/github/components.html +383 -0
  170. package/dist/designer/data/systems/github/tokens.css +125 -0
  171. package/dist/designer/data/systems/glassmorphism/DESIGN.md +71 -0
  172. package/dist/designer/data/systems/glassmorphism/components.html +154 -0
  173. package/dist/designer/data/systems/glassmorphism/tokens.css +63 -0
  174. package/dist/designer/data/systems/gradient/DESIGN.md +71 -0
  175. package/dist/designer/data/systems/gradient/components.html +154 -0
  176. package/dist/designer/data/systems/gradient/tokens.css +63 -0
  177. package/dist/designer/data/systems/hashicorp/DESIGN.md +281 -0
  178. package/dist/designer/data/systems/hashicorp/components.html +502 -0
  179. package/dist/designer/data/systems/hashicorp/tokens.css +272 -0
  180. package/dist/designer/data/systems/hud/DESIGN.md +173 -0
  181. package/dist/designer/data/systems/hud/components.html +136 -0
  182. package/dist/designer/data/systems/hud/tokens.css +63 -0
  183. package/dist/designer/data/systems/huggingface/DESIGN.md +149 -0
  184. package/dist/designer/data/systems/huggingface/components.html +346 -0
  185. package/dist/designer/data/systems/huggingface/tokens.css +125 -0
  186. package/dist/designer/data/systems/ibm/DESIGN.md +335 -0
  187. package/dist/designer/data/systems/ibm/components.html +342 -0
  188. package/dist/designer/data/systems/ibm/tokens.css +64 -0
  189. package/dist/designer/data/systems/intercom/DESIGN.md +149 -0
  190. package/dist/designer/data/systems/intercom/components.html +557 -0
  191. package/dist/designer/data/systems/intercom/tokens.css +150 -0
  192. package/dist/designer/data/systems/kami/DESIGN.md +410 -0
  193. package/dist/designer/data/systems/kami/components.html +601 -0
  194. package/dist/designer/data/systems/kami/tokens.css +272 -0
  195. package/dist/designer/data/systems/kraken/DESIGN.md +128 -0
  196. package/dist/designer/data/systems/kraken/components.html +342 -0
  197. package/dist/designer/data/systems/kraken/tokens.css +64 -0
  198. package/dist/designer/data/systems/lamborghini/DESIGN.md +291 -0
  199. package/dist/designer/data/systems/lamborghini/components.html +342 -0
  200. package/dist/designer/data/systems/lamborghini/tokens.css +64 -0
  201. package/dist/designer/data/systems/levels/DESIGN.md +71 -0
  202. package/dist/designer/data/systems/levels/components.html +154 -0
  203. package/dist/designer/data/systems/levels/tokens.css +63 -0
  204. package/dist/designer/data/systems/linear-app/DESIGN.md +370 -0
  205. package/dist/designer/data/systems/linear-app/components.html +370 -0
  206. package/dist/designer/data/systems/linear-app/tokens.css +130 -0
  207. package/dist/designer/data/systems/lingo/DESIGN.md +71 -0
  208. package/dist/designer/data/systems/lingo/components.html +154 -0
  209. package/dist/designer/data/systems/lingo/tokens.css +63 -0
  210. package/dist/designer/data/systems/loom/DESIGN.md +201 -0
  211. package/dist/designer/data/systems/loom/components.html +446 -0
  212. package/dist/designer/data/systems/loom/tokens.css +138 -0
  213. package/dist/designer/data/systems/lovable/DESIGN.md +301 -0
  214. package/dist/designer/data/systems/lovable/components.html +441 -0
  215. package/dist/designer/data/systems/lovable/tokens.css +258 -0
  216. package/dist/designer/data/systems/luxury/DESIGN.md +71 -0
  217. package/dist/designer/data/systems/luxury/components.html +154 -0
  218. package/dist/designer/data/systems/luxury/tokens.css +63 -0
  219. package/dist/designer/data/systems/mastercard/DESIGN.md +368 -0
  220. package/dist/designer/data/systems/mastercard/components.html +342 -0
  221. package/dist/designer/data/systems/mastercard/tokens.css +64 -0
  222. package/dist/designer/data/systems/material/DESIGN.md +71 -0
  223. package/dist/designer/data/systems/material/components.html +154 -0
  224. package/dist/designer/data/systems/material/tokens.css +63 -0
  225. package/dist/designer/data/systems/meta/DESIGN.md +369 -0
  226. package/dist/designer/data/systems/meta/components.html +398 -0
  227. package/dist/designer/data/systems/meta/tokens.css +263 -0
  228. package/dist/designer/data/systems/minimal/DESIGN.md +71 -0
  229. package/dist/designer/data/systems/minimal/components.html +154 -0
  230. package/dist/designer/data/systems/minimal/tokens.css +63 -0
  231. package/dist/designer/data/systems/minimax/DESIGN.md +260 -0
  232. package/dist/designer/data/systems/minimax/components.html +590 -0
  233. package/dist/designer/data/systems/minimax/tokens.css +148 -0
  234. package/dist/designer/data/systems/mintlify/DESIGN.md +329 -0
  235. package/dist/designer/data/systems/mintlify/components.html +737 -0
  236. package/dist/designer/data/systems/mintlify/tokens.css +256 -0
  237. package/dist/designer/data/systems/miro/DESIGN.md +111 -0
  238. package/dist/designer/data/systems/miro/components.html +342 -0
  239. package/dist/designer/data/systems/miro/tokens.css +64 -0
  240. package/dist/designer/data/systems/mission-control/DESIGN.md +474 -0
  241. package/dist/designer/data/systems/mission-control/components.html +136 -0
  242. package/dist/designer/data/systems/mission-control/tokens.css +63 -0
  243. package/dist/designer/data/systems/mistral-ai/DESIGN.md +264 -0
  244. package/dist/designer/data/systems/mistral-ai/components.html +338 -0
  245. package/dist/designer/data/systems/mistral-ai/tokens.css +125 -0
  246. package/dist/designer/data/systems/modern/DESIGN.md +71 -0
  247. package/dist/designer/data/systems/modern/components.html +154 -0
  248. package/dist/designer/data/systems/modern/tokens.css +63 -0
  249. package/dist/designer/data/systems/mongodb/DESIGN.md +269 -0
  250. package/dist/designer/data/systems/mongodb/components.html +462 -0
  251. package/dist/designer/data/systems/mongodb/tokens.css +176 -0
  252. package/dist/designer/data/systems/mono/DESIGN.md +71 -0
  253. package/dist/designer/data/systems/mono/components.html +136 -0
  254. package/dist/designer/data/systems/mono/tokens.css +63 -0
  255. package/dist/designer/data/systems/neobrutalism/DESIGN.md +71 -0
  256. package/dist/designer/data/systems/neobrutalism/components.html +136 -0
  257. package/dist/designer/data/systems/neobrutalism/tokens.css +63 -0
  258. package/dist/designer/data/systems/neon/DESIGN.md +71 -0
  259. package/dist/designer/data/systems/neon/components.html +136 -0
  260. package/dist/designer/data/systems/neon/tokens.css +63 -0
  261. package/dist/designer/data/systems/neumorphism/DESIGN.md +71 -0
  262. package/dist/designer/data/systems/neumorphism/components.html +136 -0
  263. package/dist/designer/data/systems/neumorphism/tokens.css +63 -0
  264. package/dist/designer/data/systems/nike/DESIGN.md +366 -0
  265. package/dist/designer/data/systems/nike/components.html +512 -0
  266. package/dist/designer/data/systems/nike/tokens.css +304 -0
  267. package/dist/designer/data/systems/notion/DESIGN.md +312 -0
  268. package/dist/designer/data/systems/notion/components.html +413 -0
  269. package/dist/designer/data/systems/notion/tokens.css +130 -0
  270. package/dist/designer/data/systems/nvidia/DESIGN.md +296 -0
  271. package/dist/designer/data/systems/nvidia/components.html +414 -0
  272. package/dist/designer/data/systems/nvidia/tokens.css +133 -0
  273. package/dist/designer/data/systems/ollama/DESIGN.md +270 -0
  274. package/dist/designer/data/systems/ollama/components.html +700 -0
  275. package/dist/designer/data/systems/ollama/tokens.css +242 -0
  276. package/dist/designer/data/systems/openai/DESIGN.md +140 -0
  277. package/dist/designer/data/systems/openai/components.html +382 -0
  278. package/dist/designer/data/systems/openai/tokens.css +133 -0
  279. package/dist/designer/data/systems/opencode-ai/DESIGN.md +284 -0
  280. package/dist/designer/data/systems/opencode-ai/components.html +389 -0
  281. package/dist/designer/data/systems/opencode-ai/tokens.css +126 -0
  282. package/dist/designer/data/systems/pacman/DESIGN.md +71 -0
  283. package/dist/designer/data/systems/pacman/components.html +342 -0
  284. package/dist/designer/data/systems/pacman/tokens.css +64 -0
  285. package/dist/designer/data/systems/paper/DESIGN.md +71 -0
  286. package/dist/designer/data/systems/paper/components.html +136 -0
  287. package/dist/designer/data/systems/paper/tokens.css +63 -0
  288. package/dist/designer/data/systems/perplexity/DESIGN.md +286 -0
  289. package/dist/designer/data/systems/perplexity/components.html +455 -0
  290. package/dist/designer/data/systems/perplexity/tokens.css +151 -0
  291. package/dist/designer/data/systems/perspective/DESIGN.md +71 -0
  292. package/dist/designer/data/systems/perspective/components.html +136 -0
  293. package/dist/designer/data/systems/perspective/tokens.css +63 -0
  294. package/dist/designer/data/systems/pinterest/DESIGN.md +233 -0
  295. package/dist/designer/data/systems/pinterest/components.html +865 -0
  296. package/dist/designer/data/systems/pinterest/tokens.css +262 -0
  297. package/dist/designer/data/systems/playstation/DESIGN.md +367 -0
  298. package/dist/designer/data/systems/playstation/components.html +414 -0
  299. package/dist/designer/data/systems/playstation/tokens.css +150 -0
  300. package/dist/designer/data/systems/posthog/DESIGN.md +259 -0
  301. package/dist/designer/data/systems/posthog/components.html +827 -0
  302. package/dist/designer/data/systems/posthog/tokens.css +272 -0
  303. package/dist/designer/data/systems/premium/DESIGN.md +71 -0
  304. package/dist/designer/data/systems/premium/components.html +154 -0
  305. package/dist/designer/data/systems/premium/tokens.css +63 -0
  306. package/dist/designer/data/systems/professional/DESIGN.md +71 -0
  307. package/dist/designer/data/systems/professional/components.html +136 -0
  308. package/dist/designer/data/systems/professional/tokens.css +63 -0
  309. package/dist/designer/data/systems/publication/DESIGN.md +71 -0
  310. package/dist/designer/data/systems/publication/components.html +154 -0
  311. package/dist/designer/data/systems/publication/tokens.css +63 -0
  312. package/dist/designer/data/systems/raycast/DESIGN.md +271 -0
  313. package/dist/designer/data/systems/raycast/components.html +507 -0
  314. package/dist/designer/data/systems/raycast/tokens.css +143 -0
  315. package/dist/designer/data/systems/refined/DESIGN.md +71 -0
  316. package/dist/designer/data/systems/refined/components.html +136 -0
  317. package/dist/designer/data/systems/refined/tokens.css +63 -0
  318. package/dist/designer/data/systems/renault/DESIGN.md +314 -0
  319. package/dist/designer/data/systems/renault/components.html +154 -0
  320. package/dist/designer/data/systems/renault/tokens.css +63 -0
  321. package/dist/designer/data/systems/replicate/DESIGN.md +264 -0
  322. package/dist/designer/data/systems/replicate/components.html +340 -0
  323. package/dist/designer/data/systems/replicate/tokens.css +125 -0
  324. package/dist/designer/data/systems/resend/DESIGN.md +306 -0
  325. package/dist/designer/data/systems/resend/components.html +839 -0
  326. package/dist/designer/data/systems/resend/tokens.css +353 -0
  327. package/dist/designer/data/systems/retro/DESIGN.md +71 -0
  328. package/dist/designer/data/systems/retro/components.html +136 -0
  329. package/dist/designer/data/systems/retro/tokens.css +63 -0
  330. package/dist/designer/data/systems/revolut/DESIGN.md +188 -0
  331. package/dist/designer/data/systems/revolut/components.html +342 -0
  332. package/dist/designer/data/systems/revolut/tokens.css +64 -0
  333. package/dist/designer/data/systems/runwayml/DESIGN.md +247 -0
  334. package/dist/designer/data/systems/runwayml/components.html +638 -0
  335. package/dist/designer/data/systems/runwayml/tokens.css +204 -0
  336. package/dist/designer/data/systems/sanity/DESIGN.md +360 -0
  337. package/dist/designer/data/systems/sanity/components.html +342 -0
  338. package/dist/designer/data/systems/sanity/tokens.css +64 -0
  339. package/dist/designer/data/systems/sentry/DESIGN.md +265 -0
  340. package/dist/designer/data/systems/sentry/components.html +387 -0
  341. package/dist/designer/data/systems/sentry/tokens.css +219 -0
  342. package/dist/designer/data/systems/shadcn/DESIGN.md +71 -0
  343. package/dist/designer/data/systems/shadcn/components.html +732 -0
  344. package/dist/designer/data/systems/shadcn/tokens.css +255 -0
  345. package/dist/designer/data/systems/shopify/DESIGN.md +353 -0
  346. package/dist/designer/data/systems/shopify/components.html +342 -0
  347. package/dist/designer/data/systems/shopify/tokens.css +141 -0
  348. package/dist/designer/data/systems/simple/DESIGN.md +71 -0
  349. package/dist/designer/data/systems/simple/components.html +136 -0
  350. package/dist/designer/data/systems/simple/tokens.css +63 -0
  351. package/dist/designer/data/systems/skeumorphism/DESIGN.md +71 -0
  352. package/dist/designer/data/systems/skeumorphism/components.html +136 -0
  353. package/dist/designer/data/systems/skeumorphism/tokens.css +63 -0
  354. package/dist/designer/data/systems/slack/DESIGN.md +363 -0
  355. package/dist/designer/data/systems/slack/components.html +387 -0
  356. package/dist/designer/data/systems/slack/tokens.css +127 -0
  357. package/dist/designer/data/systems/sleek/DESIGN.md +71 -0
  358. package/dist/designer/data/systems/sleek/components.html +136 -0
  359. package/dist/designer/data/systems/sleek/tokens.css +63 -0
  360. package/dist/designer/data/systems/spacex/DESIGN.md +197 -0
  361. package/dist/designer/data/systems/spacex/components.html +496 -0
  362. package/dist/designer/data/systems/spacex/tokens.css +154 -0
  363. package/dist/designer/data/systems/spacious/DESIGN.md +71 -0
  364. package/dist/designer/data/systems/spacious/components.html +136 -0
  365. package/dist/designer/data/systems/spacious/tokens.css +63 -0
  366. package/dist/designer/data/systems/spotify/DESIGN.md +249 -0
  367. package/dist/designer/data/systems/spotify/components.html +365 -0
  368. package/dist/designer/data/systems/spotify/tokens.css +127 -0
  369. package/dist/designer/data/systems/starbucks/DESIGN.md +583 -0
  370. package/dist/designer/data/systems/starbucks/components.html +493 -0
  371. package/dist/designer/data/systems/starbucks/tokens.css +182 -0
  372. package/dist/designer/data/systems/storytelling/DESIGN.md +71 -0
  373. package/dist/designer/data/systems/storytelling/components.html +136 -0
  374. package/dist/designer/data/systems/storytelling/tokens.css +63 -0
  375. package/dist/designer/data/systems/stripe/DESIGN.md +325 -0
  376. package/dist/designer/data/systems/stripe/components.html +1018 -0
  377. package/dist/designer/data/systems/stripe/tokens.css +295 -0
  378. package/dist/designer/data/systems/supabase/DESIGN.md +258 -0
  379. package/dist/designer/data/systems/supabase/components.html +741 -0
  380. package/dist/designer/data/systems/supabase/tokens.css +294 -0
  381. package/dist/designer/data/systems/superhuman/DESIGN.md +255 -0
  382. package/dist/designer/data/systems/superhuman/components.html +537 -0
  383. package/dist/designer/data/systems/superhuman/tokens.css +160 -0
  384. package/dist/designer/data/systems/tesla/DESIGN.md +289 -0
  385. package/dist/designer/data/systems/tesla/components.html +724 -0
  386. package/dist/designer/data/systems/tesla/tokens.css +285 -0
  387. package/dist/designer/data/systems/tetris/DESIGN.md +71 -0
  388. package/dist/designer/data/systems/tetris/components.html +342 -0
  389. package/dist/designer/data/systems/tetris/tokens.css +64 -0
  390. package/dist/designer/data/systems/theverge/DESIGN.md +342 -0
  391. package/dist/designer/data/systems/theverge/components.html +342 -0
  392. package/dist/designer/data/systems/theverge/tokens.css +64 -0
  393. package/dist/designer/data/systems/together-ai/DESIGN.md +266 -0
  394. package/dist/designer/data/systems/together-ai/components.html +422 -0
  395. package/dist/designer/data/systems/together-ai/tokens.css +127 -0
  396. package/dist/designer/data/systems/totality-festival/DESIGN.md +206 -0
  397. package/dist/designer/data/systems/totality-festival/components.html +136 -0
  398. package/dist/designer/data/systems/totality-festival/tokens.css +63 -0
  399. package/dist/designer/data/systems/trading-terminal/DESIGN.md +178 -0
  400. package/dist/designer/data/systems/trading-terminal/components.html +154 -0
  401. package/dist/designer/data/systems/trading-terminal/tokens.css +63 -0
  402. package/dist/designer/data/systems/uber/DESIGN.md +298 -0
  403. package/dist/designer/data/systems/uber/components.html +347 -0
  404. package/dist/designer/data/systems/uber/tokens.css +131 -0
  405. package/dist/designer/data/systems/urdu/DESIGN.md +1002 -0
  406. package/dist/designer/data/systems/urdu/components.html +136 -0
  407. package/dist/designer/data/systems/urdu/tokens.css +63 -0
  408. package/dist/designer/data/systems/vercel/DESIGN.md +313 -0
  409. package/dist/designer/data/systems/vercel/components.html +839 -0
  410. package/dist/designer/data/systems/vercel/tokens.css +270 -0
  411. package/dist/designer/data/systems/vibrant/DESIGN.md +71 -0
  412. package/dist/designer/data/systems/vibrant/components.html +136 -0
  413. package/dist/designer/data/systems/vibrant/tokens.css +63 -0
  414. package/dist/designer/data/systems/vintage/DESIGN.md +71 -0
  415. package/dist/designer/data/systems/vintage/components.html +136 -0
  416. package/dist/designer/data/systems/vintage/tokens.css +63 -0
  417. package/dist/designer/data/systems/vodafone/DESIGN.md +426 -0
  418. package/dist/designer/data/systems/vodafone/components.html +342 -0
  419. package/dist/designer/data/systems/vodafone/tokens.css +64 -0
  420. package/dist/designer/data/systems/voltagent/DESIGN.md +326 -0
  421. package/dist/designer/data/systems/voltagent/components.html +154 -0
  422. package/dist/designer/data/systems/voltagent/tokens.css +63 -0
  423. package/dist/designer/data/systems/warm-editorial/DESIGN.md +65 -0
  424. package/dist/designer/data/systems/warm-editorial/components.html +136 -0
  425. package/dist/designer/data/systems/warm-editorial/tokens.css +63 -0
  426. package/dist/designer/data/systems/warp/DESIGN.md +256 -0
  427. package/dist/designer/data/systems/warp/components.html +411 -0
  428. package/dist/designer/data/systems/warp/tokens.css +156 -0
  429. package/dist/designer/data/systems/webex/DESIGN.md +207 -0
  430. package/dist/designer/data/systems/webex/components.html +342 -0
  431. package/dist/designer/data/systems/webex/tokens.css +64 -0
  432. package/dist/designer/data/systems/webflow/DESIGN.md +95 -0
  433. package/dist/designer/data/systems/webflow/components.html +413 -0
  434. package/dist/designer/data/systems/webflow/tokens.css +191 -0
  435. package/dist/designer/data/systems/wechat/DESIGN.md +302 -0
  436. package/dist/designer/data/systems/wechat/components.html +507 -0
  437. package/dist/designer/data/systems/wechat/tokens.css +176 -0
  438. package/dist/designer/data/systems/wired/DESIGN.md +281 -0
  439. package/dist/designer/data/systems/wired/components.html +342 -0
  440. package/dist/designer/data/systems/wired/tokens.css +64 -0
  441. package/dist/designer/data/systems/wise/DESIGN.md +176 -0
  442. package/dist/designer/data/systems/wise/components.html +365 -0
  443. package/dist/designer/data/systems/wise/tokens.css +141 -0
  444. package/dist/designer/data/systems/x-ai/DESIGN.md +260 -0
  445. package/dist/designer/data/systems/x-ai/components.html +460 -0
  446. package/dist/designer/data/systems/x-ai/tokens.css +268 -0
  447. package/dist/designer/data/systems/xiaohongshu/DESIGN.md +402 -0
  448. package/dist/designer/data/systems/xiaohongshu/components.html +865 -0
  449. package/dist/designer/data/systems/xiaohongshu/tokens.css +193 -0
  450. package/dist/designer/data/systems/zapier/DESIGN.md +331 -0
  451. package/dist/designer/data/systems/zapier/components.html +342 -0
  452. package/dist/designer/data/systems/zapier/tokens.css +64 -0
  453. package/dist/designer/guidelines.js +176 -0
  454. package/dist/designer/index.js +236 -0
  455. package/dist/designer/skills.js +1675 -0
  456. package/dist/designer/systems.js +216 -0
  457. package/dist/server/pi-bridge.js +155 -5
  458. package/dist/server/session-stream.js +45 -1
  459. package/package.json +1 -1
package/dist/designer/data/systems/stripe/components.html ADDED
@@ -0,0 +1,1018 @@
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>