oh-my-design-cli 0.1.0

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 (317) hide show
  1. package/LICENSE +21 -0
  2. package/README.ja.md +145 -0
  3. package/README.ko.md +245 -0
  4. package/README.md +245 -0
  5. package/README.zh-TW.md +145 -0
  6. package/data/reference-tags.md +104 -0
  7. package/data/synonyms.json +79 -0
  8. package/data/vocabulary.json +516 -0
  9. package/dist/bin/oh-my-design.js +858 -0
  10. package/dist/bin/oh-my-design.js.map +1 -0
  11. package/dist/chunk-6YNSV3VY.js +35 -0
  12. package/dist/chunk-6YNSV3VY.js.map +1 -0
  13. package/dist/chunk-MHFYGZSO.js +337 -0
  14. package/dist/chunk-MHFYGZSO.js.map +1 -0
  15. package/dist/chunk-N2JG6N4Q.js +264 -0
  16. package/dist/chunk-N2JG6N4Q.js.map +1 -0
  17. package/dist/chunk-OOQQEUGX.js +46 -0
  18. package/dist/chunk-OOQQEUGX.js.map +1 -0
  19. package/dist/chunk-OR5DHENY.js +250 -0
  20. package/dist/chunk-OR5DHENY.js.map +1 -0
  21. package/dist/customizer-CM76752R.js +8 -0
  22. package/dist/customizer-CM76752R.js.map +1 -0
  23. package/dist/index.d.ts +559 -0
  24. package/dist/index.js +3113 -0
  25. package/dist/index.js.map +1 -0
  26. package/dist/init-STACB7E5.js +635 -0
  27. package/dist/init-STACB7E5.js.map +1 -0
  28. package/dist/install-skills-CM6VXFZJ.js +152 -0
  29. package/dist/install-skills-CM6VXFZJ.js.map +1 -0
  30. package/dist/learn-33LHKEJA.js +140 -0
  31. package/dist/learn-33LHKEJA.js.map +1 -0
  32. package/dist/reference-YMNAOXJQ.js +47 -0
  33. package/dist/reference-YMNAOXJQ.js.map +1 -0
  34. package/dist/reference-parser-TM3CJPNE.js +10 -0
  35. package/dist/reference-parser-TM3CJPNE.js.map +1 -0
  36. package/dist/remember-UAFA5B2O.js +78 -0
  37. package/dist/remember-UAFA5B2O.js.map +1 -0
  38. package/dist/sync-P7X4S2DK.js +404 -0
  39. package/dist/sync-P7X4S2DK.js.map +1 -0
  40. package/dist/templates/templates/design-md.hbs +44 -0
  41. package/dist/templates/templates/partials/agent-prompt-guide.hbs +28 -0
  42. package/dist/templates/templates/partials/color-palette.hbs +49 -0
  43. package/dist/templates/templates/partials/component-stylings.hbs +28 -0
  44. package/dist/templates/templates/partials/depth-elevation.hbs +31 -0
  45. package/dist/templates/templates/partials/dos-donts.hbs +13 -0
  46. package/dist/templates/templates/partials/layout.hbs +30 -0
  47. package/dist/templates/templates/partials/responsive.hbs +25 -0
  48. package/dist/templates/templates/partials/shadcn-tokens.hbs +64 -0
  49. package/dist/templates/templates/partials/typography.hbs +43 -0
  50. package/dist/templates/templates/partials/visual-theme.hbs +26 -0
  51. package/package.json +68 -0
  52. package/references/Claude-Design-Sys-Prompt.txt +421 -0
  53. package/references/airbnb/DESIGN.md +427 -0
  54. package/references/airbnb/README.md +23 -0
  55. package/references/airbnb/preview-dark.html +234 -0
  56. package/references/airbnb/preview.html +233 -0
  57. package/references/airtable/DESIGN.md +107 -0
  58. package/references/airtable/README.md +23 -0
  59. package/references/airtable/preview-dark.html +165 -0
  60. package/references/airtable/preview.html +164 -0
  61. package/references/apple/DESIGN.md +496 -0
  62. package/references/apple/README.md +24 -0
  63. package/references/apple/preview-dark.html +420 -0
  64. package/references/apple/preview.html +414 -0
  65. package/references/baemin/DESIGN.md +260 -0
  66. package/references/baemin/README.md +19 -0
  67. package/references/bmw/DESIGN.md +180 -0
  68. package/references/bmw/README.md +23 -0
  69. package/references/bmw/preview-dark.html +211 -0
  70. package/references/bmw/preview.html +210 -0
  71. package/references/cal/DESIGN.md +259 -0
  72. package/references/cal/README.md +23 -0
  73. package/references/cal/preview-dark.html +449 -0
  74. package/references/cal/preview.html +575 -0
  75. package/references/claude/DESIGN.md +455 -0
  76. package/references/claude/README.md +24 -0
  77. package/references/claude/preview-dark.html +803 -0
  78. package/references/claude/preview.html +826 -0
  79. package/references/clay/DESIGN.md +304 -0
  80. package/references/clay/README.md +23 -0
  81. package/references/clay/preview-dark.html +316 -0
  82. package/references/clay/preview.html +315 -0
  83. package/references/clickhouse/DESIGN.md +281 -0
  84. package/references/clickhouse/README.md +24 -0
  85. package/references/clickhouse/preview-dark.html +834 -0
  86. package/references/clickhouse/preview.html +786 -0
  87. package/references/cohere/DESIGN.md +266 -0
  88. package/references/cohere/README.md +24 -0
  89. package/references/cohere/preview-dark.html +803 -0
  90. package/references/cohere/preview.html +807 -0
  91. package/references/coinbase/DESIGN.md +129 -0
  92. package/references/coinbase/README.md +23 -0
  93. package/references/coinbase/preview-dark.html +164 -0
  94. package/references/coinbase/preview.html +163 -0
  95. package/references/composio/DESIGN.md +307 -0
  96. package/references/composio/README.md +24 -0
  97. package/references/composio/preview-dark.html +958 -0
  98. package/references/composio/preview.html +933 -0
  99. package/references/cursor/DESIGN.md +322 -0
  100. package/references/cursor/README.md +24 -0
  101. package/references/cursor/preview-dark.html +393 -0
  102. package/references/cursor/preview.html +383 -0
  103. package/references/dcard/DESIGN.md +302 -0
  104. package/references/dcard/README.md +12 -0
  105. package/references/dcard/_research/forum-1440px.png +0 -0
  106. package/references/dcard/_research.md +77 -0
  107. package/references/elevenlabs/DESIGN.md +265 -0
  108. package/references/elevenlabs/README.md +23 -0
  109. package/references/elevenlabs/preview-dark.html +252 -0
  110. package/references/elevenlabs/preview.html +251 -0
  111. package/references/expo/DESIGN.md +281 -0
  112. package/references/expo/README.md +24 -0
  113. package/references/expo/preview-dark.html +533 -0
  114. package/references/expo/preview.html +533 -0
  115. package/references/ferrari/DESIGN.md +314 -0
  116. package/references/ferrari/README.md +23 -0
  117. package/references/ferrari/preview-dark.html +1162 -0
  118. package/references/ferrari/preview.html +1122 -0
  119. package/references/figma/DESIGN.md +399 -0
  120. package/references/figma/README.md +24 -0
  121. package/references/figma/preview-dark.html +822 -0
  122. package/references/figma/preview.html +832 -0
  123. package/references/framer/DESIGN.md +246 -0
  124. package/references/framer/README.md +23 -0
  125. package/references/framer/preview-dark.html +902 -0
  126. package/references/framer/preview.html +883 -0
  127. package/references/freee/DESIGN.md +308 -0
  128. package/references/freee/README.md +12 -0
  129. package/references/freee/_research/vibes-storybook-1440px.png +0 -0
  130. package/references/freee/_research.md +77 -0
  131. package/references/hashicorp/DESIGN.md +278 -0
  132. package/references/hashicorp/README.md +24 -0
  133. package/references/hashicorp/preview-dark.html +1202 -0
  134. package/references/hashicorp/preview.html +1193 -0
  135. package/references/ibm/DESIGN.md +332 -0
  136. package/references/ibm/README.md +24 -0
  137. package/references/ibm/preview-dark.html +443 -0
  138. package/references/ibm/preview.html +428 -0
  139. package/references/intercom/DESIGN.md +146 -0
  140. package/references/intercom/README.md +23 -0
  141. package/references/intercom/preview-dark.html +185 -0
  142. package/references/intercom/preview.html +184 -0
  143. package/references/kakao/DESIGN.md +261 -0
  144. package/references/kakao/README.md +18 -0
  145. package/references/karrot/DESIGN.md +252 -0
  146. package/references/karrot/README.md +18 -0
  147. package/references/kraken/DESIGN.md +146 -0
  148. package/references/kraken/README.md +23 -0
  149. package/references/kraken/preview-dark.html +169 -0
  150. package/references/kraken/preview.html +168 -0
  151. package/references/lamborghini/DESIGN.md +288 -0
  152. package/references/lamborghini/README.md +23 -0
  153. package/references/lamborghini/preview-dark.html +303 -0
  154. package/references/lamborghini/preview.html +381 -0
  155. package/references/line/DESIGN.md +375 -0
  156. package/references/line/README.md +12 -0
  157. package/references/line/_research/home-1440px.png +0 -0
  158. package/references/line/_research.md +65 -0
  159. package/references/linear.app/DESIGN.md +526 -0
  160. package/references/linear.app/README.md +24 -0
  161. package/references/linear.app/preview-dark.html +383 -0
  162. package/references/linear.app/preview.html +373 -0
  163. package/references/lovable/DESIGN.md +298 -0
  164. package/references/lovable/README.md +24 -0
  165. package/references/lovable/preview-dark.html +349 -0
  166. package/references/lovable/preview.html +348 -0
  167. package/references/mercari/DESIGN.md +294 -0
  168. package/references/mercari/README.md +12 -0
  169. package/references/mercari/_research/home-1440px.png +0 -0
  170. package/references/mercari/_research.md +77 -0
  171. package/references/minimax/DESIGN.md +257 -0
  172. package/references/minimax/README.md +24 -0
  173. package/references/minimax/preview-dark.html +1262 -0
  174. package/references/minimax/preview.html +1248 -0
  175. package/references/mintlify/DESIGN.md +341 -0
  176. package/references/mintlify/README.md +24 -0
  177. package/references/mintlify/preview-dark.html +409 -0
  178. package/references/mintlify/preview.html +398 -0
  179. package/references/miro/DESIGN.md +108 -0
  180. package/references/miro/README.md +23 -0
  181. package/references/miro/preview-dark.html +174 -0
  182. package/references/miro/preview.html +173 -0
  183. package/references/mistral.ai/DESIGN.md +261 -0
  184. package/references/mistral.ai/README.md +24 -0
  185. package/references/mistral.ai/preview-dark.html +806 -0
  186. package/references/mistral.ai/preview.html +805 -0
  187. package/references/mongodb/DESIGN.md +266 -0
  188. package/references/mongodb/README.md +23 -0
  189. package/references/mongodb/preview-dark.html +260 -0
  190. package/references/mongodb/preview.html +259 -0
  191. package/references/notion/DESIGN.md +492 -0
  192. package/references/notion/README.md +24 -0
  193. package/references/notion/preview-dark.html +372 -0
  194. package/references/notion/preview.html +364 -0
  195. package/references/nvidia/DESIGN.md +308 -0
  196. package/references/nvidia/README.md +24 -0
  197. package/references/nvidia/preview-dark.html +374 -0
  198. package/references/nvidia/preview.html +366 -0
  199. package/references/ollama/DESIGN.md +267 -0
  200. package/references/ollama/README.md +24 -0
  201. package/references/ollama/preview-dark.html +678 -0
  202. package/references/ollama/preview.html +678 -0
  203. package/references/opencode.ai/DESIGN.md +295 -0
  204. package/references/opencode.ai/README.md +24 -0
  205. package/references/opencode.ai/preview-dark.html +366 -0
  206. package/references/opencode.ai/preview.html +357 -0
  207. package/references/pinkoi/DESIGN.md +309 -0
  208. package/references/pinkoi/README.md +12 -0
  209. package/references/pinkoi/_research/browse-1440px.png +0 -0
  210. package/references/pinkoi/_research.md +115 -0
  211. package/references/pinterest/DESIGN.md +230 -0
  212. package/references/pinterest/README.md +23 -0
  213. package/references/pinterest/preview-dark.html +233 -0
  214. package/references/pinterest/preview.html +232 -0
  215. package/references/posthog/DESIGN.md +256 -0
  216. package/references/posthog/README.md +23 -0
  217. package/references/posthog/preview-dark.html +699 -0
  218. package/references/posthog/preview.html +749 -0
  219. package/references/raycast/DESIGN.md +268 -0
  220. package/references/raycast/README.md +23 -0
  221. package/references/raycast/preview-dark.html +606 -0
  222. package/references/raycast/preview.html +688 -0
  223. package/references/renault/DESIGN.md +311 -0
  224. package/references/renault/README.md +23 -0
  225. package/references/renault/preview-dark.html +406 -0
  226. package/references/renault/preview.html +606 -0
  227. package/references/replicate/DESIGN.md +261 -0
  228. package/references/replicate/README.md +24 -0
  229. package/references/replicate/preview-dark.html +828 -0
  230. package/references/replicate/preview.html +831 -0
  231. package/references/resend/DESIGN.md +303 -0
  232. package/references/resend/README.md +23 -0
  233. package/references/resend/preview-dark.html +355 -0
  234. package/references/resend/preview.html +354 -0
  235. package/references/revolut/DESIGN.md +185 -0
  236. package/references/revolut/README.md +23 -0
  237. package/references/revolut/preview-dark.html +234 -0
  238. package/references/revolut/preview.html +233 -0
  239. package/references/runwayml/DESIGN.md +244 -0
  240. package/references/runwayml/README.md +24 -0
  241. package/references/runwayml/preview-dark.html +664 -0
  242. package/references/runwayml/preview.html +665 -0
  243. package/references/sanity/DESIGN.md +357 -0
  244. package/references/sanity/README.md +24 -0
  245. package/references/sanity/preview-dark.html +990 -0
  246. package/references/sanity/preview.html +1135 -0
  247. package/references/sentry/DESIGN.md +262 -0
  248. package/references/sentry/README.md +24 -0
  249. package/references/sentry/preview-dark.html +626 -0
  250. package/references/sentry/preview.html +951 -0
  251. package/references/spacex/DESIGN.md +205 -0
  252. package/references/spacex/README.md +23 -0
  253. package/references/spacex/preview-dark.html +221 -0
  254. package/references/spacex/preview.html +220 -0
  255. package/references/spotify/DESIGN.md +246 -0
  256. package/references/spotify/README.md +23 -0
  257. package/references/spotify/preview-dark.html +231 -0
  258. package/references/spotify/preview.html +230 -0
  259. package/references/stripe/DESIGN.md +473 -0
  260. package/references/stripe/README.md +24 -0
  261. package/references/stripe/preview-dark.html +428 -0
  262. package/references/stripe/preview.html +419 -0
  263. package/references/supabase/DESIGN.md +255 -0
  264. package/references/supabase/README.md +24 -0
  265. package/references/supabase/preview-dark.html +977 -0
  266. package/references/supabase/preview.html +955 -0
  267. package/references/superhuman/DESIGN.md +252 -0
  268. package/references/superhuman/README.md +23 -0
  269. package/references/superhuman/preview-dark.html +973 -0
  270. package/references/superhuman/preview.html +951 -0
  271. package/references/tesla/DESIGN.md +286 -0
  272. package/references/tesla/README.md +23 -0
  273. package/references/tesla/preview-dark.html +947 -0
  274. package/references/tesla/preview.html +925 -0
  275. package/references/together.ai/DESIGN.md +263 -0
  276. package/references/together.ai/README.md +24 -0
  277. package/references/together.ai/preview-dark.html +892 -0
  278. package/references/together.ai/preview.html +897 -0
  279. package/references/toss/DESIGN.md +387 -0
  280. package/references/toss/README.md +19 -0
  281. package/references/uber/DESIGN.md +295 -0
  282. package/references/uber/README.md +24 -0
  283. package/references/uber/preview-dark.html +1120 -0
  284. package/references/uber/preview.html +1119 -0
  285. package/references/vercel/DESIGN.md +456 -0
  286. package/references/vercel/README.md +24 -0
  287. package/references/vercel/preview-dark.html +368 -0
  288. package/references/vercel/preview.html +367 -0
  289. package/references/voltagent/DESIGN.md +323 -0
  290. package/references/voltagent/README.md +24 -0
  291. package/references/voltagent/preview-dark.html +487 -0
  292. package/references/voltagent/preview.html +766 -0
  293. package/references/warp/DESIGN.md +253 -0
  294. package/references/warp/README.md +23 -0
  295. package/references/warp/preview-dark.html +500 -0
  296. package/references/warp/preview.html +533 -0
  297. package/references/webflow/DESIGN.md +109 -0
  298. package/references/webflow/README.md +23 -0
  299. package/references/webflow/preview-dark.html +147 -0
  300. package/references/webflow/preview.html +146 -0
  301. package/references/wise/DESIGN.md +173 -0
  302. package/references/wise/README.md +23 -0
  303. package/references/wise/preview-dark.html +230 -0
  304. package/references/wise/preview.html +229 -0
  305. package/references/x.ai/DESIGN.md +267 -0
  306. package/references/x.ai/README.md +24 -0
  307. package/references/x.ai/preview-dark.html +356 -0
  308. package/references/x.ai/preview.html +407 -0
  309. package/references/zapier/DESIGN.md +328 -0
  310. package/references/zapier/README.md +24 -0
  311. package/references/zapier/preview-dark.html +380 -0
  312. package/references/zapier/preview.html +372 -0
  313. package/skills/omd-apply/SKILL.md +85 -0
  314. package/skills/omd-init/SKILL.md +167 -0
  315. package/skills/omd-learn/SKILL.md +81 -0
  316. package/skills/omd-remember/SKILL.md +44 -0
  317. package/skills/omd-sync/SKILL.md +38 -0
package/references/webflow/preview-dark.html ADDED
@@ -0,0 +1,147 @@
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.0">
6
+ <title>Design System Inspired by Webflow</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root { --white:#080808; --black:#f0f0f0; --blue:#146ef5; --blue-400:#3b89ff; --purple:#7a3dff; --pink:#ed52cb; --green:#00d722; --orange:#ff6b00; --yellow:#ffae13; --red:#ee1d36; --gray:#a0a0a0; --gray-300:#555555; --border:#2a2a2a; --font:'Inter',Arial,sans-serif; }
12
+ * { margin:0; padding:0; box-sizing:border-box; }
13
+ body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.60; -webkit-font-smoothing:antialiased; }
14
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--border); }
15
+ .nav-brand { font-size:14px; font-weight:600; color:var(--black); text-decoration:none; }
16
+ .nav-links { display:flex; gap:20px; list-style:none; }
17
+ .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
18
+ .nav-links a:hover { color:var(--blue); }
19
+ .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:8px 16px; border-radius:4px; font-size:14px; font-weight:500; text-decoration:none; }
20
+ .hero { padding:80px 24px 64px; text-align:center; }
21
+ .hero h1 { font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px; margin-bottom:16px; }
22
+ .hero h1 span { color:var(--blue); }
23
+ .hero p { font-size:20px; color:var(--gray); max-width:520px; margin:0 auto 32px; }
24
+ .hero-buttons { display:flex; gap:12px; justify-content:center; }
25
+ .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:4px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:-0.16px; transition:transform 0.2s; }
26
+ .btn-blue:hover { transform:translate(6px); }
27
+ .btn-outline { display:inline-block; background:var(--white); color:var(--black); padding:12px 24px; border-radius:4px; border:1px solid var(--border); font-size:16px; font-weight:500; text-decoration:none; transition:transform 0.2s; }
28
+ .btn-outline:hover { transform:translate(6px); }
29
+ .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
30
+ .section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300); margin-bottom:8px; }
31
+ .section-title { font-size:56px; font-weight:600; line-height:1.04; margin-bottom:24px; }
32
+ .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
33
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px; margin-bottom:16px; }
34
+ .color-swatch { border-radius:4px; overflow:hidden; border:1px solid var(--border); }
35
+ .color-swatch-block { height:48px; }
36
+ .color-swatch-info { padding:6px; }
37
+ .color-swatch-name { font-size:10px; font-weight:500; margin-bottom:1px; }
38
+ .color-swatch-hex { font-size:9px; color:var(--gray-300); font-family:monospace; }
39
+ .color-group-label { font-size:10px; font-weight:600; color:var(--gray); margin:12px 0 4px; text-transform:uppercase; letter-spacing:0.6px; }
40
+ .type-sample { margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(216,216,216,0.5); }
41
+ .type-sample:last-child { border-bottom:none; }
42
+ .type-meta { font-size:8px; color:var(--gray-300); margin-top:2px; font-family:monospace; }
43
+ .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
44
+ .button-item { text-align:center; }
45
+ .button-label { font-size:8px; color:var(--gray-300); margin-top:4px; }
46
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:10px; }
47
+ .card { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:16px; }
48
+ .card h3 { font-size:24px; font-weight:500; line-height:1.30; margin-bottom:6px; }
49
+ .card p { font-size:14px; color:var(--gray); }
50
+ .form-group { margin-bottom:10px; max-width:360px; }
51
+ .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:3px; }
52
+ .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 12px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }
53
+ .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
54
+ .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
55
+ .form-input--error { border-color:var(--red); }
56
+ .form-textarea { width:100%; min-height:60px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 12px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
57
+ .form-state-label { font-size:8px; color:var(--gray-300); margin-top:2px; }
58
+ .spacing-row { display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
59
+ .spacing-item { text-align:center; }
60
+ .spacing-block { background:var(--blue); border-radius:2px; margin-bottom:2px; height:18px; opacity:0.5; }
61
+ .spacing-value { font-size:7px; color:var(--gray-300); font-family:monospace; }
62
+ .radius-row { display:flex; gap:8px; flex-wrap:wrap; }
63
+ .radius-item { text-align:center; }
64
+ .radius-box { width:40px; height:40px; background:rgba(20,110,245,0.1); border:1px solid var(--blue); margin-bottom:2px; }
65
+ .radius-label { font-size:7px; color:var(--gray-300); font-family:monospace; }
66
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:8px; }
67
+ .elevation-card { background:var(--white); border-radius:8px; padding:12px; text-align:center; }
68
+ .elevation-label { font-size:11px; font-weight:500; margin-bottom:2px; }
69
+ .elevation-desc { font-size:7px; color:var(--gray-300); font-family:monospace; }
70
+ .footer { padding:20px; text-align:center; background:var(--blue); color:rgba(255,255,255,0.7); font-size:10px; }
71
+ .footer a { color:var(--white); text-decoration:underline; }
72
+ @media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } .section-title { font-size:32px; } }
73
+ </style>
74
+ </head>
75
+ <body>
76
+ <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Get started</a></nav>
77
+ <div style="position:fixed;top:16px;right:16px;z-index:200;background:#146ef5;color:#fff;font-size:9px;font-weight:500;padding:3px 8px;border-radius:4px;">Dark Mode</div>
78
+ <section class="hero"><h1>Design System<br>Inspired by <span>Webflow</span></h1><p>Every color, font, and component — smarter sites start here.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get started — it's free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
79
+ <hr class="section-divider">
80
+ <section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
81
+ <div class="color-group-label">Primary</div>
82
+ <div class="color-grid">
83
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#080808"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#080808</div></div></div>
84
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#146ef5"></div><div class="color-swatch-info"><div class="color-swatch-name">Webflow Blue</div><div class="color-swatch-hex">#146ef5</div></div></div>
85
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#3b89ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 400</div><div class="color-swatch-hex">#3b89ff</div></div></div>
86
+ </div>
87
+ <div class="color-group-label">Secondary</div>
88
+ <div class="color-grid">
89
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#7a3dff"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple</div><div class="color-swatch-hex">#7a3dff</div></div></div>
90
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ed52cb"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ed52cb</div></div></div>
91
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#00d722"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#00d722</div></div></div>
92
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ff6b00"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#ff6b00</div></div></div>
93
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffae13"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow</div><div class="color-swatch-hex">#ffae13</div></div></div>
94
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ee1d36"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#ee1d36</div></div></div>
95
+ </div>
96
+ <div class="color-group-label">Neutral</div>
97
+ <div class="color-grid">
98
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 800</div><div class="color-swatch-hex">#222222</div></div></div>
99
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#363636"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 700</div><div class="color-swatch-hex">#363636</div></div></div>
100
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#5a5a5a"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Gray</div><div class="color-swatch-hex">#5a5a5a</div></div></div>
101
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ababab"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 300</div><div class="color-swatch-hex">#ababab</div></div></div>
102
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#d8d8d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#d8d8d8</div></div></div>
103
+ </div></section>
104
+ <hr class="section-divider">
105
+ <section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography</h2>
106
+ <div class="type-sample"><div style="font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px;">Display Hero</div><div class="type-meta">WF Visual Sans — 80px / 600 / 1.04 / -0.8px</div></div>
107
+ <div class="type-sample"><div style="font-size:32px; font-weight:500; line-height:1.30;">Sub-heading</div><div class="type-meta">WF Visual Sans — 32px / 500 / 1.30</div></div>
108
+ <div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.50; color:var(--gray);">Body — Smarter sites start here. Build your next project with the web platform.</div><div class="type-meta">WF Visual Sans — 20px / 400 / 1.50</div></div>
109
+ <div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.60; letter-spacing:-0.16px;">Button Label</div><div class="type-meta">WF Visual Sans — 16px / 500 / 1.60 / -0.16px</div></div>
110
+ <div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.30; text-transform:uppercase; letter-spacing:1.5px;">UPPERCASE LABEL</div><div class="type-meta">WF Visual Sans — 15px / 500 / uppercase / +1.5px</div></div>
111
+ <div class="type-sample"><div style="font-size:10px; font-weight:600; line-height:1.30; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300);">MICRO LABEL</div><div class="type-meta">WF Visual Sans — 10px / 600 / uppercase / +1px</div></div>
112
+ </section>
113
+ <hr class="section-divider">
114
+ <section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
115
+ <div class="button-row">
116
+ <div class="button-item"><a class="btn-blue" href="#">Get started</a><div class="button-label">Primary Blue</div></div>
117
+ <div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
118
+ <div class="button-item"><span style="display:inline-block; background:rgba(20,110,245,0.1); color:var(--blue); padding:3.2px 6px; border-radius:4px; font-size:12.8px; font-weight:550;">NEW</span><div class="button-label">Badge</div></div>
119
+ </div>
120
+ <p style="font-size:11px; color:var(--gray-300); margin-top:10px;">Hover to see translate(6px).</p>
121
+ </section>
122
+ <hr class="section-divider">
123
+ <section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
124
+ <div class="card-grid">
125
+ <div class="card"><h3>Design</h3><p>Build visually with a flexible canvas and production-ready code output.</p></div>
126
+ <div class="card"><h3>CMS</h3><p>Create dynamic content with a powerful content management system.</p></div>
127
+ <div class="card"><h3>Interactions</h3><p>Craft complex animations without writing a single line of code.</p></div>
128
+ </div></section>
129
+ <hr class="section-divider">
130
+ <section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
131
+ <div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
132
+ <div class="form-group"><label class="form-label">Project</label><input class="form-input form-input--focus" type="text" value="My Website"><div class="form-state-label">Focus (blue ring)</div></div>
133
+ <div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
134
+ <div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your project..."></textarea></div>
135
+ </section>
136
+ <hr class="section-divider">
137
+ <section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
138
+ <div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
139
+ <hr class="section-divider">
140
+ <section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
141
+ <div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50%; width:40px; height:40px;"></div><div class="radius-label">50%</div></div></div></section>
142
+ <hr class="section-divider">
143
+ <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
144
+ <div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.09) 0px 3px 7px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.04) 0px 30px 18px;"><div class="elevation-label">5-Layer</div><div class="elevation-desc">Cascading shadow stack</div></div></div></section>
145
+ <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
146
+ </body>
147
+ </html>
package/references/webflow/preview.html ADDED
@@ -0,0 +1,146 @@
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.0">
6
+ <title>Design System Inspired by Webflow</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root { --white:#fff; --black:#080808; --blue:#146ef5; --blue-400:#3b89ff; --purple:#7a3dff; --pink:#ed52cb; --green:#00d722; --orange:#ff6b00; --yellow:#ffae13; --red:#ee1d36; --gray:#5a5a5a; --gray-300:#ababab; --border:#d8d8d8; --font:'Inter',Arial,sans-serif; }
12
+ * { margin:0; padding:0; box-sizing:border-box; }
13
+ body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.60; -webkit-font-smoothing:antialiased; }
14
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--border); }
15
+ .nav-brand { font-size:14px; font-weight:600; color:var(--black); text-decoration:none; }
16
+ .nav-links { display:flex; gap:20px; list-style:none; }
17
+ .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
18
+ .nav-links a:hover { color:var(--blue); }
19
+ .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:8px 16px; border-radius:4px; font-size:14px; font-weight:500; text-decoration:none; }
20
+ .hero { padding:80px 24px 64px; text-align:center; }
21
+ .hero h1 { font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px; margin-bottom:16px; }
22
+ .hero h1 span { color:var(--blue); }
23
+ .hero p { font-size:20px; color:var(--gray); max-width:520px; margin:0 auto 32px; }
24
+ .hero-buttons { display:flex; gap:12px; justify-content:center; }
25
+ .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:4px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:-0.16px; transition:transform 0.2s; }
26
+ .btn-blue:hover { transform:translate(6px); }
27
+ .btn-outline { display:inline-block; background:var(--white); color:var(--black); padding:12px 24px; border-radius:4px; border:1px solid var(--border); font-size:16px; font-weight:500; text-decoration:none; transition:transform 0.2s; }
28
+ .btn-outline:hover { transform:translate(6px); }
29
+ .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
30
+ .section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300); margin-bottom:8px; }
31
+ .section-title { font-size:56px; font-weight:600; line-height:1.04; margin-bottom:24px; }
32
+ .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
33
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px; margin-bottom:16px; }
34
+ .color-swatch { border-radius:4px; overflow:hidden; border:1px solid var(--border); }
35
+ .color-swatch-block { height:48px; }
36
+ .color-swatch-info { padding:6px; }
37
+ .color-swatch-name { font-size:10px; font-weight:500; margin-bottom:1px; }
38
+ .color-swatch-hex { font-size:9px; color:var(--gray-300); font-family:monospace; }
39
+ .color-group-label { font-size:10px; font-weight:600; color:var(--gray); margin:12px 0 4px; text-transform:uppercase; letter-spacing:0.6px; }
40
+ .type-sample { margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(216,216,216,0.5); }
41
+ .type-sample:last-child { border-bottom:none; }
42
+ .type-meta { font-size:8px; color:var(--gray-300); margin-top:2px; font-family:monospace; }
43
+ .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
44
+ .button-item { text-align:center; }
45
+ .button-label { font-size:8px; color:var(--gray-300); margin-top:4px; }
46
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:10px; }
47
+ .card { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:16px; }
48
+ .card h3 { font-size:24px; font-weight:500; line-height:1.30; margin-bottom:6px; }
49
+ .card p { font-size:14px; color:var(--gray); }
50
+ .form-group { margin-bottom:10px; max-width:360px; }
51
+ .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:3px; }
52
+ .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 12px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }
53
+ .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
54
+ .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
55
+ .form-input--error { border-color:var(--red); }
56
+ .form-textarea { width:100%; min-height:60px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 12px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
57
+ .form-state-label { font-size:8px; color:var(--gray-300); margin-top:2px; }
58
+ .spacing-row { display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
59
+ .spacing-item { text-align:center; }
60
+ .spacing-block { background:var(--blue); border-radius:2px; margin-bottom:2px; height:18px; opacity:0.5; }
61
+ .spacing-value { font-size:7px; color:var(--gray-300); font-family:monospace; }
62
+ .radius-row { display:flex; gap:8px; flex-wrap:wrap; }
63
+ .radius-item { text-align:center; }
64
+ .radius-box { width:40px; height:40px; background:rgba(20,110,245,0.1); border:1px solid var(--blue); margin-bottom:2px; }
65
+ .radius-label { font-size:7px; color:var(--gray-300); font-family:monospace; }
66
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:8px; }
67
+ .elevation-card { background:var(--white); border-radius:8px; padding:12px; text-align:center; }
68
+ .elevation-label { font-size:11px; font-weight:500; margin-bottom:2px; }
69
+ .elevation-desc { font-size:7px; color:var(--gray-300); font-family:monospace; }
70
+ .footer { padding:20px; text-align:center; background:var(--blue); color:rgba(255,255,255,0.7); font-size:10px; }
71
+ .footer a { color:var(--white); text-decoration:underline; }
72
+ @media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } .section-title { font-size:32px; } }
73
+ </style>
74
+ </head>
75
+ <body>
76
+ <nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Get started</a></nav>
77
+ <section class="hero"><h1>Design System<br>Inspired by <span>Webflow</span></h1><p>Every color, font, and component — smarter sites start here.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get started — it's free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
78
+ <hr class="section-divider">
79
+ <section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
80
+ <div class="color-group-label">Primary</div>
81
+ <div class="color-grid">
82
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#080808"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#080808</div></div></div>
83
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#146ef5"></div><div class="color-swatch-info"><div class="color-swatch-name">Webflow Blue</div><div class="color-swatch-hex">#146ef5</div></div></div>
84
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#3b89ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 400</div><div class="color-swatch-hex">#3b89ff</div></div></div>
85
+ </div>
86
+ <div class="color-group-label">Secondary</div>
87
+ <div class="color-grid">
88
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#7a3dff"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple</div><div class="color-swatch-hex">#7a3dff</div></div></div>
89
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ed52cb"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ed52cb</div></div></div>
90
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#00d722"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#00d722</div></div></div>
91
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ff6b00"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#ff6b00</div></div></div>
92
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffae13"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow</div><div class="color-swatch-hex">#ffae13</div></div></div>
93
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ee1d36"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#ee1d36</div></div></div>
94
+ </div>
95
+ <div class="color-group-label">Neutral</div>
96
+ <div class="color-grid">
97
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 800</div><div class="color-swatch-hex">#222222</div></div></div>
98
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#363636"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 700</div><div class="color-swatch-hex">#363636</div></div></div>
99
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#5a5a5a"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Gray</div><div class="color-swatch-hex">#5a5a5a</div></div></div>
100
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ababab"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 300</div><div class="color-swatch-hex">#ababab</div></div></div>
101
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#d8d8d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#d8d8d8</div></div></div>
102
+ </div></section>
103
+ <hr class="section-divider">
104
+ <section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography</h2>
105
+ <div class="type-sample"><div style="font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px;">Display Hero</div><div class="type-meta">WF Visual Sans — 80px / 600 / 1.04 / -0.8px</div></div>
106
+ <div class="type-sample"><div style="font-size:32px; font-weight:500; line-height:1.30;">Sub-heading</div><div class="type-meta">WF Visual Sans — 32px / 500 / 1.30</div></div>
107
+ <div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.50; color:var(--gray);">Body — Smarter sites start here. Build your next project with the web platform.</div><div class="type-meta">WF Visual Sans — 20px / 400 / 1.50</div></div>
108
+ <div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.60; letter-spacing:-0.16px;">Button Label</div><div class="type-meta">WF Visual Sans — 16px / 500 / 1.60 / -0.16px</div></div>
109
+ <div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.30; text-transform:uppercase; letter-spacing:1.5px;">UPPERCASE LABEL</div><div class="type-meta">WF Visual Sans — 15px / 500 / uppercase / +1.5px</div></div>
110
+ <div class="type-sample"><div style="font-size:10px; font-weight:600; line-height:1.30; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300);">MICRO LABEL</div><div class="type-meta">WF Visual Sans — 10px / 600 / uppercase / +1px</div></div>
111
+ </section>
112
+ <hr class="section-divider">
113
+ <section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
114
+ <div class="button-row">
115
+ <div class="button-item"><a class="btn-blue" href="#">Get started</a><div class="button-label">Primary Blue</div></div>
116
+ <div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
117
+ <div class="button-item"><span style="display:inline-block; background:rgba(20,110,245,0.1); color:var(--blue); padding:3.2px 6px; border-radius:4px; font-size:12.8px; font-weight:550;">NEW</span><div class="button-label">Badge</div></div>
118
+ </div>
119
+ <p style="font-size:11px; color:var(--gray-300); margin-top:10px;">Hover to see translate(6px).</p>
120
+ </section>
121
+ <hr class="section-divider">
122
+ <section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
123
+ <div class="card-grid">
124
+ <div class="card"><h3>Design</h3><p>Build visually with a flexible canvas and production-ready code output.</p></div>
125
+ <div class="card"><h3>CMS</h3><p>Create dynamic content with a powerful content management system.</p></div>
126
+ <div class="card"><h3>Interactions</h3><p>Craft complex animations without writing a single line of code.</p></div>
127
+ </div></section>
128
+ <hr class="section-divider">
129
+ <section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
130
+ <div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
131
+ <div class="form-group"><label class="form-label">Project</label><input class="form-input form-input--focus" type="text" value="My Website"><div class="form-state-label">Focus (blue ring)</div></div>
132
+ <div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
133
+ <div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your project..."></textarea></div>
134
+ </section>
135
+ <hr class="section-divider">
136
+ <section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
137
+ <div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
138
+ <hr class="section-divider">
139
+ <section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
140
+ <div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50%; width:40px; height:40px;"></div><div class="radius-label">50%</div></div></div></section>
141
+ <hr class="section-divider">
142
+ <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
143
+ <div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.09) 0px 3px 7px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.04) 0px 30px 18px;"><div class="elevation-label">5-Layer</div><div class="elevation-desc">Cascading shadow stack</div></div></div></section>
144
+ <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
145
+ </body>
146
+ </html>
package/references/wise/DESIGN.md ADDED
@@ -0,0 +1,173 @@
1
+ # Design System Inspiration of Wise
2
+
3
+ ## 1. Visual Theme & Atmosphere
4
+
5
+ Wise's website is a bold, confident fintech platform that communicates "money without borders" through massive typography and a distinctive lime-green accent. The design operates on a warm off-white canvas with near-black text (`#0e0f0c`) and a signature Wise Green (`#9fe870`) — a fresh, lime-bright color that feels alive and optimistic, unlike the corporate blues of traditional banking.
6
+
7
+ The typography uses Wise Sans — a proprietary font used at extreme weight 900 (black) for display headings with a remarkably tight line-height of 0.85 and OpenType `"calt"` (contextual alternates). At 126px, the text is so dense it feels like a protest sign — bold, urgent, and impossible to ignore. Inter serves as the body font with weight 600 as the default for emphasis, creating a consistently confident voice.
8
+
9
+ What distinguishes Wise is its green-on-white-on-black material palette. Lime Green (`#9fe870`) appears on buttons with dark green text (`#163300`), creating a nature-inspired CTA that feels fresh. Hover states use `scale(1.05)` expansion rather than color changes — buttons physically grow on interaction. The border-radius system uses 9999px for buttons (pill), 30px–40px for cards, and the shadow system is minimal — just `rgba(14,15,12,0.12) 0px 0px 0px 1px` ring shadows.
10
+
11
+ **Key Characteristics:**
12
+ - Wise Sans at weight 900, 0.85 line-height — billboard-scale bold headlines
13
+ - Lime Green (`#9fe870`) accent with dark green text (`#163300`) — nature-inspired fintech
14
+ - Inter body at weight 600 as default — confident, not light
15
+ - Near-black (`#0e0f0c`) primary with warm green undertone
16
+ - Scale(1.05) hover animations — buttons physically grow
17
+ - OpenType `"calt"` on all text
18
+ - Pill buttons (9999px) and large rounded cards (30px–40px)
19
+ - Semantic color system with comprehensive state management
20
+
21
+ ## 2. Color Palette & Roles
22
+
23
+ ### Primary Brand
24
+ - **Near Black** (`#0e0f0c`): Primary text, background for dark sections
25
+ - **Wise Green** (`#9fe870`): Primary CTA button, brand accent
26
+ - **Dark Green** (`#163300`): Button text on green, deep green accent
27
+ - **Light Mint** (`#e2f6d5`): Soft green surface, badge backgrounds
28
+ - **Pastel Green** (`#cdffad`): `--color-interactive-contrast-hover`, hover accent
29
+
30
+ ### Semantic
31
+ - **Positive Green** (`#054d28`): `--color-sentiment-positive-primary`, success
32
+ - **Danger Red** (`#d03238`): `--color-interactive-negative-hover`, error/destructive
33
+ - **Warning Yellow** (`#ffd11a`): `--color-sentiment-warning-hover`, warnings
34
+ - **Background Cyan** (`rgba(56,200,255,0.10)`): `--color-background-accent`, info tint
35
+ - **Bright Orange** (`#ffc091`): `--color-bright-orange`, warm accent
36
+
37
+ ### Neutral
38
+ - **Warm Dark** (`#454745`): Secondary text, borders
39
+ - **Gray** (`#868685`): Muted text, tertiary
40
+ - **Light Surface** (`#e8ebe6`): Subtle green-tinted light surface
41
+
42
+ ## 3. Typography Rules
43
+
44
+ ### Font Families
45
+ - **Display**: `Wise Sans`, fallback: `Inter` — OpenType `"calt"` on all text
46
+ - **Body / UI**: `Inter`, fallbacks: `Helvetica, Arial`
47
+
48
+ ### Hierarchy
49
+
50
+ | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
51
+ |------|------|------|--------|-------------|----------------|-------|
52
+ | Display Mega | Wise Sans | 126px (7.88rem) | 900 | 0.85 (ultra-tight) | normal | `"calt"` |
53
+ | Display Hero | Wise Sans | 96px (6.00rem) | 900 | 0.85 | normal | `"calt"` |
54
+ | Section Heading | Wise Sans | 64px (4.00rem) | 900 | 0.85 | normal | `"calt"` |
55
+ | Sub-heading | Wise Sans | 40px (2.50rem) | 900 | 0.85 | normal | `"calt"` |
56
+ | Alt Heading | Inter | 78px (4.88rem) | 600 | 1.10 (tight) | -2.34px | `"calt"` |
57
+ | Card Title | Inter | 26px (1.62rem) | 600 | 1.23 (tight) | -0.39px | `"calt"` |
58
+ | Feature Title | Inter | 22px (1.38rem) | 600 | 1.25 (tight) | -0.396px | `"calt"` |
59
+ | Body | Inter | 18px (1.13rem) | 400 | 1.44 | 0.18px | `"calt"` |
60
+ | Body Semibold | Inter | 18px (1.13rem) | 600 | 1.44 | -0.108px | `"calt"` |
61
+ | Button | Inter | 18px–22px | 600 | 1.00–1.44 | -0.108px | `"calt"` |
62
+ | Caption | Inter | 14px (0.88rem) | 400–600 | 1.50–1.86 | -0.084px to -0.108px | `"calt"` |
63
+ | Small | Inter | 12px (0.75rem) | 400–600 | 1.00–2.17 | -0.084px to -0.108px | `"calt"` |
64
+
65
+ ### Principles
66
+ - **Weight 900 as identity**: Wise Sans Black (900) is used exclusively for display — the heaviest weight in any analyzed system. It creates text that feels stamped, pressed, physical.
67
+ - **0.85 line-height**: The tightest display line-height analyzed. Letters overlap vertically, creating dense, billboard-like text blocks.
68
+ - **"calt" everywhere**: Contextual alternates enabled on ALL text — both Wise Sans and Inter.
69
+ - **Weight 600 as body default**: Inter Semibold is the standard reading weight — confident, not light.
70
+
71
+ ## 4. Component Stylings
72
+
73
+ ### Buttons
74
+
75
+ **Primary Green Pill**
76
+ - Background: `#9fe870` (Wise Green)
77
+ - Text: `#163300` (Dark Green)
78
+ - Padding: 5px 16px
79
+ - Radius: 9999px
80
+ - Hover: scale(1.05) — button physically grows
81
+ - Active: scale(0.95) — button compresses
82
+ - Focus: inset ring + outline
83
+
84
+ **Secondary Subtle Pill**
85
+ - Background: `rgba(22, 51, 0, 0.08)` (dark green at 8% opacity)
86
+ - Text: `#0e0f0c`
87
+ - Padding: 8px 12px 8px 16px
88
+ - Radius: 9999px
89
+ - Same scale hover/active behavior
90
+
91
+ ### Cards & Containers
92
+ - Radius: 16px (small), 30px (medium), 40px (large cards/tables)
93
+ - Border: `1px solid rgba(14,15,12,0.12)` or `1px solid #9fe870` (green accent)
94
+ - Shadow: `rgba(14,15,12,0.12) 0px 0px 0px 1px` (ring shadow)
95
+
96
+ ### Navigation
97
+ - Green-tinted navigation hover: `rgba(211,242,192,0.4)`
98
+ - Clean header with Wise wordmark
99
+ - Pill CTAs right-aligned
100
+
101
+ ## 5. Layout Principles
102
+
103
+ ### Spacing System
104
+ - Base unit: 8px
105
+ - Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px
106
+
107
+ ### Border Radius Scale
108
+ - Minimal (2px): Links, inputs
109
+ - Standard (10px): Comboboxes, inputs
110
+ - Card (16px): Small cards, buttons, radio
111
+ - Medium (20px): Links, medium cards
112
+ - Large (30px): Feature cards
113
+ - Section (40px): Tables, large cards
114
+ - Mega (1000px): Presentation elements
115
+ - Pill (9999px): All buttons, images
116
+ - Circle (50%): Icons, badges
117
+
118
+ ## 6. Depth & Elevation
119
+
120
+ | Level | Treatment | Use |
121
+ |-------|-----------|-----|
122
+ | Flat (Level 0) | No shadow | Default |
123
+ | Ring (Level 1) | `rgba(14,15,12,0.12) 0px 0px 0px 1px` | Card borders |
124
+ | Inset (Level 2) | `rgb(134,134,133) 0px 0px 0px 1px inset` | Input focus |
125
+
126
+ **Shadow Philosophy**: Wise uses minimal shadows — ring shadows only. Depth comes from the bold green accent against the neutral canvas.
127
+
128
+ ## 7. Do's and Don'ts
129
+
130
+ ### Do
131
+ - Use Wise Sans weight 900 for display — the extreme boldness IS the brand
132
+ - Apply line-height 0.85 on Wise Sans display — ultra-tight is intentional
133
+ - Use Lime Green (#9fe870) for primary CTAs with Dark Green (#163300) text
134
+ - Apply scale(1.05) hover and scale(0.95) active on buttons
135
+ - Enable "calt" on all text
136
+ - Use Inter weight 600 as the body default
137
+
138
+ ### Don't
139
+ - Don't use light font weights for Wise Sans — only 900
140
+ - Don't relax the 0.85 line-height on display — the density is the identity
141
+ - Don't use the Wise Green as background for large surfaces — it's for buttons and accents
142
+ - Don't skip the scale animation on buttons
143
+ - Don't use traditional shadows — ring shadows only
144
+
145
+ ## 8. Responsive Behavior
146
+
147
+ ### Breakpoints
148
+ | Name | Width | Key Changes |
149
+ |------|-------|-------------|
150
+ | Mobile | <576px | Single column |
151
+ | Tablet | 576–992px | 2-column |
152
+ | Desktop | 992–1440px | Full layout |
153
+ | Large | >1440px | Expanded |
154
+
155
+ ## 9. Agent Prompt Guide
156
+
157
+ ### Quick Color Reference
158
+ - Text: Near Black (`#0e0f0c`)
159
+ - Background: White (`#ffffff` / off-white)
160
+ - Accent: Wise Green (`#9fe870`)
161
+ - Button text: Dark Green (`#163300`)
162
+ - Secondary: Gray (`#868685`)
163
+
164
+ ### Example Component Prompts
165
+ - "Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, 'calt' enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05)."
166
+ - "Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400."
167
+
168
+ ### Iteration Guide
169
+ 1. Wise Sans 900 at 0.85 line-height — the extreme weight IS the brand
170
+ 2. Lime Green for buttons only — dark green text on green background
171
+ 3. Scale animations (1.05 hover, 0.95 active) on all interactive elements
172
+ 4. "calt" on everything — contextual alternates are mandatory
173
+ 5. Inter 600 for body — confident reading weight
package/references/wise/README.md ADDED
@@ -0,0 +1,23 @@
1
+ # Wise Inspired Design System
2
+
3
+ [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/wise/DESIGN.md) extracted from the public [Wise](https://wise.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
4
+
5
+ ## Files
6
+
7
+ | File | Description |
8
+ |------|-------------|
9
+ | `DESIGN.md` | Complete design system documentation (9 sections) |
10
+ | `preview.html` | Interactive design token catalog (light) |
11
+ | `preview-dark.html` | Interactive design token catalog (dark) |
12
+
13
+ Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/wise/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Wise design language.
14
+
15
+ ## Preview
16
+
17
+ A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
18
+
19
+ ### Dark Mode
20
+ ![Wise Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/wise/preview-dark-screenshot.png)
21
+
22
+ ### Light Mode
23
+ ![Wise Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/wise/preview-screenshot.png)