maestro-flow 0.3.47 → 0.3.49

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 (94) hide show
  1. package/.claude/agents/impeccable-agent.md +99 -0
  2. package/.claude/commands/maestro-analyze.md +2 -2
  3. package/.claude/commands/maestro-brainstorm.md +116 -112
  4. package/.claude/commands/maestro-composer.md +5 -0
  5. package/.claude/commands/maestro-impeccable.md +46 -9
  6. package/.claude/commands/maestro-merge.md +3 -0
  7. package/.claude/commands/maestro-roadmap.md +5 -1
  8. package/.claude/commands/maestro-ui-craft.md +56 -4
  9. package/.claude/commands/maestro.md +1 -1
  10. package/.claude/commands/manage-issue-discover.md +4 -0
  11. package/.claude/commands/quality-refactor.md +3 -0
  12. package/.claude/skills/maestro-help/index/catalog.json +1 -1
  13. package/.claude/skills/maestro-help/phases/01-parse-intent.md +1 -1
  14. package/.claude/skills/maestro-impeccable/SKILL.md +3 -1
  15. package/.codex/skills/maestro/SKILL.md +167 -25
  16. package/.codex/skills/maestro-brainstorm/SKILL.md +19 -2
  17. package/.codex/skills/maestro-composer/SKILL.md +5 -0
  18. package/.codex/skills/maestro-help/catalog.json +1 -1
  19. package/.codex/skills/maestro-impeccable/SKILL.md +24 -5
  20. package/.codex/skills/maestro-merge/SKILL.md +3 -0
  21. package/.codex/skills/maestro-milestone-audit/SKILL.md +64 -7
  22. package/.codex/skills/maestro-quick/SKILL.md +1 -1
  23. package/.codex/skills/maestro-ralph/SKILL.md +45 -25
  24. package/.codex/skills/maestro-roadmap/SKILL.md +1 -1
  25. package/.codex/skills/maestro-tools-execute/SKILL.md +1 -1
  26. package/.codex/skills/maestro-tools-register/SKILL.md +1 -1
  27. package/.codex/skills/maestro-ui-craft/SKILL.md +51 -6
  28. package/.codex/skills/quality-refactor/SKILL.md +114 -22
  29. package/chains/_intent-map.json +1 -1
  30. package/chains/singles/ui-design.json +4 -4
  31. package/chains/{ui-design-driven.json → ui-craft-build.json} +8 -8
  32. package/dashboard/dist-server/dashboard/src/server/coordinator/chain-map.js +3 -3
  33. package/dashboard/dist-server/dashboard/src/server/coordinator/chain-map.js.map +1 -1
  34. package/dist/src/commands/delegate.d.ts.map +1 -1
  35. package/dist/src/commands/delegate.js +12 -7
  36. package/dist/src/commands/delegate.js.map +1 -1
  37. package/dist/src/commands/impeccable.d.ts +2 -1
  38. package/dist/src/commands/impeccable.d.ts.map +1 -1
  39. package/dist/src/commands/impeccable.js +80 -1
  40. package/dist/src/commands/impeccable.js.map +1 -1
  41. package/package.json +1 -1
  42. package/templates/planning-roles/ui-designer.md +86 -99
  43. package/templates/workflows/specs/node-catalog.md +1 -1
  44. package/workflows/brainstorm.md +26 -0
  45. package/workflows/cli-tools-usage.md +9 -26
  46. package/workflows/delegate-usage.md +301 -343
  47. package/workflows/impeccable/design.md +462 -0
  48. package/workflows/impeccable/explore.md +157 -0
  49. package/workflows/impeccable/shape.md +4 -0
  50. package/workflows/impeccable/ui-search/__pycache__/core.cpython-313.pyc +0 -0
  51. package/workflows/impeccable/ui-search/__pycache__/design_system.cpython-313.pyc +0 -0
  52. package/workflows/impeccable/ui-search/core.py +262 -0
  53. package/workflows/impeccable/ui-search/data/app-interface.csv +31 -0
  54. package/workflows/impeccable/ui-search/data/charts.csv +26 -0
  55. package/workflows/impeccable/ui-search/data/colors.csv +162 -0
  56. package/workflows/impeccable/ui-search/data/design.csv +1776 -0
  57. package/workflows/impeccable/ui-search/data/draft.csv +1779 -0
  58. package/workflows/impeccable/ui-search/data/google-fonts.csv +1924 -0
  59. package/workflows/impeccable/ui-search/data/icons.csv +106 -0
  60. package/workflows/impeccable/ui-search/data/landing.csv +35 -0
  61. package/workflows/impeccable/ui-search/data/products.csv +162 -0
  62. package/workflows/impeccable/ui-search/data/react-performance.csv +45 -0
  63. package/workflows/impeccable/ui-search/data/stacks/angular.csv +51 -0
  64. package/workflows/impeccable/ui-search/data/stacks/astro.csv +54 -0
  65. package/workflows/impeccable/ui-search/data/stacks/flutter.csv +53 -0
  66. package/workflows/impeccable/ui-search/data/stacks/html-tailwind.csv +56 -0
  67. package/workflows/impeccable/ui-search/data/stacks/jetpack-compose.csv +53 -0
  68. package/workflows/impeccable/ui-search/data/stacks/laravel.csv +51 -0
  69. package/workflows/impeccable/ui-search/data/stacks/nextjs.csv +53 -0
  70. package/workflows/impeccable/ui-search/data/stacks/nuxt-ui.csv +51 -0
  71. package/workflows/impeccable/ui-search/data/stacks/nuxtjs.csv +59 -0
  72. package/workflows/impeccable/ui-search/data/stacks/react-native.csv +52 -0
  73. package/workflows/impeccable/ui-search/data/stacks/react.csv +54 -0
  74. package/workflows/impeccable/ui-search/data/stacks/shadcn.csv +61 -0
  75. package/workflows/impeccable/ui-search/data/stacks/svelte.csv +54 -0
  76. package/workflows/impeccable/ui-search/data/stacks/swiftui.csv +51 -0
  77. package/workflows/impeccable/ui-search/data/stacks/threejs.csv +54 -0
  78. package/workflows/impeccable/ui-search/data/stacks/vue.csv +50 -0
  79. package/workflows/impeccable/ui-search/data/styles.csv +85 -0
  80. package/workflows/impeccable/ui-search/data/typography.csv +74 -0
  81. package/workflows/impeccable/ui-search/data/ui-reasoning.csv +162 -0
  82. package/workflows/impeccable/ui-search/data/ux-guidelines.csv +100 -0
  83. package/workflows/impeccable/ui-search/design_system.py +1148 -0
  84. package/workflows/impeccable/ui-search/prototype-template.html +511 -0
  85. package/workflows/impeccable/ui-search/render-prototype.js +208 -0
  86. package/workflows/impeccable/ui-search/search.py +114 -0
  87. package/workflows/maestro-chain-execute.md +2 -2
  88. package/workflows/maestro.codex.md +3 -3
  89. package/workflows/maestro.md +5 -5
  90. package/workflows/plan.md +1 -1
  91. package/workflows/ui-design.md +1 -1
  92. package/workflows/ui-style.md +1 -1
  93. package/.claude/commands/maestro-ui-design.md +0 -104
  94. package/.codex/skills/maestro-ui-design/SKILL.md +0 -242
package/workflows/impeccable/ui-search/prototype-template.html ADDED
@@ -0,0 +1,511 @@
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>{{PROJECT_NAME}} — {{STYLE_NAME}}</title>
7
+ {{GOOGLE_FONTS_LINK}}
8
+ <style>
9
+ /* === Design Tokens (injected from MASTER.md) === */
10
+ :root {
11
+ /* Colors */
12
+ --color-primary: {{COLOR_PRIMARY}};
13
+ --color-on-primary: {{COLOR_ON_PRIMARY}};
14
+ --color-secondary: {{COLOR_SECONDARY}};
15
+ --color-accent: {{COLOR_ACCENT}};
16
+ --color-background: {{COLOR_BACKGROUND}};
17
+ --color-foreground: {{COLOR_FOREGROUND}};
18
+ --color-muted: {{COLOR_MUTED}};
19
+ --color-border: {{COLOR_BORDER}};
20
+ --color-destructive: {{COLOR_DESTRUCTIVE}};
21
+ --color-ring: {{COLOR_RING}};
22
+
23
+ /* Typography */
24
+ --font-heading: {{FONT_HEADING}}, system-ui, sans-serif;
25
+ --font-body: {{FONT_BODY}}, system-ui, sans-serif;
26
+
27
+ /* Spacing */
28
+ --space-xs: 4px;
29
+ --space-sm: 8px;
30
+ --space-md: 16px;
31
+ --space-lg: 24px;
32
+ --space-xl: 32px;
33
+ --space-2xl: 48px;
34
+ --space-3xl: 64px;
35
+
36
+ /* Shadows */
37
+ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
38
+ --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
39
+ --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
40
+ --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
41
+
42
+ /* Radii */
43
+ --radius-sm: 4px;
44
+ --radius-md: 8px;
45
+ --radius-lg: 12px;
46
+ }
47
+
48
+ /* === Reset === */
49
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
50
+
51
+ body {
52
+ font-family: var(--font-body);
53
+ color: var(--color-foreground);
54
+ background: var(--color-background);
55
+ line-height: 1.6;
56
+ -webkit-font-smoothing: antialiased;
57
+ }
58
+
59
+ /* === Variant Label === */
60
+ .variant-label {
61
+ position: fixed;
62
+ top: var(--space-sm);
63
+ right: var(--space-sm);
64
+ background: var(--color-primary);
65
+ color: var(--color-on-primary);
66
+ font-family: var(--font-heading);
67
+ font-size: 0.75rem;
68
+ font-weight: 600;
69
+ padding: 4px 12px;
70
+ border-radius: var(--radius-sm);
71
+ z-index: 100;
72
+ letter-spacing: 0.05em;
73
+ text-transform: uppercase;
74
+ }
75
+
76
+ /* === Navigation === */
77
+ .nav {
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: space-between;
81
+ padding: var(--space-md) var(--space-xl);
82
+ border-bottom: 1px solid var(--color-border);
83
+ background: var(--color-background);
84
+ }
85
+ .nav-brand {
86
+ font-family: var(--font-heading);
87
+ font-size: 1.25rem;
88
+ font-weight: 700;
89
+ color: var(--color-primary);
90
+ text-decoration: none;
91
+ }
92
+ .nav-links {
93
+ display: flex;
94
+ gap: var(--space-lg);
95
+ list-style: none;
96
+ }
97
+ .nav-links a {
98
+ color: var(--color-foreground);
99
+ text-decoration: none;
100
+ font-size: 0.875rem;
101
+ font-weight: 500;
102
+ transition: color 200ms ease;
103
+ }
104
+ .nav-links a:hover { color: var(--color-primary); }
105
+
106
+ /* === Hero === */
107
+ .hero {
108
+ padding: var(--space-3xl) var(--space-xl);
109
+ text-align: center;
110
+ max-width: 720px;
111
+ margin: 0 auto;
112
+ }
113
+ .hero h1 {
114
+ font-family: var(--font-heading);
115
+ font-size: clamp(2rem, 5vw, 3.5rem);
116
+ font-weight: 700;
117
+ line-height: 1.1;
118
+ color: var(--color-foreground);
119
+ margin-bottom: var(--space-md);
120
+ }
121
+ .hero p {
122
+ font-size: 1.125rem;
123
+ color: var(--color-muted);
124
+ margin-bottom: var(--space-xl);
125
+ max-width: 560px;
126
+ margin-left: auto;
127
+ margin-right: auto;
128
+ }
129
+ .hero-actions {
130
+ display: flex;
131
+ gap: var(--space-md);
132
+ justify-content: center;
133
+ flex-wrap: wrap;
134
+ }
135
+
136
+ /* === Buttons === */
137
+ .btn {
138
+ display: inline-flex;
139
+ align-items: center;
140
+ justify-content: center;
141
+ padding: 12px 24px;
142
+ border-radius: var(--radius-md);
143
+ font-family: var(--font-body);
144
+ font-size: 0.875rem;
145
+ font-weight: 600;
146
+ text-decoration: none;
147
+ cursor: pointer;
148
+ border: none;
149
+ transition: all 200ms ease;
150
+ }
151
+ .btn-primary {
152
+ background: var(--color-accent);
153
+ color: white;
154
+ }
155
+ .btn-primary:hover {
156
+ opacity: 0.9;
157
+ transform: translateY(-1px);
158
+ box-shadow: var(--shadow-md);
159
+ }
160
+ .btn-secondary {
161
+ background: transparent;
162
+ color: var(--color-foreground);
163
+ border: 1px solid var(--color-border);
164
+ }
165
+ .btn-secondary:hover {
166
+ border-color: var(--color-primary);
167
+ color: var(--color-primary);
168
+ }
169
+
170
+ /* === Section === */
171
+ .section {
172
+ padding: var(--space-3xl) var(--space-xl);
173
+ }
174
+ .section-header {
175
+ text-align: center;
176
+ margin-bottom: var(--space-2xl);
177
+ }
178
+ .section-header h2 {
179
+ font-family: var(--font-heading);
180
+ font-size: 1.75rem;
181
+ font-weight: 700;
182
+ margin-bottom: var(--space-sm);
183
+ }
184
+ .section-header p {
185
+ color: var(--color-muted);
186
+ max-width: 480px;
187
+ margin: 0 auto;
188
+ }
189
+
190
+ /* === Card Grid === */
191
+ .card-grid {
192
+ display: grid;
193
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
194
+ gap: var(--space-lg);
195
+ max-width: 960px;
196
+ margin: 0 auto;
197
+ }
198
+ .card {
199
+ background: var(--color-background);
200
+ border: 1px solid var(--color-border);
201
+ border-radius: var(--radius-lg);
202
+ padding: var(--space-lg);
203
+ box-shadow: var(--shadow-sm);
204
+ transition: all 200ms ease;
205
+ }
206
+ .card:hover {
207
+ box-shadow: var(--shadow-md);
208
+ transform: translateY(-2px);
209
+ }
210
+ .card-icon {
211
+ width: 40px;
212
+ height: 40px;
213
+ border-radius: var(--radius-md);
214
+ background: var(--color-primary);
215
+ display: flex;
216
+ align-items: center;
217
+ justify-content: center;
218
+ margin-bottom: var(--space-md);
219
+ color: var(--color-on-primary);
220
+ font-size: 1.25rem;
221
+ }
222
+ .card h3 {
223
+ font-family: var(--font-heading);
224
+ font-size: 1.125rem;
225
+ font-weight: 600;
226
+ margin-bottom: var(--space-sm);
227
+ }
228
+ .card p {
229
+ color: var(--color-muted);
230
+ font-size: 0.875rem;
231
+ line-height: 1.5;
232
+ }
233
+
234
+ /* === Stats === */
235
+ .stats {
236
+ display: grid;
237
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
238
+ gap: var(--space-lg);
239
+ max-width: 720px;
240
+ margin: 0 auto;
241
+ text-align: center;
242
+ }
243
+ .stat-value {
244
+ font-family: var(--font-heading);
245
+ font-size: 2.5rem;
246
+ font-weight: 700;
247
+ color: var(--color-primary);
248
+ line-height: 1;
249
+ }
250
+ .stat-label {
251
+ font-size: 0.875rem;
252
+ color: var(--color-muted);
253
+ margin-top: var(--space-xs);
254
+ }
255
+
256
+ /* === Form === */
257
+ .form-section {
258
+ max-width: 480px;
259
+ margin: 0 auto;
260
+ background: var(--color-background);
261
+ border: 1px solid var(--color-border);
262
+ border-radius: var(--radius-lg);
263
+ padding: var(--space-xl);
264
+ box-shadow: var(--shadow-sm);
265
+ }
266
+ .form-group {
267
+ margin-bottom: var(--space-md);
268
+ }
269
+ .form-label {
270
+ display: block;
271
+ font-size: 0.875rem;
272
+ font-weight: 500;
273
+ margin-bottom: var(--space-xs);
274
+ color: var(--color-foreground);
275
+ }
276
+ .form-input {
277
+ width: 100%;
278
+ padding: 10px 14px;
279
+ border: 1px solid var(--color-border);
280
+ border-radius: var(--radius-md);
281
+ font-family: var(--font-body);
282
+ font-size: 0.875rem;
283
+ color: var(--color-foreground);
284
+ background: var(--color-background);
285
+ transition: border-color 200ms ease, box-shadow 200ms ease;
286
+ outline: none;
287
+ }
288
+ .form-input:focus {
289
+ border-color: var(--color-ring);
290
+ box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-ring), transparent 80%);
291
+ }
292
+ .form-input::placeholder {
293
+ color: var(--color-muted);
294
+ }
295
+
296
+ /* === Footer === */
297
+ .footer {
298
+ padding: var(--space-xl);
299
+ text-align: center;
300
+ border-top: 1px solid var(--color-border);
301
+ font-size: 0.8125rem;
302
+ color: var(--color-muted);
303
+ }
304
+
305
+ /* === Color Swatches (design system preview) === */
306
+ .swatches {
307
+ display: flex;
308
+ gap: var(--space-sm);
309
+ justify-content: center;
310
+ flex-wrap: wrap;
311
+ max-width: 720px;
312
+ margin: 0 auto var(--space-xl);
313
+ }
314
+ .swatch {
315
+ width: 64px;
316
+ height: 64px;
317
+ border-radius: var(--radius-md);
318
+ border: 1px solid var(--color-border);
319
+ position: relative;
320
+ }
321
+ .swatch::after {
322
+ content: attr(data-label);
323
+ position: absolute;
324
+ bottom: -20px;
325
+ left: 50%;
326
+ transform: translateX(-50%);
327
+ font-size: 0.625rem;
328
+ color: var(--color-muted);
329
+ white-space: nowrap;
330
+ }
331
+
332
+ /* === Typography Showcase === */
333
+ .type-showcase {
334
+ max-width: 720px;
335
+ margin: 0 auto;
336
+ }
337
+ .type-sample {
338
+ margin-bottom: var(--space-lg);
339
+ padding-bottom: var(--space-lg);
340
+ border-bottom: 1px solid var(--color-border);
341
+ }
342
+ .type-sample:last-child { border-bottom: none; }
343
+ .type-meta {
344
+ font-size: 0.75rem;
345
+ color: var(--color-muted);
346
+ margin-bottom: var(--space-xs);
347
+ font-family: monospace;
348
+ }
349
+
350
+ /* === Responsive === */
351
+ @media (max-width: 640px) {
352
+ .hero { padding: var(--space-2xl) var(--space-md); }
353
+ .section { padding: var(--space-2xl) var(--space-md); }
354
+ .nav { padding: var(--space-md); }
355
+ .nav-links { display: none; }
356
+ .stats { grid-template-columns: repeat(2, 1fr); }
357
+ }
358
+ </style>
359
+ </head>
360
+ <body>
361
+
362
+ <div class="variant-label">{{STYLE_NAME}}</div>
363
+
364
+ <!-- Navigation -->
365
+ <nav class="nav">
366
+ <a href="#" class="nav-brand">{{PROJECT_NAME}}</a>
367
+ <ul class="nav-links">
368
+ <li><a href="#features">Features</a></li>
369
+ <li><a href="#stats">Metrics</a></li>
370
+ <li><a href="#contact">Contact</a></li>
371
+ </ul>
372
+ </nav>
373
+
374
+ <!-- Hero -->
375
+ <section class="hero">
376
+ <h1>Build something remarkable</h1>
377
+ <p>A showcase of the design system's visual language, typography, color palette, and component patterns.</p>
378
+ <div class="hero-actions">
379
+ <a href="#" class="btn btn-primary">Get Started</a>
380
+ <a href="#" class="btn btn-secondary">Learn More</a>
381
+ </div>
382
+ </section>
383
+
384
+ <!-- Color Swatches -->
385
+ <section class="section">
386
+ <div class="section-header">
387
+ <h2>Color Palette</h2>
388
+ <p>The project's semantic color system</p>
389
+ </div>
390
+ <div class="swatches">
391
+ <div class="swatch" style="background: var(--color-primary);" data-label="Primary"></div>
392
+ <div class="swatch" style="background: var(--color-secondary);" data-label="Secondary"></div>
393
+ <div class="swatch" style="background: var(--color-accent);" data-label="Accent"></div>
394
+ <div class="swatch" style="background: var(--color-foreground);" data-label="Foreground"></div>
395
+ <div class="swatch" style="background: var(--color-muted);" data-label="Muted"></div>
396
+ <div class="swatch" style="background: var(--color-border);" data-label="Border"></div>
397
+ <div class="swatch" style="background: var(--color-destructive);" data-label="Destructive"></div>
398
+ <div class="swatch" style="background: var(--color-ring);" data-label="Ring"></div>
399
+ </div>
400
+ </section>
401
+
402
+ <!-- Typography Showcase -->
403
+ <section class="section" style="background: var(--color-muted); background: color-mix(in oklch, var(--color-muted), var(--color-background) 70%);">
404
+ <div class="section-header">
405
+ <h2>Typography</h2>
406
+ <p>Heading and body font pairing</p>
407
+ </div>
408
+ <div class="type-showcase">
409
+ <div class="type-sample">
410
+ <div class="type-meta">Display / {{FONT_HEADING}} / 700 / 3rem</div>
411
+ <div style="font-family: var(--font-heading); font-size: 3rem; font-weight: 700; line-height: 1.1;">The quick brown fox</div>
412
+ </div>
413
+ <div class="type-sample">
414
+ <div class="type-meta">Headline / {{FONT_HEADING}} / 700 / 2rem</div>
415
+ <div style="font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1.2;">Jumps over the lazy dog</div>
416
+ </div>
417
+ <div class="type-sample">
418
+ <div class="type-meta">Title / {{FONT_HEADING}} / 600 / 1.25rem</div>
419
+ <div style="font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; line-height: 1.3;">Section title for subsections</div>
420
+ </div>
421
+ <div class="type-sample">
422
+ <div class="type-meta">Body / {{FONT_BODY}} / 400 / 1rem</div>
423
+ <div style="font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.6; max-width: 65ch;">Body text demonstrates the reading experience. Good typography creates visual rhythm and hierarchy. Line length stays within 65-75 characters for optimal readability across devices.</div>
424
+ </div>
425
+ <div class="type-sample">
426
+ <div class="type-meta">Label / {{FONT_BODY}} / 500 / 0.875rem</div>
427
+ <div style="font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; line-height: 1.4;">Button label, badge text, metadata</div>
428
+ </div>
429
+ </div>
430
+ </section>
431
+
432
+ <!-- Feature Cards -->
433
+ <section class="section" id="features">
434
+ <div class="section-header">
435
+ <h2>Feature Cards</h2>
436
+ <p>Component styling and interaction states</p>
437
+ </div>
438
+ <div class="card-grid">
439
+ <div class="card">
440
+ <div class="card-icon">&#9670;</div>
441
+ <h3>Design Tokens</h3>
442
+ <p>Consistent spacing, color, and typography tokens that scale across the entire interface.</p>
443
+ </div>
444
+ <div class="card">
445
+ <div class="card-icon">&#9733;</div>
446
+ <h3>Component Library</h3>
447
+ <p>Pre-built components following the design system's visual language and interaction patterns.</p>
448
+ </div>
449
+ <div class="card">
450
+ <div class="card-icon">&#9881;</div>
451
+ <h3>Responsive Layout</h3>
452
+ <p>Fluid grids and adaptive spacing that work seamlessly from mobile to desktop viewports.</p>
453
+ </div>
454
+ </div>
455
+ </section>
456
+
457
+ <!-- Stats -->
458
+ <section class="section" id="stats">
459
+ <div class="section-header">
460
+ <h2>By the Numbers</h2>
461
+ </div>
462
+ <div class="stats">
463
+ <div>
464
+ <div class="stat-value">10</div>
465
+ <div class="stat-label">Semantic colors</div>
466
+ </div>
467
+ <div>
468
+ <div class="stat-value">7</div>
469
+ <div class="stat-label">Spacing tokens</div>
470
+ </div>
471
+ <div>
472
+ <div class="stat-value">4</div>
473
+ <div class="stat-label">Shadow levels</div>
474
+ </div>
475
+ <div>
476
+ <div class="stat-value">2</div>
477
+ <div class="stat-label">Font families</div>
478
+ </div>
479
+ </div>
480
+ </section>
481
+
482
+ <!-- Form -->
483
+ <section class="section" id="contact">
484
+ <div class="section-header">
485
+ <h2>Form Components</h2>
486
+ <p>Input styling and focus states</p>
487
+ </div>
488
+ <div class="form-section">
489
+ <div class="form-group">
490
+ <label class="form-label">Full Name</label>
491
+ <input type="text" class="form-input" placeholder="Jane Doe">
492
+ </div>
493
+ <div class="form-group">
494
+ <label class="form-label">Email Address</label>
495
+ <input type="email" class="form-input" placeholder="jane@example.com">
496
+ </div>
497
+ <div class="form-group">
498
+ <label class="form-label">Message</label>
499
+ <textarea class="form-input" rows="3" placeholder="Tell us about your project..."></textarea>
500
+ </div>
501
+ <button class="btn btn-primary" style="width: 100%; margin-top: var(--space-sm);">Submit</button>
502
+ </div>
503
+ </section>
504
+
505
+ <!-- Footer -->
506
+ <footer class="footer">
507
+ <p>{{PROJECT_NAME}} Design System Preview &mdash; Style: {{STYLE_NAME}} &mdash; Fonts: {{FONT_HEADING}} + {{FONT_BODY}}</p>
508
+ </footer>
509
+
510
+ </body>
511
+ </html>