diff --git a/static/daybook.css b/static/daybook.css
index 1efe90b..8f391b2 100644
--- a/static/daybook.css
+++ b/static/daybook.css
@@ -3,7 +3,9 @@
   --app-bg: #f6f7f9;
   --surface: #ffffff;
   --surface-alt: #f8f9fb;
-  --pane-bar-bg: #ffffff;
+  --pane-bar-bg: #f8f9fb;
+  --topbar-bg: #eaecf0;
+  --content-bg: #faf9f6;
   --grid-line: #dde1e7;
   --text: #2f343d;
   --muted: #7b8491;
@@ -21,8 +23,8 @@
   --row-hover: #f6f9fd;
   --time-rail-bg: #f3f5f7;
   --splitter-hover: #b8c0cc;
-  --scrollbar-thumb: var(--scrollbar-thumb);
-  --focus-ring: var(--focus-ring);
+  --scrollbar-thumb: rgba(61, 69, 82, 0.35);
+  --focus-ring: #8ab4f8;
   /* Semantic accents (success = kept, info = shared, today, danger). */
   --success-bg: #eaf7ed;
   --success-text: #28583a;
@@ -45,7 +47,9 @@
   --app-bg: #15171c;
   --surface: #1d2026;
   --surface-alt: #242832;
-  --pane-bar-bg: #1d2026;
+  --pane-bar-bg: #242832;
+  --topbar-bg: #191c21;
+  --content-bg: #16181d;
   --grid-line: #333842;
   --text: #e3e6eb;
   --muted: #99a2b0;
@@ -62,7 +66,7 @@
   --time-rail-bg: #22262e;
   --splitter-hover: #4a525f;
   --scrollbar-thumb: rgba(160, 170, 190, 0.35);
-  --focus-ring: var(--focus-ring);
+  --focus-ring: #8ab4f8;
   --success-bg: #1e3a2a;
   --success-text: #7fce9c;
   --success-border: #2f5a40;
@@ -91,7 +95,7 @@ body {
 
 .topbar {
   align-items: center;
-  background: var(--surface-alt);
+  background: var(--topbar-bg);
   border-bottom: 1px solid var(--grid-line);
   color: var(--text);
   display: grid;
@@ -198,7 +202,7 @@ h1 {
 .toolbar {
   align-items: center;
   align-self: stretch;
-  background: var(--surface-alt);
+  background: var(--topbar-bg);
   display: flex;
   gap: 0.45rem;
   justify-content: center;
@@ -354,8 +358,10 @@ h1 {
   background: var(--surface-alt);
 }
 
+/* Grey like the source sidebar; the artifact rows themselves stay white
+   (they set --surface), so they read as cards floating on the grey. */
 .artifact-sidebar {
-  background: var(--surface);
+  background: var(--surface-alt);
 }
 
 .preview-pane {
@@ -738,6 +744,7 @@ kbd {
 
 .preview-body {
   align-items: stretch;
+  background: var(--content-bg);
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;