ai-spector 0.4.0 → 0.4.1

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 (97) hide show
  1. package/README.md +9 -2
  2. package/assets/themes/airbnb/preview.html +281 -0
  3. package/assets/themes/airtable/preview.html +209 -0
  4. package/assets/themes/apple/preview.html +461 -0
  5. package/assets/themes/binance/preview.html +1013 -0
  6. package/assets/themes/bmw/preview.html +255 -0
  7. package/assets/themes/bugatti/preview.html +879 -0
  8. package/assets/themes/cal/preview.html +620 -0
  9. package/assets/themes/claude/preview.html +873 -0
  10. package/assets/themes/clay/preview.html +360 -0
  11. package/assets/themes/clickhouse/preview.html +833 -0
  12. package/assets/themes/cohere/preview.html +854 -0
  13. package/assets/themes/coinbase/preview.html +208 -0
  14. package/assets/themes/composio/preview.html +980 -0
  15. package/assets/themes/cursor/preview.html +428 -0
  16. package/assets/themes/elevenlabs/preview.html +296 -0
  17. package/assets/themes/expo/preview.html +580 -0
  18. package/assets/themes/ferrari/preview.html +1168 -0
  19. package/assets/themes/framer/preview.html +930 -0
  20. package/assets/themes/hashicorp/preview.html +1238 -0
  21. package/assets/themes/ibm/preview.html +473 -0
  22. package/assets/themes/intercom/preview.html +229 -0
  23. package/assets/themes/kraken/preview.html +213 -0
  24. package/assets/themes/lamborghini/preview.html +428 -0
  25. package/assets/themes/linear.app/preview.html +418 -0
  26. package/assets/themes/lovable/preview.html +393 -0
  27. package/assets/themes/meta/preview.html +656 -0
  28. package/assets/themes/minimax/preview.html +1293 -0
  29. package/assets/themes/mintlify/preview.html +443 -0
  30. package/assets/themes/miro/preview.html +218 -0
  31. package/assets/themes/mistral.ai/preview.html +850 -0
  32. package/assets/themes/mongodb/preview.html +304 -0
  33. package/assets/themes/nike/preview.html +1182 -0
  34. package/assets/themes/notion/preview.html +409 -0
  35. package/assets/themes/nvidia/preview.html +411 -0
  36. package/assets/themes/ollama/preview.html +725 -0
  37. package/assets/themes/opencode.ai/preview.html +402 -0
  38. package/assets/themes/pinterest/preview.html +277 -0
  39. package/assets/themes/playstation/preview.html +1125 -0
  40. package/assets/themes/posthog/preview.html +794 -0
  41. package/assets/themes/raycast/preview.html +735 -0
  42. package/assets/themes/renault/preview.html +652 -0
  43. package/assets/themes/replicate/preview.html +878 -0
  44. package/assets/themes/resend/preview.html +399 -0
  45. package/assets/themes/revolut/preview.html +278 -0
  46. package/assets/themes/runwayml/preview.html +712 -0
  47. package/assets/themes/sanity/preview.html +1180 -0
  48. package/assets/themes/sentry/preview.html +996 -0
  49. package/assets/themes/shopify/preview.html +611 -0
  50. package/assets/themes/spacex/preview.html +265 -0
  51. package/assets/themes/spotify/preview.html +275 -0
  52. package/assets/themes/stripe/preview.html +464 -0
  53. package/assets/themes/supabase/preview.html +1002 -0
  54. package/assets/themes/superhuman/preview.html +996 -0
  55. package/assets/themes/tesla/preview.html +971 -0
  56. package/assets/themes/theverge/preview.html +1143 -0
  57. package/assets/themes/together.ai/preview.html +944 -0
  58. package/assets/themes/uber/preview.html +1164 -0
  59. package/assets/themes/vercel/preview.html +412 -0
  60. package/assets/themes/voltagent/preview.html +813 -0
  61. package/assets/themes/warp/preview.html +580 -0
  62. package/assets/themes/webflow/preview.html +191 -0
  63. package/assets/themes/wired/preview.html +1049 -0
  64. package/assets/themes/wise/preview.html +274 -0
  65. package/assets/themes/x.ai/preview.html +452 -0
  66. package/assets/themes/zapier/preview.html +417 -0
  67. package/dist/cli.js +23 -1
  68. package/dist/cli.js.map +1 -1
  69. package/dist/commands/graph-visualize.d.ts.map +1 -1
  70. package/dist/commands/graph-visualize.js +1 -22
  71. package/dist/commands/graph-visualize.js.map +1 -1
  72. package/dist/commands/prototype.d.ts +12 -0
  73. package/dist/commands/prototype.d.ts.map +1 -1
  74. package/dist/commands/prototype.js +55 -2
  75. package/dist/commands/prototype.js.map +1 -1
  76. package/dist/prototype/theme-preview.d.ts +17 -0
  77. package/dist/prototype/theme-preview.d.ts.map +1 -0
  78. package/dist/prototype/theme-preview.js +73 -0
  79. package/dist/prototype/theme-preview.js.map +1 -0
  80. package/dist/util/open-browser.d.ts +3 -0
  81. package/dist/util/open-browser.d.ts.map +1 -0
  82. package/dist/util/open-browser.js +24 -0
  83. package/dist/util/open-browser.js.map +1 -0
  84. package/package.json +4 -2
  85. package/scaffold/.ai-spector/.docflow/config/language.json +4 -0
  86. package/scaffold/cursor/WORKFLOW.md +2 -1
  87. package/scaffold/cursor/skills/_skill-router.md +1 -1
  88. package/scaffold/cursor/skills/ai-spector/references/generate-workflow.md +8 -0
  89. package/scaffold/cursor/skills/ai-spector/references/language-picker.md +70 -0
  90. package/scaffold/cursor/skills/ai-spector/references/project-conventions.md +13 -4
  91. package/scaffold/cursor/skills/ai-spector-generate-basic-design/SKILL.md +1 -0
  92. package/scaffold/cursor/skills/ai-spector-generate-detail-design/SKILL.md +1 -0
  93. package/scaffold/cursor/skills/ai-spector-generate-prototype/SKILL.md +11 -5
  94. package/scaffold/cursor/skills/ai-spector-generate-prototype/references/runbook.md +20 -10
  95. package/scaffold/cursor/skills/ai-spector-generate-prototype/references/theme-picker.md +118 -0
  96. package/scaffold/cursor/skills/ai-spector-generate-srs/SKILL.md +1 -0
  97. package/scaffold/prototype/README.md +8 -3
package/README.md CHANGED
@@ -35,7 +35,13 @@ HTML prototype:
35
35
 
36
36
  ```bash
37
37
  npx ai-spector prototype themes
38
- npx ai-spector prototype setup --theme vercel
38
+ ```
39
+
40
+ Ask in chat: **“generate HTML prototype”** — if no theme is saved, the agent recommends 3 themes, opens previews in your browser, and waits for you to pick. Or name one upfront: “prototype with stripe theme”.
41
+
42
+ ```bash
43
+ npx ai-spector prototype preview stripe --open # optional: preview yourself
44
+ npx ai-spector prototype setup --theme vercel # after you choose
39
45
  ```
40
46
 
41
47
  Then ask: “generate HTML prototype for all screens” → `npx ai-spector prototype manifest` → `prototype validate --strict`.
@@ -48,6 +54,7 @@ Then ask: “generate HTML prototype for all screens” → `npx ai-spector prot
48
54
  | Check graph | “validate the graph” |
49
55
  | Regenerate docs | “generate SRS”, “generate basic design”, … |
50
56
  | HTML prototype | “generate prototype with stripe theme” |
57
+ | Choose a theme | “help me pick a prototype theme”, “show me theme options” |
51
58
  | After doc edits | “re-index the graph” |
52
59
  | What to redo | “what’s the impact of my changes” |
53
60
  | Review comments | “resolve comments” |
@@ -63,7 +70,7 @@ docs/data-source/ → analyze → validate graph → generate SRS → in
63
70
 
64
71
  ## CLI (optional)
65
72
 
66
- For scripts or debugging: `npx ai-spector index`, `graph validate`, `graph visualize --open`, `graph impact --git`, `prototype themes|setup|manifest|validate`. See `npx ai-spector --help`.
73
+ For scripts or debugging: `npx ai-spector index`, `graph validate`, `graph visualize --open`, `graph impact --git`, `prototype themes|preview|setup|manifest|validate`. See `npx ai-spector --help`.
67
74
 
68
75
  ## If something breaks
69
76
 
package/assets/themes/airbnb/preview.html ADDED
@@ -0,0 +1,281 @@
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 Airbnb</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=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --white: #ffffff; --near-black: #222222; --rausch: #ff385c; --deep-rausch: #e00b41;
13
+ --secondary: #6a6a6a; --disabled: #929292; --border: #c1c1c1; --surface: #f2f2f2;
14
+ --luxe: #460479; --plus: #92174d; --legal-blue: #428bff; --error: #c13515;
15
+ --shadow-card: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px;
16
+ --shadow-hover: rgba(0,0,0,0.08) 0px 4px 12px;
17
+ --font: 'Nunito Sans', -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif;
18
+ }
19
+ * { margin:0; padding:0; box-sizing:border-box; }
20
+ body { background:var(--white); color:var(--near-black); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.43; -webkit-font-smoothing:antialiased; }
21
+
22
+ .nav { position:sticky; top:0; z-index:100; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:14px 24px; background:var(--white); border-bottom:1px solid #ebebeb; }
23
+ .nav > .nav-left { justify-self:start; }
24
+ .nav > .nav-links { justify-self:center; }
25
+ .nav > .nav-cta { justify-self:end; }
26
+ .nav-brand { font-size:14px; font-weight:600; color:var(--near-black); text-decoration:none; }
27
+ .nav-links { display:flex; gap:20px; list-style:none; }
28
+ .nav-links a { font-size:14px; font-weight:500; color:var(--secondary); text-decoration:none; transition:color 0.15s; }
29
+ .nav-links a:hover { color:var(--near-black); }
30
+ .nav-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:700; text-decoration:none; border:none; }
31
+
32
+ .hero { padding:64px 24px; text-align:center; }
33
+ .hero h1 { font-size:28px; font-weight:700; line-height:1.43; margin-bottom:12px; }
34
+ .hero h1 span { color:var(--rausch); }
35
+ .hero p { font-size:16px; font-weight:400; color:var(--secondary); max-width:480px; margin:0 auto 24px; }
36
+ .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
37
+ .btn-dark { display:inline-block; background:var(--near-black); color:var(--white); padding:12px 24px; border-radius:8px; font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
38
+ .btn-outline { display:inline-block; background:transparent; color:var(--near-black); padding:12px 24px; border-radius:8px; border:1px solid var(--near-black); font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; }
39
+ .btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--near-black); width:36px; height:36px; border-radius:50%; font-size:14px; text-decoration:none; border:none; cursor:pointer; transition:box-shadow 0.2s; }
40
+ .btn-circle:hover { box-shadow:var(--shadow-hover); }
41
+
42
+ .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
43
+ .section-label { font-size:12px; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:0.32px; margin-bottom:8px; }
44
+ .section-title { font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px; margin-bottom:24px; }
45
+ .section-divider { border:none; border-top:1px solid #ebebeb; margin:0; }
46
+
47
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
48
+ .color-swatch { border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); }
49
+ .color-swatch-block { height:64px; width:100%; }
50
+ .color-swatch-info { padding:10px; }
51
+ .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
52
+ .color-swatch-hex { font-size:10px; color:var(--secondary); font-family:monospace; }
53
+ .color-swatch-role { font-size:9px; color:var(--disabled); margin-top:2px; }
54
+ .color-group-label { font-size:12px; font-weight:700; color:var(--secondary); margin:20px 0 8px; }
55
+
56
+ .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }
57
+ .type-sample:last-child { border-bottom:none; }
58
+ .type-meta { font-size:10px; color:var(--disabled); margin-top:4px; font-family:monospace; }
59
+
60
+ .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
61
+ .button-item { text-align:center; }
62
+ .button-label { font-size:10px; color:var(--disabled); margin-top:6px; }
63
+
64
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
65
+ .card { background:var(--white); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); }
66
+ .card-img { height:160px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--disabled); font-size:12px; }
67
+ .card-body { padding:16px; }
68
+ .card h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
69
+ .card p { font-size:14px; color:var(--secondary); }
70
+
71
+ .form-group { margin-bottom:16px; max-width:400px; }
72
+ .form-label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
73
+ .form-input { width:100%; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
74
+ .form-input:focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
75
+ .form-input--focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
76
+ .form-input--error { border-color:var(--error); box-shadow:0 0 0 2px var(--error); }
77
+ .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
78
+ .form-state-label { font-size:9px; color:var(--disabled); margin-top:4px; }
79
+
80
+ .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
81
+ .spacing-item { text-align:center; }
82
+ .spacing-block { background:var(--rausch); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.7; }
83
+ .spacing-value { font-size:9px; color:var(--disabled); font-family:monospace; }
84
+
85
+ .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
86
+ .radius-item { text-align:center; }
87
+ .radius-box { width:56px; height:56px; background:var(--surface); margin-bottom:4px; }
88
+ .radius-label { font-size:9px; color:var(--disabled); font-family:monospace; }
89
+ .radius-context { font-size:8px; color:var(--disabled); }
90
+
91
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
92
+ .elevation-card { background:var(--white); border-radius:20px; padding:16px; text-align:center; }
93
+ .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
94
+ .elevation-desc { font-size:9px; color:var(--disabled); font-family:monospace; }
95
+
96
+ .footer { padding:24px; text-align:center; border-top:1px solid #ebebeb; font-size:12px; color:var(--secondary); }
97
+ .footer a { color:var(--rausch); text-decoration:underline; }
98
+
99
+ @media (max-width:744px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
100
+
101
+ /* getdesign.md nav additions */
102
+ .nav-left { display: flex; align-items: center; gap: 20px; }
103
+ .nav-brand-link,
104
+ .nav-brand-link:link,
105
+ .nav-brand-link:visited,
106
+ .nav-brand-link:hover,
107
+ .nav-brand-link:active { text-decoration: none; color: inherit; }
108
+ .nav-github,
109
+ .nav-github:link,
110
+ .nav-github:visited,
111
+ .nav-github:hover,
112
+ .nav-github:active {
113
+ display: inline-flex;
114
+ align-items: center;
115
+ gap: 6px;
116
+ font-size: 12px;
117
+ font-weight: 600;
118
+ color: inherit;
119
+ text-decoration: none;
120
+ padding: 5px 10px;
121
+ border: 1px solid rgba(128, 128, 128, 0.3);
122
+ border-radius: 6px;
123
+ opacity: 0.75;
124
+ transition: opacity 200ms ease, border-color 200ms ease;
125
+ font-family: inherit;
126
+ line-height: 1;
127
+ white-space: nowrap;
128
+ }
129
+ .nav-github:hover { opacity: 1; border-color: rgba(128, 128, 128, 0.55); }
130
+ .nav-github svg { display: block; flex-shrink: 0; }
131
+
132
+ /* getdesign.md nav centering */
133
+ .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
134
+ .nav > .nav-left { justify-self: start; }
135
+ .nav > .nav-links { justify-self: center; }
136
+ .nav > :last-child { justify-self: end; }
137
+ </style>
138
+ </head>
139
+ <body>
140
+
141
+ <nav class="nav">
142
+ <div class="nav-left">
143
+ <a href="https://getdesign.md/" target="_blank" rel="noopener noreferrer" class="nav-brand-link">
144
+ <span class="nav-brand">getdesign.md</span>
145
+ </a>
146
+ <a class="nav-github" href="https://github.com/VoltAgent/awesome-design-md" target="_blank" rel="noopener noreferrer" aria-label="awesome-design-md on GitHub">
147
+ <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>
148
+ awesome-design-md
149
+ </a>
150
+ </div>
151
+ <ul class="nav-links">
152
+ <li><a href="#colors">Colors</a></li>
153
+ <li><a href="#typography">Typography</a></li>
154
+ <li><a href="#buttons">Buttons</a></li>
155
+ <li><a href="#cards">Cards</a></li>
156
+ <li><a href="#forms">Forms</a></li>
157
+ </ul>
158
+ <a class="nav-cta" href="#">&#x1F50D;</a>
159
+ </nav>
160
+
161
+ <section class="hero">
162
+ <h1>Design System Inspired by <span>Airbnb</span></h1>
163
+ <p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
164
+ <div class="hero-buttons">
165
+ <a class="btn-dark" href="#">Explore Stays</a>
166
+ <a class="btn-outline" href="#">Become a Host</a>
167
+ </div>
168
+ </section>
169
+
170
+ <hr class="section-divider">
171
+
172
+ <section class="section" id="colors">
173
+ <div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
174
+ <div class="color-group-label">Brand</div>
175
+ <div class="color-grid">
176
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ff385c"></div><div class="color-swatch-info"><div class="color-swatch-name">Rausch Red</div><div class="color-swatch-hex">#ff385c</div><div class="color-swatch-role">Primary CTA</div></div></div>
177
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e00b41"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Rausch</div><div class="color-swatch-hex">#e00b41</div><div class="color-swatch-role">Pressed state</div></div></div>
178
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#460479"></div><div class="color-swatch-info"><div class="color-swatch-name">Luxe Purple</div><div class="color-swatch-hex">#460479</div><div class="color-swatch-role">Luxe tier</div></div></div>
179
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#92174d"></div><div class="color-swatch-info"><div class="color-swatch-name">Plus Magenta</div><div class="color-swatch-hex">#92174d</div><div class="color-swatch-role">Plus tier</div></div></div>
180
+ </div>
181
+ <div class="color-group-label">Text & Neutral</div>
182
+ <div class="color-grid">
183
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#222222</div><div class="color-swatch-role">Primary text</div></div></div>
184
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#6a6a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#6a6a6a</div><div class="color-swatch-role">Secondary text</div></div></div>
185
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c1c1c1"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c1c1c1</div><div class="color-swatch-role">Borders</div></div></div>
186
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#f2f2f2"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#f2f2f2</div><div class="color-swatch-role">Circular buttons</div></div></div>
187
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#428bff"></div><div class="color-swatch-info"><div class="color-swatch-name">Legal Blue</div><div class="color-swatch-hex">#428bff</div><div class="color-swatch-role">Legal links</div></div></div>
188
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#c13515"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#c13515</div><div class="color-swatch-role">Error text</div></div></div>
189
+ </div>
190
+ </section>
191
+
192
+ <hr class="section-divider">
193
+
194
+ <section class="section" id="typography">
195
+ <div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
196
+ <div class="type-sample"><div style="font-size:28px; font-weight:700; line-height:1.43;">Section Heading</div><div class="type-meta">Section — 28px / 700 / 1.43 / Cereal VF</div></div>
197
+ <div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px;">Card Heading</div><div class="type-meta">Card — 22px / 600 / 1.18 / -0.44px</div></div>
198
+ <div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.20; letter-spacing:-0.18px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.20 / -0.18px</div></div>
199
+ <div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.25;">UI Medium — Inspiration for future getaways</div><div class="type-meta">UI — 16px / 500 / 1.25</div></div>
200
+ <div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; color:var(--secondary);">Body — Istanbul, Turkey. Apartment in Kadikoy. 2 guests, 1 bed, 1 bath.</div><div class="type-meta">Body — 14px / 400 / 1.43</div></div>
201
+ <div class="type-sample"><div style="font-size:12px; font-weight:700; line-height:1.33;">Tag Bold — $145 night</div><div class="type-meta">Tag Bold — 12px / 700 / 1.33</div></div>
202
+ <div class="type-sample"><div style="font-size:8px; font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:0.32px;">SUPERHOST</div><div class="type-meta">Micro — 8px / 700 / uppercase / +0.32px</div></div>
203
+ </section>
204
+
205
+ <hr class="section-divider">
206
+
207
+ <section class="section" id="buttons">
208
+ <div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
209
+ <div class="button-row">
210
+ <div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Primary Dark</div></div>
211
+ <div class="button-item"><a class="btn-outline" href="#">Host</a><div class="button-label">Outlined</div></div>
212
+ <div class="button-item"><a class="btn-circle" href="#">&#8592;</a><div class="button-label">Circle Nav</div></div>
213
+ <div class="button-item"><a class="btn-circle" href="#">&#8594;</a><div class="button-label">Circle Nav</div></div>
214
+ <div class="button-item"><span style="display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px;">&#x1F50D;</span><div class="button-label">Search</div></div>
215
+ </div>
216
+ </section>
217
+
218
+ <hr class="section-divider">
219
+
220
+ <section class="section" id="cards">
221
+ <div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
222
+ <div class="card-grid">
223
+ <div class="card"><div class="card-img">Photo placeholder</div><div class="card-body"><h3>Istanbul, Turkey</h3><p>Entire apartment. 2 guests, 1 bed. $78 night.</p></div></div>
224
+ <div class="card"><div class="card-img" style="background:#eee;">Photo placeholder</div><div class="card-body"><h3>Barcelona, Spain</h3><p>Private room. 3 guests, 2 beds. $92 night.</p></div></div>
225
+ <div class="card"><div class="card-img" style="background:#e8e8e8;">Photo placeholder</div><div class="card-body"><h3>Galveston, TX</h3><p>Entire house. 6 guests, 3 beds. $145 night.</p></div></div>
226
+ </div>
227
+ </section>
228
+
229
+ <hr class="section-divider">
230
+
231
+ <section class="section" id="forms">
232
+ <div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
233
+ <div class="form-group"><label class="form-label">Where</label><input class="form-input" type="text" placeholder="Search destinations"><div class="form-state-label">Default</div></div>
234
+ <div class="form-group"><label class="form-label">Check in</label><input class="form-input form-input--focus" type="text" value="Apr 15, 2026"><div class="form-state-label">Focus (dark ring)</div></div>
235
+ <div class="form-group"><label class="form-label">Guests</label><input class="form-input form-input--error" type="text" value="0 guests"><div class="form-state-label">Error</div></div>
236
+ <div class="form-group"><label class="form-label">Message host</label><textarea class="form-textarea" placeholder="Tell your host about your trip..."></textarea></div>
237
+ </section>
238
+
239
+ <hr class="section-divider">
240
+
241
+ <section class="section">
242
+ <div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
243
+ <div class="spacing-row">
244
+ <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
245
+ <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
246
+ <div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
247
+ <div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
248
+ <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
249
+ <div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
250
+ </div>
251
+ </section>
252
+
253
+ <hr class="section-divider">
254
+
255
+ <section class="section">
256
+ <div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
257
+ <div class="radius-row">
258
+ <div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons</div></div>
259
+ <div class="radius-item"><div class="radius-box" style="border-radius:14px"></div><div class="radius-label">14px</div><div class="radius-context">Badges</div></div>
260
+ <div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Cards</div></div>
261
+ <div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div><div class="radius-context">Large</div></div>
262
+ <div class="radius-item"><div class="radius-box" style="border-radius:50%; width:56px; height:56px;"></div><div class="radius-label">50%</div><div class="radius-context">Controls</div></div>
263
+ </div>
264
+ </section>
265
+
266
+ <hr class="section-divider">
267
+
268
+ <section class="section">
269
+ <div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
270
+ <div class="elevation-grid">
271
+ <div class="elevation-card" style="border:1px solid #ebebeb;"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
272
+ <div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Three-layer warm</div></div>
273
+ <div class="elevation-card" style="box-shadow:var(--shadow-hover);"><div class="elevation-label">Hover</div><div class="elevation-desc">Interactive lift</div></div>
274
+ <div class="elevation-card" style="box-shadow:0 0 0 2px var(--near-black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Dark focus ring</div></div>
275
+ </div>
276
+ </section>
277
+
278
+ <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>
279
+
280
+ </body>
281
+ </html>
package/assets/themes/airtable/preview.html ADDED
@@ -0,0 +1,209 @@
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 Airtable</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@400;500;600;900&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root { --white:#fff; --navy:#181d26; --blue:#1b61c9; --gray:#333; --border:#e0e2e6; --weak:rgba(4,14,32,0.69); --light:#f8fafc; --font:'Inter',-apple-system,system-ui,Segoe UI,Roboto,sans-serif; }
12
+ * { margin:0; padding:0; box-sizing:border-box; }
13
+ body { background:var(--white); color:var(--navy); font-family:var(--font); font-size:16px; line-height:1.35; letter-spacing:0.08px; -webkit-font-smoothing:antialiased; }
14
+
15
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--border); }
16
+ .nav-brand { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; }
17
+ .nav-links { display:flex; gap:20px; list-style:none; }
18
+ .nav-links a { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; letter-spacing:0.14px; }
19
+ .nav-links a:hover { color:var(--blue); }
20
+ .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 20px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:0.08px; }
21
+
22
+ .hero { padding:80px 24px 64px; text-align:center; }
23
+ .hero h1 { font-size:48px; font-weight:400; line-height:1.15; margin-bottom:16px; }
24
+ .hero h1 span { color:var(--blue); }
25
+ .hero p { font-size:18px; color:var(--weak); max-width:520px; margin:0 auto 32px; letter-spacing:0.18px; line-height:1.35; }
26
+ .hero-buttons { display:flex; gap:12px; justify-content:center; }
27
+ .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:16px 24px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; border:none; }
28
+ .btn-outline { display:inline-block; background:var(--white); color:var(--navy); padding:16px 24px; border-radius:12px; border:1px solid var(--navy); font-size:16px; font-weight:500; text-decoration:none; }
29
+
30
+ .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
31
+ .section-label { font-size:14px; font-weight:500; color:var(--weak); letter-spacing:0.28px; margin-bottom:8px; }
32
+ .section-title { font-size:40px; font-weight:400; line-height:1.25; margin-bottom:24px; }
33
+ .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
34
+
35
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
36
+ .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--border); }
37
+ .color-swatch-block { height:56px; }
38
+ .color-swatch-info { padding:8px; }
39
+ .color-swatch-name { font-size:11px; font-weight:500; letter-spacing:0.11px; margin-bottom:1px; }
40
+ .color-swatch-hex { font-size:9px; color:var(--weak); font-family:monospace; }
41
+ .color-group-label { font-size:11px; font-weight:500; color:var(--weak); margin:16px 0 6px; letter-spacing:0.16px; }
42
+
43
+ .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,230,0.5); }
44
+ .type-sample:last-child { border-bottom:none; }
45
+ .type-meta { font-size:9px; color:var(--weak); margin-top:4px; font-family:monospace; }
46
+
47
+ .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
48
+ .button-item { text-align:center; }
49
+ .button-label { font-size:9px; color:var(--weak); margin-top:4px; }
50
+
51
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
52
+ .card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:20px; }
53
+ .card h3 { font-size:24px; font-weight:400; letter-spacing:0.12px; line-height:1.30; margin-bottom:8px; }
54
+ .card p { font-size:14px; color:var(--weak); letter-spacing:0.07px; }
55
+
56
+ .form-group { margin-bottom:12px; max-width:380px; }
57
+ .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:4px; letter-spacing:0.14px; }
58
+ .form-input { width:100%; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; letter-spacing:0.08px; }
59
+ .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
60
+ .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
61
+ .form-input--error { border-color:#c00; }
62
+ .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
63
+ .form-state-label { font-size:9px; color:var(--weak); margin-top:3px; }
64
+
65
+ .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
66
+ .spacing-item { text-align:center; }
67
+ .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }
68
+ .spacing-value { font-size:8px; color:var(--weak); font-family:monospace; }
69
+
70
+ .radius-row { display:flex; gap:10px; flex-wrap:wrap; }
71
+ .radius-item { text-align:center; }
72
+ .radius-box { width:48px; height:48px; background:var(--light); border:1px solid var(--border); margin-bottom:3px; }
73
+ .radius-label { font-size:8px; color:var(--weak); font-family:monospace; }
74
+
75
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
76
+ .elevation-card { background:var(--white); border-radius:16px; padding:14px; text-align:center; }
77
+ .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }
78
+ .elevation-desc { font-size:8px; color:var(--weak); font-family:monospace; }
79
+
80
+ .footer { padding:24px; text-align:center; background:var(--navy); color:rgba(255,255,255,0.5); font-size:11px; }
81
+ .footer a { color:var(--white); text-decoration:underline; }
82
+
83
+ @media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
84
+
85
+ /* getdesign.md nav additions */
86
+ .nav-left { display: flex; align-items: center; gap: 20px; }
87
+ .nav-brand-link,
88
+ .nav-brand-link:link,
89
+ .nav-brand-link:visited,
90
+ .nav-brand-link:hover,
91
+ .nav-brand-link:active { text-decoration: none; color: inherit; }
92
+ .nav-github,
93
+ .nav-github:link,
94
+ .nav-github:visited,
95
+ .nav-github:hover,
96
+ .nav-github:active {
97
+ display: inline-flex;
98
+ align-items: center;
99
+ gap: 6px;
100
+ font-size: 12px;
101
+ font-weight: 600;
102
+ color: inherit;
103
+ text-decoration: none;
104
+ padding: 5px 10px;
105
+ border: 1px solid rgba(128, 128, 128, 0.3);
106
+ border-radius: 6px;
107
+ opacity: 0.75;
108
+ transition: opacity 200ms ease, border-color 200ms ease;
109
+ font-family: inherit;
110
+ line-height: 1;
111
+ white-space: nowrap;
112
+ }
113
+ .nav-github:hover { opacity: 1; border-color: rgba(128, 128, 128, 0.55); }
114
+ .nav-github svg { display: block; flex-shrink: 0; }
115
+
116
+ /* getdesign.md nav centering */
117
+ .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
118
+ .nav > .nav-left { justify-self: start; }
119
+ .nav > .nav-links { justify-self: center; }
120
+ .nav > :last-child { justify-self: end; }
121
+ </style>
122
+ </head>
123
+ <body>
124
+
125
+ <nav class="nav"><div class="nav-left">
126
+ <a href="https://getdesign.md/" target="_blank" rel="noopener noreferrer" class="nav-brand-link">
127
+ <span class="nav-brand">getdesign.md</span>
128
+ </a>
129
+ <a class="nav-github" href="https://github.com/VoltAgent/awesome-design-md" target="_blank" rel="noopener noreferrer" aria-label="awesome-design-md on GitHub">
130
+ <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>
131
+ awesome-design-md
132
+ </a>
133
+ </div><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up for free</a></nav>
134
+
135
+ <section class="hero"><h1>Design System<br>Inspired by <span>Airtable</span></h1><p>Every color, font, and component — connected in one workspace.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up for free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
136
+
137
+ <hr class="section-divider">
138
+
139
+ <section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
140
+ <div class="color-group-label">Primary</div>
141
+ <div class="color-grid">
142
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#181d26"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#181d26</div></div></div>
143
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#1b61c9"></div><div class="color-swatch-info"><div class="color-swatch-name">Airtable Blue</div><div class="color-swatch-hex">#1b61c9</div></div></div>
144
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div></div></div>
145
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#254fad"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Blue</div><div class="color-swatch-hex">#254fad</div></div></div>
146
+ </div>
147
+ <div class="color-group-label">Neutral</div>
148
+ <div class="color-grid">
149
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#333333"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#333333</div></div></div>
150
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e0e2e6</div></div></div>
151
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#f8fafc"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f8fafc</div></div></div>
152
+ </div></section>
153
+
154
+ <hr class="section-divider">
155
+
156
+ <section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
157
+ <div class="type-sample"><div style="font-size:48px; font-weight:400; line-height:1.15;">Display Hero</div><div class="type-meta">Haas — 48px / 400 / 1.15</div></div>
158
+ <div class="type-sample"><div style="font-size:48px; font-weight:900; line-height:1.50;">Display Bold</div><div class="type-meta">Haas Groot Disp — 48px / 900 / 1.50</div></div>
159
+ <div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.15;">Sub-heading</div><div class="type-meta">Haas — 32px / 400 / 1.15</div></div>
160
+ <div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.35; letter-spacing:0.18px; color:var(--weak);">Body — All your teams, all their workflows — connected in one workspace.</div><div class="type-meta">Haas — 18px / 400 / 1.35 / +0.18px</div></div>
161
+ <div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.30; letter-spacing:0.16px;">Button Label</div><div class="type-meta">Haas — 16px / 500 / 1.30 / +0.16px</div></div>
162
+ <div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.35; letter-spacing:0.28px; color:var(--weak);">Caption — Updated 3 min ago</div><div class="type-meta">Haas — 14px / 500 / 1.35 / +0.28px</div></div>
163
+ </section>
164
+
165
+ <hr class="section-divider">
166
+
167
+ <section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
168
+ <div class="button-row">
169
+ <div class="button-item"><a class="btn-blue" href="#">Sign up</a><div class="button-label">Primary Blue</div></div>
170
+ <div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
171
+ </div></section>
172
+
173
+ <hr class="section-divider">
174
+
175
+ <section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
176
+ <div class="card-grid">
177
+ <div class="card"><h3>Product Development</h3><p>Build products faster with connected workflows and real-time collaboration.</p></div>
178
+ <div class="card"><h3>Marketing Campaigns</h3><p>Plan, execute, and track campaigns from ideation to launch.</p></div>
179
+ <div class="card"><h3>Operations</h3><p>Streamline business processes with automated workflows.</p></div>
180
+ </div></section>
181
+
182
+ <hr class="section-divider">
183
+
184
+ <section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
185
+ <div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
186
+ <div class="form-group"><label class="form-label">Workspace</label><input class="form-input form-input--focus" type="text" value="My Team"><div class="form-state-label">Focus (blue ring)</div></div>
187
+ <div class="form-group"><label class="form-label">Base Name</label><input class="form-input form-input--error" type="text" value=""><div class="form-state-label">Error</div></div>
188
+ <div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your base..."></textarea></div>
189
+ </section>
190
+
191
+ <hr class="section-divider">
192
+
193
+ <section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
194
+ <div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
195
+
196
+ <hr class="section-divider">
197
+
198
+ <section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
199
+ <div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50%; width:48px; height:48px;"></div><div class="radius-label">50%</div></div></div></section>
200
+
201
+ <hr class="section-divider">
202
+
203
+ <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
204
+ <div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;"><div class="elevation-label">Blue Shadow</div><div class="elevation-desc">Blue-tinted multi-layer</div></div><div class="elevation-card" style="box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;"><div class="elevation-label">Soft</div><div class="elevation-desc">Ambient navy glow</div></div></div></section>
205
+
206
+ <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>
207
+
208
+ </body>
209
+ </html>