npm - ai-spector - Versions diffs - 0.4.0 → 0.4.2 - Mend

ai-spector 0.4.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/README.md +10 -2
package/assets/themes/airbnb/preview.html +281 -0
package/assets/themes/airtable/preview.html +209 -0
package/assets/themes/apple/preview.html +461 -0
package/assets/themes/binance/preview.html +1013 -0
package/assets/themes/bmw/preview.html +255 -0
package/assets/themes/bugatti/preview.html +879 -0
package/assets/themes/cal/preview.html +620 -0
package/assets/themes/claude/preview.html +873 -0
package/assets/themes/clay/preview.html +360 -0
package/assets/themes/clickhouse/preview.html +833 -0
package/assets/themes/cohere/preview.html +854 -0
package/assets/themes/coinbase/preview.html +208 -0
package/assets/themes/composio/preview.html +980 -0
package/assets/themes/cursor/preview.html +428 -0
package/assets/themes/elevenlabs/preview.html +296 -0
package/assets/themes/expo/preview.html +580 -0
package/assets/themes/ferrari/preview.html +1168 -0
package/assets/themes/framer/preview.html +930 -0
package/assets/themes/hashicorp/preview.html +1238 -0
package/assets/themes/ibm/preview.html +473 -0
package/assets/themes/intercom/preview.html +229 -0
package/assets/themes/kraken/preview.html +213 -0
package/assets/themes/lamborghini/preview.html +428 -0
package/assets/themes/linear.app/preview.html +418 -0
package/assets/themes/lovable/preview.html +393 -0
package/assets/themes/meta/preview.html +656 -0
package/assets/themes/minimax/preview.html +1293 -0
package/assets/themes/mintlify/preview.html +443 -0
package/assets/themes/miro/preview.html +218 -0
package/assets/themes/mistral.ai/preview.html +850 -0
package/assets/themes/mongodb/preview.html +304 -0
package/assets/themes/nike/preview.html +1182 -0
package/assets/themes/notion/preview.html +409 -0
package/assets/themes/nvidia/preview.html +411 -0
package/assets/themes/ollama/preview.html +725 -0
package/assets/themes/opencode.ai/preview.html +402 -0
package/assets/themes/pinterest/preview.html +277 -0
package/assets/themes/playstation/preview.html +1125 -0
package/assets/themes/posthog/preview.html +794 -0
package/assets/themes/raycast/preview.html +735 -0
package/assets/themes/renault/preview.html +652 -0
package/assets/themes/replicate/preview.html +878 -0
package/assets/themes/resend/preview.html +399 -0
package/assets/themes/revolut/preview.html +278 -0
package/assets/themes/runwayml/preview.html +712 -0
package/assets/themes/sanity/preview.html +1180 -0
package/assets/themes/sentry/preview.html +996 -0
package/assets/themes/shopify/preview.html +611 -0
package/assets/themes/spacex/preview.html +265 -0
package/assets/themes/spotify/preview.html +275 -0
package/assets/themes/stripe/preview.html +464 -0
package/assets/themes/supabase/preview.html +1002 -0
package/assets/themes/superhuman/preview.html +996 -0
package/assets/themes/tesla/preview.html +971 -0
package/assets/themes/theverge/preview.html +1143 -0
package/assets/themes/together.ai/preview.html +944 -0
package/assets/themes/uber/preview.html +1164 -0
package/assets/themes/vercel/preview.html +412 -0
package/assets/themes/voltagent/preview.html +813 -0
package/assets/themes/warp/preview.html +580 -0
package/assets/themes/webflow/preview.html +191 -0
package/assets/themes/wired/preview.html +1049 -0
package/assets/themes/wise/preview.html +274 -0
package/assets/themes/x.ai/preview.html +452 -0
package/assets/themes/zapier/preview.html +417 -0
package/dist/cli.js +37 -1
package/dist/cli.js.map +1 -1
package/dist/commands/graph-visualize.d.ts.map +1 -1
package/dist/commands/graph-visualize.js +1 -22
package/dist/commands/graph-visualize.js.map +1 -1
package/dist/commands/prototype.d.ts +19 -0
package/dist/commands/prototype.d.ts.map +1 -1
package/dist/commands/prototype.js +78 -3
package/dist/commands/prototype.js.map +1 -1
package/dist/prototype/config.d.ts +9 -1
package/dist/prototype/config.d.ts.map +1 -1
package/dist/prototype/config.js +29 -0
package/dist/prototype/config.js.map +1 -1
package/dist/prototype/htpasswd.d.ts +5 -0
package/dist/prototype/htpasswd.d.ts.map +1 -0
package/dist/prototype/htpasswd.js +33 -0
package/dist/prototype/htpasswd.js.map +1 -0
package/dist/prototype/theme-preview.d.ts +17 -0
package/dist/prototype/theme-preview.d.ts.map +1 -0
package/dist/prototype/theme-preview.js +73 -0
package/dist/prototype/theme-preview.js.map +1 -0
package/dist/prototype/types.d.ts +8 -0
package/dist/prototype/types.d.ts.map +1 -1
package/dist/prototype/validate.d.ts.map +1 -1
package/dist/prototype/validate.js +19 -0
package/dist/prototype/validate.js.map +1 -1
package/dist/util/open-browser.d.ts +3 -0
package/dist/util/open-browser.d.ts.map +1 -0
package/dist/util/open-browser.js +24 -0
package/dist/util/open-browser.js.map +1 -0
package/package.json +4 -2
package/scaffold/.ai-spector/.docflow/config/language.json +4 -0
package/scaffold/cursor/WORKFLOW.md +2 -1
package/scaffold/cursor/skills/_skill-router.md +1 -1
package/scaffold/cursor/skills/ai-spector/references/generate-workflow.md +8 -0
package/scaffold/cursor/skills/ai-spector/references/language-picker.md +70 -0
package/scaffold/cursor/skills/ai-spector/references/project-conventions.md +13 -4
package/scaffold/cursor/skills/ai-spector-generate-basic-design/SKILL.md +1 -0
package/scaffold/cursor/skills/ai-spector-generate-detail-design/SKILL.md +1 -0
package/scaffold/cursor/skills/ai-spector-generate-prototype/SKILL.md +13 -5
package/scaffold/cursor/skills/ai-spector-generate-prototype/references/auth-picker.md +61 -0
package/scaffold/cursor/skills/ai-spector-generate-prototype/references/runbook.md +32 -10
package/scaffold/cursor/skills/ai-spector-generate-prototype/references/theme-picker.md +118 -0
package/scaffold/cursor/skills/ai-spector-generate-srs/SKILL.md +1 -0
package/scaffold/prototype/README.md +24 -3

package/assets/themes/bugatti/preview.html ADDED Viewed

@@ -0,0 +1,879 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspiration of Bugatti</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;700&family=Space+Mono:wght@400;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --velvet-black: #000000;
+    --showroom-white: #ffffff;
+    --silver-mist: #999999;
+    --canvas: #ffffff;
+    --canvas-inverted: #000000;
+    --primary-text: #000000;
+    --secondary-text: #4a4a4a;
+    --tertiary-text: #999999;
+    --hairline: #e8e8e8;
+    --hairline-strong: #999999;
+    --font-display: 'Unbounded', 'Bugatti Display', ui-sans-serif, system-ui, sans-serif;
+    --font-mono: 'Space Mono', 'Bugatti Monospace', ui-sans-serif, system-ui, monospace;
+    --font-text: 'Inter', 'Bugatti Text Regular', ui-sans-serif, system-ui, sans-serif;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+  body {
+    background: var(--canvas);
+    color: var(--primary-text);
+    font-family: var(--font-text);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.50;
+  }
+  a { color: inherit; text-decoration: none; transition: opacity 250ms ease; }
+  a:hover { opacity: 0.6; }
+  button { font-family: inherit; cursor: pointer; border: none; background: none; }
+  /* NAV */
+  .nav {
+    position: sticky; top: 0; z-index: 100;
+    padding: 18px 48px;
+    background: var(--canvas);
+    border-bottom: 1px solid var(--hairline);
+  }
+  .nav-brand {
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--primary-text);
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+  }
+  .nav-links {
+    display: flex; gap: 32px; list-style: none; align-items: center;
+  }
+  .nav-links a {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--primary-text);
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+  }
+  .nav-cta {
+    display: inline-block;
+    background: transparent;
+    color: var(--primary-text);
+    padding: 10px 20px;
+    border: 1px solid var(--primary-text);
+    border-radius: 9999px;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 400;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    transition: background 250ms ease, color 250ms ease;
+  }
+  .nav-cta:hover {
+    background: var(--primary-text);
+    color: var(--canvas);
+    opacity: 1;
+  }
+  /* HERO */
+  .hero {
+    padding: 96px 48px 96px;
+    background: var(--canvas);
+    position: relative;
+    overflow: hidden;
+  }
+  .hero-eyebrow {
+    display: block;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--primary-text);
+    text-transform: uppercase;
+    letter-spacing: 1.4px;
+    margin-bottom: 36px;
+  }
+  .hero h1 {
+    font-family: var(--font-display);
+    font-size: clamp(48px, 7vw, 104px);
+    font-weight: 400;
+    line-height: 1.05;
+    letter-spacing: -0.5px;
+    color: var(--primary-text);
+    margin-bottom: 48px;
+    text-transform: uppercase;
+    max-width: 1200px;
+  }
+  .hero p {
+    font-family: var(--font-text);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.50;
+    color: var(--secondary-text);
+    max-width: 580px;
+    margin-bottom: 48px;
+  }
+  .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
+  /* BUTTONS */
+  .btn-primary {
+    display: inline-block;
+    background: transparent;
+    color: var(--primary-text);
+    padding: 12px 24px;
+    border: 1px solid var(--primary-text);
+    border-radius: 9999px;
+    font-family: var(--font-mono);
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+    transition: background 250ms ease, color 250ms ease;
+  }
+  .btn-primary:hover {
+    background: var(--primary-text);
+    color: var(--canvas);
+    opacity: 1;
+  }
+  .btn-inverted {
+    display: inline-block;
+    background: var(--primary-text);
+    color: var(--canvas);
+    padding: 12px 24px;
+    border: 1px solid var(--primary-text);
+    border-radius: 9999px;
+    font-family: var(--font-mono);
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+    transition: background 250ms ease, color 250ms ease;
+  }
+  .btn-inverted:hover {
+    background: transparent;
+    color: var(--primary-text);
+    opacity: 1;
+  }
+  .btn-secondary {
+    display: inline-block;
+    background: transparent;
+    color: var(--primary-text);
+    padding: 6px 12px;
+    border: 1px solid var(--silver-mist);
+    border-radius: 6px;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 400;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    transition: border-color 250ms ease;
+  }
+  .btn-secondary:hover {
+    border-color: var(--primary-text);
+    opacity: 1;
+  }
+  .btn-ghost {
+    display: inline-block;
+    background: transparent;
+    color: var(--primary-text);
+    padding: 0;
+    border: none;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 400;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    transition: opacity 250ms ease;
+  }
+  /* SECTION FRAME */
+  section.preview-section {
+    padding: 120px 48px;
+    background: var(--canvas);
+    border-top: 1px solid var(--hairline);
+  }
+  section.preview-section.inverted {
+    background: var(--canvas-inverted);
+    color: var(--canvas);
+  }
+  section.preview-section.inverted .section-eyebrow,
+  section.preview-section.inverted .section-title,
+  section.preview-section.inverted .section-subtitle { color: var(--canvas); }
+  .section-eyebrow {
+    display: block;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--primary-text);
+    text-transform: uppercase;
+    letter-spacing: 1.4px;
+    margin-bottom: 24px;
+  }
+  .section-title {
+    font-family: var(--font-display);
+    font-size: clamp(36px, 6vw, 96px);
+    font-weight: 400;
+    line-height: 1.00;
+    letter-spacing: -0.5px;
+    color: var(--primary-text);
+    text-transform: uppercase;
+    margin-bottom: 20px;
+  }
+  .section-subtitle {
+    font-family: var(--font-text);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.50;
+    color: var(--secondary-text);
+    margin-bottom: 64px;
+    max-width: 620px;
+  }
+  /* COLOR PALETTE */
+  .color-group { margin-bottom: 48px; }
+  .color-group-label {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1.4px;
+    color: var(--primary-text);
+    padding-bottom: 16px;
+    margin-bottom: 28px;
+    border-bottom: 1px solid var(--hairline);
+  }
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 28px;
+  }
+  .color-swatch {
+    background: var(--canvas);
+    border: 1px solid var(--hairline);
+    padding: 0;
+    overflow: hidden;
+  }
+  .color-block { height: 180px; }
+  .color-meta { padding: 24px 26px 28px; }
+  .color-name {
+    font-family: var(--font-display);
+    font-size: 22px;
+    font-weight: 400;
+    line-height: 1.10;
+    color: var(--primary-text);
+    letter-spacing: 0.3px;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+  }
+  .color-hex {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    color: var(--tertiary-text);
+    margin-bottom: 14px;
+  }
+  .color-role {
+    font-family: var(--font-text);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.50;
+    color: var(--secondary-text);
+  }
+  /* TYPOGRAPHY */
+  .type-row {
+    display: grid;
+    grid-template-columns: 260px 1fr;
+    gap: 48px;
+    padding: 48px 0;
+    border-bottom: 1px solid var(--hairline);
+    align-items: baseline;
+  }
+  .type-row:last-child { border-bottom: none; }
+  .type-meta {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    color: var(--tertiary-text);
+    line-height: 1.7;
+  }
+  .type-meta strong {
+    display: block;
+    color: var(--primary-text);
+    font-weight: 700;
+    margin-bottom: 8px;
+    font-size: 12px;
+  }
+  .type-sample { color: var(--primary-text); overflow-wrap: break-word; }
+  /* BUTTONS GRID */
+  .button-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 24px;
+  }
+  .button-cell {
+    padding: 48px 36px;
+    border: 1px solid var(--hairline);
+    background: var(--canvas);
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+  }
+  .button-cell .label {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1.4px;
+    color: var(--tertiary-text);
+  }
+  /* MEDIA BLOCK (film chapter) */
+  .media-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 64px;
+  }
+  .media-block {
+    position: relative;
+    aspect-ratio: 21 / 9;
+    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 64px;
+    color: var(--canvas);
+  }
+  .media-block::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
+    pointer-events: none;
+  }
+  .media-block > * { position: relative; z-index: 1; }
+  .media-eyebrow {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 1.4px;
+    margin-bottom: 20px;
+    opacity: 0.85;
+  }
+  .media-headline {
+    font-family: var(--font-display);
+    font-size: clamp(48px, 8vw, 120px);
+    font-weight: 400;
+    line-height: 1.00;
+    text-transform: uppercase;
+    letter-spacing: -0.5px;
+    margin-bottom: 28px;
+    max-width: 900px;
+  }
+  .media-cta {
+    display: inline-block;
+    background: transparent;
+    color: var(--canvas);
+    padding: 12px 24px;
+    border: 1px solid var(--canvas);
+    border-radius: 9999px;
+    font-family: var(--font-mono);
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+    align-self: flex-start;
+    transition: background 250ms ease, color 250ms ease;
+  }
+  .media-cta:hover {
+    background: var(--canvas);
+    color: var(--primary-text);
+    opacity: 1;
+  }
+  /* FORMS */
+  .form-stack {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 36px;
+    max-width: 920px;
+  }
+  .form-field { display: flex; flex-direction: column; gap: 14px; }
+  .form-label {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1.4px;
+    color: var(--primary-text);
+  }
+  .form-input {
+    background: var(--canvas);
+    border: 1px solid var(--silver-mist);
+    border-radius: 6px;
+    padding: 16px 18px;
+    font-family: var(--font-text);
+    font-size: 16px;
+    font-weight: 400;
+    color: var(--primary-text);
+    outline: none;
+    transition: border-color 250ms ease;
+  }
+  .form-input::placeholder { color: var(--tertiary-text); }
+  .form-input.focus { border-color: var(--primary-text); }
+  .form-input.error { border-color: var(--silver-mist); color: var(--primary-text); }
+  .form-error {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    color: var(--tertiary-text);
+  }
+  .form-textarea {
+    min-height: 120px;
+    resize: vertical;
+    line-height: 1.5;
+  }
+  /* SPACING */
+  .spacing-row {
+    display: flex;
+    align-items: flex-end;
+    gap: 32px;
+    flex-wrap: wrap;
+  }
+  .spacing-item { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
+  .spacing-block {
+    background: var(--primary-text);
+    height: 80px;
+  }
+  .spacing-label {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    color: var(--primary-text);
+  }
+  /* RADIUS */
+  .radius-row {
+    display: flex;
+    gap: 48px;
+    flex-wrap: wrap;
+    align-items: flex-end;
+  }
+  .radius-item { display: flex; flex-direction: column; gap: 18px; align-items: center; }
+  .radius-block {
+    width: 130px;
+    height: 130px;
+    background: transparent;
+    border: 1px solid var(--primary-text);
+  }
+  .radius-block.r0 { border-radius: 0; }
+  .radius-block.r6 { border-radius: 6px; }
+  .radius-block.r9999 { border-radius: 9999px; width: 180px; height: 56px; }
+  .radius-label {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    color: var(--primary-text);
+    text-align: center;
+  }
+  .radius-label small { display: block; color: var(--tertiary-text); margin-top: 6px; font-weight: 400; font-size: 10px; letter-spacing: 1px; }
+  /* ELEVATION */
+  .elevation-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 28px;
+  }
+  .elevation-cell {
+    padding: 52px 32px;
+    background: var(--canvas);
+    text-align: center;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 18px;
+  }
+  .elevation-cell.lvl-0 { border: none; }
+  .elevation-cell.lvl-1 { border: 1px solid var(--silver-mist); }
+  .elevation-cell.lvl-2 { border: 1px solid var(--primary-text); }
+  .elevation-cell.lvl-3 {
+    background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, rgba(0, 0, 0, 0.2) 100%);
+    position: relative;
+  }
+  .elevation-cell .label {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1.4px;
+    color: var(--primary-text);
+  }
+  .elevation-cell .desc {
+    font-family: var(--font-text);
+    font-size: 13px;
+    line-height: 1.50;
+    color: var(--secondary-text);
+  }
+  /* FOOTER */
+  .footer {
+    background: var(--primary-text);
+    color: var(--canvas);
+    padding: 56px 48px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1.4px;
+    text-align: center;
+  }
+  .footer a { color: var(--canvas); }
+  /* RESPONSIVE */
+  @media (max-width: 900px) {
+    .hero { padding: 72px 24px 72px; }
+    .hero h1 { font-size: clamp(48px, 12vw, 96px); }
+    .section-title { font-size: clamp(36px, 9vw, 60px); }
+    section.preview-section { padding: 80px 24px; }
+    .form-stack { grid-template-columns: 1fr; }
+    .type-row { grid-template-columns: 1fr; gap: 20px; }
+    .nav { padding: 14px 20px; }
+    .nav-links { display: none; }
+    .media-block { padding: 36px 28px; aspect-ratio: 4/3; }
+    .media-headline { font-size: 44px; }
+  }
+  /* getdesign.md nav additions */
+  .nav-left { display: flex; align-items: center; gap: 20px; }
+  .nav-brand-link,
+  .nav-brand-link:link,
+  .nav-brand-link:visited,
+  .nav-brand-link:hover,
+  .nav-brand-link:active { text-decoration: none; color: inherit; }
+  .nav-github,
+  .nav-github:link,
+  .nav-github:visited,
+  .nav-github:hover,
+  .nav-github:active {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    color: inherit;
+    text-decoration: none;
+    padding: 5px 10px;
+    border: 1px solid rgba(128, 128, 128, 0.3);
+    border-radius: 6px;
+    opacity: 0.75;
+    transition: opacity 200ms ease, border-color 200ms ease;
+    font-family: inherit;
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .nav-github:hover { opacity: 1; border-color: rgba(128, 128, 128, 0.55); }
+  .nav-github svg { display: block; flex-shrink: 0; }
+  /* getdesign.md nav centering */
+  .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
+  .nav > .nav-left { justify-self: start; }
+  .nav > .nav-links { justify-self: center; }
+  .nav > :last-child { justify-self: end; }
+</style>
+</head>
+<body>
+<nav class="nav">
+  <div class="nav-left">
+    <a href="https://getdesign.md/" target="_blank" rel="noopener noreferrer" class="nav-brand-link">
+      <span class="nav-brand">getdesign.md</span>
+    </a>
+    <a class="nav-github" href="https://github.com/VoltAgent/awesome-design-md" target="_blank" rel="noopener noreferrer" aria-label="awesome-design-md on GitHub">
+      <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>
+      awesome-design-md
+    </a>
+  </div>
+  <ul class="nav-links">
+    <li><a href="#palette">Palette</a></li>
+    <li><a href="#typography">Type</a></li>
+    <li><a href="#components">Components</a></li>
+    <li><a href="#layout">Layout</a></li>
+  </ul>
+  <button class="nav-cta">Store</button>
+</nav>
+<section class="hero">
+  <span class="hero-eyebrow">Design System / Couture Automotive</span>
+  <h1>Design System Inspiration of Bugatti</h1>
+  <p>Cinematic negative space, monumental display typography, and a monochrome palette that refuses to compete with the product. Generated from DESIGN.md.</p>
+  <div class="hero-buttons">
+    <button class="btn-primary">Explore the System</button>
+    <button class="btn-inverted">Read the Dossier</button>
+  </div>
+</section>
+<!-- 1. PALETTE -->
+<section class="preview-section" id="palette">
+  <span class="section-eyebrow">Section 01 / Palette</span>
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-subtitle">Velvet black canvas, showroom white type, one gray for the quiet moments. No accents. The product provides the color.</p>
+  <div class="color-group">
+    <div class="color-group-label">Primary</div>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-block" style="background: #000000;"></div>
+        <div class="color-meta">
+          <div class="color-name">Velvet Black</div>
+          <div class="color-hex">#000000</div>
+          <div class="color-role">The entire canvas. A display-stand surface â the way a jewelry brand treats black velvet.</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-block" style="background: #ffffff; border-bottom: 1px solid #e8e8e8;"></div>
+        <div class="color-meta">
+          <div class="color-name">Showroom White</div>
+          <div class="color-hex">#FFFFFF</div>
+          <div class="color-role">All text, all borders, all CTAs. The only color at rest on the chrome.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="color-group">
+    <div class="color-group-label">Secondary</div>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-block" style="background: #999999;"></div>
+        <div class="color-meta">
+          <div class="color-name">Silver Mist</div>
+          <div class="color-hex">#999999</div>
+          <div class="color-role">The one gray. Tertiary text, disabled states, secondary button borders. Never a color â just quieter white.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="color-group">
+    <div class="color-group-label">Accent</div>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-block" style="background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 12px, #ffffff 12px, #ffffff 24px);"></div>
+        <div class="color-meta">
+          <div class="color-name">None</div>
+          <div class="color-hex">â</div>
+          <div class="color-role">Bugatti does not use accent colors. The car paint is the accent. The chrome stays silent.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- 2. TYPOGRAPHY -->
+<section class="preview-section" id="typography">
+  <span class="section-eyebrow">Section 02 / Typography</span>
+  <h2 class="section-title">Typographic Hierarchy</h2>
+  <p class="section-subtitle">Bugatti Display for monumental headlines. Bugatti Monospace for every UI label. Bugatti Text Regular for body. No bold, only scale.</p>
+  <div class="type-row">
+    <div class="type-meta"><strong>Monumental Hero</strong>Bugatti Display Â· 288px / 400 / 1.00</div>
+    <div class="type-sample" style="font-family: var(--font-display); font-size: clamp(72px, 14vw, 200px); font-weight: 400; line-height: 1.00; letter-spacing: -1px; text-transform: uppercase;">BUGATTI</div>
+  </div>
+  <div class="type-row">
+    <div class="type-meta"><strong>Mid Display</strong>Bugatti Display Â· 60px / 400 / 1.00 / 1.4px</div>
+    <div class="type-sample" style="font-family: var(--font-display); font-size: 60px; font-weight: 400; line-height: 1.00; letter-spacing: 1.4px; text-transform: uppercase;">The F.K.P. Hommage</div>
+  </div>
+  <div class="type-row">
+    <div class="type-meta"><strong>Section Heading</strong>Bugatti Display Â· 36px / 400 / 1.11</div>
+    <div class="type-sample" style="font-family: var(--font-display); font-size: 36px; font-weight: 400; line-height: 1.11;">A tribute to visionary creation</div>
+  </div>
+  <div class="type-row">
+    <div class="type-meta"><strong>Monumental Mono</strong>Bugatti Monospace Â· 60px / 400 / 1.00</div>
+    <div class="type-sample" style="font-family: var(--font-mono); font-size: 60px; font-weight: 400; line-height: 1.00; text-transform: uppercase;">W16 / 1600HP</div>
+  </div>
+  <div class="type-row">
+    <div class="type-meta"><strong>Lead Body</strong>Bugatti Text Regular Â· 20px / 400 / 1.40</div>
+    <div class="type-sample" style="font-family: var(--font-text); font-size: 20px; font-weight: 400; line-height: 1.40;">Honoring the vision and the visionary creator, this chapter of Bugatti's history is dedicated to the founding spirit of the marque.</div>
+  </div>
+  <div class="type-row">
+    <div class="type-meta"><strong>Body Regular</strong>Bugatti Text Regular Â· 16px / 400 / 1.50</div>
+    <div class="type-sample" style="font-family: var(--font-text); font-size: 16px; font-weight: 400; line-height: 1.50;">Standard reading body copy for the rare paragraph moments where narrative context supports the imagery.</div>
+  </div>
+  <div class="type-row">
+    <div class="type-meta"><strong>UI Link / Button</strong>Bugatti Monospace Â· 14px / 400 / 1.43 / 1.4px / UPPER</div>
+    <div class="type-sample" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: 1.4px; text-transform: uppercase;">Explore our opportunities</div>
+  </div>
+  <div class="type-row">
+    <div class="type-meta"><strong>Compact Button</strong>Bugatti Monospace Â· 12px / 400 / 1.33 / 1.2px / UPPER</div>
+    <div class="type-sample" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.33; letter-spacing: 1.2px; text-transform: uppercase;">Menu</div>
+  </div>
+  <div class="type-row">
+    <div class="type-meta"><strong>Caption Wide</strong>Bugatti Monospace Â· 14px / 400 / 1.43 / 1.4px</div>
+    <div class="type-sample" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: 1.4px;">Molsheim, France Â· 2026</div>
+  </div>
+  <div class="type-row">
+    <div class="type-meta"><strong>Caption Micro</strong>Bugatti Monospace Â· 12px / 400 / 1.33</div>
+    <div class="type-sample" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.33;">Photography by the Bugatti Atelier</div>
+  </div>
+</section>
+<!-- 3. BUTTONS -->
+<section class="preview-section" id="components">
+  <span class="section-eyebrow">Section 03 / Buttons</span>
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-subtitle">Full-pill or slightly-rounded utility. Transparent fills with 1px borders. Mono caps labels only.</p>
+  <div class="button-grid">
+    <div class="button-cell">
+      <span class="label">Primary â Outlined Pill</span>
+      <div><button class="btn-primary">Explore Models</button></div>
+    </div>
+    <div class="button-cell">
+      <span class="label">Inverted â Filled Pill</span>
+      <div><button class="btn-inverted">Configure</button></div>
+    </div>
+    <div class="button-cell">
+      <span class="label">Secondary â 6px Utility</span>
+      <div><button class="btn-secondary">Close</button></div>
+    </div>
+    <div class="button-cell">
+      <span class="label">Ghost â Unbordered</span>
+      <div><button class="btn-ghost">Learn More â</button></div>
+    </div>
+  </div>
+</section>
+<!-- 4. MEDIA BLOCKS (film chapters) -->
+<section class="preview-section">
+  <span class="section-eyebrow">Section 04 / Media Chapters</span>
+  <h2 class="section-title">Film Chapters</h2>
+  <p class="section-subtitle">Bugatti has no cards. It has cinematic chapters â full-bleed media with an overlaid headline and single CTA.</p>
+  <div class="media-grid">
+    <div class="media-block">
+      <span class="media-eyebrow">Chapter 01 Â· Molsheim</span>
+      <h3 class="media-headline">Handcrafted in the atelier</h3>
+      <a class="media-cta">Read the Story</a>
+    </div>
+    <div class="media-block" style="background: linear-gradient(135deg, #3a2a1a 0%, #000000 100%);">
+      <span class="media-eyebrow">Chapter 02 Â· Engineering</span>
+      <h3 class="media-headline">1600 horsepower of quiet ambition</h3>
+      <a class="media-cta">Discover the W16</a>
+    </div>
+  </div>
+</section>
+<!-- 5. FORMS -->
+<section class="preview-section">
+  <span class="section-eyebrow">Section 05 / Forms</span>
+  <h2 class="section-title">Inputs</h2>
+  <p class="section-subtitle">The homepage has no forms. When they appear on deeper pages, they follow the same restraint: 6px radius, Silver Mist border, no color accents.</p>
+  <div class="form-stack">
+    <div class="form-field">
+      <label class="form-label">Email â Default</label>
+      <input class="form-input" type="email" placeholder="atelier@bugatti.com">
+    </div>
+    <div class="form-field">
+      <label class="form-label">Email â Focus</label>
+      <input class="form-input focus" type="email" placeholder="atelier@bugatti.com">
+    </div>
+    <div class="form-field">
+      <label class="form-label">Email â Error</label>
+      <input class="form-input error" type="email" value="not-an-email">
+      <span class="form-error">Please enter a valid address</span>
+    </div>
+    <div class="form-field">
+      <label class="form-label">Message â Textarea</label>
+      <textarea class="form-input form-textarea" placeholder="Your inquiry..."></textarea>
+    </div>
+  </div>
+</section>
+<!-- 6. SPACING -->
+<section class="preview-section" id="layout">
+  <span class="section-eyebrow">Section 06 / Spacing</span>
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-subtitle">Six discrete values â one of the smallest spacing scales in this catalog. Bugatti refuses to invent in-between gaps.</p>
+  <div class="spacing-row">
+    <div class="spacing-item"><div class="spacing-block" style="width: 4px;"></div><span class="spacing-label">4px</span></div>
+    <div class="spacing-item"><div class="spacing-block" style="width: 6px;"></div><span class="spacing-label">6px</span></div>
+    <div class="spacing-item"><div class="spacing-block" style="width: 12px;"></div><span class="spacing-label">12px</span></div>
+    <div class="spacing-item"><div class="spacing-block" style="width: 36px;"></div><span class="spacing-label">36px</span></div>
+    <div class="spacing-item"><div class="spacing-block" style="width: 48px;"></div><span class="spacing-label">48px</span></div>
+    <div class="spacing-item"><div class="spacing-block" style="width: 64px;"></div><span class="spacing-label">64px</span></div>
+  </div>
+</section>
+<!-- 7. RADIUS -->
+<section class="preview-section">
+  <span class="section-eyebrow">Section 07 / Radius</span>
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-subtitle">Three values. Rectangle, slightly-rounded utility, or full pill. Nothing in between.</p>
+  <div class="radius-row">
+    <div class="radius-item">
+      <div class="radius-block r0"></div>
+      <span class="radius-label">0<small>Default â media, hero</small></span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-block r6"></div>
+      <span class="radius-label">6px<small>Utility, small frames</small></span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-block r9999"></div>
+      <span class="radius-label">9999px<small>Primary pill buttons</small></span>
+    </div>
+  </div>
+</section>
+<!-- 8. ELEVATION -->
+<section class="preview-section">
+  <span class="section-eyebrow">Section 08 / Elevation</span>
+  <h2 class="section-title">Depth & Elevation</h2>
+  <p class="section-subtitle">Hairline borders only. No drop shadows anywhere. The only gradient is a vignette over video for text legibility.</p>
+  <div class="elevation-grid">
+    <div class="elevation-cell lvl-0">
+      <span class="label">Level 0</span>
+      <div class="desc">No shadow, no border â plain canvas</div>
+    </div>
+    <div class="elevation-cell lvl-1">
+      <span class="label">Level 1</span>
+      <div class="desc">1px solid Silver Mist â secondary containers</div>
+    </div>
+    <div class="elevation-cell lvl-2">
+      <span class="label">Level 2</span>
+      <div class="desc">1px solid Showroom White â primary state</div>
+    </div>
+    <div class="elevation-cell lvl-3">
+      <span class="label">Level 3</span>
+      <div class="desc">Bottom vignette â text legibility over media</div>
+    </div>
+  </div>
+</section>
+<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>
+</body>
+</html>