diff --git a/.gitleaks.toml b/.gitleaks.toml
new file mode 100644
index 0000000..cca2a7f
--- /dev/null
+++ b/.gitleaks.toml
@@ -0,0 +1,14 @@
+title = "ktg-plugin-marketplace gitleaks config"
+
+# Extend default rules
+[extend]
+useDefault = true
+
+# Path-based allowlist: vendored design-system MANIFEST.json files
+# contain SHA-256 hashes per file by design (drift detection).
+# These are public file integrity hashes, not secrets.
+[[allowlists]]
+description = "Vendored design-system MANIFEST files (SHA-256 file hashes)"
+paths = [
+  '''playground/vendor/playground-design-system/MANIFEST\.json$''',
+]
diff --git a/README.md b/README.md
index 03af5e7..6dea521 100644
--- a/README.md
+++ b/README.md
@@ -192,6 +192,8 @@ Key commands: `/architect`, `/architect:ros`, `/architect:security`, `/architect
 
 12 specialized agents · 24 commands · 5 skills (387 reference docs) · 2 hooks · sitemap-based KB monitoring
 
+**Playground:** `playground/ms-ai-architect-playground.html` — interactive 5-step pipeline (Intake → Explore → Configure → Review → Export). Vendored copy of the shared design-system at `playground/vendor/`, kept in sync via `scripts/sync-design-system.mjs ms-ai-architect`. Standalone — opens from `file://` without server or marketplace dependency.
+
 → [Full documentation](plugins/ms-ai-architect/README.md)
 
 ---
@@ -254,6 +256,7 @@ Targets five plugins: `ms-ai-architect`, `okr`, `llm-security`, `ultraplan-local
 - **JSON schemas** — `finding.schema.json`, `okr-set.schema.json`, `ros-threat.schema.json` for cross-plugin data interchange
 - **Privacy-first** — all fonts self-hosted as woff2 in `fonts/`, zero external CDN requests, GDPR-safe for offentlig sektor, works offline / behind air-gapped firewalls
 - **Reference scenarios** — Lier kommune ROS-rapport (ms-ai-architect), Bærum kommune T2 OKR live-writer, Direktoratet for digital tjenesteutvikling ToxicSkills findings review (85 funn, BLOCK)
+- **Vendoring sync** — `scripts/sync-design-system.mjs <plugin>` copies the design-system into `plugins/<name>/playground/vendor/` so each plugin stays standalone. SHA-256 MANIFEST detects local drift; `--force` to override. First adopter: `ms-ai-architect` (2026-05-03).
 
 → [Full documentation](shared/playground-design-system/README.md) · [Browse showcase](shared/playground-examples/index.html)
 
diff --git a/plugins/ms-ai-architect/CLAUDE.md b/plugins/ms-ai-architect/CLAUDE.md
index 3ead81e..5bd550f 100644
--- a/plugins/ms-ai-architect/CLAUDE.md
+++ b/plugins/ms-ai-architect/CLAUDE.md
@@ -172,11 +172,11 @@ claude --plugin ./plugins/ms-ai-architect
 /architect:help
 ```
 
-## Playground (v2)
+## Playground
 
-Interaktiv 5-stegs arkitektur-pipeline for Azure AI-beslutninger.
+Interaktiv 5-stegs arkitektur-pipeline for Microsoft AI-beslutninger.
 
-- **Fil:** `playground/azure-ai-playground.html` (~1840 linjer, self-contained)
+- **Fil:** `playground/ms-ai-architect-playground.html` (~1990 linjer)
 - **Spec:** `docs/playground-v2-spec.md`
 - **Build:** `playground/build/` (7 deler, brukes kun under utvikling — slettes etter assembly)
 - **Innhold:** 11 Azure AI-tjenester, 8 kategorier, 76 kapabiliteter, 8 scenarioer, 9 command pipelines
@@ -185,6 +185,27 @@ Interaktiv 5-stegs arkitektur-pipeline for Azure AI-beslutninger.
 - **4 eksport-formater:** Strukturert prompt, Command pipeline med per-command copy, Markdown brief, JSON Decision Record
 - **Data extensions (vs v1):** `skill` (citizen/pro/devops), `setupDays`, `userRec` per item + `COMMAND_PIPELINES` per scenario
 
+### Vendored design-system (2026-05-03)
+
+Playground laster CSS fra `playground/vendor/playground-design-system/` — en vendored
+kopi av marketplace-rotens `shared/playground-design-system/`. Dette holder pluginen
+**standalone**: HTML-filen kan åpnes fra `file://` uavhengig av marketplace-roten.
+
+- **Sync-kilde:** `shared/playground-design-system/` (commit `f1fecf3` på sync-tidspunktet)
+- **Sync-skript:** `node scripts/sync-design-system.mjs ms-ai-architect` (ved marketplace-rot)
+- **Drift-deteksjon:** `MANIFEST.json` lagrer SHA-256 per fil. Re-sync feiler hvis
+  vendored fil er endret lokalt — `--force` overstyrer.
+- **Lastes i HTML:** `<link>`-tags til `fonts.css`, `tokens.css`, `base.css`,
+  `components.css`, `components-tier2.css`, `components-tier3.css`,
+  `components-tier3-supplement.css` (i den rekkefølgen).
+- **Legacy var-shim:** Inline `<style>` mapper v2-tokens (`--bg`, `--surface`, `--accent`)
+  til design-system-tokens (`--color-bg`, `--color-surface`, `--color-primary-500`)
+  så eksisterende klasser (`.hero`, `.wizard-card`, `.scenario-card`) fortsatt fungerer.
+- **Tema:** `<html data-theme="dark">` beholder dark-mode-default fra v2.
+  Light-mode-toggle er ikke implementert (defer).
+- **Aldri rediger** filer under `vendor/playground-design-system/` direkte —
+  endringer går i `shared/`, deretter re-sync.
+
 ## Relaterte plugins (fremtidig)
 
 - `ms-rag-architect` — RAG-spesialist (egen plugin)
diff --git a/plugins/ms-ai-architect/README.md b/plugins/ms-ai-architect/README.md
index 09f3e5e..d1763d2 100644
--- a/plugins/ms-ai-architect/README.md
+++ b/plugins/ms-ai-architect/README.md
@@ -346,6 +346,30 @@ Two runtime hooks provide session context and safety guardrails:
 
 ---
 
+## Playground
+
+Interactive 5-step architecture pipeline for Microsoft AI decisions, runnable from `file://` without a server.
+
+- **File:** `playground/ms-ai-architect-playground.html`
+- **Pipeline:** Intake (wizard) → Explore (filtered catalog) → Configure (parameters + compliance) → Review (cost P10/P50/P90 + risk) → Export (4 formats)
+- **3 entry modes:** "Guide me" (wizard), "Let me explore" (browse), "I know what I want" (direct)
+- **4 export formats:** Structured prompt, command pipeline (per-command copy), Markdown brief, JSON Decision Record
+
+### Vendored design-system
+
+The playground loads CSS from `playground/vendor/playground-design-system/` — a vendored copy of the marketplace-root `shared/playground-design-system/`. This keeps the plugin **standalone**: copy the plugin folder anywhere and the playground still works.
+
+- **Sync:** `node scripts/sync-design-system.mjs ms-ai-architect` (run from marketplace root)
+- **Drift detection:** `MANIFEST.json` records SHA-256 per file. Re-sync refuses to overwrite files modified locally — pass `--force` to override.
+- **Generated header:** Each vendored CSS file is prefixed with `/* Code generated by sync-design-system.mjs; DO NOT EDIT. */`. Edit `shared/`, then re-sync.
+
+```bash
+# Run playground locally
+open plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
+```
+
+---
+
 ## Technology Coverage
 
 | Domain | Technologies |
diff --git a/plugins/ms-ai-architect/playground/azure-ai-playground.html b/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
similarity index 98%
rename from plugins/ms-ai-architect/playground/azure-ai-playground.html
rename to plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
index 58d9698..f921c0e 100644
--- a/plugins/ms-ai-architect/playground/azure-ai-playground.html
+++ b/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
@@ -1,30 +1,47 @@
 <!DOCTYPE html>
-<html lang="no">
+<html lang="no" data-theme="dark">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Azure AI Architecture Playground</title>
+<title>Microsoft AI Architecture Playground</title>
+
+<!-- Vendored design-system (shared/playground-design-system, sync via scripts/sync-design-system.mjs) -->
+<link rel="stylesheet" href="./vendor/playground-design-system/fonts.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/tokens.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/base.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/components.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/components-tier2.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/components-tier3.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/components-tier3-supplement.css">
+
 <style>
+  /* Legacy variable shim: maps v2 playground tokens to design-system tokens.
+     Keeps existing playground-specific class definitions (.hero, .wizard,
+     .scenario-card, etc) working without rewriting their CSS. */
   :root {
-    --bg: #0a0a0f;
-    --surface: #12121a;
-    --surface2: #1a1a2e;
-    --border: #2a2a3e;
-    --text: #e4e4ef;
-    --text-dim: #8888a0;
-    --accent: #0078d4;
-    --accent2: #00d4aa;
+    --bg: var(--color-bg);
+    --surface: var(--color-surface);
+    --surface2: var(--color-surface-sunken);
+    --border: var(--color-border-subtle);
+    --text: var(--color-text-primary);
+    --text-dim: var(--color-text-secondary);
+    --accent: var(--color-primary-500);
+    --accent2: var(--color-state-success);
     --accent3: #ff6b9d;
     --accent4: #ffa726;
     --accent5: #42a5f5;
     --accent6: #ab47bc;
-    --accent7: #ef5350;
+    --accent7: var(--color-severity-critical);
     --accent8: #66bb6a;
-    --gradient1: linear-gradient(135deg, #0078d4, #00d4aa);
+    --gradient1: linear-gradient(135deg, var(--color-primary-500), var(--color-state-success));
     --gradient2: linear-gradient(135deg, #ff6b9d, #ffa726);
   }
-  * { margin:0; padding:0; box-sizing:border-box; }
-  body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; line-height:1.6; }
+
+  /* Reset margin/padding on form + list elements (base.css only resets headings + p) */
+  ul, ol, li, button, input, select, textarea { margin: 0; padding: 0; }
+  ul, ol { list-style: none; }
+
+  /* Playground heading scale (intentionally overrides base.css for hero emphasis) */
   h1 { font-size:2.8rem; font-weight:800; letter-spacing:-0.03em; }
   h2 { font-size:1.8rem; font-weight:700; letter-spacing:-0.02em; }
   h3 { font-size:1.25rem; font-weight:600; }