diff --git a/ui/desktop/src/components/BaseChat.tsx b/ui/desktop/src/components/BaseChat.tsx
index 9f6657e2..f0b7f189 100644
--- a/ui/desktop/src/components/BaseChat.tsx
+++ b/ui/desktop/src/components/BaseChat.tsx
@@ -136,6 +136,17 @@ function BaseChatContent({
 
   const isMobile = useIsMobile();
   const { state: sidebarState } = useSidebar();
+  const isMacOS = (window?.electron?.platform || 'darwin') === 'darwin';
+  // When the sidebar is collapsed the chat spans full width and the top-left
+  // strip holds the floating controls (sidebar toggle / new-window / dashboard)
+  // plus, on macOS, the window traffic lights. Shrink the pill wrapper to fit and
+  // offset it PAST the controls so it neither overlaps them nor lets its
+  // -webkit-app-region: drag surface swallow their clicks (app-region is resolved
+  // by the compositor, so a full-width drag wrapper eats clicks even under a
+  // higher-z no-drag button). Expanded keeps the full-width draggable header strip
+  // — there the controls sit over the sidebar, not over this wrapper.
+  const sessionPillWrapperCls =
+    sidebarState === 'collapsed' ? `w-fit ${isMacOS ? 'ml-[184px]' : 'ml-[104px]'}` : 'w-full pl-4';
   const setView = useNavigation();
 
   const contentClassName = cn('pr-1 pb-10', (isMobile || sidebarState === 'collapsed') && 'pt-11');
@@ -676,7 +687,7 @@ function BaseChatContent({
         <div
           className={
             coherent
-              ? 'flex flex-col flex-1 min-h-0 relative rounded-t-2xl overflow-hidden bg-background-default'
+              ? 'flex flex-col flex-1 min-h-0 relative rounded-t-2xl overflow-hidden bg-background-muted'
               : 'flex flex-col flex-1 mx-4 mt-4 mb-3 min-h-0 relative rounded-2xl overflow-hidden'
           }
         >
@@ -688,7 +699,7 @@ function BaseChatContent({
             // window — only the pill's own (inline-flex) bounding box is
             // marked no-drag (done inside SessionNamePill).
             <div
-              className="flex-shrink-0 px-4 pt-3 relative z-[60]"
+              className={`flex-shrink-0 ${sessionPillWrapperCls} pr-4 pt-3 relative z-[60]`}
               style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
             >
               <SessionNamePill
@@ -733,7 +744,7 @@ function BaseChatContent({
             >
               <div className="biorouter-chat-column mx-auto w-full max-w-[920px]">
                 {workflow?.title && (
-                  <div className="sticky top-0 z-10 bg-background-default mb-4 pt-2">
+                  <div className="sticky top-0 z-10 bg-background-muted mb-4 pt-2">
                     <WorkflowHeader title={workflow.title} />
                   </div>
                 )}
@@ -777,7 +788,7 @@ function BaseChatContent({
           <div
             className={
               coherent
-                ? 'biorouter-chat-composer-bar flex-shrink-0 px-4 sm:px-6 pb-6 pt-2 bg-background-default'
+                ? 'biorouter-chat-composer-bar flex-shrink-0 px-4 sm:px-6 pb-6 pt-2 bg-background-muted'
                 : `px-4 sm:px-6 pb-6 pt-2 flex-shrink-0 ${disableAnimation ? '' : 'animate-[fadein_400ms_ease-in_forwards]'}`
             }
           >
diff --git a/ui/desktop/src/components/BioRouterSidebar/AppSidebar.tsx b/ui/desktop/src/components/BioRouterSidebar/AppSidebar.tsx
index a2d83334..a5366589 100644
--- a/ui/desktop/src/components/BioRouterSidebar/AppSidebar.tsx
+++ b/ui/desktop/src/components/BioRouterSidebar/AppSidebar.tsx
@@ -148,7 +148,7 @@ function RunningChatItem({
     <button
       type="button"
       onClick={() => onOpen(entry.sessionId)}
-      className={`w-full min-w-0 flex items-center gap-2 rounded-md px-2 py-1 text-left text-xs transition-all duration-500 hover:bg-background-medium ${
+      className={`w-full min-w-0 flex items-center gap-2 rounded-md px-2 py-1 text-left text-xs transition-all duration-500 hover:bg-sidebar-hover ${
         completed ? 'opacity-0 translate-y-1' : 'opacity-100 translate-y-0'
       }`}
       title={entry.title}
@@ -257,7 +257,7 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
                 onClick={() => handleNavigation(entry.path)}
                 isActive={isActivePath(entry.path)}
                 tooltip={entry.tooltip}
-                className="w-full justify-start px-3 py-2 rounded-lg text-sm hover:bg-background-medium transition-colors duration-150 data-[active=true]:bg-background-strong data-[active=true]:font-medium"
+                className="w-full justify-start px-3 py-2 rounded-lg text-sm hover:bg-sidebar-hover transition-colors duration-150 data-[active=true]:bg-sidebar-active data-[active=true]:font-medium"
               >
                 <IconComponent className="w-4 h-4" />
                 <span>{entry.label}</span>
diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index 13c4689e..f494dfc8 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -1322,8 +1322,8 @@ export default function ChatInput({
         disableAnimation ? '' : 'page-transition'
       } ${
         isFocused
-          ? 'border-transparent hover:border-transparent shadow-[0_12px_32px_rgba(32,25,15,0.11),0_2px_10px_rgba(32,25,15,0.06)]'
-          : 'border-transparent hover:border-transparent shadow-[0_8px_24px_rgba(32,25,15,0.08),0_1px_6px_rgba(32,25,15,0.04)]'
+          ? 'border-border-subtle hover:border-border-subtle shadow-[var(--shadow-composer)]'
+          : 'border-border-subtle hover:border-border-subtle shadow-[var(--shadow-composer)]'
       } bg-background-default z-10 rounded-2xl border`}
       data-drop-zone="true"
       onDrop={handleLocalDrop}
diff --git a/ui/desktop/src/components/Dashboard/FoldedCard.tsx b/ui/desktop/src/components/Dashboard/FoldedCard.tsx
index eb3590d3..6ffdb3ce 100644
--- a/ui/desktop/src/components/Dashboard/FoldedCard.tsx
+++ b/ui/desktop/src/components/Dashboard/FoldedCard.tsx
@@ -72,11 +72,10 @@ export const FoldedCard: React.FC<Props> = ({
       onMouseLeave={() => setHovered(false)}
     >
       <div
-        className="h-full w-full rounded-2xl overflow-hidden select-none cursor-grab active:cursor-grabbing flex flex-col border border-border-subtle/30 transition-[transform,box-shadow] duration-200 ease-out"
+        className="h-full w-full rounded-2xl overflow-hidden select-none cursor-grab active:cursor-grabbing flex flex-col border border-border-subtle transition-transform duration-200 ease-out"
         style={{
           background: bg,
           transform: hovered ? 'translateY(-1px)' : 'translateY(0)',
-          boxShadow: hovered ? '0 8px 24px rgba(0,0,0,0.14)' : '0 2px 8px rgba(0,0,0,0.08)',
         }}
         onPointerDown={(e) => {
           if ((e.target as HTMLElement).closest('button')) return;
@@ -172,7 +171,7 @@ export const FoldedCard: React.FC<Props> = ({
           transition: 'opacity 140ms ease-out, transform 140ms ease-out',
         }}
       >
-        <div className="rounded-lg border border-border-subtle/40 bg-background-default/95 backdrop-blur-sm shadow-lg px-3 py-2 text-[11px] leading-snug text-text-default/90 max-h-32 overflow-hidden">
+        <div className="rounded-lg border border-border-subtle bg-background-default/95 backdrop-blur-sm shadow-[var(--shadow-popover)] px-3 py-2 text-[11px] leading-snug text-text-default/90 max-h-32 overflow-hidden">
           {previewTail && previewTail.trim().length > 0 ? (
             <div className="whitespace-pre-wrap break-words">
               {isBusy ? <span className="text-text-muted/80">… </span> : null}
diff --git a/ui/desktop/src/components/ProviderGuard.tsx b/ui/desktop/src/components/ProviderGuard.tsx
index ae380486..2e62166f 100644
--- a/ui/desktop/src/components/ProviderGuard.tsx
+++ b/ui/desktop/src/components/ProviderGuard.tsx
@@ -134,7 +134,7 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
 
   if (isChecking) {
     return (
-      <div className="h-screen w-full bg-background-default flex items-center justify-center">
+      <div className="h-screen w-full bg-background-muted flex items-center justify-center">
         <WelcomeBioRouterLogo />
       </div>
     );
diff --git a/ui/desktop/src/components/apps/AppsView.tsx b/ui/desktop/src/components/apps/AppsView.tsx
index 26e78fc0..dded9575 100644
--- a/ui/desktop/src/components/apps/AppsView.tsx
+++ b/ui/desktop/src/components/apps/AppsView.tsx
@@ -119,12 +119,12 @@ export default function AppsView() {
   return (
     <MainPanelLayout>
       <div className="flex-1 flex flex-col min-h-0">
-        <div className="bg-background-default px-8 pb-8 pt-16">
+        <div className="bg-background-default px-8 pt-12 pb-6 border-b border-border-subtle">
           <div className="flex flex-col page-transition">
             <div className="flex justify-between items-center mb-1">
               <h1 className="text-2xl font-semibold tracking-tight">Apps</h1>
             </div>
-            <p className="text-sm text-text-muted mb-4">
+            <p className="text-sm text-text-muted mb-0">
               Applications from your MCP servers that can run in standalone windows.
             </p>
           </div>
@@ -149,7 +149,7 @@ export default function AppsView() {
               {apps.map((app) => (
                 <div
                   key={`${app.uri}-${app.mcpServer}`}
-                  className="flex flex-col p-4 border border-border-subtle rounded-xl bg-background-default transition-[background-color,box-shadow] duration-150 hover:bg-background-medium/40 hover:shadow-[0_8px_22px_-22px_rgba(32,25,15,0.38)]"
+                  className="flex flex-col p-4 border border-border-subtle rounded-xl bg-background-default transition-colors duration-150 hover:bg-background-medium/40 hover:border-border-strong"
                 >
                   <div className="flex-1 mb-4">
                     <h3 className="font-medium text-text-default mb-2">{app.name}</h3>
diff --git a/ui/desktop/src/components/apps/StandaloneAppView.tsx b/ui/desktop/src/components/apps/StandaloneAppView.tsx
index c5acd3d1..cc5ea0ca 100644
--- a/ui/desktop/src/components/apps/StandaloneAppView.tsx
+++ b/ui/desktop/src/components/apps/StandaloneAppView.tsx
@@ -120,8 +120,8 @@ export default function StandaloneAppView() {
           padding: '24px',
         }}
       >
-        <h2 style={{ color: 'var(--text-error, #ef4444)' }}>Failed to Load App</h2>
-        <p style={{ color: 'var(--text-muted, #6b7280)' }}>{error}</p>
+        <h2 style={{ color: 'var(--text-danger)' }}>Failed to Load App</h2>
+        <p style={{ color: 'var(--text-muted, #7a736c)' }}>{error}</p>
       </div>
     );
   }
@@ -137,7 +137,7 @@ export default function StandaloneAppView() {
           justifyContent: 'center',
         }}
       >
-        <p style={{ color: 'var(--text-muted, #6b7280)' }}>Initializing app...</p>
+        <p style={{ color: 'var(--text-muted, #7a736c)' }}>Initializing app...</p>
       </div>
     );
   }
@@ -166,7 +166,7 @@ export default function StandaloneAppView() {
         justifyContent: 'center',
       }}
     >
-      <p style={{ color: 'var(--text-muted, #6b7280)' }}>Initializing app...</p>
+      <p style={{ color: 'var(--text-muted, #7a736c)' }}>Initializing app...</p>
     </div>
   );
 }
diff --git a/ui/desktop/src/components/extensions/ExtensionsView.tsx b/ui/desktop/src/components/extensions/ExtensionsView.tsx
index 9aa5b04a..fb9f352d 100644
--- a/ui/desktop/src/components/extensions/ExtensionsView.tsx
+++ b/ui/desktop/src/components/extensions/ExtensionsView.tsx
@@ -72,8 +72,9 @@ export default function ExtensionsView({
           behavior: 'smooth',
           block: 'center',
         });
-        // Add a subtle highlight effect
-        element.style.boxShadow = '0 0 0 2px rgba(59, 130, 246, 0.5)';
+        // Add a subtle, temporary coral highlight ring
+        element.style.boxShadow =
+          '0 0 0 2px color-mix(in srgb, var(--color-block-teal) 45%, transparent)';
         setTimeout(() => {
           element.style.boxShadow = '';
         }, 2000);
diff --git a/ui/desktop/src/components/knowledge/IngestPanel/Dropzone.tsx b/ui/desktop/src/components/knowledge/IngestPanel/Dropzone.tsx
index a024b2f9..ab37a45a 100644
--- a/ui/desktop/src/components/knowledge/IngestPanel/Dropzone.tsx
+++ b/ui/desktop/src/components/knowledge/IngestPanel/Dropzone.tsx
@@ -108,10 +108,10 @@ export function Dropzone({ onFiles, onPathPickRequested }: Props) {
           if (dragCounterRef.current === 0) setDragging(false);
         }}
         onDrop={onDrop}
-        className={`relative cursor-pointer rounded-xl px-4 py-5 text-center transition-all focus:outline-none focus:ring-1 focus:ring-ring ${
+        className={`relative cursor-pointer rounded-xl border px-4 py-5 text-center transition-all focus:outline-none focus:ring-1 focus:ring-ring ${
           dragging
-            ? 'bg-block-teal/10 shadow-[0_12px_24px_-24px_rgba(32,25,15,0.38)]'
-            : 'bg-[color-mix(in_srgb,var(--background-default)_60%,var(--background-medium))] shadow-[0_12px_26px_-28px_rgba(32,25,15,0.3)] hover:bg-background-default/72 hover:shadow-[0_12px_26px_-24px_rgba(32,25,15,0.34)]'
+            ? 'border-block-teal bg-background-medium'
+            : 'border-border-subtle bg-[color-mix(in_srgb,var(--background-default)_60%,var(--background-medium))] hover:bg-background-default/72'
         }`}
       >
         <input
@@ -130,7 +130,9 @@ export function Dropzone({ onFiles, onPathPickRequested }: Props) {
         />
         <div
           className={`mx-auto flex h-10 w-10 items-center justify-center rounded-full transition-colors ${
-            dragging ? 'bg-block-teal/15 text-block-teal' : 'bg-background-muted text-text-muted'
+            dragging
+              ? 'bg-background-strong text-text-default'
+              : 'bg-background-muted text-text-muted'
           }`}
         >
           <Upload className="h-5 w-5" />
diff --git a/ui/desktop/src/components/knowledge/IngestPanel/IngestModelPicker.tsx b/ui/desktop/src/components/knowledge/IngestPanel/IngestModelPicker.tsx
index bf68cac6..348dea3e 100644
--- a/ui/desktop/src/components/knowledge/IngestPanel/IngestModelPicker.tsx
+++ b/ui/desktop/src/components/knowledge/IngestPanel/IngestModelPicker.tsx
@@ -119,10 +119,8 @@ export function IngestModelPicker({ value, onChange, disabled = false, saving =
                   onChange({ provider: provider.name, model });
                   setOpen(false);
                 }}
-                className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-[background-color,box-shadow] duration-150 ${
-                  selected
-                    ? 'bg-background-medium/82 shadow-[0_8px_20px_-22px_rgba(32,25,15,0.38)]'
-                    : 'hover:bg-background-medium/62 hover:shadow-[0_8px_18px_-24px_rgba(32,25,15,0.3)]'
+                className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors duration-150 ${
+                  selected ? 'bg-background-medium/82' : 'hover:bg-background-medium/62'
                 }`}
               >
                 <Brain className="h-4 w-4 shrink-0 text-text-muted" />
@@ -150,7 +148,7 @@ export function IngestModelPicker({ value, onChange, disabled = false, saving =
           if (!disabled) setOpen(true);
         }}
         disabled={disabled}
-        className="group inline-flex min-h-10 w-full items-center justify-between gap-2 rounded-xl bg-background-default/52 px-3 py-2 text-left transition-[background-color,box-shadow] duration-150 hover:bg-background-medium/82 hover:shadow-[0_12px_26px_-22px_rgba(32,25,15,0.42)] focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-60"
+        className="group inline-flex min-h-10 w-full items-center justify-between gap-2 rounded-xl border border-border-subtle bg-background-default/52 px-3 py-2 text-left transition-colors duration-150 hover:bg-background-medium/82 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-60"
       >
         <span className="flex min-w-0 flex-1 items-center gap-2">
           <Brain className="h-4 w-4 shrink-0 text-text-muted" />
@@ -163,7 +161,7 @@ export function IngestModelPicker({ value, onChange, disabled = false, saving =
               : `${value.provider} / ${value.model}`}
           </span>
         </span>
-        <span className="flex shrink-0 items-center gap-1.5 rounded-lg bg-background-medium/64 px-2 py-1 text-[11px] font-medium text-text-default shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] transition-colors group-hover:bg-background-default/76">
+        <span className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border-subtle bg-background-medium/64 px-2 py-1 text-[11px] font-medium text-text-default transition-colors group-hover:bg-background-default/76">
           {saving && <LoaderCircle className="h-3.5 w-3.5 animate-spin text-text-muted" />}
           {saving ? 'Saving' : 'Set default'}
           {!saving && <ChevronDown className="h-3.5 w-3.5 text-text-muted" />}
diff --git a/ui/desktop/src/components/knowledge/IngestPanel/IngestPanel.tsx b/ui/desktop/src/components/knowledge/IngestPanel/IngestPanel.tsx
index a99ff9f9..485bba81 100644
--- a/ui/desktop/src/components/knowledge/IngestPanel/IngestPanel.tsx
+++ b/ui/desktop/src/components/knowledge/IngestPanel/IngestPanel.tsx
@@ -343,7 +343,7 @@ export function IngestPanel() {
         variant="secondary"
         size="sm"
         onClick={() => setShowPasteBox(true)}
-        className="h-10 w-full bg-background-default/74 font-medium shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] transition-[background-color,box-shadow] duration-150 hover:bg-background-medium/82 hover:shadow-[0_12px_26px_-22px_rgba(32,25,15,0.42)]"
+        className="h-10 w-full border border-border-subtle bg-background-default/74 font-medium transition-colors duration-150 hover:bg-background-medium/82"
       >
         <Clipboard className="mr-1.5 h-4 w-4" />
         Paste text
diff --git a/ui/desktop/src/components/knowledge/IngestPanel/PasteTextBox.tsx b/ui/desktop/src/components/knowledge/IngestPanel/PasteTextBox.tsx
index 09193022..55bfffe5 100644
--- a/ui/desktop/src/components/knowledge/IngestPanel/PasteTextBox.tsx
+++ b/ui/desktop/src/components/knowledge/IngestPanel/PasteTextBox.tsx
@@ -26,7 +26,7 @@ export function PasteTextBox({ onStage, onCancel }: Props) {
   }
 
   return (
-    <div className="overflow-hidden rounded-xl bg-[color-mix(in_srgb,var(--background-default)_82%,var(--background-medium))] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--border-subtle)_46%,transparent),0_10px_22px_-24px_rgba(32,25,15,0.34)] transition-shadow focus-within:shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--block-teal)_30%,transparent),0_12px_26px_-24px_rgba(32,25,15,0.38)]">
+    <div className="overflow-hidden rounded-xl border border-border-subtle bg-[color-mix(in_srgb,var(--background-default)_82%,var(--background-medium))] transition-colors focus-within:border-border-default">
       <div className="overflow-hidden">
         <input
           type="text"
diff --git a/ui/desktop/src/components/knowledge/KBSelector/KBSelectorPalette.tsx b/ui/desktop/src/components/knowledge/KBSelector/KBSelectorPalette.tsx
index f99ee7f7..ec639a45 100644
--- a/ui/desktop/src/components/knowledge/KBSelector/KBSelectorPalette.tsx
+++ b/ui/desktop/src/components/knowledge/KBSelector/KBSelectorPalette.tsx
@@ -292,7 +292,7 @@ export function KBSelectorPalette({ onClose }: Props) {
                     key={base.id}
                     className={`biorouter-modal-row flex items-center gap-3 rounded-xl px-3 py-3 transition-all ${
                       isActive
-                        ? '!border-border-default bg-background-muted shadow-sm'
+                        ? '!border-border-default bg-background-muted'
                         : 'hover:!border-border-default hover:bg-background-muted/50'
                     }`}
                   >
@@ -305,7 +305,7 @@ export function KBSelectorPalette({ onClose }: Props) {
                       className="flex min-w-0 flex-1 items-center gap-3 text-left"
                     >
                       <span
-                        className="h-3 w-3 rounded-full border border-black/10"
+                        className="h-3 w-3 rounded-full border border-border-subtle"
                         style={{ background: base.color }}
                       />
                       <div className="min-w-0 flex-1">
@@ -334,7 +334,7 @@ export function KBSelectorPalette({ onClose }: Props) {
                     </button>
 
                     <div className="flex items-center gap-2">
-                      <div className="flex items-center gap-2 rounded-md bg-background-default/70 px-2 py-1 shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--border-subtle)_55%,transparent)]">
+                      <div className="flex items-center gap-2 rounded-md border border-border-subtle bg-background-default/70 px-2 py-1">
                         <EyeOff className="h-3.5 w-3.5 text-text-muted" />
                         <Switch
                           checked={!hidden}
diff --git a/ui/desktop/src/components/knowledge/KBSelector/KBSelectorTrigger.tsx b/ui/desktop/src/components/knowledge/KBSelector/KBSelectorTrigger.tsx
index 7c340986..51060d2d 100644
--- a/ui/desktop/src/components/knowledge/KBSelector/KBSelectorTrigger.tsx
+++ b/ui/desktop/src/components/knowledge/KBSelector/KBSelectorTrigger.tsx
@@ -23,7 +23,7 @@ export function KBSelectorTrigger({ open: openProp, onOpenChange }: Props) {
       <button
         data-testid="knowledge-kb-selector-trigger"
         onClick={() => setOpen(true)}
-        className="group inline-flex w-full items-center gap-3 rounded-xl bg-background-default px-3 py-3 shadow-[0_10px_24px_-24px_rgba(32,25,15,0.38)] transition-[background-color,box-shadow] duration-150 hover:bg-background-medium/82 hover:shadow-[0_12px_26px_-22px_rgba(32,25,15,0.42)] focus:outline-none focus:ring-1 focus:ring-ring"
+        className="group inline-flex w-full items-center gap-3 rounded-xl border border-border-subtle bg-background-default px-3 py-3 transition-colors duration-150 hover:bg-background-medium/82 focus:outline-none focus:ring-1 focus:ring-ring"
       >
         <span
           className="w-2 h-2 rounded-full flex-shrink-0"
diff --git a/ui/desktop/src/components/knowledge/KnowledgeView.tsx b/ui/desktop/src/components/knowledge/KnowledgeView.tsx
index f532fedd..97939fd7 100644
--- a/ui/desktop/src/components/knowledge/KnowledgeView.tsx
+++ b/ui/desktop/src/components/knowledge/KnowledgeView.tsx
@@ -43,7 +43,10 @@ function KnowledgeViewInner() {
         className="flex flex-col min-w-0 flex-1 overflow-y-auto relative"
         data-search-scroll-area
       >
-        <ReadableContent size="graph" className="px-8 pt-12 pb-4 flex-shrink-0">
+        <ReadableContent
+          size="graph"
+          className="px-8 pt-12 pb-6 border-b border-border-subtle flex-shrink-0"
+        >
           <div className="flex flex-col page-transition">
             <h1 className="text-2xl font-semibold tracking-tight mb-1">Knowledge</h1>
             <p className="text-sm text-text-muted mb-0">
@@ -61,7 +64,7 @@ function KnowledgeViewInner() {
             </div>
             <IngestPanel />
           </div>
-          <div className="flex min-h-[520px] min-w-0 overflow-hidden rounded-2xl bg-[color-mix(in_srgb,var(--background-muted)_72%,var(--background-default))] shadow-[inset_0_1px_0_rgba(255,255,255,0.58),0_18px_46px_-36px_rgba(32,25,15,0.34)] lg:h-full lg:min-h-0">
+          <div className="flex min-h-[520px] min-w-0 overflow-hidden rounded-2xl border border-border-subtle bg-[color-mix(in_srgb,var(--background-muted)_72%,var(--background-default))] lg:h-full lg:min-h-0">
             <KnowledgeGraphPanel
               onOpenChangeLog={() => setChangeLogOpen(true)}
               previewSha={previewSha}
diff --git a/ui/desktop/src/components/knowledge/graph/KnowledgeGraphPanel.tsx b/ui/desktop/src/components/knowledge/graph/KnowledgeGraphPanel.tsx
index 0f01f69a..90299437 100644
--- a/ui/desktop/src/components/knowledge/graph/KnowledgeGraphPanel.tsx
+++ b/ui/desktop/src/components/knowledge/graph/KnowledgeGraphPanel.tsx
@@ -68,7 +68,7 @@ export function KnowledgeGraphPanel({ onOpenChangeLog, previewSha, onClearPrevie
             variant="secondary"
             size="sm"
             shape="round"
-            className="bg-background-muted/82 shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] hover:bg-background-strong"
+            className="border border-border-subtle bg-background-muted/82 hover:bg-background-strong"
             onClick={() => void refresh()}
             disabled={!activeKbId || loading}
             title="Refresh graph"
@@ -78,7 +78,7 @@ export function KnowledgeGraphPanel({ onOpenChangeLog, previewSha, onClearPrevie
           <Button
             variant="secondary"
             size="sm"
-            className="bg-background-muted/82 font-medium shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] hover:bg-background-strong"
+            className="border border-border-subtle bg-background-muted/82 font-medium hover:bg-background-strong"
             onClick={() => activeKb && void exportArchive(activeKb.id, activeKb.name)}
             disabled={!activeKb}
             title="Export current knowledge base as .brkb"
@@ -89,7 +89,7 @@ export function KnowledgeGraphPanel({ onOpenChangeLog, previewSha, onClearPrevie
           <Button
             variant="secondary"
             size="sm"
-            className="bg-background-muted/82 font-medium shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] hover:bg-background-strong"
+            className="border border-border-subtle bg-background-muted/82 font-medium hover:bg-background-strong"
             onClick={onOpenChangeLog}
             disabled={!activeKbId}
             title="Open change log"
@@ -100,7 +100,7 @@ export function KnowledgeGraphPanel({ onOpenChangeLog, previewSha, onClearPrevie
           <Button
             variant="secondary"
             size="sm"
-            className="bg-background-muted/82 font-medium shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] hover:bg-background-strong"
+            className="border border-border-subtle bg-background-muted/82 font-medium hover:bg-background-strong"
             onClick={() => void openKbFolder()}
             disabled={!activeKbId}
             title="Open the knowledge base folder (raw sources + markdown) in your file explorer"
diff --git a/ui/desktop/src/components/knowledge/graph/NodePreview.tsx b/ui/desktop/src/components/knowledge/graph/NodePreview.tsx
index a1ad9e8e..a2fb7fcf 100644
--- a/ui/desktop/src/components/knowledge/graph/NodePreview.tsx
+++ b/ui/desktop/src/components/knowledge/graph/NodePreview.tsx
@@ -37,7 +37,7 @@ export function NodePreview({ kbId, node, previewSha, onClose }: Props) {
 
   return (
     <div className="biorouter-popover-surface absolute top-12 right-4 z-10 flex max-h-[calc(100%-5rem)] w-[360px] flex-col overflow-hidden rounded-2xl bg-background-default/90 backdrop-blur-md">
-      <div className="flex items-center justify-between bg-background-muted/55 px-4 py-3 shadow-[inset_0_-1px_0_rgba(32,25,15,0.04)]">
+      <div className="flex items-center justify-between border-b border-border-default bg-background-muted/55 px-4 py-3">
         <div className="flex items-center gap-2 min-w-0">
           <span
             aria-hidden
diff --git a/ui/desktop/src/components/onboarding/LlamaServerInlineCard.tsx b/ui/desktop/src/components/onboarding/LlamaServerInlineCard.tsx
index 7811c4a4..4ae85a4c 100644
--- a/ui/desktop/src/components/onboarding/LlamaServerInlineCard.tsx
+++ b/ui/desktop/src/components/onboarding/LlamaServerInlineCard.tsx
@@ -179,7 +179,7 @@ export default function LlamaServerInlineCard({ onSuccess }: LlamaServerInlineCa
               onChange={(e) => setSelectedModel(e.target.value)}
               disabled={isStarting || isConnecting}
               data-testid="llamacpp-model-select"
-              className="h-9 px-2 rounded-md border border-border-default bg-background-default text-sm text-text-default"
+              className="h-9 px-2 rounded-md border border-border-subtle bg-background-default text-sm text-text-default focus:outline-none focus:border-border-strong transition-colors duration-150"
             >
               {catalog.map((m) => (
                 <option key={m.name} value={m.name}>
@@ -193,7 +193,7 @@ export default function LlamaServerInlineCard({ onSuccess }: LlamaServerInlineCa
           )}
 
           {isStarting && (
-            <div className="rounded-md border border-border-default bg-background-default p-3">
+            <div className="rounded-md border border-border-subtle bg-background-default p-3">
               <div className="flex items-center gap-2 text-xs text-text-default">
                 <div className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin flex-shrink-0" />
                 <span>
diff --git a/ui/desktop/src/components/onboarding/OllamaInlineCard.tsx b/ui/desktop/src/components/onboarding/OllamaInlineCard.tsx
index b0a14820..bdb21615 100644
--- a/ui/desktop/src/components/onboarding/OllamaInlineCard.tsx
+++ b/ui/desktop/src/components/onboarding/OllamaInlineCard.tsx
@@ -150,7 +150,7 @@ export default function OllamaInlineCard({ onSuccess }: OllamaInlineCardProps) {
           )}
 
           {modelStatus === 'downloading' && downloadProgress && (
-            <div className="rounded-md border border-border-default bg-background-default p-3">
+            <div className="rounded-md border border-border-subtle bg-background-default p-3">
               <p className="text-xs text-text-default">Downloading {getPreferredModel()}…</p>
               <p className="text-[11px] text-text-muted mt-1">{downloadProgress.status}</p>
               {downloadProgress.total && downloadProgress.completed && (
diff --git a/ui/desktop/src/components/schedule/ScheduleDetailView.tsx b/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
index ce0389c2..4bcbe358 100644
--- a/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
+++ b/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
@@ -261,7 +261,7 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
     : '';
 
   return (
-    <div className="h-screen w-full flex flex-col bg-background-default text-text-default">
+    <div className="h-screen w-full flex flex-col bg-background-muted text-text-default">
       <div className="px-8 pt-6 pb-4 border-b border-border-subtle flex-shrink-0">
         <BackButton onClick={onNavigateBack} />
         <h1 className="text-2xl font-semibold tracking-tight mt-1 mb-1 pt-8">Schedule Details</h1>
@@ -285,7 +285,7 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
               </p>
             )}
             {scheduleDetails && (
-              <Card className="p-4 bg-background-card mb-6">
+              <Card className="p-4 bg-background-card border border-border-subtle [box-shadow:none] mb-6">
                 <div className="space-y-2">
                   <div className="flex flex-col md:flex-row md:items-center justify-between">
                     <h3 className="text-base font-semibold text-text-default">
@@ -444,7 +444,7 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
                 {sessions.map((session) => (
                   <Card
                     key={session.id}
-                    className="p-4 bg-background-card border border-border-subtle cursor-pointer hover:bg-background-muted transition-colors duration-200"
+                    className="p-4 bg-background-card border border-border-subtle [box-shadow:none] cursor-pointer hover:bg-background-muted transition-colors duration-200"
                     onClick={() => loadSession(session.id)}
                   >
                     <h3
diff --git a/ui/desktop/src/components/schedule/ScheduleFromWorkflowModal.tsx b/ui/desktop/src/components/schedule/ScheduleFromWorkflowModal.tsx
index 45be7fcb..943cf149 100644
--- a/ui/desktop/src/components/schedule/ScheduleFromWorkflowModal.tsx
+++ b/ui/desktop/src/components/schedule/ScheduleFromWorkflowModal.tsx
@@ -102,7 +102,8 @@ export const ScheduleFromWorkflowModal: React.FC<ScheduleFromWorkflowModalProps>
               <Button
                 type="button"
                 onClick={handleCopy}
-                className="ml-2 px-3 py-2 bg-background-accent text-text-on-accent rounded-md hover:bg-background-accent/90 flex items-center"
+                variant="outline"
+                className="ml-2 px-3 py-2 rounded-md flex items-center"
               >
                 {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
               </Button>
diff --git a/ui/desktop/src/components/sessions/SessionsInsights.tsx b/ui/desktop/src/components/sessions/SessionsInsights.tsx
index 987e777b..64b6ad34 100644
--- a/ui/desktop/src/components/sessions/SessionsInsights.tsx
+++ b/ui/desktop/src/components/sessions/SessionsInsights.tsx
@@ -230,7 +230,7 @@ export function SessionInsights() {
                       <p
                         className={
                           idx === 0
-                            ? 'text-2xl font-medium leading-none mb-1.5 tabular-nums'
+                            ? 'text-3xl font-mono font-light leading-none mb-1.5 tabular-nums'
                             : 'text-lg font-medium leading-none mb-1.5 text-text-muted tabular-nums'
                         }
                       >
diff --git a/ui/desktop/src/components/settings/SettingsView.tsx b/ui/desktop/src/components/settings/SettingsView.tsx
index 38a92424..d7478d64 100644
--- a/ui/desktop/src/components/settings/SettingsView.tsx
+++ b/ui/desktop/src/components/settings/SettingsView.tsx
@@ -72,8 +72,11 @@ export default function SettingsView({
     <>
       <MainPanelLayout>
         <div className="flex-1 flex flex-col min-h-0">
-          <ReadableContent className="px-8 pt-12 pb-0 flex-shrink-0">
-            <h1 className="text-2xl font-semibold tracking-tight page-transition">Settings</h1>
+          <ReadableContent className="px-8 pt-12 pb-6 border-b border-border-subtle flex-shrink-0">
+            <h1 className="text-2xl font-semibold tracking-tight mb-1 page-transition">Settings</h1>
+            <p className="text-sm text-text-muted">
+              Manage models, chat behavior, and application preferences
+            </p>
           </ReadableContent>
 
           <div className="flex-1 min-h-0 flex flex-col">
diff --git a/ui/desktop/src/components/settings/app/AppSettingsSection.tsx b/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
index dd217d15..007407f6 100644
--- a/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
+++ b/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
@@ -124,7 +124,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       {/* Appearance */}
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
             Appearance
           </h2>
         </div>
@@ -217,7 +217,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       {/* Theme */}
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
             Theme
           </h2>
           <p className="text-xs text-text-muted">Customize the look and feel of BioRouter</p>
@@ -230,7 +230,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       {/* Help & Feedback */}
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
             Help &amp; Feedback
           </h2>
           <p className="text-xs text-text-muted">
@@ -267,7 +267,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       {!shouldShowUpdates && (
         <div className="biorouter-settings-section">
           <div className="biorouter-settings-section-header">
-            <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">
+            <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
               Version
             </h2>
           </div>
@@ -290,7 +290,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       {UPDATES_ENABLED && shouldShowUpdates && (
         <div ref={updateSectionRef} className="biorouter-settings-section">
           <div className="biorouter-settings-section-header">
-            <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+            <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
               Updates
             </h2>
             <p className="text-xs text-text-muted">
diff --git a/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx b/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx
index 2283c5e6..b52f6342 100644
--- a/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx
+++ b/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx
@@ -10,7 +10,9 @@ export default function ChatSettingsSection() {
     <div className="pb-8">
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">Mode</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
+            Mode
+          </h2>
           <p className="text-xs text-text-muted">
             Configure how BioRouter interacts with tools and extensions
           </p>
@@ -22,7 +24,7 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
             Response Styles
           </h2>
           <p className="text-xs text-text-muted">
@@ -36,7 +38,7 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
             Capabilities
           </h2>
           <p className="text-xs text-text-muted">
@@ -52,7 +54,7 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
             App SDK
           </h2>
           <p className="text-xs text-text-muted">
@@ -67,7 +69,9 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">Editor</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
+            Editor
+          </h2>
         </div>
         <div className="biorouter-settings-list">
           <SpellcheckToggle />
@@ -76,7 +80,9 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">Project</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
+            Project
+          </h2>
         </div>
         <div className="biorouter-settings-list">
           <BioRouterHintsSection />
diff --git a/ui/desktop/src/components/settings/config/ConfigSettings.tsx b/ui/desktop/src/components/settings/config/ConfigSettings.tsx
index dc9ead7e..0303ee14 100644
--- a/ui/desktop/src/components/settings/config/ConfigSettings.tsx
+++ b/ui/desktop/src/components/settings/config/ConfigSettings.tsx
@@ -144,7 +144,7 @@ export default function ConfigSettings() {
   return (
     <div className="biorouter-settings-section">
       <div className="biorouter-settings-section-header">
-        <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+        <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
           Configuration
         </h2>
         <p className="text-xs text-text-muted">
diff --git a/ui/desktop/src/components/settings/models/ModelsSection.tsx b/ui/desktop/src/components/settings/models/ModelsSection.tsx
index dcbcc71f..29b5c976 100644
--- a/ui/desktop/src/components/settings/models/ModelsSection.tsx
+++ b/ui/desktop/src/components/settings/models/ModelsSection.tsx
@@ -83,7 +83,7 @@ export default function ModelsSection({ setView }: ModelsSectionProps) {
     <section id="models" className="pb-8">
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
             Current Model
           </h2>
         </div>
@@ -107,7 +107,9 @@ export default function ModelsSection({ setView }: ModelsSectionProps) {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">Reset</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
+            Reset
+          </h2>
         </div>
         <div className="biorouter-settings-list">
           <ResetProviderSection setView={setView} />
diff --git a/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx b/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx
index 93bca293..8de927f0 100644
--- a/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx
+++ b/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx
@@ -392,7 +392,7 @@ export const SwitchModelModal = ({
                       className={[
                         'biorouter-modal-row flex items-start gap-3 py-2.5 px-3 rounded-xl cursor-pointer transition-colors duration-150',
                         isSelected
-                          ? '!border-border-default bg-background-medium shadow-sm'
+                          ? '!border-border-default bg-background-medium'
                           : 'hover:!border-border-default hover:bg-background-medium',
                       ].join(' ')}
                     >
diff --git a/ui/desktop/src/components/settings/permission/PermissionSetting.tsx b/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
index fe02803d..db654171 100644
--- a/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
+++ b/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
@@ -81,7 +81,7 @@ export default function PermissionSettingsView({ onClose }: { onClose: () => voi
   }, []);
 
   return (
-    <div className="bg-background-default h-screen w-full animate-[fadein_200ms_ease-in_forwards]">
+    <div className="bg-background-muted h-screen w-full animate-[fadein_200ms_ease-in_forwards]">
       <ScrollArea className="h-full w-full">
         <div className="flex flex-col pb-24">
           <div className="px-8 pt-6 pb-4">
@@ -102,7 +102,9 @@ export default function PermissionSettingsView({ onClose }: { onClose: () => voi
                 <circle cx="7.5" cy="15.5" r="5.5" />
               </svg>
             </div>
-            <h1 className="text-2xl font-semibold tracking-tight text-text-default mt-4">Permission Rules</h1>
+            <h1 className="text-2xl font-semibold tracking-tight text-text-default mt-4">
+              Permission Rules
+            </h1>
             <p className="text-text-muted">
               Hidden instructions that will be passed to the provider to help direct and add context
               to your responses.
diff --git a/ui/desktop/src/components/skills/SkillsView.tsx b/ui/desktop/src/components/skills/SkillsView.tsx
index c3bfa78b..92f5ba13 100644
--- a/ui/desktop/src/components/skills/SkillsView.tsx
+++ b/ui/desktop/src/components/skills/SkillsView.tsx
@@ -163,43 +163,41 @@ export default function SkillsView() {
         data-search-scroll-area
       >
         {/* Header */}
-        <div className="flex-shrink-0 border-b border-border-subtle">
-          <ReadableContent className="px-8 pt-12 pb-6">
-            <div className="flex flex-col page-transition">
-              <h1 className="text-2xl font-semibold tracking-tight mb-1">Skills</h1>
-              <p className="text-sm text-text-muted mb-0">
-                Reusable instruction sets that guide BioRouter's behavior.{' '}
-                {getSearchShortcutText()} to search.
-              </p>
-            </div>
-            <div className="flex gap-3 mt-5">
-              <Button
-                className="flex items-center gap-2"
-                variant="default"
-                onClick={() => setIsAddModalOpen(true)}
-              >
-                <Upload className="h-4 w-4" />
-                Add Skill
-              </Button>
-              <Button
-                className="flex items-center gap-2"
-                variant="outline"
-                onClick={() => setIsBrowseModalOpen(true)}
-              >
-                <Globe className="h-4 w-4" />
-                Browse Skills
-              </Button>
-              <Button
-                className="flex items-center gap-2"
-                variant="outline"
-                onClick={() => setIsCustomModalOpen(true)}
-              >
-                <Plus className="h-4 w-4" />
-                Add Custom Skill
-              </Button>
-            </div>
-          </ReadableContent>
-        </div>
+        <ReadableContent className="px-8 pt-12 pb-6 border-b border-border-subtle flex-shrink-0">
+          <div className="flex flex-col page-transition">
+            <h1 className="text-2xl font-semibold tracking-tight mb-1">Skills</h1>
+            <p className="text-sm text-text-muted mb-0">
+              Reusable instruction sets that guide BioRouter's behavior. {getSearchShortcutText()}{' '}
+              to search.
+            </p>
+          </div>
+          <div className="flex gap-3 mt-5">
+            <Button
+              className="flex items-center gap-2"
+              variant="default"
+              onClick={() => setIsAddModalOpen(true)}
+            >
+              <Upload className="h-4 w-4" />
+              Add Skill
+            </Button>
+            <Button
+              className="flex items-center gap-2"
+              variant="outline"
+              onClick={() => setIsBrowseModalOpen(true)}
+            >
+              <Globe className="h-4 w-4" />
+              Browse Skills
+            </Button>
+            <Button
+              className="flex items-center gap-2"
+              variant="outline"
+              onClick={() => setIsCustomModalOpen(true)}
+            >
+              <Plus className="h-4 w-4" />
+              Add Custom Skill
+            </Button>
+          </div>
+        </ReadableContent>
 
         {/* List */}
         <SearchView
diff --git a/ui/desktop/src/components/ui/Diagnostics.tsx b/ui/desktop/src/components/ui/Diagnostics.tsx
index 6b5bbffb..5858b3c1 100644
--- a/ui/desktop/src/components/ui/Diagnostics.tsx
+++ b/ui/desktop/src/components/ui/Diagnostics.tsx
@@ -155,33 +155,33 @@ Add any other context about the problem here.
     >
       <div className="biorouter-diagnostics-surface w-full max-w-md p-6">
         <div className="flex items-start gap-3 mb-4">
-          <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-background-warning/40 text-text-warning shadow-[inset_0_0_0_1px_rgba(32,25,15,0.06)]">
+          <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-background-warning/40 text-text-warning border border-border-subtle">
             <AlertTriangle size={20} />
           </div>
           <div>
-            <h3 className="text-lg font-semibold text-black mb-2">Report a Problem</h3>
-            <p className="text-sm text-neutral-600 mb-3">
+            <h3 className="text-lg font-semibold text-text-default mb-2">Report a Problem</h3>
+            <p className="text-sm text-text-muted mb-3">
               You can download a diagnostics zip file to share with the team, or file a bug directly
               on GitHub with your system details pre-filled. A diagnostics report contains the
               following:
             </p>
-            <ul className="text-sm text-neutral-600 list-disc list-inside space-y-1 mb-3">
+            <ul className="text-sm text-text-muted list-disc list-inside space-y-1 mb-3">
               <li>Basic system info</li>
               <li>Your current session messages</li>
               <li>Recent log files</li>
               <li>Configuration settings</li>
             </ul>
-            <p className="text-sm text-neutral-600">
+            <p className="text-sm text-text-muted">
               <strong>Warning:</strong> If your session contains sensitive information, do not share
               the diagnostics file publicly.
             </p>
-            <p className="text-sm text-neutral-600">
+            <p className="text-sm text-text-muted">
               If you file a bug, consider attaching the diagnostics report to it.
             </p>
           </div>
         </div>
         {isDownloading && (
-          <div className="mb-4 flex items-center gap-3 rounded-xl bg-neutral-100/80 px-3 py-2.5 text-sm text-neutral-700 shadow-[inset_0_0_0_1px_rgba(32,25,15,0.05)]">
+          <div className="mb-4 flex items-center gap-3 rounded-xl bg-background-muted px-3 py-2.5 text-sm text-text-muted border border-border-subtle">
             <Loader2 className="h-4 w-4 animate-spin" />
             Preparing diagnostics bundle...
           </div>
diff --git a/ui/desktop/src/components/ui/dropdown-menu.tsx b/ui/desktop/src/components/ui/dropdown-menu.tsx
index ff3962d4..0598a7be 100644
--- a/ui/desktop/src/components/ui/dropdown-menu.tsx
+++ b/ui/desktop/src/components/ui/dropdown-menu.tsx
@@ -149,7 +149,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={cn('bg-border-default -mx-1 my-1 h-px', className)}
       {...props}
     />
   );
@@ -201,7 +201,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'bg-background-default text-text-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[1000] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+        'biorouter-popover-surface bg-background-default text-text-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[1000] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-xl p-1 space-y-0.5',
         className
       )}
       {...props}
diff --git a/ui/desktop/src/components/ui/sidebar.tsx b/ui/desktop/src/components/ui/sidebar.tsx
index 5d4200f0..26a20130 100644
--- a/ui/desktop/src/components/ui/sidebar.tsx
+++ b/ui/desktop/src/components/ui/sidebar.tsx
@@ -295,8 +295,10 @@ function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
       data-slot="sidebar-inset"
       className={cn(
         'biorouter-sidebar-inset-depth bg-background relative flex w-full flex-1 flex-col min-w-0',
-        // For inset variant (used in the app)
-        'md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
+        // For inset variant (used in the app): flush against the straight,
+        // full-height sidebar — no rounded corners or floating shadow, which
+        // otherwise leave a notch where the rounded panel meets the square sidebar.
+        'md:peer-data-[variant=inset]:ml-0',
         // For offcanvas variant - ensure content doesn't go under sidebar
         'md:peer-data-[collapsible=offcanvas]:peer-data-[state=expanded]:ml-[var(--sidebar-width)]',
         'md:peer-data-[collapsible=offcanvas]:peer-data-[state=collapsed]:ml-0',
diff --git a/ui/desktop/src/components/workflows/CreateEditWorkflowModal.tsx b/ui/desktop/src/components/workflows/CreateEditWorkflowModal.tsx
index f7289e74..2c55d6f8 100644
--- a/ui/desktop/src/components/workflows/CreateEditWorkflowModal.tsx
+++ b/ui/desktop/src/components/workflows/CreateEditWorkflowModal.tsx
@@ -434,7 +434,7 @@ export default function CreateEditWorkflowModal({
                   {copied ? (
                     <Check className="w-4 h-4 text-text-success" />
                   ) : (
-                    <Copy className="w-4 h-4 text-iconSubtle" />
+                    <Copy className="w-4 h-4 text-text-muted" />
                   )}
                   <span className="ml-1 text-sm text-text-muted">
                     {copied ? 'Copied!' : 'Copy'}
diff --git a/ui/desktop/src/components/workflows/WorkflowActivities.tsx b/ui/desktop/src/components/workflows/WorkflowActivities.tsx
index e3bfbeac..696f4d06 100644
--- a/ui/desktop/src/components/workflows/WorkflowActivities.tsx
+++ b/ui/desktop/src/components/workflows/WorkflowActivities.tsx
@@ -31,7 +31,7 @@ export default function WorkflowActivities({
     return (
       <div className="flex flex-col px-6">
         {messagePill && (
-          <div className="mb-4 p-3 rounded-lg border animate-[fadein_500ms_ease-in_forwards]">
+          <div className="mb-4 p-3 rounded-lg border border-border-subtle animate-[fadein_500ms_ease-in_forwards]">
             <MarkdownContent
               content={substituteParameters(
                 messagePill.replace(/^message:/i, '').trim(),
@@ -50,7 +50,7 @@ export default function WorkflowActivities({
                 key={index}
                 onClick={() => append(substitutedContent)}
                 title={substitutedContent.length > 60 ? substitutedContent : undefined}
-                className="cursor-pointer px-3 py-1.5 text-sm hover:bg-background-medium transition-colors"
+                className="cursor-pointer px-3 py-1.5 text-sm border border-border-subtle [box-shadow:none] hover:bg-background-medium transition-colors"
               >
                 {substitutedContent.length > 60
                   ? substitutedContent.slice(0, 60) + '...'
diff --git a/ui/desktop/src/components/workflows/WorkflowInfoModal.tsx b/ui/desktop/src/components/workflows/WorkflowInfoModal.tsx
index e5f3782d..1a628bd9 100644
--- a/ui/desktop/src/components/workflows/WorkflowInfoModal.tsx
+++ b/ui/desktop/src/components/workflows/WorkflowInfoModal.tsx
@@ -40,7 +40,7 @@ export default function WorkflowInfoModal({
         <div className="flex flex-col flex-grow overflow-y-auto space-y-8">
           <textarea
             ref={textareaRef}
-            className="biorouter-modal-panel w-full flex-grow resize-none min-h-[300px] max-h-[calc(100vh-300px)] rounded-lg p-3 text-text-default focus:outline-none focus:ring-1 focus:ring-borderProminent"
+            className="biorouter-modal-panel w-full flex-grow resize-none min-h-[300px] max-h-[calc(100vh-300px)] rounded-lg p-3 text-text-default focus:outline-none focus:ring-1 focus:ring-border-strong"
             value={value}
             onChange={(e) => setValue(e.target.value)}
             placeholder={`Enter ${infoLabel.toLowerCase()}...`}
diff --git a/ui/desktop/src/components/workflows/WorkflowsView.tsx b/ui/desktop/src/components/workflows/WorkflowsView.tsx
index 22a7d1ed..24c80f2a 100644
--- a/ui/desktop/src/components/workflows/WorkflowsView.tsx
+++ b/ui/desktop/src/components/workflows/WorkflowsView.tsx
@@ -803,21 +803,21 @@ export default function WorkflowsView() {
             </DialogHeader>
             <div className="space-y-4">
               <div>
-                <p className="text-sm text-muted-foreground mb-3">
+                <p className="text-sm text-text-muted mb-3">
                   Set a slash command to quickly run this workflow from any chat
                 </p>
                 <div className="flex gap-2 items-center">
-                  <span className="text-muted-foreground">/</span>
+                  <span className="text-text-muted">/</span>
                   <input
                     type="text"
                     value={slashCommand}
                     onChange={(e) => setSlashCommand(e.target.value)}
                     placeholder="command-name"
-                    className="flex-1 px-3 py-2 border rounded text-sm"
+                    className="flex-1 px-3 py-2 border border-border-subtle rounded text-sm"
                   />
                 </div>
                 {slashCommand && (
-                  <p className="text-xs text-muted-foreground mt-2">
+                  <p className="text-xs text-text-muted mt-2">
                     Use /{slashCommand} in any chat to run this workflow
                   </p>
                 )}
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index fc30dd9f..e57ba2e8 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -82,6 +82,7 @@
 
   --text-default: #2a2520;
   --text-muted: #7a736c;
+  --text-subtle: #948d83;
   --text-inverse: var(--color-white);
   --text-danger: var(--color-red-200);
   --text-success: var(--color-green-200);
@@ -90,17 +91,26 @@
 
   --ring: var(--border-strong);
 
-  --sidebar: var(--background-muted);
+  /* Two-tone canvas: the sidebar is a distinct, slightly deeper warm-beige
+     surface sitting against the lighter main canvas (Codex-style layering,
+     kept warm and low-contrast so it never reads as glaring). */
+  --sidebar: #f3ede1;
   --sidebar-foreground: var(--text-default);
   --sidebar-primary: var(--background-accent);
   --sidebar-primary-foreground: var(--text-inverse);
-  --sidebar-accent: var(--background-muted);
+  --sidebar-hover: #ece4d4;
+  --sidebar-active: #e4d9c3;
+  --sidebar-accent: var(--sidebar-hover);
   --sidebar-accent-foreground: var(--text-default);
-  --sidebar-border: var(--border-default);
+  --sidebar-border: #e9e1d0;
   --sidebar-ring: var(--border-default);
 
   /* custom shadow — flat by default; popover for elevated menus/modals */
   --shadow-default: 0px 1px 3px 0px rgba(0, 0, 0, 0.06), 0px 0px 1px 0px rgba(0, 0, 0, 0.12);
+  /* composer: a hair more lift than --shadow-default so the chat box reads as a
+     distinct, gently raised surface — deliberately very subtle */
+  --shadow-composer:
+    0px 2px 6px -1px rgba(32, 25, 15, 0.08), 0px 1px 2px 0px rgba(32, 25, 15, 0.05);
   --shadow-popover: 0px 8px 24px 0px rgba(32, 25, 15, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
   --shadow-modal:
     0px 22px 60px -18px rgba(32, 25, 15, 0.22), 0px 8px 24px -18px rgba(32, 25, 15, 0.16),
@@ -140,6 +150,7 @@
 
   --text-default: var(--color-white);
   --text-muted: var(--color-neutral-400);
+  --text-subtle: var(--color-neutral-500);
   --text-inverse: var(--color-black);
   --text-danger: var(--color-red-100);
   --text-success: var(--color-green-100);
@@ -148,16 +159,21 @@
 
   --ring: var(--border-strong);
 
+  /* Dark mode mirrors the two-tone: sidebar sits one warm step above the
+     near-black main canvas, with its own hover/active steps. */
   --sidebar: var(--background-muted);
   --sidebar-foreground: var(--text-default);
   --sidebar-primary: var(--background-accent);
   --sidebar-primary-foreground: var(--text-inverse);
-  --sidebar-accent: var(--background-muted);
+  --sidebar-hover: #322b1d;
+  --sidebar-active: #3d3524;
+  --sidebar-accent: var(--sidebar-hover);
   --sidebar-accent-foreground: var(--text-default);
   --sidebar-border: var(--border-default);
   --sidebar-ring: var(--border-default);
 
   --shadow-default: 0px 1px 3px 0px rgba(0, 0, 0, 0.25), 0px 0px 1px 0px rgba(0, 0, 0, 0.35);
+  --shadow-composer: 0px 2px 10px -1px rgba(0, 0, 0, 0.45), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
   --shadow-popover: 0px 8px 24px 0px rgba(0, 0, 0, 0.4), 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
   --shadow-modal:
     0px 22px 64px -16px rgba(0, 0, 0, 0.62), 0px 8px 26px -18px rgba(0, 0, 0, 0.5),
@@ -197,6 +213,7 @@
 
   --color-text-default: var(--text-default);
   --color-text-muted: var(--text-muted);
+  --color-text-subtle: var(--text-subtle);
   --color-text-inverse: var(--text-inverse);
   --color-text-danger: var(--text-danger);
   --color-text-success: var(--text-success);
@@ -211,6 +228,8 @@
 
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-hover: var(--sidebar-hover);
+  --color-sidebar-active: var(--sidebar-active);
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
   --color-sidebar-accent: var(--sidebar-accent);
@@ -539,7 +558,6 @@
 .biorouter-list-row:hover,
 .biorouter-list-row:focus-within {
   background: color-mix(in srgb, var(--background-medium) 42%, transparent);
-  box-shadow: 0 8px 22px -22px rgba(32, 25, 15, 0.38);
 }
 
 .biorouter-settings-tabs {
@@ -594,7 +612,6 @@
 .biorouter-settings-row:hover,
 .biorouter-settings-row:focus-within {
   background: color-mix(in srgb, var(--background-medium) 38%, transparent);
-  box-shadow: 0 8px 22px -22px rgba(32, 25, 15, 0.34);
 }
 
 .dark .biorouter-page-block {
@@ -604,7 +621,9 @@
 }
 
 .biorouter-sidebar-shell {
-  box-shadow: 8px 0 28px -26px rgba(32, 25, 15, 0.42);
+  /* flat two-tone: a hairline edge instead of an elevation shadow —
+     the sidebar's warm-beige surface already separates it from the canvas */
+  box-shadow: 1px 0 0 0 var(--sidebar-border);
 }
 
 .biorouter-sidebar-shell::after {
@@ -742,14 +761,13 @@ body {
 }
 
 body.biorouter-headless-browser {
-  background:
-    linear-gradient(
-      to right,
-      color-mix(in srgb, var(--background-muted) 70%, var(--background-default)),
-      var(--background-default) 28%,
-      var(--background-default) 72%,
-      color-mix(in srgb, var(--background-muted) 70%, var(--background-default))
-    );
+  background: linear-gradient(
+    to right,
+    color-mix(in srgb, var(--background-muted) 70%, var(--background-default)),
+    var(--background-default) 28%,
+    var(--background-default) 72%,
+    color-mix(in srgb, var(--background-muted) 70%, var(--background-default))
+  );
 }
 
 body.biorouter-headless-browser .biorouter-readable-content {