awesome-design-md 1.0.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 (220) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +172 -0
  3. package/bin/cli.mjs +126 -0
  4. package/design-md/airbnb/DESIGN.md +246 -0
  5. package/design-md/airbnb/README.md +23 -0
  6. package/design-md/airbnb/preview-dark.html +234 -0
  7. package/design-md/airbnb/preview.html +233 -0
  8. package/design-md/airtable/DESIGN.md +89 -0
  9. package/design-md/airtable/README.md +23 -0
  10. package/design-md/airtable/preview-dark.html +165 -0
  11. package/design-md/airtable/preview.html +164 -0
  12. package/design-md/apple/DESIGN.md +313 -0
  13. package/design-md/apple/README.md +24 -0
  14. package/design-md/apple/preview-dark.html +422 -0
  15. package/design-md/apple/preview.html +416 -0
  16. package/design-md/bmw/DESIGN.md +180 -0
  17. package/design-md/bmw/README.md +23 -0
  18. package/design-md/bmw/preview-dark.html +211 -0
  19. package/design-md/bmw/preview.html +210 -0
  20. package/design-md/cal/DESIGN.md +259 -0
  21. package/design-md/cal/README.md +23 -0
  22. package/design-md/cal/preview-dark.html +449 -0
  23. package/design-md/cal/preview.html +575 -0
  24. package/design-md/claude/DESIGN.md +312 -0
  25. package/design-md/claude/README.md +24 -0
  26. package/design-md/claude/preview-dark.html +803 -0
  27. package/design-md/claude/preview.html +826 -0
  28. package/design-md/clay/DESIGN.md +304 -0
  29. package/design-md/clay/README.md +23 -0
  30. package/design-md/clay/preview-dark.html +318 -0
  31. package/design-md/clay/preview.html +317 -0
  32. package/design-md/clickhouse/DESIGN.md +281 -0
  33. package/design-md/clickhouse/README.md +24 -0
  34. package/design-md/clickhouse/preview-dark.html +834 -0
  35. package/design-md/clickhouse/preview.html +786 -0
  36. package/design-md/cohere/DESIGN.md +266 -0
  37. package/design-md/cohere/README.md +24 -0
  38. package/design-md/cohere/preview-dark.html +810 -0
  39. package/design-md/cohere/preview.html +814 -0
  40. package/design-md/coinbase/DESIGN.md +129 -0
  41. package/design-md/coinbase/README.md +23 -0
  42. package/design-md/coinbase/preview-dark.html +164 -0
  43. package/design-md/coinbase/preview.html +163 -0
  44. package/design-md/composio/DESIGN.md +307 -0
  45. package/design-md/composio/README.md +24 -0
  46. package/design-md/composio/preview-dark.html +958 -0
  47. package/design-md/composio/preview.html +933 -0
  48. package/design-md/cursor/DESIGN.md +309 -0
  49. package/design-md/cursor/README.md +24 -0
  50. package/design-md/cursor/preview-dark.html +395 -0
  51. package/design-md/cursor/preview.html +385 -0
  52. package/design-md/elevenlabs/DESIGN.md +265 -0
  53. package/design-md/elevenlabs/README.md +23 -0
  54. package/design-md/elevenlabs/preview-dark.html +254 -0
  55. package/design-md/elevenlabs/preview.html +253 -0
  56. package/design-md/expo/DESIGN.md +281 -0
  57. package/design-md/expo/README.md +24 -0
  58. package/design-md/expo/preview-dark.html +536 -0
  59. package/design-md/expo/preview.html +536 -0
  60. package/design-md/figma/DESIGN.md +220 -0
  61. package/design-md/figma/README.md +24 -0
  62. package/design-md/figma/preview-dark.html +831 -0
  63. package/design-md/figma/preview.html +841 -0
  64. package/design-md/framer/DESIGN.md +246 -0
  65. package/design-md/framer/README.md +23 -0
  66. package/design-md/framer/preview-dark.html +904 -0
  67. package/design-md/framer/preview.html +885 -0
  68. package/design-md/hashicorp/DESIGN.md +278 -0
  69. package/design-md/hashicorp/README.md +24 -0
  70. package/design-md/hashicorp/preview-dark.html +1206 -0
  71. package/design-md/hashicorp/preview.html +1195 -0
  72. package/design-md/ibm/DESIGN.md +332 -0
  73. package/design-md/ibm/README.md +24 -0
  74. package/design-md/ibm/preview-dark.html +445 -0
  75. package/design-md/ibm/preview.html +430 -0
  76. package/design-md/intercom/DESIGN.md +146 -0
  77. package/design-md/intercom/README.md +23 -0
  78. package/design-md/intercom/preview-dark.html +185 -0
  79. package/design-md/intercom/preview.html +184 -0
  80. package/design-md/kraken/DESIGN.md +125 -0
  81. package/design-md/kraken/README.md +23 -0
  82. package/design-md/kraken/preview-dark.html +169 -0
  83. package/design-md/kraken/preview.html +168 -0
  84. package/design-md/linear.app/DESIGN.md +367 -0
  85. package/design-md/linear.app/README.md +24 -0
  86. package/design-md/linear.app/preview-dark.html +385 -0
  87. package/design-md/linear.app/preview.html +375 -0
  88. package/design-md/lovable/DESIGN.md +298 -0
  89. package/design-md/lovable/README.md +24 -0
  90. package/design-md/lovable/preview-dark.html +351 -0
  91. package/design-md/lovable/preview.html +350 -0
  92. package/design-md/minimax/DESIGN.md +257 -0
  93. package/design-md/minimax/README.md +24 -0
  94. package/design-md/minimax/preview-dark.html +1267 -0
  95. package/design-md/minimax/preview.html +1253 -0
  96. package/design-md/mintlify/DESIGN.md +326 -0
  97. package/design-md/mintlify/README.md +24 -0
  98. package/design-md/mintlify/preview-dark.html +411 -0
  99. package/design-md/mintlify/preview.html +400 -0
  100. package/design-md/miro/DESIGN.md +108 -0
  101. package/design-md/miro/README.md +23 -0
  102. package/design-md/miro/preview-dark.html +174 -0
  103. package/design-md/miro/preview.html +173 -0
  104. package/design-md/mistral.ai/DESIGN.md +261 -0
  105. package/design-md/mistral.ai/README.md +24 -0
  106. package/design-md/mistral.ai/preview-dark.html +813 -0
  107. package/design-md/mistral.ai/preview.html +812 -0
  108. package/design-md/mongodb/DESIGN.md +266 -0
  109. package/design-md/mongodb/README.md +23 -0
  110. package/design-md/mongodb/preview-dark.html +262 -0
  111. package/design-md/mongodb/preview.html +261 -0
  112. package/design-md/notion/DESIGN.md +309 -0
  113. package/design-md/notion/README.md +24 -0
  114. package/design-md/notion/preview-dark.html +374 -0
  115. package/design-md/notion/preview.html +366 -0
  116. package/design-md/nvidia/DESIGN.md +293 -0
  117. package/design-md/nvidia/README.md +24 -0
  118. package/design-md/nvidia/preview-dark.html +376 -0
  119. package/design-md/nvidia/preview.html +368 -0
  120. package/design-md/ollama/DESIGN.md +267 -0
  121. package/design-md/ollama/README.md +24 -0
  122. package/design-md/ollama/preview-dark.html +678 -0
  123. package/design-md/ollama/preview.html +678 -0
  124. package/design-md/opencode.ai/DESIGN.md +281 -0
  125. package/design-md/opencode.ai/README.md +24 -0
  126. package/design-md/opencode.ai/preview-dark.html +368 -0
  127. package/design-md/opencode.ai/preview.html +359 -0
  128. package/design-md/pinterest/DESIGN.md +230 -0
  129. package/design-md/pinterest/README.md +23 -0
  130. package/design-md/pinterest/preview-dark.html +233 -0
  131. package/design-md/pinterest/preview.html +232 -0
  132. package/design-md/posthog/DESIGN.md +256 -0
  133. package/design-md/posthog/README.md +23 -0
  134. package/design-md/posthog/preview-dark.html +701 -0
  135. package/design-md/posthog/preview.html +751 -0
  136. package/design-md/raycast/DESIGN.md +268 -0
  137. package/design-md/raycast/README.md +23 -0
  138. package/design-md/raycast/preview-dark.html +608 -0
  139. package/design-md/raycast/preview.html +690 -0
  140. package/design-md/replicate/DESIGN.md +261 -0
  141. package/design-md/replicate/README.md +24 -0
  142. package/design-md/replicate/preview-dark.html +828 -0
  143. package/design-md/replicate/preview.html +831 -0
  144. package/design-md/resend/DESIGN.md +303 -0
  145. package/design-md/resend/README.md +23 -0
  146. package/design-md/resend/preview-dark.html +357 -0
  147. package/design-md/resend/preview.html +356 -0
  148. package/design-md/revolut/DESIGN.md +185 -0
  149. package/design-md/revolut/README.md +23 -0
  150. package/design-md/revolut/preview-dark.html +234 -0
  151. package/design-md/revolut/preview.html +233 -0
  152. package/design-md/runwayml/DESIGN.md +244 -0
  153. package/design-md/runwayml/README.md +24 -0
  154. package/design-md/runwayml/preview-dark.html +664 -0
  155. package/design-md/runwayml/preview.html +665 -0
  156. package/design-md/sanity/DESIGN.md +357 -0
  157. package/design-md/sanity/README.md +24 -0
  158. package/design-md/sanity/preview-dark.html +995 -0
  159. package/design-md/sanity/preview.html +1140 -0
  160. package/design-md/sentry/DESIGN.md +262 -0
  161. package/design-md/sentry/README.md +24 -0
  162. package/design-md/sentry/preview-dark.html +628 -0
  163. package/design-md/sentry/preview.html +953 -0
  164. package/design-md/spacex/DESIGN.md +194 -0
  165. package/design-md/spacex/README.md +23 -0
  166. package/design-md/spacex/preview-dark.html +223 -0
  167. package/design-md/spacex/preview.html +222 -0
  168. package/design-md/spotify/DESIGN.md +246 -0
  169. package/design-md/spotify/README.md +23 -0
  170. package/design-md/spotify/preview-dark.html +231 -0
  171. package/design-md/spotify/preview.html +230 -0
  172. package/design-md/stripe/DESIGN.md +322 -0
  173. package/design-md/stripe/README.md +24 -0
  174. package/design-md/stripe/preview-dark.html +430 -0
  175. package/design-md/stripe/preview.html +421 -0
  176. package/design-md/supabase/DESIGN.md +255 -0
  177. package/design-md/supabase/README.md +24 -0
  178. package/design-md/supabase/preview-dark.html +977 -0
  179. package/design-md/supabase/preview.html +955 -0
  180. package/design-md/superhuman/DESIGN.md +252 -0
  181. package/design-md/superhuman/README.md +23 -0
  182. package/design-md/superhuman/preview-dark.html +975 -0
  183. package/design-md/superhuman/preview.html +953 -0
  184. package/design-md/together.ai/DESIGN.md +263 -0
  185. package/design-md/together.ai/README.md +24 -0
  186. package/design-md/together.ai/preview-dark.html +892 -0
  187. package/design-md/together.ai/preview.html +897 -0
  188. package/design-md/uber/DESIGN.md +295 -0
  189. package/design-md/uber/README.md +24 -0
  190. package/design-md/uber/preview-dark.html +1164 -0
  191. package/design-md/uber/preview.html +1163 -0
  192. package/design-md/vercel/DESIGN.md +310 -0
  193. package/design-md/vercel/README.md +24 -0
  194. package/design-md/vercel/preview-dark.html +370 -0
  195. package/design-md/vercel/preview.html +369 -0
  196. package/design-md/voltagent/DESIGN.md +323 -0
  197. package/design-md/voltagent/README.md +24 -0
  198. package/design-md/voltagent/preview-dark.html +487 -0
  199. package/design-md/voltagent/preview.html +766 -0
  200. package/design-md/warp/DESIGN.md +253 -0
  201. package/design-md/warp/README.md +23 -0
  202. package/design-md/warp/preview-dark.html +502 -0
  203. package/design-md/warp/preview.html +535 -0
  204. package/design-md/webflow/DESIGN.md +92 -0
  205. package/design-md/webflow/README.md +23 -0
  206. package/design-md/webflow/preview-dark.html +147 -0
  207. package/design-md/webflow/preview.html +146 -0
  208. package/design-md/wise/DESIGN.md +173 -0
  209. package/design-md/wise/README.md +23 -0
  210. package/design-md/wise/preview-dark.html +230 -0
  211. package/design-md/wise/preview.html +229 -0
  212. package/design-md/x.ai/DESIGN.md +257 -0
  213. package/design-md/x.ai/README.md +24 -0
  214. package/design-md/x.ai/preview-dark.html +358 -0
  215. package/design-md/x.ai/preview.html +409 -0
  216. package/design-md/zapier/DESIGN.md +328 -0
  217. package/design-md/zapier/README.md +24 -0
  218. package/design-md/zapier/preview-dark.html +382 -0
  219. package/design-md/zapier/preview.html +374 -0
  220. package/package.json +33 -0
package/design-md/wise/preview-dark.html ADDED
@@ -0,0 +1,230 @@
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 Preview: Wise (Dark)</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;900&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --white:#0e0f0c; --black:#e8ebe6; --green:#9fe870; --dark-green:#163300;
13
+ --mint:#1a2e10; --gray:#6a6a69; --warm-dark:#a0a39e; --light:#1e201c;
14
+ --danger:#d03238; --warning:#ffd11a;
15
+ --font:'Inter',Helvetica,Arial,sans-serif;
16
+ }
17
+ * { margin:0; padding:0; box-sizing:border-box; }
18
+ body { background:var(--white); color:var(--black); font-family:var(--font); font-size:18px; font-weight:400; line-height:1.44; font-feature-settings:"calt" 1; -webkit-font-smoothing:antialiased; }
19
+
20
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid rgba(232,235,230,0.1); }
21
+ .nav-brand { font-size:18px; font-weight:600; color:var(--black); text-decoration:none; }
22
+ .nav-links { display:flex; gap:20px; list-style:none; }
23
+ .nav-links a { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; transition:opacity 0.15s; }
24
+ .nav-links a:hover { opacity:0.7; }
25
+ .nav-cta { display:inline-block; background:var(--green); color:var(--dark-green); padding:8px 20px; border-radius:9999px; font-size:16px; font-weight:600; text-decoration:none; transition:transform 0.2s; }
26
+ .nav-cta:hover { transform:scale(1.05); }
27
+
28
+ .hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
29
+ .hero h1 { font-size:80px; font-weight:900; line-height:0.85; margin-bottom:24px; }
30
+ .hero h1 span { color:var(--dark-green); }
31
+ .hero p { font-size:18px; font-weight:400; color:var(--warm-dark); max-width:500px; margin-bottom:32px; letter-spacing:0.18px; }
32
+ .hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }
33
+ .btn-green { display:inline-block; background:var(--green); color:var(--dark-green); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
34
+ .btn-green:hover { transform:scale(1.05); }
35
+ .btn-green:active { transform:scale(0.95); }
36
+ .btn-subtle { display:inline-block; background:rgba(22,51,0,0.08); color:var(--black); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
37
+ .btn-subtle:hover { transform:scale(1.05); }
38
+
39
+ .section { padding:64px 24px; max-width:1100px; margin:0 auto; }
40
+ .section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
41
+ .section-title { font-size:40px; font-weight:900; line-height:0.85; margin-bottom:32px; }
42
+ .section-divider { border:none; border-top:1px solid rgba(14,15,12,0.08); margin:0; }
43
+
44
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
45
+ .color-swatch { border-radius:16px; overflow:hidden; border:1px solid rgba(14,15,12,0.12); }
46
+ .color-swatch-block { height:64px; width:100%; }
47
+ .color-swatch-info { padding:10px; }
48
+ .color-swatch-name { font-size:13px; font-weight:600; margin-bottom:2px; }
49
+ .color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }
50
+ .color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }
51
+ .color-group-label { font-size:12px; font-weight:600; color:var(--warm-dark); margin:20px 0 8px; }
52
+
53
+ .type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }
54
+ .type-sample:last-child { border-bottom:none; }
55
+ .type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }
56
+
57
+ .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
58
+ .button-item { text-align:center; }
59
+ .button-label { font-size:10px; color:var(--gray); margin-top:6px; }
60
+
61
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
62
+ .card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:24px; }
63
+ .card h3 { font-size:22px; font-weight:600; margin-bottom:8px; letter-spacing:-0.396px; }
64
+ .card p { font-size:16px; color:var(--warm-dark); letter-spacing:0.08px; }
65
+
66
+ .form-group { margin-bottom:16px; max-width:400px; }
67
+ .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
68
+ .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; outline:none; }
69
+ .form-input:focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
70
+ .form-input--focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
71
+ .form-input--error { border-color:var(--danger); box-shadow:0 0 0 2px var(--danger); }
72
+ .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
73
+ .form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }
74
+
75
+ .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
76
+ .spacing-item { text-align:center; }
77
+ .spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }
78
+ .spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }
79
+
80
+ .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
81
+ .radius-item { text-align:center; }
82
+ .radius-box { width:52px; height:52px; background:var(--mint); border:1px solid var(--green); margin-bottom:4px; }
83
+ .radius-label { font-size:9px; color:var(--gray); font-family:monospace; }
84
+
85
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
86
+ .elevation-card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:16px; text-align:center; }
87
+ .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
88
+ .elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
89
+
90
+ .footer { padding:32px; text-align:center; background:var(--black); color:var(--gray); font-size:13px; }
91
+ .footer a { color:var(--green); text-decoration:underline; }
92
+
93
+ @media (max-width:576px) { .hero h1 { font-size:48px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }
94
+ </style>
95
+ </head>
96
+ <body>
97
+
98
+ <nav class="nav">
99
+ <a class="nav-brand" href="#">awesome-design-md</a>
100
+ <ul class="nav-links">
101
+ <li><a href="#colors">Colors</a></li>
102
+ <li><a href="#typography">Typography</a></li>
103
+ <li><a href="#buttons">Buttons</a></li>
104
+ <li><a href="#cards">Cards</a></li>
105
+ <li><a href="#forms">Forms</a></li>
106
+ </ul>
107
+ <a class="nav-cta" href="#">Get Started</a>
108
+ </nav>
109
+ <div style="position:fixed;top:16px;right:16px;z-index:200;background:#9fe870;color:#163300;font-size:10px;font-weight:600;padding:4px 12px;border-radius:9999px;">Dark Mode</div>
110
+
111
+ <section class="hero">
112
+ <h1>Design System<br>Inspired by<br><span>Wise</span></h1>
113
+ <p>A design token catalog generated from DESIGN.md. Every color, font, and component — bold, green, and borderless.</p>
114
+ <div class="hero-buttons">
115
+ <a class="btn-green" href="#">Send Money</a>
116
+ <a class="btn-subtle" href="#">Learn More</a>
117
+ </div>
118
+ </section>
119
+
120
+ <hr class="section-divider">
121
+
122
+ <section class="section" id="colors">
123
+ <div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
124
+ <div class="color-group-label">Brand</div>
125
+ <div class="color-grid">
126
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#0e0f0c"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0e0f0c</div><div class="color-swatch-role">Primary text</div></div></div>
127
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#9fe870"></div><div class="color-swatch-info"><div class="color-swatch-name">Wise Green</div><div class="color-swatch-hex">#9fe870</div><div class="color-swatch-role">Primary CTA</div></div></div>
128
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#163300"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Green</div><div class="color-swatch-hex">#163300</div><div class="color-swatch-role">Button text on green</div></div></div>
129
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e2f6d5"></div><div class="color-swatch-info"><div class="color-swatch-name">Mint</div><div class="color-swatch-hex">#e2f6d5</div><div class="color-swatch-role">Soft green surface</div></div></div>
130
+ </div>
131
+ <div class="color-group-label">Semantic</div>
132
+ <div class="color-grid">
133
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#054d28"></div><div class="color-swatch-info"><div class="color-swatch-name">Positive</div><div class="color-swatch-hex">#054d28</div><div class="color-swatch-role">Success</div></div></div>
134
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#d03238"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#d03238</div><div class="color-swatch-role">Error</div></div></div>
135
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffd11a"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ffd11a</div><div class="color-swatch-role">Warning</div></div></div>
136
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffc091"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#ffc091</div><div class="color-swatch-role">Warm accent</div></div></div>
137
+ </div>
138
+ <div class="color-group-label">Neutral</div>
139
+ <div class="color-grid">
140
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#454745"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Dark</div><div class="color-swatch-hex">#454745</div><div class="color-swatch-role">Secondary text</div></div></div>
141
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#868685"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#868685</div><div class="color-swatch-role">Muted text</div></div></div>
142
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e8ebe6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#e8ebe6</div><div class="color-swatch-role">Light surface</div></div></div>
143
+ </div>
144
+ </section>
145
+
146
+ <hr class="section-divider">
147
+
148
+ <section class="section" id="typography">
149
+ <div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
150
+ <div class="type-sample"><div style="font-size:80px; font-weight:900; line-height:0.85;">DISPLAY HERO</div><div class="type-meta">Display — 126px / 900 / 0.85 / Wise Sans / "calt"</div></div>
151
+ <div class="type-sample"><div style="font-size:40px; font-weight:900; line-height:0.85;">Section Title</div><div class="type-meta">Section — 40px / 900 / 0.85 / Wise Sans</div></div>
152
+ <div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-0.396px;">Card Title</div><div class="type-meta">Card — 22px / 600 / 1.25 / -0.396px / Inter</div></div>
153
+ <div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.44; letter-spacing:0.18px; color:var(--warm-dark);">Body — Send money abroad. Fast, cheap, transparent. No hidden fees, no bad exchange rates.</div><div class="type-meta">Body — 18px / 400 / 1.44 / +0.18px / Inter</div></div>
154
+ <div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.44; letter-spacing:-0.108px;">Body Semibold — Account balance</div><div class="type-meta">Semibold — 18px / 600 / 1.44 / -0.108px / Inter</div></div>
155
+ <div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.55; letter-spacing:-0.084px; color:var(--gray);">Caption — Updated 2 minutes ago</div><div class="type-meta">Caption — 14px / 600 / 1.55 / -0.084px / Inter</div></div>
156
+ </section>
157
+
158
+ <hr class="section-divider">
159
+
160
+ <section class="section" id="buttons">
161
+ <div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
162
+ <div class="button-row">
163
+ <div class="button-item"><a class="btn-green" href="#">Send Money</a><div class="button-label">Primary Green</div></div>
164
+ <div class="button-item"><a class="btn-subtle" href="#">Learn More</a><div class="button-label">Subtle</div></div>
165
+ </div>
166
+ <p style="font-size:13px; color:var(--gray); margin-top:16px;">Hover to see scale(1.05) grow. Click for scale(0.95) compress.</p>
167
+ </section>
168
+
169
+ <hr class="section-divider">
170
+
171
+ <section class="section" id="cards">
172
+ <div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
173
+ <div class="card-grid">
174
+ <div class="card"><h3>International Transfers</h3><p>Send money to 80+ countries at the real exchange rate. No markup, just a small, transparent fee.</p></div>
175
+ <div class="card" style="background:var(--mint); border-color:var(--green);"><h3>Multi-currency Account</h3><p>Hold and convert 40+ currencies. Spend abroad with the Wise card. Green accent card variant.</p></div>
176
+ <div class="card"><h3>Business Account</h3><p>Pay invoices, receive payments, and manage your international finances in one place.</p></div>
177
+ </div>
178
+ </section>
179
+
180
+ <hr class="section-divider">
181
+
182
+ <section class="section" id="forms">
183
+ <div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
184
+ <div class="form-group"><label class="form-label">Amount</label><input class="form-input" type="text" placeholder="1,000.00 GBP"><div class="form-state-label">Default</div></div>
185
+ <div class="form-group"><label class="form-label">Recipient</label><input class="form-input form-input--focus" type="text" value="John Smith"><div class="form-state-label">Focus (green ring)</div></div>
186
+ <div class="form-group"><label class="form-label">IBAN</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
187
+ <div class="form-group"><label class="form-label">Reference</label><textarea class="form-textarea" placeholder="Payment reference..."></textarea></div>
188
+ </section>
189
+
190
+ <hr class="section-divider">
191
+
192
+ <section class="section">
193
+ <div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
194
+ <div class="spacing-row">
195
+ <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
196
+ <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
197
+ <div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
198
+ <div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
199
+ <div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
200
+ <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
201
+ </div>
202
+ </section>
203
+
204
+ <hr class="section-divider">
205
+
206
+ <section class="section">
207
+ <div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
208
+ <div class="radius-row">
209
+ <div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">10px</div></div>
210
+ <div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div>
211
+ <div class="radius-item"><div class="radius-box" style="border-radius:30px"></div><div class="radius-label">30px</div></div>
212
+ <div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div></div>
213
+ <div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div>
214
+ </div>
215
+ </section>
216
+
217
+ <hr class="section-divider">
218
+
219
+ <section class="section">
220
+ <div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
221
+ <div class="elevation-grid">
222
+ <div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
223
+ <div class="elevation-card" style="box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring shadow</div></div>
224
+ </div>
225
+ </section>
226
+
227
+ <footer class="footer">Generated from <a href="https://wise.com/">wise.com</a> DESIGN.md — awesome-design-md</footer>
228
+
229
+ </body>
230
+ </html>
package/design-md/wise/preview.html ADDED
@@ -0,0 +1,229 @@
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 Preview: Wise (Light)</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;900&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --white:#ffffff; --black:#0e0f0c; --green:#9fe870; --dark-green:#163300;
13
+ --mint:#e2f6d5; --gray:#868685; --warm-dark:#454745; --light:#e8ebe6;
14
+ --danger:#d03238; --warning:#ffd11a;
15
+ --font:'Inter',Helvetica,Arial,sans-serif;
16
+ }
17
+ * { margin:0; padding:0; box-sizing:border-box; }
18
+ body { background:var(--white); color:var(--black); font-family:var(--font); font-size:18px; font-weight:400; line-height:1.44; font-feature-settings:"calt" 1; -webkit-font-smoothing:antialiased; }
19
+
20
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid rgba(14,15,12,0.08); }
21
+ .nav-brand { font-size:18px; font-weight:600; color:var(--black); text-decoration:none; }
22
+ .nav-links { display:flex; gap:20px; list-style:none; }
23
+ .nav-links a { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; transition:opacity 0.15s; }
24
+ .nav-links a:hover { opacity:0.7; }
25
+ .nav-cta { display:inline-block; background:var(--green); color:var(--dark-green); padding:8px 20px; border-radius:9999px; font-size:16px; font-weight:600; text-decoration:none; transition:transform 0.2s; }
26
+ .nav-cta:hover { transform:scale(1.05); }
27
+
28
+ .hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
29
+ .hero h1 { font-size:80px; font-weight:900; line-height:0.85; margin-bottom:24px; }
30
+ .hero h1 span { color:var(--dark-green); }
31
+ .hero p { font-size:18px; font-weight:400; color:var(--warm-dark); max-width:500px; margin-bottom:32px; letter-spacing:0.18px; }
32
+ .hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }
33
+ .btn-green { display:inline-block; background:var(--green); color:var(--dark-green); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
34
+ .btn-green:hover { transform:scale(1.05); }
35
+ .btn-green:active { transform:scale(0.95); }
36
+ .btn-subtle { display:inline-block; background:rgba(22,51,0,0.08); color:var(--black); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
37
+ .btn-subtle:hover { transform:scale(1.05); }
38
+
39
+ .section { padding:64px 24px; max-width:1100px; margin:0 auto; }
40
+ .section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
41
+ .section-title { font-size:40px; font-weight:900; line-height:0.85; margin-bottom:32px; }
42
+ .section-divider { border:none; border-top:1px solid rgba(14,15,12,0.08); margin:0; }
43
+
44
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
45
+ .color-swatch { border-radius:16px; overflow:hidden; border:1px solid rgba(14,15,12,0.12); }
46
+ .color-swatch-block { height:64px; width:100%; }
47
+ .color-swatch-info { padding:10px; }
48
+ .color-swatch-name { font-size:13px; font-weight:600; margin-bottom:2px; }
49
+ .color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }
50
+ .color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }
51
+ .color-group-label { font-size:12px; font-weight:600; color:var(--warm-dark); margin:20px 0 8px; }
52
+
53
+ .type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }
54
+ .type-sample:last-child { border-bottom:none; }
55
+ .type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }
56
+
57
+ .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
58
+ .button-item { text-align:center; }
59
+ .button-label { font-size:10px; color:var(--gray); margin-top:6px; }
60
+
61
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
62
+ .card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:24px; }
63
+ .card h3 { font-size:22px; font-weight:600; margin-bottom:8px; letter-spacing:-0.396px; }
64
+ .card p { font-size:16px; color:var(--warm-dark); letter-spacing:0.08px; }
65
+
66
+ .form-group { margin-bottom:16px; max-width:400px; }
67
+ .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
68
+ .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; outline:none; }
69
+ .form-input:focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
70
+ .form-input--focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
71
+ .form-input--error { border-color:var(--danger); box-shadow:0 0 0 2px var(--danger); }
72
+ .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
73
+ .form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }
74
+
75
+ .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
76
+ .spacing-item { text-align:center; }
77
+ .spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }
78
+ .spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }
79
+
80
+ .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
81
+ .radius-item { text-align:center; }
82
+ .radius-box { width:52px; height:52px; background:var(--mint); border:1px solid var(--green); margin-bottom:4px; }
83
+ .radius-label { font-size:9px; color:var(--gray); font-family:monospace; }
84
+
85
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
86
+ .elevation-card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:16px; text-align:center; }
87
+ .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
88
+ .elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
89
+
90
+ .footer { padding:32px; text-align:center; background:var(--black); color:var(--gray); font-size:13px; }
91
+ .footer a { color:var(--green); text-decoration:underline; }
92
+
93
+ @media (max-width:576px) { .hero h1 { font-size:48px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }
94
+ </style>
95
+ </head>
96
+ <body>
97
+
98
+ <nav class="nav">
99
+ <a class="nav-brand" href="#">awesome-design-md</a>
100
+ <ul class="nav-links">
101
+ <li><a href="#colors">Colors</a></li>
102
+ <li><a href="#typography">Typography</a></li>
103
+ <li><a href="#buttons">Buttons</a></li>
104
+ <li><a href="#cards">Cards</a></li>
105
+ <li><a href="#forms">Forms</a></li>
106
+ </ul>
107
+ <a class="nav-cta" href="#">Get Started</a>
108
+ </nav>
109
+
110
+ <section class="hero">
111
+ <h1>Design System<br>Inspired by<br><span>Wise</span></h1>
112
+ <p>A design token catalog generated from DESIGN.md. Every color, font, and component — bold, green, and borderless.</p>
113
+ <div class="hero-buttons">
114
+ <a class="btn-green" href="#">Send Money</a>
115
+ <a class="btn-subtle" href="#">Learn More</a>
116
+ </div>
117
+ </section>
118
+
119
+ <hr class="section-divider">
120
+
121
+ <section class="section" id="colors">
122
+ <div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
123
+ <div class="color-group-label">Brand</div>
124
+ <div class="color-grid">
125
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#0e0f0c"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0e0f0c</div><div class="color-swatch-role">Primary text</div></div></div>
126
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#9fe870"></div><div class="color-swatch-info"><div class="color-swatch-name">Wise Green</div><div class="color-swatch-hex">#9fe870</div><div class="color-swatch-role">Primary CTA</div></div></div>
127
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#163300"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Green</div><div class="color-swatch-hex">#163300</div><div class="color-swatch-role">Button text on green</div></div></div>
128
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e2f6d5"></div><div class="color-swatch-info"><div class="color-swatch-name">Mint</div><div class="color-swatch-hex">#e2f6d5</div><div class="color-swatch-role">Soft green surface</div></div></div>
129
+ </div>
130
+ <div class="color-group-label">Semantic</div>
131
+ <div class="color-grid">
132
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#054d28"></div><div class="color-swatch-info"><div class="color-swatch-name">Positive</div><div class="color-swatch-hex">#054d28</div><div class="color-swatch-role">Success</div></div></div>
133
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#d03238"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#d03238</div><div class="color-swatch-role">Error</div></div></div>
134
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffd11a"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ffd11a</div><div class="color-swatch-role">Warning</div></div></div>
135
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffc091"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#ffc091</div><div class="color-swatch-role">Warm accent</div></div></div>
136
+ </div>
137
+ <div class="color-group-label">Neutral</div>
138
+ <div class="color-grid">
139
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#454745"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Dark</div><div class="color-swatch-hex">#454745</div><div class="color-swatch-role">Secondary text</div></div></div>
140
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#868685"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#868685</div><div class="color-swatch-role">Muted text</div></div></div>
141
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e8ebe6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#e8ebe6</div><div class="color-swatch-role">Light surface</div></div></div>
142
+ </div>
143
+ </section>
144
+
145
+ <hr class="section-divider">
146
+
147
+ <section class="section" id="typography">
148
+ <div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
149
+ <div class="type-sample"><div style="font-size:80px; font-weight:900; line-height:0.85;">DISPLAY HERO</div><div class="type-meta">Display — 126px / 900 / 0.85 / Wise Sans / "calt"</div></div>
150
+ <div class="type-sample"><div style="font-size:40px; font-weight:900; line-height:0.85;">Section Title</div><div class="type-meta">Section — 40px / 900 / 0.85 / Wise Sans</div></div>
151
+ <div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-0.396px;">Card Title</div><div class="type-meta">Card — 22px / 600 / 1.25 / -0.396px / Inter</div></div>
152
+ <div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.44; letter-spacing:0.18px; color:var(--warm-dark);">Body — Send money abroad. Fast, cheap, transparent. No hidden fees, no bad exchange rates.</div><div class="type-meta">Body — 18px / 400 / 1.44 / +0.18px / Inter</div></div>
153
+ <div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.44; letter-spacing:-0.108px;">Body Semibold — Account balance</div><div class="type-meta">Semibold — 18px / 600 / 1.44 / -0.108px / Inter</div></div>
154
+ <div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.55; letter-spacing:-0.084px; color:var(--gray);">Caption — Updated 2 minutes ago</div><div class="type-meta">Caption — 14px / 600 / 1.55 / -0.084px / Inter</div></div>
155
+ </section>
156
+
157
+ <hr class="section-divider">
158
+
159
+ <section class="section" id="buttons">
160
+ <div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
161
+ <div class="button-row">
162
+ <div class="button-item"><a class="btn-green" href="#">Send Money</a><div class="button-label">Primary Green</div></div>
163
+ <div class="button-item"><a class="btn-subtle" href="#">Learn More</a><div class="button-label">Subtle</div></div>
164
+ </div>
165
+ <p style="font-size:13px; color:var(--gray); margin-top:16px;">Hover to see scale(1.05) grow. Click for scale(0.95) compress.</p>
166
+ </section>
167
+
168
+ <hr class="section-divider">
169
+
170
+ <section class="section" id="cards">
171
+ <div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
172
+ <div class="card-grid">
173
+ <div class="card"><h3>International Transfers</h3><p>Send money to 80+ countries at the real exchange rate. No markup, just a small, transparent fee.</p></div>
174
+ <div class="card" style="background:var(--mint); border-color:var(--green);"><h3>Multi-currency Account</h3><p>Hold and convert 40+ currencies. Spend abroad with the Wise card. Green accent card variant.</p></div>
175
+ <div class="card"><h3>Business Account</h3><p>Pay invoices, receive payments, and manage your international finances in one place.</p></div>
176
+ </div>
177
+ </section>
178
+
179
+ <hr class="section-divider">
180
+
181
+ <section class="section" id="forms">
182
+ <div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
183
+ <div class="form-group"><label class="form-label">Amount</label><input class="form-input" type="text" placeholder="1,000.00 GBP"><div class="form-state-label">Default</div></div>
184
+ <div class="form-group"><label class="form-label">Recipient</label><input class="form-input form-input--focus" type="text" value="John Smith"><div class="form-state-label">Focus (green ring)</div></div>
185
+ <div class="form-group"><label class="form-label">IBAN</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
186
+ <div class="form-group"><label class="form-label">Reference</label><textarea class="form-textarea" placeholder="Payment reference..."></textarea></div>
187
+ </section>
188
+
189
+ <hr class="section-divider">
190
+
191
+ <section class="section">
192
+ <div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
193
+ <div class="spacing-row">
194
+ <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
195
+ <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
196
+ <div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
197
+ <div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
198
+ <div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
199
+ <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
200
+ </div>
201
+ </section>
202
+
203
+ <hr class="section-divider">
204
+
205
+ <section class="section">
206
+ <div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
207
+ <div class="radius-row">
208
+ <div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">10px</div></div>
209
+ <div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div>
210
+ <div class="radius-item"><div class="radius-box" style="border-radius:30px"></div><div class="radius-label">30px</div></div>
211
+ <div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div></div>
212
+ <div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div>
213
+ </div>
214
+ </section>
215
+
216
+ <hr class="section-divider">
217
+
218
+ <section class="section">
219
+ <div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
220
+ <div class="elevation-grid">
221
+ <div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
222
+ <div class="elevation-card" style="box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring shadow</div></div>
223
+ </div>
224
+ </section>
225
+
226
+ <footer class="footer">Generated from <a href="https://wise.com/">wise.com</a> DESIGN.md — awesome-design-md</footer>
227
+
228
+ </body>
229
+ </html>