oh-my-design-cli 0.1.0 → 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 (205) hide show
  1. package/README.ko.md +3 -2
  2. package/README.md +3 -2
  3. package/dist/bin/oh-my-design.js +5 -5
  4. package/dist/bin/oh-my-design.js.map +1 -1
  5. package/dist/{init-STACB7E5.js → init-UMM4XIV5.js} +42 -2
  6. package/dist/init-UMM4XIV5.js.map +1 -0
  7. package/dist/{sync-P7X4S2DK.js → sync-FDYRKNFE.js} +16 -3
  8. package/dist/sync-FDYRKNFE.js.map +1 -0
  9. package/package.json +3 -3
  10. package/dist/init-STACB7E5.js.map +0 -1
  11. package/dist/sync-P7X4S2DK.js.map +0 -1
  12. package/references/Claude-Design-Sys-Prompt.txt +0 -421
  13. package/references/airbnb/README.md +0 -23
  14. package/references/airbnb/preview-dark.html +0 -234
  15. package/references/airbnb/preview.html +0 -233
  16. package/references/airtable/README.md +0 -23
  17. package/references/airtable/preview-dark.html +0 -165
  18. package/references/airtable/preview.html +0 -164
  19. package/references/apple/README.md +0 -24
  20. package/references/apple/preview-dark.html +0 -420
  21. package/references/apple/preview.html +0 -414
  22. package/references/baemin/README.md +0 -19
  23. package/references/bmw/README.md +0 -23
  24. package/references/bmw/preview-dark.html +0 -211
  25. package/references/bmw/preview.html +0 -210
  26. package/references/cal/README.md +0 -23
  27. package/references/cal/preview-dark.html +0 -449
  28. package/references/cal/preview.html +0 -575
  29. package/references/claude/README.md +0 -24
  30. package/references/claude/preview-dark.html +0 -803
  31. package/references/claude/preview.html +0 -826
  32. package/references/clay/README.md +0 -23
  33. package/references/clay/preview-dark.html +0 -316
  34. package/references/clay/preview.html +0 -315
  35. package/references/clickhouse/README.md +0 -24
  36. package/references/clickhouse/preview-dark.html +0 -834
  37. package/references/clickhouse/preview.html +0 -786
  38. package/references/cohere/README.md +0 -24
  39. package/references/cohere/preview-dark.html +0 -803
  40. package/references/cohere/preview.html +0 -807
  41. package/references/coinbase/README.md +0 -23
  42. package/references/coinbase/preview-dark.html +0 -164
  43. package/references/coinbase/preview.html +0 -163
  44. package/references/composio/README.md +0 -24
  45. package/references/composio/preview-dark.html +0 -958
  46. package/references/composio/preview.html +0 -933
  47. package/references/cursor/README.md +0 -24
  48. package/references/cursor/preview-dark.html +0 -393
  49. package/references/cursor/preview.html +0 -383
  50. package/references/dcard/README.md +0 -12
  51. package/references/dcard/_research/forum-1440px.png +0 -0
  52. package/references/dcard/_research.md +0 -77
  53. package/references/elevenlabs/README.md +0 -23
  54. package/references/elevenlabs/preview-dark.html +0 -252
  55. package/references/elevenlabs/preview.html +0 -251
  56. package/references/expo/README.md +0 -24
  57. package/references/expo/preview-dark.html +0 -533
  58. package/references/expo/preview.html +0 -533
  59. package/references/ferrari/README.md +0 -23
  60. package/references/ferrari/preview-dark.html +0 -1162
  61. package/references/ferrari/preview.html +0 -1122
  62. package/references/figma/README.md +0 -24
  63. package/references/figma/preview-dark.html +0 -822
  64. package/references/figma/preview.html +0 -832
  65. package/references/framer/README.md +0 -23
  66. package/references/framer/preview-dark.html +0 -902
  67. package/references/framer/preview.html +0 -883
  68. package/references/freee/README.md +0 -12
  69. package/references/freee/_research/vibes-storybook-1440px.png +0 -0
  70. package/references/freee/_research.md +0 -77
  71. package/references/hashicorp/README.md +0 -24
  72. package/references/hashicorp/preview-dark.html +0 -1202
  73. package/references/hashicorp/preview.html +0 -1193
  74. package/references/ibm/README.md +0 -24
  75. package/references/ibm/preview-dark.html +0 -443
  76. package/references/ibm/preview.html +0 -428
  77. package/references/intercom/README.md +0 -23
  78. package/references/intercom/preview-dark.html +0 -185
  79. package/references/intercom/preview.html +0 -184
  80. package/references/kakao/README.md +0 -18
  81. package/references/karrot/README.md +0 -18
  82. package/references/kraken/README.md +0 -23
  83. package/references/kraken/preview-dark.html +0 -169
  84. package/references/kraken/preview.html +0 -168
  85. package/references/lamborghini/README.md +0 -23
  86. package/references/lamborghini/preview-dark.html +0 -303
  87. package/references/lamborghini/preview.html +0 -381
  88. package/references/line/README.md +0 -12
  89. package/references/line/_research/home-1440px.png +0 -0
  90. package/references/line/_research.md +0 -65
  91. package/references/linear.app/README.md +0 -24
  92. package/references/linear.app/preview-dark.html +0 -383
  93. package/references/linear.app/preview.html +0 -373
  94. package/references/lovable/README.md +0 -24
  95. package/references/lovable/preview-dark.html +0 -349
  96. package/references/lovable/preview.html +0 -348
  97. package/references/mercari/README.md +0 -12
  98. package/references/mercari/_research/home-1440px.png +0 -0
  99. package/references/mercari/_research.md +0 -77
  100. package/references/minimax/README.md +0 -24
  101. package/references/minimax/preview-dark.html +0 -1262
  102. package/references/minimax/preview.html +0 -1248
  103. package/references/mintlify/README.md +0 -24
  104. package/references/mintlify/preview-dark.html +0 -409
  105. package/references/mintlify/preview.html +0 -398
  106. package/references/miro/README.md +0 -23
  107. package/references/miro/preview-dark.html +0 -174
  108. package/references/miro/preview.html +0 -173
  109. package/references/mistral.ai/README.md +0 -24
  110. package/references/mistral.ai/preview-dark.html +0 -806
  111. package/references/mistral.ai/preview.html +0 -805
  112. package/references/mongodb/README.md +0 -23
  113. package/references/mongodb/preview-dark.html +0 -260
  114. package/references/mongodb/preview.html +0 -259
  115. package/references/notion/README.md +0 -24
  116. package/references/notion/preview-dark.html +0 -372
  117. package/references/notion/preview.html +0 -364
  118. package/references/nvidia/README.md +0 -24
  119. package/references/nvidia/preview-dark.html +0 -374
  120. package/references/nvidia/preview.html +0 -366
  121. package/references/ollama/README.md +0 -24
  122. package/references/ollama/preview-dark.html +0 -678
  123. package/references/ollama/preview.html +0 -678
  124. package/references/opencode.ai/README.md +0 -24
  125. package/references/opencode.ai/preview-dark.html +0 -366
  126. package/references/opencode.ai/preview.html +0 -357
  127. package/references/pinkoi/README.md +0 -12
  128. package/references/pinkoi/_research/browse-1440px.png +0 -0
  129. package/references/pinkoi/_research.md +0 -115
  130. package/references/pinterest/README.md +0 -23
  131. package/references/pinterest/preview-dark.html +0 -233
  132. package/references/pinterest/preview.html +0 -232
  133. package/references/posthog/README.md +0 -23
  134. package/references/posthog/preview-dark.html +0 -699
  135. package/references/posthog/preview.html +0 -749
  136. package/references/raycast/README.md +0 -23
  137. package/references/raycast/preview-dark.html +0 -606
  138. package/references/raycast/preview.html +0 -688
  139. package/references/renault/README.md +0 -23
  140. package/references/renault/preview-dark.html +0 -406
  141. package/references/renault/preview.html +0 -606
  142. package/references/replicate/README.md +0 -24
  143. package/references/replicate/preview-dark.html +0 -828
  144. package/references/replicate/preview.html +0 -831
  145. package/references/resend/README.md +0 -23
  146. package/references/resend/preview-dark.html +0 -355
  147. package/references/resend/preview.html +0 -354
  148. package/references/revolut/README.md +0 -23
  149. package/references/revolut/preview-dark.html +0 -234
  150. package/references/revolut/preview.html +0 -233
  151. package/references/runwayml/README.md +0 -24
  152. package/references/runwayml/preview-dark.html +0 -664
  153. package/references/runwayml/preview.html +0 -665
  154. package/references/sanity/README.md +0 -24
  155. package/references/sanity/preview-dark.html +0 -990
  156. package/references/sanity/preview.html +0 -1135
  157. package/references/sentry/README.md +0 -24
  158. package/references/sentry/preview-dark.html +0 -626
  159. package/references/sentry/preview.html +0 -951
  160. package/references/spacex/README.md +0 -23
  161. package/references/spacex/preview-dark.html +0 -221
  162. package/references/spacex/preview.html +0 -220
  163. package/references/spotify/README.md +0 -23
  164. package/references/spotify/preview-dark.html +0 -231
  165. package/references/spotify/preview.html +0 -230
  166. package/references/stripe/README.md +0 -24
  167. package/references/stripe/preview-dark.html +0 -428
  168. package/references/stripe/preview.html +0 -419
  169. package/references/supabase/README.md +0 -24
  170. package/references/supabase/preview-dark.html +0 -977
  171. package/references/supabase/preview.html +0 -955
  172. package/references/superhuman/README.md +0 -23
  173. package/references/superhuman/preview-dark.html +0 -973
  174. package/references/superhuman/preview.html +0 -951
  175. package/references/tesla/README.md +0 -23
  176. package/references/tesla/preview-dark.html +0 -947
  177. package/references/tesla/preview.html +0 -925
  178. package/references/together.ai/README.md +0 -24
  179. package/references/together.ai/preview-dark.html +0 -892
  180. package/references/together.ai/preview.html +0 -897
  181. package/references/toss/README.md +0 -19
  182. package/references/uber/README.md +0 -24
  183. package/references/uber/preview-dark.html +0 -1120
  184. package/references/uber/preview.html +0 -1119
  185. package/references/vercel/README.md +0 -24
  186. package/references/vercel/preview-dark.html +0 -368
  187. package/references/vercel/preview.html +0 -367
  188. package/references/voltagent/README.md +0 -24
  189. package/references/voltagent/preview-dark.html +0 -487
  190. package/references/voltagent/preview.html +0 -766
  191. package/references/warp/README.md +0 -23
  192. package/references/warp/preview-dark.html +0 -500
  193. package/references/warp/preview.html +0 -533
  194. package/references/webflow/README.md +0 -23
  195. package/references/webflow/preview-dark.html +0 -147
  196. package/references/webflow/preview.html +0 -146
  197. package/references/wise/README.md +0 -23
  198. package/references/wise/preview-dark.html +0 -230
  199. package/references/wise/preview.html +0 -229
  200. package/references/x.ai/README.md +0 -24
  201. package/references/x.ai/preview-dark.html +0 -356
  202. package/references/x.ai/preview.html +0 -407
  203. package/references/zapier/README.md +0 -24
  204. package/references/zapier/preview-dark.html +0 -380
  205. 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>