diff --git a/AGENTS.md b/AGENTS.md
index be3ae0d5..a7d129d4 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -47,6 +47,7 @@ Related Issue: #<issue-number>
 - **本地启动**：默认 `bun run dev`（纯本地环境）；指定远程实例用 `EDGE_EVER_INSTANCE=<实例名> bun run dev:remote`；纯前端用 `bun run dev:web`。
 - **Demo 示例同步**：修改示例笔记后，在 `main` 分支干净状态下执行 `bun run demo:sync` 重置公开 Demo。
 - **禁止重复造轮子**：严禁重复实现已有成熟方案；优先采用维护活跃、广泛验证的开源组件与依赖，并优先复用 `shadcn/ui`；复杂或重复模块封装为独立组件。
+- UI和交互的原则是，产品始终表现得可靠、可预测、确定、被接住。
 - **悬停提示**：所有悬停或聚焦提示严禁使用 HTML 原生 `title`；Web 端必须统一使用 shadcn/ui 的 Tooltip 组件，并确保键盘聚焦时同样可见。
 
 ## 品牌视觉规范 / Brand Identity
diff --git a/apps/web/src/components/MemoCard.tsx b/apps/web/src/components/MemoCard.tsx
index bee8af77..8ac478bb 100644
--- a/apps/web/src/components/MemoCard.tsx
+++ b/apps/web/src/components/MemoCard.tsx
@@ -315,9 +315,9 @@ export const MemoCard = ({
         "group relative overflow-hidden border border-slate-100 bg-white transition lg:rounded-none lg:border-x-0 lg:border-t-0 lg:border-slate-200 lg:shadow-none lg:last:border-b-0 dark:lg:border-slate-300/70 transition-all duration-200 select-none",
         listDensity === "compact" ? "rounded-md shadow-none" : "rounded-lg shadow-[0_4px_16px_rgba(15,23,42,0.045)]",
         !selectionMode && selected
-          ? "lg:bg-slate-100"
+          ? "edgeever-workspace-selection-desktop"
           : checked
-            ? "bg-slate-50 ring-1 ring-slate-200 lg:bg-slate-100 lg:ring-0"
+            ? "edgeever-workspace-selection-desktop bg-slate-50 ring-1 ring-slate-200 lg:ring-0"
             : "active:bg-slate-50 lg:hover:bg-slate-50"
       )}
     >
diff --git a/apps/web/src/components/MemoListPane.tsx b/apps/web/src/components/MemoListPane.tsx
index 05c2de42..f002e2f1 100644
--- a/apps/web/src/components/MemoListPane.tsx
+++ b/apps/web/src/components/MemoListPane.tsx
@@ -948,7 +948,7 @@ export const MemoListPane = ({
       tabIndex={0}
       onKeyDown={handleListKeyDown}
     >
-      <header className="border-b border-slate-200 bg-slate-50 px-4 pb-2 pt-[max(0.375rem,env(safe-area-inset-bottom))] lg:bg-white lg:py-3 lg:pt-3">
+      <header className="border-b border-slate-200 bg-slate-50 px-4 pb-2 pt-[max(0.375rem,env(safe-area-inset-bottom))] lg:bg-transparent lg:py-3 lg:pt-3">
         {selectionMode ? (
           <div className="mb-3 flex h-10 min-w-0 items-center gap-3 lg:hidden">
             <button
diff --git a/apps/web/src/components/NotebookPane.tsx b/apps/web/src/components/NotebookPane.tsx
index 5b5b9be9..5ab553c3 100644
--- a/apps/web/src/components/NotebookPane.tsx
+++ b/apps/web/src/components/NotebookPane.tsx
@@ -87,7 +87,7 @@ const SidebarNavButton = ({
       tone === "warning"
         ? "text-amber-700 hover:bg-amber-50/70 hover:text-amber-800"
         : active
-          ? "bg-slate-100 text-slate-950"
+          ? "edgeever-workspace-selection text-slate-950"
           : "text-slate-700 hover:bg-slate-50 hover:text-slate-950"
     )}
     type="button"
@@ -116,7 +116,7 @@ const SidebarShortcutButton = ({
     <button
       className={cn(
         "flex h-9 min-w-0 w-full items-center justify-center rounded-md px-0 text-xs font-medium transition-colors duration-200",
-        active ? "bg-slate-100 text-slate-900" : "text-slate-600 hover:bg-slate-50 hover:text-slate-950"
+        active ? "edgeever-workspace-selection text-slate-900" : "text-slate-600 hover:bg-slate-50 hover:text-slate-950"
       )}
       type="button"
       aria-current={active ? "page" : undefined}
@@ -614,7 +614,7 @@ export const NotebookPane = ({
 
       </div>
 
-      <footer className="border-t border-slate-200 bg-white/80 px-3 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2 backdrop-blur-sm">
+      <footer className="edgeever-workspace-sidebar-footer border-t border-slate-200 px-3 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2 backdrop-blur-sm">
         <div className="space-y-1">
           {!window.edgeeverDesktop?.isAvailable && (
             <a
diff --git a/apps/web/src/components/NotebookTreeItem.tsx b/apps/web/src/components/NotebookTreeItem.tsx
index 3e0ae8e2..6bfacc23 100644
--- a/apps/web/src/components/NotebookTreeItem.tsx
+++ b/apps/web/src/components/NotebookTreeItem.tsx
@@ -176,7 +176,7 @@ export const NotebookTreeItem = ({
             className={cn(
               "group relative flex h-9 items-center gap-1 rounded-md px-2 text-sm lg:text-[13px] transition-all duration-200 select-none",
               selected
-                ? "bg-slate-100 font-medium text-slate-950"
+                ? "edgeever-workspace-selection font-medium text-slate-950"
                 : hasSelectedDescendant
                   ? "bg-slate-50 text-slate-900 hover:bg-slate-100"
                   : "text-slate-700 hover:bg-slate-50",
diff --git a/apps/web/src/components/WorkspaceApp.tsx b/apps/web/src/components/WorkspaceApp.tsx
index 5ba9ebaf..c56cea59 100644
--- a/apps/web/src/components/WorkspaceApp.tsx
+++ b/apps/web/src/components/WorkspaceApp.tsx
@@ -2811,7 +2811,7 @@ export const WorkspaceApp = ({
 
   return (
     <WorkspaceMotionProvider>
-      <div className="flex h-[100dvh] overflow-hidden bg-slate-50 text-slate-950">
+      <div className="edgeever-workspace-shell flex h-[100dvh] overflow-hidden text-slate-950">
       {pullToRefreshVisible && (
         <div
           className="pointer-events-none fixed inset-x-0 top-[max(0.75rem,env(safe-area-inset-top))] z-50 flex justify-center lg:hidden"
@@ -2838,7 +2838,7 @@ export const WorkspaceApp = ({
         >
           <aside
             className={cn(
-              "min-h-0 border-r border-slate-200 bg-white/75 backdrop-blur-lg",
+              "edgeever-workspace-sidebar min-h-0 border-r",
               desktopFocusModeActive
                 ? "hidden"
                 : visibleActivePane === "notebooks"
@@ -2908,11 +2908,11 @@ export const WorkspaceApp = ({
 
           <section
             className={cn(
-              "relative min-w-0 overflow-hidden border-r border-slate-200 bg-slate-50",
+              "edgeever-workspace-memo-list relative min-w-0 overflow-hidden border-r",
               desktopFocusModeActive
                 ? "hidden"
                 : rightView === "editor"
-                  ? (visibleActivePane === "memos" ? "block lg:block lg:bg-white/75 lg:backdrop-blur-lg" : "hidden lg:block lg:bg-white/75 lg:backdrop-blur-lg")
+                  ? (visibleActivePane === "memos" ? "block lg:block" : "hidden lg:block")
                   : (visibleActivePane === "memos" ? "block lg:hidden" : "hidden lg:hidden")
             )}
           >
@@ -3052,7 +3052,7 @@ export const WorkspaceApp = ({
             />
           </section>
 
-          <section className={cn("min-h-0 min-w-0 bg-white lg:block", visibleActivePane === "editor" ? "block" : "hidden")}>
+          <section className={cn("edgeever-workspace-editor min-h-0 min-w-0 lg:block", visibleActivePane === "editor" ? "block" : "hidden")}>
             {shouldRenderRightPane && (
               <Suspense fallback={<PaneLoadingFallback label={rightPaneLoadingLabel} />}>
                 <m.div key={rightView} className="h-full min-h-0 min-w-0" {...paneEnterMotion}>
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index bedfa79a..213b9cfb 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -109,6 +109,12 @@ html[data-edgeever-environment="demo"] body::after {
     --brand-green-800-rgb: 0 92 25;
     --brand-green-900-rgb: 0 67 18;
     --brand-green-950-rgb: 0 43 11;
+    --workspace-canvas: #f3f5f7;
+    --workspace-sidebar: #eff1f4;
+    --workspace-memo-list: #f6f7f9;
+    --workspace-editor: #ffffff;
+    --workspace-divider: #dde1e7;
+    --workspace-selection: #eef2f6;
     --slate-50-rgb: 248 250 252;
     --slate-100-rgb: 241 245 249;
     --slate-200-rgb: 226 232 240;
@@ -331,6 +337,54 @@ html[data-edgeever-extension-theme] kbd {
   grid-template-columns: minmax(0, 1fr);
 }
 
+.edgeever-workspace-shell {
+  background: var(--workspace-canvas);
+}
+
+.edgeever-workspace-sidebar {
+  border-color: var(--workspace-divider);
+  background: var(--workspace-sidebar);
+}
+
+.edgeever-workspace-memo-list {
+  border-color: var(--workspace-divider);
+  background: var(--workspace-memo-list);
+}
+
+.edgeever-workspace-editor {
+  background: var(--workspace-editor);
+}
+
+.edgeever-workspace-sidebar-footer {
+  background: color-mix(in srgb, var(--workspace-sidebar) 92%, transparent);
+}
+
+.edgeever-workspace-selection {
+  background: var(--workspace-selection);
+}
+
+html[data-edgeever-extension-theme] .edgeever-workspace-shell {
+  background: var(--edgeever-theme-background, var(--workspace-canvas));
+}
+
+html[data-edgeever-extension-theme] .edgeever-workspace-sidebar,
+html[data-edgeever-extension-theme] .edgeever-workspace-memo-list {
+  border-color: var(--edgeever-theme-border, var(--workspace-divider));
+}
+
+html[data-edgeever-extension-theme] .edgeever-workspace-sidebar {
+  background: var(--edgeever-theme-surface-muted, var(--workspace-sidebar));
+}
+
+html[data-edgeever-extension-theme] .edgeever-workspace-memo-list,
+html[data-edgeever-extension-theme] .edgeever-workspace-editor {
+  background: var(--edgeever-theme-surface, var(--workspace-editor));
+}
+
+html[data-edgeever-extension-theme] .edgeever-workspace-selection {
+  background: var(--edgeever-theme-surface-muted, var(--workspace-selection));
+}
+
 @media (min-width: 1024px) {
   .edgeever-workspace-grid--editor {
     grid-template-columns:
@@ -342,6 +396,14 @@ html[data-edgeever-extension-theme] kbd {
   .edgeever-workspace-grid--single-right {
     grid-template-columns: clamp(180px, 17vw, 260px) minmax(0, 1fr);
   }
+
+  .edgeever-workspace-selection-desktop {
+    background: var(--workspace-selection);
+  }
+
+  html[data-edgeever-extension-theme] .edgeever-workspace-selection-desktop {
+    background: var(--edgeever-theme-surface-muted, var(--workspace-selection));
+  }
 }
 
 :root.dark body {
@@ -349,6 +411,27 @@ html[data-edgeever-extension-theme] kbd {
   color: #f8fafc;
 }
 
+:root.dark .edgeever-workspace-shell,
+:root.dark .edgeever-workspace-sidebar,
+:root.dark .edgeever-workspace-memo-list,
+:root.dark .edgeever-workspace-editor {
+  background: #0f172a;
+}
+
+:root.dark .edgeever-workspace-sidebar,
+:root.dark .edgeever-workspace-memo-list {
+  border-color: #334155;
+}
+
+:root.dark .edgeever-workspace-sidebar-footer {
+  background: rgb(15 23 42 / 88%);
+}
+
+:root.dark .edgeever-workspace-selection,
+:root.dark .edgeever-workspace-selection-desktop {
+  background: #1e293b;
+}
+
 :root.dark .ProseMirror {
   color: #f8fafc;
 }