oh-my-design-cli 0.1.1 → 0.1.2

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