zugzbot 1.3.0 → 1.4.0

package/.opencode/oh-my-design/design-md/nvidia/_research.md

@@ -1,68 +0,0 @@
-# Research Sources for NVIDIA
-
-Extraction date: 2026-04-20
-
-## Tier 1 — Official Design System
-
-Not found as a publicly exposed, documented design system in the form Shopify Polaris / IBM Carbon / Adobe Spectrum use. NVIDIA operates a multi-framework product surface (PrimeReact, Fluent UI, Element Plus) rather than a single canonical DS site. Tokens in `DESIGN.md` sections 1–9 were extracted from live site recon.
-
-## Tier 2 — Brand / Press Kit
-
-- [brand.nvidia.com](https://brand.nvidia.com) — Public brand portal. Attempted WebFetch on 2026-04-20 returned a near-empty shell (client-rendered, auth-gated subpages not fetchable). Did not surface directly usable voice guidelines via WebFetch — follow-up via Playwright MCP recommended for future passes.
-- [nvidia.com/en-us/about-nvidia](https://www.nvidia.com/en-us/about-nvidia/) — Company self-description, Jensen Huang culture quote.
-- [nvidia.com/en-us/about-nvidia/corporate-timeline](https://www.nvidia.com/en-us/about-nvidia/corporate-timeline/) — Founding date, founders, GPU→AI milestone sequence.
-
-## Tier 3 — Engineering / Design / Research Blog
-
-- [nvidia.com/en-us/research](https://www.nvidia.com/en-us/research/) — Research mission phrasing, philosophy, research areas.
-- [blogs.nvidia.com/blog/what-is-accelerated-computing](https://blogs.nvidia.com/blog/what-is-accelerated-computing/) — Jensen Huang sustainability / accelerated-computing quote.
-
-## Tier 4 — Live Site Recon (base DESIGN.md)
-
-- [nvidia.com/en-us](https://www.nvidia.com/en-us/) — Homepage microcopy, CTA labels, section headlines (verified 2026-04-20).
-- [developer.nvidia.com](https://developer.nvidia.com/) — Developer portal microcopy, tagline register (verified 2026-04-20).
-
-## Confidence
-
-- **High** (Tier 2/3 direct quote): Jensen Huang culture quote, Jensen Huang accelerated-computing quote, founding date and founders, GPU→AI milestone dates, self-description "pioneered accelerated computing".
-- **High** (live-verified microcopy): All §10 voice samples marked `verified:` — "Learn More", "Register Now", "Watch On Demand", "Out Now", "Read Blog", the Blackwell/token-cost headline, the developer-portal assistant tagline.
-- **Medium** (cited, not re-fetched verbatim): Research mission phrasing (paraphrased in §10).
-- **Low / Interpretive** (editorial readings of the DS, marked as such in footer): Sharp-corners-as-hardware-signal framing, GTC-as-only-theatrical-surface claim, persona archetypes.
-
-## Notes
-
-- brand.nvidia.com was listed in the task brief as a preferred source but did not yield content via WebFetch (likely client-rendered and/or auth-gated). Recommend a Playwright MCP pass for a future v0.1.1 uplift to pull voice/tone guideline language directly.
-- NVIDIA does not publish a single voice-and-tone guideline page comparable to Mailchimp Content Style Guide or GOV.UK Style Guide. The voice model in §10 was synthesized from three authoritative registers: product-page microcopy (nvidia.com), developer-portal copy (developer.nvidia.com), and founder / keynote register (about page + accelerated-computing blog).
-
----
-
-## Philosophy Layer — added 2026-04-20
-
-- [nvidia.com/en-us/](https://www.nvidia.com/en-us/) — used for §10 voice samples (verified), tone table "Headlines" and "Benchmark claims" rows.
-- [developer.nvidia.com](https://developer.nvidia.com/) — used for §10 voice sample (verified), tone table "Developer docs" row.
-- [nvidia.com/en-us/about-nvidia/](https://www.nvidia.com/en-us/about-nvidia/) — used for §10 tone table "Keynote / founder voice" row, §11 narrative ("pioneered accelerated computing" citation).
-- [nvidia.com/en-us/about-nvidia/corporate-timeline/](https://www.nvidia.com/en-us/about-nvidia/corporate-timeline/) — used for §11 founding, §12 principle 8 (long time horizons).
-- [blogs.nvidia.com/blog/what-is-accelerated-computing/](https://blogs.nvidia.com/blog/what-is-accelerated-computing/) — used for §11 Jensen Huang sustainability quote.
-- [nvidia.com/en-us/research/](https://www.nvidia.com/en-us/research/) — used for §10 tone table "Research page" row, §12 principle 9 (research public or not research).
-
-Style reference: `claude` (auto-picked for US region per SKILL.md Phase 10-2). Justification: Western engineering-technical register, measured claims, benchmark-first voice — aligns with NVIDIA's datasheet-with-headline register far better than `stripe` (payments-commerce) or `notion` (neutral general).
-
----
-
-## Philosophy Layer QA (2026-04-20) — Diagnostic Rubric
-
-| # | Dimension | Score | Notes |
-|---|---|---|---|
-| D1 | §10 intro standalone, 3–5 lines, voice qualifiers | 🟢 | Standalone opener ("NVIDIA speaks like the engineering team that built the silicon it is selling"). 5 lines, ≥3 voice qualifiers (declarative, technically exact, capability-first). No peer comparison. |
-| D2 | §10 tone table 7–10 rows with brand-surface row | 🟢 | 9 rows. Includes brand-specific surfaces: "Keynote / founder voice", "Research page", "Benchmark / performance claims", "Community / developer forum". |
-| D3 | §10 forbidden phrases with brand-specific items | 🟢 | Generic bans + NVIDIA-specific: no competitor-diminishing, no gaming-marketing adjectives ("epic", "insane", "beast") in enterprise surfaces, no generic "AI-powered X" without named architecture. |
-| D4 | §10 voice samples ≥3 with verification tier markers | 🟢 | 10 samples: 6 `verified:` (with nvidia.com / developer.nvidia.com URLs), 2 `cited:` (about page + Jensen quote), 2 `illustrative:` (error + empty state). All marked. |
-| D5 | §11 narrative with inline citations + footer manifest | 🟢 | Inline markdown links to corporate-timeline, about-nvidia, blogs.nvidia.com, research. Numerical claim (4M developers / 40K companies) marked as base-carried not re-verified. Footer carries structured source tiering. |
-| D6 | §12 principles with explicit UI implication | 🟢 | All 9 principles carry `*UI implication:*` label with a concrete UI rule. |
-| D7 | §12 count 5–10 (target 7–9) | 🟢 | 9 principles. |
-| D8 | §13 personas ≤3 sentences, behavior-first, disclaimer | 🟢 | 4 archetypes, each ≤3 sentences. Behavior-dominant (tools used, evaluation criteria). Disclaimer present at top. |
-| D9 | §14 states 10–12, core types covered, no UI-pattern pollution | 🟢 | 12 rows. Empty/Loading/Error/Success/Skeleton/Disabled all present. Brand-authentic row: "Benchmark / metric rendering" (numeric-first typography as a state class). No UI patterns counted as states. |
-| D10 | §15 spring stance explicit + rationale | 🟢 | Explicit forbidden-on-product-UI stance with rationale ("engineering precision — benchmarks, tolerances, thermal envelopes") + scope carve-out (GTC keynote as broadcast surface, not UI). |
-| D11 | §15 reduce-motion rule present | 🟢 | Present; collapses all motion tokens to instant, removes metric counter animation, disables green-edge reveal delay. |
-
-**Result**: 11 🟢 / 0 🟡 / 0 🔴. **PASS.**

package/.opencode/oh-my-design/design-md/nvidia/preview-dark.html

@@ -1,374 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Design System Inspired by NVIDIA</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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --nvidia-green: #76b900;
-    --nvidia-green-light: #bff230;
-    --black: #e5e5e5;
-    --white: #0a0a0a;
-    --near-black: #141414;
-    --gray-300: #a7a7a7;
-    --gray-400: #898989;
-    --gray-500: #757575;
-    --gray-border: #333333;
-    --link-hover: #5a8aef;
-    --btn-hover: #1eaedb;
-    --btn-active: #007fff;
-    --orange-400: #df6500;
-    --yellow-300: #ef9100;
-    --red-500: #e52020;
-    --green-500: #3f8500;
-    --blue-700: #0046a4;
-    --purple-800: #4d1368;
-    --fuchsia-700: #8c1c55;
-    --purple-100: #f9d4ff;
-    --yellow-050: #feeeb2;
-    --shadow-card: rgba(0,0,0,0.6) 0px 0px 8px 0px;
-    --font-primary: 'Inter', Arial, Helvetica, sans-serif;
-  }
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    background: var(--white);
-    color: var(--black);
-    font-family: var(--font-primary);
-    font-size: 16px; font-weight: 400; line-height: 1.50;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  /* NAV */
-  .nav {
-    position: sticky; top: 0; z-index: 100;
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 12px 32px;
-    background: #000000;
-    border-bottom: 2px solid var(--nvidia-green);
-  }
-  .nav-brand { font-size: 14px; font-weight: 700; color: var(--black); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; }
-  .nav-links { display: flex; gap: 24px; list-style: none; }
-  .nav-links a { font-size: 14px; font-weight: 700; color: var(--gray-400); text-decoration: none; text-transform: uppercase; transition: color 0.15s; }
-  .nav-links a:hover { color: var(--nvidia-green); }
-  .nav-cta {
-    display: inline-block; background: transparent; color: var(--black);
-    padding: 8px 16px; border-radius: 2px; font-size: 14px; font-weight: 700;
-    text-decoration: none; border: 2px solid var(--nvidia-green); transition: all 0.15s;
-  }
-  .nav-cta:hover { background: var(--btn-hover); color: #fff; border-color: var(--btn-hover); }
-
-  /* DARK MODE BADGE */
-  .dark-badge {
-    position: fixed; top: 16px; right: 16px; z-index: 200;
-    background: var(--nvidia-green); color: #000000;
-    font-size: 11px; font-weight: 700; padding: 4px 10px;
-    border-radius: 2px; text-transform: uppercase; letter-spacing: 0.5px;
-  }
-
-  /* HERO */
-  .hero { padding: 96px 32px 80px; text-align: center; background: #000000; }
-  .hero h1 {
-    font-size: 48px; font-weight: 700; line-height: 1.25;
-    color: var(--black); margin-bottom: 16px;
-  }
-  .hero h1 span { color: var(--nvidia-green); }
-  .hero p { font-size: 18px; font-weight: 400; line-height: 1.67; color: var(--gray-400); max-width: 640px; margin: 0 auto 32px; }
-  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
-  .btn-primary {
-    display: inline-block; background: transparent; color: var(--black);
-    padding: 11px 20px; border-radius: 2px; border: 2px solid var(--nvidia-green);
-    font-family: var(--font-primary); font-size: 16px; font-weight: 700;
-    text-decoration: none; cursor: pointer; transition: all 0.15s;
-  }
-  .btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff; }
-  .btn-secondary {
-    display: inline-block; background: transparent; color: var(--gray-400);
-    padding: 11px 20px; border-radius: 2px; border: 1px solid var(--gray-border);
-    font-family: var(--font-primary); font-size: 16px; font-weight: 700;
-    text-decoration: none; cursor: pointer; transition: all 0.15s;
-  }
-  .btn-secondary:hover { color: var(--black); border-color: var(--gray-400); }
-
-  /* SECTIONS */
-  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
-  .section-label { font-size: 12px; font-weight: 700; color: var(--nvidia-green); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
-  .section-title { font-size: 32px; font-weight: 700; line-height: 1.25; margin-bottom: 32px; }
-  .section-divider { border: none; border-top: 2px solid var(--nvidia-green); margin: 0; opacity: 0.3; }
-
-  /* COLORS */
-  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
-  .color-swatch { border-radius: 2px; overflow: hidden; box-shadow: var(--shadow-card); }
-  .color-swatch-block { height: 72px; width: 100%; }
-  .color-swatch-info { padding: 10px 12px; }
-  .color-swatch-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
-  .color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: monospace; }
-  .color-swatch-role { font-size: 11px; color: var(--gray-400); margin-top: 3px; }
-  .color-group-label { font-size: 14px; font-weight: 700; color: var(--gray-500); margin: 24px 0 10px; text-transform: uppercase; letter-spacing: 0.5px; }
-
-  /* TYPOGRAPHY */
-  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #1e1e1e; }
-  .type-sample:last-child { border-bottom: none; }
-  .type-meta { font-family: monospace; font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }
-
-  /* BUTTONS */
-  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
-  .button-item { text-align: center; }
-  .button-label { font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }
-
-  /* CARDS */
-  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
-  .card { background: #111111; border-radius: 2px; padding: 24px; box-shadow: var(--shadow-card); transition: box-shadow 0.2s; border-top: 2px solid var(--nvidia-green); }
-  .card:hover { box-shadow: rgba(0,0,0,0.7) 0px 0px 16px 0px; }
-  .card h3 { font-size: 20px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
-  .card p { font-size: 15px; color: var(--gray-400); line-height: 1.67; }
-  .card-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; margin-bottom: 12px; letter-spacing: 0.5px; }
-
-  /* FORMS */
-  .form-group { margin-bottom: 20px; max-width: 400px; }
-  .form-label { display: block; font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
-  .form-input {
-    width: 100%; background: #111111; color: var(--black);
-    border: 1px solid var(--gray-border); padding: 10px 12px; border-radius: 2px;
-    font-family: var(--font-primary); font-size: 14px; outline: none;
-    transition: border-color 0.15s;
-  }
-  .form-input:focus { border-color: var(--nvidia-green); box-shadow: 0 0 0 1px var(--nvidia-green); }
-  .form-input--focus { border-color: var(--nvidia-green); box-shadow: 0 0 0 1px var(--nvidia-green); }
-  .form-input--error { border-color: var(--red-500); box-shadow: 0 0 0 1px var(--red-500); }
-  .form-textarea {
-    width: 100%; min-height: 80px; background: #111111; color: var(--black);
-    border: 1px solid var(--gray-border); padding: 10px 12px; border-radius: 2px;
-    font-family: var(--font-primary); font-size: 14px; resize: vertical; outline: none;
-  }
-  .form-state-label { font-size: 11px; color: var(--gray-400); margin-top: 4px; }
-
-  /* SPACING */
-  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
-  .spacing-item { text-align: center; }
-  .spacing-block { background: var(--nvidia-green); border-radius: 1px; margin-bottom: 6px; height: 28px; }
-  .spacing-value { font-family: monospace; font-size: 11px; font-weight: 500; color: var(--gray-400); }
-
-  /* RADIUS */
-  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
-  .radius-item { text-align: center; }
-  .radius-box { width: 64px; height: 64px; background: var(--nvidia-green); margin-bottom: 6px; }
-  .radius-label { font-family: monospace; font-size: 11px; font-weight: 500; color: var(--gray-400); }
-  .radius-context { font-size: 10px; color: var(--gray-400); }
-
-  /* ELEVATION */
-  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
-  .elevation-card { background: #111111; border-radius: 2px; padding: 20px; text-align: center; }
-  .elevation-label { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
-  .elevation-desc { font-family: monospace; font-size: 11px; color: var(--gray-400); }
-
-  /* FOOTER */
-  .footer { padding: 32px; text-align: center; background: #000000; color: var(--gray-500); font-size: 13px; border-top: 2px solid var(--nvidia-green); }
-  .footer a { color: var(--nvidia-green); text-decoration: underline; }
-
-  @media (max-width: 768px) {
-    .hero h1 { font-size: 32px; }
-    .nav-links { display: none; }
-    .section { padding: 48px 20px; }
-    .card-grid { grid-template-columns: 1fr; }
-  }
-</style>
-</head>
-<body>
-
-<nav class="nav">
-  <span class="nav-brand">awesome-design-md</span>
-  <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>
-    <li><a href="#spacing">Spacing</a></li>
-  </ul>
-  <a class="nav-cta" href="#">Explore GPUs</a>
-</nav>
-<div class="dark-badge">Dark Mode</div>
-
-<section class="hero">
-  <h1>Design System<br>Inspired by <span>NVIDIA</span></h1>
-  <p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.</p>
-  <div class="hero-buttons">
-    <a class="btn-primary" href="#">Explore Solutions</a>
-    <a class="btn-secondary" href="#">View Documentation</a>
-  </div>
-</section>
-
-<hr class="section-divider">
-
-<section class="section" id="colors">
-  <div class="section-label">01 / Colors</div>
-  <h2 class="section-title">Color Palette</h2>
-
-  <div class="color-group-label">Primary Brand</div>
-  <div class="color-grid">
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#76b900"></div><div class="color-swatch-info"><div class="color-swatch-name">NVIDIA Green</div><div class="color-swatch-hex">#76b900</div><div class="color-swatch-role">Accent, borders, CTAs</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">True Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Primary background</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Light backgrounds, text</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#bff230"></div><div class="color-swatch-info"><div class="color-swatch-name">Green Light</div><div class="color-swatch-hex">#bff230</div><div class="color-swatch-role">Bright accents</div></div></div>
-  </div>
-
-  <div class="color-group-label">Extended Palette</div>
-  <div class="color-grid">
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#df6500"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange 400</div><div class="color-swatch-hex">#df6500</div><div class="color-swatch-role">Warm accent</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#ef9100"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow 300</div><div class="color-swatch-hex">#ef9100</div><div class="color-swatch-role">Secondary warm</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#4d1368"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple 800</div><div class="color-swatch-hex">#4d1368</div><div class="color-swatch-role">AI / Premium</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#8c1c55"></div><div class="color-swatch-info"><div class="color-swatch-name">Fuchsia 700</div><div class="color-swatch-hex">#8c1c55</div><div class="color-swatch-role">Promotions</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#0046a4"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 700</div><div class="color-swatch-hex">#0046a4</div><div class="color-swatch-role">Informational</div></div></div>
-  </div>
-
-  <div class="color-group-label">Status</div>
-  <div class="color-grid">
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#e52020"></div><div class="color-swatch-info"><div class="color-swatch-name">Red 500</div><div class="color-swatch-hex">#e52020</div><div class="color-swatch-role">Error, destructive</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#3f8500"></div><div class="color-swatch-info"><div class="color-swatch-name">Green 500</div><div class="color-swatch-hex">#3f8500</div><div class="color-swatch-role">Success</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#feeeb2"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow 050</div><div class="color-swatch-hex">#feeeb2</div><div class="color-swatch-role">Warning surface</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#f9d4ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple 100</div><div class="color-swatch-hex">#f9d4ff</div><div class="color-swatch-role">Info surface</div></div></div>
-  </div>
-
-  <div class="color-group-label">Neutral Scale</div>
-  <div class="color-grid">
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#1a1a1a"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#1a1a1a</div><div class="color-swatch-role">Dark surfaces</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#5e5e5e"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray Border</div><div class="color-swatch-hex">#5e5e5e</div><div class="color-swatch-role">Borders, dividers</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#757575"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 500</div><div class="color-swatch-hex">#757575</div><div class="color-swatch-role">Tertiary text</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#898989"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 400</div><div class="color-swatch-hex">#898989</div><div class="color-swatch-role">Secondary text</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#a7a7a7"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 300</div><div class="color-swatch-hex">#a7a7a7</div><div class="color-swatch-role">Muted text</div></div></div>
-  </div>
-
-  <div class="color-group-label">Interactive</div>
-  <div class="color-grid">
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#3860be"></div><div class="color-swatch-info"><div class="color-swatch-name">Link Hover</div><div class="color-swatch-hex">#3860be</div><div class="color-swatch-role">Hover state</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#1eaedb"></div><div class="color-swatch-info"><div class="color-swatch-name">Button Hover</div><div class="color-swatch-hex">#1eaedb</div><div class="color-swatch-role">CTA hover</div></div></div>
-    <div class="color-swatch"><div class="color-swatch-block" style="background:#007fff"></div><div class="color-swatch-info"><div class="color-swatch-name">Button Active</div><div class="color-swatch-hex">#007fff</div><div class="color-swatch-role">CTA active/pressed</div></div></div>
-  </div>
-</section>
-
-<hr class="section-divider">
-
-<section class="section" id="typography">
-  <div class="section-label">02 / Typography</div>
-  <h2 class="section-title">Typography Scale</h2>
-
-  <div class="type-sample"><div style="font-size:36px; font-weight:700; line-height:1.25;">Display Hero</div><div class="type-meta">Display Hero -- 36px / 700 / 1.25 / NVIDIA-EMEA</div></div>
-  <div class="type-sample"><div style="font-size:24px; font-weight:700; line-height:1.25;">Section Heading</div><div class="type-meta">Section Heading -- 24px / 700 / 1.25 / NVIDIA-EMEA</div></div>
-  <div class="type-sample"><div style="font-size:22px; font-weight:400; line-height:1.75;">Sub-heading -- Feature descriptions and subtitles</div><div class="type-meta">Sub-heading -- 22px / 400 / 1.75 / NVIDIA-EMEA</div></div>
-  <div class="type-sample"><div style="font-size:20px; font-weight:700; line-height:1.25;">Card Title</div><div class="type-meta">Card Title -- 20px / 700 / 1.25 / NVIDIA-EMEA</div></div>
-  <div class="type-sample"><div style="font-size:18px; font-weight:700; line-height:1.67;">Body Large -- Emphasized lead paragraph text for introductions</div><div class="type-meta">Body Large -- 18px / 700 / 1.67 / NVIDIA-EMEA</div></div>
-  <div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body -- Standard reading text for descriptions and content paragraphs across the site.</div><div class="type-meta">Body -- 16px / 400 / 1.50 / NVIDIA-EMEA</div></div>
-  <div class="type-sample"><div style="font-size:16px; font-weight:700; line-height:1.50;">Body Bold -- Strong labels and nav items</div><div class="type-meta">Body Bold -- 16px / 700 / 1.50 / NVIDIA-EMEA</div></div>
-  <div class="type-sample"><div style="font-size:15px; font-weight:400; line-height:1.67;">Body Small -- Secondary content and descriptions for product cards.</div><div class="type-meta">Body Small -- 15px / 400 / 1.67 / NVIDIA-EMEA</div></div>
-  <div class="type-sample"><div style="font-size:14px; font-weight:700; line-height:1.43; text-transform:uppercase;">Link Uppercase Label</div><div class="type-meta">Link Uppercase -- 14px / 700 / 1.43 / uppercase / NVIDIA-EMEA</div></div>
-  <div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.50;">Caption -- Metadata and timestamps</div><div class="type-meta">Caption -- 14px / 600 / 1.50 / NVIDIA-EMEA</div></div>
-  <div class="type-sample"><div style="font-size:12px; font-weight:400; line-height:1.25;">Caption Small -- Fine print and legal text</div><div class="type-meta">Caption Small -- 12px / 400 / 1.25 / NVIDIA-EMEA</div></div>
-  <div class="type-sample"><div style="font-size:10px; font-weight:700; line-height:1.50; text-transform:uppercase; background:var(--nvidia-green); color:#000; display:inline-block; padding:2px 8px; border-radius:2px;">GPU ACCELERATED</div><div class="type-meta">Micro Label -- 10px / 700 / uppercase / NVIDIA-EMEA</div></div>
-</section>
-
-<hr class="section-divider">
-
-<section class="section" id="buttons">
-  <div class="section-label">03 / Buttons</div>
-  <h2 class="section-title">Button Variants</h2>
-  <div class="button-row" style="margin-bottom: 24px;">
-    <div class="button-item"><a class="btn-primary" href="#">Explore Solutions</a><div class="button-label">Primary</div></div>
-    <div class="button-item"><a class="btn-secondary" href="#">Documentation</a><div class="button-label">Secondary</div></div>
-    <div class="button-item"><span style="display:inline-block; background:var(--btn-hover); color:#fff; padding:11px 20px; border-radius:2px; font-size:16px; font-weight:700;">Hover State</span><div class="button-label">Hover</div></div>
-    <div class="button-item"><span style="display:inline-block; background:var(--btn-active); color:#fff; padding:11px 20px; border-radius:2px; font-size:16px; font-weight:700; border:1px solid #003eff;">Active State</span><div class="button-label">Active</div></div>
-  </div>
-  <div class="button-row">
-    <div class="button-item"><span style="display:inline-block; font-size:14.4px; font-weight:700; letter-spacing:0.144px; color:var(--nvidia-green); text-decoration:underline; text-underline-offset:3px;">Learn More ></span><div class="button-label">Compact Link</div></div>
-    <div class="button-item"><span style="display:inline-block; background:var(--nvidia-green); color:#000; padding:4px 10px; border-radius:2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;">NEW</span><div class="button-label">Micro Badge</div></div>
-    <div class="button-item"><span style="display:inline-block; background:var(--purple-800); color:#fff; padding:4px 10px; border-radius:2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;">AI</span><div class="button-label">Category Badge</div></div>
-  </div>
-</section>
-
-<hr class="section-divider">
-
-<section class="section" id="cards">
-  <div class="section-label">04 / Cards</div>
-  <h2 class="section-title">Card Examples</h2>
-  <div class="card-grid">
-    <div class="card">
-      <div class="card-badge" style="background:var(--nvidia-green); color:#000;">GPU</div>
-      <h3>GeForce RTX Series</h3>
-      <p>The ultimate in PC gaming performance. Ray tracing, DLSS, and AI-powered graphics for immersive experiences.</p>
-    </div>
-    <div class="card" style="border-top-color: var(--purple-800);">
-      <div class="card-badge" style="background:var(--purple-800); color:#fff;">AI</div>
-      <h3>NVIDIA AI Enterprise</h3>
-      <p>End-to-end AI software platform that accelerates data science pipelines and streamlines development.</p>
-    </div>
-    <div class="card" style="border-top-color: var(--orange-400);">
-      <div class="card-badge" style="background:var(--orange-400); color:#fff;">DATA CENTER</div>
-      <h3>DGX Systems</h3>
-      <p>Purpose-built AI infrastructure integrating hardware and software for the most demanding workloads.</p>
-    </div>
-  </div>
-</section>
-
-<hr class="section-divider">
-
-<section class="section" id="forms">
-  <div class="section-label">05 / Forms</div>
-  <h2 class="section-title">Form Elements</h2>
-  <div class="form-group"><label class="form-label">Project Name</label><input class="form-input" type="text" placeholder="my-gpu-project"><div class="form-state-label">Default</div></div>
-  <div class="form-group"><label class="form-label">CUDA Version</label><input class="form-input form-input--focus" type="text" value="CUDA 12.4"><div class="form-state-label">Focus (green border)</div></div>
-  <div class="form-group"><label class="form-label">GPU Count</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (red border)</div></div>
-  <div class="form-group"><label class="form-label">Configuration</label><textarea class="form-textarea" placeholder="Enter GPU configuration..."></textarea></div>
-</section>
-
-<hr class="section-divider">
-
-<section class="section" id="spacing">
-  <div class="section-label">06 / Spacing</div>
-  <h2 class="section-title">Spacing Scale</h2>
-  <div class="spacing-row">
-    <div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
-    <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:6px"></div><div class="spacing-value">6</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:10px"></div><div class="spacing-value">10</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>
-</section>
-
-<hr class="section-divider">
-
-<section class="section" id="radius">
-  <div class="section-label">07 / Radius</div>
-  <h2 class="section-title">Border Radius Scale</h2>
-  <div class="radius-row">
-    <div class="radius-item"><div class="radius-box" style="border-radius:1px"></div><div class="radius-label">1px</div><div class="radius-context">Inline spans</div></div>
-    <div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">Buttons, cards</div></div>
-    <div class="radius-item"><div class="radius-box" style="border-radius:50%"></div><div class="radius-label">50%</div><div class="radius-context">Avatars, icons</div></div>
-  </div>
-</section>
-
-<hr class="section-divider">
-
-<section class="section" id="elevation">
-  <div class="section-label">08 / Elevation</div>
-  <h2 class="section-title">Elevation &amp; Depth</h2>
-  <div class="elevation-grid">
-    <div class="elevation-card" style="border: 1px solid var(--gray-border);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
-    <div class="elevation-card" style="box-shadow: rgba(0,0,0,0.6) 0px 0px 8px 0px;"><div class="elevation-label">Level 1: Card</div><div class="elevation-desc">rgba(0,0,0,0.6) 0 0 8px</div></div>
-    <div class="elevation-card" style="border: 1px solid var(--gray-border);"><div class="elevation-label">Level 1b: Border</div><div class="elevation-desc">1px solid #333</div></div>
-    <div class="elevation-card" style="border: 2px solid var(--nvidia-green);"><div class="elevation-label">Level 2: Accent</div><div class="elevation-desc">2px solid #76b900</div></div>
-    <div class="elevation-card" style="box-shadow: rgba(0,0,0,0.7) 0px 0px 16px 0px;"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Hover intensified</div></div>
-    <div class="elevation-card" style="outline: 2px solid var(--black); outline-offset: 2px;"><div class="elevation-label">Focus</div><div class="elevation-desc">2px solid outline</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>