From c7a9729795c84cc5d0eb7850a84a5e5698fa9e0c Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sun, 5 Apr 2026 09:45:19 -0700
Subject: [PATCH] feat(cockpit): add design tokens CSS, Tailwind v4 to Angular
 apps, fix sidebar and code overflow

- Add tokens.css to @cacheplane/design-tokens with all 29 --ds-* CSS custom properties
- Replace hardcoded dark theme in all 14 Angular example apps with design-token-based light theme
- Add Tailwind v4 to all Angular apps via @import "tailwindcss" + @theme block
- Remove overview entries from cockpit sidebar navigation
- Fix code block horizontal overflow in docs mode with overflow-x: auto
---
 apps/cockpit/src/app/cockpit.css              |   5 +-
 .../components/sidebar/navigation-groups.tsx  |   4 +-
 .../filesystem/angular/src/styles.css         |  31 +-
 .../deep-agents/memory/angular/src/styles.css |  31 +-
 .../planning/angular/src/styles.css           |  31 +-
 .../sandboxes/angular/src/styles.css          |  31 +-
 .../deep-agents/skills/angular/src/styles.css |  31 +-
 .../subagents/angular/src/styles.css          |  31 +-
 .../deployment-runtime/angular/src/styles.css |  31 +-
 .../durable-execution/angular/src/styles.css  |  31 +-
 .../interrupts/angular/src/styles.css         |  31 +-
 .../langgraph/memory/angular/src/styles.css   |  31 +-
 .../persistence/angular/src/styles.css        |  31 +-
 .../streaming/angular/src/styles.css          |  31 +-
 .../subgraphs/angular/src/styles.css          |  31 +-
 .../time-travel/angular/src/styles.css        |  31 +-
 .../plans/2026-04-05-example-app-styling.md   | 417 ++++++++++++++++++
 .../2026-04-05-example-app-styling-design.md  | 150 +++++++
 libs/design-tokens/src/lib/tokens.css         |  49 ++
 libs/design-tokens/src/lib/tokens.spec.ts     |  44 ++
 20 files changed, 1002 insertions(+), 101 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-04-05-example-app-styling.md
 create mode 100644 docs/superpowers/specs/2026-04-05-example-app-styling-design.md
 create mode 100644 libs/design-tokens/src/lib/tokens.css

diff --git a/apps/cockpit/src/app/cockpit.css b/apps/cockpit/src/app/cockpit.css
index 875289e17..7983dcbad 100644
--- a/apps/cockpit/src/app/cockpit.css
+++ b/apps/cockpit/src/app/cockpit.css
@@ -131,6 +131,7 @@ pre.shiki {
   border-radius: 0.5rem;
   overflow: hidden;
   margin: 0.75rem 0;
+  max-width: 100%;
 }
 .doc-codeblock__header {
   display: flex;
@@ -160,8 +161,8 @@ pre.shiki {
   cursor: pointer;
 }
 .doc-codeblock__copy:hover { color: #e0e0e0; }
-.doc-codeblock pre.shiki { margin: 0; border-radius: 0; border: none; }
-.code-mode-block pre.shiki { margin: 0; border-radius: 0; border: none; }
+.doc-codeblock pre.shiki { margin: 0; border-radius: 0; border: none; overflow-x: auto; }
+.code-mode-block pre.shiki { margin: 0; border-radius: 0; border: none; overflow-x: auto; }
 
 .doc-prompt {
   background: rgba(168, 85, 247, 0.04);
diff --git a/apps/cockpit/src/components/sidebar/navigation-groups.tsx b/apps/cockpit/src/components/sidebar/navigation-groups.tsx
index 897ba478d..bc6af8776 100644
--- a/apps/cockpit/src/components/sidebar/navigation-groups.tsx
+++ b/apps/cockpit/src/components/sidebar/navigation-groups.tsx
@@ -75,7 +75,9 @@ function ProductGroup({
       {open && (
         <nav style={{ display: 'flex', flexDirection: 'column', marginTop: 4 }}>
           {product.sections.flatMap((section) =>
-            section.entries.map((entry) => {
+            section.entries
+              .filter((entry) => entry.topic !== 'overview')
+              .map((entry) => {
               const isActive =
                 entry.product === currentEntry.product &&
                 entry.section === currentEntry.section &&
diff --git a/cockpit/deep-agents/filesystem/angular/src/styles.css b/cockpit/deep-agents/filesystem/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/deep-agents/filesystem/angular/src/styles.css
+++ b/cockpit/deep-agents/filesystem/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/deep-agents/memory/angular/src/styles.css b/cockpit/deep-agents/memory/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/deep-agents/memory/angular/src/styles.css
+++ b/cockpit/deep-agents/memory/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/deep-agents/planning/angular/src/styles.css b/cockpit/deep-agents/planning/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/deep-agents/planning/angular/src/styles.css
+++ b/cockpit/deep-agents/planning/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/deep-agents/sandboxes/angular/src/styles.css b/cockpit/deep-agents/sandboxes/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/deep-agents/sandboxes/angular/src/styles.css
+++ b/cockpit/deep-agents/sandboxes/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/deep-agents/skills/angular/src/styles.css b/cockpit/deep-agents/skills/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/deep-agents/skills/angular/src/styles.css
+++ b/cockpit/deep-agents/skills/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/deep-agents/subagents/angular/src/styles.css b/cockpit/deep-agents/subagents/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/deep-agents/subagents/angular/src/styles.css
+++ b/cockpit/deep-agents/subagents/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/langgraph/deployment-runtime/angular/src/styles.css b/cockpit/langgraph/deployment-runtime/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/langgraph/deployment-runtime/angular/src/styles.css
+++ b/cockpit/langgraph/deployment-runtime/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/langgraph/durable-execution/angular/src/styles.css b/cockpit/langgraph/durable-execution/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/langgraph/durable-execution/angular/src/styles.css
+++ b/cockpit/langgraph/durable-execution/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/langgraph/interrupts/angular/src/styles.css b/cockpit/langgraph/interrupts/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/langgraph/interrupts/angular/src/styles.css
+++ b/cockpit/langgraph/interrupts/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/langgraph/memory/angular/src/styles.css b/cockpit/langgraph/memory/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/langgraph/memory/angular/src/styles.css
+++ b/cockpit/langgraph/memory/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/langgraph/persistence/angular/src/styles.css b/cockpit/langgraph/persistence/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/langgraph/persistence/angular/src/styles.css
+++ b/cockpit/langgraph/persistence/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/langgraph/streaming/angular/src/styles.css b/cockpit/langgraph/streaming/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/langgraph/streaming/angular/src/styles.css
+++ b/cockpit/langgraph/streaming/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/langgraph/subgraphs/angular/src/styles.css b/cockpit/langgraph/subgraphs/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/langgraph/subgraphs/angular/src/styles.css
+++ b/cockpit/langgraph/subgraphs/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/langgraph/time-travel/angular/src/styles.css b/cockpit/langgraph/time-travel/angular/src/styles.css
index e8c43f664..39a32d4e7 100644
--- a/cockpit/langgraph/time-travel/angular/src/styles.css
+++ b/cockpit/langgraph/time-travel/angular/src/styles.css
@@ -1,12 +1,29 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+@import "../../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
 }
 
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #08111f;
-  color: #edf3ff;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/docs/superpowers/plans/2026-04-05-example-app-styling.md b/docs/superpowers/plans/2026-04-05-example-app-styling.md
new file mode 100644
index 000000000..97e20452e
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-05-example-app-styling.md
@@ -0,0 +1,417 @@
+# Example App Styling Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Align all 14 Angular example apps with the website's light glassmorphism theme by adding a shared `tokens.css` to `@cacheplane/design-tokens` and Tailwind v4 to each app, plus fix cockpit sidebar and code overflow issues.
+
+**Architecture:** A new `tokens.css` file in the design-tokens library defines all design tokens as `--ds-*` CSS custom properties. Each Angular app imports this file plus Tailwind v4 in its `styles.css`, replacing the hardcoded dark body styles. The cockpit sidebar filters out "overview" entries, and code blocks get proper overflow handling.
+
+**Tech Stack:** CSS custom properties, Tailwind v4, Angular, Nx, Vitest
+
+---
+
+## File Map
+
+| Action | File | Responsibility |
+|--------|------|----------------|
+| Create | `libs/design-tokens/src/lib/tokens.css` | CSS custom properties for all design tokens |
+| Modify | `libs/design-tokens/src/lib/tokens.spec.ts` | Add test verifying tokens.css exists and contains expected vars |
+| Modify | `cockpit/langgraph/streaming/angular/src/styles.css` | Replace dark theme with tokens + Tailwind v4 |
+| Modify | `cockpit/langgraph/persistence/angular/src/styles.css` | Same |
+| Modify | `cockpit/langgraph/interrupts/angular/src/styles.css` | Same |
+| Modify | `cockpit/langgraph/memory/angular/src/styles.css` | Same |
+| Modify | `cockpit/langgraph/durable-execution/angular/src/styles.css` | Same |
+| Modify | `cockpit/langgraph/subgraphs/angular/src/styles.css` | Same |
+| Modify | `cockpit/langgraph/time-travel/angular/src/styles.css` | Same |
+| Modify | `cockpit/langgraph/deployment-runtime/angular/src/styles.css` | Same |
+| Modify | `cockpit/deep-agents/planning/angular/src/styles.css` | Same |
+| Modify | `cockpit/deep-agents/filesystem/angular/src/styles.css` | Same |
+| Modify | `cockpit/deep-agents/subagents/angular/src/styles.css` | Same |
+| Modify | `cockpit/deep-agents/memory/angular/src/styles.css` | Same |
+| Modify | `cockpit/deep-agents/skills/angular/src/styles.css` | Same |
+| Modify | `cockpit/deep-agents/sandboxes/angular/src/styles.css` | Same |
+| Modify | `apps/cockpit/src/components/sidebar/navigation-groups.tsx` | Filter out overview entries |
+| Modify | `apps/cockpit/src/app/cockpit.css` | Fix code block overflow |
+
+---
+
+### Task 1: Create tokens.css in design-tokens library
+
+**Files:**
+- Create: `libs/design-tokens/src/lib/tokens.css`
+- Modify: `libs/design-tokens/src/lib/tokens.spec.ts`
+
+- [ ] **Step 1: Write the test**
+
+Add a test to the existing spec file that verifies `tokens.css` exists and contains the expected custom properties. Open `libs/design-tokens/src/lib/tokens.spec.ts` and add this test block at the end of the file, inside the existing outer `describe`:
+
+```ts
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+
+describe('tokens.css', () => {
+  const css = readFileSync(
+    resolve(__dirname, 'tokens.css'),
+    'utf-8',
+  );
+
+  it('defines all color tokens as CSS custom properties', () => {
+    expect(css).toContain('--ds-bg:');
+    expect(css).toContain('--ds-accent:');
+    expect(css).toContain('--ds-text-primary:');
+    expect(css).toContain('--ds-text-secondary:');
+    expect(css).toContain('--ds-text-muted:');
+    expect(css).toContain('--ds-accent-surface:');
+  });
+
+  it('defines glass tokens', () => {
+    expect(css).toContain('--ds-glass-bg:');
+    expect(css).toContain('--ds-glass-blur:');
+    expect(css).toContain('--ds-glass-border:');
+    expect(css).toContain('--ds-glass-shadow:');
+  });
+
+  it('defines gradient tokens', () => {
+    expect(css).toContain('--ds-gradient-bg-flow:');
+  });
+
+  it('defines typography tokens', () => {
+    expect(css).toContain('--ds-font-serif:');
+    expect(css).toContain('--ds-font-sans:');
+    expect(css).toContain('--ds-font-mono:');
+  });
+
+  it('defines glow tokens', () => {
+    expect(css).toContain('--ds-glow-hero:');
+    expect(css).toContain('--ds-glow-card:');
+  });
+
+  it('uses :root selector', () => {
+    expect(css).toContain(':root');
+  });
+});
+```
+
+Note: the `readFileSync` and `resolve` imports should be added at the top of the file alongside the existing imports.
+
+- [ ] **Step 2: Run the test to verify it fails**
+
+```bash
+npx nx test design-tokens -- --run
+```
+
+Expected: FAIL — `tokens.css` does not exist yet.
+
+- [ ] **Step 3: Create tokens.css**
+
+Create `libs/design-tokens/src/lib/tokens.css` with all design tokens as CSS custom properties. The variable names match the `--ds-*` prefix used by `libs/ui-react/src/lib/css-vars.ts`:
+
+```css
+/**
+ * Design Tokens — CSS Custom Properties
+ *
+ * Single source of truth for the @cacheplane design system.
+ * Import this file in any app to get all tokens as CSS vars.
+ *
+ * Variable naming: --ds-{category}-{name}
+ * Matches the TS token objects in this library.
+ */
+:root {
+  /* Colors */
+  --ds-bg: #f8f9fc;
+  --ds-accent: #004090;
+  --ds-accent-light: #64C3FD;
+  --ds-accent-glow: rgba(0, 64, 144, 0.2);
+  --ds-accent-border: rgba(0, 64, 144, 0.15);
+  --ds-accent-border-hover: rgba(0, 64, 144, 0.3);
+  --ds-accent-surface: rgba(0, 64, 144, 0.06);
+  --ds-text-primary: #1a1a2e;
+  --ds-text-secondary: #555770;
+  --ds-text-muted: #8b8fa3;
+  --ds-sidebar-bg: rgba(255, 255, 255, 0.45);
+  --ds-angular-red: #DD0031;
+
+  /* Glass */
+  --ds-glass-bg: rgba(255, 255, 255, 0.45);
+  --ds-glass-bg-hover: rgba(255, 255, 255, 0.55);
+  --ds-glass-blur: 16px;
+  --ds-glass-border: rgba(255, 255, 255, 0.6);
+  --ds-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+
+  /* Gradients */
+  --ds-gradient-warm: radial-gradient(circle, rgba(221, 0, 49, 0.18), transparent 70%);
+  --ds-gradient-cool: radial-gradient(circle, rgba(0, 64, 144, 0.18), transparent 70%);
+  --ds-gradient-cool-light: radial-gradient(circle, rgba(100, 195, 253, 0.15), transparent 70%);
+  --ds-gradient-bg-flow: linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%);
+
+  /* Glow */
+  --ds-glow-hero: 0 0 60px rgba(0, 64, 144, 0.15);
+  --ds-glow-demo: 0 0 30px rgba(0, 64, 144, 0.1);
+  --ds-glow-card: 0 0 24px rgba(0, 64, 144, 0.1);
+  --ds-glow-border: 0 0 12px rgba(0, 64, 144, 0.08);
+  --ds-glow-button: 0 0 16px rgba(0, 64, 144, 0.15);
+
+  /* Typography */
+  --ds-font-serif: 'EB Garamond', Georgia, serif;
+  --ds-font-sans: Inter, system-ui, sans-serif;
+  --ds-font-mono: 'JetBrains Mono', monospace;
+}
+```
+
+- [ ] **Step 4: Run the test to verify it passes**
+
+```bash
+npx nx test design-tokens -- --run
+```
+
+Expected: all tests PASS including the new `tokens.css` describe block.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add libs/design-tokens/src/lib/tokens.css libs/design-tokens/src/lib/tokens.spec.ts
+git commit -m "feat(design-tokens): add tokens.css with all design tokens as CSS custom properties"
+```
+
+---
+
+### Task 2: Update all 14 Angular app styles to light theme with Tailwind v4
+
+**Files:**
+- Modify: `cockpit/langgraph/streaming/angular/src/styles.css`
+- Modify: `cockpit/langgraph/persistence/angular/src/styles.css`
+- Modify: `cockpit/langgraph/interrupts/angular/src/styles.css`
+- Modify: `cockpit/langgraph/memory/angular/src/styles.css`
+- Modify: `cockpit/langgraph/durable-execution/angular/src/styles.css`
+- Modify: `cockpit/langgraph/subgraphs/angular/src/styles.css`
+- Modify: `cockpit/langgraph/time-travel/angular/src/styles.css`
+- Modify: `cockpit/langgraph/deployment-runtime/angular/src/styles.css`
+- Modify: `cockpit/deep-agents/planning/angular/src/styles.css`
+- Modify: `cockpit/deep-agents/filesystem/angular/src/styles.css`
+- Modify: `cockpit/deep-agents/subagents/angular/src/styles.css`
+- Modify: `cockpit/deep-agents/memory/angular/src/styles.css`
+- Modify: `cockpit/deep-agents/skills/angular/src/styles.css`
+- Modify: `cockpit/deep-agents/sandboxes/angular/src/styles.css`
+
+- [ ] **Step 1: Replace all 14 styles.css files**
+
+Every Angular app has an identical `styles.css`. Replace the content of all 14 files with:
+
+```css
+@import "../../../../libs/design-tokens/src/lib/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: #ffffff;
+  --color-accent: var(--ds-accent);
+  --color-accent-light: var(--ds-accent-light);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-accent-border);
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```
+
+The 8 LangGraph apps are at `cockpit/langgraph/*/angular/src/styles.css`.
+The 6 Deep Agents apps are at `cockpit/deep-agents/*/angular/src/styles.css`.
+
+Note on the import path: the Angular apps are at depth `cockpit/{product}/{topic}/angular/src/styles.css`. A relative path `../../../../libs/design-tokens/src/lib/tokens.css` resolves from `cockpit/{product}/{topic}/angular/` up to the workspace root, then into the lib. This avoids needing a package.json exports field or Nx build pipeline for a plain CSS file.
+
+If the Angular build's CSS pipeline does not resolve relative paths correctly (it may resolve from `src/` not `angular/`), adjust to `../../../../../libs/design-tokens/src/lib/tokens.css` (one more level up from the `src/` directory).
+
+- [ ] **Step 2: Build one Angular app to verify**
+
+```bash
+npx nx build cockpit-langgraph-streaming-angular --skip-nx-cache
+```
+
+Expected: build succeeds with no CSS errors. If the `@import` path fails, adjust the relative path depth as noted above.
+
+- [ ] **Step 3: Build a Deep Agents app to verify**
+
+```bash
+npx nx build cockpit-deep-agents-planning-angular --skip-nx-cache
+```
+
+Expected: build succeeds. The deep-agents apps are at the same directory depth as LangGraph apps, so the same relative path should work.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add cockpit/langgraph/*/angular/src/styles.css cockpit/deep-agents/*/angular/src/styles.css
+git commit -m "feat(cockpit): replace dark theme with design-token-based light theme and Tailwind v4"
+```
+
+---
+
+### Task 3: Remove overview entries from cockpit sidebar
+
+**Files:**
+- Modify: `apps/cockpit/src/components/sidebar/navigation-groups.tsx`
+
+- [ ] **Step 1: Add filter to exclude overview entries**
+
+In `apps/cockpit/src/components/sidebar/navigation-groups.tsx`, find the `ProductGroup` component. Inside the `{open && (...)}` block, the nav currently renders:
+
+```tsx
+{product.sections.flatMap((section) =>
+  section.entries.map((entry) => {
+```
+
+Change it to filter out entries where `topic` is `'overview'`:
+
+```tsx
+{product.sections.flatMap((section) =>
+  section.entries
+    .filter((entry) => entry.topic !== 'overview')
+    .map((entry) => {
+```
+
+This is a one-line addition (`.filter(...)`) inserted between `.entries` and `.map(...)`.
+
+- [ ] **Step 2: Build cockpit to verify**
+
+```bash
+npx nx build cockpit --skip-nx-cache
+```
+
+Expected: build succeeds. The sidebar should no longer show "Overview" links.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/cockpit/src/components/sidebar/navigation-groups.tsx
+git commit -m "fix(cockpit): remove overview entries from sidebar navigation"
+```
+
+---
+
+### Task 4: Fix code block overflow in cockpit docs
+
+**Files:**
+- Modify: `apps/cockpit/src/app/cockpit.css`
+
+- [ ] **Step 1: Fix the overflow CSS**
+
+In `apps/cockpit/src/app/cockpit.css`, find the `.doc-codeblock` rule (around line 129):
+
+```css
+.doc-codeblock {
+  border: 1px solid rgba(0, 64, 144, 0.12);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  margin: 0.75rem 0;
+}
+```
+
+Change `overflow: hidden` to `overflow: hidden` only on the border-radius clipping, and add a max-width constraint:
+
+```css
+.doc-codeblock {
+  border: 1px solid rgba(0, 64, 144, 0.12);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  margin: 0.75rem 0;
+  max-width: 100%;
+}
+```
+
+Then find `.doc-codeblock pre.shiki` (around line 163):
+
+```css
+.doc-codeblock pre.shiki { margin: 0; border-radius: 0; border: none; }
+```
+
+Add `overflow-x: auto` to it:
+
+```css
+.doc-codeblock pre.shiki { margin: 0; border-radius: 0; border: none; overflow-x: auto; }
+```
+
+Also find `.code-mode-block pre.shiki` on the same line/next line:
+
+```css
+.code-mode-block pre.shiki { margin: 0; border-radius: 0; border: none; }
+```
+
+Add the same fix:
+
+```css
+.code-mode-block pre.shiki { margin: 0; border-radius: 0; border: none; overflow-x: auto; }
+```
+
+- [ ] **Step 2: Build cockpit to verify**
+
+```bash
+npx nx build cockpit --skip-nx-cache
+```
+
+Expected: build succeeds.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/cockpit/src/app/cockpit.css
+git commit -m "fix(cockpit): add overflow-x scrolling to code blocks in docs mode"
+```
+
+---
+
+### Task 5: Verify everything works end-to-end
+
+- [ ] **Step 1: Run design-tokens tests**
+
+```bash
+npx nx test design-tokens -- --run
+```
+
+Expected: all tests pass.
+
+- [ ] **Step 2: Run cockpit tests**
+
+```bash
+npx nx test cockpit -- --run
+```
+
+Expected: all tests pass.
+
+- [ ] **Step 3: Build cockpit**
+
+```bash
+npx nx build cockpit --skip-nx-cache
+```
+
+Expected: build succeeds.
+
+- [ ] **Step 4: Build all Angular examples**
+
+```bash
+npx nx run-many -t build --projects='cockpit-*-angular' --skip-nx-cache
+```
+
+Expected: all 14 Angular apps build successfully.
+
+- [ ] **Step 5: Run smoke test (if servers are running)**
+
+```bash
+npx playwright test apps/cockpit/e2e/all-examples-smoke.spec.ts --grep "renders chat UI"
+```
+
+Expected: 14/14 pass. The Angular apps should now render with a light background instead of dark navy.
diff --git a/docs/superpowers/specs/2026-04-05-example-app-styling-design.md b/docs/superpowers/specs/2026-04-05-example-app-styling-design.md
new file mode 100644
index 000000000..91ae197ef
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-05-example-app-styling-design.md
@@ -0,0 +1,150 @@
+# Example App Styling & Layout Design
+
+## Problem
+
+The 14 cockpit Angular example apps use a hardcoded dark navy theme (`background: #08111f`) with no CSS variables, no Tailwind, and no reference to the shared design system. They render inside the cockpit's iframe with visually jarring dark backgrounds against the cockpit's light glassmorphism shell. The cockpit sidebar also surfaces "overview" page links that are unnecessary, and code blocks in documentation overflow their containers horizontally.
+
+## Goal
+
+Align all 14 Angular example apps with the website's light glassmorphism theme by consuming `@cacheplane/design-tokens` via a shared CSS custom properties file and adding Tailwind v4. Remove the "overview" sidebar links and fix the code overflow layout issue.
+
+## Constraints
+
+- The `@cacheplane/chat` library is being rebuilt separately and is **out of scope**. That library will use Tailwind + CSS vars (`--chat-*`) and will consume the same token vars we're setting up here.
+- Angular apps render inside iframes in the cockpit — no CSS inheritance from the parent shell.
+- Angular apps should remain full-bleed (no header/chrome — the cockpit shell provides all context).
+- Must use Tailwind v4 (`@import "tailwindcss"` + `@theme` block) to match the website and cockpit.
+
+## Architecture
+
+### Token Distribution
+
+```
+@cacheplane/design-tokens
+├── src/lib/colors.ts        (existing TS objects)
+├── src/lib/glass.ts         (existing TS objects)
+├── src/lib/gradients.ts     (existing TS objects)
+├── src/lib/typography.ts    (existing TS objects)
+├── src/lib/tokens.css       ← NEW: CSS custom properties
+└── src/index.ts             (existing barrel export)
+```
+
+**Three consumers, one token source:**
+
+| Consumer | How it imports tokens |
+|----------|---------------------|
+| Website (Next.js) | TS objects → injects as CSS vars at runtime |
+| Cockpit Shell (Next.js) | TS via `@cacheplane/ui-react` `cssVars` → CSS vars |
+| 14 Angular apps | `@import "@cacheplane/design-tokens/tokens.css"` → CSS vars |
+
+### New: `tokens.css`
+
+A hand-maintained CSS file in the design-tokens library that defines all tokens as `--ds-*` custom properties on `:root`. This uses the same `--ds-` prefix already used by the cockpit shell's `cssVars` injection, ensuring consistency.
+
+```css
+:root {
+  /* Colors */
+  --ds-bg: #f8f9fc;
+  --ds-surface: #ffffff;
+  --ds-accent: #004090;
+  --ds-accent-hover: #003070;
+  --ds-text-primary: #1a1a2e;
+  --ds-text-secondary: #555770;
+  --ds-text-muted: #8b8fa3;
+  --ds-border: rgba(0, 64, 144, 0.08);
+  --ds-error: #ef4444;
+  --ds-success: #22c55e;
+
+  /* Glass */
+  --ds-glass-bg: rgba(255, 255, 255, 0.45);
+  --ds-glass-border: rgba(255, 255, 255, 0.5);
+  --ds-glass-blur: 16px;
+  --ds-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
+
+  /* Gradient */
+  --ds-gradient-bg: linear-gradient(135deg, #fff5f5 0%, #f0e6ff 40%, #e6f0ff 100%);
+
+  /* Typography */
+  --ds-font-serif: 'EB Garamond', Georgia, serif;
+  --ds-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --ds-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+}
+```
+
+The values mirror what's in the TS objects (`colors.ts`, `glass.ts`, etc.). They change rarely — this is a design system, not application state.
+
+### Angular App `styles.css` — New Structure
+
+Each Angular app's `styles.css` replaces the 4-line dark reset with:
+
+```css
+@import "@cacheplane/design-tokens/tokens.css";
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--ds-bg);
+  --color-surface: var(--ds-surface);
+  --color-accent: var(--ds-accent);
+  --color-text-primary: var(--ds-text-primary);
+  --color-text-secondary: var(--ds-text-secondary);
+  --color-text-muted: var(--ds-text-muted);
+  --color-border: var(--ds-border);
+  --color-error: var(--ds-error);
+  --color-success: var(--ds-success);
+  --font-sans: var(--ds-font-sans);
+  --font-serif: var(--ds-font-serif);
+  --font-mono: var(--ds-font-mono);
+}
+
+body {
+  margin: 0;
+  font-family: var(--ds-font-sans);
+  background: var(--ds-bg);
+  color: var(--ds-text-primary);
+}
+```
+
+This gives every Angular app:
+- All design tokens as CSS custom properties (via `tokens.css`)
+- Tailwind v4 utility classes (via `@import "tailwindcss"`)
+- Tailwind-aware token aliases (via `@theme` block) — e.g., `bg-bg`, `text-accent`, `font-mono`
+- A light theme body matching the website
+
+### Tailwind v4 Setup per Angular App
+
+Each Angular app needs:
+
+1. **`tailwindcss` as a dev dependency** — added to the root `package.json` (already present for website/cockpit)
+2. **Updated `styles.css`** — as shown above
+3. **No `tailwind.config.js`** — Tailwind v4 uses CSS-native `@theme` blocks instead
+
+The Angular build toolchain (`@angular/build:application` via esbuild) supports CSS imports natively. The `@import "tailwindcss"` directive is processed by the CSS pipeline at build time.
+
+### Cockpit Fixes
+
+#### Remove "Overview" Sidebar Link
+
+The cockpit sidebar surfaces navigation links generated from the manifest. The "overview" entries in the manifest (or the sidebar rendering logic) need to be filtered out so that "overview" doesn't appear as a clickable page link. The default behavior of showing Run mode when navigating to a capability remains unchanged.
+
+#### Fix Code Overflow
+
+Code blocks in the documentation mode overflow their container on the x-axis, causing layout issues (visible at e.g., `/langgraph/core-capabilities/persistence/overview/python`). The fix is a CSS constraint — `max-width: 100%` and `overflow-x: auto` on the code block container in the cockpit's doc rendering styles.
+
+## File Map
+
+| Action | File | Responsibility |
+|--------|------|----------------|
+| Create | `libs/design-tokens/src/lib/tokens.css` | CSS custom properties for all design tokens |
+| Modify | `libs/design-tokens/package.json` | Add `exports` entry for `tokens.css` |
+| Modify | `cockpit/langgraph/*/angular/src/styles.css` (8 files) | Replace dark theme with token-based light theme + Tailwind |
+| Modify | `cockpit/deep-agents/*/angular/src/styles.css` (6 files) | Same as above |
+| Modify | `apps/cockpit/src/components/sidebar/navigation-groups.tsx` | Filter out "overview" entries |
+| Modify | `apps/cockpit/src/app/cockpit.css` | Fix code block overflow (`max-width`, `overflow-x: auto`) |
+
+## Out of Scope
+
+- Chat component redesign (`@cacheplane/chat` rebuild is a separate effort)
+- Adding headers/chrome to Angular apps (full-bleed chat, cockpit provides context)
+- Routing changes in the cockpit
+- Website or cockpit shell styling changes
+- Tailwind classes in Angular component templates (that comes with the chat lib)
diff --git a/libs/design-tokens/src/lib/tokens.css b/libs/design-tokens/src/lib/tokens.css
new file mode 100644
index 000000000..a0bf257a3
--- /dev/null
+++ b/libs/design-tokens/src/lib/tokens.css
@@ -0,0 +1,49 @@
+/**
+ * Design Tokens — CSS Custom Properties
+ *
+ * Single source of truth for the @cacheplane design system.
+ * Import this file in any app to get all tokens as CSS vars.
+ *
+ * Variable naming: --ds-{category}-{name}
+ * Matches the TS token objects in this library.
+ */
+:root {
+  /* Colors */
+  --ds-bg: #f8f9fc;
+  --ds-accent: #004090;
+  --ds-accent-light: #64C3FD;
+  --ds-accent-glow: rgba(0, 64, 144, 0.2);
+  --ds-accent-border: rgba(0, 64, 144, 0.15);
+  --ds-accent-border-hover: rgba(0, 64, 144, 0.3);
+  --ds-accent-surface: rgba(0, 64, 144, 0.06);
+  --ds-text-primary: #1a1a2e;
+  --ds-text-secondary: #555770;
+  --ds-text-muted: #8b8fa3;
+  --ds-sidebar-bg: rgba(255, 255, 255, 0.45);
+  --ds-angular-red: #DD0031;
+
+  /* Glass */
+  --ds-glass-bg: rgba(255, 255, 255, 0.45);
+  --ds-glass-bg-hover: rgba(255, 255, 255, 0.55);
+  --ds-glass-blur: 16px;
+  --ds-glass-border: rgba(255, 255, 255, 0.6);
+  --ds-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+
+  /* Gradients */
+  --ds-gradient-warm: radial-gradient(circle, rgba(221, 0, 49, 0.18), transparent 70%);
+  --ds-gradient-cool: radial-gradient(circle, rgba(0, 64, 144, 0.18), transparent 70%);
+  --ds-gradient-cool-light: radial-gradient(circle, rgba(100, 195, 253, 0.15), transparent 70%);
+  --ds-gradient-bg-flow: linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%);
+
+  /* Glow */
+  --ds-glow-hero: 0 0 60px rgba(0, 64, 144, 0.15);
+  --ds-glow-demo: 0 0 30px rgba(0, 64, 144, 0.1);
+  --ds-glow-card: 0 0 24px rgba(0, 64, 144, 0.1);
+  --ds-glow-border: 0 0 12px rgba(0, 64, 144, 0.08);
+  --ds-glow-button: 0 0 16px rgba(0, 64, 144, 0.15);
+
+  /* Typography */
+  --ds-font-serif: 'EB Garamond', Georgia, serif;
+  --ds-font-sans: Inter, system-ui, sans-serif;
+  --ds-font-mono: 'JetBrains Mono', monospace;
+}
diff --git a/libs/design-tokens/src/lib/tokens.spec.ts b/libs/design-tokens/src/lib/tokens.spec.ts
index 421edc2ea..9f9255987 100644
--- a/libs/design-tokens/src/lib/tokens.spec.ts
+++ b/libs/design-tokens/src/lib/tokens.spec.ts
@@ -1,3 +1,5 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
 import { describe, expect, it } from 'vitest';
 import { colors, glass, gradient, glow, typography, tokens } from '../index';
 
@@ -44,4 +46,46 @@ describe('design-tokens', () => {
     expect(() => { (colors as any).bg = 'red'; }).toThrow();
     expect(() => { (glass as any).blur = '0px'; }).toThrow();
   });
+
+  describe('tokens.css', () => {
+    const css = readFileSync(
+      resolve(__dirname, 'tokens.css'),
+      'utf-8',
+    );
+
+    it('defines all color tokens as CSS custom properties', () => {
+      expect(css).toContain('--ds-bg:');
+      expect(css).toContain('--ds-accent:');
+      expect(css).toContain('--ds-text-primary:');
+      expect(css).toContain('--ds-text-secondary:');
+      expect(css).toContain('--ds-text-muted:');
+      expect(css).toContain('--ds-accent-surface:');
+    });
+
+    it('defines glass tokens', () => {
+      expect(css).toContain('--ds-glass-bg:');
+      expect(css).toContain('--ds-glass-blur:');
+      expect(css).toContain('--ds-glass-border:');
+      expect(css).toContain('--ds-glass-shadow:');
+    });
+
+    it('defines gradient tokens', () => {
+      expect(css).toContain('--ds-gradient-bg-flow:');
+    });
+
+    it('defines typography tokens', () => {
+      expect(css).toContain('--ds-font-serif:');
+      expect(css).toContain('--ds-font-sans:');
+      expect(css).toContain('--ds-font-mono:');
+    });
+
+    it('defines glow tokens', () => {
+      expect(css).toContain('--ds-glow-hero:');
+      expect(css).toContain('--ds-glow-card:');
+    });
+
+    it('uses :root selector', () => {
+      expect(css).toContain(':root');
+    });
+  });
 });