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/miro/preview-dark.html ADDED
@@ -0,0 +1,174 @@
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: Miro (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=Noto+Sans:wght@400;500;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root { --white:#1c1c1e; --black:#f0f0f2; --blue:#5b76fe; --blue-pressed:#2a41b6; --success:#00b473; --coral-l:#ffc6c6; --coral-d:#600000; --rose-l:#ffd8f4; --teal-l:#c3faf5; --teal-d:#187574; --orange-l:#ffe6cd; --pink:#fde0f0; --slate:#a0a4b0; --placeholder:#606470; --border:#3a3c44; --ring:rgb(50,52,60); --font:'Inter',ui-sans-serif,system-ui,sans-serif; --font-body:'Noto Sans','Inter',sans-serif; }
12
+ * { margin:0; padding:0; box-sizing:border-box; }
13
+ body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
14
+
15
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); box-shadow:var(--ring) 0px 0px 0px 1px; }
16
+ .nav-brand { font-size:16px; font-weight:500; color:var(--black); text-decoration:none; }
17
+ .nav-links { display:flex; gap:20px; list-style:none; }
18
+ .nav-links a { font-size:14px; color:var(--slate); text-decoration:none; }
19
+ .nav-links a:hover { color:var(--blue); }
20
+ .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:8px 16px; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; letter-spacing:0.175px; }
21
+
22
+ .hero { padding:80px 24px 64px; text-align:center; }
23
+ .hero h1 { font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px; margin-bottom:16px; }
24
+ .hero h1 span { color:var(--blue); }
25
+ .hero p { font-family:var(--font-body); font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; }
26
+ .hero-buttons { display:flex; gap:12px; justify-content:center; }
27
+ .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:8px; font-size:17.5px; font-weight:700; letter-spacing:0.175px; text-decoration:none; border:none; cursor:pointer; }
28
+ .btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 24px; border-radius:8px; border:1px solid var(--border); font-size:17.5px; font-weight:500; text-decoration:none; cursor:pointer; }
29
+
30
+ .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
31
+ .section-label { font-size:10.5px; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
32
+ .section-title { font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px; margin-bottom:24px; }
33
+ .section-divider { border:none; border-top:1px solid var(--ring); margin:0; }
34
+
35
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:8px; margin-bottom:16px; }
36
+ .color-swatch { border-radius:12px; overflow:hidden; box-shadow:var(--ring) 0px 0px 0px 1px; }
37
+ .color-swatch-block { height:56px; }
38
+ .color-swatch-info { padding:8px; }
39
+ .color-swatch-name { font-size:11px; font-weight:500; margin-bottom:1px; }
40
+ .color-swatch-hex { font-size:9px; color:var(--placeholder); font-family:monospace; }
41
+ .color-group-label { font-size:11px; font-weight:600; color:var(--slate); margin:16px 0 6px; }
42
+
43
+ .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,232,0.5); }
44
+ .type-sample:last-child { border-bottom:none; }
45
+ .type-meta { font-size:9px; color:var(--placeholder); margin-top:4px; font-family:monospace; }
46
+
47
+ .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
48
+ .button-item { text-align:center; }
49
+ .button-label { font-size:9px; color:var(--placeholder); margin-top:4px; }
50
+
51
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; }
52
+ .card { border-radius:12px; padding:20px; }
53
+ .card h3 { font-size:24px; font-weight:500; letter-spacing:-0.72px; line-height:1.15; margin-bottom:8px; }
54
+ .card p { font-family:var(--font-body); font-size:14px; color:var(--slate); }
55
+
56
+ .form-group { margin-bottom:12px; max-width:380px; }
57
+ .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
58
+ .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
59
+ .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
60
+ .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
61
+ .form-input--error { border-color:var(--coral-d); box-shadow:0 0 0 1px var(--coral-d); }
62
+ .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
63
+ .form-state-label { font-size:9px; color:var(--placeholder); margin-top:3px; }
64
+
65
+ .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
66
+ .spacing-item { text-align:center; }
67
+ .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }
68
+ .spacing-value { font-size:8px; color:var(--placeholder); font-family:monospace; }
69
+
70
+ .radius-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
71
+ .radius-item { text-align:center; }
72
+ .radius-box { width:48px; height:48px; background:var(--teal-l); margin-bottom:3px; }
73
+ .radius-label { font-size:8px; color:var(--placeholder); font-family:monospace; }
74
+
75
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
76
+ .elevation-card { background:var(--white); border-radius:12px; padding:14px; text-align:center; }
77
+ .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }
78
+ .elevation-desc { font-size:8px; color:var(--placeholder); font-family:monospace; }
79
+
80
+ .footer { padding:24px; text-align:center; background:var(--black); color:var(--placeholder); font-size:11px; }
81
+ .footer a { color:var(--blue); text-decoration:underline; }
82
+
83
+ @media (max-width:768px) { .hero h1 { font-size:36px; letter-spacing:-1.08px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
84
+ </style>
85
+ </head>
86
+ <body>
87
+
88
+ <nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up free</a></nav>
89
+ <div style="position:fixed;top:16px;right:16px;z-index:200;background:#5b76fe;color:#fff;font-size:9px;font-weight:700;padding:4px 10px;border-radius:8px;">Dark Mode</div>
90
+
91
+ <section class="hero"><h1>Design System<br>Inspired by <span>Miro</span></h1><p>Every color, font, and component — visualized with collaborative precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
92
+
93
+ <hr class="section-divider">
94
+
95
+ <section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
96
+ <div class="color-group-label">Primary</div>
97
+ <div class="color-grid">
98
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1c1c1e"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#1c1c1e</div></div></div>
99
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#5b76fe"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 450</div><div class="color-swatch-hex">#5b76fe</div></div></div>
100
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#00b473"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#00b473</div></div></div>
101
+ </div>
102
+ <div class="color-group-label">Pastel Accents</div>
103
+ <div class="color-grid">
104
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffc6c6"></div><div class="color-swatch-info"><div class="color-swatch-name">Coral Light</div><div class="color-swatch-hex">#ffc6c6</div></div></div>
105
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffd8f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Rose Light</div><div class="color-swatch-hex">#ffd8f4</div></div></div>
106
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c3faf5"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal Light</div><div class="color-swatch-hex">#c3faf5</div></div></div>
107
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffe6cd"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange Light</div><div class="color-swatch-hex">#ffe6cd</div></div></div>
108
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#fde0f0"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#fde0f0</div></div></div>
109
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#fbd4d4"></div><div class="color-swatch-info"><div class="color-swatch-name">Red Light</div><div class="color-swatch-hex">#fbd4d4</div></div></div>
110
+ </div>
111
+ <div class="color-group-label">Neutral</div>
112
+ <div class="color-grid">
113
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#555a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#555a6a</div></div></div>
114
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#a5a8b5"></div><div class="color-swatch-info"><div class="color-swatch-name">Placeholder</div><div class="color-swatch-hex">#a5a8b5</div></div></div>
115
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c7cad5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c7cad5</div></div></div>
116
+ </div></section>
117
+
118
+ <hr class="section-divider">
119
+
120
+ <section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
121
+ <div class="type-sample"><div style="font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px;">Display Hero</div><div class="type-meta">Roobert PRO Medium — 56px / 1.15 / -1.68px</div></div>
122
+ <div class="type-sample"><div style="font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px;">Section Heading</div><div class="type-meta">Roobert PRO — 48px / 1.15 / -1.44px</div></div>
123
+ <div class="type-sample"><div style="font-size:24px; font-weight:500; line-height:1.15; letter-spacing:-0.72px;">Card Title</div><div class="type-meta">Roobert PRO — 24px / 1.15 / -0.72px</div></div>
124
+ <div class="type-sample"><div style="font-family:var(--font-body); font-size:18px; line-height:1.45; color:var(--slate);">Body — Get from brainstorm to breakthrough with Miro. The visual collaboration platform.</div><div class="type-meta">Noto Sans — 18px / 1.45</div></div>
125
+ <div class="type-sample"><div style="font-size:17.5px; font-weight:700; line-height:1.29; letter-spacing:0.175px;">Button Label</div><div class="type-meta">Roobert PRO — 17.5px / 700 / +0.175px</div></div>
126
+ <div class="type-sample"><div style="font-size:10.5px; text-transform:uppercase; line-height:0.90; color:var(--slate);">MICRO LABEL</div><div class="type-meta">Roobert PRO — 10.5px / uppercase</div></div>
127
+ </section>
128
+
129
+ <hr class="section-divider">
130
+
131
+ <section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
132
+ <div class="button-row">
133
+ <div class="button-item"><a class="btn-blue" href="#">Sign up free</a><div class="button-label">Primary Blue</div></div>
134
+ <div class="button-item"><a class="btn-outline" href="#">Contact sales</a><div class="button-label">Outlined</div></div>
135
+ </div></section>
136
+
137
+ <hr class="section-divider">
138
+
139
+ <section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
140
+ <div class="card-grid">
141
+ <div class="card" style="background:var(--coral-l);"><h3>Brainstorming</h3><p>Ideate together in real-time with sticky notes and voting.</p></div>
142
+ <div class="card" style="background:var(--teal-l);"><h3>Diagramming</h3><p>Create flowcharts, mind maps, and org charts visually.</p></div>
143
+ <div class="card" style="background:var(--orange-l);"><h3>Workshops</h3><p>Run engaging workshops with built-in templates.</p></div>
144
+ <div class="card" style="background:var(--rose-l);"><h3>Strategy</h3><p>Align teams with visual strategic planning tools.</p></div>
145
+ </div></section>
146
+
147
+ <hr class="section-divider">
148
+
149
+ <section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
150
+ <div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
151
+ <div class="form-group"><label class="form-label">Team name</label><input class="form-input form-input--focus" type="text" value="Design Team"><div class="form-state-label">Focus (blue ring)</div></div>
152
+ <div class="form-group"><label class="form-label">Password</label><input class="form-input form-input--error" type="password" value="short"><div class="form-state-label">Error</div></div>
153
+ <div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your board..."></textarea></div>
154
+ </section>
155
+
156
+ <hr class="section-divider">
157
+
158
+ <section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
159
+ <div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
160
+
161
+ <hr class="section-divider">
162
+
163
+ <section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
164
+ <div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50px"></div><div class="radius-label">50px</div></div></div></section>
165
+
166
+ <hr class="section-divider">
167
+
168
+ <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
169
+ <div class="elevation-grid"><div class="elevation-card" style="box-shadow:var(--ring) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring border</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
170
+
171
+ <footer class="footer">Generated from <a href="https://miro.com/">miro.com</a> DESIGN.md — awesome-design-md</footer>
172
+
173
+ </body>
174
+ </html>
package/design-md/miro/preview.html ADDED
@@ -0,0 +1,173 @@
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: Miro (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=Noto+Sans:wght@400;500;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root { --white:#fff; --black:#1c1c1e; --blue:#5b76fe; --blue-pressed:#2a41b6; --success:#00b473; --coral-l:#ffc6c6; --coral-d:#600000; --rose-l:#ffd8f4; --teal-l:#c3faf5; --teal-d:#187574; --orange-l:#ffe6cd; --pink:#fde0f0; --slate:#555a6a; --placeholder:#a5a8b5; --border:#c7cad5; --ring:rgb(224,226,232); --font:'Inter',ui-sans-serif,system-ui,sans-serif; --font-body:'Noto Sans','Inter',sans-serif; }
12
+ * { margin:0; padding:0; box-sizing:border-box; }
13
+ body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
14
+
15
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); box-shadow:var(--ring) 0px 0px 0px 1px; }
16
+ .nav-brand { font-size:16px; font-weight:500; color:var(--black); text-decoration:none; }
17
+ .nav-links { display:flex; gap:20px; list-style:none; }
18
+ .nav-links a { font-size:14px; color:var(--slate); text-decoration:none; }
19
+ .nav-links a:hover { color:var(--blue); }
20
+ .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:8px 16px; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; letter-spacing:0.175px; }
21
+
22
+ .hero { padding:80px 24px 64px; text-align:center; }
23
+ .hero h1 { font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px; margin-bottom:16px; }
24
+ .hero h1 span { color:var(--blue); }
25
+ .hero p { font-family:var(--font-body); font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; }
26
+ .hero-buttons { display:flex; gap:12px; justify-content:center; }
27
+ .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:8px; font-size:17.5px; font-weight:700; letter-spacing:0.175px; text-decoration:none; border:none; cursor:pointer; }
28
+ .btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 24px; border-radius:8px; border:1px solid var(--border); font-size:17.5px; font-weight:500; text-decoration:none; cursor:pointer; }
29
+
30
+ .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
31
+ .section-label { font-size:10.5px; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
32
+ .section-title { font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px; margin-bottom:24px; }
33
+ .section-divider { border:none; border-top:1px solid var(--ring); margin:0; }
34
+
35
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:8px; margin-bottom:16px; }
36
+ .color-swatch { border-radius:12px; overflow:hidden; box-shadow:var(--ring) 0px 0px 0px 1px; }
37
+ .color-swatch-block { height:56px; }
38
+ .color-swatch-info { padding:8px; }
39
+ .color-swatch-name { font-size:11px; font-weight:500; margin-bottom:1px; }
40
+ .color-swatch-hex { font-size:9px; color:var(--placeholder); font-family:monospace; }
41
+ .color-group-label { font-size:11px; font-weight:600; color:var(--slate); margin:16px 0 6px; }
42
+
43
+ .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,232,0.5); }
44
+ .type-sample:last-child { border-bottom:none; }
45
+ .type-meta { font-size:9px; color:var(--placeholder); margin-top:4px; font-family:monospace; }
46
+
47
+ .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
48
+ .button-item { text-align:center; }
49
+ .button-label { font-size:9px; color:var(--placeholder); margin-top:4px; }
50
+
51
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; }
52
+ .card { border-radius:12px; padding:20px; }
53
+ .card h3 { font-size:24px; font-weight:500; letter-spacing:-0.72px; line-height:1.15; margin-bottom:8px; }
54
+ .card p { font-family:var(--font-body); font-size:14px; color:var(--slate); }
55
+
56
+ .form-group { margin-bottom:12px; max-width:380px; }
57
+ .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
58
+ .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
59
+ .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
60
+ .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
61
+ .form-input--error { border-color:var(--coral-d); box-shadow:0 0 0 1px var(--coral-d); }
62
+ .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
63
+ .form-state-label { font-size:9px; color:var(--placeholder); margin-top:3px; }
64
+
65
+ .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
66
+ .spacing-item { text-align:center; }
67
+ .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }
68
+ .spacing-value { font-size:8px; color:var(--placeholder); font-family:monospace; }
69
+
70
+ .radius-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
71
+ .radius-item { text-align:center; }
72
+ .radius-box { width:48px; height:48px; background:var(--teal-l); margin-bottom:3px; }
73
+ .radius-label { font-size:8px; color:var(--placeholder); font-family:monospace; }
74
+
75
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
76
+ .elevation-card { background:var(--white); border-radius:12px; padding:14px; text-align:center; }
77
+ .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }
78
+ .elevation-desc { font-size:8px; color:var(--placeholder); font-family:monospace; }
79
+
80
+ .footer { padding:24px; text-align:center; background:var(--black); color:var(--placeholder); font-size:11px; }
81
+ .footer a { color:var(--blue); text-decoration:underline; }
82
+
83
+ @media (max-width:768px) { .hero h1 { font-size:36px; letter-spacing:-1.08px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
84
+ </style>
85
+ </head>
86
+ <body>
87
+
88
+ <nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up free</a></nav>
89
+
90
+ <section class="hero"><h1>Design System<br>Inspired by <span>Miro</span></h1><p>Every color, font, and component — visualized with collaborative precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
91
+
92
+ <hr class="section-divider">
93
+
94
+ <section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
95
+ <div class="color-group-label">Primary</div>
96
+ <div class="color-grid">
97
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1c1c1e"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#1c1c1e</div></div></div>
98
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#5b76fe"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 450</div><div class="color-swatch-hex">#5b76fe</div></div></div>
99
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#00b473"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#00b473</div></div></div>
100
+ </div>
101
+ <div class="color-group-label">Pastel Accents</div>
102
+ <div class="color-grid">
103
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffc6c6"></div><div class="color-swatch-info"><div class="color-swatch-name">Coral Light</div><div class="color-swatch-hex">#ffc6c6</div></div></div>
104
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffd8f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Rose Light</div><div class="color-swatch-hex">#ffd8f4</div></div></div>
105
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c3faf5"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal Light</div><div class="color-swatch-hex">#c3faf5</div></div></div>
106
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffe6cd"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange Light</div><div class="color-swatch-hex">#ffe6cd</div></div></div>
107
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#fde0f0"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#fde0f0</div></div></div>
108
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#fbd4d4"></div><div class="color-swatch-info"><div class="color-swatch-name">Red Light</div><div class="color-swatch-hex">#fbd4d4</div></div></div>
109
+ </div>
110
+ <div class="color-group-label">Neutral</div>
111
+ <div class="color-grid">
112
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#555a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#555a6a</div></div></div>
113
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#a5a8b5"></div><div class="color-swatch-info"><div class="color-swatch-name">Placeholder</div><div class="color-swatch-hex">#a5a8b5</div></div></div>
114
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c7cad5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c7cad5</div></div></div>
115
+ </div></section>
116
+
117
+ <hr class="section-divider">
118
+
119
+ <section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
120
+ <div class="type-sample"><div style="font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px;">Display Hero</div><div class="type-meta">Roobert PRO Medium — 56px / 1.15 / -1.68px</div></div>
121
+ <div class="type-sample"><div style="font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px;">Section Heading</div><div class="type-meta">Roobert PRO — 48px / 1.15 / -1.44px</div></div>
122
+ <div class="type-sample"><div style="font-size:24px; font-weight:500; line-height:1.15; letter-spacing:-0.72px;">Card Title</div><div class="type-meta">Roobert PRO — 24px / 1.15 / -0.72px</div></div>
123
+ <div class="type-sample"><div style="font-family:var(--font-body); font-size:18px; line-height:1.45; color:var(--slate);">Body — Get from brainstorm to breakthrough with Miro. The visual collaboration platform.</div><div class="type-meta">Noto Sans — 18px / 1.45</div></div>
124
+ <div class="type-sample"><div style="font-size:17.5px; font-weight:700; line-height:1.29; letter-spacing:0.175px;">Button Label</div><div class="type-meta">Roobert PRO — 17.5px / 700 / +0.175px</div></div>
125
+ <div class="type-sample"><div style="font-size:10.5px; text-transform:uppercase; line-height:0.90; color:var(--slate);">MICRO LABEL</div><div class="type-meta">Roobert PRO — 10.5px / uppercase</div></div>
126
+ </section>
127
+
128
+ <hr class="section-divider">
129
+
130
+ <section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
131
+ <div class="button-row">
132
+ <div class="button-item"><a class="btn-blue" href="#">Sign up free</a><div class="button-label">Primary Blue</div></div>
133
+ <div class="button-item"><a class="btn-outline" href="#">Contact sales</a><div class="button-label">Outlined</div></div>
134
+ </div></section>
135
+
136
+ <hr class="section-divider">
137
+
138
+ <section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
139
+ <div class="card-grid">
140
+ <div class="card" style="background:var(--coral-l);"><h3>Brainstorming</h3><p>Ideate together in real-time with sticky notes and voting.</p></div>
141
+ <div class="card" style="background:var(--teal-l);"><h3>Diagramming</h3><p>Create flowcharts, mind maps, and org charts visually.</p></div>
142
+ <div class="card" style="background:var(--orange-l);"><h3>Workshops</h3><p>Run engaging workshops with built-in templates.</p></div>
143
+ <div class="card" style="background:var(--rose-l);"><h3>Strategy</h3><p>Align teams with visual strategic planning tools.</p></div>
144
+ </div></section>
145
+
146
+ <hr class="section-divider">
147
+
148
+ <section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
149
+ <div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
150
+ <div class="form-group"><label class="form-label">Team name</label><input class="form-input form-input--focus" type="text" value="Design Team"><div class="form-state-label">Focus (blue ring)</div></div>
151
+ <div class="form-group"><label class="form-label">Password</label><input class="form-input form-input--error" type="password" value="short"><div class="form-state-label">Error</div></div>
152
+ <div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your board..."></textarea></div>
153
+ </section>
154
+
155
+ <hr class="section-divider">
156
+
157
+ <section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
158
+ <div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
159
+
160
+ <hr class="section-divider">
161
+
162
+ <section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
163
+ <div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50px"></div><div class="radius-label">50px</div></div></div></section>
164
+
165
+ <hr class="section-divider">
166
+
167
+ <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
168
+ <div class="elevation-grid"><div class="elevation-card" style="box-shadow:var(--ring) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring border</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
169
+
170
+ <footer class="footer">Generated from <a href="https://miro.com/">miro.com</a> DESIGN.md — awesome-design-md</footer>
171
+
172
+ </body>
173
+ </html>