diff --git a/ui/src/auth/LoginPage.module.css b/ui/src/auth/LoginPage.module.css
index 97422397..f42f1da6 100644
--- a/ui/src/auth/LoginPage.module.css
+++ b/ui/src/auth/LoginPage.module.css
@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  background: var(--bg-base);
+  background: var(--bg-body);
 }
 
 .card {
diff --git a/ui/src/auth/OidcCallback.module.css b/ui/src/auth/OidcCallback.module.css
new file mode 100644
index 00000000..50eebd7d
--- /dev/null
+++ b/ui/src/auth/OidcCallback.module.css
@@ -0,0 +1,21 @@
+.page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: var(--bg-body);
+}
+
+.card {
+  padding: 2rem;
+  text-align: center;
+  min-width: 320px;
+}
+
+.heading {
+  margin-bottom: 1rem;
+}
+
+.backButton {
+  margin-top: 16px;
+}
diff --git a/ui/src/auth/OidcCallback.tsx b/ui/src/auth/OidcCallback.tsx
index a1987625..9cca67bb 100644
--- a/ui/src/auth/OidcCallback.tsx
+++ b/ui/src/auth/OidcCallback.tsx
@@ -4,6 +4,7 @@ import { useAuthStore } from './auth-store';
 import { api } from '../api/client';
 import { Card, Spinner, Alert, Button } from '@cameleer/design-system';
 import { config } from '../config';
+import styles from './OidcCallback.module.css';
 
 export function OidcCallback() {
   const { isAuthenticated, loading, error, loginWithOidcCode } = useAuthStore();
@@ -67,15 +68,15 @@ export function OidcCallback() {
   if (isAuthenticated) return <Navigate to="/" replace />;
 
   return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--surface-ground)' }}>
+    <div className={styles.page}>
       <Card>
-        <div style={{ padding: '2rem', textAlign: 'center', minWidth: 320 }}>
-          <h2 style={{ marginBottom: '1rem' }}>cameleer3</h2>
+        <div className={styles.card}>
+          <h2 className={styles.heading}>cameleer3</h2>
           {loading && <Spinner />}
           {error && (
             <>
               <Alert variant="error">{error}</Alert>
-              <Button variant="secondary" onClick={() => navigate('/login?local')} style={{ marginTop: 16 }}>
+              <Button variant="secondary" onClick={() => navigate('/login?local')} className={styles.backButton}>
                 Back to Login
               </Button>
             </>
diff --git a/ui/src/components/ContentTabs.module.css b/ui/src/components/ContentTabs.module.css
index e934a9ae..b62d3c00 100644
--- a/ui/src/components/ContentTabs.module.css
+++ b/ui/src/components/ContentTabs.module.css
@@ -5,6 +5,6 @@
   padding: 0 1.5rem;
   padding-top: 0.375rem;
   border-bottom: 1px solid var(--border);
-  background: var(--surface);
+  background: var(--bg-surface);
   gap: 1rem;
 }
diff --git a/ui/src/components/DeploymentProgress.module.css b/ui/src/components/DeploymentProgress.module.css
index 7ffa9e3b..3e40b4f7 100644
--- a/ui/src/components/DeploymentProgress.module.css
+++ b/ui/src/components/DeploymentProgress.module.css
@@ -45,7 +45,7 @@
   height: 10px;
   border-radius: 50%;
   border: 2px solid var(--border-subtle);
-  background: var(--surface, #1a1a1a);
+  background: var(--bg-surface);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -56,7 +56,7 @@
 .dot.completed {
   background: var(--amber);
   border-color: var(--amber);
-  color: var(--surface, #1a1a1a);
+  color: var(--bg-surface);
 }
 
 .dot.active {
diff --git a/ui/src/components/EnvironmentSelector.module.css b/ui/src/components/EnvironmentSelector.module.css
index 104831d1..99c4fd7a 100644
--- a/ui/src/components/EnvironmentSelector.module.css
+++ b/ui/src/components/EnvironmentSelector.module.css
@@ -18,7 +18,7 @@
 }
 
 .select:focus-visible {
-  outline: 1px solid var(--accent);
+  outline: 1px solid var(--amber);
   outline-offset: 2px;
   border-radius: 2px;
 }
diff --git a/ui/src/components/ExecutionDiagram/ExecutionDiagram.module.css b/ui/src/components/ExecutionDiagram/ExecutionDiagram.module.css
index 35edba6b..ca495bab 100644
--- a/ui/src/components/ExecutionDiagram/ExecutionDiagram.module.css
+++ b/ui/src/components/ExecutionDiagram/ExecutionDiagram.module.css
@@ -15,37 +15,37 @@
   align-items: center;
   gap: 12px;
   padding: 8px 14px;
-  background: var(--bg-surface, #FFFFFF);
-  border-bottom: 1px solid var(--border, #E4DFD8);
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
   font-size: 12px;
-  color: var(--text-secondary, #5C5347);
+  color: var(--text-secondary);
   flex-shrink: 0;
 }
 
 .exchangeLabel {
   font-weight: 600;
-  color: var(--text-primary, #1A1612);
+  color: var(--text-primary);
 }
 
 .exchangeId {
   font-size: 12px;
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
   padding: 2px 6px;
   border-radius: 3px;
-  color: var(--text-primary, #1A1612);
+  color: var(--text-primary);
 }
 
 .exchangeMeta {
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
 }
 
 .jumpToError {
   margin-left: auto;
   font-size: 12px;
   padding: 3px 10px;
-  border: 1px solid var(--error, #C0392B);
-  background: #FDF2F0;
-  color: var(--error, #C0392B);
+  border: 1px solid var(--error);
+  background: var(--error-bg);
+  color: var(--error);
   border-radius: 4px;
   cursor: pointer;
   font-weight: 500;
@@ -53,7 +53,7 @@
 }
 
 .jumpToError:hover {
-  background: #F9E0DC;
+  background: color-mix(in srgb, var(--error) 15%, var(--bg-surface));
 }
 
 .diagramArea {
@@ -67,12 +67,12 @@
   right: 8px;
   z-index: 10;
   font-size: 12px;
-  font-family: var(--font-mono, monospace);
+  font-family: var(--font-mono);
   padding: 3px 8px;
-  border: 1px solid var(--border, #E4DFD8);
+  border: 1px solid var(--border);
   border-radius: 4px;
-  background: var(--bg-surface, #FFFFFF);
-  color: var(--text-secondary, #5C5347);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
   cursor: pointer;
   opacity: 0.7;
   transition: opacity 0.15s, background 0.15s;
@@ -80,18 +80,18 @@
 
 .downloadBtn:hover {
   opacity: 1;
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
 }
 
 .splitter {
   height: 4px;
-  background: var(--border, #E4DFD8);
+  background: var(--border);
   cursor: row-resize;
   flex-shrink: 0;
 }
 
 .splitter:hover {
-  background: var(--amber, #C6820E);
+  background: var(--amber);
 }
 
 .detailArea {
@@ -106,7 +106,7 @@
   align-items: center;
   justify-content: center;
   flex: 1;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   font-size: 13px;
 }
 
@@ -115,13 +115,13 @@
   align-items: center;
   justify-content: center;
   flex: 1;
-  color: var(--error, #C0392B);
+  color: var(--error);
   font-size: 13px;
 }
 
 .statusRunning {
-  color: var(--amber, #C6820E);
-  background: #FFF8F0;
+  color: var(--amber);
+  background: var(--amber-bg);
 }
 
 /* ==========================================================================
@@ -131,8 +131,8 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--bg-surface, #FFFFFF);
-  border-top: 1px solid var(--border, #E4DFD8);
+  background: var(--bg-surface);
+  border-top: 1px solid var(--border);
   flex: 1;
   min-height: 0;
 }
@@ -143,27 +143,27 @@
   align-items: center;
   gap: 10px;
   padding: 6px 14px;
-  border-bottom: 1px solid var(--border, #E4DFD8);
-  background: #FAFAF8;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-raised);
   min-height: 32px;
 }
 
 .processorName {
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-primary, #1A1612);
+  color: var(--text-primary);
 }
 
 .processorId {
   font-size: 12px;
-  font-family: var(--font-mono, monospace);
-  color: var(--text-muted, #9C9184);
+  font-family: var(--font-mono);
+  color: var(--text-muted);
 }
 
 .processorDuration {
   font-size: 12px;
-  font-family: var(--font-mono, monospace);
-  color: var(--text-secondary, #5C5347);
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
   margin-left: auto;
 }
 
@@ -180,13 +180,13 @@
 }
 
 .statusCompleted {
-  color: var(--success, #3D7C47);
-  background: #F0F9F1;
+  color: var(--success);
+  background: var(--success-bg);
 }
 
 .statusFailed {
-  color: var(--error, #C0392B);
-  background: #FDF2F0;
+  color: var(--error);
+  background: var(--error-bg);
 }
 
 /* ==========================================================================
@@ -195,18 +195,18 @@
 .tabBar {
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid var(--border, #E4DFD8);
+  border-bottom: 1px solid var(--border);
   padding: 0 14px;
-  background: #FAFAF8;
+  background: var(--bg-raised);
   gap: 0;
 }
 
 .tab {
   padding: 6px 12px;
   font-size: 12px;
-  font-family: var(--font-body, inherit);
+  font-family: var(--font-body);
   cursor: pointer;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   border: none;
   background: none;
   border-bottom: 2px solid transparent;
@@ -215,12 +215,12 @@
 }
 
 .tab:hover {
-  color: var(--text-secondary, #5C5347);
+  color: var(--text-secondary);
 }
 
 .tabActive {
-  color: var(--amber, #C6820E);
-  border-bottom: 2px solid var(--amber, #C6820E);
+  color: var(--amber);
+  border-bottom: 2px solid var(--amber);
   font-weight: 600;
 }
 
@@ -230,15 +230,15 @@
 }
 
 .tabDisabled:hover {
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
 }
 
 .tabError {
-  color: var(--error, #C0392B);
+  color: var(--error);
 }
 
 .tabError:hover {
-  color: var(--error, #C0392B);
+  color: var(--error);
 }
 
 /* ==========================================================================
@@ -262,7 +262,7 @@
 
 .fieldLabel {
   font-size: 12px;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 2px;
@@ -270,14 +270,14 @@
 
 .fieldValue {
   font-size: 12px;
-  color: var(--text-primary, #1A1612);
+  color: var(--text-primary);
   word-break: break-all;
 }
 
 .fieldValueMono {
   font-size: 12px;
-  color: var(--text-primary, #1A1612);
-  font-family: var(--font-mono, monospace);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
   word-break: break-all;
 }
 
@@ -287,12 +287,12 @@
 .attributesSection {
   margin-top: 14px;
   padding-top: 10px;
-  border-top: 1px solid var(--border, #E4DFD8);
+  border-top: 1px solid var(--border);
 }
 
 .attributesLabel {
   font-size: 12px;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 6px;
@@ -307,10 +307,10 @@
 .attributePill {
   font-size: 12px;
   padding: 2px 8px;
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
   border-radius: 10px;
-  color: var(--text-secondary, #5C5347);
-  font-family: var(--font-mono, monospace);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
 }
 
 /* ==========================================================================
@@ -330,7 +330,7 @@
 }
 
 .headersColumn + .headersColumn {
-  border-left: 1px solid var(--border, #E4DFD8);
+  border-left: 1px solid var(--border);
   padding-left: 14px;
   margin-left: 14px;
 }
@@ -338,7 +338,7 @@
 .headersColumnLabel {
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 6px;
@@ -352,7 +352,7 @@
 
 .headersTable td {
   padding: 3px 0;
-  border-bottom: 1px solid var(--border, #E4DFD8);
+  border-bottom: 1px solid var(--border);
   vertical-align: top;
 }
 
@@ -361,9 +361,9 @@
 }
 
 .headerKey {
-  font-family: var(--font-mono, monospace);
+  font-family: var(--font-mono);
   font-weight: 600;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   white-space: nowrap;
   padding-right: 12px;
   width: 140px;
@@ -373,8 +373,8 @@
 }
 
 .headerVal {
-  font-family: var(--font-mono, monospace);
-  color: var(--text-primary, #1A1612);
+  font-family: var(--font-mono);
+  color: var(--text-primary);
   word-break: break-all;
 }
 
@@ -391,39 +391,41 @@
 .codeFormat {
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
 .codeSize {
   font-size: 12px;
-  color: var(--text-muted, #9C9184);
-  font-family: var(--font-mono, monospace);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
 }
 
 .codeCopyBtn {
   margin-left: auto;
   font-size: 12px;
-  font-family: var(--font-body, inherit);
+  font-family: var(--font-body);
   padding: 2px 8px;
-  border: 1px solid var(--border, #E4DFD8);
+  border: 1px solid var(--border);
   border-radius: 4px;
-  background: var(--bg-surface, #FFFFFF);
-  color: var(--text-secondary, #5C5347);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
   cursor: pointer;
 }
 
 .codeCopyBtn:hover {
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
 }
 
 .codeBlock {
-  background: #1A1612;
-  color: #E4DFD8;
+  --code-bg: var(--bg-inset);
+  --code-fg: var(--text-primary);
+  background: var(--code-bg);
+  color: var(--code-fg);
   padding: 12px;
   border-radius: 6px;
-  font-family: var(--font-mono, monospace);
+  font-family: var(--font-mono);
   font-size: 12px;
   line-height: 1.5;
   overflow-x: auto;
@@ -439,15 +441,15 @@
 .errorType {
   font-size: 13px;
   font-weight: 600;
-  color: var(--error, #C0392B);
+  color: var(--error);
   margin-bottom: 8px;
 }
 
 .errorMessage {
   font-size: 12px;
-  color: var(--text-primary, #1A1612);
-  background: #FDF2F0;
-  border: 1px solid #F5D5D0;
+  color: var(--text-primary);
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
   border-radius: 6px;
   padding: 10px 12px;
   margin-bottom: 12px;
@@ -456,11 +458,13 @@
 }
 
 .errorStackTrace {
-  background: #1A1612;
-  color: #E4DFD8;
+  --code-bg: var(--bg-inset);
+  --code-fg: var(--text-primary);
+  background: var(--code-bg);
+  color: var(--code-fg);
   padding: 12px;
   border-radius: 6px;
-  font-family: var(--font-mono, monospace);
+  font-family: var(--font-mono);
   font-size: 12px;
   line-height: 1.5;
   overflow-x: auto;
@@ -477,7 +481,7 @@
 .errorStackLabel {
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 6px;
@@ -505,22 +509,22 @@
 }
 
 .ganttRow:hover {
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
 }
 
 .ganttSelected {
-  background: #FFF8F0;
+  background: var(--amber-bg);
 }
 
 .ganttSelected:hover {
-  background: #FFF8F0;
+  background: var(--amber-bg);
 }
 
 .ganttLabel {
   width: 100px;
   min-width: 100px;
   font-size: 12px;
-  color: var(--text-secondary, #5C5347);
+  color: var(--text-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -529,7 +533,7 @@
 .ganttBar {
   flex: 1;
   height: 16px;
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
   border-radius: 2px;
   position: relative;
   min-width: 0;
@@ -543,19 +547,19 @@
 }
 
 .ganttFillCompleted {
-  background: var(--success, #3D7C47);
+  background: var(--success);
 }
 
 .ganttFillFailed {
-  background: var(--error, #C0392B);
+  background: var(--error);
 }
 
 .ganttDuration {
   width: 50px;
   min-width: 50px;
   font-size: 12px;
-  font-family: var(--font-mono, monospace);
-  color: var(--text-muted, #9C9184);
+  font-family: var(--font-mono);
+  color: var(--text-muted);
   text-align: right;
 }
 
@@ -564,7 +568,7 @@
    ========================================================================== */
 .emptyState {
   text-align: center;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   font-size: 12px;
   padding: 20px;
 }
diff --git a/ui/src/components/LayoutShell.module.css b/ui/src/components/LayoutShell.module.css
index 390d76bf..2c09aa76 100644
--- a/ui/src/components/LayoutShell.module.css
+++ b/ui/src/components/LayoutShell.module.css
@@ -14,3 +14,39 @@
   margin-left: 4px;
   font-size: 12px;
 }
+
+.starredList {
+  padding: 4px 0;
+}
+
+.starredIconWrap {
+  display: flex;
+  align-items: center;
+  color: var(--sidebar-muted);
+}
+
+.starredLabel {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.starredRemoveBtn {
+  background: none;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+  color: var(--sidebar-muted);
+  display: flex;
+  align-items: center;
+  opacity: 0.6;
+}
+
+.mainContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
diff --git a/ui/src/components/LayoutShell.tsx b/ui/src/components/LayoutShell.tsx
index 3348ca8f..d5110a0d 100644
--- a/ui/src/components/LayoutShell.tsx
+++ b/ui/src/components/LayoutShell.tsx
@@ -232,7 +232,7 @@ function collectStarredItems(apps: SidebarApp[], starredIds: Set<string>): Starr
 function StarredList({ items, onNavigate, onRemove }: { items: StarredItem[]; onNavigate: (path: string) => void; onRemove: (key: string) => void }) {
   if (items.length === 0) return null;
   return (
-    <div style={{ padding: '4px 0' }}>
+    <div className={css.starredList}>
       {items.map((item) => (
         <div
           key={item.starKey}
@@ -242,13 +242,13 @@ function StarredList({ items, onNavigate, onRemove }: { items: StarredItem[]; on
           tabIndex={0}
           onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onNavigate(item.path); }}
         >
-          {item.icon && <span style={{ display: 'flex', alignItems: 'center', color: 'var(--sidebar-muted)' }}>{item.icon}</span>}
-          <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {item.icon && <span className={css.starredIconWrap}>{item.icon}</span>}
+          <span className={css.starredLabel}>
             {item.label}
             {item.parentApp && <span className={css.starredParentApp}>{item.parentApp}</span>}
           </span>
           <button
-            style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--sidebar-muted)', display: 'flex', alignItems: 'center', opacity: 0.6 }}
+            className={css.starredRemoveBtn}
             onClick={(e) => { e.stopPropagation(); onRemove(item.starKey); }}
             aria-label={`Remove ${item.label} from starred`}
           >
@@ -771,7 +771,7 @@ function LayoutContent() {
         <ContentTabs active={scope.tab} onChange={setTab} scope={scope} />
       )}
 
-      <main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }}>
+      <main className={css.mainContent}>
         <Outlet key={selectedEnv ?? '__all__'} />
       </main>
     </AppShell>
diff --git a/ui/src/components/PageLoader.module.css b/ui/src/components/PageLoader.module.css
new file mode 100644
index 00000000..f556acbc
--- /dev/null
+++ b/ui/src/components/PageLoader.module.css
@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  justify-content: center;
+  padding: 4rem;
+}
diff --git a/ui/src/components/PageLoader.tsx b/ui/src/components/PageLoader.tsx
new file mode 100644
index 00000000..7269327a
--- /dev/null
+++ b/ui/src/components/PageLoader.tsx
@@ -0,0 +1,10 @@
+import { Spinner } from '@cameleer/design-system';
+import styles from './PageLoader.module.css';
+
+export function PageLoader() {
+  return (
+    <div className={styles.container}>
+      <Spinner size="lg" />
+    </div>
+  );
+}
diff --git a/ui/src/components/ProcessDiagram/CompoundNode.tsx b/ui/src/components/ProcessDiagram/CompoundNode.tsx
index 9a8e45e1..a972fa6d 100644
--- a/ui/src/components/ProcessDiagram/CompoundNode.tsx
+++ b/ui/src/components/ProcessDiagram/CompoundNode.tsx
@@ -79,8 +79,8 @@ export function CompoundNode({
 
   // Color: own status first, then infer from descendants (for path containers like when/otherwise)
   const effectiveColor = isGated ? 'var(--amber)'
-    : isFailed || descendantFailed ? '#C0392B'
-    : isCompleted || executedDescendant ? '#3D7C47'
+    : isFailed || descendantFailed ? 'var(--error)'
+    : isCompleted || executedDescendant ? 'var(--success)'
     : color;
 
   // Dim compound when overlay is active but neither the compound nor any
@@ -99,7 +99,7 @@ export function CompoundNode({
 
   // _CB_FALLBACK: section styling with EIP purple
   if (node.type === '_CB_FALLBACK') {
-    const fallbackColor = '#7C3AED'; // EIP purple
+    const fallbackColor = 'var(--purple)';
     return (
       <g data-node-id={node.id} transform={`translate(${x}, ${y})`} opacity={isSkipped ? 0.35 : undefined}>
         <rect x={0} y={0} width={w} height={h} rx={CORNER_RADIUS}
@@ -140,7 +140,7 @@ export function CompoundNode({
   }
 
   // Default compound rendering (DO_TRY, EIP_CHOICE, EIP_FILTER, EIP_IDEMPOTENT_CONSUMER, etc.)
-  const containerFill = isGated ? 'var(--amber-bg)' : 'white';
+  const containerFill = isGated ? 'var(--amber-bg)' : 'var(--bg-surface)';
   return (
     <g data-node-id={node.id} transform={`translate(${x}, ${y})`} opacity={isSkipped ? 0.35 : undefined}>
       {/* Container body */}
@@ -163,15 +163,15 @@ export function CompoundNode({
       <g transform={`translate(6, ${HEADER_HEIGHT / 2 - 5}) scale(0.417)`}>
         {iconForType(node.type).map((el: IconElement, i: number) =>
           'd' in el
-            ? <path key={i} d={el.d} fill="none" stroke="white" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-            : <circle key={i} cx={el.cx} cy={el.cy} r={el.r} fill="none" stroke="white" strokeWidth={2} />
+            ? <path key={i} d={el.d} fill="none" stroke="var(--text-inverse)" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+            : <circle key={i} cx={el.cx} cy={el.cy} r={el.r} fill="none" stroke="var(--text-inverse)" strokeWidth={2} />
         )}
       </g>
       {/* Header label (centered) */}
       <text
         x={w / 2}
         y={HEADER_HEIGHT / 2 + 4}
-        fill="white"
+        fill="var(--text-inverse)"
         fontSize={10}
         fontWeight={600}
         textAnchor="middle"
diff --git a/ui/src/components/ProcessDiagram/ConfigBadge.tsx b/ui/src/components/ProcessDiagram/ConfigBadge.tsx
index f3e7ea4b..03396a04 100644
--- a/ui/src/components/ProcessDiagram/ConfigBadge.tsx
+++ b/ui/src/components/ProcessDiagram/ConfigBadge.tsx
@@ -3,8 +3,8 @@ import type { NodeConfig } from './types';
 
 const BADGE_SIZE = 18;
 const BADGE_GAP = 4;
-const TRACE_COLOR = '#1A7F8E';  // teal
-const TAP_COLOR = '#7C3AED';    // purple
+const TRACE_COLOR = 'var(--running)';
+const TAP_COLOR = 'var(--purple)';
 
 interface ConfigBadgeProps {
   nodeWidth: number;
@@ -42,7 +42,7 @@ export function ConfigBadge({ nodeWidth, config, hasTraceData }: ConfigBadgeProp
     badges.push(
       <g key="tap" transform={`translate(${xOffset}, ${-BADGE_SIZE - 4})`}>
         <circle cx={cx} cy={cy} r={BADGE_SIZE / 2} fill={TAP_COLOR} />
-        <g transform="translate(4, 4)" stroke="white" strokeWidth={1.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
+        <g transform="translate(4, 4)" stroke="var(--text-inverse)" strokeWidth={1.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
           <path d="M5 1 C5 1 2 4.5 2 6.5a3 3 0 006 0C8 4.5 5 1 5 1z" />
         </g>
       </g>,
@@ -70,7 +70,7 @@ export function ConfigBadge({ nodeWidth, config, hasTraceData }: ConfigBadgeProp
           </circle>
           <circle cx={cx} cy={cy} r={r} fill={TRACE_COLOR} />
           <g transform={`translate(${(BADGE_SIZE - 14) / 2}, ${(BADGE_SIZE - 14) / 2})`}>
-            <FootprintsIcon color="white" size={14} />
+            <FootprintsIcon color="var(--text-inverse)" size={14} />
           </g>
         </g>,
       );
diff --git a/ui/src/components/ProcessDiagram/DiagramEdge.tsx b/ui/src/components/ProcessDiagram/DiagramEdge.tsx
index ce820fd3..cee836e9 100644
--- a/ui/src/components/ProcessDiagram/DiagramEdge.tsx
+++ b/ui/src/components/ProcessDiagram/DiagramEdge.tsx
@@ -23,7 +23,7 @@ export function DiagramEdge({ edge, offsetY = 0, traversed }: DiagramEdgeProps)
       <path
         d={d}
         fill="none"
-        stroke={traversed === true ? '#3D7C47' : '#9CA3AF'}
+        stroke={traversed === true ? 'var(--success)' : 'var(--text-muted)'}
         strokeWidth={traversed === true ? 1.5 : traversed === false ? 1 : 1.5}
         strokeDasharray={traversed === false ? '4,3' : undefined}
         markerEnd={traversed === true ? 'url(#arrowhead-green)' : traversed === false ? undefined : 'url(#arrowhead)'}
@@ -32,7 +32,7 @@ export function DiagramEdge({ edge, offsetY = 0, traversed }: DiagramEdgeProps)
         <text
           x={(pts[0][0] + pts[pts.length - 1][0]) / 2}
           y={(pts[0][1] + pts[pts.length - 1][1]) / 2 + offsetY - 6}
-          fill="#9C9184"
+          fill="var(--text-muted)"
           fontSize={9}
           textAnchor="middle"
         >
diff --git a/ui/src/components/ProcessDiagram/DiagramNode.tsx b/ui/src/components/ProcessDiagram/DiagramNode.tsx
index e49668c4..7539677f 100644
--- a/ui/src/components/ProcessDiagram/DiagramNode.tsx
+++ b/ui/src/components/ProcessDiagram/DiagramNode.tsx
@@ -61,23 +61,27 @@ export function DiagramNode({
   const isSkipped = overlayActive && !executionState;
 
   // Colors based on execution state (heatmap takes priority when no execution overlay)
-  let cardFill = isHovered ? '#F5F0EA' : 'white';
-  let borderStroke = isHovered || isSelected ? color : '#E4DFD8';
+  let cardFill = isHovered ? 'var(--bg-hover)' : 'var(--bg-surface)';
+  let borderStroke = isHovered || isSelected ? color : 'var(--border-subtle)';
   let borderWidth = isHovered || isSelected ? 1.5 : 1;
   let topBarColor = color;
-  let labelColor = '#1A1612';
+  let labelColor = 'var(--text-primary)';
 
   if (isCompleted) {
-    cardFill = isHovered ? '#E4F5E6' : '#F0F9F1';
-    borderStroke = '#3D7C47';
+    cardFill = isHovered
+      ? 'color-mix(in srgb, var(--success) 15%, var(--bg-surface))'
+      : 'color-mix(in srgb, var(--success) 10%, var(--bg-surface))';
+    borderStroke = 'var(--success)';
     borderWidth = 1.5;
-    topBarColor = '#3D7C47';
+    topBarColor = 'var(--success)';
   } else if (isFailed) {
-    cardFill = isHovered ? '#F9E4E1' : '#FDF2F0';
-    borderStroke = '#C0392B';
+    cardFill = isHovered
+      ? 'color-mix(in srgb, var(--error) 15%, var(--bg-surface))'
+      : 'color-mix(in srgb, var(--error) 10%, var(--bg-surface))';
+    borderStroke = 'var(--error)';
     borderWidth = 2;
-    topBarColor = '#C0392B';
-    labelColor = '#C0392B';
+    topBarColor = 'var(--error)';
+    labelColor = 'var(--error)';
   } else if (heatmapEntry && !overlayActive) {
     cardFill = heatmapColor(heatmapEntry.pctOfRoute);
     borderStroke = heatmapBorderColor(heatmapEntry.pctOfRoute);
@@ -85,7 +89,7 @@ export function DiagramNode({
     topBarColor = heatmapBorderColor(heatmapEntry.pctOfRoute);
   }
 
-  const statusColor = isCompleted ? '#3D7C47' : isFailed ? '#C0392B' : undefined;
+  const statusColor = isCompleted ? 'var(--success)' : isFailed ? 'var(--error)' : undefined;
 
   return (
     <g
@@ -107,7 +111,7 @@ export function DiagramNode({
           height={h + 4}
           rx={CORNER_RADIUS + 2}
           fill="none"
-          stroke="#C6820E"
+          stroke="var(--amber)"
           strokeWidth={2.5}
         />
       )}
@@ -150,11 +154,11 @@ export function DiagramNode({
               {typeName}
             </text>
             {detail && detail !== typeName && (
-              <text x={TEXT_LEFT} y={TOP_BAR_HEIGHT + 24} fill={isFailed ? '#C0392B' : '#5C5347'} fontSize={10}>
+              <text x={TEXT_LEFT} y={TOP_BAR_HEIGHT + 24} fill={isFailed ? 'var(--error)' : 'var(--text-secondary)'} fontSize={10}>
                 {detail}
               </text>
             )}
-            <text x={TEXT_LEFT} y={TOP_BAR_HEIGHT + (detail && detail !== typeName ? 35 : 24)} fill="#1A7F8E" fontSize={9} fontStyle="italic">
+            <text x={TEXT_LEFT} y={TOP_BAR_HEIGHT + (detail && detail !== typeName ? 35 : 24)} fill="var(--running)" fontSize={9} fontStyle="italic">
               → {resolvedUri.split('?')[0]}
             </text>
           </>
@@ -164,7 +168,7 @@ export function DiagramNode({
               {typeName}
             </text>
             {detail && detail !== typeName && (
-              <text x={TEXT_LEFT} y={h / 2 + 12} fill={isFailed ? '#C0392B' : '#5C5347'} fontSize={10}>
+              <text x={TEXT_LEFT} y={h / 2 + 12} fill={isFailed ? 'var(--error)' : 'var(--text-secondary)'} fontSize={10}>
                 {detail}
               </text>
             )}
@@ -189,24 +193,24 @@ export function DiagramNode({
         if (isCompleted) {
           badges.push(
             <g key="status">
-              <circle cx={statusCx} cy={cy} r={BADGE_R} fill="#3D7C47" />
-              <path d={`M${statusCx - 3} ${cy} l2 2 4-4`} fill="none" stroke="white" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+              <circle cx={statusCx} cy={cy} r={BADGE_R} fill="var(--success)" />
+              <path d={`M${statusCx - 3} ${cy} l2 2 4-4`} fill="none" stroke="var(--text-inverse)" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
             </g>
           );
           slot++;
         } else if (isFailed) {
           badges.push(
             <g key="status">
-              <circle cx={statusCx} cy={cy} r={BADGE_R} fill="none" stroke="#C0392B" strokeWidth={2} opacity={0.5}>
+              <circle cx={statusCx} cy={cy} r={BADGE_R} fill="none" stroke="var(--error)" strokeWidth={2} opacity={0.5}>
                 <animate attributeName="r" values="6;14" dur="1.5s" repeatCount="indefinite" />
                 <animate attributeName="opacity" values="0.5;0" dur="1.5s" repeatCount="indefinite" />
               </circle>
-              <circle cx={statusCx} cy={cy} r={BADGE_R} fill="none" stroke="#C0392B" strokeWidth={2} opacity={0.5}>
+              <circle cx={statusCx} cy={cy} r={BADGE_R} fill="none" stroke="var(--error)" strokeWidth={2} opacity={0.5}>
                 <animate attributeName="r" values="6;14" dur="1.5s" begin="0.75s" repeatCount="indefinite" />
                 <animate attributeName="opacity" values="0.5;0" dur="1.5s" begin="0.75s" repeatCount="indefinite" />
               </circle>
-              <circle cx={statusCx} cy={cy} r={BADGE_R} fill="#C0392B" />
-              <path d={`M${statusCx} ${cy - 3} v4 M${statusCx} ${cy + 2.5} v0.5`} fill="none" stroke="white" strokeWidth={1.5} strokeLinecap="round" />
+              <circle cx={statusCx} cy={cy} r={BADGE_R} fill="var(--error)" />
+              <path d={`M${statusCx} ${cy - 3} v4 M${statusCx} ${cy + 2.5} v0.5`} fill="none" stroke="var(--text-inverse)" strokeWidth={1.5} strokeLinecap="round" />
             </g>
           );
           slot++;
@@ -217,8 +221,8 @@ export function DiagramNode({
           const tapCx = statusCx - slot * (BADGE_D + BADGE_GAP);
           badges.push(
             <g key="tap">
-              <circle cx={tapCx} cy={cy} r={BADGE_R} fill="#7C3AED" />
-              <g transform={`translate(${tapCx - 5}, ${cy - 5})`} stroke="white" strokeWidth={1.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx={tapCx} cy={cy} r={BADGE_R} fill="var(--purple)" />
+              <g transform={`translate(${tapCx - 5}, ${cy - 5})`} stroke="var(--text-inverse)" strokeWidth={1.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
                 <path d="M5 1 C5 1 2 4.5 2 6.5a3 3 0 006 0C8 4.5 5 1 5 1z" />
               </g>
             </g>
@@ -235,18 +239,18 @@ export function DiagramNode({
             <g key="trace">
               {tracePulse && (
                 <>
-                  <circle cx={traceCx} cy={cy} r={BADGE_R} fill="none" stroke="#1A7F8E" strokeWidth={2} opacity={0.5}>
+                  <circle cx={traceCx} cy={cy} r={BADGE_R} fill="none" stroke="var(--running)" strokeWidth={2} opacity={0.5}>
                     <animate attributeName="r" values={`${BADGE_R};${BADGE_R + 8}`} dur="1.5s" repeatCount="indefinite" />
                     <animate attributeName="opacity" values="0.5;0" dur="1.5s" repeatCount="indefinite" />
                   </circle>
-                  <circle cx={traceCx} cy={cy} r={BADGE_R} fill="none" stroke="#1A7F8E" strokeWidth={2} opacity={0.5}>
+                  <circle cx={traceCx} cy={cy} r={BADGE_R} fill="none" stroke="var(--running)" strokeWidth={2} opacity={0.5}>
                     <animate attributeName="r" values={`${BADGE_R};${BADGE_R + 8}`} dur="1.5s" begin="0.75s" repeatCount="indefinite" />
                     <animate attributeName="opacity" values="0.5;0" dur="1.5s" begin="0.75s" repeatCount="indefinite" />
                   </circle>
                 </>
               )}
-              <circle cx={traceCx} cy={cy} r={BADGE_R} fill={traceHasData ? '#1A7F8E' : '#1A7F8E'} opacity={traceHasData ? 1 : 0.2} />
-              <g transform={`translate(${traceCx - 5}, ${cy - 5}) scale(${10/24})`} stroke={traceHasData ? 'white' : '#1A7F8E'} strokeWidth={2.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx={traceCx} cy={cy} r={BADGE_R} fill="var(--running)" opacity={traceHasData ? 1 : 0.2} />
+              <g transform={`translate(${traceCx - 5}, ${cy - 5}) scale(${10/24})`} stroke={traceHasData ? 'var(--text-inverse)' : 'var(--running)'} strokeWidth={2.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
                 <path d="M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z" />
                 <path d="M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z" />
                 <path d="M16 17h4" />
@@ -292,9 +296,9 @@ export function DiagramNode({
         <g transform={`translate(4, ${h - 14})`}>
           <path
             d="M2 2 v5 a3 3 0 003 3 h5"
-            fill="none" stroke="#C0392B" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"
+            fill="none" stroke="var(--error)" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"
           />
-          <path d="M8 8 l2 2 -2 2" fill="none" stroke="#C0392B" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M8 8 l2 2 -2 2" fill="none" stroke="var(--error)" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
         </g>
       )}
     </g>
diff --git a/ui/src/components/ProcessDiagram/ErrorSection.tsx b/ui/src/components/ProcessDiagram/ErrorSection.tsx
index 2ed3200a..d3efb172 100644
--- a/ui/src/components/ProcessDiagram/ErrorSection.tsx
+++ b/ui/src/components/ProcessDiagram/ErrorSection.tsx
@@ -32,8 +32,8 @@ interface ErrorSectionProps {
 }
 
 const VARIANT_COLORS: Record<string, string> = {
-  error: '#C0392B',
-  completion: '#1A7F8E',
+  error: 'var(--error)',
+  completion: 'var(--running)',
 };
 
 export function ErrorSection({
diff --git a/ui/src/components/ProcessDiagram/Minimap.tsx b/ui/src/components/ProcessDiagram/Minimap.tsx
index 3a3796d1..e8e66770 100644
--- a/ui/src/components/ProcessDiagram/Minimap.tsx
+++ b/ui/src/components/ProcessDiagram/Minimap.tsx
@@ -147,12 +147,12 @@ function nodeColor(
 ): { fill: string; opacity: number } {
   if (!overlay) return { fill: colorForType(node.type), opacity: 0.7 };
   const state = node.id ? overlay.get(node.id) : undefined;
-  if (state?.status === 'COMPLETED') return { fill: '#3D7C47', opacity: 0.85 };
-  if (state?.status === 'FAILED') return { fill: '#C0392B', opacity: 0.85 };
+  if (state?.status === 'COMPLETED') return { fill: 'var(--success)', opacity: 0.85 };
+  if (state?.status === 'FAILED') return { fill: 'var(--error)', opacity: 0.85 };
   // ENDPOINT is always traversed when overlay is active (route entry point)
-  if (node.type === 'ENDPOINT' && overlay.size > 0) return { fill: '#3D7C47', opacity: 0.85 };
+  if (node.type === 'ENDPOINT' && overlay.size > 0) return { fill: 'var(--success)', opacity: 0.85 };
   // Skipped (overlay active but node not executed)
-  return { fill: '#9CA3AF', opacity: 0.35 };
+  return { fill: 'var(--text-muted)', opacity: 0.35 };
 }
 
 function renderMinimapNodes(
diff --git a/ui/src/components/ProcessDiagram/NodeToolbar.tsx b/ui/src/components/ProcessDiagram/NodeToolbar.tsx
index 28ebfa47..b734e61d 100644
--- a/ui/src/components/ProcessDiagram/NodeToolbar.tsx
+++ b/ui/src/components/ProcessDiagram/NodeToolbar.tsx
@@ -4,7 +4,7 @@ import type { NodeAction, NodeConfig } from './types';
 import styles from './ProcessDiagram.module.css';
 
 const HIDE_DELAY = 150;
-const TRACE_ACTIVE_COLOR = '#1A7F8E';
+const TRACE_ACTIVE_COLOR = 'var(--running)';
 
 interface NodeToolbarProps {
   nodeId: string;
@@ -50,7 +50,7 @@ export function NodeToolbar({
         className={`${styles.nodeToolbarBtn} ${tapActive ? styles.nodeToolbarBtnActive : ''}`}
         title={tapActive ? 'Edit tap' : 'Configure tap'}
         onClick={(e) => { e.stopPropagation(); onAction(nodeId, 'configure-tap'); }}
-        style={tapActive ? { color: '#7C3AED' } : undefined}
+        style={tapActive ? { color: 'var(--purple)' } : undefined}
       >
         <Droplets size={14} />
       </button>
diff --git a/ui/src/components/ProcessDiagram/ProcessDiagram.module.css b/ui/src/components/ProcessDiagram/ProcessDiagram.module.css
index 6ebaa1f0..23f4fbda 100644
--- a/ui/src/components/ProcessDiagram/ProcessDiagram.module.css
+++ b/ui/src/components/ProcessDiagram/ProcessDiagram.module.css
@@ -4,9 +4,9 @@
   height: 100%;
   min-height: 300px;
   overflow: hidden;
-  background: var(--bg-surface, #FFFFFF);
-  border: 1px solid var(--border, #E4DFD8);
-  border-radius: var(--radius-md, 8px);
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
 }
 
 .svg {
@@ -25,7 +25,7 @@
   width: 100%;
   height: 100%;
   min-height: 300px;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   font-size: 14px;
 }
 
@@ -36,7 +36,7 @@
   width: 100%;
   height: 100%;
   min-height: 300px;
-  color: var(--error, #C0392B);
+  color: var(--error);
   font-size: 14px;
 }
 
@@ -47,11 +47,11 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  background: var(--bg-surface, #FFFFFF);
-  border: 1px solid var(--border, #E4DFD8);
-  border-radius: var(--radius-sm, 5px);
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
   padding: 4px;
-  box-shadow: var(--shadow-md, 0 2px 8px rgba(44, 37, 32, 0.08));
+  box-shadow: var(--shadow-md);
 }
 
 .zoomBtn {
@@ -62,19 +62,19 @@
   height: 28px;
   border: none;
   background: transparent;
-  color: var(--text-primary, #1A1612);
+  color: var(--text-primary);
   font-size: 16px;
   cursor: pointer;
-  border-radius: var(--radius-sm, 5px);
+  border-radius: var(--radius-sm);
 }
 
 .zoomBtn:hover {
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
 }
 
 .zoomLevel {
   font-size: 12px;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   min-width: 36px;
   text-align: center;
   font-variant-numeric: tabular-nums;
@@ -87,10 +87,10 @@
   display: flex;
   align-items: center;
   padding: 4px 10px;
-  background: var(--bg-surface, #FFFFFF);
-  border: 1px solid var(--border, #E4DFD8);
-  border-radius: var(--radius-sm, 5px);
-  box-shadow: var(--shadow-sm, 0 1px 2px rgba(44, 37, 32, 0.06));
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
   z-index: 10;
   font-size: 12px;
 }
@@ -102,13 +102,13 @@
 
 .breadcrumbSep {
   margin: 0 6px;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
 }
 
 .breadcrumbLink {
   background: none;
   border: none;
-  color: var(--running, #1A7F8E);
+  color: var(--running);
   cursor: pointer;
   padding: 0;
   font-size: 12px;
@@ -120,7 +120,7 @@
 }
 
 .breadcrumbCurrent {
-  color: var(--text-primary, #1A1612);
+  color: var(--text-primary);
   font-weight: 600;
 }
 
@@ -128,9 +128,9 @@
   position: absolute;
   bottom: 52px;
   right: 12px;
-  border: 1px solid var(--border, #E4DFD8);
-  border-radius: var(--radius-sm, 5px);
-  box-shadow: var(--shadow-md, 0 2px 8px rgba(44, 37, 32, 0.08));
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
   overflow: hidden;
   z-index: 5;
 }
@@ -141,10 +141,10 @@
   align-items: center;
   gap: 2px;
   padding: 3px 4px;
-  background: var(--bg-surface, #FFFFFF);
-  border: 1px solid var(--border, #E4DFD8);
-  border-radius: var(--radius-sm, 5px);
-  box-shadow: var(--shadow-lg, 0 4px 16px rgba(44, 37, 32, 0.10));
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-lg);
   transform: translate(-50%, -100%);
   margin-top: -6px;
   z-index: 10;
@@ -159,31 +159,31 @@
   height: 26px;
   border: none;
   background: transparent;
-  color: var(--text-secondary, #5C5347);
+  color: var(--text-secondary);
   font-size: 12px;
   cursor: pointer;
-  border-radius: var(--radius-sm, 5px);
+  border-radius: var(--radius-sm);
   padding: 0;
 }
 
 .nodeToolbarBtn:hover {
-  background: var(--bg-hover, #F5F0EA);
-  color: var(--text-primary, #1A1612);
+  background: var(--bg-hover);
+  color: var(--text-primary);
 }
 
 .nodeToolbarBtnActive {
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
 }
 
 .iterationStepper {
   display: flex;
   align-items: center;
   gap: 2px;
-  background: rgba(255, 255, 255, 0.15);
+  background: color-mix(in srgb, var(--bg-surface) 15%, transparent);
   border-radius: 3px;
   padding: 1px 3px;
   font-size: 12px;
-  color: white;
+  color: var(--text-primary);
   font-family: inherit;
 }
 
@@ -191,8 +191,8 @@
   width: 16px;
   height: 16px;
   border: none;
-  background: rgba(255, 255, 255, 0.2);
-  color: white;
+  background: color-mix(in srgb, var(--bg-surface) 20%, transparent);
+  color: var(--text-primary);
   border-radius: 2px;
   cursor: pointer;
   font-size: 12px;
diff --git a/ui/src/components/ProcessDiagram/ProcessDiagram.tsx b/ui/src/components/ProcessDiagram/ProcessDiagram.tsx
index 917650ab..f1414ce3 100644
--- a/ui/src/components/ProcessDiagram/ProcessDiagram.tsx
+++ b/ui/src/components/ProcessDiagram/ProcessDiagram.tsx
@@ -294,7 +294,7 @@ export function ProcessDiagram({
             refY="3"
             orient="auto"
           >
-            <polygon points="0 0, 8 3, 0 6" fill="#9CA3AF" />
+            <polygon points="0 0, 8 3, 0 6" fill="var(--text-muted)" />
           </marker>
           <marker
             id="arrowhead-green"
@@ -304,7 +304,7 @@ export function ProcessDiagram({
             refY="3"
             orient="auto"
           >
-            <polygon points="0 0, 8 3, 0 6" fill="#3D7C47" />
+            <polygon points="0 0, 8 3, 0 6" fill="var(--success)" />
           </marker>
         </defs>
 
diff --git a/ui/src/pages/Admin/AdminLayout.module.css b/ui/src/pages/Admin/AdminLayout.module.css
new file mode 100644
index 00000000..207f7601
--- /dev/null
+++ b/ui/src/pages/Admin/AdminLayout.module.css
@@ -0,0 +1,6 @@
+.content {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+  padding: 20px 24px 40px;
+}
diff --git a/ui/src/pages/Admin/AdminLayout.tsx b/ui/src/pages/Admin/AdminLayout.tsx
index 5a36b3c7..c72d205a 100644
--- a/ui/src/pages/Admin/AdminLayout.tsx
+++ b/ui/src/pages/Admin/AdminLayout.tsx
@@ -1,8 +1,9 @@
 import { Outlet } from 'react-router';
+import styles from './AdminLayout.module.css';
 
 export default function AdminLayout() {
   return (
-    <div style={{ flex: 1, overflow: 'auto', minHeight: 0, padding: '20px 24px 40px' }}>
+    <div className={styles.content}>
       <Outlet />
     </div>
   );
diff --git a/ui/src/pages/Admin/AppConfigDetailPage.module.css b/ui/src/pages/Admin/AppConfigDetailPage.module.css
index b0ebd187..76a07f66 100644
--- a/ui/src/pages/Admin/AppConfigDetailPage.module.css
+++ b/ui/src/pages/Admin/AppConfigDetailPage.module.css
@@ -103,18 +103,6 @@
   color: var(--text-muted);
 }
 
-.section {
-  margin-bottom: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  padding: 16px 20px;
-}
-
 .sectionSummary {
   font-size: 12px;
   color: var(--text-muted);
diff --git a/ui/src/pages/Admin/AppConfigDetailPage.tsx b/ui/src/pages/Admin/AppConfigDetailPage.tsx
index 238c30c0..7b0f2529 100644
--- a/ui/src/pages/Admin/AppConfigDetailPage.tsx
+++ b/ui/src/pages/Admin/AppConfigDetailPage.tsx
@@ -11,6 +11,7 @@ import { useCatalog } from '../../api/queries/catalog';
 import type { CatalogApp, CatalogRoute } from '../../api/queries/catalog';
 import { applyTracedProcessorUpdate, applyRouteRecordingUpdate } from '../../utils/config-draft-utils';
 import styles from './AppConfigDetailPage.module.css';
+import sectionStyles from '../../styles/section-card.module.css';
 
 type BadgeColor = 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto';
 
@@ -325,7 +326,7 @@ export default function AppConfigDetailPage() {
       </div>
 
       {/* ── Settings ──────────────────────────────────────────────────── */}
-      <div className={styles.section}>
+      <div className={sectionStyles.section}>
         <SectionHeader>Settings</SectionHeader>
         <div className={styles.settingsGrid}>
           <div className={styles.field}>
@@ -424,7 +425,7 @@ export default function AppConfigDetailPage() {
       </div>
 
       {/* ── Traces & Taps ─────────────────────────────────────────────── */}
-      <div className={styles.section}>
+      <div className={sectionStyles.section}>
         <SectionHeader>Traces &amp; Taps</SectionHeader>
         <span className={styles.sectionSummary}>
           {tracedCount} traced &middot; {tapCount} taps &middot; manage taps on route pages
@@ -440,7 +441,7 @@ export default function AppConfigDetailPage() {
       </div>
 
       {/* ── Route Recording ───────────────────────────────────────────── */}
-      <div className={styles.section}>
+      <div className={sectionStyles.section}>
         <SectionHeader>Route Recording</SectionHeader>
         <span className={styles.sectionSummary}>
           {recordingCount} of {routeRecordingRows.length} routes recording
diff --git a/ui/src/pages/Admin/AuditLogPage.module.css b/ui/src/pages/Admin/AuditLogPage.module.css
index 57a4ac86..96374779 100644
--- a/ui/src/pages/Admin/AuditLogPage.module.css
+++ b/ui/src/pages/Admin/AuditLogPage.module.css
@@ -13,39 +13,6 @@
   width: 160px;
 }
 
-.tableSection {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  overflow: hidden;
-}
-
-.tableHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.tableTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.tableRight {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.tableMeta {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
 .target {
   display: inline-block;
   max-width: 220px;
diff --git a/ui/src/pages/Admin/AuditLogPage.tsx b/ui/src/pages/Admin/AuditLogPage.tsx
index 841748bf..2c1ca4f5 100644
--- a/ui/src/pages/Admin/AuditLogPage.tsx
+++ b/ui/src/pages/Admin/AuditLogPage.tsx
@@ -5,6 +5,7 @@ import {
 import type { Column } from '@cameleer/design-system';
 import { useAuditLog, type AuditEvent } from '../../api/queries/admin/audit';
 import styles from './AuditLogPage.module.css';
+import tableStyles from '../../styles/table-section.module.css';
 
 const CATEGORIES = [
   { value: '', label: 'All categories' },
@@ -117,11 +118,11 @@ export default function AuditLogPage() {
         />
       </div>
 
-      <div className={styles.tableSection}>
-        <div className={styles.tableHeader}>
-          <span className={styles.tableTitle}>Audit Log</span>
-          <div className={styles.tableRight}>
-            <span className={styles.tableMeta}>
+      <div className={tableStyles.tableSection}>
+        <div className={tableStyles.tableHeader}>
+          <span className={tableStyles.tableTitle}>Audit Log</span>
+          <div className={tableStyles.tableRight}>
+            <span className={tableStyles.tableMeta}>
               {totalCount} events
             </span>
             <Badge label="AUTO" color="success" />
diff --git a/ui/src/pages/Admin/ClickHouseAdminPage.module.css b/ui/src/pages/Admin/ClickHouseAdminPage.module.css
index 1c9ca34d..6123c7d3 100644
--- a/ui/src/pages/Admin/ClickHouseAdminPage.module.css
+++ b/ui/src/pages/Admin/ClickHouseAdminPage.module.css
@@ -34,32 +34,7 @@
 }
 
 .tableSection {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
   margin-bottom: 16px;
-  overflow: hidden;
-}
-
-.tableHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.tableTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.tableMeta {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
 }
 
 .queryText {
diff --git a/ui/src/pages/Admin/ClickHouseAdminPage.tsx b/ui/src/pages/Admin/ClickHouseAdminPage.tsx
index 0bc3b4a1..34e22dd0 100644
--- a/ui/src/pages/Admin/ClickHouseAdminPage.tsx
+++ b/ui/src/pages/Admin/ClickHouseAdminPage.tsx
@@ -2,6 +2,7 @@ import { StatCard, DataTable, ProgressBar } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { useClickHouseStatus, useClickHouseTables, useClickHousePerformance, useClickHouseQueries, useIndexerPipeline } from '../../api/queries/admin/clickhouse';
 import styles from './ClickHouseAdminPage.module.css';
+import tableStyles from '../../styles/table-section.module.css';
 
 export default function ClickHouseAdminPage() {
   const { data: status, isError: statusError } = useClickHouseStatus();
@@ -65,10 +66,10 @@ export default function ClickHouseAdminPage() {
       )}
 
       {/* Tables */}
-      <div className={styles.tableSection}>
-        <div className={styles.tableHeader}>
-          <span className={styles.tableTitle}>Tables ({(tables || []).length})</span>
-          {totalSizeLabel && <span className={styles.tableMeta}>{totalSizeLabel} total</span>}
+      <div className={`${tableStyles.tableSection} ${styles.tableSection}`}>
+        <div className={tableStyles.tableHeader}>
+          <span className={tableStyles.tableTitle}>Tables ({(tables || []).length})</span>
+          {totalSizeLabel && <span className={tableStyles.tableMeta}>{totalSizeLabel} total</span>}
         </div>
         <DataTable
           columns={tableColumns}
@@ -80,9 +81,9 @@ export default function ClickHouseAdminPage() {
       </div>
 
       {/* Active Queries */}
-      <div className={styles.tableSection}>
-        <div className={styles.tableHeader}>
-          <span className={styles.tableTitle}>Active Queries ({(queries || []).length})</span>
+      <div className={`${tableStyles.tableSection} ${styles.tableSection}`}>
+        <div className={tableStyles.tableHeader}>
+          <span className={tableStyles.tableTitle}>Active Queries ({(queries || []).length})</span>
         </div>
         <DataTable
           columns={queryColumns}
diff --git a/ui/src/pages/Admin/DatabaseAdminPage.module.css b/ui/src/pages/Admin/DatabaseAdminPage.module.css
new file mode 100644
index 00000000..ac676de1
--- /dev/null
+++ b/ui/src/pages/Admin/DatabaseAdminPage.module.css
@@ -0,0 +1,44 @@
+.pageTitle {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.statStrip {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.cardBody {
+  padding: 1rem;
+}
+
+.sectionTitle {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.poolStats {
+  display: flex;
+  gap: 2rem;
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.section {
+  margin-top: 1.5rem;
+}
+
+.sectionHeading {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+}
+
+.querySnippet {
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+}
diff --git a/ui/src/pages/Admin/DatabaseAdminPage.tsx b/ui/src/pages/Admin/DatabaseAdminPage.tsx
index f8459db5..5a02693e 100644
--- a/ui/src/pages/Admin/DatabaseAdminPage.tsx
+++ b/ui/src/pages/Admin/DatabaseAdminPage.tsx
@@ -1,6 +1,7 @@
 import { StatCard, Card, DataTable, Badge, Button, ProgressBar, Spinner } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { useDatabaseStatus, useConnectionPool, useDatabaseTables, useActiveQueries, useKillQuery } from '../../api/queries/admin/database';
+import styles from './DatabaseAdminPage.module.css';
 
 export default function DatabaseAdminPage() {
   const { data: status, isError: statusError } = useDatabaseStatus();
@@ -23,7 +24,7 @@ export default function DatabaseAdminPage() {
     { key: 'pid', header: 'PID' },
     { key: 'durationSeconds', header: 'Duration', render: (v) => `${v}s` },
     { key: 'state', header: 'State', render: (v) => <Badge label={String(v)} /> },
-    { key: 'query', header: 'Query', render: (v) => <span style={{ fontSize: '0.75rem', fontFamily: 'var(--font-mono)' }}>{String(v).slice(0, 80)}</span> },
+    { key: 'query', header: 'Query', render: (v) => <span className={styles.querySnippet}>{String(v).slice(0, 80)}</span> },
     {
       key: 'pid', header: '', width: '80px',
       render: (v) => <Button variant="danger" size="sm" onClick={() => killQuery.mutate(v as number)}>Kill</Button>,
@@ -32,19 +33,19 @@ export default function DatabaseAdminPage() {
 
   return (
     <div>
-      <h2 style={{ marginBottom: '1rem' }}>Database Administration</h2>
+      <div className={styles.pageTitle}>Database Administration</div>
 
-      <div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
+      <div className={styles.statStrip}>
         <StatCard label="Status" value={unreachable ? 'Disconnected' : status ? 'Connected' : '\u2014'} accent={unreachable ? 'error' : status ? 'success' : undefined} />
         <StatCard label="Version" value={status?.version ?? '—'} />
       </div>
 
       {pool && (
         <Card>
-          <div style={{ padding: '1rem' }}>
-            <h3 style={{ marginBottom: '0.5rem' }}>Connection Pool</h3>
+          <div className={styles.cardBody}>
+            <div className={styles.sectionTitle}>Connection Pool</div>
             <ProgressBar value={poolPct} />
-            <div style={{ display: 'flex', gap: '2rem', marginTop: '0.5rem', fontSize: '0.875rem' }}>
+            <div className={styles.poolStats}>
               <span>Active: {pool.activeConnections}</span>
               <span>Idle: {pool.idleConnections}</span>
               <span>Max: {pool.maximumPoolSize}</span>
@@ -53,13 +54,13 @@ export default function DatabaseAdminPage() {
         </Card>
       )}
 
-      <div style={{ marginTop: '1.5rem' }}>
-        <h3 style={{ marginBottom: '0.75rem' }}>Tables</h3>
+      <div className={styles.section}>
+        <div className={styles.sectionHeading}>Tables</div>
         <DataTable columns={tableColumns} data={(tables || []).map((t: any) => ({ ...t, id: t.tableName }))} sortable pageSize={20} />
       </div>
 
-      <div style={{ marginTop: '1.5rem' }}>
-        <h3 style={{ marginBottom: '0.75rem' }}>Active Queries</h3>
+      <div className={styles.section}>
+        <div className={styles.sectionHeading}>Active Queries</div>
         <DataTable columns={queryColumns} data={(queries || []).map((q: any) => ({ ...q, id: String(q.pid) }))} />
       </div>
     </div>
diff --git a/ui/src/pages/Admin/OidcConfigPage.module.css b/ui/src/pages/Admin/OidcConfigPage.module.css
index a66d9751..868433c5 100644
--- a/ui/src/pages/Admin/OidcConfigPage.module.css
+++ b/ui/src/pages/Admin/OidcConfigPage.module.css
@@ -10,18 +10,6 @@
   margin-bottom: 20px;
 }
 
-.section {
-  margin-bottom: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  padding: 16px 20px;
-}
-
 .toggleRow {
   display: flex;
   align-items: center;
diff --git a/ui/src/pages/Admin/OidcConfigPage.tsx b/ui/src/pages/Admin/OidcConfigPage.tsx
index 56a5b0b7..e8eb357c 100644
--- a/ui/src/pages/Admin/OidcConfigPage.tsx
+++ b/ui/src/pages/Admin/OidcConfigPage.tsx
@@ -5,6 +5,7 @@ import {
 import { useToast } from '@cameleer/design-system';
 import { adminFetch } from '../../api/queries/admin/admin-api';
 import styles from './OidcConfigPage.module.css';
+import sectionStyles from '../../styles/section-card.module.css';
 
 interface OidcFormData {
   enabled: boolean;
@@ -137,7 +138,7 @@ export default function OidcConfigPage() {
 
       {error && <div style={{ marginBottom: 16 }}><Alert variant="error">{error}</Alert></div>}
 
-      <section className={styles.section}>
+      <section className={sectionStyles.section}>
         <SectionHeader>Behavior</SectionHeader>
         <div className={styles.toggleRow}>
           <Toggle
@@ -156,7 +157,7 @@ export default function OidcConfigPage() {
         </div>
       </section>
 
-      <section className={styles.section}>
+      <section className={sectionStyles.section}>
         <SectionHeader>Provider Settings</SectionHeader>
         <FormField label="Issuer URI" htmlFor="issuer">
           <Input
@@ -200,7 +201,7 @@ export default function OidcConfigPage() {
         </FormField>
       </section>
 
-      <section className={styles.section}>
+      <section className={sectionStyles.section}>
         <SectionHeader>Claim Mapping</SectionHeader>
         <FormField label="Roles Claim" htmlFor="roles-claim" hint="JSON path to roles in the access token or ID token">
           <Input
@@ -225,7 +226,7 @@ export default function OidcConfigPage() {
         </FormField>
       </section>
 
-      <section className={styles.section}>
+      <section className={sectionStyles.section}>
         <SectionHeader>Default Roles</SectionHeader>
         <div className={styles.tagList}>
           {(form.defaultRoles || []).map((role) => (
@@ -249,7 +250,7 @@ export default function OidcConfigPage() {
         </div>
       </section>
 
-      <section className={styles.section}>
+      <section className={sectionStyles.section}>
         <SectionHeader>Danger Zone</SectionHeader>
         <Button size="sm" variant="danger" onClick={() => setDeleteOpen(true)}>
           Delete OIDC Configuration
diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css
index af5936c0..10479b58 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -124,7 +124,7 @@
   border: none;
   border-radius: var(--radius-sm);
   background: var(--amber);
-  color: #fff;
+  color: var(--bg-surface);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
@@ -308,7 +308,7 @@
   align-items: center;
   justify-content: center;
   height: 80px;
-  background: var(--bg-surface-raised);
+  background: var(--bg-raised);
   border: 1px dashed var(--border-subtle);
   border-radius: var(--radius-md);
   font-size: 12px;
@@ -323,96 +323,6 @@
   margin-top: 20px;
 }
 
-/* Log viewer */
-.logCard {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  max-height: 420px;
-}
-
-.logHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.logToolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-surface);
-}
-
-.logSearchWrap {
-  position: relative;
-  flex: 1;
-  min-width: 0;
-}
-
-.logSearchInput {
-  width: 100%;
-  padding: 5px 28px 5px 10px;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  background: var(--bg-body);
-  color: var(--text-primary);
-  font-size: 12px;
-  font-family: var(--font-body);
-  outline: none;
-}
-
-.logSearchInput:focus {
-  border-color: var(--amber);
-}
-
-.logSearchInput::placeholder {
-  color: var(--text-faint);
-}
-
-.logSearchClear {
-  position: absolute;
-  right: 4px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0 4px;
-  line-height: 1;
-}
-
-.logClearFilters {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  font-size: 12px;
-  cursor: pointer;
-  padding: 2px 6px;
-  white-space: nowrap;
-}
-
-.logClearFilters:hover {
-  color: var(--text-primary);
-}
-
-.logEmpty {
-  padding: 24px;
-  text-align: center;
-  color: var(--text-faint);
-  font-size: 12px;
-}
-
 /* Event card (timeline panel) */
 .eventCard {
   background: var(--bg-surface);
@@ -433,26 +343,3 @@
   border-bottom: 1px solid var(--border-subtle);
 }
 
-.headerActions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.sortBtn,
-.refreshBtn {
-  background: none;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 13px;
-  padding: 2px 6px;
-  line-height: 1;
-}
-
-.sortBtn:hover,
-.refreshBtn:hover {
-  color: var(--text-primary);
-  border-color: var(--amber);
-}
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index a77570c4..3e2d2885 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -8,6 +8,7 @@ import {
 } from '@cameleer/design-system';
 import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
 import styles from './AgentHealth.module.css';
+import logStyles from '../../styles/log-panel.module.css';
 import { useAgents, useAgentEvents } from '../../api/queries/agents';
 import { useApplicationLogs } from '../../api/queries/logs';
 import { useApplicationConfig, useUpdateApplicationConfig } from '../../api/queries/commands';
@@ -508,24 +509,24 @@ export default function AgentHealth() {
 
       {/* Log + Timeline side by side */}
       <div className={styles.bottomRow}>
-        <div className={styles.logCard}>
-          <div className={styles.logHeader}>
+        <div className={logStyles.logCard}>
+          <div className={logStyles.logHeader}>
             <SectionHeader>Application Log</SectionHeader>
-            <div className={styles.headerActions}>
+            <div className={logStyles.headerActions}>
               <span className={styles.sectionMeta}>{logEntries.length} entries</span>
-              <button className={styles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
+              <button className={logStyles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
                 {logSortAsc ? '\u2191' : '\u2193'}
               </button>
-              <button className={styles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
+              <button className={logStyles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
                 <RefreshCw size={14} />
               </button>
             </div>
           </div>
-          <div className={styles.logToolbar}>
-            <div className={styles.logSearchWrap}>
+          <div className={logStyles.logToolbar}>
+            <div className={logStyles.logSearchWrap}>
               <input
                 type="text"
-                className={styles.logSearchInput}
+                className={logStyles.logSearchInput}
                 placeholder="Search logs\u2026"
                 value={logSearch}
                 onChange={(e) => setLogSearch(e.target.value)}
@@ -534,7 +535,7 @@ export default function AgentHealth() {
               {logSearch && (
                 <button
                   type="button"
-                  className={styles.logSearchClear}
+                  className={logStyles.logSearchClear}
                   onClick={() => setLogSearch('')}
                   aria-label="Clear search"
                 >
@@ -544,7 +545,7 @@ export default function AgentHealth() {
             </div>
             <ButtonGroup items={LOG_LEVEL_ITEMS} value={logLevels} onChange={setLogLevels} />
             {logLevels.size > 0 && (
-              <button className={styles.logClearFilters} onClick={() => setLogLevels(new Set())}>
+              <button className={logStyles.logClearFilters} onClick={() => setLogLevels(new Set())}>
                 Clear
               </button>
             )}
@@ -552,7 +553,7 @@ export default function AgentHealth() {
           {filteredLogs.length > 0 ? (
             <LogViewer entries={filteredLogs} maxHeight={360} />
           ) : (
-            <div className={styles.logEmpty}>
+            <div className={logStyles.logEmpty}>
               {logSearch || logLevels.size > 0 ? 'No matching log entries' : 'No log entries available'}
             </div>
           )}
@@ -561,12 +562,12 @@ export default function AgentHealth() {
         <div className={styles.eventCard}>
           <div className={styles.eventCardHeader}>
             <span className={styles.sectionTitle}>Timeline</span>
-            <div className={styles.headerActions}>
+            <div className={logStyles.headerActions}>
               <span className={styles.sectionMeta}>{feedEvents.length} events</span>
-              <button className={styles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
+              <button className={logStyles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
                 {eventSortAsc ? '\u2191' : '\u2193'}
               </button>
-              <button className={styles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
+              <button className={logStyles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
                 <RefreshCw size={14} />
               </button>
             </div>
@@ -574,7 +575,7 @@ export default function AgentHealth() {
           {feedEvents.length > 0 ? (
             <EventFeed events={feedEvents} maxItems={100} />
           ) : (
-            <div className={styles.logEmpty}>No events in the selected time range.</div>
+            <div className={logStyles.logEmpty}>No events in the selected time range.</div>
           )}
         </div>
       </div>
diff --git a/ui/src/pages/AgentInstance/AgentInstance.module.css b/ui/src/pages/AgentInstance/AgentInstance.module.css
index fa661907..f7198378 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.module.css
+++ b/ui/src/pages/AgentInstance/AgentInstance.module.css
@@ -90,15 +90,6 @@
   margin-bottom: 20px;
 }
 
-.chartCard {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  padding: 16px;
-  overflow: hidden;
-}
-
 .chartHeader {
   display: flex;
   align-items: center;
@@ -125,121 +116,6 @@
   gap: 14px;
 }
 
-/* Log viewer */
-.logCard {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  max-height: 420px;
-}
-
-.logHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.headerActions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.sortBtn,
-.refreshBtn {
-  background: none;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 13px;
-  padding: 2px 6px;
-  line-height: 1;
-}
-
-.sortBtn:hover,
-.refreshBtn:hover {
-  color: var(--text-primary);
-  border-color: var(--amber);
-}
-
-.logToolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-surface);
-}
-
-.logSearchWrap {
-  position: relative;
-  flex: 1;
-  min-width: 0;
-}
-
-.logSearchInput {
-  width: 100%;
-  padding: 5px 28px 5px 10px;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  background: var(--bg-body);
-  color: var(--text-primary);
-  font-size: 12px;
-  font-family: var(--font-body);
-  outline: none;
-}
-
-.logSearchInput:focus {
-  border-color: var(--amber);
-}
-
-.logSearchInput::placeholder {
-  color: var(--text-faint);
-}
-
-.logSearchClear {
-  position: absolute;
-  right: 4px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0 4px;
-  line-height: 1;
-}
-
-.logClearFilters {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  font-size: 12px;
-  cursor: pointer;
-  padding: 2px 6px;
-  white-space: nowrap;
-}
-
-.logClearFilters:hover {
-  color: var(--text-primary);
-}
-
-/* Empty state (shared) */
-.logEmpty {
-  padding: 24px;
-  text-align: center;
-  color: var(--text-faint);
-  font-size: 12px;
-}
-
 /* Timeline card */
 .timelineCard {
   background: var(--bg-surface);
diff --git a/ui/src/pages/AgentInstance/AgentInstance.tsx b/ui/src/pages/AgentInstance/AgentInstance.tsx
index 592639ec..6d7e7a8b 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -8,6 +8,8 @@ import {
 } from '@cameleer/design-system';
 import type { FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
 import styles from './AgentInstance.module.css';
+import logStyles from '../../styles/log-panel.module.css';
+import chartCardStyles from '../../styles/chart-card.module.css';
 import { useAgents, useAgentEvents } from '../../api/queries/agents';
 import { useApplicationLogs } from '../../api/queries/logs';
 import { useStatsTimeseries } from '../../api/queries/executions';
@@ -290,7 +292,7 @@ export default function AgentInstance() {
 
       {/* Charts grid — 3x2 */}
       <div className={styles.chartsGrid}>
-        <div className={styles.chartCard}>
+        <div className={chartCardStyles.chartCard}>
           <div className={styles.chartHeader}>
             <span className={styles.chartTitle}>CPU Usage</span>
             <span className={styles.chartMeta}>
@@ -309,7 +311,7 @@ export default function AgentInstance() {
           )}
         </div>
 
-        <div className={styles.chartCard}>
+        <div className={chartCardStyles.chartCard}>
           <div className={styles.chartHeader}>
             <span className={styles.chartTitle}>Memory (Heap)</span>
             <span className={styles.chartMeta}>
@@ -325,7 +327,7 @@ export default function AgentInstance() {
           )}
         </div>
 
-        <div className={styles.chartCard}>
+        <div className={chartCardStyles.chartCard}>
           <div className={styles.chartHeader}>
             <span className={styles.chartTitle}>Throughput</span>
             <span className={styles.chartMeta}>
@@ -339,7 +341,7 @@ export default function AgentInstance() {
           )}
         </div>
 
-        <div className={styles.chartCard}>
+        <div className={chartCardStyles.chartCard}>
           <div className={styles.chartHeader}>
             <span className={styles.chartTitle}>Error Rate</span>
             <span className={styles.chartMeta}>
@@ -353,7 +355,7 @@ export default function AgentInstance() {
           )}
         </div>
 
-        <div className={styles.chartCard}>
+        <div className={chartCardStyles.chartCard}>
           <div className={styles.chartHeader}>
             <span className={styles.chartTitle}>Thread Count</span>
             <span className={styles.chartMeta}>
@@ -369,7 +371,7 @@ export default function AgentInstance() {
           )}
         </div>
 
-        <div className={styles.chartCard}>
+        <div className={chartCardStyles.chartCard}>
           <div className={styles.chartHeader}>
             <span className={styles.chartTitle}>GC Pauses</span>
             <span className={styles.chartMeta} />
@@ -384,24 +386,24 @@ export default function AgentInstance() {
 
       {/* Log + Timeline side by side */}
       <div className={styles.bottomRow}>
-        <div className={styles.logCard}>
-          <div className={styles.logHeader}>
+        <div className={logStyles.logCard}>
+          <div className={logStyles.logHeader}>
             <SectionHeader>Application Log</SectionHeader>
-            <div className={styles.headerActions}>
+            <div className={logStyles.headerActions}>
               <span className={styles.chartMeta}>{logEntries.length} entries</span>
-              <button className={styles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
+              <button className={logStyles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
                 {logSortAsc ? '\u2191' : '\u2193'}
               </button>
-              <button className={styles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
+              <button className={logStyles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
                 <RefreshCw size={14} />
               </button>
             </div>
           </div>
-          <div className={styles.logToolbar}>
-            <div className={styles.logSearchWrap}>
+          <div className={logStyles.logToolbar}>
+            <div className={logStyles.logSearchWrap}>
               <input
                 type="text"
-                className={styles.logSearchInput}
+                className={logStyles.logSearchInput}
                 placeholder="Search logs\u2026"
                 value={logSearch}
                 onChange={(e) => setLogSearch(e.target.value)}
@@ -410,7 +412,7 @@ export default function AgentInstance() {
               {logSearch && (
                 <button
                   type="button"
-                  className={styles.logSearchClear}
+                  className={logStyles.logSearchClear}
                   onClick={() => setLogSearch('')}
                   aria-label="Clear search"
                 >
@@ -420,7 +422,7 @@ export default function AgentInstance() {
             </div>
             <ButtonGroup items={LOG_LEVEL_ITEMS} value={logLevels} onChange={setLogLevels} />
             {logLevels.size > 0 && (
-              <button className={styles.logClearFilters} onClick={() => setLogLevels(new Set())}>
+              <button className={logStyles.logClearFilters} onClick={() => setLogLevels(new Set())}>
                 Clear
               </button>
             )}
@@ -428,7 +430,7 @@ export default function AgentInstance() {
           {filteredLogs.length > 0 ? (
             <LogViewer entries={filteredLogs} maxHeight={360} />
           ) : (
-            <div className={styles.logEmpty}>
+            <div className={logStyles.logEmpty}>
               {logSearch || logLevels.size > 0 ? 'No matching log entries' : 'No log entries available'}
             </div>
           )}
@@ -437,12 +439,12 @@ export default function AgentInstance() {
         <div className={styles.timelineCard}>
           <div className={styles.timelineHeader}>
             <span className={styles.chartTitle}>Timeline</span>
-            <div className={styles.headerActions}>
+            <div className={logStyles.headerActions}>
               <span className={styles.chartMeta}>{feedEvents.length} events</span>
-              <button className={styles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
+              <button className={logStyles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
                 {eventSortAsc ? '\u2191' : '\u2193'}
               </button>
-              <button className={styles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
+              <button className={logStyles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
                 <RefreshCw size={14} />
               </button>
             </div>
@@ -450,7 +452,7 @@ export default function AgentInstance() {
           {feedEvents.length > 0 ? (
             <EventFeed events={feedEvents} maxItems={50} />
           ) : (
-            <div className={styles.logEmpty}>No events in the selected time range.</div>
+            <div className={logStyles.logEmpty}>No events in the selected time range.</div>
           )}
         </div>
       </div>
diff --git a/ui/src/pages/AppsTab/AppsTab.module.css b/ui/src/pages/AppsTab/AppsTab.module.css
index 33e48e55..b928786b 100644
--- a/ui/src/pages/AppsTab/AppsTab.module.css
+++ b/ui/src/pages/AppsTab/AppsTab.module.css
@@ -57,7 +57,7 @@
 
 .stepIndicator {
   font-size: 12px;
-  color: var(--accent, #6c7aff);
+  color: var(--amber);
   font-style: italic;
 }
 
@@ -143,8 +143,8 @@
 }
 
 .subTabActive {
-  color: var(--accent, #6c7aff);
-  border-bottom-color: var(--accent, #6c7aff);
+  color: var(--amber);
+  border-bottom-color: var(--amber);
 }
 
 /* Table */
@@ -230,7 +230,7 @@
 
 .editBannerActive {
   border-color: var(--warning);
-  background: rgba(251, 191, 36, 0.06);
+  background: color-mix(in srgb, var(--amber) 6%, transparent);
 }
 
 .editBannerText {
@@ -432,3 +432,44 @@
 .removeBtn:hover {
   color: var(--error);
 }
+
+/* Visually hidden file inputs */
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Fixed-width inputs */
+.inputXs {
+  width: 50px;
+}
+
+.inputSm {
+  width: 60px;
+}
+
+.inputMd {
+  width: 70px;
+}
+
+.inputLg {
+  width: 80px;
+}
+
+.inputXl {
+  width: 90px;
+}
+
+/* Table cell flex layout */
+.cellFlex {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
diff --git a/ui/src/pages/AppsTab/AppsTab.tsx b/ui/src/pages/AppsTab/AppsTab.tsx
index 3363085e..fe8cec96 100644
--- a/ui/src/pages/AppsTab/AppsTab.tsx
+++ b/ui/src/pages/AppsTab/AppsTab.tsx
@@ -301,7 +301,7 @@ function CreateAppView({ environments, selectedEnv }: { environments: Environmen
         <span className={styles.configLabel}>Application JAR</span>
         <div className={styles.fileRow}>
           <input ref={fileInputRef} type="file" accept=".jar"
-            style={{ position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, overflow: 'hidden', clip: 'rect(0,0,0,0)', border: 0 }}
+            className={styles.visuallyHidden}
             onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
           <Button size="sm" variant="secondary" type="button" onClick={() => fileInputRef.current?.click()} disabled={busy}>
             {file ? 'Change file' : 'Select JAR'}
@@ -355,8 +355,8 @@ function CreateAppView({ environments, selectedEnv }: { environments: Environmen
 
           <span className={styles.configLabel}>Max Payload Size</span>
           <div className={styles.configInline}>
-            <Input disabled={busy} value={payloadSize} onChange={(e) => setPayloadSize(e.target.value)} style={{ width: 70 }} />
-            <Select disabled={busy} value={payloadUnit} onChange={(e) => setPayloadUnit(e.target.value)} style={{ width: 90 }}
+            <Input disabled={busy} value={payloadSize} onChange={(e) => setPayloadSize(e.target.value)} className={styles.inputMd} />
+            <Select disabled={busy} value={payloadUnit} onChange={(e) => setPayloadUnit(e.target.value)} className={styles.inputXl}
               options={[{ value: 'bytes', label: 'bytes' }, { value: 'KB', label: 'KB' }, { value: 'MB', label: 'MB' }]} />
           </div>
 
@@ -373,12 +373,12 @@ function CreateAppView({ environments, selectedEnv }: { environments: Environmen
             <Toggle checked={metricsEnabled} onChange={() => !busy && setMetricsEnabled(!metricsEnabled)} disabled={busy} />
             <span className={metricsEnabled ? styles.toggleEnabled : styles.toggleDisabled}>{metricsEnabled ? 'Enabled' : 'Disabled'}</span>
             <span className={styles.cellMeta} style={{ marginLeft: 8 }}>Interval</span>
-            <Input disabled={busy} value={metricsInterval} onChange={(e) => setMetricsInterval(e.target.value)} style={{ width: 50 }} />
+            <Input disabled={busy} value={metricsInterval} onChange={(e) => setMetricsInterval(e.target.value)} className={styles.inputXs} />
             <span className={styles.cellMeta}>s</span>
           </div>
 
           <span className={styles.configLabel}>Sampling Rate</span>
-          <Input disabled={busy} value={samplingRate} onChange={(e) => setSamplingRate(e.target.value)} style={{ width: 80 }} />
+          <Input disabled={busy} value={samplingRate} onChange={(e) => setSamplingRate(e.target.value)} className={styles.inputLg} />
 
           <span className={styles.configLabel}>Compress Success</span>
           <div className={styles.configInline}>
@@ -406,25 +406,25 @@ function CreateAppView({ environments, selectedEnv }: { environments: Environmen
           <div className={styles.configGrid}>
             <span className={styles.configLabel}>Memory Limit</span>
             <div className={styles.configInline}>
-              <Input disabled={busy} value={memoryLimit} onChange={(e) => setMemoryLimit(e.target.value)} style={{ width: 80 }} />
+              <Input disabled={busy} value={memoryLimit} onChange={(e) => setMemoryLimit(e.target.value)} className={styles.inputLg} />
               <span className={styles.cellMeta}>MB</span>
             </div>
 
             <span className={styles.configLabel}>Memory Reserve</span>
             <div>
               <div className={styles.configInline}>
-                <Input disabled={!isProd || busy} value={memoryReserve} onChange={(e) => setMemoryReserve(e.target.value)} placeholder="---" style={{ width: 80 }} />
+                <Input disabled={!isProd || busy} value={memoryReserve} onChange={(e) => setMemoryReserve(e.target.value)} placeholder="---" className={styles.inputLg} />
                 <span className={styles.cellMeta}>MB</span>
               </div>
               {!isProd && <span className={styles.configHint}>Available in production environments only</span>}
             </div>
 
             <span className={styles.configLabel}>CPU Request</span>
-            <Input disabled={busy} value={cpuRequest} onChange={(e) => setCpuRequest(e.target.value)} style={{ width: 80 }} />
+            <Input disabled={busy} value={cpuRequest} onChange={(e) => setCpuRequest(e.target.value)} className={styles.inputLg} />
 
             <span className={styles.configLabel}>CPU Limit</span>
             <div className={styles.configInline}>
-              <Input disabled={busy} value={cpuLimit} onChange={(e) => setCpuLimit(e.target.value)} placeholder="e.g. 1000" style={{ width: 80 }} />
+              <Input disabled={busy} value={cpuLimit} onChange={(e) => setCpuLimit(e.target.value)} placeholder="e.g. 1000" className={styles.inputLg} />
               <span className={styles.cellMeta}>millicores</span>
             </div>
 
@@ -443,10 +443,10 @@ function CreateAppView({ environments, selectedEnv }: { environments: Environmen
             </div>
 
             <span className={styles.configLabel}>App Port</span>
-            <Input disabled={busy} value={appPort} onChange={(e) => setAppPort(e.target.value)} style={{ width: 80 }} />
+            <Input disabled={busy} value={appPort} onChange={(e) => setAppPort(e.target.value)} className={styles.inputLg} />
 
             <span className={styles.configLabel}>Replicas</span>
-            <Input disabled={busy} value={replicas} onChange={(e) => setReplicas(e.target.value)} style={{ width: 60 }} type="number" />
+            <Input disabled={busy} value={replicas} onChange={(e) => setReplicas(e.target.value)} className={styles.inputSm} type="number" />
 
             <span className={styles.configLabel}>Deploy Strategy</span>
             <Select disabled={busy} value={deployStrategy} onChange={(e) => setDeployStrategy(e.target.value)}
@@ -551,7 +551,7 @@ function AppDetailView({ appId: appSlug, environments, selectedEnv }: { appId: s
         </div>
         <div className={styles.detailActions}>
           <input ref={fileInputRef} type="file" accept=".jar"
-            style={{ position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, overflow: 'hidden', clip: 'rect(0,0,0,0)', border: 0 }}
+            className={styles.visuallyHidden}
             onChange={handleUpload} />
           <Button size="sm" variant="primary" type="button" onClick={() => fileInputRef.current?.click()} loading={uploadJar.isPending}>Upload JAR</Button>
           <Button size="sm" variant="danger" onClick={() => setDeleteConfirm(true)}>Delete App</Button>
@@ -636,7 +636,7 @@ function OverviewSubTab({ app, deployments, versions, environments, envMap, sele
                     <Badge label={dEnv?.displayName ?? '?'} color={dEnv?.production ? 'error' : 'auto'} />
                   </td>
                   <td><Badge label={version ? `v${version.version}` : '?'} color="auto" /></td>
-                  <td style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <td className={styles.cellFlex}>
                     <StatusDot variant={DEPLOY_STATUS_DOT[d.status] ?? 'dead'} />
                     <Badge label={d.status} color={STATUS_COLORS[d.status] ?? 'auto'} />
                   </td>
@@ -962,8 +962,8 @@ function ConfigSubTab({ app, environment }: { app: App; environment?: Environmen
 
           <span className={styles.configLabel}>Max Payload Size</span>
           <div className={styles.configInline}>
-            <Input disabled={!editing} value={payloadSize} onChange={(e) => setPayloadSize(e.target.value)} style={{ width: 70 }} />
-            <Select disabled={!editing} value={payloadUnit} onChange={(e) => setPayloadUnit(e.target.value)} style={{ width: 90 }}
+            <Input disabled={!editing} value={payloadSize} onChange={(e) => setPayloadSize(e.target.value)} className={styles.inputMd} />
+            <Select disabled={!editing} value={payloadUnit} onChange={(e) => setPayloadUnit(e.target.value)} className={styles.inputXl}
               options={[{ value: 'bytes', label: 'bytes' }, { value: 'KB', label: 'KB' }, { value: 'MB', label: 'MB' }]} />
           </div>
 
@@ -980,12 +980,12 @@ function ConfigSubTab({ app, environment }: { app: App; environment?: Environmen
             <Toggle checked={metricsEnabled} onChange={() => editing && setMetricsEnabled(!metricsEnabled)} disabled={!editing} />
             <span className={metricsEnabled ? styles.toggleEnabled : styles.toggleDisabled}>{metricsEnabled ? 'Enabled' : 'Disabled'}</span>
             <span className={styles.cellMeta} style={{ marginLeft: 8 }}>Interval</span>
-            <Input disabled={!editing} value={metricsInterval} onChange={(e) => setMetricsInterval(e.target.value)} style={{ width: 50 }} />
+            <Input disabled={!editing} value={metricsInterval} onChange={(e) => setMetricsInterval(e.target.value)} className={styles.inputXs} />
             <span className={styles.cellMeta}>s</span>
           </div>
 
           <span className={styles.configLabel}>Sampling Rate</span>
-          <Input disabled={!editing} value={samplingRate} onChange={(e) => setSamplingRate(e.target.value)} style={{ width: 80 }} />
+          <Input disabled={!editing} value={samplingRate} onChange={(e) => setSamplingRate(e.target.value)} className={styles.inputLg} />
 
           <span className={styles.configLabel}>Compress Success</span>
           <div className={styles.configInline}>
@@ -1032,25 +1032,25 @@ function ConfigSubTab({ app, environment }: { app: App; environment?: Environmen
           <div className={styles.configGrid}>
             <span className={styles.configLabel}>Memory Limit</span>
             <div className={styles.configInline}>
-              <Input disabled={!editing} value={memoryLimit} onChange={(e) => setMemoryLimit(e.target.value)} style={{ width: 80 }} />
+              <Input disabled={!editing} value={memoryLimit} onChange={(e) => setMemoryLimit(e.target.value)} className={styles.inputLg} />
               <span className={styles.cellMeta}>MB</span>
             </div>
 
             <span className={styles.configLabel}>Memory Reserve</span>
             <div>
               <div className={styles.configInline}>
-                <Input disabled value={memoryReserve} onChange={(e) => setMemoryReserve(e.target.value)} placeholder="---" style={{ width: 80 }} />
+                <Input disabled value={memoryReserve} onChange={(e) => setMemoryReserve(e.target.value)} placeholder="---" className={styles.inputLg} />
                 <span className={styles.cellMeta}>MB</span>
               </div>
               {!isProd && <span className={styles.configHint}>Available in production environments only</span>}
             </div>
 
             <span className={styles.configLabel}>CPU Request</span>
-            <Input disabled={!editing} value={cpuRequest} onChange={(e) => setCpuRequest(e.target.value)} style={{ width: 80 }} />
+            <Input disabled={!editing} value={cpuRequest} onChange={(e) => setCpuRequest(e.target.value)} className={styles.inputLg} />
 
             <span className={styles.configLabel}>CPU Limit</span>
             <div className={styles.configInline}>
-              <Input disabled={!editing} value={cpuLimit} onChange={(e) => setCpuLimit(e.target.value)} placeholder="e.g. 1000" style={{ width: 80 }} />
+              <Input disabled={!editing} value={cpuLimit} onChange={(e) => setCpuLimit(e.target.value)} placeholder="e.g. 1000" className={styles.inputLg} />
               <span className={styles.cellMeta}>millicores</span>
             </div>
 
@@ -1069,10 +1069,10 @@ function ConfigSubTab({ app, environment }: { app: App; environment?: Environmen
             </div>
 
             <span className={styles.configLabel}>App Port</span>
-            <Input disabled={!editing} value={appPort} onChange={(e) => setAppPort(e.target.value)} style={{ width: 80 }} />
+            <Input disabled={!editing} value={appPort} onChange={(e) => setAppPort(e.target.value)} className={styles.inputLg} />
 
             <span className={styles.configLabel}>Replicas</span>
-            <Input disabled={!editing} value={replicas} onChange={(e) => setReplicas(e.target.value)} style={{ width: 60 }} type="number" />
+            <Input disabled={!editing} value={replicas} onChange={(e) => setReplicas(e.target.value)} className={styles.inputSm} type="number" />
 
             <span className={styles.configLabel}>Deploy Strategy</span>
             <Select disabled={!editing} value={deployStrategy} onChange={(e) => setDeployStrategy(e.target.value)}
diff --git a/ui/src/pages/Dashboard/Dashboard.module.css b/ui/src/pages/Dashboard/Dashboard.module.css
index 922860ce..dbfa5f54 100644
--- a/ui/src/pages/Dashboard/Dashboard.module.css
+++ b/ui/src/pages/Dashboard/Dashboard.module.css
@@ -34,16 +34,16 @@
   height: 18px;
   margin-left: 4px;
   border: none;
-  background: var(--bg-hover, #F5F0EA);
-  color: var(--text-secondary, #5C5347);
+  background: var(--bg-hover);
+  color: var(--text-secondary);
   border-radius: 50%;
   cursor: pointer;
   padding: 0;
 }
 
 .clearSearch:hover {
-  background: var(--border, #E4DFD8);
-  color: var(--text-primary, #1A1612);
+  background: var(--border);
+  color: var(--text-primary);
 }
 
 .tableRight {
@@ -109,8 +109,8 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #5db866;
-  box-shadow: 0 0 4px rgba(93, 184, 102, 0.4);
+  background: var(--success);
+  box-shadow: 0 0 4px color-mix(in srgb, var(--success) 40%, transparent);
   flex-shrink: 0;
 }
 
diff --git a/ui/src/pages/Dashboard/Dashboard.tsx b/ui/src/pages/Dashboard/Dashboard.tsx
index 9a472cbd..85d51ee1 100644
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -64,7 +64,7 @@ function buildBaseColumns(): Column<Row>[] {
         <span className={styles.statusCell}>
           <StatusDot variant={statusToVariant(row.status)} />
           <MonoText size="xs">{statusLabel(row.status)}</MonoText>
-          {row.hasTraceData && <Footprints size={11} color="#3D7C47" style={{ marginLeft: 2, flexShrink: 0 }} />}
+          {row.hasTraceData && <Footprints size={11} color="var(--success)" style={{ marginLeft: 2, flexShrink: 0 }} />}
           {row.isReplay && <RotateCcw size={11} color="var(--amber)" style={{ marginLeft: 2, flexShrink: 0 }} />}
         </span>
       ),
diff --git a/ui/src/pages/DashboardTab/DashboardL1.tsx b/ui/src/pages/DashboardTab/DashboardL1.tsx
index ed1fc556..ce4fac47 100644
--- a/ui/src/pages/DashboardTab/DashboardL1.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL1.tsx
@@ -29,6 +29,9 @@ import {
   type HealthStatus,
 } from './dashboard-utils';
 import styles from './DashboardTab.module.css';
+import tableStyles from '../../styles/table-section.module.css';
+import refreshStyles from '../../styles/refresh-indicator.module.css';
+import rateStyles from '../../styles/rate-colors.module.css';
 
 // ── Row type for application health table ───────────────────────────────────
 
@@ -75,7 +78,7 @@ const APP_COLUMNS: Column<AppRow>[] = [
     sortable: true,
     render: (_, row) => {
       const pct = row.successRate;
-      const cls = pct >= 99 ? styles.rateGood : pct >= 97 ? styles.rateWarn : styles.rateBad;
+      const cls = pct >= 99 ? rateStyles.rateGood : pct >= 97 ? rateStyles.rateWarn : rateStyles.rateBad;
       return <MonoText size="sm" className={cls}>{pct.toFixed(1)}%</MonoText>;
     },
   },
@@ -84,7 +87,7 @@ const APP_COLUMNS: Column<AppRow>[] = [
     header: 'P99',
     sortable: true,
     render: (_, row) => {
-      const cls = row.p99DurationMs > 300 ? styles.rateBad : row.p99DurationMs > 200 ? styles.rateWarn : styles.rateGood;
+      const cls = row.p99DurationMs > 300 ? rateStyles.rateBad : row.p99DurationMs > 200 ? rateStyles.rateWarn : rateStyles.rateGood;
       return <MonoText size="sm" className={cls}>{Math.round(row.p99DurationMs)}ms</MonoText>;
     },
   },
@@ -93,7 +96,7 @@ const APP_COLUMNS: Column<AppRow>[] = [
     header: 'SLA %',
     sortable: true,
     render: (_, row) => {
-      const cls = row.slaCompliance >= 99 ? styles.rateGood : row.slaCompliance >= 95 ? styles.rateWarn : styles.rateBad;
+      const cls = row.slaCompliance >= 99 ? rateStyles.rateGood : row.slaCompliance >= 95 ? rateStyles.rateWarn : rateStyles.rateBad;
       return <MonoText size="sm" className={cls}>{formatSlaCompliance(row.slaCompliance)}</MonoText>;
     },
   },
@@ -102,7 +105,7 @@ const APP_COLUMNS: Column<AppRow>[] = [
     header: 'Errors',
     sortable: true,
     render: (_, row) => {
-      const cls = row.errorCount > 10 ? styles.rateBad : row.errorCount > 0 ? styles.rateWarn : styles.rateGood;
+      const cls = row.errorCount > 10 ? rateStyles.rateBad : row.errorCount > 0 ? rateStyles.rateWarn : rateStyles.rateGood;
       return <MonoText size="sm" className={cls}>{row.errorCount.toLocaleString()}</MonoText>;
     },
   },
@@ -399,20 +402,20 @@ export default function DashboardL1() {
 
   return (
     <div className={styles.content}>
-      <div className={styles.refreshIndicator}>
-        <span className={styles.refreshDot} />
-        <span className={styles.refreshText}>Auto-refresh: 30s</span>
+      <div className={refreshStyles.refreshIndicator}>
+        <span className={refreshStyles.refreshDot} />
+        <span className={refreshStyles.refreshText}>Auto-refresh: 30s</span>
       </div>
 
       {/* KPI header cards */}
       <KpiStrip items={kpiItems} />
 
       {/* Application Health table */}
-      <div className={styles.tableSection}>
-        <div className={styles.tableHeader}>
-          <span className={styles.tableTitle}>Application Health</span>
-          <div className={styles.tableRight}>
-            <span className={styles.tableMeta}>{appRows.length} applications</span>
+      <div className={tableStyles.tableSection}>
+        <div className={tableStyles.tableHeader}>
+          <span className={tableStyles.tableTitle}>Application Health</span>
+          <div className={tableStyles.tableRight}>
+            <span className={tableStyles.tableMeta}>{appRows.length} applications</span>
             <Badge label="ALL" color="auto" />
           </div>
         </div>
diff --git a/ui/src/pages/DashboardTab/DashboardL2.tsx b/ui/src/pages/DashboardTab/DashboardL2.tsx
index 0706bf3b..f75d8c38 100644
--- a/ui/src/pages/DashboardTab/DashboardL2.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL2.tsx
@@ -33,6 +33,9 @@ import {
   formatRelativeTime,
 } from './dashboard-utils';
 import styles from './DashboardTab.module.css';
+import tableStyles from '../../styles/table-section.module.css';
+import refreshStyles from '../../styles/refresh-indicator.module.css';
+import rateStyles from '../../styles/rate-colors.module.css';
 
 // ── Route table row type ────────────────────────────────────────────────────
 
@@ -72,7 +75,7 @@ const ROUTE_COLUMNS: Column<RouteRow>[] = [
     sortable: true,
     render: (_, row) => {
       const pct = row.successRate * 100;
-      const cls = pct >= 99 ? styles.rateGood : pct >= 97 ? styles.rateWarn : styles.rateBad;
+      const cls = pct >= 99 ? rateStyles.rateGood : pct >= 97 ? rateStyles.rateWarn : rateStyles.rateBad;
       return <MonoText size="sm" className={cls}>{pct.toFixed(1)}%</MonoText>;
     },
   },
@@ -89,7 +92,7 @@ const ROUTE_COLUMNS: Column<RouteRow>[] = [
     header: 'P99(ms)',
     sortable: true,
     render: (_, row) => {
-      const cls = row.p99DurationMs > 300 ? styles.rateBad : row.p99DurationMs > 200 ? styles.rateWarn : styles.rateGood;
+      const cls = row.p99DurationMs > 300 ? rateStyles.rateBad : row.p99DurationMs > 200 ? rateStyles.rateWarn : rateStyles.rateGood;
       return <MonoText size="sm" className={cls}>{Math.round(row.p99DurationMs)}</MonoText>;
     },
   },
@@ -98,7 +101,7 @@ const ROUTE_COLUMNS: Column<RouteRow>[] = [
     header: 'SLA%',
     sortable: true,
     render: (_, row) => {
-      const cls = row.slaCompliance >= 99 ? styles.rateGood : row.slaCompliance >= 95 ? styles.rateWarn : styles.rateBad;
+      const cls = row.slaCompliance >= 99 ? rateStyles.rateGood : row.slaCompliance >= 95 ? rateStyles.rateWarn : rateStyles.rateBad;
       return <MonoText size="sm" className={cls}>{formatSlaCompliance(row.slaCompliance)}</MonoText>;
     },
   },
@@ -146,9 +149,9 @@ const ERROR_COLUMNS: Column<ErrorRow>[] = [
     sortable: true,
     render: (_, row) => {
       const arrow = trendArrow(row.trend);
-      const cls = row.trend === 'accelerating' ? styles.rateBad
-        : row.trend === 'decelerating' ? styles.rateGood
-        : styles.rateNeutral;
+      const cls = row.trend === 'accelerating' ? rateStyles.rateBad
+        : row.trend === 'decelerating' ? rateStyles.rateGood
+        : rateStyles.rateNeutral;
       return <MonoText size="sm" className={cls}>{row.velocity.toFixed(1)}/min {arrow}</MonoText>;
     },
   },
@@ -364,20 +367,20 @@ export default function DashboardL2() {
 
   return (
     <div className={styles.content}>
-      <div className={styles.refreshIndicator}>
-        <span className={styles.refreshDot} />
-        <span className={styles.refreshText}>Auto-refresh: 30s</span>
+      <div className={refreshStyles.refreshIndicator}>
+        <span className={refreshStyles.refreshDot} />
+        <span className={refreshStyles.refreshText}>Auto-refresh: 30s</span>
       </div>
 
       {/* KPI Strip */}
       <KpiStrip items={kpiItems} />
 
       {/* Route Performance Table */}
-      <div className={styles.tableSection}>
-        <div className={styles.tableHeader}>
-          <span className={styles.tableTitle}>Route Performance</span>
-          <div className={styles.tableRight}>
-            <span className={styles.tableMeta}>{routeRows.length} routes</span>
+      <div className={tableStyles.tableSection}>
+        <div className={tableStyles.tableHeader}>
+          <span className={tableStyles.tableTitle}>Route Performance</span>
+          <div className={tableStyles.tableRight}>
+            <span className={tableStyles.tableMeta}>{routeRows.length} routes</span>
             <Badge label="AUTO" color="success" />
           </div>
         </div>
@@ -416,9 +419,9 @@ export default function DashboardL2() {
       {/* Top 5 Errors — hidden when empty */}
       {errorRows.length > 0 && (
         <div className={styles.errorsSection}>
-          <div className={styles.tableHeader}>
-            <span className={styles.tableTitle}>Top Errors</span>
-            <span className={styles.tableMeta}>{errorRows.length} error types</span>
+          <div className={tableStyles.tableHeader}>
+            <span className={tableStyles.tableTitle}>Top Errors</span>
+            <span className={tableStyles.tableMeta}>{errorRows.length} error types</span>
           </div>
           <DataTable
             columns={ERROR_COLUMNS}
diff --git a/ui/src/pages/DashboardTab/DashboardL3.tsx b/ui/src/pages/DashboardTab/DashboardL3.tsx
index 034e7eae..8ddf427e 100644
--- a/ui/src/pages/DashboardTab/DashboardL3.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL3.tsx
@@ -25,6 +25,9 @@ import {
   trendIndicator,
 } from './dashboard-utils';
 import styles from './DashboardTab.module.css';
+import tableStyles from '../../styles/table-section.module.css';
+import refreshStyles from '../../styles/refresh-indicator.module.css';
+import rateStyles from '../../styles/rate-colors.module.css';
 
 // ── Row types ───────────────────────────────────────────────────────────────
 
@@ -80,10 +83,10 @@ const PROCESSOR_COLUMNS: Column<ProcessorRow>[] = [
     sortable: true,
     render: (_, row) => {
       const cls = row.p99DurationMs > 300
-        ? styles.rateBad
+        ? rateStyles.rateBad
         : row.p99DurationMs > 200
-          ? styles.rateWarn
-          : styles.rateGood;
+          ? rateStyles.rateWarn
+          : rateStyles.rateGood;
       return <MonoText size="sm" className={cls}>{Math.round(row.p99DurationMs)}</MonoText>;
     },
   },
@@ -93,7 +96,7 @@ const PROCESSOR_COLUMNS: Column<ProcessorRow>[] = [
     sortable: true,
     render: (_, row) => {
       const pct = row.errorRate * 100;
-      const cls = pct > 5 ? styles.rateBad : pct > 1 ? styles.rateWarn : styles.rateGood;
+      const cls = pct > 5 ? rateStyles.rateBad : pct > 1 ? rateStyles.rateWarn : rateStyles.rateGood;
       return <MonoText size="sm" className={cls}>{pct.toFixed(2)}%</MonoText>;
     },
   },
@@ -347,9 +350,9 @@ export default function DashboardL3() {
 
   return (
     <div className={styles.content}>
-      <div className={styles.refreshIndicator}>
-        <span className={styles.refreshDot} />
-        <span className={styles.refreshText}>Auto-refresh: 30s</span>
+      <div className={refreshStyles.refreshIndicator}>
+        <span className={refreshStyles.refreshDot} />
+        <span className={refreshStyles.refreshText}>Auto-refresh: 30s</span>
       </div>
 
       {/* KPI Strip */}
@@ -398,11 +401,11 @@ export default function DashboardL3() {
       )}
 
       {/* Processor Metrics Table */}
-      <div className={styles.tableSection}>
-        <div className={styles.tableHeader}>
-          <span className={styles.tableTitle}>Processor Metrics</span>
+      <div className={tableStyles.tableSection}>
+        <div className={tableStyles.tableHeader}>
+          <span className={tableStyles.tableTitle}>Processor Metrics</span>
           <div>
-            <span className={styles.tableMeta}>
+            <span className={tableStyles.tableMeta}>
               {processorRows.length} processor{processorRows.length !== 1 ? 's' : ''}
             </span>
           </div>
@@ -417,8 +420,8 @@ export default function DashboardL3() {
       {/* Top 5 Errors — hidden if empty */}
       {errorRows.length > 0 && (
         <div className={styles.errorsSection}>
-          <div className={styles.tableHeader}>
-            <span className={styles.tableTitle}>Top 5 Errors</span>
+          <div className={tableStyles.tableHeader}>
+            <span className={tableStyles.tableTitle}>Top 5 Errors</span>
             <Badge label={`${errorRows.length}`} color="error" />
           </div>
           <DataTable
diff --git a/ui/src/pages/DashboardTab/DashboardPage.tsx b/ui/src/pages/DashboardTab/DashboardPage.tsx
index 7c3e7908..fb2351c6 100644
--- a/ui/src/pages/DashboardTab/DashboardPage.tsx
+++ b/ui/src/pages/DashboardTab/DashboardPage.tsx
@@ -1,21 +1,19 @@
 import { useParams } from 'react-router';
 import { lazy, Suspense } from 'react';
-import { Spinner } from '@cameleer/design-system';
+import { PageLoader } from '../../components/PageLoader';
 
 const DashboardL1 = lazy(() => import('./DashboardL1'));
 const DashboardL2 = lazy(() => import('./DashboardL2'));
 const DashboardL3 = lazy(() => import('./DashboardL3'));
 
-const Fallback = <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}><Spinner size="lg" /></div>;
-
 export default function DashboardPage() {
   const { appId, routeId } = useParams<{ appId?: string; routeId?: string }>();
 
   if (routeId && appId) {
-    return <Suspense fallback={Fallback}><DashboardL3 /></Suspense>;
+    return <Suspense fallback={<PageLoader />}><DashboardL3 /></Suspense>;
   }
   if (appId) {
-    return <Suspense fallback={Fallback}><DashboardL2 /></Suspense>;
+    return <Suspense fallback={<PageLoader />}><DashboardL2 /></Suspense>;
   }
-  return <Suspense fallback={Fallback}><DashboardL1 /></Suspense>;
+  return <Suspense fallback={<PageLoader />}><DashboardL1 /></Suspense>;
 }
diff --git a/ui/src/pages/DashboardTab/DashboardTab.module.css b/ui/src/pages/DashboardTab/DashboardTab.module.css
index 468910c3..c6304a61 100644
--- a/ui/src/pages/DashboardTab/DashboardTab.module.css
+++ b/ui/src/pages/DashboardTab/DashboardTab.module.css
@@ -8,61 +8,6 @@
   padding-bottom: 20px;
 }
 
-.refreshIndicator {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  justify-content: flex-end;
-}
-
-.refreshDot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--success);
-  box-shadow: 0 0 4px rgba(61, 124, 71, 0.5);
-  animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.refreshText {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-}
-
-/* Tables */
-.tableSection {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  overflow: hidden;
-}
-
-.tableHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.tableTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.tableMeta {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-}
 
 /* Charts */
 .chartGrid {
@@ -92,12 +37,6 @@
   text-decoration: underline;
 }
 
-/* Rate coloring */
-.rateGood { color: var(--success); }
-.rateWarn { color: var(--warning); }
-.rateBad { color: var(--error); }
-.rateNeutral { color: var(--text-secondary); }
-
 /* Diagram container */
 .diagramSection {
   background: var(--bg-surface);
@@ -108,13 +47,6 @@
   height: 280px;
 }
 
-/* Table right side (meta + badge) */
-.tableRight {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
 /* Chart fill */
 .chart {
   width: 100%;
diff --git a/ui/src/pages/Exchanges/ExchangeHeader.module.css b/ui/src/pages/Exchanges/ExchangeHeader.module.css
index dd1dd838..bb5a13d9 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.module.css
+++ b/ui/src/pages/Exchanges/ExchangeHeader.module.css
@@ -5,7 +5,7 @@
   flex-direction: column;
   gap: 0;
   border-bottom: 1px solid var(--border);
-  background: var(--bg-raised, var(--surface));
+  background: var(--bg-raised);
   flex-shrink: 0;
 }
 
diff --git a/ui/src/pages/Routes/RouteDetail.module.css b/ui/src/pages/Routes/RouteDetail.module.css
index 5d54942a..194d87ff 100644
--- a/ui/src/pages/Routes/RouteDetail.module.css
+++ b/ui/src/pages/Routes/RouteDetail.module.css
@@ -136,23 +136,6 @@
   margin-top: 20px;
 }
 
-/* Rate color classes */
-.rateGood {
-  color: var(--success);
-}
-
-.rateWarn {
-  color: var(--warning);
-}
-
-.rateBad {
-  color: var(--error);
-}
-
-.rateNeutral {
-  color: var(--text-secondary);
-}
-
 /* Route name in table */
 .routeNameCell {
   font-size: 12px;
@@ -161,42 +144,10 @@
   font-family: var(--font-mono);
 }
 
-/* Table section (reused for processor table) */
 .tableSection {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  overflow: hidden;
   margin-bottom: 20px;
 }
 
-.tableHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.tableTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.tableRight {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.tableMeta {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-}
-
 /* Chart grid */
 .chartGrid {
   display: grid;
@@ -204,15 +155,6 @@
   gap: 16px;
 }
 
-.chartCard {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  padding: 16px;
-  overflow: hidden;
-}
-
 .chartTitle {
   font-size: 12px;
   font-weight: 700;
@@ -370,35 +312,6 @@
   font-size: 12px;
 }
 
-.typeSelector {
-  display: flex;
-  gap: 8px;
-}
-
-.typeOption {
-  padding: 4px 12px;
-  border-radius: var(--radius-sm);
-  font-size: 12px;
-  cursor: pointer;
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-surface);
-  color: var(--text-muted);
-  font-family: var(--font-body);
-  transition: all 0.15s ease;
-}
-
-.typeOption:hover {
-  border-color: var(--border);
-  color: var(--text-secondary);
-}
-
-.typeOptionActive {
-  background: var(--amber-bg);
-  color: var(--amber-deep);
-  border-color: var(--amber);
-  font-weight: 600;
-}
-
 .tapModalFooter {
   display: flex;
   justify-content: flex-end;
@@ -408,56 +321,3 @@
   border-top: 1px solid var(--border-subtle);
 }
 
-/* Test expression */
-.testSection {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.testTabs {
-  display: flex;
-  gap: 4px;
-}
-
-.testTabBtn {
-  padding: 4px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  cursor: pointer;
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-surface);
-  color: var(--text-muted);
-}
-
-.testTabBtnActive {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-  border-color: var(--text-muted);
-}
-
-.testBody {
-  margin-top: 4px;
-}
-
-.testResult {
-  padding: 10px 14px;
-  border-radius: var(--radius-md);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  margin-top: 8px;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.testSuccess {
-  background: var(--success-bg);
-  border: 1px solid var(--success-border);
-  color: var(--success);
-}
-
-.testError {
-  background: var(--error-bg);
-  border: 1px solid var(--error-border);
-  color: var(--error);
-}
diff --git a/ui/src/pages/Routes/RouteDetail.tsx b/ui/src/pages/Routes/RouteDetail.tsx
index c0af7b37..41eef5f2 100644
--- a/ui/src/pages/Routes/RouteDetail.tsx
+++ b/ui/src/pages/Routes/RouteDetail.tsx
@@ -36,6 +36,10 @@ import type { ExecutionSummary } from '../../api/types';
 import type { CatalogApp, CatalogRoute } from '../../api/queries/catalog';
 import { buildFlowSegments } from '../../utils/diagram-mapping';
 import styles from './RouteDetail.module.css';
+import tableStyles from '../../styles/table-section.module.css';
+import rateStyles from '../../styles/rate-colors.module.css';
+import chartCardStyles from '../../styles/chart-card.module.css';
+import tapModalStyles from '../../components/TapConfigModal.module.css';
 
 // ── Row types ────────────────────────────────────────────────────────────────
 
@@ -714,11 +718,11 @@ export default function RouteDetail() {
       </div>
 
       {/* Processor Performance table (full width) */}
-      <div className={styles.tableSection}>
-        <div className={styles.tableHeader}>
-          <span className={styles.tableTitle}>Processor Performance</span>
-          <div className={styles.tableRight}>
-            <span className={styles.tableMeta}>{processorRows.length} processors</span>
+      <div className={`${tableStyles.tableSection} ${styles.tableSection}`}>
+        <div className={tableStyles.tableHeader}>
+          <span className={tableStyles.tableTitle}>Processor Performance</span>
+          <div className={tableStyles.tableRight}>
+            <span className={tableStyles.tableMeta}>{processorRows.length} processors</span>
             <Badge label="AUTO" color="success" />
           </div>
         </div>
@@ -732,8 +736,8 @@ export default function RouteDetail() {
       {/* Route Flow section */}
       {diagramFlows.length > 0 && (
         <div className={styles.routeFlowSection}>
-          <div className={styles.tableHeader}>
-            <span className={styles.tableTitle}>Route Flow</span>
+          <div className={tableStyles.tableHeader}>
+            <span className={tableStyles.tableTitle}>Route Flow</span>
           </div>
           <RouteFlow flows={diagramFlows} />
         </div>
@@ -745,7 +749,7 @@ export default function RouteDetail() {
 
         {activeTab === 'performance' && (
           <div className={styles.chartGrid} style={{ marginTop: 16 }}>
-            <div className={styles.chartCard}>
+            <div className={chartCardStyles.chartCard}>
               <div className={styles.chartTitle}>Throughput</div>
               <AreaChart
                 series={[{
@@ -755,7 +759,7 @@ export default function RouteDetail() {
                 height={200}
               />
             </div>
-            <div className={styles.chartCard}>
+            <div className={chartCardStyles.chartCard}>
               <div className={styles.chartTitle}>Latency</div>
               <LineChart
                 series={[{
@@ -766,7 +770,7 @@ export default function RouteDetail() {
                 threshold={{ value: 300, label: 'SLA 300ms' }}
               />
             </div>
-            <div className={styles.chartCard}>
+            <div className={chartCardStyles.chartCard}>
               <div className={styles.chartTitle}>Errors</div>
               <BarChart
                 series={[{
@@ -776,7 +780,7 @@ export default function RouteDetail() {
                 height={200}
               />
             </div>
-            <div className={styles.chartCard}>
+            <div className={chartCardStyles.chartCard}>
               <div className={styles.chartTitle}>Success Rate</div>
               <AreaChart
                 series={[{
@@ -890,13 +894,13 @@ export default function RouteDetail() {
           </FormField>
 
           <FormField label="Type">
-            <div className={styles.typeSelector}>
+            <div className={tapModalStyles.typeSelector}>
               {typeChoices.map(tc => (
                 <button
                   key={tc.value}
                   type="button"
                   title={tc.tooltip}
-                  className={`${styles.typeOption} ${tapType === tc.value ? styles.typeOptionActive : ''}`}
+                  className={`${tapModalStyles.typeOption} ${tapType === tc.value ? tapModalStyles.typeOptionActive : ''}`}
                   onClick={() => setTapType(tc.value)}
                 >
                   {tc.label}
@@ -913,18 +917,18 @@ export default function RouteDetail() {
 
           {/* Test Expression */}
           <Collapsible title="Test Expression" defaultOpen>
-            <div className={styles.testSection}>
-              <div className={styles.testTabs}>
+            <div className={tapModalStyles.testSection}>
+              <div className={tapModalStyles.testTabs}>
                 <button
                   type="button"
-                  className={`${styles.testTabBtn} ${testTab === 'recent' ? styles.testTabBtnActive : ''}`}
+                  className={`${tapModalStyles.testTabBtn} ${testTab === 'recent' ? tapModalStyles.testTabBtnActive : ''}`}
                   onClick={() => setTestTab('recent')}
                 >
                   Recent Exchange
                 </button>
                 <button
                   type="button"
-                  className={`${styles.testTabBtn} ${testTab === 'custom' ? styles.testTabBtnActive : ''}`}
+                  className={`${tapModalStyles.testTabBtn} ${testTab === 'custom' ? tapModalStyles.testTabBtnActive : ''}`}
                   onClick={() => setTestTab('custom')}
                 >
                   Custom Payload
@@ -932,7 +936,7 @@ export default function RouteDetail() {
               </div>
 
               {testTab === 'recent' && (
-                <div className={styles.testBody}>
+                <div className={tapModalStyles.testBody}>
                   <Select
                     options={recentExchangeOptions.length > 0 ? recentExchangeOptions : [{ value: '', label: 'No recent exchanges' }]}
                     value={testExchangeId}
@@ -942,7 +946,7 @@ export default function RouteDetail() {
               )}
 
               {testTab === 'custom' && (
-                <div className={styles.testBody}>
+                <div className={tapModalStyles.testBody}>
                   <Textarea
                     className={styles.monoTextarea}
                     value={testPayload}
@@ -953,7 +957,7 @@ export default function RouteDetail() {
                 </div>
               )}
 
-              <div className={styles.testBody}>
+              <div className={tapModalStyles.testBody}>
                 <Button
                   variant="secondary"
                   size="sm"
@@ -966,7 +970,7 @@ export default function RouteDetail() {
               </div>
 
               {testResult && (
-                <div className={`${styles.testResult} ${testResult.error ? styles.testError : styles.testSuccess}`}>
+                <div className={`${tapModalStyles.testResult} ${testResult.error ? tapModalStyles.testError : tapModalStyles.testSuccess}`}>
                   {testResult.error ?? testResult.result ?? 'No result'}
                 </div>
               )}
diff --git a/ui/src/pages/Routes/RoutesMetrics.module.css b/ui/src/pages/Routes/RoutesMetrics.module.css
index 01b72cca..1f3cd65c 100644
--- a/ui/src/pages/Routes/RoutesMetrics.module.css
+++ b/ui/src/pages/Routes/RoutesMetrics.module.css
@@ -5,68 +5,6 @@
   gap: 20px;
 }
 
-.refreshIndicator {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  justify-content: flex-end;
-}
-
-.refreshDot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--success);
-  box-shadow: 0 0 4px rgba(61, 124, 71, 0.5);
-  animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.refreshText {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-}
-
-/* Route performance table */
-.tableSection {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  overflow: hidden;
-}
-
-.tableHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.tableTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.tableRight {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.tableMeta {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-}
-
 /* Route name in table */
 .routeNameCell {
   font-size: 12px;
@@ -81,23 +19,6 @@
   color: var(--text-secondary);
 }
 
-/* Rate color classes */
-.rateGood {
-  color: var(--success);
-}
-
-.rateWarn {
-  color: var(--warning);
-}
-
-.rateBad {
-  color: var(--error);
-}
-
-.rateNeutral {
-  color: var(--text-secondary);
-}
-
 /* 2x2 chart grid */
 .chartGrid {
   display: grid;
diff --git a/ui/src/pages/Routes/RoutesMetrics.tsx b/ui/src/pages/Routes/RoutesMetrics.tsx
index 1e54bc42..5717de3a 100644
--- a/ui/src/pages/Routes/RoutesMetrics.tsx
+++ b/ui/src/pages/Routes/RoutesMetrics.tsx
@@ -17,6 +17,9 @@ import { useRouteMetrics } from '../../api/queries/catalog';
 import { useExecutionStats, useStatsTimeseries } from '../../api/queries/executions';
 import type { RouteMetrics } from '../../api/types';
 import styles from './RoutesMetrics.module.css';
+import tableStyles from '../../styles/table-section.module.css';
+import refreshStyles from '../../styles/refresh-indicator.module.css';
+import rateStyles from '../../styles/rate-colors.module.css';
 
 interface RouteRow {
   id: string;
@@ -64,7 +67,7 @@ const ROUTE_COLUMNS: Column<RouteRow>[] = [
     sortable: true,
     render: (_, row) => {
       const pct = row.successRate * 100;
-      const cls = pct >= 99 ? styles.rateGood : pct >= 97 ? styles.rateWarn : styles.rateBad;
+      const cls = pct >= 99 ? rateStyles.rateGood : pct >= 97 ? rateStyles.rateWarn : rateStyles.rateBad;
       return <MonoText size="sm" className={cls}>{pct.toFixed(1)}%</MonoText>;
     },
   },
@@ -81,7 +84,7 @@ const ROUTE_COLUMNS: Column<RouteRow>[] = [
     header: 'p99 Duration',
     sortable: true,
     render: (_, row) => {
-      const cls = row.p99DurationMs > 300 ? styles.rateBad : row.p99DurationMs > 200 ? styles.rateWarn : styles.rateGood;
+      const cls = row.p99DurationMs > 300 ? rateStyles.rateBad : row.p99DurationMs > 200 ? rateStyles.rateWarn : rateStyles.rateGood;
       return <MonoText size="sm" className={cls}>{Math.round(row.p99DurationMs)}ms</MonoText>;
     },
   },
@@ -91,7 +94,7 @@ const ROUTE_COLUMNS: Column<RouteRow>[] = [
     sortable: true,
     render: (_, row) => {
       const pct = row.errorRate * 100;
-      const cls = pct > 5 ? styles.rateBad : pct > 1 ? styles.rateWarn : styles.rateGood;
+      const cls = pct > 5 ? rateStyles.rateBad : pct > 1 ? rateStyles.rateWarn : rateStyles.rateGood;
       return <MonoText size="sm" className={cls}>{pct.toFixed(1)}%</MonoText>;
     },
   },
@@ -281,20 +284,20 @@ export default function RoutesMetrics() {
 
   return (
     <div className={styles.content}>
-      <div className={styles.refreshIndicator}>
-        <span className={styles.refreshDot} />
-        <span className={styles.refreshText}>Auto-refresh: 30s</span>
+      <div className={refreshStyles.refreshIndicator}>
+        <span className={refreshStyles.refreshDot} />
+        <span className={refreshStyles.refreshText}>Auto-refresh: 30s</span>
       </div>
 
       {/* KPI header cards */}
       <KpiStrip items={kpiItems} />
 
       {/* Per-route performance table */}
-      <div className={styles.tableSection}>
-        <div className={styles.tableHeader}>
-          <span className={styles.tableTitle}>Per-Route Performance</span>
-          <div className={styles.tableRight}>
-            <span className={styles.tableMeta}>{rows.length} routes</span>
+      <div className={tableStyles.tableSection}>
+        <div className={tableStyles.tableHeader}>
+          <span className={tableStyles.tableTitle}>Per-Route Performance</span>
+          <div className={tableStyles.tableRight}>
+            <span className={tableStyles.tableMeta}>{rows.length} routes</span>
             <Badge label="AUTO" color="success" />
           </div>
         </div>
diff --git a/ui/src/pages/RuntimeTab/RuntimePage.tsx b/ui/src/pages/RuntimeTab/RuntimePage.tsx
index a55a4c86..b2c4c2cc 100644
--- a/ui/src/pages/RuntimeTab/RuntimePage.tsx
+++ b/ui/src/pages/RuntimeTab/RuntimePage.tsx
@@ -1,17 +1,15 @@
 import { useParams } from 'react-router';
 import { lazy, Suspense } from 'react';
-import { Spinner } from '@cameleer/design-system';
+import { PageLoader } from '../../components/PageLoader';
 
 const AgentHealth = lazy(() => import('../AgentHealth/AgentHealth'));
 const AgentInstance = lazy(() => import('../AgentInstance/AgentInstance'));
 
-const Fallback = <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}><Spinner size="lg" /></div>;
-
 export default function RuntimePage() {
   const { instanceId } = useParams<{ appId?: string; instanceId?: string }>();
 
   if (instanceId) {
-    return <Suspense fallback={Fallback}><AgentInstance /></Suspense>;
+    return <Suspense fallback={<PageLoader />}><AgentInstance /></Suspense>;
   }
-  return <Suspense fallback={Fallback}><AgentHealth /></Suspense>;
+  return <Suspense fallback={<PageLoader />}><AgentHealth /></Suspense>;
 }
diff --git a/ui/src/router.tsx b/ui/src/router.tsx
index bb008348..f4ec8b66 100644
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -6,7 +6,7 @@ import { OidcCallback } from './auth/OidcCallback';
 import { LayoutShell } from './components/LayoutShell';
 import { config } from './config';
 import { lazy, Suspense } from 'react';
-import { Spinner } from '@cameleer/design-system';
+import { PageLoader } from './components/PageLoader';
 
 const ExchangesPage = lazy(() => import('./pages/Exchanges/ExchangesPage'));
 const DashboardPage = lazy(() => import('./pages/DashboardTab/DashboardPage'));
@@ -23,7 +23,7 @@ const SwaggerPage = lazy(() => import('./pages/Swagger/SwaggerPage'));
 
 function SuspenseWrapper({ children }: { children: React.ReactNode }) {
   return (
-    <Suspense fallback={<div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}><Spinner size="lg" /></div>}>
+    <Suspense fallback={<PageLoader />}>
       {children}
     </Suspense>
   );
diff --git a/ui/src/styles/chart-card.module.css b/ui/src/styles/chart-card.module.css
new file mode 100644
index 00000000..1eea0406
--- /dev/null
+++ b/ui/src/styles/chart-card.module.css
@@ -0,0 +1,8 @@
+.chartCard {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  padding: 16px;
+  overflow: hidden;
+}
diff --git a/ui/src/styles/log-panel.module.css b/ui/src/styles/log-panel.module.css
new file mode 100644
index 00000000..143d84da
--- /dev/null
+++ b/ui/src/styles/log-panel.module.css
@@ -0,0 +1,112 @@
+.logCard {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 420px;
+}
+
+.logHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.logToolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-surface);
+}
+
+.logSearchWrap {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.logSearchInput {
+  width: 100%;
+  padding: 5px 28px 5px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: var(--bg-body);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: var(--font-body);
+  outline: none;
+}
+
+.logSearchInput:focus {
+  border-color: var(--amber);
+}
+
+.logSearchInput::placeholder {
+  color: var(--text-faint);
+}
+
+.logSearchClear {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.logClearFilters {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 2px 6px;
+  white-space: nowrap;
+}
+
+.logClearFilters:hover {
+  color: var(--text-primary);
+}
+
+.logEmpty {
+  padding: 24px;
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 12px;
+}
+
+.sortBtn,
+.refreshBtn {
+  background: none;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 6px;
+  line-height: 1;
+}
+
+.sortBtn:hover,
+.refreshBtn:hover {
+  color: var(--text-primary);
+  border-color: var(--amber);
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
diff --git a/ui/src/styles/rate-colors.module.css b/ui/src/styles/rate-colors.module.css
new file mode 100644
index 00000000..e8271305
--- /dev/null
+++ b/ui/src/styles/rate-colors.module.css
@@ -0,0 +1,4 @@
+.rateGood { color: var(--success); }
+.rateWarn { color: var(--warning); }
+.rateBad { color: var(--error); }
+.rateNeutral { color: var(--text-secondary); }
diff --git a/ui/src/styles/refresh-indicator.module.css b/ui/src/styles/refresh-indicator.module.css
new file mode 100644
index 00000000..819db493
--- /dev/null
+++ b/ui/src/styles/refresh-indicator.module.css
@@ -0,0 +1,26 @@
+.refreshIndicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: flex-end;
+}
+
+.refreshDot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 4px color-mix(in srgb, var(--success) 50%, transparent);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.refreshText {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
diff --git a/ui/src/styles/section-card.module.css b/ui/src/styles/section-card.module.css
new file mode 100644
index 00000000..03fe35ea
--- /dev/null
+++ b/ui/src/styles/section-card.module.css
@@ -0,0 +1,11 @@
+.section {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  padding: 16px 20px;
+}
diff --git a/ui/src/styles/table-section.module.css b/ui/src/styles/table-section.module.css
new file mode 100644
index 00000000..c46b3603
--- /dev/null
+++ b/ui/src/styles/table-section.module.css
@@ -0,0 +1,33 @@
+.tableSection {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.tableHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.tableTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.tableMeta {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+.tableRight {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}