diff --git a/design/titlebar-darker.pen b/design/titlebar-darker.pen
new file mode 100644
index 00000000..0c09dc78
--- /dev/null
+++ b/design/titlebar-darker.pen
@@ -0,0 +1,163 @@
+{
+  "version": "2.8",
+  "children": [
+    {
+      "type": "frame",
+      "id": "td001",
+      "x": 0,
+      "y": 0,
+      "name": "macOS Title Bar — darker traffic lights area",
+      "theme": { "Mode": "Light" },
+      "clip": true,
+      "width": 800,
+      "height": 300,
+      "fill": "#FFFFFF",
+      "layout": "vertical",
+      "children": [
+        {
+          "type": "frame",
+          "id": "td002",
+          "name": "Title Bar Row (--bg-titlebar: #EDECE9)",
+          "width": "fill_container",
+          "height": 45,
+          "fill": "#EDECE9",
+          "children": [
+            {
+              "type": "frame",
+              "id": "td003",
+              "name": "Sidebar Header",
+              "width": 250,
+              "height": "fill_container",
+              "fill": "#EDECE9",
+              "gap": 12,
+              "padding": [0, 12],
+              "alignItems": "center",
+              "stroke": { "color": "#E9E9E7", "width": 1, "sides": ["right", "bottom"] },
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "td004",
+                  "name": "trafficLights",
+                  "gap": 8,
+                  "alignItems": "center",
+                  "children": [
+                    { "type": "ellipse", "id": "td005", "fill": "#FF5F57", "width": 12, "height": 12 },
+                    { "type": "ellipse", "id": "td006", "fill": "#FEBC2E", "width": 12, "height": 12 },
+                    { "type": "ellipse", "id": "td007", "fill": "#28C840", "width": 12, "height": 12 }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "td008",
+              "name": "NoteList Header",
+              "width": 250,
+              "height": "fill_container",
+              "fill": "#EDECE9",
+              "padding": [0, 16],
+              "alignItems": "center",
+              "stroke": { "color": "#E9E9E7", "width": 1, "sides": ["right", "bottom"] },
+              "children": [
+                { "type": "text", "id": "td009", "value": "All Notes", "fontSize": 14, "fontWeight": 600, "fill": "#37352F" }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "td010",
+              "name": "TabBar Header",
+              "width": "fill_container",
+              "height": "fill_container",
+              "fill": "#EDECE9",
+              "padding": [0, 12],
+              "gap": 4,
+              "alignItems": "center",
+              "stroke": { "color": "#E9E9E7", "width": 1, "sides": ["bottom"] },
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "td011",
+                  "name": "Tab",
+                  "fill": "#FFFFFF",
+                  "cornerRadius": [6, 6, 0, 0],
+                  "padding": [6, 12],
+                  "alignItems": "center",
+                  "children": [
+                    { "type": "text", "id": "td012", "value": "My Note.md", "fontSize": 13, "fill": "#37352F" }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "td013",
+          "name": "Content Area (lighter)",
+          "width": "fill_container",
+          "height": "fill_container",
+          "fill": "#FFFFFF",
+          "children": [
+            {
+              "type": "frame",
+              "id": "td014",
+              "name": "Sidebar Content",
+              "width": 250,
+              "height": "fill_container",
+              "fill": "#F7F6F3",
+              "padding": [8, 12],
+              "layout": "vertical",
+              "gap": 4,
+              "stroke": { "color": "#E9E9E7", "width": 1, "sides": ["right"] },
+              "children": [
+                { "type": "text", "id": "td015", "value": "All Notes", "fontSize": 14, "fill": "#37352F" },
+                { "type": "text", "id": "td016", "value": "Favorites", "fontSize": 14, "fill": "#37352F" },
+                { "type": "text", "id": "td017", "value": "Archive", "fontSize": 14, "fill": "#787774" }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "td018",
+              "name": "NoteList Content",
+              "width": 250,
+              "height": "fill_container",
+              "fill": "#FFFFFF",
+              "padding": [8, 12],
+              "layout": "vertical",
+              "gap": 2,
+              "stroke": { "color": "#E9E9E7", "width": 1, "sides": ["right"] },
+              "children": [
+                { "type": "text", "id": "td019", "value": "Meeting Notes", "fontSize": 13, "fill": "#37352F" },
+                { "type": "text", "id": "td020", "value": "Project Ideas", "fontSize": 13, "fill": "#37352F" },
+                { "type": "text", "id": "td021", "value": "Reading List", "fontSize": 13, "fill": "#37352F" }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "td022",
+              "name": "Editor Content",
+              "width": "fill_container",
+              "height": "fill_container",
+              "fill": "#FFFFFF",
+              "padding": [24, 32],
+              "layout": "vertical",
+              "gap": 8,
+              "children": [
+                { "type": "text", "id": "td023", "value": "My Note", "fontSize": 24, "fontWeight": 700, "fill": "#37352F" },
+                { "type": "text", "id": "td024", "value": "The title bar (#EDECE9) is subtly darker than the sidebar (#F7F6F3) and content (#FFFFFF), providing visual separation without a harsh border.", "fontSize": 14, "fill": "#787774" }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "variables": {
+    "--bg-titlebar": { "type": "color", "value": "#EDECE9" },
+    "--sidebar": { "type": "color", "value": "#F7F6F3" },
+    "--background": { "type": "color", "value": "#FFFFFF" },
+    "--foreground": { "type": "color", "value": "#37352F" },
+    "--muted-foreground": { "type": "color", "value": "#787774" },
+    "--border": { "type": "color", "value": "#E9E9E7" }
+  }
+}
\ No newline at end of file
diff --git a/src/components/Inspector.tsx b/src/components/Inspector.tsx
index a5dd851d..ceb4705b 100644
--- a/src/components/Inspector.tsx
+++ b/src/components/Inspector.tsx
@@ -75,7 +75,7 @@ function useReferencedBy(entry: VaultEntry | null, entries: VaultEntry[]): Refer
 function InspectorHeader({ collapsed, onToggle }: { collapsed: boolean; onToggle: () => void }) {
   const { onMouseDown } = useDragRegion()
   return (
-    <div className="flex items-center border-b border-border" style={{ height: 52, padding: '0 12px', gap: 8, cursor: 'default' }} onMouseDown={onMouseDown}>
+    <div className="flex items-center border-b border-border" style={{ height: 52, background: 'var(--bg-titlebar)', padding: '0 12px', gap: 8, cursor: 'default' }} onMouseDown={onMouseDown} data-tauri-drag-region>
       {collapsed ? (
         <button className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground" onClick={onToggle}>
           <SlidersHorizontal size={16} />
diff --git a/src/components/NoteList.tsx b/src/components/NoteList.tsx
index a99a6dec..8b5951ff 100644
--- a/src/components/NoteList.tsx
+++ b/src/components/NoteList.tsx
@@ -298,7 +298,7 @@ function NoteListInner({ entries, selection, selectedNote, allContent, modifiedF
 
   return (
     <div className="flex flex-col overflow-hidden border-r border-border bg-card text-foreground" style={{ height: '100%' }}>
-      <div className="flex h-[52px] shrink-0 items-center justify-between border-b border-border px-4" onMouseDown={onDragMouseDown} style={{ cursor: 'default' }}>
+      <div className="flex h-[52px] shrink-0 items-center justify-between border-b border-border px-4" onMouseDown={onDragMouseDown} data-tauri-drag-region style={{ background: 'var(--bg-titlebar)', cursor: 'default' }}>
         <h3 className="m-0 min-w-0 flex-1 truncate text-[14px] font-semibold">{resolveHeaderTitle(selection, typeDocument)}</h3>
         <div className="flex items-center gap-3" style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
           {!isEntityView && <SortDropdown groupLabel="__list__" current={listSort} direction={listDirection} onChange={handleSortChange} />}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index fe8c8ea8..f3a82793 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -175,7 +175,7 @@ function CommitButton({ modifiedCount, onClick }: { modifiedCount: number; onCli
 function SidebarTitleBar({ onCollapse }: { onCollapse?: () => void }) {
   const { onMouseDown } = useDragRegion()
   return (
-    <div className="shrink-0 flex items-center justify-end border-b border-border" style={{ height: 52, padding: '0 8px', paddingLeft: 80, cursor: 'default' } as React.CSSProperties} onMouseDown={onMouseDown}>
+    <div className="shrink-0 flex items-center justify-end border-b border-border" style={{ height: 52, background: 'var(--bg-titlebar)', padding: '0 8px', paddingLeft: 80, cursor: 'default' } as React.CSSProperties} onMouseDown={onMouseDown} data-tauri-drag-region>
       {onCollapse && (
         <button
           className="flex shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx
index 8b916947..10755e14 100644
--- a/src/components/TabBar.tsx
+++ b/src/components/TabBar.tsx
@@ -333,7 +333,8 @@ export const TabBar = memo(function TabBar({
   return (
     <div
       className="flex shrink-0 items-stretch"
-      style={{ height: 52, background: 'var(--sidebar)' } as React.CSSProperties}
+      style={{ height: 52, background: 'var(--bg-titlebar)' } as React.CSSProperties}
+      data-tauri-drag-region
       onDragLeave={handleBarDragLeave}
     >
       <NavButtons canGoBack={canGoBack} canGoForward={canGoForward} onGoBack={onGoBack} onGoForward={onGoForward} />
diff --git a/src/index.css b/src/index.css
index ba455d1a..1e19d217 100644
--- a/src/index.css
+++ b/src/index.css
@@ -82,6 +82,7 @@
   --accent-teal-light: rgba(49, 151, 149, 0.1);
   --accent-pink: #D53F8C;
   --accent-pink-light: rgba(213, 63, 140, 0.1);
+  --bg-titlebar: #EDECE9;
   --border-primary: #E9E9E7;
   --border-subtle: #E9E9E7;
   --border-input: #E9E9E7;