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/supabase/preview-dark.html ADDED
@@ -0,0 +1,977 @@
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: Supabase (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=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ /* Brand */
13
+ --color-green: #3ecf8e;
14
+ --color-green-link: #00c573;
15
+ --color-green-border: rgba(62, 207, 142, 0.3);
16
+ /* Neutral Scale */
17
+ --color-near-black: #0f0f0f;
18
+ --color-dark: #171717;
19
+ --color-dark-border: #242424;
20
+ --color-border-dark: #2e2e2e;
21
+ --color-mid-border: #363636;
22
+ --color-border-light: #393939;
23
+ --color-charcoal: #434343;
24
+ --color-dark-gray: #4d4d4d;
25
+ --color-mid-gray: #898989;
26
+ --color-light-gray: #b4b4b4;
27
+ --color-near-white: #efefef;
28
+ --color-off-white: #fafafa;
29
+ /* Surface */
30
+ --color-glass-dark: rgba(41, 41, 41, 0.84);
31
+ /* Radix */
32
+ --color-violet: hsl(251, 63.2%, 63.2%);
33
+ --color-crimson: hsl(348, 60%, 50%);
34
+ --color-purple: hsl(272, 51%, 54%);
35
+ --color-indigo: hsl(226, 70%, 55%);
36
+ --color-yellow: hsl(48, 90%, 55%);
37
+ --color-tomato: hsl(10, 78%, 54%);
38
+ --color-orange: hsl(24, 94%, 50%);
39
+
40
+ --font-primary: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
41
+ --font-mono: 'Source Code Pro', 'Office Code Pro', Menlo, monospace;
42
+
43
+ /* Dark mode tokens — deeper background */
44
+ --bg-page: #0f0f0f;
45
+ --bg-hero: #0f0f0f;
46
+ --bg-card: #141414;
47
+ --bg-input: #140e1f;
48
+ --bg-nav: rgba(15, 15, 15, 0.92);
49
+ --text-primary: #fafafa;
50
+ --text-secondary: #b4b4b4;
51
+ --text-muted: #898989;
52
+ --border-color: #2e2e2e;
53
+ --border-subtle: #1e1e1e;
54
+ --section-label-color: #3ecf8e;
55
+ }
56
+
57
+ * { margin: 0; padding: 0; box-sizing: border-box; }
58
+
59
+ body {
60
+ background: var(--bg-page);
61
+ color: var(--text-primary);
62
+ font-family: var(--font-primary);
63
+ font-size: 16px;
64
+ font-weight: 400;
65
+ line-height: 1.5;
66
+ -webkit-font-smoothing: antialiased;
67
+ }
68
+
69
+ /* DARK MODE BADGE */
70
+ .dark-badge {
71
+ position: fixed;
72
+ top: 16px;
73
+ right: 16px;
74
+ z-index: 200;
75
+ background: rgba(62, 207, 142, 0.12);
76
+ color: var(--color-green);
77
+ border: 1px solid var(--color-green-border);
78
+ border-radius: 9999px;
79
+ padding: 6px 16px;
80
+ font-family: var(--font-mono);
81
+ font-size: 11px;
82
+ font-weight: 500;
83
+ letter-spacing: 1.2px;
84
+ text-transform: uppercase;
85
+ }
86
+
87
+ /* NAV */
88
+ .nav {
89
+ position: sticky;
90
+ top: 0;
91
+ z-index: 100;
92
+ display: flex;
93
+ align-items: center;
94
+ justify-content: space-between;
95
+ padding: 16px 40px;
96
+ background: var(--bg-nav);
97
+ backdrop-filter: blur(12px);
98
+ border-bottom: 1px solid var(--border-subtle);
99
+ }
100
+ .nav-brand {
101
+ font-family: var(--font-primary);
102
+ font-size: 18px;
103
+ font-weight: 400;
104
+ letter-spacing: -0.3px;
105
+ display: flex;
106
+ align-items: center;
107
+ gap: 10px;
108
+ color: var(--text-primary);
109
+ }
110
+ .nav-brand .brand-icon {
111
+ width: 24px;
112
+ height: 24px;
113
+ background: var(--color-green);
114
+ border-radius: 6px;
115
+ display: inline-block;
116
+ }
117
+ .nav-links { display: flex; gap: 32px; align-items: center; }
118
+ .nav-links a {
119
+ color: var(--text-primary);
120
+ text-decoration: none;
121
+ font-size: 14px;
122
+ font-weight: 500;
123
+ line-height: 1.43;
124
+ transition: color 0.2s;
125
+ }
126
+ .nav-links a:hover { color: var(--color-green-link); }
127
+ .nav-cta {
128
+ background: var(--color-green);
129
+ color: #0f0f0f;
130
+ padding: 8px 32px;
131
+ border: 1px solid var(--color-green);
132
+ border-radius: 9999px;
133
+ font-size: 14px;
134
+ font-family: var(--font-primary);
135
+ font-weight: 500;
136
+ line-height: 1.14;
137
+ cursor: pointer;
138
+ }
139
+
140
+ /* HERO */
141
+ .hero {
142
+ text-align: center;
143
+ padding: 128px 40px 96px;
144
+ background: var(--bg-hero);
145
+ }
146
+ .hero-label {
147
+ font-family: var(--font-mono);
148
+ font-size: 12px;
149
+ font-weight: 400;
150
+ text-transform: uppercase;
151
+ letter-spacing: 1.2px;
152
+ color: var(--color-green);
153
+ margin-bottom: 24px;
154
+ }
155
+ .hero h1 {
156
+ font-family: var(--font-primary);
157
+ font-size: 72px;
158
+ font-weight: 400;
159
+ line-height: 1.00;
160
+ letter-spacing: normal;
161
+ margin-bottom: 24px;
162
+ color: var(--text-primary);
163
+ }
164
+ .hero p {
165
+ color: var(--text-secondary);
166
+ font-size: 18px;
167
+ font-weight: 400;
168
+ line-height: 1.56;
169
+ margin-bottom: 40px;
170
+ max-width: 560px;
171
+ margin-left: auto;
172
+ margin-right: auto;
173
+ }
174
+ .hero-buttons { display: flex; gap: 16px; justify-content: center; }
175
+
176
+ /* BUTTONS */
177
+ .btn-primary-pill {
178
+ background: var(--color-near-black);
179
+ color: var(--color-off-white);
180
+ padding: 8px 32px;
181
+ border: 1px solid var(--color-off-white);
182
+ border-radius: 9999px;
183
+ font-size: 14px;
184
+ font-family: var(--font-primary);
185
+ font-weight: 500;
186
+ line-height: 1.14;
187
+ cursor: pointer;
188
+ }
189
+ .btn-secondary-pill {
190
+ background: var(--color-near-black);
191
+ color: var(--color-off-white);
192
+ padding: 8px 32px;
193
+ border: 1px solid var(--color-border-dark);
194
+ border-radius: 9999px;
195
+ font-size: 14px;
196
+ font-family: var(--font-primary);
197
+ font-weight: 500;
198
+ line-height: 1.14;
199
+ cursor: pointer;
200
+ opacity: 0.8;
201
+ }
202
+ .btn-ghost {
203
+ background: transparent;
204
+ color: var(--color-off-white);
205
+ padding: 8px 16px;
206
+ border: 1px solid transparent;
207
+ border-radius: 6px;
208
+ font-size: 14px;
209
+ font-family: var(--font-primary);
210
+ font-weight: 500;
211
+ line-height: 1.14;
212
+ cursor: pointer;
213
+ }
214
+ .btn-green-pill {
215
+ background: var(--color-green);
216
+ color: #0f0f0f;
217
+ padding: 8px 32px;
218
+ border: 1px solid var(--color-green);
219
+ border-radius: 9999px;
220
+ font-size: 14px;
221
+ font-family: var(--font-primary);
222
+ font-weight: 500;
223
+ line-height: 1.14;
224
+ cursor: pointer;
225
+ }
226
+
227
+ /* SECTIONS */
228
+ .section {
229
+ max-width: 1024px;
230
+ margin: 0 auto;
231
+ padding: 90px 40px;
232
+ }
233
+ .section-title {
234
+ font-family: var(--font-mono);
235
+ font-size: 12px;
236
+ font-weight: 400;
237
+ text-transform: uppercase;
238
+ letter-spacing: 1.2px;
239
+ color: var(--section-label-color);
240
+ margin-bottom: 12px;
241
+ }
242
+ .section-heading {
243
+ font-family: var(--font-primary);
244
+ font-size: 36px;
245
+ font-weight: 400;
246
+ line-height: 1.25;
247
+ margin-bottom: 48px;
248
+ color: var(--text-primary);
249
+ }
250
+ .section-divider {
251
+ border: none;
252
+ border-top: 1px solid var(--border-subtle);
253
+ margin: 0 40px;
254
+ max-width: 1024px;
255
+ margin-left: auto;
256
+ margin-right: auto;
257
+ }
258
+
259
+ /* COLOR PALETTE */
260
+ .color-group { margin-bottom: 40px; }
261
+ .color-group-title {
262
+ font-family: var(--font-primary);
263
+ font-size: 20px;
264
+ font-weight: 400;
265
+ line-height: 1.2;
266
+ margin-bottom: 20px;
267
+ color: var(--text-secondary);
268
+ }
269
+ .color-grid {
270
+ display: grid;
271
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
272
+ gap: 16px;
273
+ }
274
+ .color-swatch {
275
+ border: 1px solid var(--border-color);
276
+ border-radius: 8px;
277
+ overflow: hidden;
278
+ }
279
+ .color-swatch-block { height: 80px; }
280
+ .color-swatch-info {
281
+ padding: 12px;
282
+ background: var(--bg-card);
283
+ }
284
+ .color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; color: var(--text-primary); }
285
+ .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
286
+ .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
287
+
288
+ /* TYPOGRAPHY */
289
+ .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
290
+ .type-sample:last-child { border-bottom: none; }
291
+ .type-sample-text { margin-bottom: 8px; }
292
+ .type-sample-label {
293
+ font-family: var(--font-mono);
294
+ font-size: 12px;
295
+ color: var(--text-muted);
296
+ }
297
+
298
+ /* BUTTON ROW */
299
+ .button-row {
300
+ display: flex;
301
+ flex-wrap: wrap;
302
+ gap: 24px;
303
+ align-items: flex-start;
304
+ }
305
+ .button-demo { text-align: center; }
306
+ .button-demo-label {
307
+ font-family: var(--font-mono);
308
+ font-size: 11px;
309
+ color: var(--text-muted);
310
+ margin-top: 10px;
311
+ text-transform: uppercase;
312
+ letter-spacing: 0.55px;
313
+ }
314
+
315
+ /* CARDS */
316
+ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
317
+ .card {
318
+ border-radius: 16px;
319
+ padding: 24px;
320
+ background: var(--bg-card);
321
+ }
322
+ .card-standard {
323
+ border: 1px solid var(--color-border-dark);
324
+ }
325
+ .card-prominent {
326
+ border: 1px solid var(--color-mid-border);
327
+ }
328
+ .card-green-accent {
329
+ border: 1px solid var(--color-green-border);
330
+ }
331
+ .card-label {
332
+ font-family: var(--font-mono);
333
+ font-size: 11px;
334
+ text-transform: uppercase;
335
+ letter-spacing: 1.2px;
336
+ color: var(--text-muted);
337
+ margin-bottom: 16px;
338
+ }
339
+ .card h3 {
340
+ font-family: var(--font-primary);
341
+ font-size: 24px;
342
+ font-weight: 400;
343
+ line-height: 1.33;
344
+ letter-spacing: -0.16px;
345
+ margin-bottom: 12px;
346
+ color: var(--text-primary);
347
+ }
348
+ .card p { color: var(--text-muted); font-size: 14px; line-height: 1.5; font-weight: 400; }
349
+
350
+ /* FORMS */
351
+ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
352
+ .form-group { margin-bottom: 20px; }
353
+ .form-label {
354
+ font-family: var(--font-primary);
355
+ font-size: 14px;
356
+ font-weight: 400;
357
+ color: var(--text-secondary);
358
+ margin-bottom: 8px;
359
+ display: block;
360
+ }
361
+ .form-input {
362
+ width: 100%;
363
+ padding: 10px 14px;
364
+ font-family: var(--font-primary);
365
+ font-size: 14px;
366
+ font-weight: 400;
367
+ line-height: 1.43;
368
+ color: var(--text-primary);
369
+ background: var(--bg-input);
370
+ border: 1px solid var(--color-border-dark);
371
+ border-radius: 6px;
372
+ outline: none;
373
+ transition: border-color 0.2s;
374
+ }
375
+ .form-input::placeholder { color: var(--text-muted); }
376
+ .form-input-focus {
377
+ border-color: var(--color-green);
378
+ box-shadow: 0 0 0 1px var(--color-green-border);
379
+ }
380
+ .form-input-error {
381
+ border-color: var(--color-tomato);
382
+ }
383
+ .form-error-text {
384
+ font-size: 12px;
385
+ color: hsl(10, 78%, 54%);
386
+ margin-top: 6px;
387
+ }
388
+ textarea.form-input {
389
+ min-height: 80px;
390
+ resize: vertical;
391
+ }
392
+
393
+ /* SPACING */
394
+ .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
395
+ .spacing-item { text-align: center; }
396
+ .spacing-box {
397
+ background: var(--color-border-dark);
398
+ border-radius: 2px;
399
+ margin-bottom: 8px;
400
+ }
401
+ .spacing-label {
402
+ font-family: var(--font-mono);
403
+ font-size: 11px;
404
+ color: var(--text-muted);
405
+ }
406
+
407
+ /* RADIUS */
408
+ .radius-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
409
+ .radius-item { text-align: center; }
410
+ .radius-box {
411
+ width: 80px;
412
+ height: 80px;
413
+ background: var(--bg-card);
414
+ border: 1px solid var(--color-border-dark);
415
+ margin-bottom: 8px;
416
+ }
417
+ .radius-label {
418
+ font-family: var(--font-mono);
419
+ font-size: 11px;
420
+ color: var(--text-muted);
421
+ }
422
+ .radius-context {
423
+ font-size: 11px;
424
+ color: var(--text-muted);
425
+ margin-top: 2px;
426
+ }
427
+
428
+ /* ELEVATION */
429
+ .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
430
+ .elevation-card {
431
+ border-radius: 8px;
432
+ padding: 24px;
433
+ min-height: 140px;
434
+ display: flex;
435
+ flex-direction: column;
436
+ justify-content: space-between;
437
+ background: var(--bg-card);
438
+ }
439
+ .elevation-name { font-family: var(--font-primary); font-size: 16px; font-weight: 400; margin-bottom: 8px; color: var(--text-primary); }
440
+ .elevation-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
441
+ .elevation-level {
442
+ font-family: var(--font-mono);
443
+ font-size: 11px;
444
+ color: var(--text-muted);
445
+ text-transform: uppercase;
446
+ letter-spacing: 1.2px;
447
+ margin-top: 12px;
448
+ }
449
+
450
+ /* RESPONSIVE */
451
+ @media (max-width: 768px) {
452
+ .nav { padding: 12px 20px; }
453
+ .nav-links a:not(.nav-cta-wrapper) { display: none; }
454
+ .hero { padding: 80px 20px 60px; }
455
+ .hero h1 { font-size: 40px; }
456
+ .section { padding: 60px 20px; }
457
+ .section-heading { font-size: 28px; }
458
+ .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
459
+ .card-grid { grid-template-columns: 1fr; }
460
+ .hero-buttons { flex-direction: column; align-items: center; }
461
+ .button-row { flex-direction: column; align-items: flex-start; }
462
+ .dark-badge { top: 12px; right: 12px; font-size: 10px; padding: 4px 12px; }
463
+ }
464
+ </style>
465
+ </head>
466
+ <body>
467
+
468
+ <!-- DARK MODE BADGE -->
469
+ <div class="dark-badge">Dark Mode</div>
470
+
471
+ <!-- NAV -->
472
+ <nav class="nav">
473
+ <div class="nav-brand">awesome-design-md</div>
474
+ <div class="nav-links">
475
+ <a href="#colors">Colors</a>
476
+ <a href="#typography">Typography</a>
477
+ <a href="#buttons">Buttons</a>
478
+ <a href="#cards">Cards</a>
479
+ <a href="#forms">Forms</a>
480
+ <a href="#spacing">Spacing</a>
481
+ <a href="#elevation">Elevation</a>
482
+ <button class="nav-cta">Start your project</button>
483
+ </div>
484
+ </nav>
485
+
486
+ <!-- HERO -->
487
+ <section class="hero">
488
+ <div class="hero-label">Design System Preview</div>
489
+ <h1>Design System<br>Inspired by Supabase</h1>
490
+ <p>Even deeper darkness. The deepest surface (#0f0f0f) as the page canvas, where borders define every edge and green marks the brand.</p>
491
+ <div class="hero-buttons">
492
+ <button class="btn-primary-pill">Start your project</button>
493
+ <button class="btn-secondary-pill">View Documentation</button>
494
+ </div>
495
+ </section>
496
+
497
+ <hr class="section-divider">
498
+
499
+ <!-- 1. COLOR PALETTE -->
500
+ <section class="section" id="colors">
501
+ <div class="section-title">01 / Color Palette</div>
502
+ <h2 class="section-heading">Color Palette</h2>
503
+
504
+ <div class="color-group">
505
+ <h3 class="color-group-title">Brand</h3>
506
+ <div class="color-grid">
507
+ <div class="color-swatch">
508
+ <div class="color-swatch-block" style="background: #3ecf8e;"></div>
509
+ <div class="color-swatch-info">
510
+ <div class="color-swatch-name">Supabase Green</div>
511
+ <div class="color-swatch-hex">#3ecf8e</div>
512
+ <div class="color-swatch-role">Primary brand, logo, accent borders</div>
513
+ </div>
514
+ </div>
515
+ <div class="color-swatch">
516
+ <div class="color-swatch-block" style="background: #00c573;"></div>
517
+ <div class="color-swatch-info">
518
+ <div class="color-swatch-name">Green Link</div>
519
+ <div class="color-swatch-hex">#00c573</div>
520
+ <div class="color-swatch-role">Interactive green for links and actions</div>
521
+ </div>
522
+ </div>
523
+ <div class="color-swatch">
524
+ <div class="color-swatch-block" style="background: rgba(62, 207, 142, 0.3); border: 1px solid rgba(62, 207, 142, 0.3);"></div>
525
+ <div class="color-swatch-info">
526
+ <div class="color-swatch-name">Green Border</div>
527
+ <div class="color-swatch-hex">rgba(62,207,142,0.3)</div>
528
+ <div class="color-swatch-role">Subtle green border accent</div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+
534
+ <div class="color-group">
535
+ <h3 class="color-group-title">Neutral Scale</h3>
536
+ <div class="color-grid">
537
+ <div class="color-swatch">
538
+ <div class="color-swatch-block" style="background: #0f0f0f;"></div>
539
+ <div class="color-swatch-info">
540
+ <div class="color-swatch-name">Near Black</div>
541
+ <div class="color-swatch-hex">#0f0f0f</div>
542
+ <div class="color-swatch-role">Primary button bg, deepest surface</div>
543
+ </div>
544
+ </div>
545
+ <div class="color-swatch">
546
+ <div class="color-swatch-block" style="background: #171717;"></div>
547
+ <div class="color-swatch-info">
548
+ <div class="color-swatch-name">Dark</div>
549
+ <div class="color-swatch-hex">#171717</div>
550
+ <div class="color-swatch-role">Page background, primary canvas</div>
551
+ </div>
552
+ </div>
553
+ <div class="color-swatch">
554
+ <div class="color-swatch-block" style="background: #242424;"></div>
555
+ <div class="color-swatch-info">
556
+ <div class="color-swatch-name">Dark Border</div>
557
+ <div class="color-swatch-hex">#242424</div>
558
+ <div class="color-swatch-role">Horizontal rules, section dividers</div>
559
+ </div>
560
+ </div>
561
+ <div class="color-swatch">
562
+ <div class="color-swatch-block" style="background: #2e2e2e;"></div>
563
+ <div class="color-swatch-info">
564
+ <div class="color-swatch-name">Border Dark</div>
565
+ <div class="color-swatch-hex">#2e2e2e</div>
566
+ <div class="color-swatch-role">Card borders, tab borders</div>
567
+ </div>
568
+ </div>
569
+ <div class="color-swatch">
570
+ <div class="color-swatch-block" style="background: #363636;"></div>
571
+ <div class="color-swatch-info">
572
+ <div class="color-swatch-name">Mid Border</div>
573
+ <div class="color-swatch-hex">#363636</div>
574
+ <div class="color-swatch-role">Button borders, dividers</div>
575
+ </div>
576
+ </div>
577
+ <div class="color-swatch">
578
+ <div class="color-swatch-block" style="background: #393939;"></div>
579
+ <div class="color-swatch-info">
580
+ <div class="color-swatch-name">Border Light</div>
581
+ <div class="color-swatch-hex">#393939</div>
582
+ <div class="color-swatch-role">Secondary borders</div>
583
+ </div>
584
+ </div>
585
+ <div class="color-swatch">
586
+ <div class="color-swatch-block" style="background: #434343;"></div>
587
+ <div class="color-swatch-info">
588
+ <div class="color-swatch-name">Charcoal</div>
589
+ <div class="color-swatch-hex">#434343</div>
590
+ <div class="color-swatch-role">Tertiary borders, dark accents</div>
591
+ </div>
592
+ </div>
593
+ <div class="color-swatch">
594
+ <div class="color-swatch-block" style="background: #4d4d4d;"></div>
595
+ <div class="color-swatch-info">
596
+ <div class="color-swatch-name">Dark Gray</div>
597
+ <div class="color-swatch-hex">#4d4d4d</div>
598
+ <div class="color-swatch-role">Heavy secondary text</div>
599
+ </div>
600
+ </div>
601
+ <div class="color-swatch">
602
+ <div class="color-swatch-block" style="background: #898989;"></div>
603
+ <div class="color-swatch-info">
604
+ <div class="color-swatch-name">Mid Gray</div>
605
+ <div class="color-swatch-hex">#898989</div>
606
+ <div class="color-swatch-role">Muted text, link color</div>
607
+ </div>
608
+ </div>
609
+ <div class="color-swatch">
610
+ <div class="color-swatch-block" style="background: #b4b4b4;"></div>
611
+ <div class="color-swatch-info">
612
+ <div class="color-swatch-name">Light Gray</div>
613
+ <div class="color-swatch-hex">#b4b4b4</div>
614
+ <div class="color-swatch-role">Secondary link text</div>
615
+ </div>
616
+ </div>
617
+ <div class="color-swatch">
618
+ <div class="color-swatch-block" style="background: #efefef;"></div>
619
+ <div class="color-swatch-info">
620
+ <div class="color-swatch-name">Near White</div>
621
+ <div class="color-swatch-hex">#efefef</div>
622
+ <div class="color-swatch-role">Light border, subtle surface</div>
623
+ </div>
624
+ </div>
625
+ <div class="color-swatch">
626
+ <div class="color-swatch-block" style="background: #fafafa;"></div>
627
+ <div class="color-swatch-info">
628
+ <div class="color-swatch-name">Off White</div>
629
+ <div class="color-swatch-hex">#fafafa</div>
630
+ <div class="color-swatch-role">Primary text, button text</div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+
636
+ <div class="color-group">
637
+ <h3 class="color-group-title">Radix Color Tokens</h3>
638
+ <div class="color-grid">
639
+ <div class="color-swatch">
640
+ <div class="color-swatch-block" style="background: hsl(251, 63.2%, 63.2%);"></div>
641
+ <div class="color-swatch-info">
642
+ <div class="color-swatch-name">Violet 10</div>
643
+ <div class="color-swatch-hex">hsl(251, 63%, 63%)</div>
644
+ <div class="color-swatch-role">Vibrant accent</div>
645
+ </div>
646
+ </div>
647
+ <div class="color-swatch">
648
+ <div class="color-swatch-block" style="background: hsl(272, 51%, 54%);"></div>
649
+ <div class="color-swatch-info">
650
+ <div class="color-swatch-name">Purple 5</div>
651
+ <div class="color-swatch-hex">hsl(272, 51%, 54%)</div>
652
+ <div class="color-swatch-role">Accent spectrum</div>
653
+ </div>
654
+ </div>
655
+ <div class="color-swatch">
656
+ <div class="color-swatch-block" style="background: hsl(348, 60%, 50%);"></div>
657
+ <div class="color-swatch-info">
658
+ <div class="color-swatch-name">Crimson 9</div>
659
+ <div class="color-swatch-hex">hsl(348, 60%, 50%)</div>
660
+ <div class="color-swatch-role">Warm accent / alert</div>
661
+ </div>
662
+ </div>
663
+ <div class="color-swatch">
664
+ <div class="color-swatch-block" style="background: hsl(226, 70%, 55%);"></div>
665
+ <div class="color-swatch-info">
666
+ <div class="color-swatch-name">Indigo</div>
667
+ <div class="color-swatch-hex">hsl(226, 70%, 55%)</div>
668
+ <div class="color-swatch-role">Subtle blue wash</div>
669
+ </div>
670
+ </div>
671
+ <div class="color-swatch">
672
+ <div class="color-swatch-block" style="background: hsl(48, 90%, 55%);"></div>
673
+ <div class="color-swatch-info">
674
+ <div class="color-swatch-name">Yellow 7</div>
675
+ <div class="color-swatch-hex">hsl(48, 90%, 55%)</div>
676
+ <div class="color-swatch-role">Attention / warning</div>
677
+ </div>
678
+ </div>
679
+ <div class="color-swatch">
680
+ <div class="color-swatch-block" style="background: hsl(10, 78%, 54%);"></div>
681
+ <div class="color-swatch-info">
682
+ <div class="color-swatch-name">Tomato 4</div>
683
+ <div class="color-swatch-hex">hsl(10, 78%, 54%)</div>
684
+ <div class="color-swatch-role">Error accent</div>
685
+ </div>
686
+ </div>
687
+ <div class="color-swatch">
688
+ <div class="color-swatch-block" style="background: hsl(24, 94%, 50%);"></div>
689
+ <div class="color-swatch-info">
690
+ <div class="color-swatch-name">Orange 6</div>
691
+ <div class="color-swatch-hex">hsl(24, 94%, 50%)</div>
692
+ <div class="color-swatch-role">Warm accent</div>
693
+ </div>
694
+ </div>
695
+ </div>
696
+ </div>
697
+
698
+ <div class="color-group">
699
+ <h3 class="color-group-title">Surface & Overlay</h3>
700
+ <div class="color-grid">
701
+ <div class="color-swatch">
702
+ <div class="color-swatch-block" style="background: rgba(41, 41, 41, 0.84);"></div>
703
+ <div class="color-swatch-info">
704
+ <div class="color-swatch-name">Glass Dark</div>
705
+ <div class="color-swatch-hex">rgba(41,41,41,0.84)</div>
706
+ <div class="color-swatch-role">Translucent dark overlay</div>
707
+ </div>
708
+ </div>
709
+ <div class="color-swatch">
710
+ <div class="color-swatch-block" style="background: hsla(210, 87.8%, 16.1%, 0.031);"></div>
711
+ <div class="color-swatch-info">
712
+ <div class="color-swatch-name">Slate Alpha</div>
713
+ <div class="color-swatch-hex">hsla(210,88%,16%,0.03)</div>
714
+ <div class="color-swatch-role">Ultra-subtle blue wash</div>
715
+ </div>
716
+ </div>
717
+ <div class="color-swatch">
718
+ <div class="color-swatch-block" style="background: hsla(200, 90.3%, 93.4%, 0.109);"></div>
719
+ <div class="color-swatch-info">
720
+ <div class="color-swatch-name">Fixed Scale Alpha</div>
721
+ <div class="color-swatch-hex">hsla(200,90%,93%,0.11)</div>
722
+ <div class="color-swatch-role">Light frost overlay</div>
723
+ </div>
724
+ </div>
725
+ </div>
726
+ </div>
727
+ </section>
728
+
729
+ <hr class="section-divider">
730
+
731
+ <!-- 2. TYPOGRAPHY -->
732
+ <section class="section" id="typography">
733
+ <div class="section-title">02 / Typography Scale</div>
734
+ <h2 class="section-heading">Typography Rules</h2>
735
+
736
+ <div class="type-sample">
737
+ <div class="type-sample-text" style="font-family: var(--font-primary); font-size: 72px; font-weight: 400; line-height: 1.00;">Display Hero</div>
738
+ <div class="type-sample-label">Display Hero &mdash; 72px / weight 400 / line-height 1.00 &mdash; Circular (system-ui)</div>
739
+ </div>
740
+
741
+ <div class="type-sample">
742
+ <div class="type-sample-text" style="font-family: var(--font-primary); font-size: 36px; font-weight: 400; line-height: 1.25;">Section Heading</div>
743
+ <div class="type-sample-label">Section Heading &mdash; 36px / weight 400 / line-height 1.25 &mdash; Circular (system-ui)</div>
744
+ </div>
745
+
746
+ <div class="type-sample">
747
+ <div class="type-sample-text" style="font-family: var(--font-primary); font-size: 24px; font-weight: 400; line-height: 1.33; letter-spacing: -0.16px;">Card Title</div>
748
+ <div class="type-sample-label">Card Title &mdash; 24px / weight 400 / line-height 1.33 / letter-spacing -0.16px &mdash; Circular (system-ui)</div>
749
+ </div>
750
+
751
+ <div class="type-sample">
752
+ <div class="type-sample-text" style="font-family: var(--font-primary); font-size: 18px; font-weight: 400; line-height: 1.56;">Sub-heading</div>
753
+ <div class="type-sample-label">Sub-heading &mdash; 18px / weight 400 / line-height 1.56 &mdash; Circular (system-ui)</div>
754
+ </div>
755
+
756
+ <div class="type-sample">
757
+ <div class="type-sample-text" style="font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.50;">Body text for paragraphs and general content. Nearly all text uses weight 400 for hierarchy through size alone.</div>
758
+ <div class="type-sample-label">Body &mdash; 16px / weight 400 / line-height 1.50 &mdash; Circular (system-ui)</div>
759
+ </div>
760
+
761
+ <div class="type-sample">
762
+ <div class="type-sample-text" style="font-family: var(--font-primary); font-size: 14px; font-weight: 500; line-height: 1.43;">Nav Link &middot; Button Label</div>
763
+ <div class="type-sample-label">Nav Link / Button &mdash; 14px / weight 500 / line-height 1.14&ndash;1.43 &mdash; Circular (system-ui)</div>
764
+ </div>
765
+
766
+ <div class="type-sample">
767
+ <div class="type-sample-text" style="font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-muted);">Caption and metadata text for tags and descriptions</div>
768
+ <div class="type-sample-label">Caption &mdash; 14px / weight 400&ndash;500 / line-height 1.43 &mdash; Circular (system-ui)</div>
769
+ </div>
770
+
771
+ <div class="type-sample">
772
+ <div class="type-sample-text" style="font-family: var(--font-primary); font-size: 12px; font-weight: 400; line-height: 1.33; color: var(--text-muted);">Fine print, footer links, small metadata</div>
773
+ <div class="type-sample-label">Small &mdash; 12px / weight 400 / line-height 1.33 &mdash; Circular (system-ui)</div>
774
+ </div>
775
+
776
+ <div class="type-sample">
777
+ <div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.33; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-green);">Code Label &middot; Technical Marker</div>
778
+ <div class="type-sample-label">Code Label &mdash; 12px / weight 400 / line-height 1.33 / letter-spacing 1.2px / uppercase &mdash; Source Code Pro</div>
779
+ </div>
780
+ </section>
781
+
782
+ <hr class="section-divider">
783
+
784
+ <!-- 3. BUTTONS -->
785
+ <section class="section" id="buttons">
786
+ <div class="section-title">03 / Button Variants</div>
787
+ <h2 class="section-heading">Buttons</h2>
788
+
789
+ <div class="button-row">
790
+ <div class="button-demo">
791
+ <button class="btn-primary-pill">Start your project</button>
792
+ <div class="button-demo-label">Primary Pill</div>
793
+ </div>
794
+ <div class="button-demo">
795
+ <button class="btn-secondary-pill">View Documentation</button>
796
+ <div class="button-demo-label">Secondary Pill</div>
797
+ </div>
798
+ <div class="button-demo">
799
+ <button class="btn-ghost">Tertiary Action</button>
800
+ <div class="button-demo-label">Ghost Button</div>
801
+ </div>
802
+ <div class="button-demo">
803
+ <button class="btn-green-pill">Deploy Now</button>
804
+ <div class="button-demo-label">Green Pill</div>
805
+ </div>
806
+ </div>
807
+ </section>
808
+
809
+ <hr class="section-divider">
810
+
811
+ <!-- 4. CARDS -->
812
+ <section class="section" id="cards">
813
+ <div class="section-title">04 / Card Examples</div>
814
+ <h2 class="section-heading">Cards &amp; Containers</h2>
815
+
816
+ <div class="card-grid">
817
+ <div class="card card-standard">
818
+ <div class="card-label">Standard Card</div>
819
+ <h3>Border Dark Container</h3>
820
+ <p>Default card with 1px solid #2e2e2e border and 16px radius. Depth defined through border contrast, not shadows. Background matches page at #0f0f0f.</p>
821
+ </div>
822
+ <div class="card card-prominent">
823
+ <div class="card-label">Prominent Card</div>
824
+ <h3>Mid Border Container</h3>
825
+ <p>Elevated card using #363636 border for higher visual prominence. The lighter border creates the sense of depth in the dark environment.</p>
826
+ </div>
827
+ <div class="card card-green-accent">
828
+ <div class="card-label">Accent Card</div>
829
+ <h3>Green Accent Container</h3>
830
+ <p>Brand-highlighted card with rgba(62, 207, 142, 0.3) border. The green accent at 30% opacity is the highest elevation signal.</p>
831
+ </div>
832
+ </div>
833
+ </section>
834
+
835
+ <hr class="section-divider">
836
+
837
+ <!-- 5. FORMS -->
838
+ <section class="section" id="forms">
839
+ <div class="section-title">05 / Form Elements</div>
840
+ <h2 class="section-heading">Form Elements</h2>
841
+
842
+ <div class="form-grid">
843
+ <div>
844
+ <div class="form-group">
845
+ <label class="form-label">Default Input</label>
846
+ <input type="text" class="form-input" placeholder="Enter your project name">
847
+ </div>
848
+ <div class="form-group">
849
+ <label class="form-label">Focus State</label>
850
+ <input type="text" class="form-input form-input-focus" value="my-supabase-project" placeholder="Enter your project name">
851
+ </div>
852
+ <div class="form-group">
853
+ <label class="form-label">Error State</label>
854
+ <input type="text" class="form-input form-input-error" value="invalid name!">
855
+ <div class="form-error-text">Project name must only contain alphanumeric characters and hyphens.</div>
856
+ </div>
857
+ </div>
858
+ <div>
859
+ <div class="form-group">
860
+ <label class="form-label">Database Region</label>
861
+ <input type="text" class="form-input" placeholder="us-east-1" value="us-east-1">
862
+ </div>
863
+ <div class="form-group">
864
+ <label class="form-label">Description</label>
865
+ <textarea class="form-input" placeholder="Describe your project...">A real-time backend for modern web and mobile applications.</textarea>
866
+ </div>
867
+ </div>
868
+ </div>
869
+ </section>
870
+
871
+ <hr class="section-divider">
872
+
873
+ <!-- 6. SPACING -->
874
+ <section class="section" id="spacing">
875
+ <div class="section-title">06 / Spacing Scale</div>
876
+ <h2 class="section-heading">Spacing System</h2>
877
+ <p style="color: var(--text-muted); margin-bottom: 32px;">Base unit: 8px. Scale from 1px to 128px with notable large jumps for section spacing.</p>
878
+
879
+ <div class="spacing-row">
880
+ <div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">1px</div></div>
881
+ <div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
882
+ <div class="spacing-item"><div class="spacing-box" style="width: 20px; height: 20px;"></div><div class="spacing-label">6px</div></div>
883
+ <div class="spacing-item"><div class="spacing-box" style="width: 28px; height: 28px;"></div><div class="spacing-label">8px</div></div>
884
+ <div class="spacing-item"><div class="spacing-box" style="width: 40px; height: 40px;"></div><div class="spacing-label">12px</div></div>
885
+ <div class="spacing-item"><div class="spacing-box" style="width: 56px; height: 56px;"></div><div class="spacing-label">16px</div></div>
886
+ <div class="spacing-item"><div class="spacing-box" style="width: 68px; height: 68px;"></div><div class="spacing-label">20px</div></div>
887
+ <div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">24px</div></div>
888
+ <div class="spacing-item"><div class="spacing-box" style="width: 100px; height: 100px;"></div><div class="spacing-label">32px</div></div>
889
+ <div class="spacing-item"><div class="spacing-box" style="width: 120px; height: 120px;"></div><div class="spacing-label">40px</div></div>
890
+ <div class="spacing-item"><div class="spacing-box" style="width: 140px; height: 140px;"></div><div class="spacing-label">48px</div></div>
891
+ <div class="spacing-item"><div class="spacing-box" style="width: 170px; height: 170px;"></div><div class="spacing-label">90px</div></div>
892
+ <div class="spacing-item"><div class="spacing-box" style="width: 180px; height: 180px;"></div><div class="spacing-label">96px</div></div>
893
+ <div class="spacing-item"><div class="spacing-box" style="width: 200px; height: 200px;"></div><div class="spacing-label">128px</div></div>
894
+ </div>
895
+ </section>
896
+
897
+ <hr class="section-divider">
898
+
899
+ <!-- 7. BORDER RADIUS -->
900
+ <section class="section">
901
+ <div class="section-title">07 / Border Radius Scale</div>
902
+ <h2 class="section-heading">Border Radius Scale</h2>
903
+ <p style="color: var(--text-muted); margin-bottom: 32px;">From standard 6px for ghost buttons to pill 9999px for primary CTAs. Nothing in between for buttons.</p>
904
+
905
+ <div class="radius-row">
906
+ <div class="radius-item">
907
+ <div class="radius-box" style="border-radius: 6px;"></div>
908
+ <div class="radius-label">6px</div>
909
+ <div class="radius-context">Ghost buttons, small</div>
910
+ </div>
911
+ <div class="radius-item">
912
+ <div class="radius-box" style="border-radius: 8px;"></div>
913
+ <div class="radius-label">8px</div>
914
+ <div class="radius-context">Cards, containers</div>
915
+ </div>
916
+ <div class="radius-item">
917
+ <div class="radius-box" style="border-radius: 12px;"></div>
918
+ <div class="radius-label">12px</div>
919
+ <div class="radius-context">Mid-size panels</div>
920
+ </div>
921
+ <div class="radius-item">
922
+ <div class="radius-box" style="border-radius: 16px;"></div>
923
+ <div class="radius-label">16px</div>
924
+ <div class="radius-context">Feature cards, major</div>
925
+ </div>
926
+ <div class="radius-item">
927
+ <div class="radius-box" style="border-radius: 9999px;"></div>
928
+ <div class="radius-label">9999px</div>
929
+ <div class="radius-context">Primary pills, tabs</div>
930
+ </div>
931
+ </div>
932
+ </section>
933
+
934
+ <hr class="section-divider">
935
+
936
+ <!-- 8. ELEVATION -->
937
+ <section class="section" id="elevation">
938
+ <div class="section-title">08 / Elevation & Depth</div>
939
+ <h2 class="section-heading">Elevation &amp; Depth</h2>
940
+ <p style="color: var(--text-muted); margin-bottom: 32px;">No shadows. Depth is communicated through a sophisticated border hierarchy from barely visible to prominent green accent.</p>
941
+
942
+ <div class="elevation-grid">
943
+ <div class="elevation-card" style="border: 1px solid #2e2e2e;">
944
+ <div>
945
+ <div class="elevation-name">Flat</div>
946
+ <div class="elevation-desc">No shadow, border #2e2e2e. Default state for most surfaces and containers.</div>
947
+ </div>
948
+ <div class="elevation-level">Level 0 &mdash; #2e2e2e</div>
949
+ </div>
950
+ <div class="elevation-card" style="border: 1px solid #363636;">
951
+ <div>
952
+ <div class="elevation-name">Subtle Border</div>
953
+ <div class="elevation-desc">Border #363636 or #393939. Interactive elements, hover states, prominent cards.</div>
954
+ </div>
955
+ <div class="elevation-level">Level 1 &mdash; #363636</div>
956
+ </div>
957
+ <div class="elevation-card" style="border: 1px solid #393939; box-shadow: rgba(0,0,0,0.1) 0px 4px 12px;">
958
+ <div>
959
+ <div class="elevation-name">Focus</div>
960
+ <div class="elevation-desc">Minimal functional shadow: rgba(0,0,0,0.1) 0px 4px 12px. Focus states only.</div>
961
+ </div>
962
+ <div class="elevation-level">Level 2 &mdash; Focus shadow</div>
963
+ </div>
964
+ <div class="elevation-card" style="border: 1px solid rgba(62, 207, 142, 0.3);">
965
+ <div>
966
+ <div class="elevation-name">Green Accent</div>
967
+ <div class="elevation-desc">Brand-highlighted elements. The green accent border at 30% opacity is the highest elevation signal.</div>
968
+ </div>
969
+ <div class="elevation-level">Level 3 &mdash; Green accent border</div>
970
+ </div>
971
+ </div>
972
+ </section>
973
+
974
+ <div style="height: 96px;"></div>
975
+
976
+ </body>
977
+ </html>