diff --git a/packages/ui/src/components/dock-card.css b/packages/ui/src/components/dock-card.css
index c5817527d..1aeb9f2a6 100644
--- a/packages/ui/src/components/dock-card.css
+++ b/packages/ui/src/components/dock-card.css
@@ -1,5 +1,5 @@
 [data-dock="card"] {
-  background-color: var(--bg-base);
+  background-color: var(--surface-raised);
   border-radius: var(--radius-lg);
   box-shadow: 0 0 0 1px var(--border-weak), var(--shadow-raised);
   overflow: hidden;
@@ -8,7 +8,6 @@
 }
 
 :root[data-color-scheme="dark"] [data-dock="card"] {
-  background-color: var(--surface-raised);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
diff --git a/packages/ui/src/components/picker.css b/packages/ui/src/components/picker.css
index 73fffb386..b286384c3 100644
--- a/packages/ui/src/components/picker.css
+++ b/packages/ui/src/components/picker.css
@@ -29,7 +29,7 @@
 }
 
 [data-picker-content] {
-  background-color: var(--surface-base);
+  background-color: var(--surface-raised);
   border-radius: var(--radius-md);
   padding: 4px;
   box-shadow: var(--ring-base), var(--shadow-floating);
diff --git a/packages/ui/src/components/picker.test.ts b/packages/ui/src/components/picker.test.ts
index 0e086ab6a..8004fab64 100644
--- a/packages/ui/src/components/picker.test.ts
+++ b/packages/ui/src/components/picker.test.ts
@@ -52,11 +52,11 @@ describe("picker.css: trigger contract", () => {
 })
 
 describe("picker.css: content contract", () => {
-  test("content uses --surface-base background", () => {
+  test("content uses --surface-raised background", () => {
     const contentIdx = css.indexOf("[data-picker-content] {")
     expect(contentIdx).toBeGreaterThan(-1)
     const block = css.slice(contentIdx, contentIdx + 300)
-    expect(block).toContain("--surface-base")
+    expect(block).toContain("--surface-raised")
   })
 
   test("content uses --radius-md", () => {
diff --git a/packages/ui/src/components/popover.css b/packages/ui/src/components/popover.css
index 2e08c245f..18c375ec7 100644
--- a/packages/ui/src/components/popover.css
+++ b/packages/ui/src/components/popover.css
@@ -5,7 +5,7 @@
 [data-component="popover-content"] {
   z-index: 50;
   border-radius: var(--radius-md);
-  background-color: var(--surface-base);
+  background-color: var(--surface-raised);
   background-clip: padding-box;
   box-shadow: var(--ring-base), var(--shadow-floating);
 
@@ -113,24 +113,25 @@
 
   &:hover,
   &[data-force-state="hover"] {
-    background: var(--bg-cream);
+    background: var(--row-hover-overlay);
   }
 
   &[data-active],
   &[data-force-state="active"] {
-    background: var(--bg-cream);
+    background: var(--surface-interactive-base);
     opacity: 0.8;
   }
 
   &:focus-visible,
   &[data-force-state="focus-visible"] {
     outline: none;
-    background: var(--bg-cream);
+    background: var(--row-hover-overlay);
   }
 
   &[data-selected],
   &[data-force-state="selected"] {
-    background: var(--bg-cream);
+    background: var(--surface-interactive-base);
+    font-weight: var(--font-weight-emphasis);
   }
 
   &[data-disabled],
diff --git a/packages/ui/src/components/popover.stories.tsx b/packages/ui/src/components/popover.stories.tsx
index fab1fbb91..e62623afd 100644
--- a/packages/ui/src/components/popover.stories.tsx
+++ b/packages/ui/src/components/popover.stories.tsx
@@ -63,7 +63,7 @@ export const MenuMatrix = {
       {/* Light */}
       <div
         style={{
-          background: "var(--surface-base)",
+          background: "var(--surface-raised)",
           "border-radius": "var(--radius-md)",
           "box-shadow": "var(--ring-base), var(--shadow-floating)",
           padding: "4px",
@@ -101,7 +101,7 @@ export const MenuMatrix = {
       <div
         data-color-scheme="dark"
         style={{
-          background: "var(--surface-base)",
+          background: "var(--surface-raised)",
           "border-radius": "var(--radius-md)",
           "box-shadow": "var(--ring-base), var(--shadow-floating)",
           padding: "4px",
@@ -135,7 +135,7 @@ export const WithSearch = {
   render: () => (
     <div
       style={{
-        background: "var(--surface-base)",
+        background: "var(--surface-raised)",
         "border-radius": "var(--radius-md)",
         "box-shadow": "var(--ring-base), var(--shadow-floating)",
         "min-width": "184px",
diff --git a/packages/ui/src/components/text-field.css b/packages/ui/src/components/text-field.css
index 351a1f96c..8b2660adc 100644
--- a/packages/ui/src/components/text-field.css
+++ b/packages/ui/src/components/text-field.css
@@ -222,3 +222,23 @@
     }
   }
 }
+
+/* Dark normal-variant wrapper lifts to raised (`#2d2a27`) so the input
+ * separates from thread / sidebar canvas (per DESIGN.md L353). The
+ * `:not([data-disabled]):not([data-readonly])` guard keeps the existing
+ * disabled / readonly path on `--bg-cream` (= canvas in dark, the spec
+ * sunken-back-to-thread reading). Specificity (0,5,0) sits above the
+ * `[data-disabled]` block (0,4,0); the :not() guard is what lets the
+ * disabled rule still take over. */
+:root[data-color-scheme="dark"]
+  [data-component="input"][data-variant="normal"]:not([data-disabled]):not([data-readonly])
+  [data-slot="input-wrapper"] {
+  background: var(--surface-raised);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-scheme="light"])
+    [data-component="input"][data-variant="normal"]:not([data-disabled]):not([data-readonly])
+    [data-slot="input-wrapper"] {
+    background: var(--surface-raised);
+  }
+}
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 89eae6be2..6e6393bf3 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -87,7 +87,7 @@
   --surface-raised: #ffffff;
   --surface-sunken: #faf9f7; /* light alias → bg-cream; no third neutral tier (L9) */
   --code-surface:   rgba(0, 0, 0, 0.04); /* #642: alpha overlay for inline code + code-block */
-  --sidebar:        #f9f9f9; /* neutral pale grey, decoupled from bg-cream per ui_kits mock */
+  --sidebar:        #f8f6f3; /* chrome 独立 surface（暖灰，-9 sRGB 比 thread 暗） */
   --surface-base-active: rgba(0, 0, 0, 0.051);
 
   /* ────────── Light ink · 2-tier collapse (strong + weak); base/weaker pairs merge.
@@ -278,24 +278,26 @@
  * aligned with that runtime path; it is not the runtime source of truth.
  * ────────────────────────────────────────────────────────────────────────── */
 :root[data-color-scheme="dark"] {
-  /* Dark surface · 2-tier collapse (canvas + raised), R-B=3 warm coffee.
-   * The legacy 6-tier ladder collapses into 2 visible tones:
-   *   canvas  #1a1917  — chrome floor: bg / sidebar / popover / textfield / sunken alias
-   *   raised  #262523  — anchored: dialog / composer / msg-user / list-hover / command palette
+  /* Dark surface · 3-tier (canvas + sidebar + raised), R-B=3 warm coffee.
+   * The legacy 6-tier ladder collapses into 3 visible tones:
+   *   canvas  #1a1917  — chrome floor: bg / sunken alias / cream alias / surface-base alias
+   *   sidebar #232120  — chrome middle: 左栏独立 surface (+9 sRGB 比 canvas 亮)
+   *   raised  #2d2a27  — anchored: dialog / composer dock / msg-user / list-hover / popover / textfield / picker (+9 sRGB 比 sidebar 亮)
+   * 三档步长均匀 +9 sRGB，跟浅色 sidebar -9 形成对称。
    * Token names survive for light-mode parity and callsite stability. */
   --bg-base:        #1a1917;
   --bg-cream:       #1a1917; /* dark collapse → canvas (no separate cream tier) */
-  --surface-base:   #1a1917; /* dark collapse → canvas (popover / textfield share chrome) */
-  --surface-raised: #262523;
+  --surface-base:   #1a1917; /* dark collapse → canvas (secondary button / inline controls) */
+  --surface-raised: #2d2a27;
   --surface-sunken: #1a1917; /* dark collapse → canvas (no sunken tier) */
   --code-surface:   rgba(255, 255, 255, 0.06); /* #642: alpha overlay for inline code + code-block */
-  --sidebar:        #1a1917; /* dark collapse → canvas (three columns share one surface) */
+  --sidebar:        #232120; /* sidebar chrome 中间一档 */
 
   /* Dark ink · 2-tier collapse (fg + fg-weak); strong/base and weak/weaker pairs merge */
-  --fg-strong: #ebe7e0;
-  --fg-base:   #ebe7e0; /* dark collapse → fg */
-  --fg-weak:   #7e7872;
-  --fg-weaker: #7e7872; /* dark collapse → fg-weak */
+  --fg-strong: #f4efe7;
+  --fg-base:   #f4efe7; /* dark collapse → fg */
+  --fg-weak:   #928c82;
+  --fg-weaker: #928c82; /* dark collapse → fg-weak */
 
   /* Dark border · 1-tier collapse to a single hairline alpha; container outlines
    * keep the `--ring-base` 1px white-18% halo for elevation pickup.
@@ -307,9 +309,9 @@
   --border-weaker: rgba(255, 255, 255, 0.08);
 
   /* Icon mirrors collapsed dark ink */
-  --icon-base:   #7e7872;
-  --icon-strong: #ebe7e0;
-  --icon-weak:   #7e7872;
+  --icon-base:   #928c82;
+  --icon-strong: #f4efe7;
+  --icon-weak:   #928c82;
 
   /* Brand hover lifted in dark for legibility on warm coffee surface */
   --brand-primary-hover: #ff7a3a;
@@ -435,23 +437,23 @@
     --bg-base:        #1a1917;
     --bg-cream:       #1a1917;
     --surface-base:   #1a1917;
-    --surface-raised: #262523;
+    --surface-raised: #2d2a27;
     --surface-sunken: #1a1917;
     --code-surface:   rgba(255, 255, 255, 0.06); /* #642: alpha overlay for inline code + code-block */
-    --sidebar:        #1a1917;
+    --sidebar:        #232120;
 
-    --fg-strong: #ebe7e0;
-    --fg-base:   #ebe7e0;
-    --fg-weak:   #7e7872;
-    --fg-weaker: #7e7872;
+    --fg-strong: #f4efe7;
+    --fg-base:   #f4efe7;
+    --fg-weak:   #928c82;
+    --fg-weaker: #928c82;
 
     --border-base:   rgba(255, 255, 255, 0.08);
     --border-weak:   rgba(255, 255, 255, 0.08);
     --border-weaker: rgba(255, 255, 255, 0.08);
 
-    --icon-base:   #7e7872;
-    --icon-strong: #ebe7e0;
-    --icon-weak:   #7e7872;
+    --icon-base:   #928c82;
+    --icon-strong: #f4efe7;
+    --icon-weak:   #928c82;
 
     --brand-primary-hover: #ff7a3a;
 
diff --git a/packages/ui/src/theme/themes/pawwork.json b/packages/ui/src/theme/themes/pawwork.json
index bfe59abc6..31fad10a3 100644
--- a/packages/ui/src/theme/themes/pawwork.json
+++ b/packages/ui/src/theme/themes/pawwork.json
@@ -54,7 +54,7 @@
       "letter-spacing-display": "-0.32px",
       "letter-spacing-h1": "-0.16px",
       "letter-spacing-cjk": "0",
-      "sidebar": "#f9f9f9",
+      "sidebar": "#f8f6f3",
       "surface-interactive-base": "#fdf6f0",
       "surface-interactive-hover": "#fbece0",
       "surface-base-active": "rgba(0, 0, 0, 0.051)",
@@ -103,7 +103,7 @@
       "bg-base": "#1a1917",
       "bg-cream": "#1a1917",
       "surface-base": "#1a1917",
-      "surface-raised": "#262523",
+      "surface-raised": "#2d2a27",
       "surface-sunken": "#1a1917",
       "code-surface": "rgba(255, 255, 255, 0.06)",
       "font-size-display": "28px",
@@ -137,21 +137,21 @@
       "letter-spacing-display": "-0.32px",
       "letter-spacing-h1": "-0.16px",
       "letter-spacing-cjk": "0",
-      "sidebar": "#1a1917",
+      "sidebar": "#232120",
       "surface-interactive-base": "rgba(255, 89, 16, 0.14)",
       "surface-interactive-hover": "rgba(255, 89, 16, 0.20)",
       "surface-base-active": "rgba(255, 255, 255, 0.059)",
-      "fg-strong": "#ebe7e0",
-      "fg-base": "#ebe7e0",
-      "fg-weak": "#7e7872",
-      "fg-weaker": "#7e7872",
+      "fg-strong": "#f4efe7",
+      "fg-base": "#f4efe7",
+      "fg-weak": "#928c82",
+      "fg-weaker": "#928c82",
       "border-base": "rgba(255, 255, 255, 0.08)",
       "border-weak": "rgba(255, 255, 255, 0.08)",
       "border-weaker": "rgba(255, 255, 255, 0.08)",
-      "icon-base": "#7e7872",
+      "icon-base": "#928c82",
       "icon-disabled": "#4a4542",
-      "icon-strong": "#ebe7e0",
-      "icon-weak": "#7e7872",
+      "icon-strong": "#f4efe7",
+      "icon-weak": "#928c82",
       "diff-add": "rgba(58, 176, 107, 0.15)",
       "diff-del": "rgba(230, 92, 74, 0.15)",
       "error": "#e65c4a",