diff --git a/canvas/src/components/CommunicationOverlay.tsx b/canvas/src/components/CommunicationOverlay.tsx
index 6f37b4c8..f61b662c 100644
--- a/canvas/src/components/CommunicationOverlay.tsx
+++ b/canvas/src/components/CommunicationOverlay.tsx
@@ -145,19 +145,19 @@ export function CommunicationOverlay() {
                   <span className="text-zinc-300 font-medium truncate">
                     {c.sourceName}
                   </span>
-                  <span className="text-zinc-600">→</span>
+                  <span className="text-zinc-400">→</span>
                   <span className="text-zinc-300 truncate">{c.targetName}</span>
                 </div>
                 <div className="flex items-center gap-1 shrink-0">
                   <span className={statusColor}>{statusIcon}</span>
-                  <span className="text-zinc-600">{age}</span>
+                  <span className="text-zinc-400">{age}</span>
                 </div>
               </div>
               {c.summary && (
                 <div className="text-zinc-500 truncate mt-0.5 pl-4">{c.summary}</div>
               )}
               {c.durationMs && (
-                <div className="text-zinc-600 pl-4">{c.durationMs}ms</div>
+                <div className="text-zinc-400 pl-4">{c.durationMs}ms</div>
               )}
             </div>
           );
diff --git a/canvas/src/components/ConversationTraceModal.tsx b/canvas/src/components/ConversationTraceModal.tsx
index 91467cbe..9b8851bc 100644
--- a/canvas/src/components/ConversationTraceModal.tsx
+++ b/canvas/src/components/ConversationTraceModal.tsx
@@ -162,7 +162,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
                     {/* Content */}
                     <div className="flex-1 pb-3 min-w-0">
                       <div className="flex items-center gap-2 flex-wrap">
-                        <span className="text-[9px] text-zinc-600 font-mono">
+                        <span className="text-[9px] text-zinc-400 font-mono">
                           {time}
                         </span>
                         <span
@@ -183,7 +183,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
                             : entry.activity_type.toUpperCase()}
                         </span>
                         {entry.duration_ms != null && entry.duration_ms > 0 && (
-                          <span className="text-[9px] text-zinc-600">
+                          <span className="text-[9px] text-zinc-400">
                             {entry.duration_ms > 1000
                               ? `${Math.round(entry.duration_ms / 1000)}s`
                               : `${entry.duration_ms}ms`}
@@ -199,7 +199,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
                               <span className="text-cyan-400 font-medium">
                                 {sourceName || wsName}
                               </span>
-                              <span className="text-zinc-600"> → </span>
+                              <span className="text-zinc-400"> → </span>
                               <span className="text-blue-400 font-medium">
                                 {targetName}
                               </span>
@@ -211,7 +211,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
                               </span>
                               {sourceName && (
                                 <>
-                                  <span className="text-zinc-600">
+                                  <span className="text-zinc-400">
                                     {" "}← {" "}
                                   </span>
                                   <span className="text-cyan-400 font-medium">
@@ -248,7 +248,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
                           <div className="text-[10px] text-zinc-300 whitespace-pre-wrap break-words leading-relaxed">
                             {requestText.slice(0, 2000)}
                             {requestText.length > 2000 && (
-                              <span className="text-zinc-600"> ...({requestText.length} chars)</span>
+                              <span className="text-zinc-400"> ...({requestText.length} chars)</span>
                             )}
                           </div>
                         </div>
@@ -259,7 +259,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
                           <div className="text-[10px] text-zinc-300 whitespace-pre-wrap break-words leading-relaxed">
                             {responseText.slice(0, 2000)}
                             {responseText.length > 2000 && (
-                              <span className="text-zinc-600"> ...({responseText.length} chars)</span>
+                              <span className="text-zinc-400"> ...({responseText.length} chars)</span>
                             )}
                           </div>
                         </div>
diff --git a/canvas/src/components/SearchDialog.tsx b/canvas/src/components/SearchDialog.tsx
index 44c79b90..02ced119 100644
--- a/canvas/src/components/SearchDialog.tsx
+++ b/canvas/src/components/SearchDialog.tsx
@@ -112,9 +112,9 @@ export function SearchDialog() {
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleInputKeyDown}
             placeholder="Search workspaces..."
-            className="flex-1 bg-transparent text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none"
+            className="flex-1 bg-transparent text-sm text-zinc-100 placeholder-zinc-400 focus:outline-none"
           />
-          <kbd className="text-[9px] text-zinc-600 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">ESC</kbd>
+          <kbd className="text-[9px] text-zinc-400 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">ESC</kbd>
         </div>
 
         {/* Results */}
@@ -125,7 +125,7 @@ export function SearchDialog() {
           className="max-h-[300px] overflow-y-auto py-1"
         >
           {filtered.length === 0 ? (
-            <div role="status" aria-live="polite" className="px-4 py-6 text-center text-xs text-zinc-600">
+            <div role="status" aria-live="polite" className="px-4 py-6 text-center text-xs text-zinc-400">
               {query ? "No workspaces match" : "No workspaces yet"}
             </div>
           ) : (
@@ -156,7 +156,7 @@ export function SearchDialog() {
                   )}
                 </div>
                 <span
-                  className="text-[9px] font-mono text-zinc-600"
+                  className="text-[9px] font-mono text-zinc-400"
                   aria-label={`Tier ${node.data.tier}`}
                 >
                   T{node.data.tier}
@@ -168,10 +168,10 @@ export function SearchDialog() {
 
         {/* Footer */}
         <div className="px-4 py-2 border-t border-zinc-800/40 flex items-center justify-between">
-          <span className="text-[9px] text-zinc-600">{filtered.length} workspace{filtered.length !== 1 ? "s" : ""}</span>
+          <span className="text-[9px] text-zinc-400">{filtered.length} workspace{filtered.length !== 1 ? "s" : ""}</span>
           <div className="flex gap-2">
-            <kbd className="text-[9px] text-zinc-600 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↑↓ navigate</kbd>
-            <kbd className="text-[9px] text-zinc-600 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↵ select</kbd>
+            <kbd className="text-[9px] text-zinc-400 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↑↓ navigate</kbd>
+            <kbd className="text-[9px] text-zinc-400 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↵ select</kbd>
           </div>
         </div>
       </div>
diff --git a/canvas/src/components/TemplatePalette.tsx b/canvas/src/components/TemplatePalette.tsx
index 2e41ab35..12cb9fdf 100644
--- a/canvas/src/components/TemplatePalette.tsx
+++ b/canvas/src/components/TemplatePalette.tsx
@@ -319,7 +319,7 @@ export function TemplatePalette() {
             : "bg-zinc-900/90 border border-zinc-700/50 text-zinc-400 hover:text-zinc-200 hover:border-zinc-600"
         }`}
         title="Template Palette"
-        aria-label="Template Palette"
+        aria-label={open ? "Close template palette" : "Open template palette"}
       >
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
           <rect x="1" y="1" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
diff --git a/canvas/src/styles/settings-panel.css b/canvas/src/styles/settings-panel.css
index 0cb7f35e..48fd36bb 100644
--- a/canvas/src/styles/settings-panel.css
+++ b/canvas/src/styles/settings-panel.css
@@ -324,7 +324,7 @@
   font-size: 14px;
   font-family: inherit;
   background: #18181b;
-  color: #f4f4f5;
+  color: #d4d4d8;
 }
 
 .add-key-form__select:focus,
@@ -399,7 +399,7 @@
   font-size: 14px;
   font-family: monospace;
   background: #18181b;
-  color: #f4f4f5;
+  color: #d4d4d8;
 }
 
 .key-value-field input:focus {
@@ -683,7 +683,7 @@
 }
 
 .settings-button:hover { background: #27272a; color: #f4f4f5; }
-.settings-button--active { color: #3b82f6; background: #1e3a5f; }
+.settings-button--active { color: #3b82f6; background: #1e3a8a; }
 .settings-button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
 
 .settings-button__tooltip {