From 6ede2bee7eddf9653d16fbc05ed2207e2cedc053 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Tue, 5 May 2026 10:17:06 -0700
Subject: [PATCH] refactor(web): replace hardcoded app colors

---
 web/src/app/(app)/reviews/page.tsx          |  4 +-
 web/src/app/(app)/settings/page.tsx         | 12 ++---
 web/src/app/(app)/workspaces/page.tsx       |  4 +-
 web/src/app/(auth)/forgot-password/page.tsx |  6 +--
 web/src/app/(auth)/login/page.tsx           |  4 +-
 web/src/app/(auth)/register/page.tsx        |  4 +-
 web/src/app/globals.css                     | 52 +++++++++++----------
 web/src/app/layout.tsx                      |  4 +-
 web/src/app/loading.tsx                     |  2 +-
 web/src/app/page.tsx                        |  2 +-
 web/src/app/providers.tsx                   |  4 +-
 web/src/app/share/[token]/page.tsx          |  2 +-
 web/src/components/AuthGuard.tsx            |  2 +-
 web/src/components/BroadcastBanner.tsx      |  2 +-
 web/src/components/CommandPalette.tsx       |  6 +--
 web/src/components/CreateNoteModal.tsx      | 22 ++++-----
 web/src/components/CreateWorkspaceModal.tsx |  6 +--
 web/src/components/LinkNoteModal.tsx        | 26 +++++------
 web/src/components/NoteEditor.tsx           |  2 +-
 web/src/components/PalacePanel.tsx          |  2 +-
 web/src/components/PromptTemplateEditor.tsx |  2 +-
 web/src/components/RunPromptModal.tsx       |  2 +-
 web/src/components/ShareDialog.tsx          |  2 +-
 web/src/components/Sidebar.tsx              |  2 +-
 web/src/components/SurveyBanner.tsx         | 12 ++---
 25 files changed, 96 insertions(+), 92 deletions(-)

diff --git a/web/src/app/(app)/reviews/page.tsx b/web/src/app/(app)/reviews/page.tsx
index 36303bb..1c0b74b 100644
--- a/web/src/app/(app)/reviews/page.tsx
+++ b/web/src/app/(app)/reviews/page.tsx
@@ -272,8 +272,8 @@ export default function ReviewsPage() {
                     ? selectedBatchIds.has(item.id) ? "var(--nl-accent-primary)" : undefined
                     : featuredProposal?.id === item.id ? "var(--nl-accent-primary)" : undefined,
                   background: batchMode
-                    ? selectedBatchIds.has(item.id) ? "rgba(90, 140, 255, 0.12)" : undefined
-                    : featuredProposal?.id === item.id ? "rgba(90, 140, 255, 0.12)" : undefined,
+                    ? selectedBatchIds.has(item.id) ? "var(--nl-accent-muted)" : undefined
+                    : featuredProposal?.id === item.id ? "var(--nl-accent-muted)" : undefined,
                 }}
               >
                 <div style={{ display: "grid", gap: 4 }}>
diff --git a/web/src/app/(app)/settings/page.tsx b/web/src/app/(app)/settings/page.tsx
index 07a2776..61edd56 100644
--- a/web/src/app/(app)/settings/page.tsx
+++ b/web/src/app/(app)/settings/page.tsx
@@ -64,7 +64,7 @@ export default function SettingsPage() {
       title="Settings"
       description="Account, preferences, feedback, and session management."
       actions={
-        <button onClick={logout} style={{ padding: "6px 14px", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", border: "none", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}>
+        <button onClick={logout} style={{ padding: "6px 14px", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", border: "none", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}>
           Sign out
         </button>
       }
@@ -97,12 +97,12 @@ export default function SettingsPage() {
         {/* Change password */}
         <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
           <strong>Change password</strong>
-          {error && <div style={{ color: "var(--nl-danger, #FF6E6E)", fontSize: "var(--nl-fs-sm)" }}>{error}</div>}
-          {success && <div style={{ color: "#4ADE80", fontSize: "var(--nl-fs-sm)" }}>{success}</div>}
+          {error && <div style={{ color: "var(--nl-danger)", fontSize: "var(--nl-fs-sm)" }}>{error}</div>}
+          {success && <div style={{ color: "var(--nl-status-success)", fontSize: "var(--nl-fs-sm)" }}>{success}</div>}
           <form onSubmit={handleChangePassword} style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             <input className="input-shell" type="password" placeholder="Current password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} required />
             <input className="input-shell" type="password" placeholder="New password" minLength={8} value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required />
-            <button type="submit" disabled={isLoading} style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }}>
+            <button type="submit" disabled={isLoading} style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }}>
               {isLoading ? "Updating…" : "Update password"}
             </button>
           </form>
@@ -111,7 +111,7 @@ export default function SettingsPage() {
         {/* Danger zone */}
         <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
           <strong>Danger zone</strong>
-          <button onClick={handleDeleteAccount} style={{ padding: "8px 16px", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }}>
+          <button onClick={handleDeleteAccount} style={{ padding: "8px 16px", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }}>
             Delete account
           </button>
         </article>
@@ -188,7 +188,7 @@ MCP API base: ${MCP_SERVER_URL}
         <button
           onClick={handleSubmitFeedback}
           disabled={submittingFeedback || !feedbackTitle.trim()}
-          style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }}
+          style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }}
         >
           {submittingFeedback ? "Sending…" : "Send feedback"}
         </button>
diff --git a/web/src/app/(app)/workspaces/page.tsx b/web/src/app/(app)/workspaces/page.tsx
index 5588c6d..22426dc 100644
--- a/web/src/app/(app)/workspaces/page.tsx
+++ b/web/src/app/(app)/workspaces/page.tsx
@@ -145,7 +145,7 @@ function WorkspacesPageInner() {
       actions={
         <div style={{ display: "flex", gap: "var(--nl-space-3)" }}>
           <button
-            style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600 }}
+            style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600 }}
             onClick={() => setShowCreate(true)}
           >
             + Workspace
@@ -241,7 +241,7 @@ function WorkspacesPageInner() {
                   </button>
                   <button
                     onClick={() => handleDelete(workspace.id, workspace.name)}
-                    style={{ padding: "4px 10px", fontSize: "var(--nl-fs-sm)", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", border: "none", borderRadius: "var(--nl-radius-sm)" }}
+                    style={{ padding: "4px 10px", fontSize: "var(--nl-fs-sm)", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", border: "none", borderRadius: "var(--nl-radius-sm)" }}
                   >
                     Delete
                   </button>
diff --git a/web/src/app/(auth)/forgot-password/page.tsx b/web/src/app/(auth)/forgot-password/page.tsx
index 00054c4..9c58d40 100644
--- a/web/src/app/(auth)/forgot-password/page.tsx
+++ b/web/src/app/(auth)/forgot-password/page.tsx
@@ -22,13 +22,13 @@ export default function ForgotPasswordPage() {
       </p>
 
       {error && (
-        <div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", fontSize: "var(--nl-fs-sm)" }}>
+        <div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", fontSize: "var(--nl-fs-sm)" }}>
           {error}
         </div>
       )}
 
       {success && (
-        <div role="status" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "rgba(74,222,128,0.12)", color: "#4ADE80", fontSize: "var(--nl-fs-sm)" }}>
+        <div role="status" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "var(--nl-success-muted)", color: "var(--nl-status-success)", fontSize: "var(--nl-fs-sm)" }}>
           {success}
         </div>
       )}
@@ -49,7 +49,7 @@ export default function ForgotPasswordPage() {
         type="submit"
         disabled={isLoading}
         className="input-shell"
-        style={{ background: "var(--nl-accent-primary, #5A8CFF)", color: "#fff", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }}
+        style={{ background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }}
       >
         {isLoading ? "Sending…" : "Send reset link"}
       </button>
diff --git a/web/src/app/(auth)/login/page.tsx b/web/src/app/(auth)/login/page.tsx
index 94df825..ef5d066 100644
--- a/web/src/app/(auth)/login/page.tsx
+++ b/web/src/app/(auth)/login/page.tsx
@@ -23,7 +23,7 @@ export default function LoginPage() {
       <h1 style={{ margin: 0, fontSize: "var(--nl-fs-xl)" }}>Sign in</h1>
 
       {error && (
-        <div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", fontSize: "var(--nl-fs-sm)" }}>
+        <div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", fontSize: "var(--nl-fs-sm)" }}>
           {error}
         </div>
       )}
@@ -56,7 +56,7 @@ export default function LoginPage() {
         type="submit"
         disabled={isLoading}
         className="input-shell"
-        style={{ background: "var(--nl-accent-primary, #5A8CFF)", color: "#fff", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }}
+        style={{ background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }}
       >
         {isLoading ? "Signing in…" : "Sign in"}
       </button>
diff --git a/web/src/app/(auth)/register/page.tsx b/web/src/app/(auth)/register/page.tsx
index acf58de..46cf741 100644
--- a/web/src/app/(auth)/register/page.tsx
+++ b/web/src/app/(auth)/register/page.tsx
@@ -24,7 +24,7 @@ export default function RegisterPage() {
       <h1 style={{ margin: 0, fontSize: "var(--nl-fs-xl)" }}>Create account</h1>
 
       {error && (
-        <div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", fontSize: "var(--nl-fs-sm)" }}>
+        <div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", fontSize: "var(--nl-fs-sm)" }}>
           {error}
         </div>
       )}
@@ -70,7 +70,7 @@ export default function RegisterPage() {
         type="submit"
         disabled={isLoading}
         className="input-shell"
-        style={{ background: "var(--nl-accent-primary, #5A8CFF)", color: "#fff", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }}
+        style={{ background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }}
       >
         {isLoading ? "Creating account…" : "Create account"}
       </button>
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index fb69f19..b87fd60 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -3,6 +3,23 @@
 /* Design tokens imported via @bytelyst/design-tokens/css/notelett in layout.tsx */
 /* === END design tokens === */
 
+:root {
+  --nl-on-accent: white;
+  --nl-overlay-scrim: color-mix(in srgb, var(--nl-bg-canvas) 64%, transparent);
+  --nl-overlay-scrim-strong: color-mix(in srgb, var(--nl-bg-canvas) 72%, transparent);
+  --nl-surface-sidebar: color-mix(in srgb, var(--nl-bg-canvas) 82%, transparent);
+  --nl-surface-card-translucent: color-mix(in srgb, var(--nl-surface-card) 86%, transparent);
+  --nl-surface-muted-translucent: color-mix(in srgb, var(--nl-surface-muted) 72%, transparent);
+  --nl-input-bg: color-mix(in srgb, var(--nl-bg-canvas) 88%, transparent);
+  --nl-accent-muted: color-mix(in srgb, var(--nl-accent-primary) 16%, transparent);
+  --nl-accent-muted-strong: color-mix(in srgb, var(--nl-accent-primary) 22%, transparent);
+  --nl-danger-muted: color-mix(in srgb, var(--nl-danger) 14%, transparent);
+  --nl-success-muted: color-mix(in srgb, var(--nl-status-success) 14%, transparent);
+  --nl-warning-muted: color-mix(in srgb, var(--nl-status-warning) 14%, transparent);
+  --nl-info-muted: color-mix(in srgb, var(--nl-accent-primary) 12%, transparent);
+  --nl-command-shadow: 0 24px 80px color-mix(in srgb, black 45%, transparent);
+}
+
 * {
   box-sizing: border-box;
 }
@@ -45,7 +62,7 @@ button {
 
 .sidebar {
   border-right: 1px solid var(--nl-border-default);
-  background: rgba(12, 17, 31, 0.82);
+  background: var(--nl-surface-sidebar);
   backdrop-filter: blur(16px);
 }
 
@@ -57,14 +74,14 @@ button {
 .surface-card {
   border: 1px solid var(--nl-border-default);
   border-radius: var(--nl-radius-md);
-  background: rgba(18, 23, 37, 0.86);
+  background: var(--nl-surface-card-translucent);
   box-shadow: var(--nl-elevation-md);
 }
 
 .surface-muted {
   border: 1px solid var(--nl-border-default);
   border-radius: var(--nl-radius-sm);
-  background: rgba(26, 35, 53, 0.72);
+  background: var(--nl-surface-muted-translucent);
 }
 
 .badge {
@@ -73,7 +90,7 @@ button {
   gap: 6px;
   border-radius: var(--nl-radius-pill);
   padding: 6px 10px;
-  background: rgba(90, 140, 255, 0.14);
+  background: var(--nl-accent-muted);
   color: var(--nl-text-primary);
   font-size: var(--nl-fs-sm);
 }
@@ -82,7 +99,7 @@ button {
   width: 100%;
   border: 1px solid var(--nl-border-default);
   border-radius: var(--nl-radius-sm);
-  background: rgba(10, 15, 28, 0.88);
+  background: var(--nl-input-bg);
   color: var(--nl-text-primary);
   padding: 12px 14px;
 }
@@ -105,7 +122,7 @@ button {
 
 /* Focus-visible — keyboard accessibility */
 *:focus-visible {
-  outline: 2px solid var(--nl-accent-primary, #5A8CFF);
+  outline: 2px solid var(--nl-accent-primary);
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -161,15 +178,15 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
     overflow-y: auto;
   }
   .app-sidebar.open { left: 0 !important; }
-  .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,0.5); }
+  .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 39; background: var(--nl-overlay-scrim); }
   .sidebar-overlay.open { display: block; }
   .sidebar-toggle {
     display: flex; align-items: center; justify-content: center;
     position: fixed; top: 12px; left: 12px; z-index: 38;
     width: 40px; height: 40px; border-radius: 8px;
-    border: 1px solid var(--nl-border-default, #2a2a4a);
-    background: var(--nl-bg-elevated, #12151c);
-    color: var(--nl-text-primary, #fff);
+    border: 1px solid var(--nl-border-default);
+    background: var(--nl-bg-elevated);
+    color: var(--nl-text-primary);
     cursor: pointer; font-size: 20px; line-height: 1;
   }
 }
@@ -188,19 +205,6 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
   }
 }
 
-/* Respect OS dark/light preference */
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme="dark"]) {
-    --nl-bg-canvas: #F8FAFC;
-    --nl-bg-elevated: #FFFFFF;
-    --nl-surface-card: #FFFFFF;
-    --nl-surface-muted: #F1F5F9;
-    --nl-text-primary: #0F172A;
-    --nl-text-secondary: #475569;
-    --nl-text-tertiary: #94A3B8;
-  }
-}
-
 /* ── Responsive Sidebar ──────────────────────────────────────── */
 
 .app-layout {
@@ -221,7 +225,7 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
   display: none;
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.5);
+  background: var(--nl-overlay-scrim);
   z-index: 39;
 }
 
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index f0b1280..2de3cae 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -25,8 +25,8 @@ export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
   themeColor: [
-    { media: "(prefers-color-scheme: dark)", color: "#06070A" },
-    { media: "(prefers-color-scheme: light)", color: "#F8FAFC" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+    { media: "(prefers-color-scheme: light)", color: "white" },
   ],
 };
 
diff --git a/web/src/app/loading.tsx b/web/src/app/loading.tsx
index 559cc05..e928c24 100644
--- a/web/src/app/loading.tsx
+++ b/web/src/app/loading.tsx
@@ -2,7 +2,7 @@ import { LoadingSpinner } from "@bytelyst/dashboard-components";
 
 export default function Loading() {
   return (
-    <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", background: "var(--nl-bg-canvas, #06070A)" }}>
+    <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", background: "var(--nl-bg-canvas)" }}>
       <LoadingSpinner size="lg" />
     </div>
   );
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 6505441..a24ddb6 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -14,7 +14,7 @@ export default function HomePage() {
           </p>
         </div>
         <div style={{ display: "flex", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
-          <Link href="/dashboard" className="surface-muted" style={{ padding: "12px 16px", background: "rgba(90, 140, 255, 0.16)" }}>
+          <Link href="/dashboard" className="surface-muted" style={{ padding: "12px 16px", background: "var(--nl-accent-muted)" }}>
             Open dashboard
           </Link>
           <Link href="/workspaces" className="surface-muted" style={{ padding: "12px 16px" }}>
diff --git a/web/src/app/providers.tsx b/web/src/app/providers.tsx
index 6fa0f80..12cfdad 100644
--- a/web/src/app/providers.tsx
+++ b/web/src/app/providers.tsx
@@ -26,9 +26,9 @@ export function Providers({ children }: { children: ReactNode }) {
         theme="dark"
         toastOptions={{
           style: {
-            background: "var(--nl-surface-card, #121725)",
+            background: "var(--nl-surface-card)",
             border: "1px solid var(--nl-border-default)",
-            color: "var(--nl-text-primary, #EFF4FF)",
+            color: "var(--nl-text-primary)",
             fontFamily: "var(--nl-font-body)",
           },
         }}
diff --git a/web/src/app/share/[token]/page.tsx b/web/src/app/share/[token]/page.tsx
index fdd0e88..0c4fb3e 100644
--- a/web/src/app/share/[token]/page.tsx
+++ b/web/src/app/share/[token]/page.tsx
@@ -45,7 +45,7 @@ export default function SharedNotePage() {
   }, [token]);
 
   return (
-    <div style={{ minHeight: "100vh", background: "var(--nl-bg-base, #06070A)", color: "var(--nl-text-primary)", padding: "var(--nl-space-8)" }}>
+    <div style={{ minHeight: "100vh", background: "var(--nl-bg-canvas)", color: "var(--nl-text-primary)", padding: "var(--nl-space-8)" }}>
       <header style={{ maxWidth: 720, margin: "0 auto var(--nl-space-6)" }}>
         <div className="badge" style={{ marginBottom: 12 }}>
           Read-only share · {PRODUCT_NAME}
diff --git a/web/src/components/AuthGuard.tsx b/web/src/components/AuthGuard.tsx
index c831c16..a1aef2b 100644
--- a/web/src/components/AuthGuard.tsx
+++ b/web/src/components/AuthGuard.tsx
@@ -36,7 +36,7 @@ export function AuthGuard({ children }: { children: ReactNode }) {
     return (
       <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: "var(--nl-space-8)" }}>
         <div className="surface-card" style={{ padding: "var(--nl-space-8)", maxWidth: 480, textAlign: "center" }}>
-          <h1 style={{ margin: 0, fontSize: "var(--nl-fs-xl)", color: "var(--nl-danger, #FF6E6E)" }}>Service Unavailable</h1>
+          <h1 style={{ margin: 0, fontSize: "var(--nl-fs-xl)", color: "var(--nl-danger)" }}>Service Unavailable</h1>
           <p style={{ marginTop: "var(--nl-space-4)", color: "var(--nl-text-secondary)" }}>{killSwitchMsg}</p>
         </div>
       </div>
diff --git a/web/src/components/BroadcastBanner.tsx b/web/src/components/BroadcastBanner.tsx
index 90e4c1c..ba2d9a6 100644
--- a/web/src/components/BroadcastBanner.tsx
+++ b/web/src/components/BroadcastBanner.tsx
@@ -56,7 +56,7 @@ export function BroadcastBanner() {
             alignItems: "center",
             justifyContent: "space-between",
             padding: "var(--nl-space-3) var(--nl-space-4)",
-            background: msg.priority === "high" || msg.priority === "urgent" ? "rgba(255,180,70,0.12)" : "rgba(100,160,255,0.10)",
+            background: msg.priority === "high" || msg.priority === "urgent" ? "var(--nl-warning-muted)" : "var(--nl-info-muted)",
             borderRadius: "var(--nl-radius-sm)",
             fontSize: "var(--nl-fs-sm)",
           }}
diff --git a/web/src/components/CommandPalette.tsx b/web/src/components/CommandPalette.tsx
index 5290171..8ecc1c7 100644
--- a/web/src/components/CommandPalette.tsx
+++ b/web/src/components/CommandPalette.tsx
@@ -167,7 +167,7 @@ export function CommandPalette() {
         position: "fixed",
         inset: 0,
         zIndex: 200,
-        background: "rgba(0,0,0,0.55)",
+        background: "var(--nl-overlay-scrim-strong)",
         display: "grid",
         placeItems: "start center",
         paddingTop: "12vh",
@@ -183,7 +183,7 @@ export function CommandPalette() {
           overflow: "hidden",
           display: "grid",
           gridTemplateRows: "auto 1fr",
-          boxShadow: "0 24px 80px rgba(0,0,0,0.45)",
+          boxShadow: "var(--nl-command-shadow)",
         }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -219,7 +219,7 @@ export function CommandPalette() {
                       borderRadius: "var(--nl-radius-md)",
                       textDecoration: "none",
                       color: "var(--nl-text-primary)",
-                      background: idx === activeIndex ? "rgba(90,140,255,0.2)" : "transparent",
+                      background: idx === activeIndex ? "var(--nl-accent-muted-strong)" : "transparent",
                       border: idx === activeIndex ? "1px solid var(--nl-accent-primary)" : "1px solid transparent",
                     }}
                     onMouseEnter={() => setActiveIndex(idx)}
diff --git a/web/src/components/CreateNoteModal.tsx b/web/src/components/CreateNoteModal.tsx
index 110d138..b450dc3 100644
--- a/web/src/components/CreateNoteModal.tsx
+++ b/web/src/components/CreateNoteModal.tsx
@@ -65,7 +65,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
       style={{
         position: "fixed",
         inset: 0,
-        background: "rgba(0,0,0,0.5)",
+        background: "var(--nl-overlay-scrim)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -79,18 +79,18 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
         onSubmit={handleSubmit}
         className="surface-card"
         style={{
-          padding: "var(--nl-space-6, 1.5rem)",
+          padding: "var(--nl-space-6)",
           width: "100%",
           maxWidth: 520,
           display: "grid",
-          gap: "var(--nl-space-4, 1rem)",
+          gap: "var(--nl-space-4)",
         }}
       >
-        <div style={{ fontSize: "var(--nl-fs-xl, 1.25rem)", fontWeight: 700 }}>Create Note</div>
+        <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Create Note</div>
 
-        {error && <div style={{ color: "var(--nl-danger, #e53e3e)", fontSize: "0.875rem" }}>{error}</div>}
+        {error && <div style={{ color: "var(--nl-danger)", fontSize: "0.875rem" }}>{error}</div>}
 
-        <label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}>
+        <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
           <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Template</span>
           <select
             className="input"
@@ -113,7 +113,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
           </select>
         </label>
 
-        <label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}>
+        <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
           <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Workspace</span>
           <select value={workspaceId} onChange={(e) => setWorkspaceId(e.target.value)} className="input">
             {workspaces.map((ws) => (
@@ -124,7 +124,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
           </select>
         </label>
 
-        <label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}>
+        <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
           <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Title</span>
           <input
             className="input"
@@ -136,7 +136,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
           />
         </label>
 
-        <label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}>
+        <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
           <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Body</span>
           <textarea
             className="input"
@@ -148,7 +148,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
           />
         </label>
 
-        <label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}>
+        <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
           <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Tags (comma-separated)</span>
           <input
             className="input"
@@ -159,7 +159,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
           />
         </label>
 
-        <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--nl-space-3, 0.75rem)" }}>
+        <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--nl-space-3)" }}>
           <button type="button" className="btn btn-secondary" onClick={onClose}>
             Cancel
           </button>
diff --git a/web/src/components/CreateWorkspaceModal.tsx b/web/src/components/CreateWorkspaceModal.tsx
index ec5b65c..0ab69b2 100644
--- a/web/src/components/CreateWorkspaceModal.tsx
+++ b/web/src/components/CreateWorkspaceModal.tsx
@@ -37,7 +37,7 @@ export function CreateWorkspaceModal({ onCreated, onClose }: Props) {
 
   return (
     <div
-      style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000 }}
+      style={{ position: "fixed", inset: 0, background: "var(--nl-overlay-scrim)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000 }}
       onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
     >
       <form
@@ -47,7 +47,7 @@ export function CreateWorkspaceModal({ onCreated, onClose }: Props) {
       >
         <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Create Workspace</div>
 
-        {error && <div style={{ color: "var(--nl-danger, #FF6E6E)", fontSize: "var(--nl-fs-sm)" }}>{error}</div>}
+        {error && <div style={{ color: "var(--nl-danger)", fontSize: "var(--nl-fs-sm)" }}>{error}</div>}
 
         <label style={{ display: "grid", gap: 6 }}>
           <span style={{ fontWeight: 600, fontSize: "var(--nl-fs-sm)" }}>Name</span>
@@ -61,7 +61,7 @@ export function CreateWorkspaceModal({ onCreated, onClose }: Props) {
 
         <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--nl-space-3)" }}>
           <button type="button" className="surface-muted" style={{ padding: "8px 16px", border: "none" }} onClick={onClose}>Cancel</button>
-          <button type="submit" disabled={!name.trim() || saving} style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600 }}>
+          <button type="submit" disabled={!name.trim() || saving} style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600 }}>
             {saving ? "Creating…" : "Create"}
           </button>
         </div>
diff --git a/web/src/components/LinkNoteModal.tsx b/web/src/components/LinkNoteModal.tsx
index fcc322e..e9499aa 100644
--- a/web/src/components/LinkNoteModal.tsx
+++ b/web/src/components/LinkNoteModal.tsx
@@ -66,7 +66,7 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
       style={{
         position: "fixed",
         inset: 0,
-        background: "rgba(0,0,0,0.5)",
+        background: "var(--nl-overlay-scrim)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -79,18 +79,18 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
       <div
         className="surface-card"
         style={{
-          padding: "var(--nl-space-6, 1.5rem)",
+          padding: "var(--nl-space-6)",
           width: "100%",
           maxWidth: 520,
           display: "grid",
-          gap: "var(--nl-space-4, 1rem)",
+          gap: "var(--nl-space-4)",
         }}
       >
-        <div style={{ fontSize: "var(--nl-fs-xl, 1.25rem)", fontWeight: 700 }}>Link Note</div>
+        <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Link Note</div>
 
-        {error && <div style={{ color: "var(--nl-danger, #e53e3e)", fontSize: "0.875rem" }}>{error}</div>}
+        {error && <div style={{ color: "var(--nl-danger)", fontSize: "0.875rem" }}>{error}</div>}
 
-        <form onSubmit={handleSearch} style={{ display: "flex", gap: "var(--nl-space-2, 0.5rem)" }}>
+        <form onSubmit={handleSearch} style={{ display: "flex", gap: "var(--nl-space-2)" }}>
           <input
             className="input"
             type="text"
@@ -106,33 +106,33 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
         </form>
 
         {searched && results.length === 0 && (
-          <div style={{ color: "var(--nl-text-secondary, #888)", fontSize: "0.875rem" }}>No matching notes found.</div>
+          <div style={{ color: "var(--nl-text-secondary)", fontSize: "0.875rem" }}>No matching notes found.</div>
         )}
 
         {results.length > 0 && (
-          <div style={{ maxHeight: 200, overflowY: "auto", display: "grid", gap: "var(--nl-space-2, 0.5rem)" }}>
+          <div style={{ maxHeight: 200, overflowY: "auto", display: "grid", gap: "var(--nl-space-2)" }}>
             {results.map((note) => (
               <button
                 key={note.id}
                 type="button"
                 className={selectedId === note.id ? "surface-card" : "surface-muted"}
                 style={{
-                  padding: "var(--nl-space-3, 0.75rem)",
+                  padding: "var(--nl-space-3)",
                   textAlign: "left",
                   cursor: "pointer",
-                  border: selectedId === note.id ? "2px solid var(--nl-accent, #5a8cff)" : "2px solid transparent",
+                  border: selectedId === note.id ? "2px solid var(--nl-accent-primary)" : "2px solid transparent",
                 }}
                 onClick={() => setSelectedId(note.id)}
               >
                 <div style={{ fontWeight: 600 }}>{note.title}</div>
-                <div style={{ color: "var(--nl-text-secondary, #888)", fontSize: "0.875rem" }}>{note.excerpt}</div>
+                <div style={{ color: "var(--nl-text-secondary)", fontSize: "0.875rem" }}>{note.excerpt}</div>
               </button>
             ))}
           </div>
         )}
 
         {selectedId && (
-          <label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}>
+          <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
             <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Relationship type</span>
             <select value={relationshipType} onChange={(e) => setRelationshipType(e.target.value)} className="input">
               {RELATIONSHIP_TYPES.map((rt) => (
@@ -144,7 +144,7 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
           </label>
         )}
 
-        <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--nl-space-3, 0.75rem)" }}>
+        <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--nl-space-3)" }}>
           <button type="button" className="btn btn-secondary" onClick={onClose}>
             Cancel
           </button>
diff --git a/web/src/components/NoteEditor.tsx b/web/src/components/NoteEditor.tsx
index 6b284ff..baf728d 100644
--- a/web/src/components/NoteEditor.tsx
+++ b/web/src/components/NoteEditor.tsx
@@ -21,7 +21,7 @@ const TOOLBAR_BTN: React.CSSProperties = {
 
 const TOOLBAR_BTN_ACTIVE: React.CSSProperties = {
   ...TOOLBAR_BTN,
-  background: "rgba(90,140,255,0.18)",
+  background: "var(--nl-accent-muted-strong)",
   color: "var(--nl-text-primary)",
 };
 
diff --git a/web/src/components/PalacePanel.tsx b/web/src/components/PalacePanel.tsx
index 4c9596b..955c18a 100644
--- a/web/src/components/PalacePanel.tsx
+++ b/web/src/components/PalacePanel.tsx
@@ -100,7 +100,7 @@ export function PalacePanel({ wingId }: PalacePanelProps) {
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
               <span
                 className="badge"
-                style={{ backgroundColor: hallColor[mem.hall] ?? "var(--nl-text-secondary)", color: "#fff", fontSize: "0.75rem" }}
+                style={{ backgroundColor: hallColor[mem.hall] ?? "var(--nl-text-secondary)", color: "var(--nl-on-accent)", fontSize: "0.75rem" }}
               >
                 {mem.hall}
               </span>
diff --git a/web/src/components/PromptTemplateEditor.tsx b/web/src/components/PromptTemplateEditor.tsx
index f18220f..b4e3101 100644
--- a/web/src/components/PromptTemplateEditor.tsx
+++ b/web/src/components/PromptTemplateEditor.tsx
@@ -62,7 +62,7 @@ export function PromptTemplateEditor({ onClose, onCreated }: PromptTemplateEdito
 
   return (
     <div
-      style={{ position: "fixed", inset: 0, zIndex: 100, display: "grid", placeItems: "center", backgroundColor: "rgba(0,0,0,0.5)" }}
+      style={{ position: "fixed", inset: 0, zIndex: 100, display: "grid", placeItems: "center", backgroundColor: "var(--nl-overlay-scrim)" }}
       onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
       role="dialog"
       aria-modal="true"
diff --git a/web/src/components/RunPromptModal.tsx b/web/src/components/RunPromptModal.tsx
index 8f078dc..f430163 100644
--- a/web/src/components/RunPromptModal.tsx
+++ b/web/src/components/RunPromptModal.tsx
@@ -57,7 +57,7 @@ export function RunPromptModal({
         zIndex: 100,
         display: "grid",
         placeItems: "center",
-        backgroundColor: "rgba(0,0,0,0.5)",
+        backgroundColor: "var(--nl-overlay-scrim)",
       }}
       onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
       role="dialog"
diff --git a/web/src/components/ShareDialog.tsx b/web/src/components/ShareDialog.tsx
index 755c651..bb62b19 100644
--- a/web/src/components/ShareDialog.tsx
+++ b/web/src/components/ShareDialog.tsx
@@ -97,7 +97,7 @@ export function ShareDialog({ noteId, workspaceId, noteTitle, onClose }: ShareDi
       style={{
         position: "fixed",
         inset: 0,
-        background: "rgba(0,0,0,0.5)",
+        background: "var(--nl-overlay-scrim)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index e6b6d15..1545622 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -52,7 +52,7 @@ export function Sidebar({ open }: { open?: boolean }) {
                   gap: "var(--nl-space-3)",
                   padding: "12px 14px",
                   borderColor: active ? "var(--nl-accent-primary)" : undefined,
-                  background: active ? "rgba(90, 140, 255, 0.16)" : undefined,
+                  background: active ? "var(--nl-accent-muted)" : undefined,
                 }}
               >
                 <Icon size={18} />
diff --git a/web/src/components/SurveyBanner.tsx b/web/src/components/SurveyBanner.tsx
index 9bf3d98..1dabf82 100644
--- a/web/src/components/SurveyBanner.tsx
+++ b/web/src/components/SurveyBanner.tsx
@@ -80,10 +80,10 @@ export function SurveyBanner() {
 
   if (!started) {
     return (
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "var(--nl-space-3) var(--nl-space-4)", background: "rgba(100,200,120,0.10)", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "var(--nl-space-3) var(--nl-space-4)", background: "var(--nl-success-muted)", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}>
         <span><strong>{survey.title}</strong> — Quick survey ({survey.questions.length} questions)</span>
         <div style={{ display: "flex", gap: "var(--nl-space-3)" }}>
-          <button onClick={handleStart} style={{ background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", padding: "4px 12px", fontWeight: 600, cursor: "pointer" }}>Start</button>
+          <button onClick={handleStart} style={{ background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", padding: "4px 12px", fontWeight: 600, cursor: "pointer" }}>Start</button>
           <button onClick={dismiss} style={{ background: "none", border: "none", color: "var(--nl-text-secondary)", cursor: "pointer" }}>&times;</button>
         </div>
       </div>
@@ -113,7 +113,7 @@ export function SurveyBanner() {
   }
 
   return (
-    <div style={{ padding: "var(--nl-space-4)", background: "rgba(100,200,120,0.08)", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}>
+    <div style={{ padding: "var(--nl-space-4)", background: "var(--nl-success-muted)", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}>
       <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "var(--nl-space-3)" }}>
         <strong>{question.text}</strong>
         <span style={{ color: "var(--nl-text-secondary)" }}>{currentIdx + 1}/{survey.questions.length}</span>
@@ -139,7 +139,7 @@ export function SurveyBanner() {
                 borderRadius: "var(--nl-radius-sm)",
                 border: getRatingValue() === n ? "2px solid var(--nl-accent-primary)" : "1px solid var(--nl-border-default)",
                 background: getRatingValue() === n ? "var(--nl-accent-primary)" : "transparent",
-                color: getRatingValue() === n ? "#fff" : "var(--nl-text-primary)",
+                color: getRatingValue() === n ? "var(--nl-on-accent)" : "var(--nl-text-primary)",
                 cursor: "pointer", fontWeight: 600,
               }}
             >
@@ -159,7 +159,7 @@ export function SurveyBanner() {
                 padding: "4px 12px",
                 borderRadius: "var(--nl-radius-sm)",
                 border: getChoiceValue() === opt.id ? "2px solid var(--nl-accent-primary)" : "1px solid var(--nl-border-default)",
-                background: getChoiceValue() === opt.id ? "rgba(90,140,255,0.15)" : "transparent",
+                background: getChoiceValue() === opt.id ? "var(--nl-accent-muted)" : "transparent",
                 cursor: "pointer",
               }}
             >
@@ -174,7 +174,7 @@ export function SurveyBanner() {
         <button
           onClick={handleNext}
           disabled={!hasAnswer}
-          style={{ padding: "4px 14px", background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, cursor: "pointer" }}
+          style={{ padding: "4px 14px", background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, cursor: "pointer" }}
         >
           {currentIdx < survey.questions.length - 1 ? "Next" : "Submit"}
         </button>