diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index b53b009..e0053d8 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -95,7 +95,7 @@ export function AppShell() {
   return (
     <div className="flex flex-col h-screen overflow-hidden bg-bg text-text font-sans">
       {/* Header */}
-      <header className="h-11 shrink-0 flex items-center justify-between px-4 border-b border-border bg-surface">
+      <header className="h-11 shrink-0 flex items-center justify-between px-4 border-b border-border bg-surface-2">
         <div className="flex items-center gap-3">
           <button
             onClick={() => selectObject(null)}
@@ -117,7 +117,7 @@ export function AppShell() {
             disabled={!canUndo}
             title={`${t.app.undo} (${kbd('Z')})`}
             aria-label={t.app.undo}
-            className="p-1.5 rounded text-muted hover:text-text hover:bg-surface-2 disabled:opacity-25 disabled:cursor-not-allowed transition-colors"
+            className="p-1.5 rounded text-muted hover:text-text hover:bg-border disabled:opacity-25 disabled:cursor-not-allowed transition-colors"
           >
             <ArrowUturnLeftIcon className="w-3.5 h-3.5" />
           </button>
@@ -126,7 +126,7 @@ export function AppShell() {
             disabled={!canRedo}
             title={`${t.app.redo} (${kbd('Z', { shift: true })})`}
             aria-label={t.app.redo}
-            className="p-1.5 rounded text-muted hover:text-text hover:bg-surface-2 disabled:opacity-25 disabled:cursor-not-allowed transition-colors"
+            className="p-1.5 rounded text-muted hover:text-text hover:bg-border disabled:opacity-25 disabled:cursor-not-allowed transition-colors"
           >
             <ArrowUturnRightIcon className="w-3.5 h-3.5" />
           </button>
@@ -137,7 +137,7 @@ export function AppShell() {
             onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
             title={theme === "dark" ? t.app.themeLight : t.app.themeDark}
             aria-label={t.app.themeToggle}
-            className="p-1.5 rounded text-muted hover:text-text hover:bg-surface-2 transition-colors"
+            className="p-1.5 rounded text-muted hover:text-text hover:bg-border transition-colors"
           >
             {theme === "dark" ? (
               <SunIcon className="w-3.5 h-3.5" />
@@ -168,7 +168,7 @@ export function AppShell() {
             target="_blank"
             rel="noopener noreferrer"
             title="GitHub"
-            className="p-1.5 rounded text-muted hover:text-text hover:bg-surface-2 transition-colors"
+            className="p-1.5 rounded text-muted hover:text-text hover:bg-border transition-colors"
           >
             <GitHubIcon className="w-3.5 h-3.5" />
           </a>
@@ -329,7 +329,7 @@ export function AppShell() {
 
       {/* Output panel */}
       <div
-        className="shrink-0 border-t border-border flex flex-col bg-surface"
+        className="shrink-0 border-t border-border flex flex-col bg-surface-2"
         style={{ height: outputPanel.collapsed ? "auto" : outputPanel.height }}
       >
         <div
diff --git a/src/components/Output/ZPLOutput.tsx b/src/components/Output/ZPLOutput.tsx
index 13770d2..6ec6568 100644
--- a/src/components/Output/ZPLOutput.tsx
+++ b/src/components/Output/ZPLOutput.tsx
@@ -38,7 +38,7 @@ export function ZPLOutput({ collapsed, onCollapse, onExpand }: Props) {
       <div className="flex items-center justify-between px-3 py-1.5 border-b border-border shrink-0">
         <div className="flex items-center gap-2">
           <button
-            className="p-0.5 rounded text-muted hover:text-text hover:bg-surface-2 transition-colors"
+            className="p-0.5 rounded text-muted hover:text-text hover:bg-border transition-colors"
             onClick={collapsed ? onExpand : onCollapse}
             title={collapsed ? t.app.expand : t.app.collapse}
             aria-label={collapsed ? t.app.expand : t.app.collapse}
@@ -72,7 +72,7 @@ export function ZPLOutput({ collapsed, onCollapse, onExpand }: Props) {
         </div>
       </div>
 
-      {!collapsed && <pre className="flex-1 overflow-auto p-3 font-mono text-xs leading-relaxed text-text m-0">
+      {!collapsed && <pre className="flex-1 overflow-auto p-3 font-mono text-xs leading-relaxed text-text m-0 bg-surface">
         {zpl
           ? zpl.split('\n').map((line, i) => (
               <ZplLine key={i} line={line} />
diff --git a/src/index.css b/src/index.css
index aa31c61..e3f8e90 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,13 +20,13 @@
    user's explicit choice afterwards, so an OS media-query fallback would
    only fight with the cached preference. */
 :root[data-theme="light"] {
-  --color-bg:        #f4f4f8;
-  --color-surface:   #ffffff;
-  --color-surface-2: #ececf3;
-  --color-border:    #dcdce8;
-  --color-border-2:  #c8c8d8;
-  --color-text:      #1a1a2e;
-  --color-muted:     #8080a8;
+  --color-bg:        #e4e4e7;
+  --color-surface:   #fafafa;
+  --color-surface-2: #f4f4f5;
+  --color-border:    #d4d4d8;
+  --color-border-2:  #a1a1aa;
+  --color-text:      #18181b;
+  --color-muted:     #52525b;
   --color-accent:    #d97706;
   --color-accent-dim:#fef3c7;
 }
diff --git a/src/lib/useColorScheme.ts b/src/lib/useColorScheme.ts
index 4389211..c3d53b4 100644
--- a/src/lib/useColorScheme.ts
+++ b/src/lib/useColorScheme.ts
@@ -27,16 +27,16 @@ export const DARK_COLORS: CanvasColors = {
 };
 
 export const LIGHT_COLORS: CanvasColors = {
-  canvasBg:       '#ededf3',
-  canvasDot:      '#bebecf',
-  gridLine:       '#b0b0c4',
-  gridSub:        '#d0d0de',
-  rulerBg:        '#f0f0f6',
-  rulerCorner:    '#e6e6f0',
-  rulerMajorTick: '#505070',
-  rulerMinorTick: '#9090b0',
-  rulerLabel:     '#303060',
-  rulerSeparator: '#d0d0e0',
+  canvasBg:       '#e4e4e7',
+  canvasDot:      '#dcdce0',
+  gridLine:       '#a1a1aa',
+  gridSub:        '#d4d4d8',
+  rulerBg:        '#f4f4f5',
+  rulerCorner:    '#e4e4e7',
+  rulerMajorTick: '#3f3f46',
+  rulerMinorTick: '#71717a',
+  rulerLabel:     '#27272a',
+  rulerSeparator: '#d4d4d8',
 };
 
 export function useColorScheme(): CanvasColors {