From 85968e7b2a8adf91a6043fd9443bbb235a98dd44 Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Sat, 21 Mar 2026 20:18:44 -0700
Subject: [PATCH] fix(web): replace --ml-* (MindLyst) with --nl-* (NoteLett)
 CSS namespace across 18 files

---
 web/src/app/(app)/dashboard/page.tsx      | 64 +++++++++++------------
 web/src/app/(app)/notes/[noteId]/page.tsx | 10 ++--
 web/src/app/(app)/reviews/page.tsx        | 58 ++++++++++----------
 web/src/app/(app)/search/page.tsx         | 50 +++++++++---------
 web/src/app/(app)/settings/page.tsx       | 14 ++---
 web/src/app/(app)/workspaces/page.tsx     | 38 +++++++-------
 web/src/app/globals.css                   | 38 +++++++-------
 web/src/app/not-found.tsx                 |  6 +--
 web/src/app/page.tsx                      | 12 ++---
 web/src/components/AgentTimeline.tsx      | 12 ++---
 web/src/components/AppShell.tsx           |  8 +--
 web/src/components/ArtifactPanel.tsx      | 26 ++++-----
 web/src/components/LinkedNotesPanel.tsx   |  6 +--
 web/src/components/MetadataPanel.tsx      | 16 +++---
 web/src/components/NoteEditor.tsx         | 18 +++----
 web/src/components/ProposalReviewCard.tsx | 24 ++++-----
 web/src/components/Sidebar.tsx            | 22 ++++----
 web/src/components/TaskReviewPanel.tsx    | 22 ++++----
 18 files changed, 222 insertions(+), 222 deletions(-)

diff --git a/web/src/app/(app)/dashboard/page.tsx b/web/src/app/(app)/dashboard/page.tsx
index 1e9f7e7..62af04d 100644
--- a/web/src/app/(app)/dashboard/page.tsx
+++ b/web/src/app/(app)/dashboard/page.tsx
@@ -131,58 +131,58 @@ export default function DashboardPage() {
         </button>
       }
     >
-      <section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--ml-space-4)" }}>
+      <section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--nl-space-4)" }}>
         {summaryCards.map((card) => (
-          <Link key={card.id} href={card.href} className="surface-card" style={{ padding: "var(--ml-space-5)" }}>
-            <div style={{ color: "var(--ml-text-secondary)" }}>{card.label}</div>
-            <div style={{ fontSize: "var(--ml-fs-3xl)", fontWeight: 700, marginTop: "var(--ml-space-2)" }}>{card.value}</div>
+          <Link key={card.id} href={card.href} className="surface-card" style={{ padding: "var(--nl-space-5)" }}>
+            <div style={{ color: "var(--nl-text-secondary)" }}>{card.label}</div>
+            <div style={{ fontSize: "var(--nl-fs-3xl)", fontWeight: 700, marginTop: "var(--nl-space-2)" }}>{card.value}</div>
           </Link>
         ))}
       </section>
 
-      <section style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.1fr) minmax(320px, 0.9fr)", gap: "var(--ml-space-4)" }}>
-        <section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}>
-          <div style={{ fontSize: "var(--ml-fs-xl)", fontWeight: 700 }}>Saved views</div>
-          <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
+      <section style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.1fr) minmax(320px, 0.9fr)", gap: "var(--nl-space-4)" }}>
+        <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
+          <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Saved views</div>
+          <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             {savedViews.map((view) => (
               <Link
                 key={view.id}
                 href={getSavedViewHref(view)}
                 className="surface-muted"
-                style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}
+                style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
               >
-                <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
+                <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
                   <strong>{view.name}</strong>
                   <span className="badge">{view.scope}</span>
                 </div>
-                <div style={{ color: "var(--ml-text-secondary)" }}>{view.description}</div>
-                <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
-                  <span style={{ color: "var(--ml-text-secondary)" }}>{view.query}</span>
-                  <span style={{ color: "var(--ml-text-secondary)" }}>{view.resultCount} results</span>
+                <div style={{ color: "var(--nl-text-secondary)" }}>{view.description}</div>
+                <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
+                  <span style={{ color: "var(--nl-text-secondary)" }}>{view.query}</span>
+                  <span style={{ color: "var(--nl-text-secondary)" }}>{view.resultCount} results</span>
                 </div>
               </Link>
             ))}
           </div>
         </section>
 
-        <section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}>
-          <div style={{ fontSize: "var(--ml-fs-xl)", fontWeight: 700 }}>Operator workflows</div>
-          <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
+        <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
+          <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Operator workflows</div>
+          <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             {operatorWorkflows.map((workflow) => (
               <Link
                 key={workflow.id}
                 href={getWorkflowHref(workflow)}
                 className="surface-muted"
-                style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}
+                style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
               >
-                <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
+                <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
                   <strong>{workflow.name}</strong>
                   <span className="badge">{workflow.status}</span>
                 </div>
-                <div style={{ color: "var(--ml-text-secondary)" }}>Owner: {workflow.owner}</div>
-                <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
-                  <span style={{ color: "var(--ml-text-secondary)" }}>Queue: {workflow.queueCount}</span>
-                  <span style={{ color: "var(--ml-text-secondary)" }}>SLA: {workflow.sla}</span>
+                <div style={{ color: "var(--nl-text-secondary)" }}>Owner: {workflow.owner}</div>
+                <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
+                  <span style={{ color: "var(--nl-text-secondary)" }}>Queue: {workflow.queueCount}</span>
+                  <span style={{ color: "var(--nl-text-secondary)" }}>SLA: {workflow.sla}</span>
                 </div>
               </Link>
             ))}
@@ -190,22 +190,22 @@ export default function DashboardPage() {
         </section>
       </section>
 
-      <section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}>
-        <div style={{ fontSize: "var(--ml-fs-xl)", fontWeight: 700 }}>Recent note activity</div>
-        {error ? <div style={{ color: "var(--ml-text-secondary)" }}>{error}</div> : null}
-        <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
+      <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
+        <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Recent note activity</div>
+        {error ? <div style={{ color: "var(--nl-text-secondary)" }}>{error}</div> : null}
+        <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
           {recentNotes.map((note) => (
-            <div key={note.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
-              <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
+            <div key={note.id} className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
+              <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
                 <Link href={`/notes/${note.id}`}>
                   <strong>{note.title}</strong>
                 </Link>
-                <span style={{ color: "var(--ml-text-secondary)" }}>{note.updatedBy}</span>
+                <span style={{ color: "var(--nl-text-secondary)" }}>{note.updatedBy}</span>
               </div>
-              <Link href={`/notes/${note.id}`} style={{ color: "var(--ml-text-secondary)" }}>
+              <Link href={`/notes/${note.id}`} style={{ color: "var(--nl-text-secondary)" }}>
                 {note.excerpt}
               </Link>
-              <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
+              <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
                 {note.tags.map((tag) => (
                   <Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`} className="badge">
                     #{tag}
diff --git a/web/src/app/(app)/notes/[noteId]/page.tsx b/web/src/app/(app)/notes/[noteId]/page.tsx
index aa43308..a4df35e 100644
--- a/web/src/app/(app)/notes/[noteId]/page.tsx
+++ b/web/src/app/(app)/notes/[noteId]/page.tsx
@@ -148,7 +148,7 @@ export default function NoteDetailPage() {
         description="Editable note surface with metadata, linked context, tasks, artifacts, and review history."
         actions={<div className="badge">Loading</div>}
       >
-        <section className="surface-card" style={{ padding: "var(--ml-space-6)", color: "var(--ml-text-secondary)" }}>
+        <section className="surface-card" style={{ padding: "var(--nl-space-6)", color: "var(--nl-text-secondary)" }}>
           {error ?? "Loading note…"}
         </section>
       </AppShell>
@@ -160,7 +160,7 @@ export default function NoteDetailPage() {
       title={note.title}
       description="Editable note surface with metadata, linked context, tasks, artifacts, and review history."
       actions={
-        <div style={{ display: "flex", gap: "var(--ml-space-2)", alignItems: "center" }}>
+        <div style={{ display: "flex", gap: "var(--nl-space-2)", alignItems: "center" }}>
           {isSaving ? (
             <div className="badge">Saving</div>
           ) : (
@@ -182,11 +182,11 @@ export default function NoteDetailPage() {
         </div>
       }
     >
-      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.7fr) minmax(320px, 1fr)", gap: "var(--ml-space-4)" }}>
+      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.7fr) minmax(320px, 1fr)", gap: "var(--nl-space-4)" }}>
         <NoteEditor note={note} onSave={handleSave} isSaving={isSaving} />
 
-        <aside style={{ display: "grid", gap: "var(--ml-space-4)" }}>
-          {error ? <div className="surface-card" style={{ padding: "var(--ml-space-4)", color: "var(--ml-text-secondary)" }}>{error}</div> : null}
+        <aside style={{ display: "grid", gap: "var(--nl-space-4)" }}>
+          {error ? <div className="surface-card" style={{ padding: "var(--nl-space-4)", color: "var(--nl-text-secondary)" }}>{error}</div> : null}
           <MetadataPanel note={note} />
           <LinkedNotesPanel linkedNotes={note.linkedNotes} />
           <TaskReviewPanel tasks={note.tasks} onCreate={handleCreateTask} isCreating={isCreatingTask} />
diff --git a/web/src/app/(app)/reviews/page.tsx b/web/src/app/(app)/reviews/page.tsx
index 35884db..fa9578a 100644
--- a/web/src/app/(app)/reviews/page.tsx
+++ b/web/src/app/(app)/reviews/page.tsx
@@ -170,20 +170,20 @@ export default function ReviewsPage() {
       description="Approval queue, proposal comparison, and audit-oriented review surfaces for agent-mediated edits."
       actions={<div className="badge">Operator workflow shell</div>}
     >
-      <section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--ml-space-4)" }}>
-        <aside className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
+      <section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-space-4)" }}>
+        <aside className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
           <div style={{ fontWeight: 700 }}>Operator workflows</div>
-          <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
+          <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             {operatorWorkflows.map((workflow) => (
               <Link
                 key={workflow.id}
                 href={getWorkflowHref(workflow)}
                 className="surface-muted"
-                style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}
+                style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
               >
                 <strong>{workflow.name}</strong>
-                <span style={{ color: "var(--ml-text-secondary)" }}>Owner: {workflow.owner}</span>
-                <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
+                <span style={{ color: "var(--nl-text-secondary)" }}>Owner: {workflow.owner}</span>
+                <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
                   <span className="badge">{workflow.status}</span>
                   <span className="badge">Queue: {workflow.queueCount}</span>
                   <span className="badge">SLA {workflow.sla}</span>
@@ -193,10 +193,10 @@ export default function ReviewsPage() {
           </div>
         </aside>
 
-        <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
-          <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
+        <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
+          <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
             <div style={{ fontWeight: 700 }}>Approval queue</div>
-            <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap", alignItems: "center" }}>
+            <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap", alignItems: "center" }}>
               {batchMode ? (
                 <>
                   <span className="badge">{selectedBatchIds.size} selected</span>
@@ -208,20 +208,20 @@ export default function ReviewsPage() {
               <span className="badge">status:pending</span>
             </div>
           </div>
-          {error ? <div style={{ color: "var(--ml-text-secondary)" }}>{error}</div> : null}
+          {error ? <div style={{ color: "var(--nl-text-secondary)" }}>{error}</div> : null}
 
           {batchMode ? (
-            <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
+            <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
               <button
                 type="button"
                 disabled={isSubmitting}
                 onClick={() => void handleBatchDecision("approved")}
                 style={{
                   border: "none",
-                  borderRadius: "var(--ml-radius-md)",
+                  borderRadius: "var(--nl-radius-md)",
                   padding: "8px 16px",
-                  background: "var(--ml-accent-primary)",
-                  color: "var(--ml-text-primary)",
+                  background: "var(--nl-accent-primary)",
+                  color: "var(--nl-text-primary)",
                   fontWeight: 600,
                   cursor: "pointer",
                 }}
@@ -234,8 +234,8 @@ export default function ReviewsPage() {
                 onClick={() => void handleBatchDecision("rejected")}
                 className="surface-muted"
                 style={{
-                  border: "1px solid var(--ml-border-subtle)",
-                  borderRadius: "var(--ml-radius-md)",
+                  border: "1px solid var(--nl-border-subtle)",
+                  borderRadius: "var(--nl-radius-md)",
                   padding: "8px 16px",
                   cursor: "pointer",
                 }}
@@ -245,7 +245,7 @@ export default function ReviewsPage() {
             </div>
           ) : null}
 
-          <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
+          <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             {approvalQueue.map((item) => (
               <button
                 key={item.id}
@@ -253,17 +253,17 @@ export default function ReviewsPage() {
                 className="surface-muted"
                 onClick={() => batchMode ? toggleBatchItem(item.id) : setSelectedApprovalId(item.id)}
                 style={{
-                  padding: "var(--ml-space-4)",
+                  padding: "var(--nl-space-4)",
                   display: "flex",
                   justifyContent: "space-between",
-                  gap: "var(--ml-space-3)",
+                  gap: "var(--nl-space-3)",
                   alignItems: "center",
                   flexWrap: "wrap",
                   textAlign: "left",
                   width: "100%",
                   borderColor: batchMode
-                    ? selectedBatchIds.has(item.id) ? "var(--ml-accent-primary)" : undefined
-                    : featuredProposal?.id === item.id ? "var(--ml-accent-primary)" : undefined,
+                    ? 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,
@@ -271,9 +271,9 @@ export default function ReviewsPage() {
               >
                 <div style={{ display: "grid", gap: 4 }}>
                   <strong>{item.title}</strong>
-                  <span style={{ color: "var(--ml-text-secondary)" }}>{item.owner}</span>
+                  <span style={{ color: "var(--nl-text-secondary)" }}>{item.owner}</span>
                 </div>
-                <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
+                <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
                   {batchMode ? (
                     <span className="badge">{selectedBatchIds.has(item.id) ? "selected" : "unselected"}</span>
                   ) : null}
@@ -286,7 +286,7 @@ export default function ReviewsPage() {
         </section>
       </section>
 
-      <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
+      <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
         <label htmlFor="review-note" style={{ fontWeight: 600 }}>Review note</label>
         <textarea
           id="review-note"
@@ -296,11 +296,11 @@ export default function ReviewsPage() {
           rows={2}
           style={{
             width: "100%",
-            padding: "var(--ml-space-3)",
-            background: "var(--ml-bg-elevated)",
-            color: "var(--ml-text-primary)",
-            border: "1px solid var(--ml-border-subtle)",
-            borderRadius: "var(--ml-radius-md)",
+            padding: "var(--nl-space-3)",
+            background: "var(--nl-bg-elevated)",
+            color: "var(--nl-text-primary)",
+            border: "1px solid var(--nl-border-subtle)",
+            borderRadius: "var(--nl-radius-md)",
             resize: "vertical",
             fontFamily: "inherit",
             fontSize: "0.875rem",
diff --git a/web/src/app/(app)/search/page.tsx b/web/src/app/(app)/search/page.tsx
index eb5a1a5..6aecdb9 100644
--- a/web/src/app/(app)/search/page.tsx
+++ b/web/src/app/(app)/search/page.tsx
@@ -87,8 +87,8 @@ function SearchPageInner() {
       description="Lexical search, tag filtering, and retrieval entry points. Semantic ranking and explainability remain follow-up work."
       actions={<div className="badge">Backend-backed note search</div>}
     >
-      <section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--ml-space-4)" }}>
-        <aside className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
+      <section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-space-4)" }}>
+        <aside className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
             <div style={{ fontWeight: 700 }}>Saved searches</div>
             {query.trim() ? (
@@ -102,22 +102,22 @@ function SearchPageInner() {
               </button>
             ) : null}
           </div>
-          <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
+          <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             {savedViews.map((view) => (
               <div
                 key={view.id}
                 className="surface-muted"
-                style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}
+                style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
               >
                 <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
-                  <Link href={`/search?q=${encodeURIComponent(view.query)}`} style={{ display: "grid", gap: "var(--ml-space-2)" }}>
+                  <Link href={`/search?q=${encodeURIComponent(view.query)}`} style={{ display: "grid", gap: "var(--nl-space-2)" }}>
                     <strong>{view.name}</strong>
-                    <span style={{ color: "var(--ml-text-secondary)" }}>{view.query}</span>
+                    <span style={{ color: "var(--nl-text-secondary)" }}>{view.query}</span>
                   </Link>
                   <button
                     type="button"
                     onClick={() => void handleDeleteSavedView(view.id)}
-                    style={{ color: "var(--ml-text-secondary)", background: "none", border: "none", cursor: "pointer", fontSize: "0.75rem" }}
+                    style={{ color: "var(--nl-text-secondary)", background: "none", border: "none", cursor: "pointer", fontSize: "0.75rem" }}
                   >
                     Remove
                   </button>
@@ -125,20 +125,20 @@ function SearchPageInner() {
               </div>
             ))}
             {savedViews.length === 0 ? (
-              <span style={{ color: "var(--ml-text-secondary)", fontSize: "0.875rem" }}>No saved searches yet.</span>
+              <span style={{ color: "var(--nl-text-secondary)", fontSize: "0.875rem" }}>No saved searches yet.</span>
             ) : null}
           </div>
 
-          <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
+          <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
             <strong>Retrieval filters</strong>
-            <span style={{ color: "var(--ml-text-secondary)" }}>workspace:any</span>
-            <span style={{ color: "var(--ml-text-secondary)" }}>status:active + draft</span>
-            <span style={{ color: "var(--ml-text-secondary)" }}>relationship scope: linked + cited</span>
-            <span style={{ color: "var(--ml-text-secondary)" }}>explainability: matched fields</span>
+            <span style={{ color: "var(--nl-text-secondary)" }}>workspace:any</span>
+            <span style={{ color: "var(--nl-text-secondary)" }}>status:active + draft</span>
+            <span style={{ color: "var(--nl-text-secondary)" }}>relationship scope: linked + cited</span>
+            <span style={{ color: "var(--nl-text-secondary)" }}>explainability: matched fields</span>
           </div>
         </aside>
 
-        <section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}>
+        <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
           <input
             aria-label="Search notes"
             className="input-shell"
@@ -146,30 +146,30 @@ function SearchPageInner() {
             value={query}
             onChange={(event) => setQuery(event.target.value)}
           />
-          <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
+          <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
             <span className="badge">workspace:all</span>
             <span className="badge">status:active</span>
             <span className="badge">source:manual+agent</span>
             <span className="badge">matched:title+body</span>
           </div>
-          {error ? <div style={{ color: "var(--ml-text-secondary)" }}>{error}</div> : null}
-          <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
+          {error ? <div style={{ color: "var(--nl-text-secondary)" }}>{error}</div> : null}
+          <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             {notes.map((note) => (
-              <div key={note.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
-                <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.5fr) repeat(3, minmax(100px, auto))", gap: "var(--ml-space-3)", alignItems: "start" }}>
-                  <Link href={`/notes/${note.id}`} style={{ display: "grid", gap: "var(--ml-space-2)" }}>
+              <div key={note.id} className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
+                <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.5fr) repeat(3, minmax(100px, auto))", gap: "var(--nl-space-3)", alignItems: "start" }}>
+                  <Link href={`/notes/${note.id}`} style={{ display: "grid", gap: "var(--nl-space-2)" }}>
                     <strong>{note.title}</strong>
-                    <span style={{ color: "var(--ml-text-secondary)" }}>{note.excerpt}</span>
+                    <span style={{ color: "var(--nl-text-secondary)" }}>{note.excerpt}</span>
                   </Link>
-                  <Link href={`/search?q=${encodeURIComponent(note.status)}`} style={{ color: "var(--ml-text-secondary)" }}>
+                  <Link href={`/search?q=${encodeURIComponent(note.status)}`} style={{ color: "var(--nl-text-secondary)" }}>
                     {note.status}
                   </Link>
-                  <span style={{ color: "var(--ml-text-secondary)" }}>{note.updatedBy}</span>
-                  <Link href={`/search?q=${encodeURIComponent(note.workspaceId.replace("workspace-", ""))}`} style={{ color: "var(--ml-text-secondary)" }}>
+                  <span style={{ color: "var(--nl-text-secondary)" }}>{note.updatedBy}</span>
+                  <Link href={`/search?q=${encodeURIComponent(note.workspaceId.replace("workspace-", ""))}`} style={{ color: "var(--nl-text-secondary)" }}>
                     {note.workspaceId.replace("workspace-", "")}
                   </Link>
                 </div>
-                <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
+                <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
                   {note.tags.map((tag) => (
                     <Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`} className="badge">
                       #{tag}
diff --git a/web/src/app/(app)/settings/page.tsx b/web/src/app/(app)/settings/page.tsx
index f9f477a..6759972 100644
--- a/web/src/app/(app)/settings/page.tsx
+++ b/web/src/app/(app)/settings/page.tsx
@@ -7,22 +7,22 @@ export default function SettingsPage() {
       description="Auth/session controls, integration defaults, and workspace-level product preferences."
       actions={<div className="badge">Auth fallback active</div>}
     >
-      <section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "var(--ml-space-4)" }}>
-        <article className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
+      <section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "var(--nl-space-4)" }}>
+        <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
           <strong>Authentication</strong>
-          <div style={{ color: "var(--ml-text-secondary)" }}>
+          <div style={{ color: "var(--nl-text-secondary)" }}>
             Initial shell uses a demo session fallback until platform auth contracts are finalized.
           </div>
         </article>
-        <article className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
+        <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
           <strong>Telemetry & diagnostics</strong>
-          <div style={{ color: "var(--ml-text-secondary)" }}>
+          <div style={{ color: "var(--nl-text-secondary)" }}>
             Both clients are initialized on app boot with best-effort defaults and no hard dependency on backend readiness.
           </div>
         </article>
-        <article className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
+        <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
           <strong>Deferred configuration</strong>
-          <div style={{ color: "var(--ml-text-secondary)" }}>
+          <div style={{ color: "var(--nl-text-secondary)" }}>
             Feature flags, blob upload policies, saved views, and extraction preferences remain follow-up work.
           </div>
         </article>
diff --git a/web/src/app/(app)/workspaces/page.tsx b/web/src/app/(app)/workspaces/page.tsx
index 5424ce1..922fe74 100644
--- a/web/src/app/(app)/workspaces/page.tsx
+++ b/web/src/app/(app)/workspaces/page.tsx
@@ -118,27 +118,27 @@ function WorkspacesPageInner() {
         </button>
       }
     >
-      <section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--ml-space-4)" }}>
-        <aside className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
+      <section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-space-4)" }}>
+        <aside className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
           <div style={{ fontWeight: 700 }}>Saved views</div>
-          <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
+          <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             {savedViews.map((view) => (
               <Link
                 key={view.id}
                 href={view.id === "workspace-shared" ? "/workspaces?q=shared" : "/workspaces"}
                 className="surface-muted"
-                style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}
+                style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
               >
                 <strong>{view.name}</strong>
-                <span style={{ color: "var(--ml-text-secondary)" }}>{view.description}</span>
+                <span style={{ color: "var(--nl-text-secondary)" }}>{view.description}</span>
                 <span className="badge">{view.resultCount} results</span>
               </Link>
             ))}
           </div>
         </aside>
 
-        <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
-          <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
+        <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
+          <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             <input
               aria-label="Filter workspaces"
               className="input-shell"
@@ -146,7 +146,7 @@ function WorkspacesPageInner() {
               value={query}
               onChange={(event) => setQuery(event.target.value)}
             />
-            <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
+            <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
               <span className="badge">owner:any</span>
               <span className="badge">visibility:any</span>
               <span className="badge">sort:updated</span>
@@ -156,41 +156,41 @@ function WorkspacesPageInner() {
       </section>
 
       {error ? (
-        <section className="surface-card" style={{ padding: "var(--ml-space-6)", color: "var(--ml-text-secondary)" }}>
+        <section className="surface-card" style={{ padding: "var(--nl-space-6)", color: "var(--nl-text-secondary)" }}>
           {error}
         </section>
       ) : null}
-      <section style={{ display: "grid", gap: "var(--ml-space-4)" }}>
+      <section style={{ display: "grid", gap: "var(--nl-space-4)" }}>
         {filteredWorkspaces.map((workspace) => {
           const workspaceNotes = notesByWorkspace.get(workspace.id) ?? [];
           return (
-            <article key={workspace.id} className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}>
-              <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-4)", flexWrap: "wrap" }}>
+            <article key={workspace.id} className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
+              <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-4)", flexWrap: "wrap" }}>
                 <div>
-                  <div style={{ fontSize: "var(--ml-fs-xl)", fontWeight: 700 }}>{workspace.name}</div>
-                  <div style={{ color: "var(--ml-text-secondary)", marginTop: 6 }}>{workspace.description}</div>
+                  <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>{workspace.name}</div>
+                  <div style={{ color: "var(--nl-text-secondary)", marginTop: 6 }}>{workspace.description}</div>
                 </div>
                 <div style={{ display: "grid", gap: 8, justifyItems: "end" }}>
                   <Link href={`/workspaces?q=${encodeURIComponent(workspace.visibility)}`} className="badge">
                     {workspace.visibility}
                   </Link>
-                  <Link href={`/workspaces?q=${encodeURIComponent(workspace.owner)}`} style={{ color: "var(--ml-text-secondary)" }}>
+                  <Link href={`/workspaces?q=${encodeURIComponent(workspace.owner)}`} style={{ color: "var(--nl-text-secondary)" }}>
                     Owner: {workspace.owner}
                   </Link>
                 </div>
               </div>
-              <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
+              <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
                 {workspace.tags.map((tag) => (
                   <Link key={tag} href={`/workspaces?q=${encodeURIComponent(tag)}`} className="badge">
                     #{tag}
                   </Link>
                 ))}
               </div>
-              <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
+              <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
                 {workspaceNotes.map((note) => (
-                  <Link key={note.id} href={`/notes/${note.id}`} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
+                  <Link key={note.id} href={`/notes/${note.id}`} className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
                     <strong>{note.title}</strong>
-                    <span style={{ color: "var(--ml-text-secondary)" }}>{note.excerpt}</span>
+                    <span style={{ color: "var(--nl-text-secondary)" }}>{note.excerpt}</span>
                   </Link>
                 ))}
               </div>
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 275cb0c..22e13fd 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -5,15 +5,15 @@
 }
 
 html {
-  background: var(--ml-bg-canvas);
+  background: var(--nl-bg-canvas);
 }
 
 body {
   margin: 0;
   min-height: 100vh;
-  background: linear-gradient(180deg, var(--ml-bg-canvas) 0%, #0b1020 100%);
-  color: var(--ml-text-primary);
-  font-family: var(--ml-font-body);
+  background: linear-gradient(180deg, var(--nl-bg-canvas) 0%, #0b1020 100%);
+  color: var(--nl-text-primary);
+  font-family: var(--nl-font-body);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -41,26 +41,26 @@ button {
 }
 
 .sidebar {
-  border-right: 1px solid var(--ml-border-default);
+  border-right: 1px solid var(--nl-border-default);
   background: rgba(12, 17, 31, 0.82);
   backdrop-filter: blur(16px);
 }
 
 .main-panel {
   min-width: 0;
-  padding: var(--ml-space-8);
+  padding: var(--nl-space-8);
 }
 
 .surface-card {
-  border: 1px solid var(--ml-border-default);
-  border-radius: var(--ml-radius-md);
+  border: 1px solid var(--nl-border-default);
+  border-radius: var(--nl-radius-md);
   background: rgba(18, 23, 37, 0.86);
-  box-shadow: var(--ml-elevation-md);
+  box-shadow: var(--nl-elevation-md);
 }
 
 .surface-muted {
-  border: 1px solid var(--ml-border-default);
-  border-radius: var(--ml-radius-sm);
+  border: 1px solid var(--nl-border-default);
+  border-radius: var(--nl-radius-sm);
   background: rgba(26, 35, 53, 0.72);
 }
 
@@ -68,25 +68,25 @@ button {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  border-radius: var(--ml-radius-pill);
+  border-radius: var(--nl-radius-pill);
   padding: 6px 10px;
   background: rgba(90, 140, 255, 0.14);
-  color: var(--ml-text-primary);
-  font-size: var(--ml-fs-sm);
+  color: var(--nl-text-primary);
+  font-size: var(--nl-fs-sm);
 }
 
 .input-shell {
   width: 100%;
-  border: 1px solid var(--ml-border-default);
-  border-radius: var(--ml-radius-sm);
+  border: 1px solid var(--nl-border-default);
+  border-radius: var(--nl-radius-sm);
   background: rgba(10, 15, 28, 0.88);
-  color: var(--ml-text-primary);
+  color: var(--nl-text-primary);
   padding: 12px 14px;
 }
 
 .page-grid {
   display: grid;
-  gap: var(--ml-space-6);
+  gap: var(--nl-space-6);
 }
 
 @media (max-width: 980px) {
@@ -96,6 +96,6 @@ button {
 
   .sidebar {
     border-right: 0;
-    border-bottom: 1px solid var(--ml-border-default);
+    border-bottom: 1px solid var(--nl-border-default);
   }
 }
diff --git a/web/src/app/not-found.tsx b/web/src/app/not-found.tsx
index eefa489..b69d182 100644
--- a/web/src/app/not-found.tsx
+++ b/web/src/app/not-found.tsx
@@ -2,11 +2,11 @@ import Link from "next/link";
 
 export default function NotFoundPage() {
   return (
-    <main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: "var(--ml-space-8)" }}>
-      <section className="surface-card" style={{ padding: "var(--ml-space-8)", display: "grid", gap: "var(--ml-space-4)", maxWidth: 520 }}>
+    <main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: "var(--nl-space-8)" }}>
+      <section className="surface-card" style={{ padding: "var(--nl-space-8)", display: "grid", gap: "var(--nl-space-4)", maxWidth: 520 }}>
         <div className="badge">Missing note or route</div>
         <h1 style={{ margin: 0 }}>Not found</h1>
-        <p style={{ margin: 0, color: "var(--ml-text-secondary)" }}>
+        <p style={{ margin: 0, color: "var(--nl-text-secondary)" }}>
           The requested note or view does not exist or is no longer available for your current workspace access.
         </p>
         <Link href="/dashboard" className="surface-muted" style={{ padding: "12px 16px", width: "fit-content" }}>
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index d060f49..6505441 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -2,18 +2,18 @@ import Link from "next/link";
 
 export default function HomePage() {
   return (
-    <main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: "var(--ml-space-8)" }}>
-      <section className="surface-card" style={{ maxWidth: 760, padding: "var(--ml-space-8)", display: "grid", gap: "var(--ml-space-5)" }}>
+    <main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: "var(--nl-space-8)" }}>
+      <section className="surface-card" style={{ maxWidth: 760, padding: "var(--nl-space-8)", display: "grid", gap: "var(--nl-space-5)" }}>
         <div className="badge">Backend-backed web surface</div>
-        <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
-          <h1 style={{ margin: 0, fontFamily: "var(--ml-font-display)", fontSize: "var(--ml-fs-3xl)" }}>
+        <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
+          <h1 style={{ margin: 0, fontFamily: "var(--nl-font-display)", fontSize: "var(--nl-fs-3xl)" }}>
             NoteLett
           </h1>
-          <p style={{ margin: 0, color: "var(--ml-text-secondary)", lineHeight: 1.6 }}>
+          <p style={{ margin: 0, color: "var(--nl-text-secondary)", lineHeight: 1.6 }}>
             Structured notes workspace for humans and agents with search, review, and operational context.
           </p>
         </div>
-        <div style={{ display: "flex", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
+        <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)" }}>
             Open dashboard
           </Link>
diff --git a/web/src/components/AgentTimeline.tsx b/web/src/components/AgentTimeline.tsx
index ee5e0f8..9a79e4c 100644
--- a/web/src/components/AgentTimeline.tsx
+++ b/web/src/components/AgentTimeline.tsx
@@ -2,19 +2,19 @@ import type { AgentTimelineItem } from "@/lib/types";
 
 export function AgentTimeline({ items }: { items: AgentTimelineItem[] }) {
   return (
-    <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
-      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
+    <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
         <div style={{ fontWeight: 700 }}>Agent activity timeline</div>
         <span className="badge">review UX</span>
       </div>
       {items.map((item) => (
-        <div key={item.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
-          <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
+        <div key={item.id} className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
+          <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
             <strong>{item.actor}</strong>
-            <span style={{ color: "var(--ml-text-secondary)" }}>{item.timestamp}</span>
+            <span style={{ color: "var(--nl-text-secondary)" }}>{item.timestamp}</span>
           </div>
           <div>{item.action}</div>
-          <div style={{ color: "var(--ml-text-secondary)" }}>{item.summary}</div>
+          <div style={{ color: "var(--nl-text-secondary)" }}>{item.summary}</div>
           <div className="badge" style={{ width: "fit-content" }}>{item.status}</div>
         </div>
       ))}
diff --git a/web/src/components/AppShell.tsx b/web/src/components/AppShell.tsx
index d5b9596..5754cb6 100644
--- a/web/src/components/AppShell.tsx
+++ b/web/src/components/AppShell.tsx
@@ -22,16 +22,16 @@ export function AppShell({
         <div className="page-grid">
           <header
             className="surface-card"
-            style={{ padding: "var(--ml-space-6)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-4)", alignItems: "start", flexWrap: "wrap" }}
+            style={{ padding: "var(--nl-space-6)", display: "flex", justifyContent: "space-between", gap: "var(--nl-space-4)", alignItems: "start", flexWrap: "wrap" }}
           >
-            <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
+            <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
               <h1
                 id="page-title"
-                style={{ margin: 0, fontFamily: "var(--ml-font-display)", fontSize: "var(--ml-fs-2xl)", fontWeight: 700 }}
+                style={{ margin: 0, fontFamily: "var(--nl-font-display)", fontSize: "var(--nl-fs-2xl)", fontWeight: 700 }}
               >
                 {title}
               </h1>
-              <div style={{ color: "var(--ml-text-secondary)", maxWidth: 720 }}>{description}</div>
+              <div style={{ color: "var(--nl-text-secondary)", maxWidth: 720 }}>{description}</div>
             </div>
             {actions ? <div aria-label="Page actions">{actions}</div> : null}
           </header>
diff --git a/web/src/components/ArtifactPanel.tsx b/web/src/components/ArtifactPanel.tsx
index 4167f75..010edda 100644
--- a/web/src/components/ArtifactPanel.tsx
+++ b/web/src/components/ArtifactPanel.tsx
@@ -57,14 +57,14 @@ export function ArtifactPanel({
   }
 
   return (
-    <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
-      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
+    <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
         <div style={{ fontWeight: 700 }}>Artifacts</div>
         <span className="badge">blob-backed view</span>
       </div>
-      <div className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "grid", gap: "var(--ml-space-3)" }}>
-        <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
-          <label htmlFor="artifact-title" style={{ color: "var(--ml-text-secondary)" }}>
+      <div className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "grid", gap: "var(--nl-space-3)" }}>
+        <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
+          <label htmlFor="artifact-title" style={{ color: "var(--nl-text-secondary)" }}>
             Add artifact
           </label>
           <input
@@ -75,7 +75,7 @@ export function ArtifactPanel({
             placeholder="Artifact title"
           />
         </div>
-        <div style={{ display: "grid", gridTemplateColumns: "minmax(140px, 180px) minmax(0, 1fr)", gap: "var(--ml-space-3)" }}>
+        <div style={{ display: "grid", gridTemplateColumns: "minmax(140px, 180px) minmax(0, 1fr)", gap: "var(--nl-space-3)" }}>
           <select
             className="input-shell"
             value={artifactType}
@@ -110,10 +110,10 @@ export function ArtifactPanel({
             }}
             style={{
               border: "none",
-              borderRadius: "var(--ml-radius-md)",
+              borderRadius: "var(--nl-radius-md)",
               padding: "8px 12px",
-              background: "var(--ml-accent-primary)",
-              color: "var(--ml-text-primary)",
+              background: "var(--nl-accent-primary)",
+              color: "var(--nl-text-primary)",
               fontWeight: 600,
             }}
           >
@@ -122,13 +122,13 @@ export function ArtifactPanel({
         </div>
       </div>
       {artifacts.map((artifact) => (
-        <div key={artifact.id} className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
+        <div key={artifact.id} className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
           <div style={{ display: "grid", gap: 4 }}>
             <strong>{artifact.name}</strong>
-            <span style={{ color: "var(--ml-text-secondary)" }}>{artifact.type}</span>
+            <span style={{ color: "var(--nl-text-secondary)" }}>{artifact.type}</span>
           </div>
-          <div style={{ display: "flex", gap: "var(--ml-space-3)", alignItems: "center" }}>
-            <span style={{ color: "var(--ml-text-secondary)" }}>{artifact.status}</span>
+          <div style={{ display: "flex", gap: "var(--nl-space-3)", alignItems: "center" }}>
+            <span style={{ color: "var(--nl-text-secondary)" }}>{artifact.status}</span>
             {artifact.blobPath ? (
               <button
                 type="button"
diff --git a/web/src/components/LinkedNotesPanel.tsx b/web/src/components/LinkedNotesPanel.tsx
index 6be09af..eea270a 100644
--- a/web/src/components/LinkedNotesPanel.tsx
+++ b/web/src/components/LinkedNotesPanel.tsx
@@ -3,12 +3,12 @@ import type { LinkedNote } from "@/lib/types";
 
 export function LinkedNotesPanel({ linkedNotes }: { linkedNotes: LinkedNote[] }) {
   return (
-    <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
+    <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
       <div style={{ fontWeight: 700 }}>Linked notes</div>
       {linkedNotes.map((linkedNote) => (
-        <Link key={linkedNote.id} href={`/notes/${linkedNote.id}`} className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "grid", gap: 4 }}>
+        <Link key={linkedNote.id} href={`/notes/${linkedNote.id}`} className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "grid", gap: 4 }}>
           <strong>{linkedNote.title}</strong>
-          <span style={{ color: "var(--ml-text-secondary)" }}>{linkedNote.relationship}</span>
+          <span style={{ color: "var(--nl-text-secondary)" }}>{linkedNote.relationship}</span>
         </Link>
       ))}
     </section>
diff --git a/web/src/components/MetadataPanel.tsx b/web/src/components/MetadataPanel.tsx
index a83d11f..a0942e8 100644
--- a/web/src/components/MetadataPanel.tsx
+++ b/web/src/components/MetadataPanel.tsx
@@ -3,18 +3,18 @@ import type { NoteDetail } from "@/lib/types";
 
 export function MetadataPanel({ note }: { note: NoteDetail }) {
   return (
-    <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
+    <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
       <div style={{ fontWeight: 700 }}>Metadata</div>
-      <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
-        <div style={{ color: "var(--ml-text-secondary)" }}>Owner: {note.metadata.owner}</div>
-        <div style={{ color: "var(--ml-text-secondary)" }}>Source: {note.metadata.source}</div>
-        <Link href="/reviews" style={{ color: "var(--ml-text-secondary)" }}>
+      <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
+        <div style={{ color: "var(--nl-text-secondary)" }}>Owner: {note.metadata.owner}</div>
+        <div style={{ color: "var(--nl-text-secondary)" }}>Source: {note.metadata.source}</div>
+        <Link href="/reviews" style={{ color: "var(--nl-text-secondary)" }}>
           Review state: {note.metadata.reviewState}
         </Link>
-        <div style={{ color: "var(--ml-text-secondary)" }}>Tasks: {note.metadata.taskCount}</div>
-        <div style={{ color: "var(--ml-text-secondary)" }}>Artifacts: {note.metadata.artifactCount}</div>
+        <div style={{ color: "var(--nl-text-secondary)" }}>Tasks: {note.metadata.taskCount}</div>
+        <div style={{ color: "var(--nl-text-secondary)" }}>Artifacts: {note.metadata.artifactCount}</div>
       </div>
-      <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
+      <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
         {note.tags.map((tag) => (
           <Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`} className="badge">
             #{tag}
diff --git a/web/src/components/NoteEditor.tsx b/web/src/components/NoteEditor.tsx
index cf1e317..a04681e 100644
--- a/web/src/components/NoteEditor.tsx
+++ b/web/src/components/NoteEditor.tsx
@@ -19,16 +19,16 @@ export function NoteEditor({
   }, [note.body, note.title]);
 
   return (
-    <section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}>
+    <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
       <form
-        style={{ display: "grid", gap: "var(--ml-space-4)" }}
+        style={{ display: "grid", gap: "var(--nl-space-4)" }}
         onSubmit={(event) => {
           event.preventDefault();
           void onSave({ title, body });
         }}
       >
-        <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
-          <label htmlFor="note-title" style={{ color: "var(--ml-text-secondary)" }}>
+        <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
+          <label htmlFor="note-title" style={{ color: "var(--nl-text-secondary)" }}>
             Title
           </label>
           <input
@@ -39,8 +39,8 @@ export function NoteEditor({
           />
         </div>
 
-        <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
-          <label htmlFor="note-body" style={{ color: "var(--ml-text-secondary)" }}>
+        <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
+          <label htmlFor="note-body" style={{ color: "var(--nl-text-secondary)" }}>
             Body
           </label>
           <textarea
@@ -58,10 +58,10 @@ export function NoteEditor({
             disabled={isSaving}
             style={{
               border: "none",
-              borderRadius: "var(--ml-radius-md)",
+              borderRadius: "var(--nl-radius-md)",
               padding: "10px 14px",
-              background: "var(--ml-accent-primary)",
-              color: "var(--ml-text-primary)",
+              background: "var(--nl-accent-primary)",
+              color: "var(--nl-text-primary)",
               fontWeight: 600,
             }}
           >
diff --git a/web/src/components/ProposalReviewCard.tsx b/web/src/components/ProposalReviewCard.tsx
index 6271fd9..77b7a14 100644
--- a/web/src/components/ProposalReviewCard.tsx
+++ b/web/src/components/ProposalReviewCard.tsx
@@ -14,10 +14,10 @@ export function ProposalReviewCard({
   isSubmitting?: boolean;
 }) {
   return (
-    <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
-      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
+    <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
         <div style={{ fontWeight: 700 }}>{title}</div>
-        <div style={{ display: "flex", gap: "var(--ml-space-2)", alignItems: "center", flexWrap: "wrap" }}>
+        <div style={{ display: "flex", gap: "var(--nl-space-2)", alignItems: "center", flexWrap: "wrap" }}>
           <span className="badge">before / after</span>
           {onReject ? (
             <button
@@ -25,7 +25,7 @@ export function ProposalReviewCard({
               className="surface-muted"
               onClick={onReject}
               disabled={isSubmitting}
-              style={{ border: "1px solid var(--ml-border-subtle)", borderRadius: "var(--ml-radius-md)", padding: "8px 12px" }}
+              style={{ border: "1px solid var(--nl-border-subtle)", borderRadius: "var(--nl-radius-md)", padding: "8px 12px" }}
             >
               Reject
             </button>
@@ -37,10 +37,10 @@ export function ProposalReviewCard({
               disabled={isSubmitting}
               style={{
                 border: "none",
-                borderRadius: "var(--ml-radius-md)",
+                borderRadius: "var(--nl-radius-md)",
                 padding: "8px 12px",
-                background: "var(--ml-accent-primary)",
-                color: "var(--ml-text-primary)",
+                background: "var(--nl-accent-primary)",
+                color: "var(--nl-text-primary)",
                 fontWeight: 600,
               }}
             >
@@ -49,14 +49,14 @@ export function ProposalReviewCard({
           ) : null}
         </div>
       </div>
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--ml-space-4)" }}>
-        <div className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--nl-space-4)" }}>
+        <div className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
           <strong>Before</strong>
-          <div style={{ color: "var(--ml-text-secondary)", whiteSpace: "pre-wrap" }}>{before}</div>
+          <div style={{ color: "var(--nl-text-secondary)", whiteSpace: "pre-wrap" }}>{before}</div>
         </div>
-        <div className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
+        <div className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
           <strong>After</strong>
-          <div style={{ color: "var(--ml-text-secondary)", whiteSpace: "pre-wrap" }}>{after}</div>
+          <div style={{ color: "var(--nl-text-secondary)", whiteSpace: "pre-wrap" }}>{after}</div>
         </div>
       </div>
     </section>
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index db931f1..fea58e4 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -17,22 +17,22 @@ export function Sidebar() {
   const pathname = usePathname() ?? "";
 
   return (
-    <aside className="sidebar" style={{ padding: "var(--ml-space-6)" }} aria-label="Primary">
-      <div style={{ display: "grid", gap: "var(--ml-space-6)" }}>
-        <div className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
+    <aside className="sidebar" style={{ padding: "var(--nl-space-6)" }} aria-label="Primary">
+      <div style={{ display: "grid", gap: "var(--nl-space-6)" }}>
+        <div className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
           <div className="badge" style={{ width: "fit-content" }}>
             <Sparkles size={14} />
             Web Agent workstream
           </div>
           <div>
-            <div style={{ fontSize: "var(--ml-fs-xl)", fontFamily: "var(--ml-font-display)", fontWeight: 700 }}>{PRODUCT_NAME}</div>
-            <div style={{ color: "var(--ml-text-secondary)", marginTop: 6 }}>
+            <div style={{ fontSize: "var(--nl-fs-xl)", fontFamily: "var(--nl-font-display)", fontWeight: 700 }}>{PRODUCT_NAME}</div>
+            <div style={{ color: "var(--nl-text-secondary)", marginTop: 6 }}>
               Human-first notes UX with agent-safe structure and review surfaces.
             </div>
           </div>
         </div>
 
-        <nav aria-label="Primary navigation" style={{ display: "grid", gap: "var(--ml-space-2)" }}>
+        <nav aria-label="Primary navigation" style={{ display: "grid", gap: "var(--nl-space-2)" }}>
           {navItems.map((item) => {
             const Icon = item.icon;
             const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
@@ -45,9 +45,9 @@ export function Sidebar() {
                 style={{
                   display: "flex",
                   alignItems: "center",
-                  gap: "var(--ml-space-3)",
+                  gap: "var(--nl-space-3)",
                   padding: "12px 14px",
-                  borderColor: active ? "var(--ml-accent-primary)" : undefined,
+                  borderColor: active ? "var(--nl-accent-primary)" : undefined,
                   background: active ? "rgba(90, 140, 255, 0.16)" : undefined,
                 }}
               >
@@ -58,10 +58,10 @@ export function Sidebar() {
           })}
         </nav>
 
-        <div className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-2)" }}>
+        <div className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-2)" }}>
           <strong>Keyboard flow</strong>
-          <span style={{ color: "var(--ml-text-secondary)" }}>Use Tab to move between navigation, filters, and dense result surfaces.</span>
-          <span style={{ color: "var(--ml-text-secondary)" }}>Use the skip link to jump directly into page content.</span>
+          <span style={{ color: "var(--nl-text-secondary)" }}>Use Tab to move between navigation, filters, and dense result surfaces.</span>
+          <span style={{ color: "var(--nl-text-secondary)" }}>Use the skip link to jump directly into page content.</span>
         </div>
       </div>
     </aside>
diff --git a/web/src/components/TaskReviewPanel.tsx b/web/src/components/TaskReviewPanel.tsx
index 2a06e50..fb2c95d 100644
--- a/web/src/components/TaskReviewPanel.tsx
+++ b/web/src/components/TaskReviewPanel.tsx
@@ -28,14 +28,14 @@ export function TaskReviewPanel({
   }
 
   return (
-    <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
-      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
+    <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
         <div style={{ fontWeight: 700 }}>Task extraction review</div>
         <span className="badge">backend-backed review</span>
       </div>
-      <div className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "grid", gap: "var(--ml-space-3)" }}>
-        <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
-          <label htmlFor="task-title" style={{ color: "var(--ml-text-secondary)" }}>
+      <div className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "grid", gap: "var(--nl-space-3)" }}>
+        <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
+          <label htmlFor="task-title" style={{ color: "var(--nl-text-secondary)" }}>
             Add task
           </label>
           <input
@@ -62,10 +62,10 @@ export function TaskReviewPanel({
             }}
             style={{
               border: "none",
-              borderRadius: "var(--ml-radius-md)",
+              borderRadius: "var(--nl-radius-md)",
               padding: "8px 12px",
-              background: "var(--ml-accent-primary)",
-              color: "var(--ml-text-primary)",
+              background: "var(--nl-accent-primary)",
+              color: "var(--nl-text-primary)",
               fontWeight: 600,
             }}
           >
@@ -74,12 +74,12 @@ export function TaskReviewPanel({
         </div>
       </div>
       {tasks.map((task) => (
-        <div key={task.id} className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
+        <div key={task.id} className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
           <div style={{ display: "grid", gap: 4 }}>
             <strong>{task.title}</strong>
-            <span style={{ color: "var(--ml-text-secondary)" }}>Source: {task.source}</span>
+            <span style={{ color: "var(--nl-text-secondary)" }}>Source: {task.source}</span>
           </div>
-          <span style={{ color: "var(--ml-text-secondary)" }}>{task.status}</span>
+          <span style={{ color: "var(--nl-text-secondary)" }}>{task.status}</span>
         </div>
       ))}
     </section>