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/warp/preview.html ADDED
@@ -0,0 +1,535 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Design System Inspired by Warp</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
11
+ <style>
12
+ :root {
13
+ --bg: #0e0e0d;
14
+ --bg-surface: #161615;
15
+ --parchment: #faf9f6;
16
+ --ash: #afaeac;
17
+ --stone: #868584;
18
+ --purple-gray: #666469;
19
+ --earth: #353534;
20
+ --charcoal: #454545;
21
+ --border: rgba(226, 226, 226, 0.35);
22
+ --border-subtle: rgba(226, 226, 226, 0.15);
23
+ --frosted: rgba(255, 255, 255, 0.04);
24
+ --frosted-btn: rgba(255, 255, 255, 0.16);
25
+ --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
26
+ --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
27
+ }
28
+ * { margin: 0; padding: 0; box-sizing: border-box; }
29
+ body {
30
+ font-family: var(--font);
31
+ background: var(--bg);
32
+ color: var(--parchment);
33
+ line-height: 1.4;
34
+ -webkit-font-smoothing: antialiased;
35
+ }
36
+
37
+ .nav {
38
+ position: sticky; top: 0; z-index: 100;
39
+ display: flex; align-items: center; justify-content: space-between;
40
+ padding: 14px 32px;
41
+ background: rgba(14, 14, 13, 0.9);
42
+ backdrop-filter: blur(12px);
43
+ border-bottom: 1px solid var(--border-subtle);
44
+ }
45
+ .nav-brand { font-size: 15px; font-weight: 500; color: var(--parchment); letter-spacing: -0.15px; }
46
+ .nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }
47
+ .nav-links a {
48
+ color: var(--stone); text-decoration: none; font-size: 16px; font-weight: 400;
49
+ transition: color 0.2s;
50
+ }
51
+ .nav-links a:hover { color: var(--parchment); }
52
+ .nav-cta {
53
+ background: var(--earth); color: var(--ash) !important;
54
+ padding: 8px 20px; border-radius: 50px; font-weight: 500; font-size: 14px;
55
+ transition: opacity 0.2s;
56
+ }
57
+ .nav-cta:hover { opacity: 0.8; }
58
+
59
+ .hero {
60
+ padding: 120px 32px 100px; text-align: center;
61
+ max-width: 1200px; margin: 0 auto;
62
+ }
63
+ .hero h1 {
64
+ font-size: 72px; font-weight: 400; letter-spacing: -2.4px; line-height: 1.0;
65
+ color: var(--parchment); margin-bottom: 20px;
66
+ }
67
+ .hero .subtitle {
68
+ font-size: 20px; color: var(--ash); letter-spacing: -0.2px;
69
+ line-height: 1.4; max-width: 560px; margin: 0 auto 40px;
70
+ }
71
+ .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
72
+ .btn-primary {
73
+ display: inline-flex; align-items: center;
74
+ background: var(--earth); color: var(--ash);
75
+ padding: 12px 28px; border-radius: 50px;
76
+ font-size: 16px; font-weight: 500; text-decoration: none;
77
+ border: none; cursor: pointer; transition: opacity 0.2s;
78
+ font-family: var(--font);
79
+ }
80
+ .btn-primary:hover { opacity: 0.8; }
81
+ .btn-secondary {
82
+ display: inline-flex; align-items: center;
83
+ background: transparent; color: var(--parchment);
84
+ padding: 12px 28px; border-radius: 50px;
85
+ font-size: 16px; font-weight: 400; text-decoration: none;
86
+ border: 1px solid var(--border); cursor: pointer;
87
+ transition: opacity 0.2s; font-family: var(--font);
88
+ }
89
+ .btn-secondary:hover { opacity: 0.7; }
90
+
91
+ .section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
92
+ .section-title {
93
+ font-size: 48px; font-weight: 400; letter-spacing: -0.96px; line-height: 1.2; margin-bottom: 12px;
94
+ }
95
+ .section-desc { font-size: 18px; color: var(--ash); margin-bottom: 48px; letter-spacing: -0.18px; line-height: 1.3; }
96
+ .section-divider {
97
+ border: none; border-top: 1px solid var(--border-subtle);
98
+ max-width: 1136px; margin: 0 auto;
99
+ }
100
+
101
+ .color-group { margin-bottom: 40px; }
102
+ .color-group-title {
103
+ font-size: 12px; font-weight: 400; color: var(--stone);
104
+ text-transform: uppercase; letter-spacing: 2.4px; margin-bottom: 16px;
105
+ }
106
+ .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
107
+ .color-swatch {
108
+ border-radius: 12px; overflow: hidden;
109
+ background: var(--bg-surface); border: 1px solid var(--border-subtle);
110
+ }
111
+ .color-swatch-preview { height: 72px; width: 100%; }
112
+ .color-swatch-info { padding: 12px; }
113
+ .color-swatch-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
114
+ .color-swatch-hex { font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
115
+ .color-swatch-role { font-size: 11px; color: var(--ash); margin-top: 4px; line-height: 1.4; }
116
+
117
+ .type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }
118
+ .type-sample:last-child { border-bottom: none; }
119
+ .type-label {
120
+ font-size: 12px; color: var(--stone); letter-spacing: 2.4px;
121
+ text-transform: uppercase; margin-bottom: 8px;
122
+ }
123
+ .type-spec { font-size: 12px; color: var(--stone); margin-top: 8px; }
124
+
125
+ .button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
126
+ .btn-tag {
127
+ background: var(--frosted-btn); color: var(--parchment);
128
+ padding: 4px 12px; border-radius: 6px;
129
+ font-size: 14px; font-weight: 400; border: none; cursor: pointer;
130
+ transition: opacity 0.2s; font-family: var(--font);
131
+ }
132
+ .btn-tag:hover { opacity: 0.7; }
133
+ .btn-ghost {
134
+ background: transparent; color: var(--ash);
135
+ padding: 12px 28px; border-radius: 50px;
136
+ font-size: 16px; font-weight: 400; border: none; cursor: pointer;
137
+ text-decoration: underline; text-underline-offset: 3px;
138
+ text-decoration-color: var(--charcoal);
139
+ transition: color 0.2s; font-family: var(--font);
140
+ }
141
+ .btn-ghost:hover { color: var(--parchment); }
142
+ .btn-label { display: block; font-size: 11px; color: var(--stone); margin-top: 8px; text-align: center; }
143
+ .btn-item { text-align: center; }
144
+
145
+ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
146
+ .card {
147
+ background: var(--bg-surface); border-radius: 14px; padding: 28px;
148
+ border: 1px solid var(--border); transition: border-color 0.3s;
149
+ }
150
+ .card:hover { border-color: rgba(226, 226, 226, 0.5); }
151
+ .card-title { font-size: 22px; font-weight: 500; margin-bottom: 8px; line-height: 1.14; }
152
+ .card-text { font-size: 16px; color: var(--ash); line-height: 1.4; }
153
+ .card-tag {
154
+ display: inline-block; padding: 2px 8px;
155
+ background: var(--frosted-btn); border-radius: 4px;
156
+ font-size: 12px; font-weight: 400; color: var(--parchment);
157
+ margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1.4px;
158
+ }
159
+
160
+ .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
161
+ .form-group { display: flex; flex-direction: column; gap: 6px; }
162
+ .form-label { font-size: 14px; font-weight: 400; color: var(--stone); text-transform: uppercase; letter-spacing: 1.4px; }
163
+ .form-input {
164
+ background: var(--bg); border: 1px solid var(--border-subtle);
165
+ border-radius: 8px; padding: 12px 14px; color: var(--parchment);
166
+ font-size: 16px; font-family: var(--font); outline: none;
167
+ transition: border-color 0.2s;
168
+ }
169
+ .form-input::placeholder { color: var(--stone); }
170
+ .form-input:focus { border-color: var(--ash); }
171
+ .form-input-error { border-color: #c45050; }
172
+ .form-error-text { font-size: 12px; color: #c45050; }
173
+ textarea.form-input { min-height: 100px; resize: vertical; }
174
+
175
+ .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
176
+ .spacing-box { height: 28px; background: var(--ash); border-radius: 4px; opacity: 0.3; }
177
+ .spacing-label { font-size: 12px; color: var(--stone); min-width: 50px; text-align: right; font-family: var(--font-mono); }
178
+
179
+ .radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
180
+ .radius-item { text-align: center; }
181
+ .radius-box {
182
+ width: 64px; height: 64px;
183
+ background: var(--frosted); border: 1px solid var(--border-subtle); margin-bottom: 8px;
184
+ }
185
+ .radius-value { font-size: 11px; color: var(--stone); font-family: var(--font-mono); }
186
+ .radius-context { font-size: 10px; color: var(--purple-gray); margin-top: 2px; }
187
+
188
+ .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
189
+ .elevation-card { padding: 24px; border-radius: 12px; background: var(--bg-surface); min-height: 110px; }
190
+ .elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
191
+ .elevation-desc { font-size: 13px; color: var(--ash); line-height: 1.5; }
192
+
193
+ .footer {
194
+ text-align: center; padding: 48px 32px;
195
+ border-top: 1px solid var(--border-subtle); margin-top: 40px;
196
+ }
197
+ .footer p { font-size: 13px; color: var(--stone); }
198
+ .footer a { color: var(--ash); text-decoration: underline; text-decoration-color: var(--charcoal); }
199
+
200
+ @media (max-width: 768px) {
201
+ .hero h1 { font-size: 48px; letter-spacing: -1.5px; }
202
+ .section-title { font-size: 36px; letter-spacing: -0.7px; }
203
+ .nav-links { display: none; }
204
+ .color-grid { grid-template-columns: repeat(2, 1fr); }
205
+ .card-grid { grid-template-columns: 1fr; }
206
+ .form-grid { grid-template-columns: 1fr; }
207
+ .elevation-grid { grid-template-columns: 1fr; }
208
+ }
209
+ </style>
210
+ </head>
211
+ <body>
212
+
213
+ <nav class="nav">
214
+ <span class="nav-brand">awesome-design-md</span>
215
+ <ul class="nav-links">
216
+ <li><a href="#colors">Colors</a></li>
217
+ <li><a href="#typography">Typography</a></li>
218
+ <li><a href="#buttons">Buttons</a></li>
219
+ <li><a href="#cards">Cards</a></li>
220
+ <li><a href="#forms">Forms</a></li>
221
+ <li><a href="#elevation">Elevation</a></li>
222
+ <li><a href="#" class="nav-cta">Download</a></li>
223
+ </ul>
224
+ </nav>
225
+
226
+ <section class="hero">
227
+ <h1>Design System<br>Inspired by Warp</h1>
228
+ <p class="subtitle">A visual catalog of design tokens, components, and patterns extracted from Warp's warm-dark marketing site and documented in DESIGN.md.</p>
229
+ <div class="hero-buttons">
230
+ <a href="#colors" class="btn-primary">Explore Tokens</a>
231
+ <a href="#buttons" class="btn-secondary">View Components</a>
232
+ </div>
233
+ </section>
234
+
235
+ <hr class="section-divider">
236
+
237
+ <section class="section" id="colors">
238
+ <h2 class="section-title">Color Palette</h2>
239
+ <p class="section-desc">Almost monochromatic warm grays — from warm parchment text to earth-tone dark surfaces. No bold accents.</p>
240
+
241
+ <div class="color-group">
242
+ <h3 class="color-group-title">Primary</h3>
243
+ <div class="color-grid">
244
+ <div class="color-swatch">
245
+ <div class="color-swatch-preview" style="background: #faf9f6;"></div>
246
+ <div class="color-swatch-info">
247
+ <div class="color-swatch-name">Warm Parchment</div>
248
+ <div class="color-swatch-hex">#faf9f6</div>
249
+ <div class="color-swatch-role">Primary text, barely-cream off-white</div>
250
+ </div>
251
+ </div>
252
+ <div class="color-swatch">
253
+ <div class="color-swatch-preview" style="background: #353534;"></div>
254
+ <div class="color-swatch-info">
255
+ <div class="color-swatch-name">Earth Gray</div>
256
+ <div class="color-swatch-hex">#353534</div>
257
+ <div class="color-swatch-role">Button backgrounds, dark surfaces</div>
258
+ </div>
259
+ </div>
260
+ <div class="color-swatch">
261
+ <div class="color-swatch-preview" style="background: #0e0e0d; border: 1px solid var(--border-subtle);"></div>
262
+ <div class="color-swatch-info">
263
+ <div class="color-swatch-name">Deep Void</div>
264
+ <div class="color-swatch-hex">#0e0e0d</div>
265
+ <div class="color-swatch-role">Page background, warm near-black</div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <div class="color-group">
272
+ <h3 class="color-group-title">Neutrals & Text</h3>
273
+ <div class="color-grid">
274
+ <div class="color-swatch">
275
+ <div class="color-swatch-preview" style="background: #afaeac;"></div>
276
+ <div class="color-swatch-info">
277
+ <div class="color-swatch-name">Ash Gray</div>
278
+ <div class="color-swatch-hex">#afaeac</div>
279
+ <div class="color-swatch-role">Body text, button text</div>
280
+ </div>
281
+ </div>
282
+ <div class="color-swatch">
283
+ <div class="color-swatch-preview" style="background: #868584;"></div>
284
+ <div class="color-swatch-info">
285
+ <div class="color-swatch-name">Stone Gray</div>
286
+ <div class="color-swatch-hex">#868584</div>
287
+ <div class="color-swatch-role">Secondary text, labels</div>
288
+ </div>
289
+ </div>
290
+ <div class="color-swatch">
291
+ <div class="color-swatch-preview" style="background: #666469;"></div>
292
+ <div class="color-swatch-info">
293
+ <div class="color-swatch-name">Purple-Tint Gray</div>
294
+ <div class="color-swatch-hex">#666469</div>
295
+ <div class="color-swatch-role">Link text, subtle purple undertone</div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="color-group">
302
+ <h3 class="color-group-title">Surface & Border</h3>
303
+ <div class="color-grid">
304
+ <div class="color-swatch">
305
+ <div class="color-swatch-preview" style="background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);"></div>
306
+ <div class="color-swatch-info">
307
+ <div class="color-swatch-name">Frosted Veil</div>
308
+ <div class="color-swatch-hex">rgba(255,255,255,0.04)</div>
309
+ <div class="color-swatch-role">Subtle surface overlay</div>
310
+ </div>
311
+ </div>
312
+ <div class="color-swatch">
313
+ <div class="color-swatch-preview" style="background: rgba(226,226,226,0.35);"></div>
314
+ <div class="color-swatch-info">
315
+ <div class="color-swatch-name">Mist Border</div>
316
+ <div class="color-swatch-hex">rgba(226,226,226,0.35)</div>
317
+ <div class="color-swatch-role">Card borders, containment</div>
318
+ </div>
319
+ </div>
320
+ <div class="color-swatch">
321
+ <div class="color-swatch-preview" style="background: rgba(255,255,255,0.16);"></div>
322
+ <div class="color-swatch-info">
323
+ <div class="color-swatch-name">Frosted Button</div>
324
+ <div class="color-swatch-hex">rgba(255,255,255,0.16)</div>
325
+ <div class="color-swatch-role">Tag/inline button background</div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </section>
331
+
332
+ <hr class="section-divider">
333
+
334
+ <section class="section" id="typography">
335
+ <h2 class="section-title">Typography Scale</h2>
336
+ <p class="section-desc">Matter font family — geometric but approachable. Regular weight dominance with editorial uppercase labels.</p>
337
+
338
+ <div class="type-sample">
339
+ <div class="type-label">Display Hero — 80px / 400 / 1.00 / -2.4px</div>
340
+ <div style="font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -2.4px;">The best terminal</div>
341
+ <div class="type-spec">Matter Regular (shown in Inter fallback) — maximum compression</div>
342
+ </div>
343
+
344
+ <div class="type-sample">
345
+ <div class="type-label">Section Display — 56px / 400 / 1.20 / -0.56px</div>
346
+ <div style="font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.56px;">Development environment</div>
347
+ <div class="type-spec">Matter Regular — feature section headings</div>
348
+ </div>
349
+
350
+ <div class="type-sample">
351
+ <div class="type-label">Feature Heading — 40px / 400 / 1.10 / -0.4px</div>
352
+ <div style="font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.4px;">Agents that actually work</div>
353
+ <div class="type-spec">Matter Regular — feature block titles</div>
354
+ </div>
355
+
356
+ <div class="type-sample">
357
+ <div class="type-label">Card Title — 22px / 500 / 1.14</div>
358
+ <div style="font-size: 22px; font-weight: 500; line-height: 1.14;">Everything you need to ship faster</div>
359
+ <div class="type-spec">Matter Medium — emphasized card headers</div>
360
+ </div>
361
+
362
+ <div class="type-sample">
363
+ <div class="type-label">Body Large — 20px / 400 / 1.40 / -0.2px</div>
364
+ <div style="font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: -0.2px; color: var(--ash);">Warp is the terminal reimagined with AI and collaborative tools for modern development teams.</div>
365
+ <div class="type-spec">Matter Regular — relaxed reading rhythm</div>
366
+ </div>
367
+
368
+ <div class="type-sample">
369
+ <div class="type-label">Body — 18px / 400 / 1.30 / -0.18px</div>
370
+ <div style="font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: -0.18px; color: var(--ash);">Built from the ground up in Rust for speed, with AI integrated at every level.</div>
371
+ <div class="type-spec">Matter Regular — standard body paragraphs</div>
372
+ </div>
373
+
374
+ <div class="type-sample">
375
+ <div class="type-label">Uppercase Label — 12px / 400 / 1.35 / 2.4px</div>
376
+ <div style="font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 2.4px; text-transform: uppercase; color: var(--stone);">Featured Integration</div>
377
+ <div class="type-spec">Matter Regular — editorial categorization, wide tracking</div>
378
+ </div>
379
+
380
+ <div class="type-sample">
381
+ <div class="type-label">Code — 16px / 400 / 1.00</div>
382
+ <div style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.0; color: var(--parchment);">curl -fsSL https://warp.dev/install | bash</div>
383
+ <div class="type-spec">Geist Mono / Matter Mono Regular — terminal display</div>
384
+ </div>
385
+ </section>
386
+
387
+ <hr class="section-divider">
388
+
389
+ <section class="section" id="buttons">
390
+ <h2 class="section-title">Button Variants</h2>
391
+ <p class="section-desc">Restrained and muted — dark pills, frosted tags, underline ghosts. No bright CTAs.</p>
392
+
393
+ <div class="button-showcase">
394
+ <div class="btn-item">
395
+ <a href="#" class="btn-primary">Download Warp</a>
396
+ <span class="btn-label">Dark Pill / Primary</span>
397
+ </div>
398
+ <div class="btn-item">
399
+ <a href="#" class="btn-secondary">Learn More</a>
400
+ <span class="btn-label">Border Pill / Secondary</span>
401
+ </div>
402
+ <div class="btn-item">
403
+ <button class="btn-tag">New Feature</button>
404
+ <span class="btn-label">Frosted Tag / 6px</span>
405
+ </div>
406
+ <div class="btn-item">
407
+ <button class="btn-ghost">Read the blog</button>
408
+ <span class="btn-label">Ghost / Underline</span>
409
+ </div>
410
+ <div class="btn-item">
411
+ <a href="#" class="btn-primary" style="padding: 8px 20px; font-size: 14px;">Sign Up</a>
412
+ <span class="btn-label">Small / Nav CTA</span>
413
+ </div>
414
+ </div>
415
+ </section>
416
+
417
+ <hr class="section-divider">
418
+
419
+ <section class="section" id="cards">
420
+ <h2 class="section-title">Card Examples</h2>
421
+ <p class="section-desc">Semi-transparent borders for containment, warm dark surfaces, editorial category tags.</p>
422
+
423
+ <div class="card-grid">
424
+ <div class="card">
425
+ <div class="card-tag">Terminal</div>
426
+ <h3 class="card-title">Built in Rust</h3>
427
+ <p class="card-text">Blazingly fast terminal performance with native rendering and GPU acceleration for the smoothest experience.</p>
428
+ </div>
429
+ <div class="card">
430
+ <div class="card-tag">AI Agent</div>
431
+ <h3 class="card-title">Agent Mode</h3>
432
+ <p class="card-text">Let AI agents handle complex terminal workflows — from debugging to deployment — while you focus on building.</p>
433
+ </div>
434
+ <div class="card">
435
+ <div class="card-tag">Collaboration</div>
436
+ <h3 class="card-title">Shared Workflows</h3>
437
+ <p class="card-text">Share terminal sessions, commands, and configurations with your team. Real-time collaborative development.</p>
438
+ </div>
439
+ </div>
440
+ </section>
441
+
442
+ <hr class="section-divider">
443
+
444
+ <section class="section" id="forms">
445
+ <h2 class="section-title">Form Elements</h2>
446
+ <p class="section-desc">Warm dark inputs with subtle borders. Focus brightens the border — no colored rings.</p>
447
+
448
+ <div class="form-grid">
449
+ <div class="form-group">
450
+ <label class="form-label">Full Name</label>
451
+ <input type="text" class="form-input" placeholder="Enter your name">
452
+ </div>
453
+ <div class="form-group">
454
+ <label class="form-label">Email (Focus)</label>
455
+ <input type="email" class="form-input" placeholder="you@warp.dev" style="border-color: var(--ash);">
456
+ </div>
457
+ <div class="form-group">
458
+ <label class="form-label">API Key (Error)</label>
459
+ <input type="text" class="form-input form-input-error" value="invalid-key">
460
+ <span class="form-error-text">Invalid key format</span>
461
+ </div>
462
+ <div class="form-group">
463
+ <label class="form-label">Description</label>
464
+ <textarea class="form-input" placeholder="Describe your workflow..."></textarea>
465
+ </div>
466
+ </div>
467
+ </section>
468
+
469
+ <hr class="section-divider">
470
+
471
+ <section class="section" id="spacing">
472
+ <h2 class="section-title">Spacing Scale</h2>
473
+ <p class="section-desc">8px base unit with editorial-grade spacing for the magazine-like layout.</p>
474
+
475
+ <div>
476
+ <div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
477
+ <div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 36px;"></div></div>
478
+ <div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 56px;"></div></div>
479
+ <div class="spacing-row"><span class="spacing-label">16px</span><div class="spacing-box" style="width: 80px;"></div></div>
480
+ <div class="spacing-row"><span class="spacing-label">24px</span><div class="spacing-box" style="width: 128px;"></div></div>
481
+ <div class="spacing-row"><span class="spacing-label">32px</span><div class="spacing-box" style="width: 180px;"></div></div>
482
+ <div class="spacing-row"><span class="spacing-label">36px</span><div class="spacing-box" style="width: 210px;"></div></div>
483
+ </div>
484
+ </section>
485
+
486
+ <hr class="section-divider">
487
+
488
+ <section class="section" id="radius">
489
+ <h2 class="section-title">Border Radius Scale</h2>
490
+ <p class="section-desc">From small tags to full pill CTAs — radius grows with element prominence.</p>
491
+
492
+ <div class="radius-row">
493
+ <div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-value">4px</div><div class="radius-context">Tags</div></div>
494
+ <div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-value">6px</div><div class="radius-context">Buttons</div></div>
495
+ <div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-value">8px</div><div class="radius-context">Images</div></div>
496
+ <div class="radius-item"><div class="radius-box" style="border-radius: 12px;"></div><div class="radius-value">12px</div><div class="radius-context">Cards</div></div>
497
+ <div class="radius-item"><div class="radius-box" style="border-radius: 14px;"></div><div class="radius-value">14px</div><div class="radius-context">Large cards</div></div>
498
+ <div class="radius-item"><div class="radius-box" style="border-radius: 40px;"></div><div class="radius-value">40px</div><div class="radius-context">Sections</div></div>
499
+ <div class="radius-item"><div class="radius-box" style="border-radius: 50px; width: 64px; height: 40px;"></div><div class="radius-value">50px</div><div class="radius-context">Pill CTA</div></div>
500
+ <div class="radius-item"><div class="radius-box" style="border-radius: 200px; width: 120px; height: 12px;"></div><div class="radius-value">200px</div><div class="radius-context">Progress bar</div></div>
501
+ </div>
502
+ </section>
503
+
504
+ <hr class="section-divider">
505
+
506
+ <section class="section" id="elevation">
507
+ <h2 class="section-title">Elevation & Depth</h2>
508
+ <p class="section-desc">Remarkably flat — depth through borders and photography, not shadows.</p>
509
+
510
+ <div class="elevation-grid">
511
+ <div class="elevation-card" style="box-shadow: none; border: 1px solid var(--border-subtle);">
512
+ <div class="elevation-label">Level 0 — Flat</div>
513
+ <div class="elevation-desc">No shadow. The warm dark canvas baseline. Most surfaces rest here.</div>
514
+ </div>
515
+ <div class="elevation-card" style="background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);">
516
+ <div class="elevation-label">Level 1 — Veil</div>
517
+ <div class="elevation-desc">Ultra-subtle white overlay (rgba(255,255,255,0.04)). Barely visible differentiation.</div>
518
+ </div>
519
+ <div class="elevation-card" style="border: 1px solid var(--border);">
520
+ <div class="elevation-label">Level 2 — Border</div>
521
+ <div class="elevation-desc">Semi-transparent border (rgba(226,226,226,0.35)). Ghostly containment for cards.</div>
522
+ </div>
523
+ <div class="elevation-card" style="box-shadow: rgba(0,0,0,0.2) 0px 5px 15px; border: 1px solid var(--border-subtle);">
524
+ <div class="elevation-label">Level 3 — Ambient</div>
525
+ <div class="elevation-desc">Subtle ambient shadow for floating elements. Used sparingly.</div>
526
+ </div>
527
+ </div>
528
+ </section>
529
+
530
+ <footer class="footer">
531
+ <p>Design system extracted from <a href="https://warp.dev">warp.dev</a> — Generated by awesome-design-md</p>
532
+ </footer>
533
+
534
+ </body>
535
+ </html>
package/design-md/webflow/DESIGN.md ADDED
@@ -0,0 +1,92 @@
1
+ # Design System: Webflow
2
+
3
+ ## 1. Visual Theme & Atmosphere
4
+
5
+ Webflow's website is a visually rich, tool-forward platform that communicates "design without code" through clean white surfaces, the signature Webflow Blue (`#146ef5`), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.
6
+
7
+ **Key Characteristics:**
8
+ - White canvas with near-black (`#080808`) text
9
+ - Webflow Blue (`#146ef5`) as primary brand + interactive color
10
+ - WF Visual Sans Variable — custom variable font with weight 500–600
11
+ - Rich secondary palette: purple `#7a3dff`, pink `#ed52cb`, green `#00d722`, orange `#ff6b00`, yellow `#ffae13`, red `#ee1d36`
12
+ - Conservative 4px–8px border-radius — sharp, not rounded
13
+ - Multi-layer shadow stacks (5-layer cascading shadows)
14
+ - Uppercase labels: 10px–15px, weight 500–600, wide letter-spacing (0.6px–1.5px)
15
+ - translate(6px) hover animation on buttons
16
+
17
+ ## 2. Color Palette & Roles
18
+
19
+ ### Primary
20
+ - **Near Black** (`#080808`): Primary text
21
+ - **Webflow Blue** (`#146ef5`): `--_color---primary--webflow-blue`, primary CTA and links
22
+ - **Blue 400** (`#3b89ff`): `--_color---primary--blue-400`, lighter interactive blue
23
+ - **Blue 300** (`#006acc`): `--_color---blue-300`, darker blue variant
24
+ - **Button Hover Blue** (`#0055d4`): `--mkto-embed-color-button-hover`
25
+
26
+ ### Secondary Accents
27
+ - **Purple** (`#7a3dff`): `--_color---secondary--purple`
28
+ - **Pink** (`#ed52cb`): `--_color---secondary--pink`
29
+ - **Green** (`#00d722`): `--_color---secondary--green`
30
+ - **Orange** (`#ff6b00`): `--_color---secondary--orange`
31
+ - **Yellow** (`#ffae13`): `--_color---secondary--yellow`
32
+ - **Red** (`#ee1d36`): `--_color---secondary--red`
33
+
34
+ ### Neutral
35
+ - **Gray 800** (`#222222`): Dark secondary text
36
+ - **Gray 700** (`#363636`): Mid text
37
+ - **Gray 300** (`#ababab`): Muted text, placeholder
38
+ - **Mid Gray** (`#5a5a5a`): Link text
39
+ - **Border Gray** (`#d8d8d8`): Borders, dividers
40
+ - **Border Hover** (`#898989`): Hover border
41
+
42
+ ### Shadows
43
+ - **5-layer cascade**: `rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
44
+
45
+ ## 3. Typography Rules
46
+
47
+ ### Font: `WF Visual Sans Variable`, fallback: `Arial`
48
+
49
+ | Role | Size | Weight | Line Height | Letter Spacing | Notes |
50
+ |------|------|--------|-------------|----------------|-------|
51
+ | Display Hero | 80px | 600 | 1.04 | -0.8px | |
52
+ | Section Heading | 56px | 600 | 1.04 | normal | |
53
+ | Sub-heading | 32px | 500 | 1.30 | normal | |
54
+ | Feature Title | 24px | 500–600 | 1.30 | normal | |
55
+ | Body | 20px | 400–500 | 1.40–1.50 | normal | |
56
+ | Body Standard | 16px | 400–500 | 1.60 | -0.16px | |
57
+ | Button | 16px | 500 | 1.60 | -0.16px | |
58
+ | Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |
59
+ | Caption | 14px | 400–500 | 1.40–1.60 | normal | |
60
+ | Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |
61
+ | Micro Uppercase | 10px | 500–600 | 1.30 | 1px | uppercase |
62
+ | Code: Inconsolata (companion monospace font)
63
+
64
+ ## 4. Component Stylings
65
+
66
+ ### Buttons
67
+ - Transparent: text `#080808`, translate(6px) on hover
68
+ - White circle: 50% radius, white bg
69
+ - Blue badge: `#146ef5` bg, 4px radius, weight 550
70
+
71
+ ### Cards: `1px solid #d8d8d8`, 4px–8px radius
72
+ ### Badges: Blue-tinted bg at 10% opacity, 4px radius
73
+
74
+ ## 5. Layout
75
+ - Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)
76
+ - Radius: 2px, 4px, 8px, 50% — conservative, sharp
77
+ - Breakpoints: 479px, 768px, 992px
78
+
79
+ ## 6. Depth: 5-layer cascading shadow system
80
+
81
+ ## 7. Do's and Don'ts
82
+ - Do: Use WF Visual Sans Variable at 500–600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.
83
+ - Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.
84
+
85
+ ## 8. Responsive: 479px, 768px, 992px
86
+
87
+ ## 9. Agent Prompt Guide
88
+ - Text: Near Black (`#080808`)
89
+ - CTA: Webflow Blue (`#146ef5`)
90
+ - Background: White (`#ffffff`)
91
+ - Border: `#d8d8d8`
92
+ - Secondary: Purple `#7a3dff`, Pink `#ed52cb`, Green `#00d722`
package/design-md/webflow/README.md ADDED
@@ -0,0 +1,23 @@
1
+ # Webflow Inspired Design System
2
+
3
+ [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/webflow/DESIGN.md) extracted from the public [webflow](https://webflow.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
4
+
5
+ ## Files
6
+
7
+ | File | Description |
8
+ |------|-------------|
9
+ | `DESIGN.md` | Complete design system documentation (9 sections) |
10
+ | `preview.html` | Interactive design token catalog (light) |
11
+ | `preview-dark.html` | Interactive design token catalog (dark) |
12
+
13
+ Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/webflow/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Webflow design language.
14
+
15
+ ## Preview
16
+
17
+ A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
18
+
19
+ ### Dark Mode
20
+ ![Webflow Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/webflow/preview-dark-screenshot.png)
21
+
22
+ ### Light Mode
23
+ ![Webflow Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/webflow/preview-screenshot.png)