From 2fcbed21119d9aed6bde6ed79ace6262a9701161 Mon Sep 17 00:00:00 2001
From: David Gelberg <57605064+mousberg@users.noreply.github.com>
Date: Sun, 25 Jan 2026 12:29:25 +0000
Subject: [PATCH] UI: refresh dashboard design system (#1786)

* UI: refresh dashboard design system

- Typography: swap Inter for Space Grotesk (geometric, techy)
- Colors: punchier accent red, add teal secondary, warmer darks
- Cards: better shadows, hover lift effect, increased padding
- Stats: uppercase labels, larger bold values
- Buttons: hover lift micro-interaction, glow on primary
- Status dots: glow effects and subtle pulse animation
- Callouts: gradient backgrounds for depth
- Navigation: active state accent bar indicator
- Layout: more breathing room, bolder page titles

* UI: remove nav active bar indicator

* UI: hide nav scrollbar, remove nav border

* fix: add changelog entry for dashboard refresh (#1786) (thanks @mousberg)

---------

Co-authored-by: Peter Steinberger <steipete@gmail.com>
---
 CHANGELOG.md                 |   1 +
 ui/src/styles/base.css       | 285 ++++++++++++++++++++---------------
 ui/src/styles/components.css | 108 ++++++++-----
 ui/src/styles/layout.css     |  46 +++---
 4 files changed, 264 insertions(+), 176 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7f0b9f221..d52378f68 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ Docs: https://docs.clawd.bot
 - TTS: add auto mode enum (off/always/inbound/tagged) with per-session `/tts` override. (#1667) Thanks @sebslight. https://docs.clawd.bot/tts
 - Channels: add LINE plugin (Messaging API) with rich replies, quick replies, and plugin HTTP registry. (#1630) Thanks @plum-dawg.
 - Dev: add prek pre-commit hooks + dependabot config for weekly updates. (#1720) Thanks @dguido.
+- UI: refresh Control UI dashboard design system (typography, colors, spacing). (#1786) Thanks @mousberg.
 - Docs: expand FAQ (migration, scheduling, concurrency, model recommendations, OpenAI subscription auth, Pi sizing, hackable install, docs SSL workaround).
 - Docs: add verbose installer troubleshooting guidance.
 - Docs: add macOS VM guide with local/hosted options + VPS/nodes guidance. (#1693) Thanks @f-trycua.
diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css
index 82b7b0ffb..7baab70a2 100644
--- a/ui/src/styles/base.css
+++ b/ui/src/styles/base.css
@@ -1,171 +1,188 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
 
 :root {
-  /* Background - Deep Navy Slate */
-  --bg: #0c0d12;
-  --bg-accent: #0d0e14;
-  --bg-elevated: #181a21;
-  --bg-hover: #252830;
-  --bg-muted: #252830;
+  /* Background - Warmer dark with depth */
+  --bg: #12141a;
+  --bg-accent: #14161d;
+  --bg-elevated: #1a1d25;
+  --bg-hover: #262a35;
+  --bg-muted: #262a35;
 
-  /* Card / Surface */
-  --card: #13151c;
-  --card-foreground: #f8fafc;
-  --card-highlight: rgba(255, 255, 255, 0.04);
-  --popover: #13151c;
-  --popover-foreground: #f8fafc;
+  /* Card / Surface - More contrast between levels */
+  --card: #181b22;
+  --card-foreground: #f4f4f5;
+  --card-highlight: rgba(255, 255, 255, 0.05);
+  --popover: #181b22;
+  --popover-foreground: #f4f4f5;
 
   /* Panel */
-  --panel: #0c0d12;
-  --panel-strong: #181a21;
-  --panel-hover: #252830;
-  --chrome: rgba(12, 13, 18, 0.95);
-  --chrome-strong: rgba(12, 13, 18, 0.98);
+  --panel: #12141a;
+  --panel-strong: #1a1d25;
+  --panel-hover: #262a35;
+  --chrome: rgba(18, 20, 26, 0.95);
+  --chrome-strong: rgba(18, 20, 26, 0.98);
 
-  /* Text */
-  --text: #f8fafc;
-  --text-strong: #ffffff;
-  --chat-text: #f8fafc;
-  --muted: #94a3b8;
-  --muted-strong: #64748b;
-  --muted-foreground: #94a3b8;
+  /* Text - Slightly warmer */
+  --text: #e4e4e7;
+  --text-strong: #fafafa;
+  --chat-text: #e4e4e7;
+  --muted: #71717a;
+  --muted-strong: #52525b;
+  --muted-foreground: #71717a;
 
-  /* Border */
-  --border: #333842;
-  --border-strong: #454d5c;
-  --border-hover: #5a6373;
-  --input: #333842;
-  --ring: #ff4d4d;
+  /* Border - Subtle but defined */
+  --border: #27272a;
+  --border-strong: #3f3f46;
+  --border-hover: #52525b;
+  --input: #27272a;
+  --ring: #ff5c5c;
 
-  /* Accent - The signature red */
-  --accent: #ff4d4d;
-  --accent-hover: #ff6666;
-  --accent-muted: #ff4d4d;
-  --accent-subtle: rgba(255, 77, 77, 0.12);
-  --accent-foreground: #f8fafc;
-  --primary: #ff4d4d;
+  /* Accent - Punchy signature red */
+  --accent: #ff5c5c;
+  --accent-hover: #ff7070;
+  --accent-muted: #ff5c5c;
+  --accent-subtle: rgba(255, 92, 92, 0.15);
+  --accent-foreground: #fafafa;
+  --accent-glow: rgba(255, 92, 92, 0.25);
+  --primary: #ff5c5c;
   --primary-foreground: #ffffff;
 
-  /* Secondary */
-  --secondary: #252830;
-  --secondary-foreground: #f8fafc;
-  --accent-2: #3b82f6;
-  --accent-2-muted: rgba(59, 130, 246, 0.7);
+  /* Secondary - Teal accent for variety */
+  --secondary: #1e2028;
+  --secondary-foreground: #f4f4f5;
+  --accent-2: #14b8a6;
+  --accent-2-muted: rgba(20, 184, 166, 0.7);
+  --accent-2-subtle: rgba(20, 184, 166, 0.15);
 
-  /* Semantic */
+  /* Semantic - More saturated */
   --ok: #22c55e;
-  --ok-muted: rgba(34, 197, 94, 0.7);
-  --ok-subtle: rgba(34, 197, 94, 0.1);
+  --ok-muted: rgba(34, 197, 94, 0.75);
+  --ok-subtle: rgba(34, 197, 94, 0.12);
   --destructive: #ef4444;
   --destructive-foreground: #fafafa;
-  --warn: #eab308;
-  --warn-muted: rgba(234, 179, 8, 0.7);
-  --warn-subtle: rgba(234, 179, 8, 0.1);
+  --warn: #f59e0b;
+  --warn-muted: rgba(245, 158, 11, 0.75);
+  --warn-subtle: rgba(245, 158, 11, 0.12);
   --danger: #ef4444;
-  --danger-muted: rgba(239, 68, 68, 0.7);
-  --danger-subtle: rgba(239, 68, 68, 0.1);
+  --danger-muted: rgba(239, 68, 68, 0.75);
+  --danger-subtle: rgba(239, 68, 68, 0.12);
   --info: #3b82f6;
 
-  /* Focus */
-  --focus: rgba(255, 77, 77, 0.2);
+  /* Focus - With glow */
+  --focus: rgba(255, 92, 92, 0.25);
   --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring);
+  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring), 0 0 20px var(--accent-glow);
 
   /* Grid */
-  --grid-line: rgba(255, 255, 255, 0.03);
+  --grid-line: rgba(255, 255, 255, 0.04);
 
   /* Theme transition */
   --theme-switch-x: 50%;
   --theme-switch-y: 50%;
 
-  /* Typography */
+  /* Typography - Space Grotesk for personality */
   --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
-  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-body: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
-  /* Shadows - minimal */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  /* Shadows - Richer with subtle color */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03);
+  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.03);
+  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
+  --shadow-glow: 0 0 30px var(--accent-glow);
 
-  /* Radii - shadcn uses smaller radii */
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
+  /* Radii - Slightly larger for friendlier feel */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
   --radius-full: 9999px;
-  --radius: 6px;
+  --radius: 8px;
 
-  /* Transitions */
+  /* Transitions - Snappy but smooth */
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --duration-fast: 150ms;
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --duration-fast: 120ms;
   --duration-normal: 200ms;
-  --duration-slow: 300ms;
+  --duration-slow: 350ms;
 
   color-scheme: dark;
 }
 
-/* Light theme */
+/* Light theme - Clean with subtle warmth */
 :root[data-theme="light"] {
-  --bg: #f8f8f7;
-  --bg-accent: #f3f2f0;
+  --bg: #fafafa;
+  --bg-accent: #f5f5f5;
   --bg-elevated: #ffffff;
-  --bg-hover: #eae8e6;
-  --bg-muted: #eae8e6;
-  --bg-content: #f0efed;
+  --bg-hover: #f0f0f0;
+  --bg-muted: #f0f0f0;
+  --bg-content: #f5f5f5;
 
   --card: #ffffff;
-  --card-foreground: #1c1917;
-  --card-highlight: rgba(0, 0, 0, 0.04);
+  --card-foreground: #18181b;
+  --card-highlight: rgba(0, 0, 0, 0.03);
   --popover: #ffffff;
-  --popover-foreground: #1c1917;
+  --popover-foreground: #18181b;
 
-  --panel: #f8f8f7;
-  --panel-strong: #f0efed;
-  --panel-hover: #e5e3e1;
-  --chrome: rgba(248, 248, 247, 0.95);
-  --chrome-strong: rgba(248, 248, 247, 0.98);
+  --panel: #fafafa;
+  --panel-strong: #f5f5f5;
+  --panel-hover: #ebebeb;
+  --chrome: rgba(250, 250, 250, 0.95);
+  --chrome-strong: rgba(250, 250, 250, 0.98);
 
-  --text: #44403c;
-  --text-strong: #292524;
-  --chat-text: #44403c;
-  --muted: #5c5856;
-  --muted-strong: #44403c;
-  --muted-foreground: #5c5856;
+  --text: #3f3f46;
+  --text-strong: #18181b;
+  --chat-text: #3f3f46;
+  --muted: #71717a;
+  --muted-strong: #52525b;
+  --muted-foreground: #71717a;
 
-  --border: #e0dedc;
-  --border-strong: #d6d3d1;
-  --border-hover: #a8a5a0;
-  --input: #e0dedc;
+  --border: #e4e4e7;
+  --border-strong: #d4d4d8;
+  --border-hover: #a1a1aa;
+  --input: #e4e4e7;
 
-  --accent: #b91c1c;
-  --accent-hover: #dc2626;
-  --accent-muted: #b91c1c;
-  --accent-subtle: rgba(185, 28, 28, 0.18);
+  --accent: #dc2626;
+  --accent-hover: #ef4444;
+  --accent-muted: #dc2626;
+  --accent-subtle: rgba(220, 38, 38, 0.12);
   --accent-foreground: #ffffff;
-  --primary: #b91c1c;
+  --accent-glow: rgba(220, 38, 38, 0.15);
+  --primary: #dc2626;
   --primary-foreground: #ffffff;
 
-  --secondary: #eae8e6;
-  --secondary-foreground: #44403c;
+  --secondary: #f4f4f5;
+  --secondary-foreground: #3f3f46;
+  --accent-2: #0d9488;
+  --accent-2-muted: rgba(13, 148, 136, 0.75);
+  --accent-2-subtle: rgba(13, 148, 136, 0.12);
 
-  --ok: #15803d;
-  --ok-muted: rgba(21, 128, 61, 0.75);
-  --ok-subtle: rgba(21, 128, 61, 0.12);
-  --destructive: #b91c1c;
+  --ok: #16a34a;
+  --ok-muted: rgba(22, 163, 74, 0.75);
+  --ok-subtle: rgba(22, 163, 74, 0.1);
+  --destructive: #dc2626;
   --destructive-foreground: #fafafa;
-  --warn: #a16207;
-  --warn-muted: rgba(161, 98, 7, 0.75);
-  --warn-subtle: rgba(161, 98, 7, 0.12);
-  --danger: #b91c1c;
-  --danger-muted: rgba(185, 28, 28, 0.75);
-  --danger-subtle: rgba(185, 28, 28, 0.12);
-  --info: #1d4ed8;
+  --warn: #d97706;
+  --warn-muted: rgba(217, 119, 6, 0.75);
+  --warn-subtle: rgba(217, 119, 6, 0.1);
+  --danger: #dc2626;
+  --danger-muted: rgba(220, 38, 38, 0.75);
+  --danger-subtle: rgba(220, 38, 38, 0.1);
+  --info: #2563eb;
 
-  --focus: rgba(185, 28, 28, 0.25);
+  --focus: rgba(220, 38, 38, 0.2);
+  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring), 0 0 16px var(--accent-glow);
 
-  --grid-line: rgba(0, 0, 0, 0.06);
+  --grid-line: rgba(0, 0, 0, 0.05);
+
+  /* Light shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  --shadow-glow: 0 0 24px var(--accent-glow);
 
   color-scheme: light;
 }
@@ -181,8 +198,8 @@ body {
 
 body {
   margin: 0;
-  font: 400 14px/1.5 var(--font-body);
-  letter-spacing: -0.011em;
+  font: 400 14px/1.55 var(--font-body);
+  letter-spacing: -0.02em;
   background: var(--bg);
   color: var(--text);
   -webkit-font-smoothing: antialiased;
@@ -270,11 +287,11 @@ select {
   background: var(--border-strong);
 }
 
-/* Animations */
+/* Animations - Polished with spring feel */
 @keyframes rise {
   from {
     opacity: 0;
-    transform: translateY(4px);
+    transform: translateY(8px);
   }
   to {
     opacity: 1;
@@ -294,7 +311,7 @@ select {
 @keyframes scale-in {
   from {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scale(0.95);
   }
   to {
     opacity: 1;
@@ -305,7 +322,7 @@ select {
 @keyframes dashboard-enter {
   from {
     opacity: 0;
-    transform: translateY(8px);
+    transform: translateY(12px);
   }
   to {
     opacity: 1;
@@ -322,6 +339,32 @@ select {
   }
 }
 
+@keyframes pulse-subtle {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+@keyframes glow-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 rgba(255, 92, 92, 0);
+  }
+  50% {
+    box-shadow: 0 0 20px var(--accent-glow);
+  }
+}
+
+/* Stagger animation delays for grouped elements */
+.stagger-1 { animation-delay: 0ms; }
+.stagger-2 { animation-delay: 50ms; }
+.stagger-3 { animation-delay: 100ms; }
+.stagger-4 { animation-delay: 150ms; }
+.stagger-5 { animation-delay: 200ms; }
+.stagger-6 { animation-delay: 250ms; }
+
 /* Focus visible styles */
 :focus-visible {
   outline: none;
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index bdaca288f..9b253e231 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -1,63 +1,75 @@
 @import './chat.css';
 
 /* ===========================================
-   Cards
+   Cards - Refined with depth
    =========================================== */
 
 .card {
   border: 1px solid var(--border);
   background: var(--card);
   border-radius: var(--radius-lg);
-  padding: 16px;
-  animation: rise 0.3s var(--ease-out);
-  transition: border-color var(--duration-fast) ease;
-  box-shadow: inset 0 1px 0 var(--card-highlight);
+  padding: 20px;
+  animation: rise 0.35s var(--ease-out) backwards;
+  transition:
+    border-color var(--duration-normal) var(--ease-out),
+    box-shadow var(--duration-normal) var(--ease-out),
+    transform var(--duration-normal) var(--ease-out);
+  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--card-highlight);
 }
 
 .card:hover {
   border-color: var(--border-strong);
+  box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-highlight);
 }
 
 .card-title {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 600;
+  letter-spacing: -0.02em;
   color: var(--text-strong);
 }
 
 .card-sub {
   color: var(--muted);
   font-size: 13px;
-  margin-top: 4px;
+  margin-top: 6px;
+  line-height: 1.5;
 }
 
 /* ===========================================
-   Stats
+   Stats - Bold values, subtle labels
    =========================================== */
 
 .stat {
   background: var(--card);
   border-radius: var(--radius-md);
-  padding: 12px 14px;
+  padding: 14px 16px;
   border: 1px solid var(--border);
-  transition: border-color var(--duration-fast) ease;
+  transition:
+    border-color var(--duration-normal) var(--ease-out),
+    box-shadow var(--duration-normal) var(--ease-out);
   box-shadow: inset 0 1px 0 var(--card-highlight);
 }
 
 .stat:hover {
   border-color: var(--border-strong);
+  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--card-highlight);
 }
 
 .stat-label {
   color: var(--muted);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
 .stat-value {
-  font-size: 20px;
-  font-weight: 600;
-  margin-top: 4px;
-  letter-spacing: -0.02em;
+  font-size: 24px;
+  font-weight: 700;
+  margin-top: 6px;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
 }
 
 .stat-value.ok {
@@ -70,11 +82,12 @@
 
 .stat-card {
   display: grid;
-  gap: 4px;
+  gap: 6px;
 }
 
 .note-title {
   font-weight: 600;
+  letter-spacing: -0.01em;
 }
 
 /* ===========================================
@@ -262,7 +275,7 @@
 }
 
 /* ===========================================
-   Status Dot
+   Status Dot - With glow for emphasis
    =========================================== */
 
 .statusDot {
@@ -270,14 +283,18 @@
   height: 8px;
   border-radius: var(--radius-full);
   background: var(--danger);
+  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
+  animation: pulse-subtle 2s ease-in-out infinite;
 }
 
 .statusDot.ok {
   background: var(--ok);
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
+  animation: none;
 }
 
 /* ===========================================
-   Buttons
+   Buttons - Tactile with personality
    =========================================== */
 
 .btn {
@@ -287,23 +304,30 @@
   gap: 8px;
   border: 1px solid var(--border);
   background: var(--bg-elevated);
-  padding: 8px 14px;
+  padding: 9px 16px;
   border-radius: var(--radius-md);
   font-size: 13px;
   font-weight: 500;
+  letter-spacing: -0.01em;
   cursor: pointer;
   transition:
-    border-color var(--duration-fast) ease,
-    background var(--duration-fast) ease;
+    border-color var(--duration-fast) var(--ease-out),
+    background var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out);
 }
 
 .btn:hover {
   background: var(--bg-hover);
   border-color: var(--border-strong);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
 }
 
 .btn:active {
   background: var(--secondary);
+  transform: translateY(0);
+  box-shadow: none;
 }
 
 .btn svg {
@@ -321,11 +345,13 @@
   border-color: var(--accent);
   background: var(--accent);
   color: var(--primary-foreground);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .btn.primary:hover {
   background: var(--accent-hover);
   border-color: var(--accent-hover);
+  box-shadow: var(--shadow-md), 0 0 20px var(--accent-glow);
 }
 
 /* Keyboard shortcut badge (shadcn style) */
@@ -497,32 +523,34 @@
 }
 
 /* ===========================================
-   Callouts
+   Callouts - Informative with subtle depth
    =========================================== */
 
 .callout {
-  padding: 12px 14px;
+  padding: 14px 16px;
   border-radius: var(--radius-md);
   background: var(--secondary);
   border: 1px solid var(--border);
   font-size: 13px;
+  line-height: 1.5;
+  position: relative;
 }
 
 .callout.danger {
-  border-color: var(--danger-subtle);
-  background: var(--danger-subtle);
+  border-color: rgba(239, 68, 68, 0.25);
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%);
   color: var(--danger);
 }
 
 .callout.info {
-  border-color: rgba(59, 130, 246, 0.2);
-  background: rgba(59, 130, 246, 0.1);
+  border-color: rgba(59, 130, 246, 0.25);
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
   color: var(--info);
 }
 
 .callout.success {
-  border-color: var(--ok-subtle);
-  background: var(--ok-subtle);
+  border-color: rgba(34, 197, 94, 0.25);
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%);
   color: var(--ok);
 }
 
@@ -655,13 +683,13 @@
 }
 
 /* ===========================================
-   Chips
+   Chips - Compact and punchy
    =========================================== */
 
 .chip-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 8px;
 }
 
 .chip {
@@ -669,10 +697,18 @@
   font-weight: 500;
   border: 1px solid var(--border);
   border-radius: var(--radius-full);
-  padding: 4px 10px;
+  padding: 5px 12px;
   color: var(--muted);
   background: var(--secondary);
-  transition: border-color var(--duration-fast) ease;
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    background var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out);
+}
+
+.chip:hover {
+  border-color: var(--border-strong);
+  transform: translateY(-1px);
 }
 
 .chip input {
@@ -681,12 +717,14 @@
 
 .chip-ok {
   color: var(--ok);
-  border-color: var(--ok-subtle);
+  border-color: rgba(34, 197, 94, 0.3);
+  background: var(--ok-subtle);
 }
 
 .chip-warn {
   color: var(--warn);
-  border-color: var(--warn-subtle);
+  border-color: rgba(245, 158, 11, 0.3);
+  background: var(--warn-subtle);
 }
 
 /* ===========================================
diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css
index 3648fc782..a3db5d737 100644
--- a/ui/src/styles/layout.css
+++ b/ui/src/styles/layout.css
@@ -132,18 +132,19 @@
 }
 
 .brand-title {
-  font-size: 15px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
   line-height: 1.1;
   color: var(--text-strong);
 }
 
 .brand-sub {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 500;
   color: var(--muted);
-  letter-spacing: 0.02em;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
   line-height: 1;
 }
 
@@ -195,8 +196,8 @@
   overflow-y: auto;
   overflow-x: hidden;
   padding: 16px 12px;
-  border-right: 1px solid var(--border);
   background: var(--bg);
+  scrollbar-width: none; /* Firefox */
   transition:
     width var(--shell-focus-duration) var(--shell-focus-ease),
     padding var(--shell-focus-duration) var(--shell-focus-ease),
@@ -204,6 +205,10 @@
   min-height: 0;
 }
 
+.nav::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+
 .shell--chat-focus .nav {
   width: 0;
   padding: 0;
@@ -412,10 +417,10 @@
 
 .content {
   grid-area: content;
-  padding: 8px 8px 24px;
+  padding: 12px 16px 32px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 24px;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
@@ -456,18 +461,19 @@
 }
 
 .page-title {
-  font-size: 24px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  line-height: 1.2;
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: -0.035em;
+  line-height: 1.15;
   color: var(--text-strong);
 }
 
 .page-sub {
   color: var(--muted);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 400;
-  margin-top: 4px;
+  margin-top: 6px;
+  letter-spacing: -0.01em;
 }
 
 .page-meta {
@@ -501,7 +507,7 @@
 
 .grid {
   display: grid;
-  gap: 16px;
+  gap: 20px;
 }
 
 .grid-cols-2 {
@@ -514,19 +520,19 @@
 
 .stat-grid {
   display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 14px;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 }
 
 .note-grid {
   display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
 .row {
   display: flex;
-  gap: 10px;
+  gap: 12px;
   align-items: center;
 }