diff --git a/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts b/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts
index 0b9aea1da..c5530d9b8 100644
--- a/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts
+++ b/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts
@@ -34,25 +34,25 @@ interface FileOperation {
   template: `
     <example-chat-layout sidebarWidth="w-72">
       <chat main [agent]="agent" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
-      <div sidebar class="p-4 space-y-2" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-2" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--chat-text-muted, #777);">File Operations</h3>
+            style="color: var(--ngaf-chat-text-muted);">File Operations</h3>
         @if (fileOps().length === 0) {
-          <p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No file operations yet</p>
+          <p class="text-sm italic" style="color: var(--ngaf-chat-text-muted);">No file operations yet</p>
         }
         @for (op of fileOps(); track $index) {
           <div class="rounded-md px-2 py-1.5 text-sm space-y-1"
-               style="background: var(--chat-bg-hover, #222);">
+               style="background: var(--ngaf-chat-surface-alt);">
             <div class="flex items-center gap-2">
               <span class="inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium"
                     [style.background]="op.type === 'read' ? 'rgba(59,130,246,0.15)' : 'rgba(234,179,8,0.15)'"
                     [style.color]="op.type === 'read' ? '#60a5fa' : '#facc15'">
                 {{ op.type === 'read' ? 'READ' : 'WRITE' }}
               </span>
-              <span class="truncate text-xs" style="color: var(--chat-text, #e0e0e0);">{{ op.path }}</span>
+              <span class="truncate text-xs" style="color: var(--ngaf-chat-text);">{{ op.path }}</span>
             </div>
             @if (op.preview) {
-              <p class="truncate text-xs" style="color: var(--chat-text-muted, #777);">{{ op.preview }}</p>
+              <p class="truncate text-xs" style="color: var(--ngaf-chat-text-muted);">{{ op.preview }}</p>
             }
           </div>
         }
diff --git a/cockpit/deep-agents/filesystem/angular/src/app/views/file-preview.component.ts b/cockpit/deep-agents/filesystem/angular/src/app/views/file-preview.component.ts
index 7017936ad..d5c1f076c 100644
--- a/cockpit/deep-agents/filesystem/angular/src/app/views/file-preview.component.ts
+++ b/cockpit/deep-agents/filesystem/angular/src/app/views/file-preview.component.ts
@@ -5,14 +5,14 @@ import { Component, input } from '@angular/core';
   standalone: true,
   template: `
     <div class="rounded-xl my-2 overflow-hidden"
-         style="border: 1px solid var(--chat-border); background: var(--chat-bg-alt);">
+         style="border: 1px solid var(--ngaf-chat-separator); background: var(--ngaf-chat-surface-alt);">
       <div class="flex items-center justify-between px-4 py-2"
-           style="border-bottom: 1px solid var(--chat-border); background: var(--chat-bg);">
-        <span class="text-sm font-mono truncate" style="color: var(--chat-text);">{{ path() }}</span>
-        <span class="text-xs ml-2 shrink-0" style="color: var(--chat-text-muted);">{{ size() }}</span>
+           style="border-bottom: 1px solid var(--ngaf-chat-separator); background: var(--ngaf-chat-bg);">
+        <span class="text-sm font-mono truncate" style="color: var(--ngaf-chat-text);">{{ path() }}</span>
+        <span class="text-xs ml-2 shrink-0" style="color: var(--ngaf-chat-text-muted);">{{ size() }}</span>
       </div>
       <pre class="whitespace-pre-wrap break-words font-mono text-xs leading-relaxed p-4 m-0 overflow-x-auto"
-           style="color: var(--chat-text); background: var(--chat-bg-alt);">{{ content() }}</pre>
+           style="color: var(--ngaf-chat-text); background: var(--ngaf-chat-surface-alt);">{{ content() }}</pre>
     </div>
   `,
 })
diff --git a/cockpit/deep-agents/filesystem/angular/src/index.html b/cockpit/deep-agents/filesystem/angular/src/index.html
index f385242c9..19f9fd571 100644
--- a/cockpit/deep-agents/filesystem/angular/src/index.html
+++ b/cockpit/deep-agents/filesystem/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Filesystem — Deep Agents Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-filesystem></app-filesystem>
 </body>
 </html>
diff --git a/cockpit/deep-agents/filesystem/angular/src/styles.css b/cockpit/deep-agents/filesystem/angular/src/styles.css
index 061c66cf8..d42cba930 100644
--- a/cockpit/deep-agents/filesystem/angular/src/styles.css
+++ b/cockpit/deep-agents/filesystem/angular/src/styles.css
@@ -1,30 +1,9 @@
-@import "../../../../../libs/design-tokens/src/lib/tokens.css";
-@import "tailwindcss";
-@source "../../../../../libs/chat/src/";
+@import "@ngaf/example-layouts/theme.css";
 
-@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 {
+html, body {
+  height: 100%;
   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;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
 }
diff --git a/cockpit/deep-agents/memory/angular/src/app/memory.component.ts b/cockpit/deep-agents/memory/angular/src/app/memory.component.ts
index ed72c83f0..e95093933 100644
--- a/cockpit/deep-agents/memory/angular/src/app/memory.component.ts
+++ b/cockpit/deep-agents/memory/angular/src/app/memory.component.ts
@@ -23,21 +23,21 @@ import { environment } from '../environments/environment';
   template: `
     <example-chat-layout sidebarWidth="w-72">
       <chat main [agent]="agent" class="flex-1 min-w-0" />
-      <div sidebar class="p-4 space-y-2" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-2" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--chat-text-muted, #777);">
+            style="color: var(--ngaf-chat-text-muted);">
           Learned Facts
           @if (memoryEntries().length > 0) {
             <span class="ml-1 tabular-nums">({{ memoryEntries().length }})</span>
           }
         </h3>
         @if (memoryEntries().length === 0) {
-          <p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No facts learned yet</p>
+          <p class="text-sm italic" style="color: var(--ngaf-chat-text-muted);">No facts learned yet</p>
         }
         @for (entry of memoryEntries(); track entry[0]) {
           <div class="text-sm py-1">
-            <span class="font-medium" style="color: var(--chat-text, #e0e0e0);">{{ entry[0] }}:</span>
-            <span style="color: var(--chat-text-muted, #777);"> {{ entry[1] }}</span>
+            <span class="font-medium" style="color: var(--ngaf-chat-text);">{{ entry[0] }}:</span>
+            <span style="color: var(--ngaf-chat-text-muted);"> {{ entry[1] }}</span>
           </div>
         }
       </div>
diff --git a/cockpit/deep-agents/memory/angular/src/index.html b/cockpit/deep-agents/memory/angular/src/index.html
index 2c0da9ab7..872552b83 100644
--- a/cockpit/deep-agents/memory/angular/src/index.html
+++ b/cockpit/deep-agents/memory/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Memory — Deep Agents Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-da-memory></app-da-memory>
 </body>
 </html>
diff --git a/cockpit/deep-agents/memory/angular/src/styles.css b/cockpit/deep-agents/memory/angular/src/styles.css
index 061c66cf8..d42cba930 100644
--- a/cockpit/deep-agents/memory/angular/src/styles.css
+++ b/cockpit/deep-agents/memory/angular/src/styles.css
@@ -1,30 +1,9 @@
-@import "../../../../../libs/design-tokens/src/lib/tokens.css";
-@import "tailwindcss";
-@source "../../../../../libs/chat/src/";
+@import "@ngaf/example-layouts/theme.css";
 
-@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 {
+html, body {
+  height: 100%;
   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;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
 }
diff --git a/cockpit/deep-agents/planning/angular/src/app/planning.component.ts b/cockpit/deep-agents/planning/angular/src/app/planning.component.ts
index 22c3d33aa..1cb6d8629 100644
--- a/cockpit/deep-agents/planning/angular/src/app/planning.component.ts
+++ b/cockpit/deep-agents/planning/angular/src/app/planning.component.ts
@@ -35,25 +35,25 @@ interface PlanStep {
   template: `
     <example-chat-layout sidebarWidth="w-72">
       <chat main [agent]="agent" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
-      <div sidebar class="p-4 space-y-2" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-2" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--chat-text-muted, #777);">Plan</h3>
+            style="color: var(--ngaf-chat-text-muted);">Plan</h3>
         @if (planSteps().length === 0) {
-          <p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No plan yet</p>
+          <p class="text-sm italic" style="color: var(--ngaf-chat-text-muted);">No plan yet</p>
         }
         @for (step of planSteps(); track step.title) {
           <div class="flex items-start gap-2 rounded-md px-2 py-1.5 text-sm"
-               style="background: var(--chat-bg-hover, #222);">
+               style="background: var(--ngaf-chat-surface-alt);">
             <span class="mt-0.5 shrink-0 text-base leading-none">
               @if (step.status === 'complete') {
-                <span style="color: #22c55e;">&#10003;</span>
+                <span style="color: var(--ngaf-chat-success);">&#10003;</span>
               } @else if (step.status === 'in_progress') {
-                <span class="inline-block animate-spin" style="color: var(--chat-text-muted, #777);">&#9696;</span>
+                <span class="inline-block animate-spin" style="color: var(--ngaf-chat-text-muted);">&#9696;</span>
               } @else {
-                <span style="color: var(--chat-border-light, #444);">&#9675;</span>
+                <span style="color: var(--ngaf-chat-separator);">&#9675;</span>
               }
             </span>
-            <span style="color: var(--chat-text, #e0e0e0);">{{ step.title }}</span>
+            <span style="color: var(--ngaf-chat-text);">{{ step.title }}</span>
           </div>
         }
       </div>
diff --git a/cockpit/deep-agents/planning/angular/src/app/views/checkbox-row.component.ts b/cockpit/deep-agents/planning/angular/src/app/views/checkbox-row.component.ts
index 941efbe87..d3ec340f1 100644
--- a/cockpit/deep-agents/planning/angular/src/app/views/checkbox-row.component.ts
+++ b/cockpit/deep-agents/planning/angular/src/app/views/checkbox-row.component.ts
@@ -4,7 +4,7 @@ import { Component, input } from '@angular/core';
   selector: 'checkbox-row',
   standalone: true,
   template: `
-    <label class="flex items-center gap-2 py-1 cursor-pointer text-sm" style="color: var(--chat-text);">
+    <label class="flex items-center gap-2 py-1 cursor-pointer text-sm" style="color: var(--ngaf-chat-text);">
       <input
         type="checkbox"
         [checked]="checked()"
diff --git a/cockpit/deep-agents/planning/angular/src/app/views/plan-checklist.component.ts b/cockpit/deep-agents/planning/angular/src/app/views/plan-checklist.component.ts
index 84a06a608..0d34c7130 100644
--- a/cockpit/deep-agents/planning/angular/src/app/views/plan-checklist.component.ts
+++ b/cockpit/deep-agents/planning/angular/src/app/views/plan-checklist.component.ts
@@ -4,8 +4,8 @@ import { Component, input } from '@angular/core';
   selector: 'plan-checklist',
   standalone: true,
   template: `
-    <div class="border rounded-xl p-4 my-2" style="border-color: var(--chat-border); background: var(--chat-bg-alt);">
-      <h4 class="text-sm font-semibold mb-2" style="color: var(--chat-text);">{{ title() }}</h4>
+    <div class="border rounded-xl p-4 my-2" style="border-color: var(--ngaf-chat-separator); background: var(--ngaf-chat-surface-alt);">
+      <h4 class="text-sm font-semibold mb-2" style="color: var(--ngaf-chat-text);">{{ title() }}</h4>
       <ng-content />
     </div>
   `,
diff --git a/cockpit/deep-agents/planning/angular/src/index.html b/cockpit/deep-agents/planning/angular/src/index.html
index 564ce18e9..12639ad40 100644
--- a/cockpit/deep-agents/planning/angular/src/index.html
+++ b/cockpit/deep-agents/planning/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Planning — Deep Agents Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-planning></app-planning>
 </body>
 </html>
diff --git a/cockpit/deep-agents/planning/angular/src/styles.css b/cockpit/deep-agents/planning/angular/src/styles.css
index 061c66cf8..d42cba930 100644
--- a/cockpit/deep-agents/planning/angular/src/styles.css
+++ b/cockpit/deep-agents/planning/angular/src/styles.css
@@ -1,30 +1,9 @@
-@import "../../../../../libs/design-tokens/src/lib/tokens.css";
-@import "tailwindcss";
-@source "../../../../../libs/chat/src/";
+@import "@ngaf/example-layouts/theme.css";
 
-@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 {
+html, body {
+  height: 100%;
   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;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
 }
diff --git a/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts b/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts
index cf4ed4198..30b759aba 100644
--- a/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts
+++ b/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts
@@ -32,27 +32,27 @@ interface CodeExecution {
   template: `
     <example-chat-layout sidebarWidth="w-80">
       <chat main [agent]="agent" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
-      <div sidebar class="p-4 space-y-3" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-3" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--chat-text-muted, #777);">Execution Output</h3>
+            style="color: var(--ngaf-chat-text-muted);">Execution Output</h3>
         @if (executions().length === 0) {
-          <p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No code executed yet</p>
+          <p class="text-sm italic" style="color: var(--ngaf-chat-text-muted);">No code executed yet</p>
         }
         @for (exec of executions(); track exec.id) {
           <div class="rounded-lg p-3 space-y-2"
-               style="background: var(--chat-input-bg, #262626); border: 1px solid var(--chat-border, #333);">
-            <div class="text-xs font-semibold" style="color: var(--chat-text-muted, #777);">Code</div>
+               style="background: var(--ngaf-chat-surface-alt); border: 1px solid var(--ngaf-chat-separator);">
+            <div class="text-xs font-semibold" style="color: var(--ngaf-chat-text-muted);">Code</div>
             <pre class="whitespace-pre-wrap break-words font-mono text-xs leading-relaxed p-2 rounded overflow-x-auto"
-                 style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">{{ exec.code }}</pre>
+                 style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">{{ exec.code }}</pre>
             @if (exec.stdout) {
-              <div class="text-xs font-semibold" style="color: var(--chat-success, #4ade80);">stdout</div>
+              <div class="text-xs font-semibold" style="color: var(--ngaf-chat-success);">stdout</div>
               <pre class="whitespace-pre-wrap break-words font-mono text-xs leading-relaxed p-2 rounded"
-                   style="background: var(--chat-bg, #171717); color: var(--chat-success, #4ade80);">{{ exec.stdout }}</pre>
+                   style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-success);">{{ exec.stdout }}</pre>
             }
             @if (exec.stderr) {
-              <div class="text-xs font-semibold" style="color: var(--chat-error-text, #f87171);">stderr</div>
+              <div class="text-xs font-semibold" style="color: var(--ngaf-chat-error-text);">stderr</div>
               <pre class="whitespace-pre-wrap break-words font-mono text-xs leading-relaxed p-2 rounded"
-                   style="background: var(--chat-bg, #171717); color: var(--chat-error-text, #f87171);">{{ exec.stderr }}</pre>
+                   style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-error-text);">{{ exec.stderr }}</pre>
             }
           </div>
         }
diff --git a/cockpit/deep-agents/sandboxes/angular/src/app/views/code-execution.component.ts b/cockpit/deep-agents/sandboxes/angular/src/app/views/code-execution.component.ts
index 5e81550d7..439b4fd2c 100644
--- a/cockpit/deep-agents/sandboxes/angular/src/app/views/code-execution.component.ts
+++ b/cockpit/deep-agents/sandboxes/angular/src/app/views/code-execution.component.ts
@@ -5,27 +5,27 @@ import { Component, input } from '@angular/core';
   standalone: true,
   template: `
     <div class="rounded-xl my-2 overflow-hidden"
-         style="border: 1px solid var(--chat-border); background: var(--chat-bg-alt);">
+         style="border: 1px solid var(--ngaf-chat-separator); background: var(--ngaf-chat-surface-alt);">
       <div class="px-4 py-2 text-xs font-semibold uppercase tracking-wide"
-           style="border-bottom: 1px solid var(--chat-border); background: var(--chat-bg); color: var(--chat-text-muted);">
+           style="border-bottom: 1px solid var(--ngaf-chat-separator); background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text-muted);">
         Code Execution
       </div>
       <pre class="whitespace-pre-wrap break-words font-mono text-xs leading-relaxed p-4 m-0 overflow-x-auto"
-           style="color: var(--chat-text); background: var(--chat-bg-alt);">{{ code() }}</pre>
+           style="color: var(--ngaf-chat-text); background: var(--ngaf-chat-surface-alt);">{{ code() }}</pre>
       @if (stdout()) {
         <div class="px-4 py-2"
-             style="border-top: 1px solid var(--chat-border);">
-          <div class="text-xs font-semibold mb-1" style="color: var(--chat-success, #4ade80);">stdout</div>
+             style="border-top: 1px solid var(--ngaf-chat-separator);">
+          <div class="text-xs font-semibold mb-1" style="color: var(--ngaf-chat-success);">stdout</div>
           <pre class="whitespace-pre-wrap break-words font-mono text-xs leading-relaxed p-2 m-0 rounded"
-               style="background: var(--chat-bg); color: var(--chat-success, #4ade80);">{{ stdout() }}</pre>
+               style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-success);">{{ stdout() }}</pre>
         </div>
       }
       @if (stderr()) {
         <div class="px-4 py-2"
-             style="border-top: 1px solid var(--chat-border);">
-          <div class="text-xs font-semibold mb-1" style="color: var(--chat-error-text, #f87171);">stderr</div>
+             style="border-top: 1px solid var(--ngaf-chat-separator);">
+          <div class="text-xs font-semibold mb-1" style="color: var(--ngaf-chat-error-text);">stderr</div>
           <pre class="whitespace-pre-wrap break-words font-mono text-xs leading-relaxed p-2 m-0 rounded"
-               style="background: var(--chat-bg); color: var(--chat-error-text, #f87171);">{{ stderr() }}</pre>
+               style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-error-text);">{{ stderr() }}</pre>
         </div>
       }
     </div>
diff --git a/cockpit/deep-agents/sandboxes/angular/src/index.html b/cockpit/deep-agents/sandboxes/angular/src/index.html
index a6a5ba118..2cbbe4ec1 100644
--- a/cockpit/deep-agents/sandboxes/angular/src/index.html
+++ b/cockpit/deep-agents/sandboxes/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Sandboxes — Deep Agents Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-sandboxes></app-sandboxes>
 </body>
 </html>
diff --git a/cockpit/deep-agents/sandboxes/angular/src/styles.css b/cockpit/deep-agents/sandboxes/angular/src/styles.css
index 061c66cf8..d42cba930 100644
--- a/cockpit/deep-agents/sandboxes/angular/src/styles.css
+++ b/cockpit/deep-agents/sandboxes/angular/src/styles.css
@@ -1,30 +1,9 @@
-@import "../../../../../libs/design-tokens/src/lib/tokens.css";
-@import "tailwindcss";
-@source "../../../../../libs/chat/src/";
+@import "@ngaf/example-layouts/theme.css";
 
-@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 {
+html, body {
+  height: 100%;
   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;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
 }
diff --git a/cockpit/deep-agents/skills/angular/src/app/skills.component.ts b/cockpit/deep-agents/skills/angular/src/app/skills.component.ts
index 8f4885677..67bafb88e 100644
--- a/cockpit/deep-agents/skills/angular/src/app/skills.component.ts
+++ b/cockpit/deep-agents/skills/angular/src/app/skills.component.ts
@@ -34,31 +34,31 @@ interface SkillInvocation {
   template: `
     <example-chat-layout sidebarWidth="w-72">
       <chat main [agent]="agent" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
-      <div sidebar class="p-4 space-y-3" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-3" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--chat-text-muted, #777);">Skill Invocations</h3>
+            style="color: var(--ngaf-chat-text-muted);">Skill Invocations</h3>
         @if (invocations().length === 0) {
-          <p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No skills invoked yet</p>
+          <p class="text-sm italic" style="color: var(--ngaf-chat-text-muted);">No skills invoked yet</p>
         }
         @for (inv of invocations(); track inv.id) {
           <div class="rounded-lg p-3 space-y-2"
-               style="background: var(--chat-input-bg, #262626); border: 1px solid var(--chat-border, #333);">
+               style="background: var(--ngaf-chat-surface-alt); border: 1px solid var(--ngaf-chat-separator);">
             <div class="flex items-center gap-2">
               <span class="inline-block rounded-full px-2 py-0.5 text-xs font-semibold"
-                    style="background: var(--chat-accent, #6d28d9); color: #fff;">
+                    style="background: var(--ngaf-chat-primary); color: var(--ngaf-chat-on-primary);">
                 {{ inv.name }}
               </span>
             </div>
-            <div class="text-xs space-y-1" style="color: var(--chat-text-muted, #777);">
-              <p class="font-semibold" style="color: var(--chat-text, #e0e0e0);">Input</p>
+            <div class="text-xs space-y-1" style="color: var(--ngaf-chat-text-muted);">
+              <p class="font-semibold" style="color: var(--ngaf-chat-text);">Input</p>
               <pre class="whitespace-pre-wrap break-words font-mono text-xs leading-relaxed p-1.5 rounded"
-                   style="background: var(--chat-bg, #171717);">{{ formatArgs(inv.args) }}</pre>
+                   style="background: var(--ngaf-chat-bg);">{{ formatArgs(inv.args) }}</pre>
             </div>
             @if (inv.result !== undefined) {
-              <div class="text-xs space-y-1" style="color: var(--chat-text-muted, #777);">
-                <p class="font-semibold" style="color: var(--chat-success, #4ade80);">Output</p>
+              <div class="text-xs space-y-1" style="color: var(--ngaf-chat-text-muted);">
+                <p class="font-semibold" style="color: var(--ngaf-chat-success);">Output</p>
                 <pre class="whitespace-pre-wrap break-words font-mono text-xs leading-relaxed p-1.5 rounded"
-                     style="background: var(--chat-bg, #171717);">{{ inv.result }}</pre>
+                     style="background: var(--ngaf-chat-bg);">{{ inv.result }}</pre>
               </div>
             }
           </div>
diff --git a/cockpit/deep-agents/skills/angular/src/app/views/calculator-result.component.ts b/cockpit/deep-agents/skills/angular/src/app/views/calculator-result.component.ts
index f9a884e6a..9cbe77f21 100644
--- a/cockpit/deep-agents/skills/angular/src/app/views/calculator-result.component.ts
+++ b/cockpit/deep-agents/skills/angular/src/app/views/calculator-result.component.ts
@@ -5,15 +5,15 @@ import { Component, input } from '@angular/core';
   standalone: true,
   template: `
     <div class="inline-flex items-center gap-2 rounded-lg px-3 py-1.5 my-1"
-         style="background: var(--chat-bg-alt); border: 1px solid var(--chat-border);">
+         style="background: var(--ngaf-chat-surface-alt); border: 1px solid var(--ngaf-chat-separator);">
       <span class="rounded-full px-2 py-0.5 text-xs font-semibold"
-            style="background: rgba(74, 222, 128, 0.15); color: var(--chat-success, #4ade80);">
+            style="background: rgba(74, 222, 128, 0.15); color: var(--ngaf-chat-success);">
         calculator
       </span>
-      <span class="text-sm font-mono" style="color: var(--chat-text);">
+      <span class="text-sm font-mono" style="color: var(--ngaf-chat-text);">
         {{ expression() }}
       </span>
-      <span class="text-sm font-semibold" style="color: var(--chat-text);">
+      <span class="text-sm font-semibold" style="color: var(--ngaf-chat-text);">
         = {{ result() }}
       </span>
     </div>
diff --git a/cockpit/deep-agents/skills/angular/src/app/views/word-count-result.component.ts b/cockpit/deep-agents/skills/angular/src/app/views/word-count-result.component.ts
index 7ca97bd31..df86f728e 100644
--- a/cockpit/deep-agents/skills/angular/src/app/views/word-count-result.component.ts
+++ b/cockpit/deep-agents/skills/angular/src/app/views/word-count-result.component.ts
@@ -5,15 +5,15 @@ import { Component, input } from '@angular/core';
   standalone: true,
   template: `
     <div class="inline-flex items-center gap-2 rounded-lg px-3 py-1.5 my-1"
-         style="background: var(--chat-bg-alt); border: 1px solid var(--chat-border);">
+         style="background: var(--ngaf-chat-surface-alt); border: 1px solid var(--ngaf-chat-separator);">
       <span class="rounded-full px-2 py-0.5 text-xs font-semibold"
-            style="background: rgba(251, 191, 36, 0.15); color: var(--chat-warning-text, #fbbf24);">
+            style="background: rgba(251, 191, 36, 0.15); color: var(--ngaf-chat-warning-text);">
         word_count
       </span>
-      <span class="text-sm font-semibold font-mono" style="color: var(--chat-text);">
+      <span class="text-sm font-semibold font-mono" style="color: var(--ngaf-chat-text);">
         {{ count() }}
       </span>
-      <span class="text-sm" style="color: var(--chat-text-muted);">
+      <span class="text-sm" style="color: var(--ngaf-chat-text-muted);">
         words
       </span>
     </div>
diff --git a/cockpit/deep-agents/skills/angular/src/index.html b/cockpit/deep-agents/skills/angular/src/index.html
index 1565f3166..2c67bb651 100644
--- a/cockpit/deep-agents/skills/angular/src/index.html
+++ b/cockpit/deep-agents/skills/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Skills — Deep Agents Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-skills></app-skills>
 </body>
 </html>
diff --git a/cockpit/deep-agents/skills/angular/src/styles.css b/cockpit/deep-agents/skills/angular/src/styles.css
index 061c66cf8..ae28960b6 100644
--- a/cockpit/deep-agents/skills/angular/src/styles.css
+++ b/cockpit/deep-agents/skills/angular/src/styles.css
@@ -1,30 +1,13 @@
-@import "../../../../../libs/design-tokens/src/lib/tokens.css";
-@import "tailwindcss";
-@source "../../../../../libs/chat/src/";
-
-@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);
-}
+@import "@ngaf/example-layouts/theme.css";
 
 *, *::before, *::after { box-sizing: border-box; }
 
-body {
+html, body {
   margin: 0;
-  font-family: var(--ds-font-sans);
-  background: var(--ds-bg);
-  color: var(--ds-text-primary);
+  height: 100%;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts b/cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts
index 5a42be76c..186b5df16 100644
--- a/cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts
+++ b/cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts
@@ -32,19 +32,19 @@ interface Delegation {
   template: `
     <example-chat-layout sidebarWidth="w-72">
       <chat main [agent]="agent" class="flex-1 min-w-0" />
-      <div sidebar class="p-4 space-y-2" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-2" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--chat-text-muted, #777);">Delegations</h3>
+            style="color: var(--ngaf-chat-text-muted);">Delegations</h3>
         @if (delegations().length === 0) {
-          <p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No delegations yet</p>
+          <p class="text-sm italic" style="color: var(--ngaf-chat-text-muted);">No delegations yet</p>
         }
         @for (d of delegations(); track d.id) {
           <div class="flex items-center gap-2 text-sm py-1">
             <span class="w-2 h-2 rounded-full shrink-0"
-                  [style.background]="d.status === 'complete' ? 'var(--chat-success, #4ade80)' : d.status === 'error' ? 'var(--chat-error-text, #f87171)' : 'var(--chat-warning-text, #fbbf24)'">
+                  [style.background]="d.status === 'complete' ? 'var(--ngaf-chat-success)' : d.status === 'error' ? 'var(--ngaf-chat-error-text)' : 'var(--ngaf-chat-warning-text)'">
             </span>
-            <span class="font-medium truncate" style="color: var(--chat-text, #e0e0e0);">{{ d.agent }}</span>
-            <span class="text-xs ml-auto" style="color: var(--chat-text-muted, #777);">{{ d.statusText }}</span>
+            <span class="font-medium truncate" style="color: var(--ngaf-chat-text);">{{ d.agent }}</span>
+            <span class="text-xs ml-auto" style="color: var(--ngaf-chat-text-muted);">{{ d.statusText }}</span>
           </div>
         }
       </div>
diff --git a/cockpit/deep-agents/subagents/angular/src/index.html b/cockpit/deep-agents/subagents/angular/src/index.html
index 412e312c3..4a8fda1ed 100644
--- a/cockpit/deep-agents/subagents/angular/src/index.html
+++ b/cockpit/deep-agents/subagents/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Subagents — Deep Agents Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-subagents></app-subagents>
 </body>
 </html>
diff --git a/cockpit/deep-agents/subagents/angular/src/styles.css b/cockpit/deep-agents/subagents/angular/src/styles.css
index 061c66cf8..d42cba930 100644
--- a/cockpit/deep-agents/subagents/angular/src/styles.css
+++ b/cockpit/deep-agents/subagents/angular/src/styles.css
@@ -1,30 +1,9 @@
-@import "../../../../../libs/design-tokens/src/lib/tokens.css";
-@import "tailwindcss";
-@source "../../../../../libs/chat/src/";
+@import "@ngaf/example-layouts/theme.css";
 
-@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 {
+html, body {
+  height: 100%;
   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;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
 }