motif-design 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +91 -0
- package/bin/install.js +724 -0
- package/core/references/context-engine.md +190 -0
- package/core/references/design-inputs.md +421 -0
- package/core/references/runtime-adapters.md +180 -0
- package/core/references/state-machine.md +124 -0
- package/core/references/verticals/ecommerce.md +251 -0
- package/core/references/verticals/fintech.md +226 -0
- package/core/references/verticals/health.md +235 -0
- package/core/references/verticals/saas.md +248 -0
- package/core/templates/STATE-TEMPLATE.md +28 -0
- package/core/templates/SUMMARY-TEMPLATE.md +21 -0
- package/core/templates/VERTICAL-TEMPLATE.md +144 -0
- package/core/templates/token-showcase-template.html +946 -0
- package/core/workflows/compose-screen.md +163 -0
- package/core/workflows/evolve.md +64 -0
- package/core/workflows/fix.md +64 -0
- package/core/workflows/generate-system.md +336 -0
- package/core/workflows/quick.md +23 -0
- package/core/workflows/research.md +233 -0
- package/core/workflows/review.md +126 -0
- package/package.json +26 -0
- package/runtimes/claude-code/CLAUDE-MD-SNIPPET.md +34 -0
- package/runtimes/claude-code/agents/motif-design-reviewer.md +207 -0
- package/runtimes/claude-code/agents/motif-fix-agent.md +119 -0
- package/runtimes/claude-code/agents/motif-researcher.md +100 -0
- package/runtimes/claude-code/agents/motif-screen-composer.md +157 -0
- package/runtimes/claude-code/agents/motif-system-architect.md +120 -0
- package/runtimes/claude-code/commands/motif/compose.md +7 -0
- package/runtimes/claude-code/commands/motif/evolve.md +6 -0
- package/runtimes/claude-code/commands/motif/fix.md +7 -0
- package/runtimes/claude-code/commands/motif/help.md +29 -0
- package/runtimes/claude-code/commands/motif/init.md +229 -0
- package/runtimes/claude-code/commands/motif/progress.md +11 -0
- package/runtimes/claude-code/commands/motif/quick.md +7 -0
- package/runtimes/claude-code/commands/motif/research.md +4 -0
- package/runtimes/claude-code/commands/motif/review.md +7 -0
- package/runtimes/claude-code/commands/motif/system.md +4 -0
- package/runtimes/claude-code/hooks/motif-aria-check.js +164 -0
- package/runtimes/claude-code/hooks/motif-context-monitor.js +40 -0
- package/runtimes/claude-code/hooks/motif-font-check.js +192 -0
- package/runtimes/claude-code/hooks/motif-token-check.js +221 -0
- package/runtimes/cursor/README.md +24 -0
- package/runtimes/gemini/README.md +13 -0
- package/runtimes/opencode/README.md +28 -0
- package/scripts/contrast-checker.js +114 -0
- package/scripts/token-counter.js +107 -0
|
@@ -0,0 +1,946 @@
|
|
|
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>{PRODUCT_NAME} — Design Tokens</title>
|
|
7
|
+
<link rel="stylesheet" href="tokens.css">
|
|
8
|
+
<link href="https://fonts.googleapis.com/css2?family={FONT_FAMILIES}" rel="stylesheet">
|
|
9
|
+
<style>
|
|
10
|
+
/* ═══════════════════════════════════════
|
|
11
|
+
Token Showcase — Inline Styles
|
|
12
|
+
All presentation CSS lives here.
|
|
13
|
+
Visual values use var(--token) references
|
|
14
|
+
resolved by the sibling tokens.css file.
|
|
15
|
+
═══════════════════════════════════════ */
|
|
16
|
+
|
|
17
|
+
/* --- Reset --- */
|
|
18
|
+
*, *::before, *::after {
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* --- Fallback Warning --- */
|
|
25
|
+
body::before {
|
|
26
|
+
content: "Warning: tokens.css not found. Place tokens.css in the same directory as this file.";
|
|
27
|
+
display: block;
|
|
28
|
+
padding: 1rem 1.5rem;
|
|
29
|
+
background: #fef2f2;
|
|
30
|
+
color: #991b1b;
|
|
31
|
+
border: 2px solid #fca5a5;
|
|
32
|
+
border-radius: 8px;
|
|
33
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
34
|
+
font-size: 0.875rem;
|
|
35
|
+
text-align: center;
|
|
36
|
+
margin-bottom: 2rem;
|
|
37
|
+
}
|
|
38
|
+
/* Hide warning when tokens.css loads and custom properties resolve */
|
|
39
|
+
body {
|
|
40
|
+
--_tokens-loaded: var(--surface-primary);
|
|
41
|
+
}
|
|
42
|
+
body::before {
|
|
43
|
+
display: var(--_tokens-loaded, block);
|
|
44
|
+
display: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* --- Body --- */
|
|
48
|
+
body {
|
|
49
|
+
font-family: var(--font-body);
|
|
50
|
+
background: var(--surface-primary);
|
|
51
|
+
color: var(--text-primary);
|
|
52
|
+
padding: var(--space-8);
|
|
53
|
+
line-height: var(--leading-normal);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* --- Container --- */
|
|
57
|
+
.container {
|
|
58
|
+
max-width: 1200px;
|
|
59
|
+
margin: 0 auto;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* --- Headings --- */
|
|
63
|
+
h1, h2, h3 {
|
|
64
|
+
font-family: var(--font-display);
|
|
65
|
+
}
|
|
66
|
+
h1 {
|
|
67
|
+
font-size: var(--text-4xl);
|
|
68
|
+
font-weight: var(--weight-bold);
|
|
69
|
+
letter-spacing: -0.02em;
|
|
70
|
+
line-height: var(--leading-tight);
|
|
71
|
+
}
|
|
72
|
+
h2 {
|
|
73
|
+
font-size: var(--text-2xl);
|
|
74
|
+
font-weight: var(--weight-semibold);
|
|
75
|
+
margin-bottom: var(--space-4);
|
|
76
|
+
padding-bottom: var(--space-2);
|
|
77
|
+
border-bottom: 1px solid var(--border-primary);
|
|
78
|
+
}
|
|
79
|
+
h3 {
|
|
80
|
+
font-size: var(--text-lg);
|
|
81
|
+
font-weight: var(--weight-semibold);
|
|
82
|
+
margin-bottom: var(--space-3);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* --- Header --- */
|
|
86
|
+
.showcase-header {
|
|
87
|
+
margin-bottom: var(--space-12);
|
|
88
|
+
}
|
|
89
|
+
.showcase-header h1 {
|
|
90
|
+
margin-bottom: var(--space-2);
|
|
91
|
+
}
|
|
92
|
+
.showcase-header .meta {
|
|
93
|
+
font-size: var(--text-sm);
|
|
94
|
+
color: var(--text-secondary);
|
|
95
|
+
font-family: var(--font-mono);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* --- Sections --- */
|
|
99
|
+
section {
|
|
100
|
+
margin-bottom: var(--space-16);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* --- Swatch Grid --- */
|
|
104
|
+
.swatch-grid {
|
|
105
|
+
display: flex;
|
|
106
|
+
flex-wrap: wrap;
|
|
107
|
+
gap: var(--space-3);
|
|
108
|
+
margin-bottom: var(--space-6);
|
|
109
|
+
}
|
|
110
|
+
.swatch-item {
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
align-items: center;
|
|
114
|
+
gap: var(--space-1);
|
|
115
|
+
}
|
|
116
|
+
.swatch {
|
|
117
|
+
width: 80px;
|
|
118
|
+
height: 80px;
|
|
119
|
+
border-radius: var(--radius-md);
|
|
120
|
+
border: 1px solid var(--border-primary);
|
|
121
|
+
}
|
|
122
|
+
.swatch-label {
|
|
123
|
+
font-family: var(--font-mono);
|
|
124
|
+
font-size: var(--text-xs);
|
|
125
|
+
color: var(--text-secondary);
|
|
126
|
+
text-align: center;
|
|
127
|
+
max-width: 90px;
|
|
128
|
+
word-break: break-all;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* --- Subsection --- */
|
|
132
|
+
.subsection {
|
|
133
|
+
margin-bottom: var(--space-8);
|
|
134
|
+
}
|
|
135
|
+
.subsection-title {
|
|
136
|
+
font-size: var(--text-base);
|
|
137
|
+
font-weight: var(--weight-semibold);
|
|
138
|
+
margin-bottom: var(--space-3);
|
|
139
|
+
color: var(--text-secondary);
|
|
140
|
+
text-transform: uppercase;
|
|
141
|
+
letter-spacing: 0.05em;
|
|
142
|
+
font-family: var(--font-mono);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* --- Surface Preview --- */
|
|
146
|
+
.surface-grid {
|
|
147
|
+
display: grid;
|
|
148
|
+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
149
|
+
gap: var(--space-4);
|
|
150
|
+
}
|
|
151
|
+
.surface-card {
|
|
152
|
+
padding: var(--space-6);
|
|
153
|
+
border-radius: var(--radius-md);
|
|
154
|
+
border: 1px solid var(--border-primary);
|
|
155
|
+
min-height: 100px;
|
|
156
|
+
display: flex;
|
|
157
|
+
flex-direction: column;
|
|
158
|
+
justify-content: flex-end;
|
|
159
|
+
}
|
|
160
|
+
.surface-card .swatch-label {
|
|
161
|
+
text-align: left;
|
|
162
|
+
max-width: none;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* --- Text Color Preview --- */
|
|
166
|
+
.text-samples {
|
|
167
|
+
display: flex;
|
|
168
|
+
flex-direction: column;
|
|
169
|
+
gap: var(--space-3);
|
|
170
|
+
}
|
|
171
|
+
.text-sample {
|
|
172
|
+
padding: var(--space-3) var(--space-4);
|
|
173
|
+
border-radius: var(--radius-sm);
|
|
174
|
+
display: flex;
|
|
175
|
+
justify-content: space-between;
|
|
176
|
+
align-items: center;
|
|
177
|
+
}
|
|
178
|
+
.text-sample-text {
|
|
179
|
+
font-size: var(--text-lg);
|
|
180
|
+
font-weight: var(--weight-medium);
|
|
181
|
+
}
|
|
182
|
+
.text-sample-token {
|
|
183
|
+
font-family: var(--font-mono);
|
|
184
|
+
font-size: var(--text-xs);
|
|
185
|
+
opacity: 0.7;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* --- Typography Preview --- */
|
|
189
|
+
.font-family-display {
|
|
190
|
+
display: grid;
|
|
191
|
+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
192
|
+
gap: var(--space-6);
|
|
193
|
+
margin-bottom: var(--space-8);
|
|
194
|
+
}
|
|
195
|
+
.font-family-card {
|
|
196
|
+
padding: var(--space-6);
|
|
197
|
+
background: var(--surface-secondary);
|
|
198
|
+
border-radius: var(--radius-md);
|
|
199
|
+
border: 1px solid var(--border-primary);
|
|
200
|
+
}
|
|
201
|
+
.font-family-card .role {
|
|
202
|
+
font-size: var(--text-xs);
|
|
203
|
+
font-family: var(--font-mono);
|
|
204
|
+
color: var(--text-secondary);
|
|
205
|
+
text-transform: uppercase;
|
|
206
|
+
letter-spacing: 0.1em;
|
|
207
|
+
margin-bottom: var(--space-2);
|
|
208
|
+
}
|
|
209
|
+
.font-family-card .sample {
|
|
210
|
+
font-size: var(--text-2xl);
|
|
211
|
+
line-height: var(--leading-tight);
|
|
212
|
+
margin-bottom: var(--space-2);
|
|
213
|
+
}
|
|
214
|
+
.font-family-card .font-name {
|
|
215
|
+
font-size: var(--text-xs);
|
|
216
|
+
font-family: var(--font-mono);
|
|
217
|
+
color: var(--text-tertiary);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.type-scale {
|
|
221
|
+
display: flex;
|
|
222
|
+
flex-direction: column;
|
|
223
|
+
gap: var(--space-4);
|
|
224
|
+
margin-bottom: var(--space-8);
|
|
225
|
+
}
|
|
226
|
+
.type-scale-item {
|
|
227
|
+
display: flex;
|
|
228
|
+
align-items: baseline;
|
|
229
|
+
gap: var(--space-6);
|
|
230
|
+
padding: var(--space-2) 0;
|
|
231
|
+
border-bottom: 1px solid var(--border-primary);
|
|
232
|
+
}
|
|
233
|
+
.type-scale-item .token-name {
|
|
234
|
+
font-family: var(--font-mono);
|
|
235
|
+
font-size: var(--text-xs);
|
|
236
|
+
color: var(--text-secondary);
|
|
237
|
+
min-width: 100px;
|
|
238
|
+
flex-shrink: 0;
|
|
239
|
+
}
|
|
240
|
+
.type-scale-item .sample-text {
|
|
241
|
+
white-space: nowrap;
|
|
242
|
+
overflow: hidden;
|
|
243
|
+
text-overflow: ellipsis;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.weight-samples {
|
|
247
|
+
display: flex;
|
|
248
|
+
flex-wrap: wrap;
|
|
249
|
+
gap: var(--space-6);
|
|
250
|
+
}
|
|
251
|
+
.weight-sample {
|
|
252
|
+
display: flex;
|
|
253
|
+
flex-direction: column;
|
|
254
|
+
gap: var(--space-1);
|
|
255
|
+
}
|
|
256
|
+
.weight-sample .sample {
|
|
257
|
+
font-size: var(--text-xl);
|
|
258
|
+
}
|
|
259
|
+
.weight-sample .label {
|
|
260
|
+
font-family: var(--font-mono);
|
|
261
|
+
font-size: var(--text-xs);
|
|
262
|
+
color: var(--text-secondary);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
/* --- Spacing Preview --- */
|
|
266
|
+
.spacing-scale {
|
|
267
|
+
display: flex;
|
|
268
|
+
flex-direction: column;
|
|
269
|
+
gap: var(--space-3);
|
|
270
|
+
}
|
|
271
|
+
.spacing-item {
|
|
272
|
+
display: flex;
|
|
273
|
+
align-items: center;
|
|
274
|
+
gap: var(--space-4);
|
|
275
|
+
}
|
|
276
|
+
.spacing-item .token-name {
|
|
277
|
+
font-family: var(--font-mono);
|
|
278
|
+
font-size: var(--text-xs);
|
|
279
|
+
color: var(--text-secondary);
|
|
280
|
+
min-width: 80px;
|
|
281
|
+
text-align: right;
|
|
282
|
+
flex-shrink: 0;
|
|
283
|
+
}
|
|
284
|
+
.spacing-bar {
|
|
285
|
+
height: 24px;
|
|
286
|
+
background: var(--color-primary-500, var(--text-link, #6366f1));
|
|
287
|
+
border-radius: var(--radius-sm);
|
|
288
|
+
opacity: 0.7;
|
|
289
|
+
}
|
|
290
|
+
.spacing-value {
|
|
291
|
+
font-family: var(--font-mono);
|
|
292
|
+
font-size: var(--text-xs);
|
|
293
|
+
color: var(--text-tertiary);
|
|
294
|
+
min-width: 60px;
|
|
295
|
+
flex-shrink: 0;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/* --- Radius Preview --- */
|
|
299
|
+
.radius-grid {
|
|
300
|
+
display: flex;
|
|
301
|
+
flex-wrap: wrap;
|
|
302
|
+
gap: var(--space-6);
|
|
303
|
+
}
|
|
304
|
+
.radius-item {
|
|
305
|
+
display: flex;
|
|
306
|
+
flex-direction: column;
|
|
307
|
+
align-items: center;
|
|
308
|
+
gap: var(--space-2);
|
|
309
|
+
}
|
|
310
|
+
.radius-box {
|
|
311
|
+
width: 100px;
|
|
312
|
+
height: 100px;
|
|
313
|
+
background: var(--surface-secondary);
|
|
314
|
+
border: 2px solid var(--color-primary-500, var(--text-link, #6366f1));
|
|
315
|
+
}
|
|
316
|
+
.radius-item .swatch-label {
|
|
317
|
+
max-width: 120px;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* --- Shadow Preview --- */
|
|
321
|
+
.shadow-grid {
|
|
322
|
+
display: flex;
|
|
323
|
+
flex-wrap: wrap;
|
|
324
|
+
gap: var(--space-8);
|
|
325
|
+
}
|
|
326
|
+
.shadow-item {
|
|
327
|
+
display: flex;
|
|
328
|
+
flex-direction: column;
|
|
329
|
+
align-items: center;
|
|
330
|
+
gap: var(--space-3);
|
|
331
|
+
}
|
|
332
|
+
.shadow-box {
|
|
333
|
+
width: 140px;
|
|
334
|
+
height: 100px;
|
|
335
|
+
background: var(--surface-primary);
|
|
336
|
+
border-radius: var(--radius-md);
|
|
337
|
+
}
|
|
338
|
+
.shadow-item .swatch-label {
|
|
339
|
+
max-width: 140px;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
/* --- Component Previews --- */
|
|
343
|
+
.component-grid {
|
|
344
|
+
display: grid;
|
|
345
|
+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
346
|
+
gap: var(--space-6);
|
|
347
|
+
}
|
|
348
|
+
.component-card {
|
|
349
|
+
padding: var(--space-6);
|
|
350
|
+
background: var(--surface-secondary);
|
|
351
|
+
border-radius: var(--radius-lg);
|
|
352
|
+
border: 1px solid var(--border-primary);
|
|
353
|
+
}
|
|
354
|
+
.component-card h3 {
|
|
355
|
+
font-size: var(--text-sm);
|
|
356
|
+
font-family: var(--font-mono);
|
|
357
|
+
color: var(--text-secondary);
|
|
358
|
+
text-transform: uppercase;
|
|
359
|
+
letter-spacing: 0.1em;
|
|
360
|
+
margin-bottom: var(--space-4);
|
|
361
|
+
}
|
|
362
|
+
.component-card .preview {
|
|
363
|
+
display: flex;
|
|
364
|
+
flex-wrap: wrap;
|
|
365
|
+
gap: var(--space-3);
|
|
366
|
+
align-items: center;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
/* Component: Button */
|
|
370
|
+
.btn {
|
|
371
|
+
display: inline-flex;
|
|
372
|
+
align-items: center;
|
|
373
|
+
justify-content: center;
|
|
374
|
+
padding: var(--space-3) var(--space-5);
|
|
375
|
+
border-radius: var(--radius-md);
|
|
376
|
+
font-family: var(--font-body);
|
|
377
|
+
font-size: var(--text-sm);
|
|
378
|
+
font-weight: var(--weight-semibold);
|
|
379
|
+
cursor: pointer;
|
|
380
|
+
border: none;
|
|
381
|
+
line-height: var(--leading-tight);
|
|
382
|
+
}
|
|
383
|
+
.btn-primary {
|
|
384
|
+
background: var(--color-primary-500);
|
|
385
|
+
color: var(--text-inverse);
|
|
386
|
+
}
|
|
387
|
+
.btn-secondary {
|
|
388
|
+
background: var(--surface-tertiary);
|
|
389
|
+
color: var(--text-primary);
|
|
390
|
+
border: 1px solid var(--border-primary);
|
|
391
|
+
}
|
|
392
|
+
.btn-ghost {
|
|
393
|
+
background: transparent;
|
|
394
|
+
color: var(--text-link);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
/* Component: Input */
|
|
398
|
+
.input-preview {
|
|
399
|
+
width: 100%;
|
|
400
|
+
padding: var(--space-3) var(--space-4);
|
|
401
|
+
border-radius: var(--radius-md);
|
|
402
|
+
border: 1px solid var(--border-primary);
|
|
403
|
+
background: var(--surface-primary);
|
|
404
|
+
font-family: var(--font-body);
|
|
405
|
+
font-size: var(--text-sm);
|
|
406
|
+
color: var(--text-primary);
|
|
407
|
+
line-height: var(--leading-normal);
|
|
408
|
+
}
|
|
409
|
+
.input-preview::placeholder {
|
|
410
|
+
color: var(--text-tertiary);
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
/* Component: Card */
|
|
414
|
+
.card-preview {
|
|
415
|
+
background: var(--surface-primary);
|
|
416
|
+
border-radius: var(--radius-lg);
|
|
417
|
+
border: 1px solid var(--border-primary);
|
|
418
|
+
box-shadow: var(--shadow-sm);
|
|
419
|
+
overflow: hidden;
|
|
420
|
+
}
|
|
421
|
+
.card-preview-body {
|
|
422
|
+
padding: var(--space-6);
|
|
423
|
+
}
|
|
424
|
+
.card-preview-title {
|
|
425
|
+
font-family: var(--font-display);
|
|
426
|
+
font-size: var(--text-lg);
|
|
427
|
+
font-weight: var(--weight-semibold);
|
|
428
|
+
margin-bottom: var(--space-2);
|
|
429
|
+
}
|
|
430
|
+
.card-preview-text {
|
|
431
|
+
font-size: var(--text-sm);
|
|
432
|
+
color: var(--text-secondary);
|
|
433
|
+
line-height: var(--leading-normal);
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
/* Component: Badge */
|
|
437
|
+
.badge {
|
|
438
|
+
display: inline-flex;
|
|
439
|
+
align-items: center;
|
|
440
|
+
padding: var(--space-1) var(--space-3);
|
|
441
|
+
border-radius: var(--radius-full);
|
|
442
|
+
font-family: var(--font-body);
|
|
443
|
+
font-size: var(--text-xs);
|
|
444
|
+
font-weight: var(--weight-medium);
|
|
445
|
+
line-height: var(--leading-tight);
|
|
446
|
+
}
|
|
447
|
+
.badge-success {
|
|
448
|
+
background: var(--color-success);
|
|
449
|
+
color: var(--text-inverse);
|
|
450
|
+
}
|
|
451
|
+
.badge-error {
|
|
452
|
+
background: var(--color-error);
|
|
453
|
+
color: var(--text-inverse);
|
|
454
|
+
}
|
|
455
|
+
.badge-warning {
|
|
456
|
+
background: var(--color-warning);
|
|
457
|
+
color: var(--text-primary);
|
|
458
|
+
}
|
|
459
|
+
.badge-info {
|
|
460
|
+
background: var(--color-info);
|
|
461
|
+
color: var(--text-inverse);
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
/* --- Vertical-Specific Section --- */
|
|
465
|
+
.vertical-placeholder {
|
|
466
|
+
padding: var(--space-8);
|
|
467
|
+
background: var(--surface-secondary);
|
|
468
|
+
border-radius: var(--radius-md);
|
|
469
|
+
border: 2px dashed var(--border-primary);
|
|
470
|
+
text-align: center;
|
|
471
|
+
color: var(--text-tertiary);
|
|
472
|
+
font-family: var(--font-mono);
|
|
473
|
+
font-size: var(--text-sm);
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
/* --- Responsive --- */
|
|
477
|
+
@media (max-width: 768px) {
|
|
478
|
+
body {
|
|
479
|
+
padding: var(--space-4);
|
|
480
|
+
}
|
|
481
|
+
h1 {
|
|
482
|
+
font-size: var(--text-2xl);
|
|
483
|
+
}
|
|
484
|
+
h2 {
|
|
485
|
+
font-size: var(--text-xl);
|
|
486
|
+
}
|
|
487
|
+
.swatch {
|
|
488
|
+
width: 60px;
|
|
489
|
+
height: 60px;
|
|
490
|
+
}
|
|
491
|
+
.swatch-label {
|
|
492
|
+
max-width: 70px;
|
|
493
|
+
}
|
|
494
|
+
.font-family-display {
|
|
495
|
+
grid-template-columns: 1fr;
|
|
496
|
+
}
|
|
497
|
+
.type-scale-item {
|
|
498
|
+
flex-direction: column;
|
|
499
|
+
gap: var(--space-1);
|
|
500
|
+
}
|
|
501
|
+
.type-scale-item .token-name {
|
|
502
|
+
min-width: auto;
|
|
503
|
+
}
|
|
504
|
+
.spacing-item .token-name {
|
|
505
|
+
min-width: 60px;
|
|
506
|
+
}
|
|
507
|
+
.surface-grid {
|
|
508
|
+
grid-template-columns: 1fr;
|
|
509
|
+
}
|
|
510
|
+
.component-grid {
|
|
511
|
+
grid-template-columns: 1fr;
|
|
512
|
+
}
|
|
513
|
+
.shadow-grid {
|
|
514
|
+
justify-content: center;
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
</style>
|
|
518
|
+
</head>
|
|
519
|
+
<body>
|
|
520
|
+
<div class="container">
|
|
521
|
+
|
|
522
|
+
<!-- ════════════════════════════════════
|
|
523
|
+
HEADER
|
|
524
|
+
════════════════════════════════════ -->
|
|
525
|
+
<header class="showcase-header">
|
|
526
|
+
<h1>{PRODUCT_NAME} Design Tokens</h1>
|
|
527
|
+
<p class="meta">Vertical: {VERTICAL} | Generated: {ISO_DATE}</p>
|
|
528
|
+
</header>
|
|
529
|
+
|
|
530
|
+
<!-- ════════════════════════════════════
|
|
531
|
+
SECTION: COLORS
|
|
532
|
+
════════════════════════════════════ -->
|
|
533
|
+
<section id="colors">
|
|
534
|
+
<h2>Color Palette</h2>
|
|
535
|
+
|
|
536
|
+
<!-- Primary Scale -->
|
|
537
|
+
<div class="subsection">
|
|
538
|
+
<p class="subsection-title">Primary Scale</p>
|
|
539
|
+
<div class="swatch-grid">
|
|
540
|
+
<!-- Agent fills in primary color swatches 50-950 -->
|
|
541
|
+
<div class="swatch-item">
|
|
542
|
+
<div class="swatch" style="background-color: var(--color-primary-50);"></div>
|
|
543
|
+
<span class="swatch-label">primary-50<br>{HEX}</span>
|
|
544
|
+
</div>
|
|
545
|
+
<div class="swatch-item">
|
|
546
|
+
<div class="swatch" style="background-color: var(--color-primary-100);"></div>
|
|
547
|
+
<span class="swatch-label">primary-100<br>{HEX}</span>
|
|
548
|
+
</div>
|
|
549
|
+
<div class="swatch-item">
|
|
550
|
+
<div class="swatch" style="background-color: var(--color-primary-200);"></div>
|
|
551
|
+
<span class="swatch-label">primary-200<br>{HEX}</span>
|
|
552
|
+
</div>
|
|
553
|
+
<div class="swatch-item">
|
|
554
|
+
<div class="swatch" style="background-color: var(--color-primary-300);"></div>
|
|
555
|
+
<span class="swatch-label">primary-300<br>{HEX}</span>
|
|
556
|
+
</div>
|
|
557
|
+
<div class="swatch-item">
|
|
558
|
+
<div class="swatch" style="background-color: var(--color-primary-400);"></div>
|
|
559
|
+
<span class="swatch-label">primary-400<br>{HEX}</span>
|
|
560
|
+
</div>
|
|
561
|
+
<div class="swatch-item">
|
|
562
|
+
<div class="swatch" style="background-color: var(--color-primary-500);"></div>
|
|
563
|
+
<span class="swatch-label">primary-500<br>{HEX}</span>
|
|
564
|
+
</div>
|
|
565
|
+
<div class="swatch-item">
|
|
566
|
+
<div class="swatch" style="background-color: var(--color-primary-600);"></div>
|
|
567
|
+
<span class="swatch-label">primary-600<br>{HEX}</span>
|
|
568
|
+
</div>
|
|
569
|
+
<div class="swatch-item">
|
|
570
|
+
<div class="swatch" style="background-color: var(--color-primary-700);"></div>
|
|
571
|
+
<span class="swatch-label">primary-700<br>{HEX}</span>
|
|
572
|
+
</div>
|
|
573
|
+
<div class="swatch-item">
|
|
574
|
+
<div class="swatch" style="background-color: var(--color-primary-800);"></div>
|
|
575
|
+
<span class="swatch-label">primary-800<br>{HEX}</span>
|
|
576
|
+
</div>
|
|
577
|
+
<div class="swatch-item">
|
|
578
|
+
<div class="swatch" style="background-color: var(--color-primary-900);"></div>
|
|
579
|
+
<span class="swatch-label">primary-900<br>{HEX}</span>
|
|
580
|
+
</div>
|
|
581
|
+
<div class="swatch-item">
|
|
582
|
+
<div class="swatch" style="background-color: var(--color-primary-950);"></div>
|
|
583
|
+
<span class="swatch-label">primary-950<br>{HEX}</span>
|
|
584
|
+
</div>
|
|
585
|
+
</div>
|
|
586
|
+
</div>
|
|
587
|
+
|
|
588
|
+
<!-- Semantic Colors -->
|
|
589
|
+
<div class="subsection">
|
|
590
|
+
<p class="subsection-title">Semantic Colors</p>
|
|
591
|
+
<div class="swatch-grid">
|
|
592
|
+
<div class="swatch-item">
|
|
593
|
+
<div class="swatch" style="background-color: var(--color-success);"></div>
|
|
594
|
+
<span class="swatch-label">success<br>{HEX}</span>
|
|
595
|
+
</div>
|
|
596
|
+
<div class="swatch-item">
|
|
597
|
+
<div class="swatch" style="background-color: var(--color-error);"></div>
|
|
598
|
+
<span class="swatch-label">error<br>{HEX}</span>
|
|
599
|
+
</div>
|
|
600
|
+
<div class="swatch-item">
|
|
601
|
+
<div class="swatch" style="background-color: var(--color-warning);"></div>
|
|
602
|
+
<span class="swatch-label">warning<br>{HEX}</span>
|
|
603
|
+
</div>
|
|
604
|
+
<div class="swatch-item">
|
|
605
|
+
<div class="swatch" style="background-color: var(--color-info);"></div>
|
|
606
|
+
<span class="swatch-label">info<br>{HEX}</span>
|
|
607
|
+
</div>
|
|
608
|
+
</div>
|
|
609
|
+
</div>
|
|
610
|
+
|
|
611
|
+
<!-- Surface Colors -->
|
|
612
|
+
<div class="subsection">
|
|
613
|
+
<p class="subsection-title">Surface Colors</p>
|
|
614
|
+
<div class="surface-grid">
|
|
615
|
+
<div class="surface-card" style="background-color: var(--surface-primary);">
|
|
616
|
+
<span class="swatch-label">surface-primary<br>{HEX}</span>
|
|
617
|
+
</div>
|
|
618
|
+
<div class="surface-card" style="background-color: var(--surface-secondary);">
|
|
619
|
+
<span class="swatch-label">surface-secondary<br>{HEX}</span>
|
|
620
|
+
</div>
|
|
621
|
+
<div class="surface-card" style="background-color: var(--surface-tertiary);">
|
|
622
|
+
<span class="swatch-label">surface-tertiary<br>{HEX}</span>
|
|
623
|
+
</div>
|
|
624
|
+
<div class="surface-card" style="background-color: var(--surface-elevated);">
|
|
625
|
+
<span class="swatch-label">surface-elevated<br>{HEX}</span>
|
|
626
|
+
</div>
|
|
627
|
+
</div>
|
|
628
|
+
</div>
|
|
629
|
+
|
|
630
|
+
<!-- Text Colors -->
|
|
631
|
+
<div class="subsection">
|
|
632
|
+
<p class="subsection-title">Text Colors</p>
|
|
633
|
+
<div class="text-samples">
|
|
634
|
+
<div class="text-sample" style="background: var(--surface-primary);">
|
|
635
|
+
<span class="text-sample-text" style="color: var(--text-primary);">Primary text on primary surface</span>
|
|
636
|
+
<span class="text-sample-token">--text-primary {HEX}</span>
|
|
637
|
+
</div>
|
|
638
|
+
<div class="text-sample" style="background: var(--surface-primary);">
|
|
639
|
+
<span class="text-sample-text" style="color: var(--text-secondary);">Secondary text on primary surface</span>
|
|
640
|
+
<span class="text-sample-token">--text-secondary {HEX}</span>
|
|
641
|
+
</div>
|
|
642
|
+
<div class="text-sample" style="background: var(--surface-primary);">
|
|
643
|
+
<span class="text-sample-text" style="color: var(--text-tertiary);">Tertiary text on primary surface</span>
|
|
644
|
+
<span class="text-sample-token">--text-tertiary {HEX}</span>
|
|
645
|
+
</div>
|
|
646
|
+
<div class="text-sample" style="background: var(--color-primary-500);">
|
|
647
|
+
<span class="text-sample-text" style="color: var(--text-inverse);">Inverse text on primary color</span>
|
|
648
|
+
<span class="text-sample-token" style="color: var(--text-inverse);">--text-inverse {HEX}</span>
|
|
649
|
+
</div>
|
|
650
|
+
<div class="text-sample" style="background: var(--surface-primary);">
|
|
651
|
+
<span class="text-sample-text" style="color: var(--text-link);">Link text on primary surface</span>
|
|
652
|
+
<span class="text-sample-token">--text-link {HEX}</span>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
</div>
|
|
656
|
+
|
|
657
|
+
<!-- Border Colors -->
|
|
658
|
+
<div class="subsection">
|
|
659
|
+
<p class="subsection-title">Border Colors</p>
|
|
660
|
+
<div class="swatch-grid">
|
|
661
|
+
<div class="swatch-item">
|
|
662
|
+
<div class="swatch" style="background-color: var(--surface-primary); border: 3px solid var(--border-primary);"></div>
|
|
663
|
+
<span class="swatch-label">border-primary<br>{HEX}</span>
|
|
664
|
+
</div>
|
|
665
|
+
<div class="swatch-item">
|
|
666
|
+
<div class="swatch" style="background-color: var(--surface-primary); border: 3px solid var(--border-focus);"></div>
|
|
667
|
+
<span class="swatch-label">border-focus<br>{HEX}</span>
|
|
668
|
+
</div>
|
|
669
|
+
</div>
|
|
670
|
+
</div>
|
|
671
|
+
</section>
|
|
672
|
+
|
|
673
|
+
<!-- ════════════════════════════════════
|
|
674
|
+
SECTION: TYPOGRAPHY
|
|
675
|
+
════════════════════════════════════ -->
|
|
676
|
+
<section id="typography">
|
|
677
|
+
<h2>Typography Scale</h2>
|
|
678
|
+
|
|
679
|
+
<!-- Font Families -->
|
|
680
|
+
<div class="subsection">
|
|
681
|
+
<p class="subsection-title">Font Families</p>
|
|
682
|
+
<div class="font-family-display">
|
|
683
|
+
<div class="font-family-card">
|
|
684
|
+
<p class="role">Display</p>
|
|
685
|
+
<p class="sample" style="font-family: var(--font-display);">The quick brown fox</p>
|
|
686
|
+
<p class="font-name">--font-display: {FONT_DISPLAY}</p>
|
|
687
|
+
</div>
|
|
688
|
+
<div class="font-family-card">
|
|
689
|
+
<p class="role">Body</p>
|
|
690
|
+
<p class="sample" style="font-family: var(--font-body);">The quick brown fox</p>
|
|
691
|
+
<p class="font-name">--font-body: {FONT_BODY}</p>
|
|
692
|
+
</div>
|
|
693
|
+
<div class="font-family-card">
|
|
694
|
+
<p class="role">Mono</p>
|
|
695
|
+
<p class="sample" style="font-family: var(--font-mono);">The quick brown fox</p>
|
|
696
|
+
<p class="font-name">--font-mono: {FONT_MONO}</p>
|
|
697
|
+
</div>
|
|
698
|
+
</div>
|
|
699
|
+
</div>
|
|
700
|
+
|
|
701
|
+
<!-- Type Scale -->
|
|
702
|
+
<div class="subsection">
|
|
703
|
+
<p class="subsection-title">Type Scale</p>
|
|
704
|
+
<div class="type-scale">
|
|
705
|
+
<div class="type-scale-item">
|
|
706
|
+
<span class="token-name">--text-xs</span>
|
|
707
|
+
<span class="sample-text" style="font-size: var(--text-xs);">The quick brown fox jumps over the lazy dog (0.75rem)</span>
|
|
708
|
+
</div>
|
|
709
|
+
<div class="type-scale-item">
|
|
710
|
+
<span class="token-name">--text-sm</span>
|
|
711
|
+
<span class="sample-text" style="font-size: var(--text-sm);">The quick brown fox jumps over the lazy dog (0.875rem)</span>
|
|
712
|
+
</div>
|
|
713
|
+
<div class="type-scale-item">
|
|
714
|
+
<span class="token-name">--text-base</span>
|
|
715
|
+
<span class="sample-text" style="font-size: var(--text-base);">The quick brown fox jumps over the lazy dog (1rem)</span>
|
|
716
|
+
</div>
|
|
717
|
+
<div class="type-scale-item">
|
|
718
|
+
<span class="token-name">--text-lg</span>
|
|
719
|
+
<span class="sample-text" style="font-size: var(--text-lg);">The quick brown fox jumps over the lazy dog (1.125rem)</span>
|
|
720
|
+
</div>
|
|
721
|
+
<div class="type-scale-item">
|
|
722
|
+
<span class="token-name">--text-xl</span>
|
|
723
|
+
<span class="sample-text" style="font-size: var(--text-xl);">The quick brown fox jumps over the lazy dog (1.25rem)</span>
|
|
724
|
+
</div>
|
|
725
|
+
<div class="type-scale-item">
|
|
726
|
+
<span class="token-name">--text-2xl</span>
|
|
727
|
+
<span class="sample-text" style="font-size: var(--text-2xl);">The quick brown fox jumps over the lazy dog (1.5rem)</span>
|
|
728
|
+
</div>
|
|
729
|
+
<div class="type-scale-item">
|
|
730
|
+
<span class="token-name">--text-3xl</span>
|
|
731
|
+
<span class="sample-text" style="font-size: var(--text-3xl);">The quick brown fox jumps (1.875rem)</span>
|
|
732
|
+
</div>
|
|
733
|
+
<div class="type-scale-item">
|
|
734
|
+
<span class="token-name">--text-4xl</span>
|
|
735
|
+
<span class="sample-text" style="font-size: var(--text-4xl);">The quick brown fox (2.25rem)</span>
|
|
736
|
+
</div>
|
|
737
|
+
</div>
|
|
738
|
+
</div>
|
|
739
|
+
|
|
740
|
+
<!-- Weight Samples -->
|
|
741
|
+
<div class="subsection">
|
|
742
|
+
<p class="subsection-title">Font Weights</p>
|
|
743
|
+
<div class="weight-samples">
|
|
744
|
+
<div class="weight-sample">
|
|
745
|
+
<span class="sample" style="font-weight: var(--weight-normal);">Normal text</span>
|
|
746
|
+
<span class="label">--weight-normal (400)</span>
|
|
747
|
+
</div>
|
|
748
|
+
<div class="weight-sample">
|
|
749
|
+
<span class="sample" style="font-weight: var(--weight-medium);">Medium text</span>
|
|
750
|
+
<span class="label">--weight-medium (500)</span>
|
|
751
|
+
</div>
|
|
752
|
+
<div class="weight-sample">
|
|
753
|
+
<span class="sample" style="font-weight: var(--weight-semibold);">Semibold text</span>
|
|
754
|
+
<span class="label">--weight-semibold (600)</span>
|
|
755
|
+
</div>
|
|
756
|
+
<div class="weight-sample">
|
|
757
|
+
<span class="sample" style="font-weight: var(--weight-bold);">Bold text</span>
|
|
758
|
+
<span class="label">--weight-bold (700)</span>
|
|
759
|
+
</div>
|
|
760
|
+
</div>
|
|
761
|
+
</div>
|
|
762
|
+
</section>
|
|
763
|
+
|
|
764
|
+
<!-- ════════════════════════════════════
|
|
765
|
+
SECTION: SPACING
|
|
766
|
+
════════════════════════════════════ -->
|
|
767
|
+
<section id="spacing">
|
|
768
|
+
<h2>Spacing Scale</h2>
|
|
769
|
+
|
|
770
|
+
<div class="spacing-scale">
|
|
771
|
+
<div class="spacing-item">
|
|
772
|
+
<span class="token-name">--space-1</span>
|
|
773
|
+
<div class="spacing-bar" style="width: var(--space-1);"></div>
|
|
774
|
+
<span class="spacing-value">0.25rem (4px)</span>
|
|
775
|
+
</div>
|
|
776
|
+
<div class="spacing-item">
|
|
777
|
+
<span class="token-name">--space-2</span>
|
|
778
|
+
<div class="spacing-bar" style="width: var(--space-2);"></div>
|
|
779
|
+
<span class="spacing-value">0.5rem (8px)</span>
|
|
780
|
+
</div>
|
|
781
|
+
<div class="spacing-item">
|
|
782
|
+
<span class="token-name">--space-3</span>
|
|
783
|
+
<div class="spacing-bar" style="width: var(--space-3);"></div>
|
|
784
|
+
<span class="spacing-value">0.75rem (12px)</span>
|
|
785
|
+
</div>
|
|
786
|
+
<div class="spacing-item">
|
|
787
|
+
<span class="token-name">--space-4</span>
|
|
788
|
+
<div class="spacing-bar" style="width: var(--space-4);"></div>
|
|
789
|
+
<span class="spacing-value">1rem (16px)</span>
|
|
790
|
+
</div>
|
|
791
|
+
<div class="spacing-item">
|
|
792
|
+
<span class="token-name">--space-5</span>
|
|
793
|
+
<div class="spacing-bar" style="width: var(--space-5);"></div>
|
|
794
|
+
<span class="spacing-value">1.25rem (20px)</span>
|
|
795
|
+
</div>
|
|
796
|
+
<div class="spacing-item">
|
|
797
|
+
<span class="token-name">--space-6</span>
|
|
798
|
+
<div class="spacing-bar" style="width: var(--space-6);"></div>
|
|
799
|
+
<span class="spacing-value">1.5rem (24px)</span>
|
|
800
|
+
</div>
|
|
801
|
+
<div class="spacing-item">
|
|
802
|
+
<span class="token-name">--space-8</span>
|
|
803
|
+
<div class="spacing-bar" style="width: var(--space-8);"></div>
|
|
804
|
+
<span class="spacing-value">2rem (32px)</span>
|
|
805
|
+
</div>
|
|
806
|
+
<div class="spacing-item">
|
|
807
|
+
<span class="token-name">--space-10</span>
|
|
808
|
+
<div class="spacing-bar" style="width: var(--space-10);"></div>
|
|
809
|
+
<span class="spacing-value">2.5rem (40px)</span>
|
|
810
|
+
</div>
|
|
811
|
+
<div class="spacing-item">
|
|
812
|
+
<span class="token-name">--space-12</span>
|
|
813
|
+
<div class="spacing-bar" style="width: var(--space-12);"></div>
|
|
814
|
+
<span class="spacing-value">3rem (48px)</span>
|
|
815
|
+
</div>
|
|
816
|
+
<div class="spacing-item">
|
|
817
|
+
<span class="token-name">--space-16</span>
|
|
818
|
+
<div class="spacing-bar" style="width: var(--space-16);"></div>
|
|
819
|
+
<span class="spacing-value">4rem (64px)</span>
|
|
820
|
+
</div>
|
|
821
|
+
</div>
|
|
822
|
+
</section>
|
|
823
|
+
|
|
824
|
+
<!-- ════════════════════════════════════
|
|
825
|
+
SECTION: BORDER RADIUS
|
|
826
|
+
════════════════════════════════════ -->
|
|
827
|
+
<section id="radii">
|
|
828
|
+
<h2>Border Radius</h2>
|
|
829
|
+
|
|
830
|
+
<div class="radius-grid">
|
|
831
|
+
<div class="radius-item">
|
|
832
|
+
<div class="radius-box" style="border-radius: var(--radius-sm);"></div>
|
|
833
|
+
<span class="swatch-label">--radius-sm<br>{VALUE}</span>
|
|
834
|
+
</div>
|
|
835
|
+
<div class="radius-item">
|
|
836
|
+
<div class="radius-box" style="border-radius: var(--radius-md);"></div>
|
|
837
|
+
<span class="swatch-label">--radius-md<br>{VALUE}</span>
|
|
838
|
+
</div>
|
|
839
|
+
<div class="radius-item">
|
|
840
|
+
<div class="radius-box" style="border-radius: var(--radius-lg);"></div>
|
|
841
|
+
<span class="swatch-label">--radius-lg<br>{VALUE}</span>
|
|
842
|
+
</div>
|
|
843
|
+
<div class="radius-item">
|
|
844
|
+
<div class="radius-box" style="border-radius: var(--radius-xl);"></div>
|
|
845
|
+
<span class="swatch-label">--radius-xl<br>{VALUE}</span>
|
|
846
|
+
</div>
|
|
847
|
+
<div class="radius-item">
|
|
848
|
+
<div class="radius-box" style="border-radius: var(--radius-full);"></div>
|
|
849
|
+
<span class="swatch-label">--radius-full<br>9999px</span>
|
|
850
|
+
</div>
|
|
851
|
+
</div>
|
|
852
|
+
</section>
|
|
853
|
+
|
|
854
|
+
<!-- ════════════════════════════════════
|
|
855
|
+
SECTION: SHADOWS
|
|
856
|
+
════════════════════════════════════ -->
|
|
857
|
+
<section id="shadows">
|
|
858
|
+
<h2>Shadows</h2>
|
|
859
|
+
|
|
860
|
+
<div class="shadow-grid">
|
|
861
|
+
<div class="shadow-item">
|
|
862
|
+
<div class="shadow-box" style="box-shadow: var(--shadow-sm);"></div>
|
|
863
|
+
<span class="swatch-label">--shadow-sm</span>
|
|
864
|
+
</div>
|
|
865
|
+
<div class="shadow-item">
|
|
866
|
+
<div class="shadow-box" style="box-shadow: var(--shadow-md);"></div>
|
|
867
|
+
<span class="swatch-label">--shadow-md</span>
|
|
868
|
+
</div>
|
|
869
|
+
<div class="shadow-item">
|
|
870
|
+
<div class="shadow-box" style="box-shadow: var(--shadow-lg);"></div>
|
|
871
|
+
<span class="swatch-label">--shadow-lg</span>
|
|
872
|
+
</div>
|
|
873
|
+
</div>
|
|
874
|
+
</section>
|
|
875
|
+
|
|
876
|
+
<!-- ════════════════════════════════════
|
|
877
|
+
SECTION: COMPONENT PREVIEWS
|
|
878
|
+
════════════════════════════════════ -->
|
|
879
|
+
<section id="components">
|
|
880
|
+
<h2>Component Previews</h2>
|
|
881
|
+
|
|
882
|
+
<div class="component-grid">
|
|
883
|
+
<!-- Button Component -->
|
|
884
|
+
<div class="component-card">
|
|
885
|
+
<h3>Button</h3>
|
|
886
|
+
<div class="preview">
|
|
887
|
+
<!-- Agent fills in styled button variants -->
|
|
888
|
+
<button class="btn btn-primary" type="button">Primary</button>
|
|
889
|
+
<button class="btn btn-secondary" type="button">Secondary</button>
|
|
890
|
+
<button class="btn btn-ghost" type="button">Ghost</button>
|
|
891
|
+
</div>
|
|
892
|
+
</div>
|
|
893
|
+
|
|
894
|
+
<!-- Input Component -->
|
|
895
|
+
<div class="component-card">
|
|
896
|
+
<h3>Input</h3>
|
|
897
|
+
<div class="preview" style="flex-direction: column; width: 100%;">
|
|
898
|
+
<!-- Agent fills in styled input variants -->
|
|
899
|
+
<input class="input-preview" type="text" placeholder="Enter text..." readonly>
|
|
900
|
+
</div>
|
|
901
|
+
</div>
|
|
902
|
+
|
|
903
|
+
<!-- Card Component -->
|
|
904
|
+
<div class="component-card">
|
|
905
|
+
<h3>Card</h3>
|
|
906
|
+
<div class="preview" style="flex-direction: column; width: 100%;">
|
|
907
|
+
<!-- Agent fills in styled card preview -->
|
|
908
|
+
<div class="card-preview">
|
|
909
|
+
<div class="card-preview-body">
|
|
910
|
+
<p class="card-preview-title">Card Title</p>
|
|
911
|
+
<p class="card-preview-text">This is a sample card component showing surface, border, shadow, and typography tokens in context.</p>
|
|
912
|
+
</div>
|
|
913
|
+
</div>
|
|
914
|
+
</div>
|
|
915
|
+
</div>
|
|
916
|
+
|
|
917
|
+
<!-- Badge Component -->
|
|
918
|
+
<div class="component-card">
|
|
919
|
+
<h3>Badge</h3>
|
|
920
|
+
<div class="preview">
|
|
921
|
+
<!-- Agent fills in styled badge variants -->
|
|
922
|
+
<span class="badge badge-success">Success</span>
|
|
923
|
+
<span class="badge badge-error">Error</span>
|
|
924
|
+
<span class="badge badge-warning">Warning</span>
|
|
925
|
+
<span class="badge badge-info">Info</span>
|
|
926
|
+
</div>
|
|
927
|
+
</div>
|
|
928
|
+
</div>
|
|
929
|
+
</section>
|
|
930
|
+
|
|
931
|
+
<!-- ════════════════════════════════════
|
|
932
|
+
SECTION: VERTICAL-SPECIFIC
|
|
933
|
+
════════════════════════════════════ -->
|
|
934
|
+
<section id="vertical-specific">
|
|
935
|
+
<h2>Vertical-Specific Tokens</h2>
|
|
936
|
+
|
|
937
|
+
<!-- Agent fills in tokens unique to the detected vertical -->
|
|
938
|
+
<div class="vertical-placeholder">
|
|
939
|
+
Vertical-specific tokens will be displayed here based on the detected product vertical.
|
|
940
|
+
<!-- Examples: fintech tabular-nums, health progress indicators, SaaS data-dense components -->
|
|
941
|
+
</div>
|
|
942
|
+
</section>
|
|
943
|
+
|
|
944
|
+
</div>
|
|
945
|
+
</body>
|
|
946
|
+
</html>
|