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/revolut/preview-dark.html ADDED
@@ -0,0 +1,234 @@
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: Revolut (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;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --white:#0d0e10; --dark:#f4f4f4; --light:#1e2124; --blue:#494fdf; --action:#4f55f1;
13
+ --danger:#e23b4a; --pink:#e61e49; --warning:#ec7e00; --teal:#00a87e; --yellow:#b09000;
14
+ --gray:#6a7078; --slate:#a0a8b0; --border:#2e3236;
15
+ --font-display:'DM Sans',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
16
+ }
17
+ * { margin:0; padding:0; box-sizing:border-box; }
18
+ body { background:var(--white); color:var(--dark); font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.24px; -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 32px; background:var(--white); }
21
+ .nav-brand { font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--dark); text-decoration:none; }
22
+ .nav-links { display:flex; gap:20px; list-style:none; }
23
+ .nav-links a { font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--slate); text-decoration:none; transition:opacity 0.15s; }
24
+ .nav-links a:hover { opacity:0.7; }
25
+ .nav-cta { display:inline-block; background:var(--dark); color:var(--white); padding:10px 24px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
26
+
27
+ .hero { padding:80px 32px; text-align:center; }
28
+ .hero h1 { font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px; margin-bottom:16px; }
29
+ .hero p { font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; letter-spacing:-0.09px; line-height:1.56; }
30
+ .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
31
+ .btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:14px 32px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
32
+ .btn-dark:hover { opacity:0.85; }
33
+ .btn-light { display:inline-block; background:var(--light); color:var(--dark); padding:14px 34px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
34
+ .btn-light:hover { opacity:0.85; }
35
+ .btn-outline { display:inline-block; background:transparent; color:var(--dark); padding:14px 32px; border-radius:9999px; border:2px solid var(--dark); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; transition:opacity 0.15s; }
36
+ .btn-outline:hover { opacity:0.85; }
37
+ .btn-ghost-dark { display:inline-block; background:rgba(244,244,244,0.1); color:var(--light); padding:14px 32px; border-radius:9999px; border:2px solid var(--light); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
38
+
39
+ .section { padding:64px 32px; max-width:1100px; margin:0 auto; }
40
+ .section-dark { padding:64px 32px; background:var(--dark); color:var(--white); }
41
+ .section-dark .inner { max-width:1100px; margin:0 auto; }
42
+ .section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
43
+ .section-label-light { font-size:12px; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
44
+ .section-title { font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px; margin-bottom:32px; }
45
+ .section-divider { border:none; border-top:1px solid var(--light); margin:0; }
46
+
47
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
48
+ .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--light); }
49
+ .color-swatch-block { height:60px; width:100%; }
50
+ .color-swatch-info { padding:8px 10px; }
51
+ .color-swatch-name { font-size:12px; font-weight:500; margin-bottom:2px; }
52
+ .color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }
53
+ .color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }
54
+ .color-group-label { font-size:12px; font-weight:600; color:var(--slate); margin:20px 0 8px; }
55
+
56
+ .type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }
57
+ .type-sample:last-child { border-bottom:none; }
58
+ .type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }
59
+
60
+ .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
61
+ .button-item { text-align:center; }
62
+ .button-label { font-size:10px; color:var(--gray); margin-top:6px; }
63
+
64
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
65
+ .card { background:var(--white); border-radius:20px; padding:24px; border:1px solid var(--light); }
66
+ .card h3 { font-family:var(--font-display); font-size:24px; font-weight:500; margin-bottom:8px; }
67
+ .card p { font-size:16px; color:var(--slate); letter-spacing:0.24px; }
68
+
69
+ .form-group { margin-bottom:16px; max-width:400px; }
70
+ .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; letter-spacing:0.16px; }
71
+ .form-input { width:100%; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; outline:none; letter-spacing:0.24px; }
72
+ .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
73
+ .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
74
+ .form-input--error { border-color:var(--danger); box-shadow:0 0 0 0.125rem rgba(226,59,74,0.3); }
75
+ .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; resize:vertical; outline:none; }
76
+ .form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }
77
+
78
+ .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
79
+ .spacing-item { text-align:center; }
80
+ .spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
81
+ .spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }
82
+
83
+ .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
84
+ .radius-item { text-align:center; }
85
+ .radius-box { width:52px; height:52px; background:var(--dark); margin-bottom:4px; }
86
+ .radius-label { font-size:9px; color:var(--gray); font-family:monospace; }
87
+
88
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
89
+ .elevation-card { background:var(--white); border:1px solid var(--light); border-radius:20px; padding:16px; text-align:center; }
90
+ .elevation-label { font-size:13px; font-weight:500; margin-bottom:4px; }
91
+ .elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
92
+
93
+ .footer { padding:32px; text-align:center; background:var(--dark); color:var(--gray); font-size:13px; }
94
+ .footer a { color:var(--white); text-decoration:underline; }
95
+
96
+ @media (max-width:720px) { .hero h1 { font-size:40px; letter-spacing:-0.8px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }
97
+ </style>
98
+ </head>
99
+ <body>
100
+
101
+ <nav class="nav">
102
+ <a class="nav-brand" href="#">awesome-design-md</a>
103
+ <ul class="nav-links">
104
+ <li><a href="#colors">Colors</a></li>
105
+ <li><a href="#typography">Typography</a></li>
106
+ <li><a href="#buttons">Buttons</a></li>
107
+ <li><a href="#cards">Cards</a></li>
108
+ <li><a href="#forms">Forms</a></li>
109
+ </ul>
110
+ <a class="nav-cta" href="#">Get Started</a>
111
+ </nav>
112
+ <div style="position:fixed;top:16px;right:16px;z-index:200;background:#494fdf;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:9999px;">Dark Mode</div>
113
+
114
+ <section class="hero">
115
+ <h1>Design System<br>Inspired by Revolut</h1>
116
+ <p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with fintech precision.</p>
117
+ <div class="hero-buttons">
118
+ <a class="btn-dark" href="#">Get Started</a>
119
+ <a class="btn-outline" href="#">Learn More</a>
120
+ </div>
121
+ </section>
122
+
123
+ <hr class="section-divider">
124
+
125
+ <section class="section" id="colors">
126
+ <div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
127
+ <div class="color-group-label">Primary</div>
128
+ <div class="color-grid">
129
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#191c1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Revolut Dark</div><div class="color-swatch-hex">#191c1f</div><div class="color-swatch-role">Dark surface, text</div></div></div>
130
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Light surface</div></div></div>
131
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#f4f4f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f4f4f4</div><div class="color-swatch-role">Secondary surface</div></div></div>
132
+ </div>
133
+ <div class="color-group-label">Semantic</div>
134
+ <div class="color-grid">
135
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#494fdf"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#494fdf</div><div class="color-swatch-role">Brand blue</div></div></div>
136
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e23b4a"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#e23b4a</div><div class="color-swatch-role">Error</div></div></div>
137
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#00a87e"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal</div><div class="color-swatch-hex">#00a87e</div><div class="color-swatch-role">Success</div></div></div>
138
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ec7e00"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ec7e00</div><div class="color-swatch-role">Warning</div></div></div>
139
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e61e49"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Pink</div><div class="color-swatch-hex">#e61e49</div><div class="color-swatch-role">Critical</div></div></div>
140
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#b09000"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow</div><div class="color-swatch-hex">#b09000</div><div class="color-swatch-role">Attention</div></div></div>
141
+ </div>
142
+ <div class="color-group-label">Neutral</div>
143
+ <div class="color-grid">
144
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#505a63"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#505a63</div><div class="color-swatch-role">Secondary text</div></div></div>
145
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#8d969e"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#8d969e</div><div class="color-swatch-role">Muted text</div></div></div>
146
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c9c9cd"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c9c9cd</div><div class="color-swatch-role">Borders</div></div></div>
147
+ </div>
148
+ </section>
149
+
150
+ <hr class="section-divider">
151
+
152
+ <section class="section" id="typography">
153
+ <div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
154
+ <div class="type-sample"><div style="font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px;">Display Mega</div><div class="type-meta">Display — 136px / 500 / 1.00 / -2.72px / Aeonik Pro</div></div>
155
+ <div class="type-sample"><div style="font-family:var(--font-display); font-size:48px; font-weight:500; line-height:1.21; letter-spacing:-0.48px;">Section Heading</div><div class="type-meta">Section — 48px / 500 / 1.21 / -0.48px / Aeonik Pro</div></div>
156
+ <div class="type-sample"><div style="font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px;">Card Title</div><div class="type-meta">Card — 32px / 500 / 1.19 / -0.32px / Aeonik Pro</div></div>
157
+ <div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; letter-spacing:-0.09px; color:var(--slate);">Body Large — One app for all things money. From spending to saving, to investing and beyond.</div><div class="type-meta">Body — 18px / 400 / 1.56 / -0.09px / Inter</div></div>
158
+ <div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.50; letter-spacing:0.16px;">Body Semibold — Account details</div><div class="type-meta">Semibold — 16px / 600 / 1.50 / +0.16px / Inter</div></div>
159
+ </section>
160
+
161
+ <hr class="section-divider">
162
+
163
+ <section class="section" id="buttons">
164
+ <div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
165
+ <div class="button-row">
166
+ <div class="button-item"><a class="btn-dark" href="#">Get Started</a><div class="button-label">Primary Dark</div></div>
167
+ <div class="button-item"><a class="btn-light" href="#">Learn More</a><div class="button-label">Secondary Light</div></div>
168
+ <div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
169
+ </div>
170
+ <div style="background:var(--dark); padding:16px 20px; border-radius:20px; margin-top:16px; display:inline-flex; gap:12px;">
171
+ <a class="btn-ghost-dark" href="#">Ghost on Dark</a>
172
+ </div>
173
+ <div class="button-label" style="margin-top:8px;">Ghost variant on dark surface</div>
174
+ </section>
175
+
176
+ <div class="section-dark">
177
+ <div class="inner" id="cards">
178
+ <div class="section-label-light">04 / Cards</div><h2 class="section-title">Card Examples</h2>
179
+ <div class="card-grid">
180
+ <div class="card"><h3>Spending</h3><p>Track your spending in real-time. Get instant notifications for every transaction.</p></div>
181
+ <div class="card"><h3>Saving</h3><p>Set saving goals and round up spare change automatically into your vaults.</p></div>
182
+ <div class="card"><h3>Investing</h3><p>Buy and sell stocks, crypto, and commodities commission-free from your phone.</p></div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <section class="section" id="forms">
188
+ <div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
189
+ <div class="form-group"><label class="form-label">Phone number</label><input class="form-input" type="tel" placeholder="+44 7700 900000"><div class="form-state-label">Default</div></div>
190
+ <div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--focus" type="email" value="user@revolut.com"><div class="form-state-label">Focus (blue ring)</div></div>
191
+ <div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--error" type="text" value="-500"><div class="form-state-label">Error (danger ring)</div></div>
192
+ <div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
193
+ </section>
194
+
195
+ <hr class="section-divider">
196
+
197
+ <section class="section">
198
+ <div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
199
+ <div class="spacing-row">
200
+ <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
201
+ <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
202
+ <div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
203
+ <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
204
+ <div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
205
+ <div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
206
+ <div class="spacing-item"><div class="spacing-block" style="width:80px"></div><div class="spacing-value">80</div></div>
207
+ </div>
208
+ </section>
209
+
210
+ <hr class="section-divider">
211
+
212
+ <section class="section">
213
+ <div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
214
+ <div class="radius-row">
215
+ <div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div>
216
+ <div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div>
217
+ <div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div>
218
+ </div>
219
+ </section>
220
+
221
+ <hr class="section-divider">
222
+
223
+ <section class="section">
224
+ <div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
225
+ <div class="elevation-grid">
226
+ <div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — Revolut is flat</div></div>
227
+ <div class="elevation-card" style="box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3);"><div class="elevation-label">Focus</div><div class="elevation-desc">0.125rem ring</div></div>
228
+ </div>
229
+ </section>
230
+
231
+ <footer class="footer">Generated from <a href="https://revolut.com/">revolut.com</a> DESIGN.md — awesome-design-md</footer>
232
+
233
+ </body>
234
+ </html>
package/design-md/revolut/preview.html ADDED
@@ -0,0 +1,233 @@
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: Revolut (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;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --white:#ffffff; --dark:#191c1f; --light:#f4f4f4; --blue:#494fdf; --action:#4f55f1;
13
+ --danger:#e23b4a; --pink:#e61e49; --warning:#ec7e00; --teal:#00a87e; --yellow:#b09000;
14
+ --gray:#8d969e; --slate:#505a63; --border:#c9c9cd;
15
+ --font-display:'DM Sans',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
16
+ }
17
+ * { margin:0; padding:0; box-sizing:border-box; }
18
+ body { background:var(--white); color:var(--dark); font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.24px; -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 32px; background:var(--white); }
21
+ .nav-brand { font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--dark); text-decoration:none; }
22
+ .nav-links { display:flex; gap:20px; list-style:none; }
23
+ .nav-links a { font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--slate); text-decoration:none; transition:opacity 0.15s; }
24
+ .nav-links a:hover { opacity:0.7; }
25
+ .nav-cta { display:inline-block; background:var(--dark); color:var(--white); padding:10px 24px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
26
+
27
+ .hero { padding:80px 32px; text-align:center; }
28
+ .hero h1 { font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px; margin-bottom:16px; }
29
+ .hero p { font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; letter-spacing:-0.09px; line-height:1.56; }
30
+ .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
31
+ .btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:14px 32px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
32
+ .btn-dark:hover { opacity:0.85; }
33
+ .btn-light { display:inline-block; background:var(--light); color:var(--dark); padding:14px 34px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
34
+ .btn-light:hover { opacity:0.85; }
35
+ .btn-outline { display:inline-block; background:transparent; color:var(--dark); padding:14px 32px; border-radius:9999px; border:2px solid var(--dark); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; transition:opacity 0.15s; }
36
+ .btn-outline:hover { opacity:0.85; }
37
+ .btn-ghost-dark { display:inline-block; background:rgba(244,244,244,0.1); color:var(--light); padding:14px 32px; border-radius:9999px; border:2px solid var(--light); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
38
+
39
+ .section { padding:64px 32px; max-width:1100px; margin:0 auto; }
40
+ .section-dark { padding:64px 32px; background:var(--dark); color:var(--white); }
41
+ .section-dark .inner { max-width:1100px; margin:0 auto; }
42
+ .section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
43
+ .section-label-light { font-size:12px; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
44
+ .section-title { font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px; margin-bottom:32px; }
45
+ .section-divider { border:none; border-top:1px solid var(--light); margin:0; }
46
+
47
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
48
+ .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--light); }
49
+ .color-swatch-block { height:60px; width:100%; }
50
+ .color-swatch-info { padding:8px 10px; }
51
+ .color-swatch-name { font-size:12px; font-weight:500; margin-bottom:2px; }
52
+ .color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }
53
+ .color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }
54
+ .color-group-label { font-size:12px; font-weight:600; color:var(--slate); margin:20px 0 8px; }
55
+
56
+ .type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }
57
+ .type-sample:last-child { border-bottom:none; }
58
+ .type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }
59
+
60
+ .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
61
+ .button-item { text-align:center; }
62
+ .button-label { font-size:10px; color:var(--gray); margin-top:6px; }
63
+
64
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
65
+ .card { background:var(--white); border-radius:20px; padding:24px; border:1px solid var(--light); }
66
+ .card h3 { font-family:var(--font-display); font-size:24px; font-weight:500; margin-bottom:8px; }
67
+ .card p { font-size:16px; color:var(--slate); letter-spacing:0.24px; }
68
+
69
+ .form-group { margin-bottom:16px; max-width:400px; }
70
+ .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; letter-spacing:0.16px; }
71
+ .form-input { width:100%; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; outline:none; letter-spacing:0.24px; }
72
+ .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
73
+ .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
74
+ .form-input--error { border-color:var(--danger); box-shadow:0 0 0 0.125rem rgba(226,59,74,0.3); }
75
+ .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; resize:vertical; outline:none; }
76
+ .form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }
77
+
78
+ .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
79
+ .spacing-item { text-align:center; }
80
+ .spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
81
+ .spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }
82
+
83
+ .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
84
+ .radius-item { text-align:center; }
85
+ .radius-box { width:52px; height:52px; background:var(--dark); margin-bottom:4px; }
86
+ .radius-label { font-size:9px; color:var(--gray); font-family:monospace; }
87
+
88
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
89
+ .elevation-card { background:var(--white); border:1px solid var(--light); border-radius:20px; padding:16px; text-align:center; }
90
+ .elevation-label { font-size:13px; font-weight:500; margin-bottom:4px; }
91
+ .elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
92
+
93
+ .footer { padding:32px; text-align:center; background:var(--dark); color:var(--gray); font-size:13px; }
94
+ .footer a { color:var(--white); text-decoration:underline; }
95
+
96
+ @media (max-width:720px) { .hero h1 { font-size:40px; letter-spacing:-0.8px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }
97
+ </style>
98
+ </head>
99
+ <body>
100
+
101
+ <nav class="nav">
102
+ <a class="nav-brand" href="#">awesome-design-md</a>
103
+ <ul class="nav-links">
104
+ <li><a href="#colors">Colors</a></li>
105
+ <li><a href="#typography">Typography</a></li>
106
+ <li><a href="#buttons">Buttons</a></li>
107
+ <li><a href="#cards">Cards</a></li>
108
+ <li><a href="#forms">Forms</a></li>
109
+ </ul>
110
+ <a class="nav-cta" href="#">Get Started</a>
111
+ </nav>
112
+
113
+ <section class="hero">
114
+ <h1>Design System<br>Inspired by Revolut</h1>
115
+ <p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with fintech precision.</p>
116
+ <div class="hero-buttons">
117
+ <a class="btn-dark" href="#">Get Started</a>
118
+ <a class="btn-outline" href="#">Learn More</a>
119
+ </div>
120
+ </section>
121
+
122
+ <hr class="section-divider">
123
+
124
+ <section class="section" id="colors">
125
+ <div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
126
+ <div class="color-group-label">Primary</div>
127
+ <div class="color-grid">
128
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#191c1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Revolut Dark</div><div class="color-swatch-hex">#191c1f</div><div class="color-swatch-role">Dark surface, text</div></div></div>
129
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Light surface</div></div></div>
130
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#f4f4f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f4f4f4</div><div class="color-swatch-role">Secondary surface</div></div></div>
131
+ </div>
132
+ <div class="color-group-label">Semantic</div>
133
+ <div class="color-grid">
134
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#494fdf"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#494fdf</div><div class="color-swatch-role">Brand blue</div></div></div>
135
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e23b4a"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#e23b4a</div><div class="color-swatch-role">Error</div></div></div>
136
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#00a87e"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal</div><div class="color-swatch-hex">#00a87e</div><div class="color-swatch-role">Success</div></div></div>
137
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ec7e00"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ec7e00</div><div class="color-swatch-role">Warning</div></div></div>
138
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e61e49"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Pink</div><div class="color-swatch-hex">#e61e49</div><div class="color-swatch-role">Critical</div></div></div>
139
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#b09000"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow</div><div class="color-swatch-hex">#b09000</div><div class="color-swatch-role">Attention</div></div></div>
140
+ </div>
141
+ <div class="color-group-label">Neutral</div>
142
+ <div class="color-grid">
143
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#505a63"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#505a63</div><div class="color-swatch-role">Secondary text</div></div></div>
144
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#8d969e"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#8d969e</div><div class="color-swatch-role">Muted text</div></div></div>
145
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c9c9cd"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c9c9cd</div><div class="color-swatch-role">Borders</div></div></div>
146
+ </div>
147
+ </section>
148
+
149
+ <hr class="section-divider">
150
+
151
+ <section class="section" id="typography">
152
+ <div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
153
+ <div class="type-sample"><div style="font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px;">Display Mega</div><div class="type-meta">Display — 136px / 500 / 1.00 / -2.72px / Aeonik Pro</div></div>
154
+ <div class="type-sample"><div style="font-family:var(--font-display); font-size:48px; font-weight:500; line-height:1.21; letter-spacing:-0.48px;">Section Heading</div><div class="type-meta">Section — 48px / 500 / 1.21 / -0.48px / Aeonik Pro</div></div>
155
+ <div class="type-sample"><div style="font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px;">Card Title</div><div class="type-meta">Card — 32px / 500 / 1.19 / -0.32px / Aeonik Pro</div></div>
156
+ <div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; letter-spacing:-0.09px; color:var(--slate);">Body Large — One app for all things money. From spending to saving, to investing and beyond.</div><div class="type-meta">Body — 18px / 400 / 1.56 / -0.09px / Inter</div></div>
157
+ <div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.50; letter-spacing:0.16px;">Body Semibold — Account details</div><div class="type-meta">Semibold — 16px / 600 / 1.50 / +0.16px / Inter</div></div>
158
+ </section>
159
+
160
+ <hr class="section-divider">
161
+
162
+ <section class="section" id="buttons">
163
+ <div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
164
+ <div class="button-row">
165
+ <div class="button-item"><a class="btn-dark" href="#">Get Started</a><div class="button-label">Primary Dark</div></div>
166
+ <div class="button-item"><a class="btn-light" href="#">Learn More</a><div class="button-label">Secondary Light</div></div>
167
+ <div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
168
+ </div>
169
+ <div style="background:var(--dark); padding:16px 20px; border-radius:20px; margin-top:16px; display:inline-flex; gap:12px;">
170
+ <a class="btn-ghost-dark" href="#">Ghost on Dark</a>
171
+ </div>
172
+ <div class="button-label" style="margin-top:8px;">Ghost variant on dark surface</div>
173
+ </section>
174
+
175
+ <div class="section-dark">
176
+ <div class="inner" id="cards">
177
+ <div class="section-label-light">04 / Cards</div><h2 class="section-title">Card Examples</h2>
178
+ <div class="card-grid">
179
+ <div class="card"><h3>Spending</h3><p>Track your spending in real-time. Get instant notifications for every transaction.</p></div>
180
+ <div class="card"><h3>Saving</h3><p>Set saving goals and round up spare change automatically into your vaults.</p></div>
181
+ <div class="card"><h3>Investing</h3><p>Buy and sell stocks, crypto, and commodities commission-free from your phone.</p></div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <section class="section" id="forms">
187
+ <div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
188
+ <div class="form-group"><label class="form-label">Phone number</label><input class="form-input" type="tel" placeholder="+44 7700 900000"><div class="form-state-label">Default</div></div>
189
+ <div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--focus" type="email" value="user@revolut.com"><div class="form-state-label">Focus (blue ring)</div></div>
190
+ <div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--error" type="text" value="-500"><div class="form-state-label">Error (danger ring)</div></div>
191
+ <div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
192
+ </section>
193
+
194
+ <hr class="section-divider">
195
+
196
+ <section class="section">
197
+ <div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
198
+ <div class="spacing-row">
199
+ <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
200
+ <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
201
+ <div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
202
+ <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
203
+ <div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
204
+ <div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
205
+ <div class="spacing-item"><div class="spacing-block" style="width:80px"></div><div class="spacing-value">80</div></div>
206
+ </div>
207
+ </section>
208
+
209
+ <hr class="section-divider">
210
+
211
+ <section class="section">
212
+ <div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
213
+ <div class="radius-row">
214
+ <div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div>
215
+ <div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div>
216
+ <div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div>
217
+ </div>
218
+ </section>
219
+
220
+ <hr class="section-divider">
221
+
222
+ <section class="section">
223
+ <div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
224
+ <div class="elevation-grid">
225
+ <div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — Revolut is flat</div></div>
226
+ <div class="elevation-card" style="box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3);"><div class="elevation-label">Focus</div><div class="elevation-desc">0.125rem ring</div></div>
227
+ </div>
228
+ </section>
229
+
230
+ <footer class="footer">Generated from <a href="https://revolut.com/">revolut.com</a> DESIGN.md — awesome-design-md</footer>
231
+
232
+ </body>
233
+ </html>