ai-spector 0.4.0 → 0.4.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.
- package/README.md +10 -2
- package/assets/themes/airbnb/preview.html +281 -0
- package/assets/themes/airtable/preview.html +209 -0
- package/assets/themes/apple/preview.html +461 -0
- package/assets/themes/binance/preview.html +1013 -0
- package/assets/themes/bmw/preview.html +255 -0
- package/assets/themes/bugatti/preview.html +879 -0
- package/assets/themes/cal/preview.html +620 -0
- package/assets/themes/claude/preview.html +873 -0
- package/assets/themes/clay/preview.html +360 -0
- package/assets/themes/clickhouse/preview.html +833 -0
- package/assets/themes/cohere/preview.html +854 -0
- package/assets/themes/coinbase/preview.html +208 -0
- package/assets/themes/composio/preview.html +980 -0
- package/assets/themes/cursor/preview.html +428 -0
- package/assets/themes/elevenlabs/preview.html +296 -0
- package/assets/themes/expo/preview.html +580 -0
- package/assets/themes/ferrari/preview.html +1168 -0
- package/assets/themes/framer/preview.html +930 -0
- package/assets/themes/hashicorp/preview.html +1238 -0
- package/assets/themes/ibm/preview.html +473 -0
- package/assets/themes/intercom/preview.html +229 -0
- package/assets/themes/kraken/preview.html +213 -0
- package/assets/themes/lamborghini/preview.html +428 -0
- package/assets/themes/linear.app/preview.html +418 -0
- package/assets/themes/lovable/preview.html +393 -0
- package/assets/themes/meta/preview.html +656 -0
- package/assets/themes/minimax/preview.html +1293 -0
- package/assets/themes/mintlify/preview.html +443 -0
- package/assets/themes/miro/preview.html +218 -0
- package/assets/themes/mistral.ai/preview.html +850 -0
- package/assets/themes/mongodb/preview.html +304 -0
- package/assets/themes/nike/preview.html +1182 -0
- package/assets/themes/notion/preview.html +409 -0
- package/assets/themes/nvidia/preview.html +411 -0
- package/assets/themes/ollama/preview.html +725 -0
- package/assets/themes/opencode.ai/preview.html +402 -0
- package/assets/themes/pinterest/preview.html +277 -0
- package/assets/themes/playstation/preview.html +1125 -0
- package/assets/themes/posthog/preview.html +794 -0
- package/assets/themes/raycast/preview.html +735 -0
- package/assets/themes/renault/preview.html +652 -0
- package/assets/themes/replicate/preview.html +878 -0
- package/assets/themes/resend/preview.html +399 -0
- package/assets/themes/revolut/preview.html +278 -0
- package/assets/themes/runwayml/preview.html +712 -0
- package/assets/themes/sanity/preview.html +1180 -0
- package/assets/themes/sentry/preview.html +996 -0
- package/assets/themes/shopify/preview.html +611 -0
- package/assets/themes/spacex/preview.html +265 -0
- package/assets/themes/spotify/preview.html +275 -0
- package/assets/themes/stripe/preview.html +464 -0
- package/assets/themes/supabase/preview.html +1002 -0
- package/assets/themes/superhuman/preview.html +996 -0
- package/assets/themes/tesla/preview.html +971 -0
- package/assets/themes/theverge/preview.html +1143 -0
- package/assets/themes/together.ai/preview.html +944 -0
- package/assets/themes/uber/preview.html +1164 -0
- package/assets/themes/vercel/preview.html +412 -0
- package/assets/themes/voltagent/preview.html +813 -0
- package/assets/themes/warp/preview.html +580 -0
- package/assets/themes/webflow/preview.html +191 -0
- package/assets/themes/wired/preview.html +1049 -0
- package/assets/themes/wise/preview.html +274 -0
- package/assets/themes/x.ai/preview.html +452 -0
- package/assets/themes/zapier/preview.html +417 -0
- package/dist/cli.js +37 -1
- package/dist/cli.js.map +1 -1
- package/dist/commands/graph-visualize.d.ts.map +1 -1
- package/dist/commands/graph-visualize.js +1 -22
- package/dist/commands/graph-visualize.js.map +1 -1
- package/dist/commands/prototype.d.ts +19 -0
- package/dist/commands/prototype.d.ts.map +1 -1
- package/dist/commands/prototype.js +78 -3
- package/dist/commands/prototype.js.map +1 -1
- package/dist/prototype/config.d.ts +9 -1
- package/dist/prototype/config.d.ts.map +1 -1
- package/dist/prototype/config.js +29 -0
- package/dist/prototype/config.js.map +1 -1
- package/dist/prototype/htpasswd.d.ts +5 -0
- package/dist/prototype/htpasswd.d.ts.map +1 -0
- package/dist/prototype/htpasswd.js +33 -0
- package/dist/prototype/htpasswd.js.map +1 -0
- package/dist/prototype/theme-preview.d.ts +17 -0
- package/dist/prototype/theme-preview.d.ts.map +1 -0
- package/dist/prototype/theme-preview.js +73 -0
- package/dist/prototype/theme-preview.js.map +1 -0
- package/dist/prototype/types.d.ts +8 -0
- package/dist/prototype/types.d.ts.map +1 -1
- package/dist/prototype/validate.d.ts.map +1 -1
- package/dist/prototype/validate.js +19 -0
- package/dist/prototype/validate.js.map +1 -1
- package/dist/util/open-browser.d.ts +3 -0
- package/dist/util/open-browser.d.ts.map +1 -0
- package/dist/util/open-browser.js +24 -0
- package/dist/util/open-browser.js.map +1 -0
- package/package.json +4 -2
- package/scaffold/.ai-spector/.docflow/config/language.json +4 -0
- package/scaffold/cursor/WORKFLOW.md +2 -1
- package/scaffold/cursor/skills/_skill-router.md +1 -1
- package/scaffold/cursor/skills/ai-spector/references/generate-workflow.md +8 -0
- package/scaffold/cursor/skills/ai-spector/references/language-picker.md +70 -0
- package/scaffold/cursor/skills/ai-spector/references/project-conventions.md +13 -4
- package/scaffold/cursor/skills/ai-spector-generate-basic-design/SKILL.md +1 -0
- package/scaffold/cursor/skills/ai-spector-generate-detail-design/SKILL.md +1 -0
- package/scaffold/cursor/skills/ai-spector-generate-prototype/SKILL.md +13 -5
- package/scaffold/cursor/skills/ai-spector-generate-prototype/references/auth-picker.md +61 -0
- package/scaffold/cursor/skills/ai-spector-generate-prototype/references/runbook.md +32 -10
- package/scaffold/cursor/skills/ai-spector-generate-prototype/references/theme-picker.md +118 -0
- package/scaffold/cursor/skills/ai-spector-generate-srs/SKILL.md +1 -0
- package/scaffold/prototype/README.md +24 -3
|
@@ -0,0 +1,611 @@
|
|
|
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 Shopify</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
10
|
+
<style>
|
|
11
|
+
:root {
|
|
12
|
+
--white: #FFFFFF;
|
|
13
|
+
--black: #000000;
|
|
14
|
+
--neon-green: #36F4A4;
|
|
15
|
+
--aloe: #C1FBD4;
|
|
16
|
+
--pistachio: #D4F9E0;
|
|
17
|
+
--deep-teal: #02090A;
|
|
18
|
+
--dark-forest: #061A1C;
|
|
19
|
+
--forest: #102620;
|
|
20
|
+
--card-border: #1E2C31;
|
|
21
|
+
--shade-30: #D4D4D8;
|
|
22
|
+
--muted: #A1A1AA;
|
|
23
|
+
--shade-50: #71717A;
|
|
24
|
+
--shade-60: #52525B;
|
|
25
|
+
--shade-70: #3F3F46;
|
|
26
|
+
--light-border: #E4E4E7;
|
|
27
|
+
--link-muted: #9797A2;
|
|
28
|
+
--shadow-card: rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px 0px, rgba(0,0,0,0.1) 0px 4px 4px 0px, rgba(0,0,0,0.1) 0px 8px 8px 0px, rgba(255,255,255,0.03) 0px 1px 0px 0px inset;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
32
|
+
body {
|
|
33
|
+
font-family: 'Inter', Helvetica, Arial, sans-serif;
|
|
34
|
+
background: var(--black);
|
|
35
|
+
color: var(--white);
|
|
36
|
+
line-height: 1.5;
|
|
37
|
+
font-weight: 400;
|
|
38
|
+
font-feature-settings: "ss03";
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Nav */
|
|
42
|
+
.nav {
|
|
43
|
+
position: sticky;
|
|
44
|
+
top: 0;
|
|
45
|
+
z-index: 100;
|
|
46
|
+
background: rgba(0, 0, 0, 0.85);
|
|
47
|
+
backdrop-filter: blur(12px);
|
|
48
|
+
-webkit-backdrop-filter: blur(12px);
|
|
49
|
+
border-bottom: 1px solid var(--shade-70);
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: space-between;
|
|
53
|
+
padding: 0 48px;
|
|
54
|
+
height: 64px;
|
|
55
|
+
}
|
|
56
|
+
.nav-brand {
|
|
57
|
+
font-size: 20px;
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
color: var(--white);
|
|
60
|
+
letter-spacing: 0.3px;
|
|
61
|
+
}
|
|
62
|
+
.nav-links {
|
|
63
|
+
display: flex;
|
|
64
|
+
gap: 32px;
|
|
65
|
+
list-style: none;
|
|
66
|
+
}
|
|
67
|
+
.nav-links a {
|
|
68
|
+
font-size: 16px;
|
|
69
|
+
font-weight: 500;
|
|
70
|
+
color: var(--muted);
|
|
71
|
+
text-decoration: none;
|
|
72
|
+
letter-spacing: 0.3px;
|
|
73
|
+
transition: color 200ms ease;
|
|
74
|
+
}
|
|
75
|
+
.nav-links a:hover { color: var(--white); }
|
|
76
|
+
.nav-cta {
|
|
77
|
+
background: var(--white);
|
|
78
|
+
color: var(--black);
|
|
79
|
+
border: 2px solid transparent;
|
|
80
|
+
border-radius: 9999px;
|
|
81
|
+
padding: 8px 24px;
|
|
82
|
+
font-size: 14px;
|
|
83
|
+
font-weight: 500;
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
font-family: 'Inter', Helvetica, Arial, sans-serif;
|
|
86
|
+
font-feature-settings: "ss03";
|
|
87
|
+
transition: opacity 200ms ease;
|
|
88
|
+
}
|
|
89
|
+
.nav-cta:hover { opacity: 0.85; }
|
|
90
|
+
|
|
91
|
+
/* Hero */
|
|
92
|
+
.hero {
|
|
93
|
+
background: var(--black);
|
|
94
|
+
padding: 100px 48px 80px;
|
|
95
|
+
text-align: center;
|
|
96
|
+
position: relative;
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
}
|
|
99
|
+
.hero::after {
|
|
100
|
+
content: '';
|
|
101
|
+
position: absolute;
|
|
102
|
+
top: 50%; left: 50%;
|
|
103
|
+
transform: translate(-50%, -50%);
|
|
104
|
+
width: 800px;
|
|
105
|
+
height: 500px;
|
|
106
|
+
background: radial-gradient(ellipse at center, rgba(16, 38, 32, 0.6) 0%, transparent 70%);
|
|
107
|
+
pointer-events: none;
|
|
108
|
+
}
|
|
109
|
+
.hero-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
|
|
110
|
+
.hero h1 {
|
|
111
|
+
font-size: 80px;
|
|
112
|
+
font-weight: 330;
|
|
113
|
+
line-height: 0.96;
|
|
114
|
+
margin-bottom: 28px;
|
|
115
|
+
color: var(--white);
|
|
116
|
+
letter-spacing: -0.5px;
|
|
117
|
+
}
|
|
118
|
+
.hero h1 span { color: var(--neon-green); }
|
|
119
|
+
.hero-subtitle {
|
|
120
|
+
font-size: 20px;
|
|
121
|
+
font-weight: 400;
|
|
122
|
+
color: var(--muted);
|
|
123
|
+
margin-bottom: 40px;
|
|
124
|
+
line-height: 1.5;
|
|
125
|
+
max-width: 600px;
|
|
126
|
+
margin-left: auto;
|
|
127
|
+
margin-right: auto;
|
|
128
|
+
}
|
|
129
|
+
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
|
130
|
+
.btn-primary {
|
|
131
|
+
background: var(--white);
|
|
132
|
+
color: var(--black);
|
|
133
|
+
border: 2px solid transparent;
|
|
134
|
+
border-radius: 9999px;
|
|
135
|
+
padding: 14px 32px;
|
|
136
|
+
font-size: 16px;
|
|
137
|
+
font-weight: 500;
|
|
138
|
+
cursor: pointer;
|
|
139
|
+
font-family: 'Inter', Helvetica, Arial, sans-serif;
|
|
140
|
+
font-feature-settings: "ss03";
|
|
141
|
+
transition: opacity 200ms ease;
|
|
142
|
+
}
|
|
143
|
+
.btn-primary:hover { opacity: 0.85; }
|
|
144
|
+
.btn-ghost {
|
|
145
|
+
background: transparent;
|
|
146
|
+
color: var(--white);
|
|
147
|
+
border: 2px solid var(--white);
|
|
148
|
+
border-radius: 9999px;
|
|
149
|
+
padding: 14px 32px;
|
|
150
|
+
font-size: 16px;
|
|
151
|
+
font-weight: 500;
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
font-family: 'Inter', Helvetica, Arial, sans-serif;
|
|
154
|
+
font-feature-settings: "ss03";
|
|
155
|
+
transition: all 200ms ease;
|
|
156
|
+
}
|
|
157
|
+
.btn-ghost:hover { background: var(--white); color: var(--black); }
|
|
158
|
+
|
|
159
|
+
/* Sections */
|
|
160
|
+
.section {
|
|
161
|
+
padding: 64px 48px;
|
|
162
|
+
max-width: 1280px;
|
|
163
|
+
margin: 0 auto;
|
|
164
|
+
}
|
|
165
|
+
.section-dark {
|
|
166
|
+
background: var(--dark-forest);
|
|
167
|
+
max-width: none;
|
|
168
|
+
}
|
|
169
|
+
.section-dark .section-inner {
|
|
170
|
+
max-width: 1280px;
|
|
171
|
+
margin: 0 auto;
|
|
172
|
+
}
|
|
173
|
+
.section-title {
|
|
174
|
+
font-size: 48px;
|
|
175
|
+
font-weight: 330;
|
|
176
|
+
line-height: 1.14;
|
|
177
|
+
margin-bottom: 12px;
|
|
178
|
+
}
|
|
179
|
+
.section-desc {
|
|
180
|
+
font-size: 18px;
|
|
181
|
+
color: var(--muted);
|
|
182
|
+
margin-bottom: 40px;
|
|
183
|
+
max-width: 600px;
|
|
184
|
+
line-height: 1.56;
|
|
185
|
+
}
|
|
186
|
+
.section-divider {
|
|
187
|
+
border: none;
|
|
188
|
+
border-top: 1px solid var(--shade-70);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* Color Palette */
|
|
192
|
+
.color-category { margin-bottom: 40px; }
|
|
193
|
+
.color-category h3 {
|
|
194
|
+
font-size: 12px;
|
|
195
|
+
font-weight: 500;
|
|
196
|
+
margin-bottom: 16px;
|
|
197
|
+
color: var(--muted);
|
|
198
|
+
text-transform: uppercase;
|
|
199
|
+
letter-spacing: 0.72px;
|
|
200
|
+
}
|
|
201
|
+
.color-grid {
|
|
202
|
+
display: grid;
|
|
203
|
+
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
204
|
+
gap: 12px;
|
|
205
|
+
}
|
|
206
|
+
.color-swatch { overflow: hidden; }
|
|
207
|
+
.swatch-block {
|
|
208
|
+
height: 72px;
|
|
209
|
+
width: 100%;
|
|
210
|
+
border-radius: 8px;
|
|
211
|
+
border: 1px solid var(--shade-70);
|
|
212
|
+
}
|
|
213
|
+
.swatch-info { padding: 8px 0; }
|
|
214
|
+
.swatch-name { font-size: 13px; font-weight: 500; color: var(--white); }
|
|
215
|
+
.swatch-hex { font-size: 12px; color: var(--muted); font-family: 'Inter', monospace; }
|
|
216
|
+
.swatch-role { font-size: 11px; color: var(--shade-50); margin-top: 2px; }
|
|
217
|
+
|
|
218
|
+
/* Typography */
|
|
219
|
+
.type-sample { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--shade-70); }
|
|
220
|
+
.type-sample:last-child { border-bottom: none; }
|
|
221
|
+
.type-label {
|
|
222
|
+
font-size: 11px;
|
|
223
|
+
font-weight: 500;
|
|
224
|
+
color: var(--shade-50);
|
|
225
|
+
text-transform: uppercase;
|
|
226
|
+
letter-spacing: 0.72px;
|
|
227
|
+
margin-bottom: 8px;
|
|
228
|
+
}
|
|
229
|
+
.type-display-xl { font-size: 80px; font-weight: 330; line-height: 0.96; }
|
|
230
|
+
.type-h1 { font-size: 55px; font-weight: 330; line-height: 1.16; }
|
|
231
|
+
.type-h2 { font-size: 48px; font-weight: 330; line-height: 1.14; }
|
|
232
|
+
.type-h3 { font-size: 32px; font-weight: 360; line-height: 1.14; letter-spacing: 0.32px; }
|
|
233
|
+
.type-h4 { font-size: 28px; font-weight: 500; line-height: 1.28; letter-spacing: 0.42px; }
|
|
234
|
+
.type-h5 { font-size: 24px; font-weight: 400; line-height: 1.14; letter-spacing: 0.36px; }
|
|
235
|
+
.type-body-lg { font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: 0.3px; color: var(--muted); }
|
|
236
|
+
.type-body { font-size: 18px; font-weight: 400; line-height: 1.56; color: var(--shade-30); }
|
|
237
|
+
.type-body-med { font-size: 18px; font-weight: 550; line-height: 1.56; }
|
|
238
|
+
.type-caption { font-size: 14px; font-weight: 500; line-height: 1.49; letter-spacing: 0.28px; color: var(--muted); }
|
|
239
|
+
.type-overline { font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.72px; text-transform: uppercase; color: var(--muted); }
|
|
240
|
+
.type-mono { font-size: 16px; font-weight: 400; line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; color: var(--neon-green); }
|
|
241
|
+
|
|
242
|
+
/* Buttons Section */
|
|
243
|
+
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
|
|
244
|
+
.button-label { font-size: 11px; font-weight: 500; color: var(--shade-50); text-transform: uppercase; letter-spacing: 0.72px; margin-bottom: 12px; }
|
|
245
|
+
.btn-tag {
|
|
246
|
+
background: rgba(255,255,255,0.15);
|
|
247
|
+
color: var(--white);
|
|
248
|
+
border: none;
|
|
249
|
+
border-radius: 4px;
|
|
250
|
+
padding: 10px 16px;
|
|
251
|
+
font-size: 14px;
|
|
252
|
+
font-weight: 500;
|
|
253
|
+
cursor: pointer;
|
|
254
|
+
font-family: 'Inter', Helvetica, Arial, sans-serif;
|
|
255
|
+
font-feature-settings: "ss03";
|
|
256
|
+
}
|
|
257
|
+
.btn-green-focus {
|
|
258
|
+
background: var(--white);
|
|
259
|
+
color: var(--black);
|
|
260
|
+
border: 2px solid transparent;
|
|
261
|
+
border-radius: 9999px;
|
|
262
|
+
padding: 12px 28px;
|
|
263
|
+
font-size: 16px;
|
|
264
|
+
font-weight: 500;
|
|
265
|
+
cursor: pointer;
|
|
266
|
+
font-family: 'Inter', Helvetica, Arial, sans-serif;
|
|
267
|
+
box-shadow: 0 0 0 2px var(--neon-green);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/* Cards */
|
|
271
|
+
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
|
272
|
+
.card {
|
|
273
|
+
background: var(--deep-teal);
|
|
274
|
+
border: 1px solid var(--card-border);
|
|
275
|
+
border-radius: 12px;
|
|
276
|
+
padding: 28px;
|
|
277
|
+
box-shadow: var(--shadow-card);
|
|
278
|
+
transition: transform 200ms ease, box-shadow 300ms ease;
|
|
279
|
+
}
|
|
280
|
+
.card:hover { transform: translateY(-2px); }
|
|
281
|
+
.card-accent {
|
|
282
|
+
width: 40px; height: 4px;
|
|
283
|
+
background: var(--neon-green);
|
|
284
|
+
border-radius: 2px;
|
|
285
|
+
margin-bottom: 20px;
|
|
286
|
+
}
|
|
287
|
+
.card h4 { font-size: 24px; font-weight: 400; margin-bottom: 8px; letter-spacing: 0.36px; }
|
|
288
|
+
.card p { font-size: 16px; color: var(--muted); line-height: 1.5; }
|
|
289
|
+
.card-forest {
|
|
290
|
+
background: var(--forest);
|
|
291
|
+
border: 1px solid rgba(255,255,255,0.06);
|
|
292
|
+
border-radius: 12px;
|
|
293
|
+
padding: 28px;
|
|
294
|
+
}
|
|
295
|
+
.card-forest h4 { font-size: 24px; font-weight: 400; margin-bottom: 8px; }
|
|
296
|
+
.card-forest p { font-size: 16px; color: var(--muted); line-height: 1.5; }
|
|
297
|
+
|
|
298
|
+
/* Forms */
|
|
299
|
+
.form-group { margin-bottom: 24px; max-width: 480px; }
|
|
300
|
+
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--shade-30); margin-bottom: 8px; letter-spacing: 0.28px; }
|
|
301
|
+
.form-input {
|
|
302
|
+
width: 100%; padding: 12px 16px; font-size: 16px;
|
|
303
|
+
font-family: 'Inter', Helvetica, Arial, sans-serif; font-feature-settings: "ss03";
|
|
304
|
+
border: 1px solid var(--shade-70); border-radius: 8px;
|
|
305
|
+
background: transparent; color: var(--white); outline: none;
|
|
306
|
+
transition: border-color 200ms ease;
|
|
307
|
+
}
|
|
308
|
+
.form-input::placeholder { color: var(--shade-50); }
|
|
309
|
+
.form-input:focus { border-color: var(--neon-green); box-shadow: 0 0 0 2px var(--neon-green); }
|
|
310
|
+
.form-input-error {
|
|
311
|
+
width: 100%; padding: 12px 16px; font-size: 16px;
|
|
312
|
+
font-family: 'Inter', Helvetica, Arial, sans-serif;
|
|
313
|
+
border: 2px solid #F6465D; border-radius: 8px;
|
|
314
|
+
background: transparent; color: var(--white); outline: none;
|
|
315
|
+
}
|
|
316
|
+
.form-error-text { font-size: 12px; color: #F6465D; margin-top: 4px; }
|
|
317
|
+
.form-textarea {
|
|
318
|
+
width: 100%; padding: 12px 16px; font-size: 16px;
|
|
319
|
+
font-family: 'Inter', Helvetica, Arial, sans-serif; font-feature-settings: "ss03";
|
|
320
|
+
border: 1px solid var(--shade-70); border-radius: 8px;
|
|
321
|
+
background: transparent; color: var(--white); outline: none;
|
|
322
|
+
resize: vertical; min-height: 100px;
|
|
323
|
+
transition: border-color 200ms ease;
|
|
324
|
+
}
|
|
325
|
+
.form-textarea:focus { border-color: var(--neon-green); box-shadow: 0 0 0 2px var(--neon-green); }
|
|
326
|
+
|
|
327
|
+
/* Spacing */
|
|
328
|
+
.spacing-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
|
|
329
|
+
.spacing-box {
|
|
330
|
+
background: var(--neon-green);
|
|
331
|
+
display: flex; align-items: center; justify-content: center;
|
|
332
|
+
font-size: 11px; font-weight: 600; color: var(--black); border-radius: 4px; min-height: 40px;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
/* Radius */
|
|
336
|
+
.radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
|
|
337
|
+
.radius-item { text-align: center; }
|
|
338
|
+
.radius-box { width: 72px; height: 72px; border: 2px solid var(--neon-green); margin-bottom: 8px; }
|
|
339
|
+
.radius-label { font-size: 12px; color: var(--muted); font-weight: 500; }
|
|
340
|
+
.radius-context { font-size: 11px; color: var(--shade-50); }
|
|
341
|
+
|
|
342
|
+
/* Elevation */
|
|
343
|
+
.elevation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
|
|
344
|
+
.elevation-card { padding: 24px; border-radius: 12px; text-align: center; }
|
|
345
|
+
.elevation-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
|
|
346
|
+
.elevation-desc { font-size: 12px; color: var(--muted); }
|
|
347
|
+
.elevation-base { background: var(--deep-teal); border: 1px solid var(--card-border); }
|
|
348
|
+
.elevation-subtle { background: var(--deep-teal); box-shadow: rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(255,255,255,0.03) 0px 1px 0px 0px inset; }
|
|
349
|
+
.elevation-medium { background: var(--deep-teal); box-shadow: var(--shadow-card); }
|
|
350
|
+
.elevation-focus { background: var(--deep-teal); box-shadow: 0 0 0 2px var(--neon-green); }
|
|
351
|
+
|
|
352
|
+
/* Footer */
|
|
353
|
+
.footer {
|
|
354
|
+
text-align: center; padding: 48px;
|
|
355
|
+
border-top: 1px solid var(--shade-70);
|
|
356
|
+
font-size: 14px; color: var(--muted);
|
|
357
|
+
}
|
|
358
|
+
.footer a { color: var(--white); text-decoration: none; font-weight: 500; }
|
|
359
|
+
.footer a:hover { color: var(--neon-green); }
|
|
360
|
+
|
|
361
|
+
@media (max-width: 768px) {
|
|
362
|
+
.nav { padding: 0 16px; }
|
|
363
|
+
.nav-links { display: none; }
|
|
364
|
+
.hero { padding: 48px 16px 40px; }
|
|
365
|
+
.hero h1 { font-size: 48px; }
|
|
366
|
+
.section { padding: 40px 16px; }
|
|
367
|
+
.section-dark { padding: 40px 16px; }
|
|
368
|
+
.section-title { font-size: 32px; }
|
|
369
|
+
.card-grid { grid-template-columns: 1fr; }
|
|
370
|
+
.elevation-grid { grid-template-columns: repeat(2, 1fr); }
|
|
371
|
+
.color-grid { grid-template-columns: repeat(2, 1fr); }
|
|
372
|
+
.type-display-xl { font-size: 48px; }
|
|
373
|
+
.type-h1 { font-size: 36px; }
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
/* getdesign.md nav additions */
|
|
377
|
+
.nav-left { display: flex; align-items: center; gap: 20px; }
|
|
378
|
+
.nav-brand-link,
|
|
379
|
+
.nav-brand-link:link,
|
|
380
|
+
.nav-brand-link:visited,
|
|
381
|
+
.nav-brand-link:hover,
|
|
382
|
+
.nav-brand-link:active { text-decoration: none; color: inherit; }
|
|
383
|
+
.nav-github,
|
|
384
|
+
.nav-github:link,
|
|
385
|
+
.nav-github:visited,
|
|
386
|
+
.nav-github:hover,
|
|
387
|
+
.nav-github:active {
|
|
388
|
+
display: inline-flex;
|
|
389
|
+
align-items: center;
|
|
390
|
+
gap: 6px;
|
|
391
|
+
font-size: 12px;
|
|
392
|
+
font-weight: 600;
|
|
393
|
+
color: inherit;
|
|
394
|
+
text-decoration: none;
|
|
395
|
+
padding: 5px 10px;
|
|
396
|
+
border: 1px solid rgba(128, 128, 128, 0.3);
|
|
397
|
+
border-radius: 6px;
|
|
398
|
+
opacity: 0.75;
|
|
399
|
+
transition: opacity 200ms ease, border-color 200ms ease;
|
|
400
|
+
font-family: inherit;
|
|
401
|
+
line-height: 1;
|
|
402
|
+
white-space: nowrap;
|
|
403
|
+
}
|
|
404
|
+
.nav-github:hover { opacity: 1; border-color: rgba(128, 128, 128, 0.55); }
|
|
405
|
+
.nav-github svg { display: block; flex-shrink: 0; }
|
|
406
|
+
|
|
407
|
+
/* getdesign.md nav centering */
|
|
408
|
+
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
|
|
409
|
+
.nav > .nav-left { justify-self: start; }
|
|
410
|
+
.nav > .nav-links { justify-self: center; }
|
|
411
|
+
.nav > :last-child { justify-self: end; }
|
|
412
|
+
</style>
|
|
413
|
+
</head>
|
|
414
|
+
<body>
|
|
415
|
+
|
|
416
|
+
<nav class="nav">
|
|
417
|
+
<div class="nav-left">
|
|
418
|
+
<a href="https://getdesign.md/" target="_blank" rel="noopener noreferrer" class="nav-brand-link">
|
|
419
|
+
<span class="nav-brand">getdesign.md</span>
|
|
420
|
+
</a>
|
|
421
|
+
<a class="nav-github" href="https://github.com/VoltAgent/awesome-design-md" target="_blank" rel="noopener noreferrer" aria-label="awesome-design-md on GitHub">
|
|
422
|
+
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2 .37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
|
|
423
|
+
awesome-design-md
|
|
424
|
+
</a>
|
|
425
|
+
</div>
|
|
426
|
+
<ul class="nav-links">
|
|
427
|
+
<a href="#colors">Colors</a>
|
|
428
|
+
<a href="#typography">Typography</a>
|
|
429
|
+
<a href="#buttons">Buttons</a>
|
|
430
|
+
<a href="#cards">Cards</a>
|
|
431
|
+
<a href="#forms">Forms</a>
|
|
432
|
+
<a href="#spacing">Spacing</a>
|
|
433
|
+
</ul>
|
|
434
|
+
<button class="nav-cta">Start for free</button>
|
|
435
|
+
</nav>
|
|
436
|
+
|
|
437
|
+
<section class="hero">
|
|
438
|
+
<div class="hero-content">
|
|
439
|
+
<h1>Design System Inspired by <span>Shopify</span></h1>
|
|
440
|
+
<p class="hero-subtitle">A complete design token catalog extracted from Shopify.com â NeueHaasGrotesk display typography, dark-first surfaces, and neon green accents.</p>
|
|
441
|
+
<div class="hero-buttons">
|
|
442
|
+
<button class="btn-primary">Explore Tokens</button>
|
|
443
|
+
<button class="btn-ghost">View Source</button>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
</section>
|
|
447
|
+
|
|
448
|
+
<section class="section" id="colors">
|
|
449
|
+
<h2 class="section-title">Color Palette</h2>
|
|
450
|
+
<p class="section-desc">Dark-first surfaces with deep teal undertones. Neon Green is the singular high-energy accent.</p>
|
|
451
|
+
|
|
452
|
+
<div class="color-category">
|
|
453
|
+
<h3>Primary & Accent</h3>
|
|
454
|
+
<div class="color-grid">
|
|
455
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#FFFFFF;"></div><div class="swatch-info"><div class="swatch-name">White</div><div class="swatch-hex">#FFFFFF</div><div class="swatch-role">Text, button fills</div></div></div>
|
|
456
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#000000;"></div><div class="swatch-info"><div class="swatch-name">Black</div><div class="swatch-hex">#000000</div><div class="swatch-role">Page bg, button text</div></div></div>
|
|
457
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#36F4A4;"></div><div class="swatch-info"><div class="swatch-name">Neon Green</div><div class="swatch-hex">#36F4A4</div><div class="swatch-role">Focus, accent highlights</div></div></div>
|
|
458
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#C1FBD4;"></div><div class="swatch-info"><div class="swatch-name">Aloe</div><div class="swatch-hex">#C1FBD4</div><div class="swatch-role">Decorative wash</div></div></div>
|
|
459
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#D4F9E0;"></div><div class="swatch-info"><div class="swatch-name">Pistachio</div><div class="swatch-hex">#D4F9E0</div><div class="swatch-role">Light green tint</div></div></div>
|
|
460
|
+
</div>
|
|
461
|
+
</div>
|
|
462
|
+
|
|
463
|
+
<div class="color-category">
|
|
464
|
+
<h3>Surface & Background</h3>
|
|
465
|
+
<div class="color-grid">
|
|
466
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#000000;"></div><div class="swatch-info"><div class="swatch-name">Void</div><div class="swatch-hex">#000000</div><div class="swatch-role">Root page bg</div></div></div>
|
|
467
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#02090A;"></div><div class="swatch-info"><div class="swatch-name">Deep Teal</div><div class="swatch-hex">#02090A</div><div class="swatch-role">Card surfaces</div></div></div>
|
|
468
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#061A1C;"></div><div class="swatch-info"><div class="swatch-name">Dark Forest</div><div class="swatch-hex">#061A1C</div><div class="swatch-role">Section backgrounds</div></div></div>
|
|
469
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#102620;"></div><div class="swatch-info"><div class="swatch-name">Forest</div><div class="swatch-hex">#102620</div><div class="swatch-role">Elevated surfaces</div></div></div>
|
|
470
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#1E2C31;"></div><div class="swatch-info"><div class="swatch-name">Card Border</div><div class="swatch-hex">#1E2C31</div><div class="swatch-role">Dark card borders</div></div></div>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
|
|
474
|
+
<div class="color-category">
|
|
475
|
+
<h3>Zinc Neutral Scale</h3>
|
|
476
|
+
<div class="color-grid">
|
|
477
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#D4D4D8;"></div><div class="swatch-info"><div class="swatch-name">Shade-30</div><div class="swatch-hex">#D4D4D8</div><div class="swatch-role">Light borders</div></div></div>
|
|
478
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#A1A1AA;"></div><div class="swatch-info"><div class="swatch-name">Muted</div><div class="swatch-hex">#A1A1AA</div><div class="swatch-role">Secondary text</div></div></div>
|
|
479
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#71717A;"></div><div class="swatch-info"><div class="swatch-name">Shade-50</div><div class="swatch-hex">#71717A</div><div class="swatch-role">Tertiary text</div></div></div>
|
|
480
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#52525B;"></div><div class="swatch-info"><div class="swatch-name">Shade-60</div><div class="swatch-hex">#52525B</div><div class="swatch-role">Disabled text</div></div></div>
|
|
481
|
+
<div class="color-swatch"><div class="swatch-block" style="background:#3F3F46;"></div><div class="swatch-info"><div class="swatch-name">Shade-70</div><div class="swatch-hex">#3F3F46</div><div class="swatch-role">Dividers, borders</div></div></div>
|
|
482
|
+
</div>
|
|
483
|
+
</div>
|
|
484
|
+
</section>
|
|
485
|
+
|
|
486
|
+
<hr class="section-divider">
|
|
487
|
+
|
|
488
|
+
<section class="section" id="typography">
|
|
489
|
+
<h2 class="section-title">Typography Scale</h2>
|
|
490
|
+
<p class="section-desc">NeueHaasGrotesk at ultra-light weights (330) for display, Inter Variable for body. All text uses the ss03 stylistic set.</p>
|
|
491
|
+
|
|
492
|
+
<div class="type-sample"><div class="type-label">Display XL â 96px / 330 / 0.96</div><div class="type-display-xl">Be the next big thing</div></div>
|
|
493
|
+
<div class="type-sample"><div class="type-label">Heading 1 â 55px / 330 / 1.16</div><div class="type-h1">The commerce platform behind it all</div></div>
|
|
494
|
+
<div class="type-sample"><div class="type-label">Heading 2 â 48px / 330 / 1.14</div><div class="type-h2">For everyone, from entrepreneurs to enterprise</div></div>
|
|
495
|
+
<div class="type-sample"><div class="type-label">Heading 3 â 32px / 360 / 1.14</div><div class="type-h3">Sell everywhere, all at once</div></div>
|
|
496
|
+
<div class="type-sample"><div class="type-label">Heading 4 â 28px / 500 / 1.28</div><div class="type-h4">Built for the way you work</div></div>
|
|
497
|
+
<div class="type-sample"><div class="type-label">Heading 5 â 24px / 400 / 1.14</div><div class="type-h5">Card Heading</div></div>
|
|
498
|
+
<div class="type-sample"><div class="type-label">Body Large â 20px / 500 / 1.40</div><div class="type-body-lg">Lead paragraph text used for hero subtitles and introductions.</div></div>
|
|
499
|
+
<div class="type-sample"><div class="type-label">Body â 18px / 400 / 1.56</div><div class="type-body">Standard body text for descriptions and content. Inter Variable at weight 400 with generous line-height.</div></div>
|
|
500
|
+
<div class="type-sample"><div class="type-label">Body Medium â 18px / 550 / 1.56</div><div class="type-body-med">Emphasized body text for links and important UI text.</div></div>
|
|
501
|
+
<div class="type-sample"><div class="type-label">Caption â 14px / 500 / 1.49</div><div class="type-caption">Metadata, labels, and small descriptive text</div></div>
|
|
502
|
+
<div class="type-sample"><div class="type-label">Overline â 12px / 500 / uppercase / 0.72px tracking</div><div class="type-overline">Category Label</div></div>
|
|
503
|
+
<div class="type-sample"><div class="type-label">Monospace â 16px / uppercase</div><div class="type-mono">CODE_BLOCK_EXAMPLE</div></div>
|
|
504
|
+
</section>
|
|
505
|
+
|
|
506
|
+
<hr class="section-divider">
|
|
507
|
+
|
|
508
|
+
<section class="section" id="buttons">
|
|
509
|
+
<h2 class="section-title">Button Variants</h2>
|
|
510
|
+
<p class="section-desc">Full-pill (9999px radius) buttons. White primary, ghost secondary, frosted glass tags.</p>
|
|
511
|
+
|
|
512
|
+
<div class="button-label">Primary & Ghost</div>
|
|
513
|
+
<div class="button-row">
|
|
514
|
+
<button class="btn-primary">Start for free</button>
|
|
515
|
+
<button class="btn-ghost">Why we build Shopify</button>
|
|
516
|
+
</div>
|
|
517
|
+
|
|
518
|
+
<div class="button-label" style="margin-top:32px;">Tags & Focus State</div>
|
|
519
|
+
<div class="button-row">
|
|
520
|
+
<button class="btn-tag">Online Store</button>
|
|
521
|
+
<button class="btn-tag">Point of Sale</button>
|
|
522
|
+
<button class="btn-tag">Global Commerce</button>
|
|
523
|
+
<button class="btn-green-focus">With Focus Ring</button>
|
|
524
|
+
</div>
|
|
525
|
+
</section>
|
|
526
|
+
|
|
527
|
+
<hr class="section-divider">
|
|
528
|
+
|
|
529
|
+
<section class="section" id="cards">
|
|
530
|
+
<h2 class="section-title">Cards & Containers</h2>
|
|
531
|
+
<p class="section-desc">Multi-layered shadow system on deep teal surfaces. 12px radius with subtle card borders.</p>
|
|
532
|
+
|
|
533
|
+
<div style="margin-bottom:40px;">
|
|
534
|
+
<div class="button-label">Deep Teal Cards</div>
|
|
535
|
+
<div class="card-grid">
|
|
536
|
+
<div class="card"><div class="card-accent"></div><h4>Online Store</h4><p>Build a beautiful storefront that converts visitors into customers.</p></div>
|
|
537
|
+
<div class="card"><div class="card-accent"></div><h4>Point of Sale</h4><p>Sell in-person with hardware designed for modern retail.</p></div>
|
|
538
|
+
<div class="card"><div class="card-accent"></div><h4>Payments</h4><p>Accept every payment method with integrated processing.</p></div>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
|
|
542
|
+
<div>
|
|
543
|
+
<div class="button-label">Forest Cards</div>
|
|
544
|
+
<div class="card-grid">
|
|
545
|
+
<div class="card-forest"><h4>Marketing</h4><p>Reach customers with built-in SEO and social tools.</p></div>
|
|
546
|
+
<div class="card-forest"><h4>Analytics</h4><p>Track performance with real-time dashboards and reports.</p></div>
|
|
547
|
+
<div class="card-forest"><h4>Shipping</h4><p>Ship globally with discounted rates and tracking.</p></div>
|
|
548
|
+
</div>
|
|
549
|
+
</div>
|
|
550
|
+
</section>
|
|
551
|
+
|
|
552
|
+
<hr class="section-divider">
|
|
553
|
+
|
|
554
|
+
<section class="section" id="forms">
|
|
555
|
+
<h2 class="section-title">Form Elements</h2>
|
|
556
|
+
<p class="section-desc">Transparent inputs with subtle borders. Neon Green focus ring for accessibility.</p>
|
|
557
|
+
|
|
558
|
+
<div class="form-group"><label class="form-label">Default Input</label><input type="text" class="form-input" placeholder="Enter your email"></div>
|
|
559
|
+
<div class="form-group"><label class="form-label">Focus State</label><input type="text" class="form-input" value="merchant@shopify.com" style="border-color:#36F4A4; box-shadow: 0 0 0 2px #36F4A4;"></div>
|
|
560
|
+
<div class="form-group"><label class="form-label">Error State</label><input type="text" class="form-input-error" value="invalid-email"><div class="form-error-text">Please enter a valid email address</div></div>
|
|
561
|
+
<div class="form-group"><label class="form-label">Textarea</label><textarea class="form-textarea" placeholder="Describe your store"></textarea></div>
|
|
562
|
+
</section>
|
|
563
|
+
|
|
564
|
+
<hr class="section-divider">
|
|
565
|
+
|
|
566
|
+
<section class="section" id="spacing">
|
|
567
|
+
<h2 class="section-title">Spacing Scale</h2>
|
|
568
|
+
<p class="section-desc">8px base unit with progressive scaling for theatrical section pacing.</p>
|
|
569
|
+
<div class="spacing-row">
|
|
570
|
+
<div class="spacing-box" style="width:16px; height:40px;"><span style="font-size:10px;">4</span></div>
|
|
571
|
+
<div class="spacing-box" style="width:32px; height:40px;">8</div>
|
|
572
|
+
<div class="spacing-box" style="width:48px; height:40px;">12</div>
|
|
573
|
+
<div class="spacing-box" style="width:64px; height:40px;">16</div>
|
|
574
|
+
<div class="spacing-box" style="width:96px; height:40px;">24</div>
|
|
575
|
+
<div class="spacing-box" style="width:128px; height:40px;">32</div>
|
|
576
|
+
<div class="spacing-box" style="width:160px; height:40px;">40</div>
|
|
577
|
+
<div class="spacing-box" style="width:256px; height:40px;">64</div>
|
|
578
|
+
</div>
|
|
579
|
+
</section>
|
|
580
|
+
|
|
581
|
+
<hr class="section-divider">
|
|
582
|
+
|
|
583
|
+
<section class="section">
|
|
584
|
+
<h2 class="section-title">Border Radius Scale</h2>
|
|
585
|
+
<p class="section-desc">From subtle tags to full-pill CTAs â radius signals interaction type.</p>
|
|
586
|
+
<div class="radius-row">
|
|
587
|
+
<div class="radius-item"><div class="radius-box" style="border-radius:4px;"></div><div class="radius-label">4px</div><div class="radius-context">Tags</div></div>
|
|
588
|
+
<div class="radius-item"><div class="radius-box" style="border-radius:8px;"></div><div class="radius-label">8px</div><div class="radius-context">Cards, inputs</div></div>
|
|
589
|
+
<div class="radius-item"><div class="radius-box" style="border-radius:12px;"></div><div class="radius-label">12px</div><div class="radius-context">Featured</div></div>
|
|
590
|
+
<div class="radius-item"><div class="radius-box" style="border-radius:20px;"></div><div class="radius-label">20px</div><div class="radius-context">Top-round</div></div>
|
|
591
|
+
<div class="radius-item"><div class="radius-box" style="border-radius:50%;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill buttons</div></div>
|
|
592
|
+
</div>
|
|
593
|
+
</section>
|
|
594
|
+
|
|
595
|
+
<hr class="section-divider">
|
|
596
|
+
|
|
597
|
+
<section class="section">
|
|
598
|
+
<h2 class="section-title">Depth & Elevation</h2>
|
|
599
|
+
<p class="section-desc">Multi-layered shadows with inset white glow â ambient occlusion on dark surfaces.</p>
|
|
600
|
+
<div class="elevation-grid">
|
|
601
|
+
<div class="elevation-card elevation-base"><div class="elevation-name">Base</div><div class="elevation-desc">Border only, no shadow</div></div>
|
|
602
|
+
<div class="elevation-card elevation-subtle"><div class="elevation-name">Subtle</div><div class="elevation-desc">1px ring + inset glow</div></div>
|
|
603
|
+
<div class="elevation-card elevation-medium"><div class="elevation-name">Medium</div><div class="elevation-desc">Multi-layer stack</div></div>
|
|
604
|
+
<div class="elevation-card elevation-focus"><div class="elevation-name">Focus</div><div class="elevation-desc">Neon Green 2px ring</div></div>
|
|
605
|
+
</div>
|
|
606
|
+
</section>
|
|
607
|
+
|
|
608
|
+
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
|
609
|
+
|
|
610
|
+
</body>
|
|
611
|
+
</html>
|