diff --git a/src/App.css b/src/App.css
index d00dd29..55f2d30 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,17 +14,9 @@
         "Writer IBM Plex Mono", "IBM Plex Mono", "SF Mono", Monaco,
         "Cascadia Code", monospace;
 
-    /* FIXME: Remove in favor of tw built-ins */
-    --font-weight-light: 300;
-    --font-weight-regular: 400;
-    --font-weight-medium: 500;
-    --font-weight-semibold: 600;
-    --font-weight-bold: 700;
-
-    /* FIXME: remove bg prefix */
-    --color-bg-primary: #161616;
-    --color-bg-hover: #262626;
-    --color-bg-active: #393939;
+    --color-surface-primary: #161616;
+    --color-surface-hover: #262626;
+    --color-surface-active: #393939;
 
     --color-layer-01: #262626;
     --color-layer-02: #393939;
@@ -38,11 +30,10 @@
     --color-field-hover-01: #262626;
     --color-field-hover-02: #393939;
 
-    /* FIXME: remove border prefix */
-    --color-border-subtle: #393939;
-    --color-border-strong: #525252;
-    --color-border-inverse: #ffffff;
-    --color-border-interactive: #33b1ff;
+    --color-stroke-subtle: #393939;
+    --color-stroke-strong: #525252;
+    --color-stroke-inverse: #ffffff;
+    --color-stroke-interactive: #33b1ff;
 
     --color-text-primary: #f2f4f8;
     --color-text-secondary: #dde1e6;
@@ -95,23 +86,6 @@
     --weight-preview-heading: 600;
     --weight-preview-table-heading: 600;
 
-    /* FIXME: remove in favor of tw built-ins */
-    --radius-none: 0;
-    --radius-sm: 2px;
-    --radius-md: 4px;
-    --radius-lg: 6px;
-    --radius-xl: 8px;
-    --radius-2xl: 12px;
-    --radius-full: 9999px;
-
-    /* FIXME: remove in favor of tw built-ins */
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
-    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5);
-    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.6);
-    --shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.7);
-    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.4);
-
     --z-dropdown: 1000;
     --z-sticky: 1020;
     --z-fixed: 1030;
@@ -205,16 +179,16 @@ body,
 }
 
 .sidebar-drop-insertion-line {
-    background: var(--color-border-interactive);
+    background: var(--color-stroke-interactive);
 }
 
 .sidebar-drop-insertion-dot {
-    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-border-interactive) 55%, transparent);
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-stroke-interactive) 55%, transparent);
 }
 
 .sidebar-folder-spring-pending {
-    border: 1px dashed color-mix(in oklab, var(--color-border-interactive) 70%, transparent);
-    background: color-mix(in oklab, var(--color-layer-hover-01) 78%, var(--color-border-interactive) 22%);
+    border: 1px dashed color-mix(in oklab, var(--color-stroke-interactive) 70%, transparent);
+    background: color-mix(in oklab, var(--color-layer-hover-01) 78%, var(--color-stroke-interactive) 22%);
     animation: sidebar-spring-folder-pulse 0.8s ease-out infinite;
 }
 
@@ -228,7 +202,7 @@ body,
     gap: 0.35rem;
     max-width: 280px;
     padding: 0.35rem 0.55rem;
-    border: 1px solid var(--color-border-interactive);
+    border: 1px solid var(--color-stroke-interactive);
     border-radius: 6px;
     background: var(--color-layer-02);
     color: var(--color-text-primary);
@@ -273,9 +247,9 @@ body,
 
 [data-theme="light"] {
     color-scheme: light;
-    --color-bg-primary: #f2f4f8;
-    --color-bg-hover: #dde1e6;
-    --color-bg-active: #bec6cf;
+    --color-surface-primary: #f2f4f8;
+    --color-surface-hover: #dde1e6;
+    --color-surface-active: #bec6cf;
     --color-layer-01: #dde1e6;
     --color-layer-02: #f2f4f8;
     --color-layer-03: #dde1e6;
@@ -287,10 +261,10 @@ body,
     --color-field-02: #f2f4f8;
     --color-field-hover-01: #bec6cf;
     --color-field-hover-02: #a1acba;
-    --color-border-subtle: #bec6cf;
-    --color-border-strong: #a1acba;
-    --color-border-inverse: #272d35;
-    --color-border-interactive: #0f62fe;
+    --color-stroke-subtle: #bec6cf;
+    --color-stroke-strong: #a1acba;
+    --color-stroke-inverse: #272d35;
+    --color-stroke-interactive: #0f62fe;
     --color-text-primary: #272d35;
     --color-text-secondary: #525f70;
     --color-text-placeholder: #68788d;
@@ -379,13 +353,13 @@ body,
 
 .preview-content h1 {
     font-size: var(--font-size-preview-h1);
-    border-bottom: var(--border-width-preview-heading) solid var(--color-border-subtle);
+    border-bottom: var(--border-width-preview-heading) solid var(--color-stroke-subtle);
     padding-bottom: 0.3em;
 }
 
 .preview-content h2 {
     font-size: var(--font-size-preview-h2);
-    border-bottom: var(--border-width-preview-heading) solid var(--color-border-subtle);
+    border-bottom: var(--border-width-preview-heading) solid var(--color-stroke-subtle);
     padding-bottom: 0.3em;
 }
 
@@ -428,7 +402,7 @@ body,
 }
 
 .preview-content blockquote {
-    border-left: var(--border-width-preview-blockquote) solid var(--color-border-subtle);
+    border-left: var(--border-width-preview-blockquote) solid var(--color-stroke-subtle);
     margin: 0 0 var(--spacing-preview-block-gap) 0;
     padding: 0 1em;
     color: var(--color-text-secondary);
@@ -450,7 +424,7 @@ body,
 }
 
 .preview-content :is(th, td) {
-    border: 1px solid var(--color-border-subtle);
+    border: 1px solid var(--color-stroke-subtle);
     padding: var(--spacing-preview-table-cell);
     text-align: left;
 }
@@ -462,7 +436,7 @@ body,
 
 .preview-content hr {
     border: none;
-    border-top: 1px solid var(--color-border-subtle);
+    border-top: 1px solid var(--color-stroke-subtle);
     margin: var(--spacing-preview-hr-gap) 0;
 }
 
diff --git a/src/App.tsx b/src/App.tsx
index 1887e35..4192bd6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -51,7 +51,7 @@ function App() {
   return (
     <div
       data-theme={theme}
-      className="relative h-screen overflow-hidden flex flex-col bg-bg-primary text-text-primary font-sans">
+      className="relative h-screen overflow-hidden flex flex-col bg-surface-primary text-text-primary font-sans">
       {isFocusMode ? null : <AppHeaderBar />}
       <AppContent isFocusMode={isFocusMode} />
       <RoutedSettingsSheet />
diff --git a/src/Router.tsx b/src/Router.tsx
index 5e66b77..3ede82c 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -4,7 +4,7 @@ import { useHashLocation } from "wouter/use-hash-location";
 import App from "./App";
 
 const NotFoundRoute = () => (
-  <main className="flex h-dvh items-center justify-center bg-bg-primary text-text-primary">
+  <main className="flex h-dvh items-center justify-center bg-surface-primary text-text-primary">
     <p className="text-sm text-text-secondary">Route not found.</p>
   </main>
 );
diff --git a/src/__tests__/ContextMenu.test.tsx b/src/__tests__/ContextMenu.test.tsx
index 5993003..2d9e95b 100644
--- a/src/__tests__/ContextMenu.test.tsx
+++ b/src/__tests__/ContextMenu.test.tsx
@@ -61,7 +61,7 @@ describe("ContextMenu", () => {
 
     it("renders divider between items", () => {
       const { container } = render(<ContextMenuHarness items={defaultItems} isOpen />);
-      const divider = container.querySelector(".bg-border-subtle.h-px");
+      const divider = container.querySelector(".bg-stroke-subtle.h-px");
       expect(divider).toBeInTheDocument();
     });
 
diff --git a/src/__tests__/DocumentItem.test.tsx b/src/__tests__/DocumentItem.test.tsx
index 6a43c59..16033ec 100644
--- a/src/__tests__/DocumentItem.test.tsx
+++ b/src/__tests__/DocumentItem.test.tsx
@@ -57,7 +57,7 @@ describe("DocumentItem", () => {
       render(<DocumentItem {...props} />);
 
       const item = screen.getByText("Test Document").closest(".sidebar-item");
-      expect(item).not.toHaveClass("ring-border-interactive");
+      expect(item).not.toHaveClass("ring-stroke-interactive");
       expect(document.querySelector(".sidebar-drop-edge-pulse")).toBeTruthy();
     });
   });
diff --git a/src/__tests__/QuickCaptureForm.test.tsx b/src/__tests__/QuickCaptureForm.test.tsx
index c31e910..95c5f78 100644
--- a/src/__tests__/QuickCaptureForm.test.tsx
+++ b/src/__tests__/QuickCaptureForm.test.tsx
@@ -2,10 +2,12 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { QuickCaptureForm } from "../components/QuickCapture/QuickCaptureForm";
 
-const SAVE_TARGETS = [
-  { id: "1:inbox", locationId: 1, relPath: "inbox", label: "Workspace A / inbox" },
-  { id: "1:inbox/projects", locationId: 1, relPath: "inbox/projects", label: "Workspace A / inbox/projects" },
-];
+const SAVE_TARGETS = [{ id: "1:inbox", locationId: 1, relPath: "inbox", label: "Workspace A / inbox" }, {
+  id: "1:inbox/projects",
+  locationId: 1,
+  relPath: "inbox/projects",
+  label: "Workspace A / inbox/projects",
+}];
 
 describe("QuickCaptureForm", () => {
   it("submits on Enter in quick note mode", () => {
diff --git a/src/__tests__/TreeItem.test.tsx b/src/__tests__/TreeItem.test.tsx
index 69e694d..fee5d02 100644
--- a/src/__tests__/TreeItem.test.tsx
+++ b/src/__tests__/TreeItem.test.tsx
@@ -11,6 +11,6 @@ describe("TreeItem", () => {
 
     expect(screen.getByText("Folder")).toBeInTheDocument();
     expect(container.firstChild).toHaveClass("!bg-layer-hover-01");
-    expect(container.firstChild).toHaveClass("ring-border-interactive");
+    expect(container.firstChild).toHaveClass("ring-stroke-interactive");
   });
 });
diff --git a/src/components/AppLayout/AppHeaderBar.tsx b/src/components/AppLayout/AppHeaderBar.tsx
index 487ef0d..36bba95 100644
--- a/src/components/AppLayout/AppHeaderBar.tsx
+++ b/src/components/AppLayout/AppHeaderBar.tsx
@@ -93,7 +93,7 @@ function SearchRow(
     <div className="flex items-center gap-2">
       <Button
         onClick={onOpenSearch}
-        className={`flex items-center gap-1.5 px-3 py-1.5 bg-field-01 border border-border-subtle rounded text-text-secondary text-[0.8125rem] cursor-pointer ${
+        className={`flex items-center gap-1.5 px-3 py-1.5 bg-field-01 border border-stroke-subtle rounded text-text-secondary text-[0.8125rem] cursor-pointer ${
           iconOnly ? "w-8 h-8 px-0 justify-center" : ""
         }`}
         title={`Search (${searchShortcut})`}>
@@ -212,7 +212,7 @@ export function AppHeaderBar() {
   }, [closeStyleDiagnostics, openStyleDiagnostics, styleDiagnosticsOpen]);
 
   return (
-    <header className="h-[48px] bg-layer-01 border-b border-border-subtle flex items-center justify-between px-2.5 sm:px-4 shrink-0 gap-2">
+    <header className="h-[48px] bg-layer-01 border-b border-stroke-subtle flex items-center justify-between px-2.5 sm:px-4 shrink-0 gap-2">
       <AppTitle hideTitle={isCompact} version={version} />
       <SearchRow
         onOpenSearch={handleOpenSearch}
diff --git a/src/components/AppLayout/BackendAlerts.tsx b/src/components/AppLayout/BackendAlerts.tsx
index e93fd51..b1d8691 100644
--- a/src/components/AppLayout/BackendAlerts.tsx
+++ b/src/components/AppLayout/BackendAlerts.tsx
@@ -26,7 +26,7 @@ const ConflictsAlert = ({ count, transition }: { count: number; transition: Aler
     animate={ALERT.ANIMATE}
     exit={ALERT.EXIT}
     transition={transition}
-    className="bg-accent-yellow text-bg-primary px-4 py-3 rounded-md shadow-xl">
+    className="bg-accent-yellow text-surface-primary px-4 py-3 rounded-md shadow-xl">
     <strong>Conflicts Detected</strong>
     <p className="mt-1 text-[0.8125rem]">{count} file(s) have conflicts that need attention.</p>
   </motion.div>
diff --git a/src/components/AppLayout/DiagnosticsPanel.tsx b/src/components/AppLayout/DiagnosticsPanel.tsx
index 55a14dc..b6ee363 100644
--- a/src/components/AppLayout/DiagnosticsPanel.tsx
+++ b/src/components/AppLayout/DiagnosticsPanel.tsx
@@ -35,7 +35,7 @@ function MatchItem({ match, onClick }: { match: StyleMatch; onClick: (match: Sty
     <Button
       type="button"
       onClick={clickHandler}
-      className="w-full text-left px-3 py-2 hover:bg-layer-hover border-b border-border-subtle last:border-b-0 cursor-pointer bg-transparent border-l-0 border-r-0 border-t-0">
+      className="w-full text-left px-3 py-2 hover:bg-layer-hover border-b border-stroke-subtle last:border-b-0 cursor-pointer bg-transparent border-l-0 border-r-0 border-t-0">
       <div className="flex items-center gap-2">
         <span className="text-xs font-mono px-1.5 py-0.5 rounded" style={matchStyle}>{match.text}</span>
         <span className="text-xs text-text-secondary ml-auto">L{match.line}</span>
@@ -61,7 +61,7 @@ function CategorySection(
 
   return (
     <div className="mb-4">
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-border-subtle">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-stroke-subtle">
         <span className="w-2 h-2 rounded-full" style={labelStyle} />
         <h3 className="m-0 text-xs font-medium text-text-primary">{CATEGORY_LABELS[category]}</h3>
         <span className="text-xs text-text-secondary ml-auto">{matches.length}</span>
@@ -92,7 +92,7 @@ const DiagnosticsPanelHeader = (
   }, [styleCheckEnabled, totalCount]);
 
   return (
-    <div className="flex items-center justify-between px-4 py-3 border-b border-border-subtle">
+    <div className="flex items-center justify-between px-4 py-3 border-b border-stroke-subtle">
       <div>
         <h2 className="m-0 text-sm font-medium text-text-primary">Style Check</h2>
         <p className="m-0 text-xs text-text-secondary">{subtitle}</p>
diff --git a/src/components/AppLayout/FocusModePanel.tsx b/src/components/AppLayout/FocusModePanel.tsx
index 168bba6..d4ddf8f 100644
--- a/src/components/AppLayout/FocusModePanel.tsx
+++ b/src/components/AppLayout/FocusModePanel.tsx
@@ -77,7 +77,7 @@ export function FocusModePanel({ editor, statusBar, saveStatus, hasActiveDocumen
         animate={FOCUS.ANIMATE}
         exit={FOCUS.EXIT}
         transition={transition}
-        className="fixed inset-0 z-50 flex flex-col bg-bg-primary">
+        className="fixed inset-0 z-50 flex flex-col bg-surface-primary">
         <FocusHeader
           onExit={handleExit}
           onOpenHelp={handleOpenHelp}
diff --git a/src/components/AppLayout/LayoutSettingsPanel/AddPatternForm.tsx b/src/components/AppLayout/LayoutSettingsPanel/AddPatternForm.tsx
index eb94512..c29512d 100644
--- a/src/components/AppLayout/LayoutSettingsPanel/AddPatternForm.tsx
+++ b/src/components/AppLayout/LayoutSettingsPanel/AddPatternForm.tsx
@@ -42,11 +42,11 @@ export const AddPatternForm = ({ onAddPattern }: { onAddPattern: AddPatternFn })
         value={patternValue}
         onChange={handlePatternChange}
         placeholder="Pattern to flag"
-        className="w-full h-7 px-2 text-xs rounded border border-border-subtle bg-field-01 text-text-primary" />
+        className="w-full h-7 px-2 text-xs rounded border border-stroke-subtle bg-field-01 text-text-primary" />
       <select
         value={categoryValue}
         onChange={handleCategoryChange}
-        className="w-full h-7 px-2 text-xs rounded border border-border-subtle bg-field-01 text-text-primary">
+        className="w-full h-7 px-2 text-xs rounded border border-stroke-subtle bg-field-01 text-text-primary">
         <option value="filler">Filler</option>
         <option value="redundancy">Redundancy</option>
         <option value="cliche">Cliché</option>
@@ -56,7 +56,7 @@ export const AddPatternForm = ({ onAddPattern }: { onAddPattern: AddPatternFn })
         value={replacementValue}
         onChange={handleReplacementChange}
         placeholder="Replacement (optional)"
-        className="w-full h-7 px-2 text-xs rounded border border-border-subtle bg-field-01 text-text-primary" />
+        className="w-full h-7 px-2 text-xs rounded border border-stroke-subtle bg-field-01 text-text-primary" />
       <Button
         type="button"
         onClick={handleAddPattern}
diff --git a/src/components/AppLayout/LayoutSettingsPanel/CustomPattern.tsx b/src/components/AppLayout/LayoutSettingsPanel/CustomPattern.tsx
index 238d308..cad35c4 100644
--- a/src/components/AppLayout/LayoutSettingsPanel/CustomPattern.tsx
+++ b/src/components/AppLayout/LayoutSettingsPanel/CustomPattern.tsx
@@ -28,13 +28,13 @@ const RemovePatternButton = (
 export const CustomPattern = (
   { settings, onRemovePattern }: { settings: StyleCheckSettings; onRemovePattern: (index: number) => void },
 ) => (
-  <div className="max-h-24 overflow-y-auto border border-border-subtle rounded">
+  <div className="max-h-24 overflow-y-auto border border-stroke-subtle rounded">
     {settings.customPatterns.map((pattern, index) => {
       const key = `${pattern.category}-${pattern.text}`;
       return (
         <div
           key={key}
-          className="flex items-center justify-between px-2 py-1.5 text-xs border-b border-border-subtle last:border-b-0">
+          className="flex items-center justify-between px-2 py-1.5 text-xs border-b border-stroke-subtle last:border-b-0">
           <PatternLabel pattern={pattern} />
           <RemovePatternButton index={index} onRemovePattern={onRemovePattern} />
         </div>
diff --git a/src/components/AppLayout/LayoutSettingsPanel/DimmingModeRow.tsx b/src/components/AppLayout/LayoutSettingsPanel/DimmingModeRow.tsx
index 1c0b87a..b427f26 100644
--- a/src/components/AppLayout/LayoutSettingsPanel/DimmingModeRow.tsx
+++ b/src/components/AppLayout/LayoutSettingsPanel/DimmingModeRow.tsx
@@ -19,7 +19,7 @@ export const DimmingModeRow = ({ value, setter }: DimmingModeRowProps) => {
       <select
         value={value}
         onChange={handleDimmingModeChange}
-        className="w-full h-9 px-2.5 rounded border border-border-subtle bg-field-01 text-text-primary text-sm">
+        className="w-full h-9 px-2.5 rounded border border-stroke-subtle bg-field-01 text-text-primary text-sm">
         {options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
       </select>
       <p className="m-0 text-xs text-text-secondary mt-1">Dim all text except the active region.</p>
diff --git a/src/components/AppLayout/LayoutSettingsPanel/FontRows.tsx b/src/components/AppLayout/LayoutSettingsPanel/FontRows.tsx
index 6287cb4..db96160 100644
--- a/src/components/AppLayout/LayoutSettingsPanel/FontRows.tsx
+++ b/src/components/AppLayout/LayoutSettingsPanel/FontRows.tsx
@@ -23,7 +23,7 @@ export const FontFamilyRow = ({ value, setter }: FontFamilyRowProps) => (
       id="editor-font-family"
       value={value}
       onChange={setter}
-      className="w-full h-9 px-2.5 rounded border border-border-subtle bg-field-01 text-text-primary text-sm">
+      className="w-full h-9 px-2.5 rounded border border-stroke-subtle bg-field-01 text-text-primary text-sm">
       {EDITOR_FONT_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
     </select>
   </div>
diff --git a/src/components/AppLayout/LayoutSettingsPanel/LayoutSettingsPanel.tsx b/src/components/AppLayout/LayoutSettingsPanel/LayoutSettingsPanel.tsx
index 866e11d..e3a7e0a 100644
--- a/src/components/AppLayout/LayoutSettingsPanel/LayoutSettingsPanel.tsx
+++ b/src/components/AppLayout/LayoutSettingsPanel/LayoutSettingsPanel.tsx
@@ -23,7 +23,7 @@ const SettingsBody = ({ scope }: { scope: SettingsScope }) => (
       title="Accessibility"
       description="Configure motion and display preferences."
       className={cn(
-        scope === "full" && "rounded-lg border border-border-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm",
+        scope === "full" && "rounded-lg border border-stroke-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm",
       )}
       contentClassName={cn(scope === "full" && "pb-3")}>
       <AccessibilitySection />
@@ -33,7 +33,7 @@ const SettingsBody = ({ scope }: { scope: SettingsScope }) => (
       description="Control visibility of core app UI regions."
       defaultOpen
       className={cn(
-        scope === "full" && "rounded-lg border border-border-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm",
+        scope === "full" && "rounded-lg border border-stroke-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm",
       )}
       contentClassName={cn(scope === "full" && "pb-3")}>
       <ChromeSettingsSection />
@@ -43,7 +43,7 @@ const SettingsBody = ({ scope }: { scope: SettingsScope }) => (
       description="Tune text presentation, wrapping, and typography."
       defaultOpen
       className={cn(
-        scope === "full" && "rounded-lg border border-border-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm",
+        scope === "full" && "rounded-lg border border-stroke-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm",
       )}
       contentClassName={cn(scope === "full" && "pb-3")}>
       <EditorSettingsSection />
@@ -53,21 +53,21 @@ const SettingsBody = ({ scope }: { scope: SettingsScope }) => (
         <CollapsibleSection
           title="Focus Mode"
           description="Configure centered writing and dimming behavior."
-          className="rounded-lg border border-border-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm"
+          className="rounded-lg border border-stroke-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm"
           contentClassName="pb-3">
           <FocusModeSection />
         </CollapsibleSection>
         <CollapsibleSection
           title="Writer's Tools"
           description="Adjust writing analysis and guidance features."
-          className="rounded-lg border border-border-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm"
+          className="rounded-lg border border-stroke-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm"
           contentClassName="pb-3">
           <WriterToolsSection />
         </CollapsibleSection>
         <CollapsibleSection
           title="Quick Capture"
           description="Toggle global quick-note capture behavior."
-          className="rounded-lg border border-border-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm"
+          className="rounded-lg border border-stroke-subtle bg-layer-02/35 px-3.5 first:border-t shadow-sm"
           contentClassName="pb-3">
           <QuickCaptureSection />
         </CollapsibleSection>
diff --git a/src/components/AppLayout/LayoutSettingsPanel/SettingsHeader.tsx b/src/components/AppLayout/LayoutSettingsPanel/SettingsHeader.tsx
index 52a5629..d4cda26 100644
--- a/src/components/AppLayout/LayoutSettingsPanel/SettingsHeader.tsx
+++ b/src/components/AppLayout/LayoutSettingsPanel/SettingsHeader.tsx
@@ -18,7 +18,7 @@ export function SettingsHeader({ title, scope, onClose, closeAriaLabel, onViewMo
     <div
       className={cn(
         "flex items-center justify-between gap-3",
-        isFull ? "mb-4 border-b border-border-subtle pb-3" : "mb-2",
+        isFull ? "mb-4 border-b border-stroke-subtle pb-3" : "mb-2",
       )}>
       <div>
         <h2 className={cn("m-0 text-text-primary", isFull ? "text-base font-semibold" : "text-sm font-medium")}>
diff --git a/src/components/AppLayout/LayoutSettingsPanel/WriterTools.tsx b/src/components/AppLayout/LayoutSettingsPanel/WriterTools.tsx
index 8c1fa8d..7de84f7 100644
--- a/src/components/AppLayout/LayoutSettingsPanel/WriterTools.tsx
+++ b/src/components/AppLayout/LayoutSettingsPanel/WriterTools.tsx
@@ -22,7 +22,7 @@ const StyleMarkerRow = ({ value, onChange }: StyleMarkerRowProps) => (
       id="style-marker-style"
       value={value}
       onChange={onChange}
-      className="w-full h-9 px-2.5 rounded border border-border-subtle bg-field-01 text-text-primary text-sm">
+      className="w-full h-9 px-2.5 rounded border border-stroke-subtle bg-field-01 text-text-primary text-sm">
       {STYLE_MARKER_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
     </select>
   </div>
@@ -30,13 +30,13 @@ const StyleMarkerRow = ({ value, onChange }: StyleMarkerRowProps) => (
 
 const PosHighlightLegendRow = ({ label, swatchClassName }: { label: string; swatchClassName: string }) => (
   <li className="flex items-center gap-2 text-xs text-text-primary">
-    <span aria-hidden="true" className={`h-2.5 w-2.5 rounded-full border border-border-subtle ${swatchClassName}`} />
+    <span aria-hidden="true" className={`h-2.5 w-2.5 rounded-full border border-stroke-subtle ${swatchClassName}`} />
     <span>{label}</span>
   </li>
 );
 
 const PosHighlightLegend = () => (
-  <div className="mt-2 rounded border border-border-subtle bg-layer-02/40 px-3 py-2.5">
+  <div className="mt-2 rounded border border-stroke-subtle bg-layer-02/40 px-3 py-2.5">
     <p className="m-0 mb-2 text-xs text-text-secondary">Part of Speech Colors</p>
     <ul className="m-0 grid list-none grid-cols-1 gap-1.5 p-0 sm:grid-cols-2">
       {POS_HIGHLIGHT_LEGEND.map((item) => (
@@ -80,7 +80,7 @@ function StyleCheckSection() {
         onToggle={handleStyleCheckEnabled} />
 
       {styleCheckSettings.enabled && (
-        <div className="mt-2 pl-3 border-l-2 border-border-subtle">
+        <div className="mt-2 pl-3 border-l-2 border-stroke-subtle">
           <p className="m-0 text-xs text-text-secondary mb-2">Categories</p>
           <ToggleRow
             label="Fillers & Weak Language"
diff --git a/src/components/AppLayout/WorkspacePanel.tsx b/src/components/AppLayout/WorkspacePanel.tsx
index 9a2b136..a52b580 100644
--- a/src/components/AppLayout/WorkspacePanel.tsx
+++ b/src/components/AppLayout/WorkspacePanel.tsx
@@ -109,10 +109,10 @@ function MainPanel(
           aria-orientation="vertical"
           onPointerDown={onSplitResizeStart}
           className={`relative z-10 w-1 shrink-0 cursor-col-resize transition-colors ${
-            isSplitResizing ? "bg-border-interactive" : "bg-border-subtle hover:bg-border-strong"
+            isSplitResizing ? "bg-stroke-interactive" : "bg-stroke-subtle hover:bg-stroke-strong"
           }`} />
 
-        <Preview className="min-h-0 min-w-0 flex-1 bg-bg-primary" {...preview} />
+        <Preview className="min-h-0 min-w-0 flex-1 bg-surface-primary" {...preview} />
       </div>
     );
   }
@@ -120,7 +120,7 @@ function MainPanel(
   return (
     <div className="flex-1 min-h-0 flex overflow-hidden">
       {panelMode === "editor" && <EditorWithContainer {...editor} container={container} />}
-      {panelMode === "preview" && <Preview className="min-h-0 min-w-0 flex-1 w-full bg-bg-primary" {...preview} />}
+      {panelMode === "preview" && <Preview className="min-h-0 min-w-0 flex-1 w-full bg-surface-primary" {...preview} />}
     </div>
   );
 }
@@ -278,7 +278,7 @@ export function WorkspacePanel({ toolbar, editor, preview, statusBar, diagnostic
           aria-orientation="vertical"
           onPointerDown={handleSidebarResizeStart}
           className={`absolute inset-y-0 right-0 w-1 cursor-col-resize transition-colors ${
-            isResizing ? "bg-border-interactive" : "hover:bg-border-subtle"
+            isResizing ? "bg-stroke-interactive" : "hover:bg-stroke-subtle"
           }`} />
       </Section>
 
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index b0dae53..6d1ccfe 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -21,13 +21,13 @@ const BUTTON_VARIANT_CLASSES: Record<ButtonVariant, ClassValue> = {
   iconGhost:
     "inline-flex items-center justify-center rounded bg-transparent border-none text-icon-secondary cursor-pointer",
   iconSubtle:
-    "inline-flex items-center justify-center rounded border border-border-subtle bg-transparent text-icon-secondary hover:text-icon-primary cursor-pointer",
+    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-transparent text-icon-secondary hover:text-icon-primary cursor-pointer",
   outline:
-    "inline-flex items-center justify-center rounded border border-border-subtle bg-transparent text-text-secondary hover:text-text-primary cursor-pointer",
+    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-transparent text-text-secondary hover:text-text-primary cursor-pointer",
   surface:
-    "inline-flex items-center justify-center rounded border border-border-subtle bg-layer-01 text-text-secondary hover:text-text-primary cursor-pointer",
+    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-layer-01 text-text-secondary hover:text-text-primary cursor-pointer",
   secondary:
-    "inline-flex items-center justify-center rounded border border-border-subtle bg-layer-02 text-text-primary hover:bg-layer-03 cursor-pointer",
+    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-layer-02 text-text-primary hover:bg-layer-03 cursor-pointer",
   primary:
     "inline-flex items-center justify-center rounded border border-accent-cyan bg-accent-cyan text-white hover:opacity-90 cursor-pointer",
   primaryBlue:
diff --git a/src/components/CollapsibleSection.tsx b/src/components/CollapsibleSection.tsx
index 934c4c7..84a0c2e 100644
--- a/src/components/CollapsibleSection.tsx
+++ b/src/components/CollapsibleSection.tsx
@@ -67,7 +67,7 @@ export const CollapsibleSection = (
   }, [isControlled, isOpen, onOpenChange]);
 
   return (
-    <section className={cn("border-t border-border-subtle first:border-t-0", className)}>
+    <section className={cn("border-t border-stroke-subtle first:border-t-0", className)}>
       <Button
         id={buttonId}
         type="button"
diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
index a7abdac..58f9f17 100644
--- a/src/components/ContextMenu/ContextMenu.tsx
+++ b/src/components/ContextMenu/ContextMenu.tsx
@@ -104,14 +104,14 @@ function ContextMenuContent(
       transition={transition}
       role="menu"
       aria-label="Context menu"
-      className={`fixed bg-layer-02 border border-border-subtle rounded shadow-lg z-1000 py-1 ${
+      className={`fixed bg-layer-02 border border-stroke-subtle rounded shadow-lg z-1000 py-1 ${
         isNarrow ? "min-w-[140px]" : "min-w-[160px]"
       }`}
       style={style}>
       {items.map((item, index) => {
         if (isDivider(item)) {
           const k = `divider-${index}`;
-          return <div key={k} className="h-px bg-border-subtle my-1 mx-2" />;
+          return <div key={k} className="h-px bg-stroke-subtle my-1 mx-2" />;
         }
 
         return <ContextMenuItem_ key={item.label} item={item} onClose={onClose} />;
diff --git a/src/components/DocumentTabs/DocumentTab.tsx b/src/components/DocumentTabs/DocumentTab.tsx
index 7e8820b..dfa3a12 100644
--- a/src/components/DocumentTabs/DocumentTab.tsx
+++ b/src/components/DocumentTabs/DocumentTab.tsx
@@ -73,7 +73,7 @@ export const DocumentTab = (
 
   const classes = useMemo(() => {
     const base = [
-      "group flex items-center gap-1.5 px-2.5 shrink-0 cursor-pointer border-r border-border-subtle select-none transition-colors duration-150",
+      "group flex items-center gap-1.5 px-2.5 shrink-0 cursor-pointer border-r border-stroke-subtle select-none transition-colors duration-150",
     ];
 
     if (compact) {
diff --git a/src/components/DocumentTabs/DocumentTabs.tsx b/src/components/DocumentTabs/DocumentTabs.tsx
index 5e1989f..2dab78b 100644
--- a/src/components/DocumentTabs/DocumentTabs.tsx
+++ b/src/components/DocumentTabs/DocumentTabs.tsx
@@ -98,7 +98,7 @@ export function DocumentTabs({ onNewDocument }: DocumentTabsProps) {
 
   if (tabs.length === 0) {
     return (
-      <div className="h-tab bg-bg-primary border-b border-border-subtle flex items-center justify-between pl-4 pr-3 text-text-placeholder text-[0.8125rem]">
+      <div className="h-tab bg-surface-primary border-b border-stroke-subtle flex items-center justify-between pl-4 pr-3 text-text-placeholder text-[0.8125rem]">
         <span>No documents open</span>
         <NewButton onNewDocument={handleNewDocument} hasTabs={false} transition={transition} />
       </div>
@@ -108,7 +108,7 @@ export function DocumentTabs({ onNewDocument }: DocumentTabsProps) {
   return (
     <div
       ref={tabsRef}
-      className="h-tab bg-bg-primary border-b border-border-subtle flex overflow-x-auto overflow-y-hidden"
+      className="h-tab bg-surface-primary border-b border-stroke-subtle flex overflow-x-auto overflow-y-hidden"
       data-compact-tabs={compactTabs}>
       {tabs.map((tab) => (
         <DocumentTab
diff --git a/src/components/DocumentTabs/NewButton.tsx b/src/components/DocumentTabs/NewButton.tsx
index 80f8ea1..cd3384b 100644
--- a/src/components/DocumentTabs/NewButton.tsx
+++ b/src/components/DocumentTabs/NewButton.tsx
@@ -16,7 +16,7 @@ type NewButtonProps = { onNewDocument?: () => void; hasTabs: boolean; transition
 export function NewButton({ onNewDocument, hasTabs, transition }: NewButtonProps) {
   if (onNewDocument && hasTabs) {
     return (
-      <div className="sticky right-0 z-10 flex items-center px-2 border-l border-border-subtle bg-bg-primary">
+      <div className="sticky right-0 z-10 flex items-center px-2 border-l border-stroke-subtle bg-surface-primary">
         <Button
           variant="iconGhost"
           size="iconMd"
diff --git a/src/components/HelpSheet/HelpSheet.tsx b/src/components/HelpSheet/HelpSheet.tsx
index 588310e..cc8fb3b 100644
--- a/src/components/HelpSheet/HelpSheet.tsx
+++ b/src/components/HelpSheet/HelpSheet.tsx
@@ -105,7 +105,7 @@ export function HelpSheet({ isOpen, onClose }: HelpSheetProps) {
       ariaLabelledBy={titleId}
       className="min-h-[50vh]">
       <div className="flex h-full min-h-0 flex-col">
-        <div className="flex items-center justify-between px-4 py-2 border-b border-border-subtle">
+        <div className="flex items-center justify-between px-4 py-2 border-b border-stroke-subtle">
           <h2 id={titleId} className="text-lg font-semibold text-text-primary">Help</h2>
           <CloseButton onClose={onClose} />
         </div>
@@ -114,7 +114,7 @@ export function HelpSheet({ isOpen, onClose }: HelpSheetProps) {
           role="tablist"
           aria-label="Help sections"
           onKeyDown={handleTabListKeyDown}
-          className="flex border-b border-border-subtle">
+          className="flex border-b border-stroke-subtle">
           {TABS.map((tab) => <TabButton key={tab.id} tab={tab} activeTab={activeTab} setActiveTab={setActiveTab} />)}
         </div>
 
diff --git a/src/components/HelpSheet/ShortcutsTabContent.tsx b/src/components/HelpSheet/ShortcutsTabContent.tsx
index 3c9bf37..bb0b467 100644
--- a/src/components/HelpSheet/ShortcutsTabContent.tsx
+++ b/src/components/HelpSheet/ShortcutsTabContent.tsx
@@ -14,7 +14,7 @@ function Shortcut({ shortcut }: { shortcut: KeyboardShortcut }) {
   });
 
   return (
-    <div className="flex items-start justify-between gap-3 py-2 px-3 bg-layer-02 rounded-md border border-border-subtle">
+    <div className="flex items-start justify-between gap-3 py-2 px-3 bg-layer-02 rounded-md border border-stroke-subtle">
       <div className="flex min-w-0 flex-col">
         <span className="text-sm text-text-primary">{shortcut.label}</span>
         {shortcut.description && <span className="text-xs text-text-secondary">{shortcut.description}</span>}
@@ -22,7 +22,7 @@ function Shortcut({ shortcut }: { shortcut: KeyboardShortcut }) {
       <div className="flex shrink-0 items-center gap-1">
         {keyChips.map((chip, index) => (
           <span key={chip.chipId}>
-            <kbd className="px-2 py-1 text-xs font-mono bg-layer-03 border border-border-subtle rounded text-text-primary shadow-sm">
+            <kbd className="px-2 py-1 text-xs font-mono bg-layer-03 border border-stroke-subtle rounded text-text-primary shadow-sm">
               {formatKey(chip.key)}
             </kbd>
             {index < keyChips.length - 1 && <span className="text-text-secondary mx-0.5">+</span>}
diff --git a/src/components/Preview.tsx b/src/components/Preview.tsx
index 5e7109b..9053fb7 100644
--- a/src/components/Preview.tsx
+++ b/src/components/Preview.tsx
@@ -114,7 +114,7 @@ export function Preview({ renderResult, theme, editorLine, onScrollToLine, class
       ref={containerRef}
       onScroll={handleScroll}
       data-theme={theme}
-      className={`flex-1 overflow-auto p-6 bg-bg-primary text-text-primary ${className}`}>
+      className={`flex-1 overflow-auto p-6 bg-surface-primary text-text-primary ${className}`}>
       <div className="preview-content" dangerouslySetInnerHTML={previewContent} />
     </div>
   );
diff --git a/src/components/QuickCapture/QuickCaptureApp.tsx b/src/components/QuickCapture/QuickCaptureApp.tsx
index 671ff1e..a05743a 100644
--- a/src/components/QuickCapture/QuickCaptureApp.tsx
+++ b/src/components/QuickCapture/QuickCaptureApp.tsx
@@ -115,24 +115,24 @@ export function QuickCaptureApp() {
       }
 
       const defaultInboxDir = normalizeRelPath(settings?.inboxRelativeDir ?? "inbox");
-      const loadedTargets = await Promise.all(
-        locations.map(async (location) => {
-          const directories = await listLocationDirectories(location.id);
-          const normalizedDirectories = directories
-            .map((directory) => normalizeRelPath(directory))
-            .filter((directory) => directory.length > 0);
-          const allDirectories = Array.from(new Set([defaultInboxDir, ...normalizedDirectories]))
-            .filter((directory) => directory.length > 0)
-            .toSorted((a, b) => a.localeCompare(b));
-
-          return allDirectories.map((directory) => ({
-            id: `${location.id}:${directory}`,
-            locationId: location.id,
-            relPath: directory,
-            label: `${location.name} / ${directory}`,
-          } satisfies QuickCaptureSaveTarget));
-        }),
-      );
+      const loadedTargets = await Promise.all(locations.map(async (location) => {
+        const directories = await listLocationDirectories(location.id);
+        const normalizedDirectories = directories.map((directory) => normalizeRelPath(directory)).filter((directory) =>
+          directory.length > 0
+        );
+        const allDirectories = Array.from(new Set([defaultInboxDir, ...normalizedDirectories])).filter((directory) =>
+          directory.length > 0
+        ).toSorted((a, b) => a.localeCompare(b));
+
+        return allDirectories.map((
+          directory,
+        ) => ({
+          id: `${location.id}:${directory}`,
+          locationId: location.id,
+          relPath: directory,
+          label: `${location.name} / ${directory}`,
+        } satisfies QuickCaptureSaveTarget));
+      }));
 
       if (isCancelled) {
         return;
@@ -147,43 +147,46 @@ export function QuickCaptureApp() {
     };
   }, [listLocationDirectories, locations, normalizeRelPath, settings?.inboxRelativeDir]);
 
-  const handleSubmitToDestination = useCallback(async (
-    text: string,
-    mode: CaptureMode,
-    destination?: { locationId: number; relPath: string },
-  ) => {
-    if (!settings || isSubmitting) return;
-
-    setIsSubmitting(true);
-    setError(null);
-    const destinationPayload = mode === "Append" ? void 0 : destination;
-
-    await runCmd(
-      globalCaptureSubmit(
-        { mode, text, destination: destinationPayload, openMainAfterSave: false },
-        (result: CaptureSubmitResult) => {
-        setIsSubmitting(false);
-
-        if (result.success) {
-          logger.info(f("Capture submitted successfully", { savedTo: result.savedTo, locationId: result.locationId }));
-
-          if (result.shouldClose) {
-            windowRef.current.close().catch((err) => {
-              logger.error(f("Failed to close window", { message: err instanceof Error ? err.message : String(err) }));
-            });
-          }
-        } else {
-          setError("Failed to save capture");
-        }
-        },
-        (err: AppError) => {
-        setIsSubmitting(false);
-        logger.error(f("Capture submission failed", { err }));
-        setError(err.message || "Failed to save capture");
-        },
-      ),
-    );
-  }, [settings, isSubmitting]);
+  const handleSubmitToDestination = useCallback(
+    async (text: string, mode: CaptureMode, destination?: { locationId: number; relPath: string }) => {
+      if (!settings || isSubmitting) return;
+
+      setIsSubmitting(true);
+      setError(null);
+      const destinationPayload = mode === "Append" ? void 0 : destination;
+
+      await runCmd(
+        globalCaptureSubmit(
+          { mode, text, destination: destinationPayload, openMainAfterSave: false },
+          (result: CaptureSubmitResult) => {
+            setIsSubmitting(false);
+
+            if (result.success) {
+              logger.info(
+                f("Capture submitted successfully", { savedTo: result.savedTo, locationId: result.locationId }),
+              );
+
+              if (result.shouldClose) {
+                windowRef.current.close().catch((err) => {
+                  logger.error(
+                    f("Failed to close window", { message: err instanceof Error ? err.message : String(err) }),
+                  );
+                });
+              }
+            } else {
+              setError("Failed to save capture");
+            }
+          },
+          (err: AppError) => {
+            setIsSubmitting(false);
+            logger.error(f("Capture submission failed", { err }));
+            setError(err.message || "Failed to save capture");
+          },
+        ),
+      );
+    },
+    [settings, isSubmitting],
+  );
 
   const handleClose = useCallback(() => {
     windowRef.current.close().catch((err) => {
@@ -193,14 +196,14 @@ export function QuickCaptureApp() {
 
   if (isLoading) {
     return (
-      <div data-theme={theme} className="flex h-dvh items-center justify-center bg-bg-primary">
-        <div className="w-8 h-8 border-3 border-border-subtle border-t-accent-blue rounded-full animate-spin" />
+      <div data-theme={theme} className="flex h-dvh items-center justify-center bg-surface-primary">
+        <div className="w-8 h-8 border-3 border-stroke-subtle border-t-accent-blue rounded-full animate-spin" />
       </div>
     );
   }
 
   return (
-    <div data-theme={theme} className="h-dvh bg-bg-primary">
+    <div data-theme={theme} className="h-dvh bg-surface-primary">
       <QuickCaptureForm
         defaultMode={settings?.defaultMode}
         onSubmit={handleSubmitToDestination}
diff --git a/src/components/QuickCapture/QuickCaptureForm.tsx b/src/components/QuickCapture/QuickCaptureForm.tsx
index d58a8f3..b1cc87a 100644
--- a/src/components/QuickCapture/QuickCaptureForm.tsx
+++ b/src/components/QuickCapture/QuickCaptureForm.tsx
@@ -106,7 +106,7 @@ const ModeButton = (
       {mode === currentMode && (
         <motion.span
           layoutId="quick-capture-active-mode"
-          className="absolute inset-0 rounded border border-border-strong bg-layer-02 shadow-sm"
+          className="absolute inset-0 rounded border border-stroke-strong bg-layer-02 shadow-sm"
           transition={transition} />
       )}
       <span className="relative z-10">{getModeLabel(mode)}</span>
@@ -115,7 +115,7 @@ const ModeButton = (
 };
 
 const ModeButtons = ({ currentMode, setMode, isSubmitting, transition }: ModeButtonsProps) => (
-  <div className="inline-flex w-full flex-wrap gap-1 rounded border border-border-subtle bg-field-02 p-1">
+  <div className="inline-flex w-full flex-wrap gap-1 rounded border border-stroke-subtle bg-field-02 p-1">
     {MODE_OPTIONS.map((modeOption) => (
       <ModeButton
         key={modeOption}
@@ -130,7 +130,7 @@ const ModeButtons = ({ currentMode, setMode, isSubmitting, transition }: ModeBut
 
 const CaptureTitle = ({ mode, transition }: { mode: CaptureMode; transition: FormTransition }) => (
   <div className="flex min-w-0 items-start gap-2.5">
-    <span className="mt-0.5 inline-flex size-6 items-center justify-center rounded border border-border-strong bg-layer-02 text-text-primary">
+    <span className="mt-0.5 inline-flex size-6 items-center justify-center rounded border border-stroke-strong bg-layer-02 text-text-primary">
       <PenIcon size="sm" />
     </span>
     <div className="min-w-0">
@@ -143,7 +143,7 @@ const CaptureTitle = ({ mode, transition }: { mode: CaptureMode; transition: For
 const QuickCaptureFormHeader = (
   { onClose, currentMode, setMode, isSubmitting, transition }: ModeButtonsProps & { onClose: () => void },
 ) => (
-  <header className="border-b border-border-subtle bg-layer-01 px-3 py-3 sm:px-4">
+  <header className="border-b border-stroke-subtle bg-layer-01 px-3 py-3 sm:px-4">
     <div className="mb-3 flex items-start justify-between gap-3">
       <CaptureTitle mode={currentMode} transition={transition} />
       <Button
@@ -177,7 +177,7 @@ const CaptureTextarea = (
     onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
   },
 ) => (
-  <div className="mt-2 flex min-h-0 flex-1 overflow-hidden rounded border border-border-subtle bg-field-02 transition-colors focus-within:border-border-interactive">
+  <div className="mt-2 flex min-h-0 flex-1 overflow-hidden rounded border border-stroke-subtle bg-field-02 transition-colors focus-within:border-stroke-interactive">
     <textarea
       ref={textareaRef}
       className="h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent px-3 py-2.5 font-mono text-base leading-relaxed text-text-primary outline-none placeholder:text-text-placeholder disabled:opacity-60"
@@ -205,7 +205,7 @@ const ComposePane = (
   <motion.section
     layout
     transition={transition}
-    className="flex min-h-0 flex-1 flex-col rounded border border-border-subtle bg-field-01 p-2.5 sm:p-3">
+    className="flex min-h-0 flex-1 flex-col rounded border border-stroke-subtle bg-field-01 p-2.5 sm:p-3">
     <CaptureMetaRow mode={mode} noteStats={noteStats} />
     <CaptureTextarea
       textareaRef={textareaRef}
@@ -428,7 +428,7 @@ export function QuickCaptureForm(
       initial={QUICK_CAPTURE.FORM.INITIAL}
       animate={QUICK_CAPTURE.FORM.ANIMATE}
       transition={transition}
-      className="relative flex h-full min-h-0 flex-col overflow-hidden bg-bg-primary text-text-primary font-sans">
+      className="relative flex h-full min-h-0 flex-col overflow-hidden bg-surface-primary text-text-primary font-sans">
       <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(120%_80%_at_100%_0%,var(--color-layer-02)_0%,transparent_60%)] opacity-70" />
       <QuickCaptureFormHeader
         onClose={onClose}
@@ -447,7 +447,7 @@ export function QuickCaptureForm(
           onTextareaKeyDown={handleTextareaKeyDown}
           transition={transition} />
       </main>
-      <footer className="relative z-10 border-t border-border-subtle bg-layer-01 px-3 py-3 sm:px-4">
+      <footer className="relative z-10 border-t border-stroke-subtle bg-layer-01 px-3 py-3 sm:px-4">
         <div className="flex flex-col gap-2.5 sm:flex-row sm:items-center sm:justify-between">
           <FooterStatus
             error={error}
diff --git a/src/components/SearchPanel/Buttons.tsx b/src/components/SearchPanel/Buttons.tsx
index 6d6f5f9..3bdc2f0 100644
--- a/src/components/SearchPanel/Buttons.tsx
+++ b/src/components/SearchPanel/Buttons.tsx
@@ -21,7 +21,7 @@ export function ToggleButton({ toggleFilters, showFilters, activeFilterCount, co
   const classes = useMemo(() => {
     const base = [
       compact ? "px-3 py-2" : "px-4 py-2.5",
-      "border border-border-subtle rounded-md",
+      "border border-stroke-subtle rounded-md",
       "text-sm cursor-pointer flex items-center gap-1.5 transition-colors duration-150",
     ];
 
@@ -78,7 +78,7 @@ export function FilterLocationButton({ location, filters, handleToggleLocation }
   const classes = useMemo(() => {
     const base = [
       "px-3 py-1.5",
-      "border border-border-subtle rounded",
+      "border border-stroke-subtle rounded",
       "text-[0.8125rem] cursor-pointer transition-colors duration-150",
     ];
 
diff --git a/src/components/SearchPanel/SearchPanel.tsx b/src/components/SearchPanel/SearchPanel.tsx
index 3d5519e..b92d72d 100644
--- a/src/components/SearchPanel/SearchPanel.tsx
+++ b/src/components/SearchPanel/SearchPanel.tsx
@@ -92,7 +92,7 @@ function HighlightedSnippet({ text, matches }: { text: string; matches: Array<{
       parts.push(<span key={matchKey}>{text.slice(lastEnd, match.start)}</span>);
     }
     parts.push(
-      <mark key={markKey} className="bg-accent-yellow text-bg-primary rounded px-0.5">
+      <mark key={markKey} className="bg-accent-yellow text-surface-primary rounded px-0.5">
         {text.slice(match.start, match.end)}
       </mark>,
     );
@@ -122,7 +122,7 @@ function SearchResult({ hit, onSelectResult }: SearchResultProps) {
   return (
     <Button
       onClick={handleClick}
-      className="w-full px-4 py-3 bg-layer-01 border border-border-subtle rounded-md text-left cursor-pointer transition-[border-color,background-color,box-shadow] duration-150 hover:bg-layer-hover-01 hover:border-border-strong">
+      className="w-full px-4 py-3 bg-layer-01 border border-stroke-subtle rounded-md text-left cursor-pointer transition-[border-color,background-color,box-shadow] duration-150 hover:bg-layer-hover-01 hover:border-stroke-strong">
       <HighlightLabel hit={hit} />
       <HighlightedSnippet text={hit.snippet} matches={hit.matches} />
     </Button>
@@ -192,7 +192,7 @@ function SearchInput({ query, handleQueryChange, clearQuery, compact = false }:
         onChange={handleQueryChange}
         placeholder="Search across all documents..."
         autoFocus
-        className={`w-full pl-10 pr-3 text-base bg-field-01 border border-border-subtle rounded-md text-text-primary outline-none transition-[border-color,background-color,box-shadow] duration-150 focus:border-border-interactive focus:shadow-[0_0_0_3px_rgba(69,137,255,0.2)] ${
+        className={`w-full pl-10 pr-3 text-base bg-field-01 border border-stroke-subtle rounded-md text-text-primary outline-none transition-[border-color,background-color,box-shadow] duration-150 focus:border-stroke-interactive focus:shadow-[0_0_0_3px_rgba(69,137,255,0.2)] ${
           compact ? "py-2" : "py-2.5"
         }`} />
       {query && (
@@ -225,7 +225,7 @@ function VisibleFilters(
       {showFilters && (
         <motion.div
           {...getAnimationProps(skipAnimation)}
-          className="p-4 bg-layer-01 rounded-md border border-border-subtle flex flex-col gap-4">
+          className="p-4 bg-layer-01 rounded-md border border-stroke-subtle flex flex-col gap-4">
           <LocationList locations={locations} filters={filters} toggler={handleToggleLocation} />
           {activeFilterCount > 0 && <ClearAllFiltersButton handleClearFilters={handleClearFilters} />}
         </motion.div>
@@ -254,7 +254,7 @@ function SearchResultsHeader(
   }: SearchResultsHeaderProps,
 ) {
   return (
-    <div className={`border-b border-border-subtle flex flex-col gap-3 ${compact ? "px-3 py-3" : "px-6 py-4"}`}>
+    <div className={`border-b border-stroke-subtle flex flex-col gap-3 ${compact ? "px-3 py-3" : "px-6 py-4"}`}>
       <div className="flex flex-wrap items-center gap-2">
         <SearchInput query={query} handleQueryChange={handleQueryChange} clearQuery={clearQuery} compact={compact} />
         <ToggleButton
@@ -342,7 +342,7 @@ export function SearchPanel(
   const panelClassName = useMemo(
     () =>
       cn(
-        "flex h-full flex-col overflow-hidden bg-bg-primary border border-border-subtle",
+        "flex h-full flex-col overflow-hidden bg-surface-primary border border-stroke-subtle",
         isCompact ? "w-full rounded-none" : "mx-auto w-full max-w-5xl rounded-lg shadow-2xl",
       ),
     [isCompact],
diff --git a/src/components/Sheet/Sheet.tsx b/src/components/Sheet/Sheet.tsx
index 0d1436b..5c80986 100644
--- a/src/components/Sheet/Sheet.tsx
+++ b/src/components/Sheet/Sheet.tsx
@@ -121,7 +121,7 @@ function DragHandle(
         "flex justify-center px-3 py-2 cursor-grab active:cursor-grabbing touch-none",
         vertical && "justify-start",
       )}>
-      <DragIcon size="lg" className={cn("text-border-subtle", vertical && "rotate-90")} />
+      <DragIcon size="lg" className={cn("text-stroke-subtle", vertical && "rotate-90")} />
     </div>
   );
 }
@@ -317,7 +317,7 @@ export function Sheet(
             aria-modal={showBackdrop}
             tabIndex={-1}
             className={cn(
-              "pointer-events-auto bg-layer-01 border-border-subtle shadow-2xl min-h-0 overflow-hidden flex flex-col",
+              "pointer-events-auto bg-layer-01 border-stroke-subtle shadow-2xl min-h-0 overflow-hidden flex flex-col",
               positionClassName,
               sizeClassName,
               className,
diff --git a/src/components/Sidebar/DnDMoveDialog.tsx b/src/components/Sidebar/DnDMoveDialog.tsx
index 512ebb1..0db432e 100644
--- a/src/components/Sidebar/DnDMoveDialog.tsx
+++ b/src/components/Sidebar/DnDMoveDialog.tsx
@@ -44,7 +44,7 @@ export function DnDMoveDialog(
           type="text"
           value={path}
           onChange={onPathChange}
-          className="w-full rounded-md border border-border-subtle bg-layer-02 px-3 py-2 font-mono text-sm text-text-primary focus:border-accent-cyan focus:outline-none"
+          className="w-full rounded-md border border-stroke-subtle bg-layer-02 px-3 py-2 font-mono text-sm text-text-primary focus:border-accent-cyan focus:outline-none"
           autoFocus
           disabled={isPending} />
       </form>
diff --git a/src/components/Sidebar/DocumentItem.tsx b/src/components/Sidebar/DocumentItem.tsx
index a2ba6b0..dbf04e2 100644
--- a/src/components/Sidebar/DocumentItem.tsx
+++ b/src/components/Sidebar/DocumentItem.tsx
@@ -154,7 +154,7 @@ export function DocumentItem(
               { "transition-[top,bottom] duration-150": !skipAnimation },
             )}
             style={edgeStyle}>
-            <div className="sidebar-drop-insertion-dot absolute left-0 top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border-interactive bg-layer-02" />
+            <div className="sidebar-drop-insertion-dot absolute left-0 top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-stroke-interactive bg-layer-02" />
           </div>
         )}
       </div>
diff --git a/src/components/Sidebar/DocumentOperationDialog.tsx b/src/components/Sidebar/DocumentOperationDialog.tsx
index 111cc12..aff6c7d 100644
--- a/src/components/Sidebar/DocumentOperationDialog.tsx
+++ b/src/components/Sidebar/DocumentOperationDialog.tsx
@@ -163,7 +163,7 @@ export function DocumentOperationDialog(
             type="text"
             value={renameName}
             onChange={handleRenameNameChange}
-            className="w-full rounded-md border border-border-subtle bg-layer-02 px-3 py-2 text-sm text-text-primary focus:border-accent-cyan focus:outline-none"
+            className="w-full rounded-md border border-stroke-subtle bg-layer-02 px-3 py-2 text-sm text-text-primary focus:border-accent-cyan focus:outline-none"
             autoFocus
             disabled={isPending} />
         </form>
@@ -197,7 +197,7 @@ export function DocumentOperationDialog(
             type="text"
             value={movePath}
             onChange={handleMovePathChange}
-            className="w-full rounded-md border border-border-subtle bg-layer-02 px-3 py-2 font-mono text-sm text-text-primary focus:border-accent-cyan focus:outline-none"
+            className="w-full rounded-md border border-stroke-subtle bg-layer-02 px-3 py-2 font-mono text-sm text-text-primary focus:border-accent-cyan focus:outline-none"
             autoFocus
             disabled={isPending} />
           <p className="text-xs text-text-secondary mt-2">Enter the new relative path for the document.</p>
diff --git a/src/components/Sidebar/OperationDialog.tsx b/src/components/Sidebar/OperationDialog.tsx
index eae96f5..0232298 100644
--- a/src/components/Sidebar/OperationDialog.tsx
+++ b/src/components/Sidebar/OperationDialog.tsx
@@ -30,7 +30,7 @@ type OperationHeaderProps = { title: string; description?: ReactNode; onClose: (
 
 function OperationDialogHeader({ title, description, onClose, isPending }: OperationHeaderProps) {
   return (
-    <header className="flex items-start justify-between gap-2 border-b border-border-subtle px-4 py-3">
+    <header className="flex items-start justify-between gap-2 border-b border-stroke-subtle px-4 py-3">
       <div className="min-w-0">
         <h3 className="m-0 text-sm font-semibold text-text-primary">{title}</h3>
         {description ? <p className="m-0 mt-1 text-xs leading-5 text-text-secondary">{description}</p> : null}
@@ -100,7 +100,7 @@ export function OperationDialog(
       closeOnBackdrop={false}
       containerClassName="z-1100 pointer-events-none"
       panelClassName={cn(
-        "pointer-events-auto absolute rounded-xl border border-border-subtle bg-layer-01 shadow-2xl ring-1 ring-black/5",
+        "pointer-events-auto absolute rounded-xl border border-stroke-subtle bg-layer-01 shadow-2xl ring-1 ring-black/5",
         widthClassName,
         !isPositioned && "opacity-0",
       )}
@@ -112,7 +112,7 @@ export function OperationDialog(
           onClose={handleRequestClose}
           isPending={isPending} />
         <div className="px-4 py-3">{children}</div>
-        <footer className="flex items-center justify-end gap-2 border-t border-border-subtle bg-layer-01/80 px-4 py-3">
+        <footer className="flex items-center justify-end gap-2 border-t border-stroke-subtle bg-layer-01/80 px-4 py-3">
           <Button type="button" variant="outline" size="sm" onClick={handleRequestClose} disabled={isPending}>
             {cancelLabel}
           </Button>
diff --git a/src/components/Sidebar/SearchInput.tsx b/src/components/Sidebar/SearchInput.tsx
index 06aa609..3e949c0 100644
--- a/src/components/Sidebar/SearchInput.tsx
+++ b/src/components/Sidebar/SearchInput.tsx
@@ -11,7 +11,7 @@ export const SearchInput = () => {
   }, [setFilterText]);
 
   return (
-    <div className="px-4 py-3 border-b border-border-subtle">
+    <div className="px-4 py-3 border-b border-stroke-subtle">
       <div className="relative flex items-center">
         <SearchIcon
           size="sm"
@@ -21,7 +21,7 @@ export const SearchInput = () => {
           placeholder="Filter documents..."
           value={filterText}
           onChange={handleInputChange}
-          className="w-full pl-8 pr-2.5 py-1.5 text-[0.8125rem] bg-field-01 border border-border-subtle rounded text-text-primary outline-none transition-[border-color,box-shadow] duration-150 focus:border-border-interactive focus:shadow-[0_0_0_2px_rgba(69,137,255,0.2)]" />
+          className="w-full pl-8 pr-2.5 py-1.5 text-[0.8125rem] bg-field-01 border border-stroke-subtle rounded text-text-primary outline-none transition-[border-color,box-shadow] duration-150 focus:border-stroke-interactive focus:shadow-[0_0_0_2px_rgba(69,137,255,0.2)]" />
       </div>
     </div>
   );
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 95ce2cc..3586b88 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -32,6 +32,8 @@ type SidebarActionsProps = {
   refreshDisabled: boolean;
 };
 
+type CountPillProps = { count: number; label: string; singularLabel: string };
+
 const HideSidebarButton = ({ onToggleCollapse }: { onToggleCollapse: () => void }) => (
   <Button
     type="button"
@@ -57,6 +59,12 @@ const SidebarActions = (
   </div>
 );
 
+const CountPill = ({ count, label, singularLabel }: CountPillProps) => (
+  <span className="inline-flex h-6 items-center rounded-md border border-stroke-subtle bg-layer-02 px-2.5 text-[0.6875rem] leading-none tabular-nums text-text-placeholder">
+    {count.toLocaleString()} {count === 1 ? singularLabel : label}
+  </span>
+);
+
 export function Sidebar({ onNewDocument }: SidebarProps) {
   const {
     handleAddLocation,
@@ -247,8 +255,8 @@ export function Sidebar({ onNewDocument }: SidebarProps) {
   ]);
 
   return (
-    <aside className="w-full bg-layer-01 border-r border-border-subtle flex h-full flex-col shrink-0 overflow-hidden">
-      <div className="p-4 border-b border-border-subtle flex items-center justify-between">
+    <aside className="w-full bg-layer-01 border-r border-stroke-subtle flex h-full flex-col shrink-0 overflow-hidden">
+      <div className="p-4 border-b border-stroke-subtle flex items-center justify-between">
         <Title isLoading={isLoading} />
         <SidebarActions
           onAddLocation={handleAddLocation}
@@ -282,11 +290,12 @@ export function Sidebar({ onNewDocument }: SidebarProps) {
           )}
       </div>
 
-      <div className="px-4 py-2 border-t border-border-subtle text-xs text-text-placeholder flex items-center justify-between">
-        <span>{locations.length} location{locations.length === 1 ? "" : "s"}</span>
-        <span>
-          {selectedLocationId ? `${locationDocuments.length} document${locationDocuments.length === 1 ? "" : "s"}` : ""}
-        </span>
+      <div className="flex min-h-10 items-center justify-between gap-2 border-t border-stroke-subtle px-4 py-2">
+        <CountPill count={locations.length} singularLabel="location" label="locations" />
+        <CountPill
+          count={selectedLocationId ? locationDocuments.length : 0}
+          singularLabel="document"
+          label="documents" />
       </div>
 
       <DocumentOperationDialog
diff --git a/src/components/Sidebar/SidebarLocationItem.tsx b/src/components/Sidebar/SidebarLocationItem.tsx
index 9cc1c83..2d885d8 100644
--- a/src/components/Sidebar/SidebarLocationItem.tsx
+++ b/src/components/Sidebar/SidebarLocationItem.tsx
@@ -277,7 +277,7 @@ function NestedDirectoryItem({ node, level, expandedDirectories, onToggleDirecto
         data-folder-depth={level}
         className={cn(
           "pb-0.5",
-          isDropIntoTarget ? "rounded border-2 border-border-interactive bg-layer-hover-01" : "",
+          isDropIntoTarget ? "rounded border-2 border-stroke-interactive bg-layer-hover-01" : "",
           isSpringPending ? "sidebar-folder-spring-pending rounded" : "",
           skipAnimation ? "" : "transition-[box-shadow,background-color] duration-150",
         )}>
@@ -299,7 +299,7 @@ function NestedDirectoryItem({ node, level, expandedDirectories, onToggleDirecto
                 { "transition-[top,bottom] duration-150": !skipAnimation },
               )}
               style={edgeStyle}>
-              <div className="sidebar-drop-insertion-dot absolute left-0 top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border-interactive bg-layer-02" />
+              <div className="sidebar-drop-insertion-dot absolute left-0 top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-stroke-interactive bg-layer-02" />
             </div>
           )
           : null}
@@ -562,7 +562,7 @@ function SidebarLocationItemComponent(
   return (
     <div
       data-location-id={location.id}
-      className={`${showHighlight ? "ring-2 ring-border-interactive rounded" : ""} ${
+      className={`${showHighlight ? "ring-2 ring-stroke-interactive rounded" : ""} ${
         skipAnimation ? "" : "transition-[box-shadow,background-color] duration-150"
       }`}>
       <FolderItem
@@ -585,7 +585,7 @@ function SidebarLocationItemComponent(
             className={cn(
               "mx-3 rounded border",
               showRootDropIndicator
-                ? "mb-1 mt-0.5 h-1.5 border-border-interactive bg-layer-hover-01 sidebar-drop-edge-pulse"
+                ? "mb-1 mt-0.5 h-1.5 border-stroke-interactive bg-layer-hover-01 sidebar-drop-edge-pulse"
                 : "mb-0 mt-0 h-0 border-transparent bg-transparent",
               skipAnimation ? "" : "transition-colors duration-150",
             )} />
diff --git a/src/components/Sidebar/TreeItem.tsx b/src/components/Sidebar/TreeItem.tsx
index 8da4e4f..17e3e8f 100644
--- a/src/components/Sidebar/TreeItem.tsx
+++ b/src/components/Sidebar/TreeItem.tsx
@@ -62,7 +62,7 @@ function TreeItemComponent(
     }
 
     if (isDropTarget) {
-      base.push("ring-2 ring-border-interactive !bg-layer-hover-01 text-text-primary sidebar-drop-pulse");
+      base.push("ring-2 ring-stroke-interactive !bg-layer-hover-01 text-text-primary sidebar-drop-pulse");
     }
 
     if (isSelected) {
diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
index b696e01..f0dc3ff 100644
--- a/src/components/StatusBar.tsx
+++ b/src/components/StatusBar.tsx
@@ -21,13 +21,13 @@ export type StatusBarProps = {
 type StatusItemProps = { label?: string; value: string | number; title?: string; valueClassName?: string };
 
 const StatusItem = ({ label, value, title, valueClassName = "" }: StatusItemProps) => (
-  <div title={title} className="flex min-w-0 items-center gap-1 px-1.5 text-[0.6875rem] text-text-secondary">
+  <div title={title} className="flex min-w-0 items-center gap-1 px-1.5 text-xs text-text-secondary">
     {label && <span className="shrink-0 text-text-placeholder">{label}</span>}
     <span className={`truncate ${valueClassName}`}>{value}</span>
   </div>
 );
 
-const StatusDivider = () => <div className="h-3 w-px bg-border-subtle" />;
+const StatusDivider = () => <div className="h-4 w-px bg-stroke-subtle" />;
 
 const UpdatedAtItem = ({ updatedAt }: { updatedAt: string }) => (
   <>
@@ -79,7 +79,7 @@ const LeftItems = (
 ) => {
   const selectionCount = useMemo(() => stats.selectionCount ?? 0, [stats.selectionCount]);
   if (!docMeta) {
-    return <span className="truncate text-[0.6875rem] text-text-placeholder">No document open</span>;
+    return <span className="truncate text-xs text-text-placeholder">No document open</span>;
   }
 
   return (
@@ -118,7 +118,7 @@ export function StatusBar({ docMeta, stats, encoding = "utf8", lineEnding = "LF"
   const showSelection = useMemo(() => !isCompact, [isCompact]);
 
   return (
-    <footer className="h-7 bg-layer-01 border-t border-border-subtle flex items-center justify-between px-2 sm:px-3 font-mono gap-2">
+    <footer className="h-8 bg-layer-01 border-t border-stroke-subtle flex items-center justify-between px-2.5 sm:px-3.5 font-mono gap-2.5">
       <LeftItems docMeta={docMeta} stats={stats} showUpdatedAt={showUpdatedAt} showSelection={showSelection} />
 
       <RightItems
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
index 0ad62c0..7a8b62b 100644
--- a/src/components/Switch.tsx
+++ b/src/components/Switch.tsx
@@ -38,7 +38,7 @@ export const Switch = ({ checked, onCheckedChange, ariaLabel, id, disabled = fal
       <span
         aria-hidden="true"
         className={cn(
-          "absolute inset-0 rounded-full border border-border-subtle bg-layer-02 transition-colors duration-150",
+          "absolute inset-0 rounded-full border border-stroke-subtle bg-layer-02 transition-colors duration-150",
           "peer-checked:border-accent-cyan peer-checked:bg-accent-cyan",
           "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2",
           "peer-focus-visible:outline-accent-cyan peer-disabled:opacity-50",
diff --git a/src/components/Toaster.tsx b/src/components/Toaster.tsx
index 4186c7b..a501b91 100644
--- a/src/components/Toaster.tsx
+++ b/src/components/Toaster.tsx
@@ -55,8 +55,8 @@ function ToastItem({ id, type, message, onDismiss }: ToastItemProps) {
         {
           "bg-support-success text-white": type === "success",
           "bg-support-error text-white": type === "error",
-          "bg-accent-cyan text-text-primary border border-border-subtle": type === "info",
-          "bg-accent-yellow text-text-primary border border-border-subtle": type === "warn",
+          "bg-accent-cyan text-text-primary border border-stroke-subtle": type === "info",
+          "bg-accent-yellow text-text-primary border border-stroke-subtle": type === "warn",
         },
       )}
       role="alert"
diff --git a/src/components/Toolbar/SaveStatusIndicator.tsx b/src/components/Toolbar/SaveStatusIndicator.tsx
index 1c5e9f6..e1b7551 100644
--- a/src/components/Toolbar/SaveStatusIndicator.tsx
+++ b/src/components/Toolbar/SaveStatusIndicator.tsx
@@ -9,7 +9,7 @@ function Status({ status, compact }: { status: SaveStatus; compact: boolean }) {
   switch (status) {
     case "Saving": {
       return (
-        <div className="flex items-center gap-1.5 text-xs text-accent-cyan px-2 py-1 bg-layer-01 rounded border border-border-subtle">
+        <div className="flex items-center gap-1.5 text-xs text-accent-cyan px-2 py-1 bg-layer-01 rounded border border-stroke-subtle">
           <SaveIcon size="sm" />
           {compact ? null : <span>Saving...</span>}
         </div>
@@ -17,7 +17,7 @@ function Status({ status, compact }: { status: SaveStatus; compact: boolean }) {
     }
     case "Saved": {
       return (
-        <div className="flex items-center gap-1.5 text-xs text-accent-green px-2 py-1 bg-layer-01 rounded border border-border-subtle">
+        <div className="flex items-center gap-1.5 text-xs text-accent-green px-2 py-1 bg-layer-01 rounded border border-stroke-subtle">
           <CheckIcon size="sm" />
           {compact ? null : <span>Saved</span>}
         </div>
@@ -25,21 +25,21 @@ function Status({ status, compact }: { status: SaveStatus; compact: boolean }) {
     }
     case "Dirty": {
       return (
-        <div className="flex items-center gap-1.5 text-xs text-accent-yellow px-2 py-1 bg-layer-01 rounded border border-border-subtle">
+        <div className="flex items-center gap-1.5 text-xs text-accent-yellow px-2 py-1 bg-layer-01 rounded border border-stroke-subtle">
           {compact ? null : <span>Unsaved</span>}
         </div>
       );
     }
     case "Error": {
       return (
-        <div className="flex items-center gap-1.5 text-xs text-support-error px-2 py-1 bg-layer-01 rounded border border-border-subtle">
+        <div className="flex items-center gap-1.5 text-xs text-support-error px-2 py-1 bg-layer-01 rounded border border-stroke-subtle">
           {compact ? null : <span>Error</span>}
         </div>
       );
     }
     default: {
       return (
-        <div className="flex items-center gap-1.5 text-xs text-text-placeholder px-2 py-1 bg-layer-01 rounded border border-border-subtle">
+        <div className="flex items-center gap-1.5 text-xs text-text-placeholder px-2 py-1 bg-layer-01 rounded border border-stroke-subtle">
           {compact ? null : <span>Ready</span>}
         </div>
       );
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index d5c8d3c..88953b3 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -86,7 +86,7 @@ export function Toolbar(
   const isEditorOnly = useMemo(() => !isSplitView && !isPreviewVisible, [isSplitView, isPreviewVisible]);
 
   return (
-    <div className="h-[48px] bg-layer-01 border-b border-border-subtle flex items-center justify-between px-2 sm:px-4 gap-2 overflow-x-auto">
+    <div className="h-[48px] bg-layer-01 border-b border-stroke-subtle flex items-center justify-between px-2 sm:px-4 gap-2 overflow-x-auto">
       <div className="flex items-center gap-1.5 shrink-0">
         <ToolbarButton
           icon={icons.save}
diff --git a/src/components/Toolbar/ToolbarButton.tsx b/src/components/Toolbar/ToolbarButton.tsx
index 17cc6b2..dc97a2e 100644
--- a/src/components/Toolbar/ToolbarButton.tsx
+++ b/src/components/Toolbar/ToolbarButton.tsx
@@ -47,7 +47,7 @@ export function ToolbarButton(
         onMouseLeave={handleMouseLeave}
         className={`flex items-center gap-1.5 px-2.5 py-1.5 text-[0.8125rem] relative transition-colors duration-150 ease rounded ${
           isActive
-            ? "bg-layer-accent-01 border border-border-strong text-text-primary"
+            ? "bg-layer-accent-01 border border-stroke-strong text-text-primary"
             : "bg-transparent border border-transparent text-text-secondary"
         } ${iconOnly ? "w-8 h-8 px-0 justify-center" : ""} ${
           disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 08f12ac..a7cebfc 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -72,7 +72,7 @@ export function Tooltip(
           animate={TOOLTIP.ANIMATE}
           exit={TOOLTIP.EXIT}
           transition={transition}
-          className={`fixed ${placementClasses} px-2 py-1 bg-layer-02 border border-border-subtle rounded text-xs text-text-secondary whitespace-nowrap z-1100 shadow-lg pointer-events-none ${className}`}
+          className={`fixed ${placementClasses} px-2 py-1 bg-layer-02 border border-stroke-subtle rounded text-xs text-text-secondary whitespace-nowrap z-1100 shadow-lg pointer-events-none ${className}`}
           style={style}>
           {children}
         </motion.div>
diff --git a/src/components/export/ExportDialog/ExportDialog.tsx b/src/components/export/ExportDialog/ExportDialog.tsx
index da2b8e7..4af3cb7 100644
--- a/src/components/export/ExportDialog/ExportDialog.tsx
+++ b/src/components/export/ExportDialog/ExportDialog.tsx
@@ -47,7 +47,7 @@ type ExportFormatTabsProps = {
 };
 
 const ExportFormatTabs = ({ activeTabId, onTabClick }: ExportFormatTabsProps) => (
-  <div className="mb-4 rounded-lg border border-border-subtle bg-layer-02/35 p-1">
+  <div className="mb-4 rounded-lg border border-stroke-subtle bg-layer-02/35 p-1">
     <div className="grid grid-cols-3 gap-1">
       {EXPORT_FORMAT_TABS.map((tab) => (
         <ExportFormatTabButton key={tab.id} tab={tab} isActive={tab.id === activeTabId} onTabClick={onTabClick} />
@@ -71,7 +71,7 @@ const ExportFormatTabButton = ({ tab, isActive, onTabClick }: ExportFormatTabBut
     onClick={onTabClick}
     className={`rounded-md border px-2 py-2 text-xs transition-colors sm:px-3 sm:text-sm ${
       isActive
-        ? "border-border-subtle bg-layer-01 text-text-primary shadow-sm"
+        ? "border-stroke-subtle bg-layer-01 text-text-primary shadow-sm"
         : "border-transparent bg-transparent text-text-secondary hover:bg-layer-01/70 hover:text-text-primary"
     } disabled:cursor-not-allowed disabled:opacity-40`}
     aria-label={`${tab.label} export tab`}>
@@ -92,7 +92,7 @@ function ExportError({ error }: { error: string | null }) {
 }
 
 const FormatSummary = ({ title, description }: { title: string; description: string }) => (
-  <div className="mb-3 shrink-0 rounded-lg border border-border-subtle bg-layer-02/35 px-3 py-2.5">
+  <div className="mb-3 shrink-0 rounded-lg border border-stroke-subtle bg-layer-02/35 px-3 py-2.5">
     <p className="m-0 text-sm font-medium text-text-primary">{title}</p>
     <p className="m-0 mt-1 text-xs text-text-secondary">{description}</p>
   </div>
@@ -105,7 +105,7 @@ type PreviewPaneProps = {
 };
 
 const PreviewPane = ({ previewResult, options, editorFontFamily }: PreviewPaneProps) => (
-  <section className="min-h-0 h-full overflow-hidden rounded-lg border border-border-subtle bg-layer-02/35 p-2">
+  <section className="min-h-0 h-full overflow-hidden rounded-lg border border-stroke-subtle bg-layer-02/35 p-2">
     <PdfPreviewPanel result={previewResult} options={options} editorFontFamily={editorFontFamily} />
   </section>
 );
@@ -164,12 +164,12 @@ const TextExportInfo = ({ handleClick }: { handleClick: () => Promise<void> }) =
   const { isExportingText } = useTextExportState();
 
   return (
-    <section className="min-h-0 overflow-auto rounded-lg border border-dashed border-border-subtle bg-layer-02/30 p-4">
+    <section className="min-h-0 overflow-auto rounded-lg border border-dashed border-stroke-subtle bg-layer-02/30 p-4">
       <h3 className="m-0 text-sm font-medium text-text-primary">Export Plain Text</h3>
       <p className="m-0 mt-1 text-xs text-text-secondary">
         Strips Markdown syntax while keeping readable paragraph and list structure.
       </p>
-      <div className="mt-4 rounded-md border border-border-subtle bg-layer-01 px-3 py-3">
+      <div className="mt-4 rounded-md border border-stroke-subtle bg-layer-01 px-3 py-3">
         <p className="m-0 text-xs text-text-secondary">Need the source markdown instead?</p>
         <Button
           type="button"
@@ -203,7 +203,7 @@ function TextExportContent(
         }`}>
         {showPreview
           ? (
-            <section className="min-h-0 overflow-hidden rounded-lg border border-border-subtle bg-layer-02/35 p-2">
+            <section className="min-h-0 overflow-hidden rounded-lg border border-stroke-subtle bg-layer-02/35 p-2">
               <TextPreviewPanel locationId={locationId} relPath={relPath} text={text} />
             </section>
           )
@@ -230,7 +230,7 @@ function DocxExportContent({ onCancel, handleDocxExport }: DocxExportContentProp
         title="DOCX Export"
         description="Create a Word-compatible document preserving key Markdown formatting." />
       <ExportError error={error} />
-      <section className="min-h-0 flex-1 overflow-auto rounded-lg border border-border-subtle bg-layer-02/30 p-4">
+      <section className="min-h-0 flex-1 overflow-auto rounded-lg border border-stroke-subtle bg-layer-02/30 p-4">
         <h3 className="m-0 text-sm font-medium text-text-primary">Included formatting</h3>
         <p className="m-0 mt-1 text-xs text-text-secondary">
           Headings, emphasis, code, lists, and blockquotes are retained.
@@ -251,7 +251,7 @@ function DocxExportContent({ onCancel, handleDocxExport }: DocxExportContentProp
 }
 
 const EmptyExportState = () => (
-  <section className="flex min-h-0 flex-1 items-center justify-center rounded-lg border border-border-subtle bg-layer-02/30 p-4">
+  <section className="flex min-h-0 flex-1 items-center justify-center rounded-lg border border-stroke-subtle bg-layer-02/30 p-4">
     <p className="m-0 text-sm text-text-secondary">Open a document to export.</p>
   </section>
 );
@@ -335,12 +335,12 @@ export function ExportDialog({ onExport, previewResult, editorFontFamily, docume
 
   const panelClasses = useMemo(() => {
     if (compactPanel) {
-      return "pointer-events-auto flex h-[min(90vh,760px)] w-full max-w-[980px] flex-col rounded-xl border border-border-subtle bg-layer-01 shadow-2xl";
+      return "pointer-events-auto flex h-[min(90vh,760px)] w-full max-w-[980px] flex-col rounded-xl border border-stroke-subtle bg-layer-01 shadow-2xl";
     }
 
     return showPreview
-      ? "pointer-events-auto flex h-[min(86vh,820px)] w-[min(84vw,1020px)] flex-col rounded-xl border border-border-subtle bg-layer-01 shadow-2xl"
-      : "pointer-events-auto flex h-[min(82vh,720px)] w-[min(84vw,760px)] flex-col rounded-xl border border-border-subtle bg-layer-01 shadow-2xl";
+      ? "pointer-events-auto flex h-[min(86vh,820px)] w-[min(84vw,1020px)] flex-col rounded-xl border border-stroke-subtle bg-layer-01 shadow-2xl"
+      : "pointer-events-auto flex h-[min(82vh,720px)] w-[min(84vw,760px)] flex-col rounded-xl border border-stroke-subtle bg-layer-01 shadow-2xl";
   }, [compactPanel, showPreview]);
 
   const handleExportFormatTabClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
diff --git a/src/components/export/ExportDialog/ExportFooter.tsx b/src/components/export/ExportDialog/ExportFooter.tsx
index deaea7c..1e2aa64 100644
--- a/src/components/export/ExportDialog/ExportFooter.tsx
+++ b/src/components/export/ExportDialog/ExportFooter.tsx
@@ -12,7 +12,7 @@ type ExportDialogFooterProps = {
 export const ExportDialogFooter = (
   { handleExport, onCancel, label = "Export", disable = false, isLoading = false }: ExportDialogFooterProps,
 ) => (
-  <div className="mt-4 flex flex-col-reverse gap-2 border-t border-border-subtle bg-layer-01/80 pt-4 sm:flex-row sm:gap-3">
+  <div className="mt-4 flex flex-col-reverse gap-2 border-t border-stroke-subtle bg-layer-01/80 pt-4 sm:flex-row sm:gap-3">
     <Button type="button" variant="secondary" size="lg" onClick={onCancel} disabled={isLoading} className="sm:flex-1">
       Cancel
     </Button>
diff --git a/src/components/export/ExportDialog/ExportHeader.tsx b/src/components/export/ExportDialog/ExportHeader.tsx
index 9df46cd..165e8cb 100644
--- a/src/components/export/ExportDialog/ExportHeader.tsx
+++ b/src/components/export/ExportDialog/ExportHeader.tsx
@@ -5,13 +5,13 @@ import { XIcon } from "$icons";
 type ExportDialogHeaderProps = { title?: string; onCancel: () => void };
 
 export const ExportDialogHeader = ({ title, onCancel }: ExportDialogHeaderProps) => (
-  <div className="mb-4 flex items-start justify-between gap-3 border-b border-border-subtle pb-4">
+  <div className="mb-4 flex items-start justify-between gap-3 border-b border-stroke-subtle pb-4">
     <div className="min-w-0">
       <h2 className="m-0 text-lg font-semibold text-text-primary">Export Document</h2>
       <p className="m-0 mt-1 text-xs text-text-secondary">Choose an output format and export settings.</p>
       {title
         ? (
-          <p className="m-0 mt-2 inline-flex items-center gap-1.5 rounded-md border border-border-subtle bg-layer-02/55 px-2 py-1 text-xs text-text-secondary">
+          <p className="m-0 mt-2 inline-flex items-center gap-1.5 rounded-md border border-stroke-subtle bg-layer-02/55 px-2 py-1 text-xs text-text-secondary">
             <FileTextIcon size="xs" />
             <span className="max-w-[340px] truncate text-text-primary">{title}</span>
           </p>
diff --git a/src/components/export/ExportDialog/ExportOptions.tsx b/src/components/export/ExportDialog/ExportOptions.tsx
index 4905897..b978699 100644
--- a/src/components/export/ExportDialog/ExportOptions.tsx
+++ b/src/components/export/ExportDialog/ExportOptions.tsx
@@ -6,10 +6,10 @@ import { type ReactNode, useCallback } from "react";
 type OptionSectionProps = { title: string; description: string; children: ReactNode };
 
 const FIELD_CLASS_NAME =
-  "w-full rounded-md border border-border-subtle bg-layer-01 px-3 py-2 text-sm text-text-primary transition-colors focus:border-accent-cyan focus:outline-none";
+  "w-full rounded-md border border-stroke-subtle bg-layer-01 px-3 py-2 text-sm text-text-primary transition-colors focus:border-accent-cyan focus:outline-none";
 
 const OptionSection = ({ title, description, children }: OptionSectionProps) => (
-  <section className="rounded-lg border border-border-subtle bg-layer-02/35 p-3.5">
+  <section className="rounded-lg border border-stroke-subtle bg-layer-02/35 p-3.5">
     <header className="mb-3">
       <h3 className="m-0 text-sm font-medium text-text-primary">{title}</h3>
       <p className="m-0 mt-0.5 text-xs text-text-secondary">{description}</p>
@@ -140,11 +140,11 @@ function PdfExportDialogHeaderFooter() {
   return (
     <OptionSection title="Header & Footer" description="Toggle document chrome around main content.">
       <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
-        <label className="flex items-center justify-between gap-3 rounded-md border border-border-subtle bg-layer-01 px-3 py-2 text-sm text-text-primary">
+        <label className="flex items-center justify-between gap-3 rounded-md border border-stroke-subtle bg-layer-01 px-3 py-2 text-sm text-text-primary">
           Include Header
           <input type="checkbox" checked={Boolean(options.includeHeader)} onChange={onHeaderChange} />
         </label>
-        <label className="flex items-center justify-between gap-3 rounded-md border border-border-subtle bg-layer-01 px-3 py-2 text-sm text-text-primary">
+        <label className="flex items-center justify-between gap-3 rounded-md border border-stroke-subtle bg-layer-01 px-3 py-2 text-sm text-text-primary">
           Include Footer
           <input type="checkbox" checked={Boolean(options.includeFooter)} onChange={onFooterChange} />
         </label>
diff --git a/src/components/export/preview/PdfPreview.tsx b/src/components/export/preview/PdfPreview.tsx
index 546875d..71c872f 100644
--- a/src/components/export/preview/PdfPreview.tsx
+++ b/src/components/export/preview/PdfPreview.tsx
@@ -425,7 +425,7 @@ function MultiPageCanvas(
             key={pageNumber}
             ref={pageContainerRefSetters[index]}
             data-page-number={pageNumber}
-            className="flex justify-center rounded border border-border-subtle bg-layer-01 px-2 py-2">
+            className="flex justify-center rounded border border-stroke-subtle bg-layer-01 px-2 py-2">
             <canvas ref={canvasRefSetters[index]} className="block max-w-full bg-white shadow-lg" />
           </div>
         ))}
@@ -453,14 +453,14 @@ function PreviewToolbar(
   const zoomPercent = Math.round(zoomLevel * 100);
 
   return (
-    <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border-subtle bg-layer-01/80 px-3 py-2">
+    <div className="flex flex-wrap items-center justify-between gap-2 border-b border-stroke-subtle bg-layer-01/80 px-3 py-2">
       <div className="flex items-center gap-2">
         <label htmlFor="pdf-fit-mode" className="text-xs text-text-secondary">Fit</label>
         <select
           id="pdf-fit-mode"
           value={fitMode}
           onChange={onFitModeChange}
-          className="px-2 py-1 text-xs bg-layer-02 border border-border-subtle rounded text-text-primary focus:outline-none focus:border-accent-cyan">
+          className="px-2 py-1 text-xs bg-layer-02 border border-stroke-subtle rounded text-text-primary focus:outline-none focus:border-accent-cyan">
           {FIT_MODE_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
         </select>
 
@@ -469,7 +469,7 @@ function PreviewToolbar(
           data-zoom-direction="out"
           onClick={onZoomClick}
           disabled={zoomLevel <= MIN_ZOOM}
-          className="px-2 py-1 text-xs rounded border border-border-subtle text-text-primary hover:bg-layer-03 disabled:opacity-40 disabled:cursor-not-allowed"
+          className="px-2 py-1 text-xs rounded border border-stroke-subtle text-text-primary hover:bg-layer-03 disabled:opacity-40 disabled:cursor-not-allowed"
           aria-label="Zoom out">
           -
         </button>
@@ -481,7 +481,7 @@ function PreviewToolbar(
           data-zoom-direction="in"
           onClick={onZoomClick}
           disabled={zoomLevel >= MAX_ZOOM}
-          className="px-2 py-1 text-xs rounded border border-border-subtle text-text-primary hover:bg-layer-03 disabled:opacity-40 disabled:cursor-not-allowed"
+          className="px-2 py-1 text-xs rounded border border-stroke-subtle text-text-primary hover:bg-layer-03 disabled:opacity-40 disabled:cursor-not-allowed"
           aria-label="Zoom in">
           +
         </button>
@@ -494,7 +494,7 @@ function PreviewToolbar(
               type="button"
               onClick={onPrev}
               disabled={currentPage <= 1}
-              className="px-2 py-1 rounded border border-border-subtle hover:bg-layer-03 disabled:opacity-40 disabled:cursor-not-allowed"
+              className="px-2 py-1 rounded border border-stroke-subtle hover:bg-layer-03 disabled:opacity-40 disabled:cursor-not-allowed"
               aria-label="Previous page">
               Prev
             </button>
@@ -506,13 +506,13 @@ function PreviewToolbar(
               max={pageCount}
               value={currentPage}
               onChange={onPageInputChange}
-              className="w-14 px-2 py-1 bg-layer-02 border border-border-subtle rounded text-text-primary" />
+              className="w-14 px-2 py-1 bg-layer-02 border border-stroke-subtle rounded text-text-primary" />
             <span>{currentPage} / {pageCount}</span>
             <button
               type="button"
               onClick={onNext}
               disabled={currentPage >= pageCount}
-              className="px-2 py-1 rounded border border-border-subtle hover:bg-layer-03 disabled:opacity-40 disabled:cursor-not-allowed"
+              className="px-2 py-1 rounded border border-stroke-subtle hover:bg-layer-03 disabled:opacity-40 disabled:cursor-not-allowed"
               aria-label="Next page">
               Next
             </button>
@@ -582,7 +582,7 @@ function PreviewSuccess({ pdfDoc, pageCount, usedBuiltinFonts }: PreviewSuccessP
   }, [currentPage, goToPage]);
 
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-border-subtle bg-layer-02/30">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-stroke-subtle bg-layer-02/30">
       <PreviewToolbar
         fitMode={fitMode}
         zoomLevel={zoomLevel}
@@ -595,7 +595,7 @@ function PreviewSuccess({ pdfDoc, pageCount, usedBuiltinFonts }: PreviewSuccessP
         onNext={handleNext} />
       {usedBuiltinFonts
         ? (
-          <div className="border-b border-border-subtle bg-layer-01/60 px-3 py-1 text-[0.6875rem] text-text-secondary">
+          <div className="border-b border-stroke-subtle bg-layer-01/60 px-3 py-1 text-[0.6875rem] text-text-secondary">
             Preview is using built-in fonts due to custom font loading issues.
           </div>
         )
diff --git a/src/components/export/preview/TextPreview.tsx b/src/components/export/preview/TextPreview.tsx
index 8e716f9..5bc3799 100644
--- a/src/components/export/preview/TextPreview.tsx
+++ b/src/components/export/preview/TextPreview.tsx
@@ -91,7 +91,7 @@ const PreviewError = ({ message }: { message: string }) => (
 
 const PreviewSuccess = ({ result }: { result: TextExportResult }) => (
   <div className="flex flex-col h-full bg-layer-02 rounded-lg overflow-hidden">
-    <div className="flex items-center justify-between px-3 py-2 bg-layer-01 border-b border-border-subtle">
+    <div className="flex items-center justify-between px-3 py-2 bg-layer-01 border-b border-stroke-subtle">
       <span className="text-xs text-text-secondary">Preview</span>
       <span className="text-xs text-text-tertiary">{result.word_count} words</span>
     </div>