diff --git a/ui/desktop/src/App.tsx b/ui/desktop/src/App.tsx
index 8a9d1fcdd8c6..2e9b0655fba9 100644
--- a/ui/desktop/src/App.tsx
+++ b/ui/desktop/src/App.tsx
@@ -231,7 +231,7 @@ const ConfigureProvidersRoute = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="w-screen h-screen bg-background-default">
+    <div className="w-screen h-screen bg-background-primary">
       <ProviderSettings
         onClose={() => navigate('/settings', { state: { section: 'models' } })}
         isOnboarding={false}
@@ -248,7 +248,7 @@ const WelcomeRoute = ({ onSelectProvider }: WelcomeRouteProps) => {
   const navigate = useNavigate();
 
   return (
-    <div className="w-screen h-screen bg-background-default">
+    <div className="w-screen h-screen bg-background-primary">
       <ProviderSettings
         onClose={() => {
           navigate('/', { replace: true });
@@ -625,7 +625,7 @@ export function AppInner() {
         toastClassName={() =>
           `relative min-h-16 mb-4 p-2 rounded-lg
                flex justify-between overflow-hidden cursor-pointer
-               text-text-on-accent bg-background-inverse
+               text-text-inverse bg-background-inverse
               `
         }
         style={{ width: '450px' }}
@@ -636,7 +636,7 @@ export function AppInner() {
         pauseOnHover
       />
       <ExtensionInstallModal addExtension={addExtension} setView={setView} />
-      <div className="relative w-screen h-screen overflow-hidden bg-background-muted flex flex-col">
+      <div className="relative w-screen h-screen overflow-hidden bg-background-secondary flex flex-col">
         <div className="titlebar-drag-region" />
         <div style={{ position: 'relative', width: '100%', height: '100%' }}>
           <Routes>
diff --git a/ui/desktop/src/components/AnnouncementModal.tsx b/ui/desktop/src/components/AnnouncementModal.tsx
index 197a60c8acc1..72be7be9c63b 100644
--- a/ui/desktop/src/components/AnnouncementModal.tsx
+++ b/ui/desktop/src/components/AnnouncementModal.tsx
@@ -135,7 +135,7 @@ export default function AnnouncementModal() {
           <Button
             variant="ghost"
             onClick={handleCloseAnnouncement}
-            className="w-full h-[60px] rounded-none border-b border-border-default bg-transparent hover:bg-background-muted text-text-default font-medium text-md"
+            className="w-full h-[60px] rounded-none border-b border-border-primary bg-transparent hover:bg-background-secondary text-text-primary font-medium text-md"
           >
             Got it!
           </Button>
diff --git a/ui/desktop/src/components/ApiKeyTester.tsx b/ui/desktop/src/components/ApiKeyTester.tsx
index 7017849b9c75..a49fed7eb52d 100644
--- a/ui/desktop/src/components/ApiKeyTester.tsx
+++ b/ui/desktop/src/components/ApiKeyTester.tsx
@@ -73,14 +73,14 @@ export default function ApiKeyTester({ onSuccess, onStartTesting }: ApiKeyTester
         </span>
       </div>
 
-      <div className="w-full p-3 sm:p-4 bg-background-muted border rounded-xl">
+      <div className="w-full p-3 sm:p-4 bg-background-secondary border rounded-xl">
         <div className="flex items-center gap-3 mb-3">
-          <Key className="w-4 h-4 text-text-default flex-shrink-0" />
+          <Key className="w-4 h-4 text-text-primary flex-shrink-0" />
           <div className="flex flex-col sm:flex-row sm:items-center sm:gap-2">
-            <h3 className="font-medium text-text-default text-sm sm:text-base">
+            <h3 className="font-medium text-text-primary text-sm sm:text-base">
               Quick Setup with API Key
             </h3>
-            <span className="text-text-muted text-xs sm:text-sm">Auto-detect your provider</span>
+            <span className="text-text-secondary text-xs sm:text-sm">Auto-detect your provider</span>
           </div>
         </div>
 
@@ -92,7 +92,7 @@ export default function ApiKeyTester({ onSuccess, onStartTesting }: ApiKeyTester
               value={apiKey}
               onChange={(e) => setApiKey(e.target.value)}
               placeholder="Enter your API key (OpenAI, Anthropic, Google, etc.)"
-              className="flex-1 px-3 py-2 border rounded-lg bg-background-default text-text-default placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="flex-1 px-3 py-2 border rounded-lg bg-background-primary text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
               disabled={isLoading}
               onKeyDown={(e) => {
                 if (e.key === 'Enter' && canSubmit) {
@@ -116,7 +116,7 @@ export default function ApiKeyTester({ onSuccess, onStartTesting }: ApiKeyTester
 
           {/* Loading state */}
           {isLoading && (
-            <div className="flex items-center gap-2 px-3 py-2 bg-background-muted rounded text-sm text-text-muted">
+            <div className="flex items-center gap-2 px-3 py-2 bg-background-secondary rounded text-sm text-text-secondary">
               <div className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin"></div>
               <span>Detecting provider and validating key...</span>
             </div>
@@ -148,8 +148,8 @@ export default function ApiKeyTester({ onSuccess, onStartTesting }: ApiKeyTester
                 </div>
               </div>
               <div className="ml-6 space-y-1">
-                <p className="text-xs font-medium text-text-muted">Suggestions:</p>
-                <ul className="text-xs text-text-muted space-y-1">
+                <p className="text-xs font-medium text-text-secondary">Suggestions:</p>
+                <ul className="text-xs text-text-secondary space-y-1">
                   <li className="flex items-start gap-1">
                     <span className="text-blue-500 mt-0.5">•</span>
                     <span>
diff --git a/ui/desktop/src/components/BaseChat.tsx b/ui/desktop/src/components/BaseChat.tsx
index 34f2df8264c4..ef16918179af 100644
--- a/ui/desktop/src/components/BaseChat.tsx
+++ b/ui/desktop/src/components/BaseChat.tsx
@@ -346,13 +346,13 @@ export default function BaseChat({
     return (
       <div className="h-full flex flex-col min-h-0">
         <MainPanelLayout
-          backgroundColor={'bg-background-muted'}
+          backgroundColor={'bg-background-secondary'}
           removeTopPadding={true}
           {...customMainLayoutProps}
         >
           {renderHeader && renderHeader()}
           <div className="flex flex-col flex-1 mb-0.5 min-h-0 relative">
-            <div className="flex-1 bg-background-default rounded-b-2xl flex items-center justify-center">
+            <div className="flex-1 bg-background-primary rounded-b-2xl flex items-center justify-center">
               <div className="flex flex-col items-center justify-center p-8">
                 <div className="text-red-700 dark:text-red-300 bg-red-400/50 p-4 rounded-lg mb-4 max-w-md">
                   <h3 className="font-semibold mb-2">Failed to Load Session</h3>
@@ -362,7 +362,7 @@ export default function BaseChat({
                   onClick={() => {
                     setView('chat');
                   }}
-                  className="px-4 py-2 text-center cursor-pointer text-text-default border border-border-default hover:bg-background-muted rounded-lg transition-all duration-150"
+                  className="px-4 py-2 text-center cursor-pointer text-text-primary border border-border-primary hover:bg-background-secondary rounded-lg transition-all duration-150"
                 >
                   Go home
                 </button>
@@ -377,7 +377,7 @@ export default function BaseChat({
   return (
     <div className="h-full flex flex-col min-h-0">
       <MainPanelLayout
-        backgroundColor={'bg-background-muted'}
+        backgroundColor={'bg-background-secondary'}
         removeTopPadding={true}
         {...customMainLayoutProps}
       >
@@ -394,14 +394,14 @@ export default function BaseChat({
               className="no-drag flex flex-row items-center gap-1 hover:opacity-80 transition-opacity"
             >
               <Goose className="size-5 goose-icon-animation" />
-              <span className="text-sm leading-none text-text-muted -translate-y-px">goose</span>
+              <span className="text-sm leading-none text-text-secondary -translate-y-px">goose</span>
             </a>
             <EnvironmentBadge className="translate-y-px" />
           </div>
 
           <ScrollArea
             ref={scrollRef}
-            className={`flex-1 bg-background-default rounded-b-2xl min-h-0 relative ${contentClassName}`}
+            className={`flex-1 bg-background-primary rounded-b-2xl min-h-0 relative ${contentClassName}`}
             autoScroll
             onDrop={handleDrop}
             onDragOver={handleDragOver}
@@ -410,7 +410,7 @@ export default function BaseChat({
             paddingY={0}
           >
             {recipe?.title && (
-              <div className="sticky top-0 z-10 bg-background-default px-0 -mx-6 mb-6 pt-6">
+              <div className="sticky top-0 z-10 bg-background-primary px-0 -mx-6 mb-6 pt-6">
                 <RecipeHeader title={recipe.title} />
               </div>
             )}
diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index 347382d30f3d..e68f8bc68365 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -1165,9 +1165,9 @@ export default function ChatInput({
         disableAnimation ? '' : 'page-transition'
       } ${
         isFocused
-          ? 'border-border-strong hover:border-border-strong'
-          : 'border-border-default hover:border-border-default'
-      } bg-background-default z-10 rounded-t-2xl`}
+          ? 'border-border-secondary hover:border-border-secondary'
+          : 'border-border-primary hover:border-border-primary'
+      } bg-background-primary z-10 rounded-t-2xl`}
       data-drop-zone="true"
       onDrop={handleLocalDrop}
       onDragOver={handleLocalDragOver}
@@ -1191,7 +1191,7 @@ export default function ChatInput({
           onTriggerQueueProcessing={handleResumeQueue}
           editingMessageIdRef={editingMessageIdRef}
           isPaused={queuePausedRef.current}
-          className="border-b border-border-default"
+          className="border-b border-border-primary"
         />
       )}
       {/* Input row with inline action buttons wrapped in form */}
@@ -1219,7 +1219,7 @@ export default function ChatInput({
               overflowY: 'auto',
               paddingRight: dictationProvider ? '180px' : '120px',
             }}
-            className="w-full outline-none border-none focus:ring-0 bg-transparent px-3 pt-3 pb-1.5 text-sm resize-none text-text-default placeholder:text-text-muted"
+            className="w-full outline-none border-none focus:ring-0 bg-transparent px-3 pt-3 pb-1.5 text-sm resize-none text-text-primary placeholder:text-text-secondary"
           />
 
           {/* Inline action buttons - absolutely positioned on the right */}
@@ -1346,15 +1346,15 @@ export default function ChatInput({
 
             {/* Recording/transcribing status indicator - positioned above the button row */}
             {(isRecording || isTranscribing) && (
-              <div className="absolute right-0 -top-8 bg-background-default px-2 py-1 rounded text-xs whitespace-nowrap shadow-md border border-border-default">
+              <div className="absolute right-0 -top-8 bg-background-primary px-2 py-1 rounded text-xs whitespace-nowrap shadow-md border border-border-primary">
                 <span className="flex items-center gap-2">
                   {isRecording && (
-                    <span className="flex items-center gap-1 text-text-muted">
+                    <span className="flex items-center gap-1 text-text-secondary">
                       <span className="inline-block w-2 h-2 bg-red-500 rounded-full animate-pulse" />
                       Listening
                     </span>
                   )}
-                  {isRecording && isTranscribing && <span className="text-text-muted">•</span>}
+                  {isRecording && isTranscribing && <span className="text-text-secondary">•</span>}
                   {isTranscribing && (
                     <span className="flex items-center gap-1 text-blue-500">
                       <span className="inline-block w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
@@ -1370,7 +1370,7 @@ export default function ChatInput({
 
       {/* Combined files and images preview */}
       {(pastedImages.length > 0 || allDroppedFiles.length > 0) && (
-        <div className="flex flex-wrap gap-2 p-4 mt-2 border-t border-border-default">
+        <div className="flex flex-wrap gap-2 p-4 mt-2 border-t border-border-primary">
           {/* Render pasted images first */}
           {pastedImages.map((img) => (
             <div key={img.id} className="relative group w-20 h-20">
@@ -1378,7 +1378,7 @@ export default function ChatInput({
                 <img
                   src={img.dataUrl}
                   alt={`Pasted image ${img.id}`}
-                  className={`w-full h-full object-cover rounded border ${img.error ? 'border-red-500' : 'border-border-default'}`}
+                  className={`w-full h-full object-cover rounded border ${img.error ? 'border-red-500' : 'border-border-primary'}`}
                 />
               )}
               {img.isLoading && (
@@ -1419,7 +1419,7 @@ export default function ChatInput({
                     <img
                       src={file.dataUrl}
                       alt={file.name}
-                      className={`w-full h-full object-cover rounded border ${file.error ? 'border-red-500' : 'border-border-default'}`}
+                      className={`w-full h-full object-cover rounded border ${file.error ? 'border-red-500' : 'border-border-primary'}`}
                     />
                   )}
                   {file.isLoading && (
@@ -1437,15 +1437,15 @@ export default function ChatInput({
                 </div>
               ) : (
                 // File box preview
-                <div className="flex items-center gap-2 px-3 py-2 bg-bgSubtle border border-border-default rounded-lg min-w-[120px] max-w-[200px]">
-                  <div className="flex-shrink-0 w-8 h-8 bg-background-default border border-border-default rounded flex items-center justify-center text-xs font-mono text-text-muted">
+                <div className="flex items-center gap-2 px-3 py-2 bg-bgSubtle border border-border-primary rounded-lg min-w-[120px] max-w-[200px]">
+                  <div className="flex-shrink-0 w-8 h-8 bg-background-primary border border-border-primary rounded flex items-center justify-center text-xs font-mono text-text-secondary">
                     {file.name.split('.').pop()?.toUpperCase() || 'FILE'}
                   </div>
                   <div className="flex-1 min-w-0">
-                    <p className="text-sm text-text-default truncate" title={file.name}>
+                    <p className="text-sm text-text-primary truncate" title={file.name}>
                       {file.name}
                     </p>
-                    <p className="text-xs text-text-muted">{file.type || 'Unknown type'}</p>
+                    <p className="text-xs text-text-secondary">{file.type || 'Unknown type'}</p>
                   </div>
                 </div>
               )}
@@ -1482,7 +1482,7 @@ export default function ChatInput({
           onRestartStart={() => setChatState?.(ChatState.RestartingAgent)}
           onRestartEnd={() => setChatState?.(ChatState.Idle)}
         />
-        <div className="w-px h-4 bg-border-default mx-2" />
+        <div className="w-px h-4 bg-border-primary mx-2" />
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
@@ -1491,14 +1491,14 @@ export default function ChatInput({
               disabled={isFilePickerOpen}
               variant="ghost"
               size="sm"
-              className={`flex items-center justify-center text-text-default/70 hover:text-text-default text-xs transition-colors ${isFilePickerOpen ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+              className={`flex items-center justify-center text-text-primary/70 hover:text-text-primary text-xs transition-colors ${isFilePickerOpen ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
             >
               <Attach className="w-4 h-4" />
             </Button>
           </TooltipTrigger>
           <TooltipContent>Attach file</TooltipContent>
         </Tooltip>
-        <div className="w-px h-4 bg-border-default mx-2" />
+        <div className="w-px h-4 bg-border-primary mx-2" />
         {/* Model selector, mode selector, alerts, summarize button */}
         <div className="flex flex-row items-center">
           {/* Cost Tracker */}
@@ -1523,13 +1523,13 @@ export default function ChatInput({
               />
             </div>
           </Tooltip>
-          <div className="w-px h-4 bg-border-default mx-2" />
+          <div className="w-px h-4 bg-border-primary mx-2" />
           <BottomMenuModeSelection />
-          <div className="w-px h-4 bg-border-default mx-2" />
+          <div className="w-px h-4 bg-border-primary mx-2" />
           <BottomMenuExtensionSelection sessionId={sessionId} />
           {sessionId && messages.length > 0 && (
             <>
-              <div className="w-px h-4 bg-border-default mx-2" />
+              <div className="w-px h-4 bg-border-primary mx-2" />
               <div className="flex items-center h-full">
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -1545,7 +1545,7 @@ export default function ChatInput({
                       }}
                       variant="ghost"
                       size="sm"
-                      className="flex items-center justify-center text-text-default/70 hover:text-text-default text-xs cursor-pointer"
+                      className="flex items-center justify-center text-text-primary/70 hover:text-text-primary text-xs cursor-pointer"
                     >
                       <ChefHat size={16} />
                     </Button>
@@ -1568,7 +1568,7 @@ export default function ChatInput({
                   }}
                   variant="ghost"
                   size="sm"
-                  className="flex items-center justify-center text-text-default/70 hover:text-text-default text-xs cursor-pointer transition-colors"
+                  className="flex items-center justify-center text-text-primary/70 hover:text-text-primary text-xs cursor-pointer transition-colors"
                 >
                   <Bug className="w-4 h-4" />
                 </Button>
diff --git a/ui/desktop/src/components/ElicitationRequest.tsx b/ui/desktop/src/components/ElicitationRequest.tsx
index b1720d3ddf3a..b8b6c3cf7007 100644
--- a/ui/desktop/src/components/ElicitationRequest.tsx
+++ b/ui/desktop/src/components/ElicitationRequest.tsx
@@ -57,7 +57,7 @@ export default function ElicitationRequest({
 
   if (isCancelledMessage) {
     return (
-      <div className="goose-message-content bg-background-muted rounded-2xl px-4 py-2 text-text-default">
+      <div className="goose-message-content bg-background-secondary rounded-2xl px-4 py-2 text-text-primary">
         Information request was cancelled.
       </div>
     );
@@ -65,7 +65,7 @@ export default function ElicitationRequest({
 
   if (submitted) {
     return (
-      <div className="goose-message-content bg-background-muted rounded-2xl px-4 py-2 text-text-default">
+      <div className="goose-message-content bg-background-secondary rounded-2xl px-4 py-2 text-text-primary">
         <div className="flex items-center gap-2">
           <svg
             className="w-5 h-5 text-gray-500"
@@ -88,8 +88,8 @@ export default function ElicitationRequest({
 
   if (isExpired) {
     return (
-      <div className="goose-message-content bg-background-muted rounded-2xl px-4 py-2 text-text-default">
-        <div className="flex items-center gap-2 text-text-muted">
+      <div className="goose-message-content bg-background-secondary rounded-2xl px-4 py-2 text-text-primary">
+        <div className="flex items-center gap-2 text-text-secondary">
           <svg
             className="w-5 h-5"
             xmlns="http://www.w3.org/2000/svg"
@@ -112,19 +112,19 @@ export default function ElicitationRequest({
 
   return (
     <div className="flex flex-col">
-      <div className="goose-message-content bg-background-muted rounded-2xl rounded-b-none px-4 py-2 text-text-default">
+      <div className="goose-message-content bg-background-secondary rounded-2xl rounded-b-none px-4 py-2 text-text-primary">
         <div className="flex justify-between items-start gap-4">
           <span>{message || 'Goose needs some information from you.'}</span>
         </div>
       </div>
-      <div className="goose-message-content bg-background-default border border-border-default dark:border-gray-700 rounded-b-2xl px-4 py-3">
+      <div className="goose-message-content bg-background-primary border border-border-primary dark:border-gray-700 rounded-b-2xl px-4 py-3">
         <JsonSchemaForm
           schema={requested_schema as JsonSchema}
           onSubmit={handleSubmit}
           submitLabel="Submit"
         />
         <div
-          className={`mt-3 pt-3 border-t border-border-default flex items-center gap-2 text-sm ${isUrgent ? 'text-red-500' : 'text-text-muted'}`}
+          className={`mt-3 pt-3 border-t border-border-primary flex items-center gap-2 text-sm ${isUrgent ? 'text-red-500' : 'text-text-secondary'}`}
         >
           <svg
             className="w-4 h-4 animate-pulse"
diff --git a/ui/desktop/src/components/ErrorBoundary.tsx b/ui/desktop/src/components/ErrorBoundary.tsx
index 8163b5fb0cff..3360c72ac243 100644
--- a/ui/desktop/src/components/ErrorBoundary.tsx
+++ b/ui/desktop/src/components/ErrorBoundary.tsx
@@ -52,11 +52,11 @@ export function ErrorUI({ error }: { error: string }) {
         <h1 className="text-2xl font-semibold text-foreground dark:text-white">Honk!</h1>
 
         {window?.appConfig?.get('GOOSE_VERSION') !== undefined ? (
-          <p className="text-base text-text-muted dark:text-muted-foreground mb-2">
+          <p className="text-base text-text-secondary dark:text-muted-foreground mb-2">
             An error occurred in Goose v{window?.appConfig?.get('GOOSE_VERSION') as string}.
           </p>
         ) : (
-          <p className="text-base text-text-muted dark:text-muted-foreground mb-2">
+          <p className="text-base text-text-secondary dark:text-muted-foreground mb-2">
             An error occurred.
           </p>
         )}
diff --git a/ui/desktop/src/components/GooseMessage.tsx b/ui/desktop/src/components/GooseMessage.tsx
index b6f04f83452e..794ae59fcb44 100644
--- a/ui/desktop/src/components/GooseMessage.tsx
+++ b/ui/desktop/src/components/GooseMessage.tsx
@@ -143,8 +143,8 @@ export default function GooseMessage({
         )}
 
         {cotText && (
-          <details className="bg-background-muted border border-border-default rounded p-2 mb-2">
-            <summary className="cursor-pointer text-sm text-text-muted select-none">
+          <details className="bg-background-secondary border border-border-primary rounded p-2 mb-2">
+            <summary className="cursor-pointer text-sm text-text-secondary select-none">
               Show thinking
             </summary>
             <div className="mt-2">
@@ -172,7 +172,7 @@ export default function GooseMessage({
             {toolRequests.length === 0 && (
               <div className="relative flex justify-start">
                 {!isStreaming && (
-                  <div className="text-xs font-mono text-text-muted pt-1 transition-all duration-200 group-hover:-translate-y-4 group-hover:opacity-0">
+                  <div className="text-xs font-mono text-text-secondary pt-1 transition-all duration-200 group-hover:-translate-y-4 group-hover:opacity-0">
                     {timestamp}
                   </div>
                 )}
@@ -213,7 +213,7 @@ export default function GooseMessage({
                   );
                 })}
               </div>
-              <div className="text-xs text-text-muted transition-all duration-200 group-hover:-translate-y-4 group-hover:opacity-0 pt-1">
+              <div className="text-xs text-text-secondary transition-all duration-200 group-hover:-translate-y-4 group-hover:opacity-0 pt-1">
                 {!isStreaming && !hideTimestamp && timestamp}
               </div>
             </div>
diff --git a/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx b/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx
index b80fd519647e..3342f9dff6aa 100644
--- a/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx
+++ b/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx
@@ -155,18 +155,18 @@ const SessionList = React.memo<{
             <div key={session.id} className="relative flex items-center">
               {/* Vertical line segment - full height except last item stops at middle */}
               <div
-                className={`absolute left-0 w-px bg-border-strong ${
+                className={`absolute left-0 w-px bg-border-secondary ${
                   isLast ? 'top-0 h-1/2' : 'top-0 h-full'
                 }`}
               />
               {/* Horizontal branch line */}
-              <div className="absolute left-0 w-2 h-px bg-border-strong top-1/2" />
+              <div className="absolute left-0 w-2 h-px bg-border-secondary top-1/2" />
               <button
                 onClick={() => onSessionClick(session)}
                 className={`w-full text-left ml-3 px-1.5 py-1.5 pr-2 rounded-md text-sm transition-colors flex items-center gap-1 min-w-0 ${
                   activeSessionId === session.id
-                    ? 'bg-background-medium text-text-default'
-                    : 'text-text-muted hover:bg-background-medium/50 hover:text-text-default'
+                    ? 'bg-background-tertiary text-text-primary'
+                    : 'text-text-secondary hover:bg-background-tertiary/50 hover:text-text-primary'
                 }`}
                 title={displayName}
               >
@@ -488,7 +488,7 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
                 onClick={() => navigate(entry.path)}
                 isActive={isActivePath(entry.path)}
                 tooltip={entry.tooltip}
-                className="w-full justify-start px-3 rounded-lg h-fit hover:bg-background-medium/50 transition-all duration-200 data-[active=true]:bg-background-medium"
+                className="w-full justify-start px-3 rounded-lg h-fit hover:bg-background-tertiary/50 transition-all duration-200 data-[active=true]:bg-background-tertiary"
               >
                 <IconComponent className="w-4 h-4" />
                 <span>{entry.label}</span>
@@ -522,7 +522,7 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
                     onClick={() => navigate('/')}
                     isActive={isActivePath('/')}
                     tooltip="Go back to the main chat screen"
-                    className="w-full justify-start px-3 rounded-lg h-fit hover:bg-background-medium/50 transition-all duration-200 data-[active=true]:bg-background-medium"
+                    className="w-full justify-start px-3 rounded-lg h-fit hover:bg-background-tertiary/50 transition-all duration-200 data-[active=true]:bg-background-tertiary"
                   >
                     <Home className="w-4 h-4" />
                     <span>Home</span>
@@ -543,7 +543,7 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
                         data-testid="sidebar-new-chat-button"
                         onClick={handleNewChat}
                         tooltip="Start a new chat"
-                        className="flex-1 justify-start px-3 rounded-lg h-fit hover:bg-background-medium/50 transition-all duration-200"
+                        className="flex-1 justify-start px-3 rounded-lg h-fit hover:bg-background-tertiary/50 transition-all duration-200"
                       >
                         <MessageSquarePlus className="w-4 h-4" />
                         <span>Chat</span>
@@ -551,13 +551,13 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
                       {recentSessions.length > 0 && (
                         <CollapsibleTrigger asChild>
                           <button
-                            className="flex items-center justify-center w-6 h-8 hover:bg-background-medium/50 rounded-md transition-colors"
+                            className="flex items-center justify-center w-6 h-8 hover:bg-background-tertiary/50 rounded-md transition-colors"
                             aria-label={
                               isChatExpanded ? 'Collapse chat sessions' : 'Expand chat sessions'
                             }
                           >
                             <ChevronRight
-                              className={`w-4 h-4 text-text-muted transition-transform duration-200 ${
+                              className={`w-4 h-4 text-text-secondary transition-transform duration-200 ${
                                 isChatExpanded ? 'rotate-90' : ''
                               }`}
                             />
@@ -579,7 +579,7 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
                       {/* View All Link */}
                       <button
                         onClick={handleViewAllClick}
-                        className="w-full text-left px-3 py-1.5 rounded-md text-sm text-text-muted hover:bg-background-medium/50 hover:text-text-default transition-colors flex items-center gap-2"
+                        className="w-full text-left px-3 py-1.5 rounded-md text-sm text-text-secondary hover:bg-background-tertiary/50 hover:text-text-primary transition-colors flex items-center gap-2"
                       >
                         <History className="w-4 h-4" />
                         <span>View All</span>
diff --git a/ui/desktop/src/components/GooseSidebar/ThemeSelector.tsx b/ui/desktop/src/components/GooseSidebar/ThemeSelector.tsx
index 1b2d22a72891..f3783bd753e9 100644
--- a/ui/desktop/src/components/GooseSidebar/ThemeSelector.tsx
+++ b/ui/desktop/src/components/GooseSidebar/ThemeSelector.tsx
@@ -18,7 +18,7 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = ({
 
   return (
     <div className={`${!horizontal ? 'px-1 py-2 space-y-2' : ''} ${className}`}>
-      {!hideTitle && <div className="text-xs text-text-default px-3">Theme</div>}
+      {!hideTitle && <div className="text-xs text-text-primary px-3">Theme</div>}
       <div
         className={`${horizontal ? 'flex' : 'grid grid-cols-3'} gap-1 ${!horizontal ? 'px-3' : ''}`}
       >
@@ -27,8 +27,8 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = ({
           onClick={() => setUserThemePreference('light')}
           className={`flex items-center justify-center gap-1 p-2 rounded-md border transition-colors text-xs ${
             userThemePreference === 'light'
-              ? 'bg-background-accent text-text-on-accent border-border-accent hover:!bg-background-accent hover:!text-text-on-accent'
-              : 'border-border-default hover:!bg-background-muted text-text-muted hover:text-text-default'
+              ? 'bg-background-inverse text-text-inverse border-text-inverse hover:!bg-background-inverse hover:!text-text-inverse'
+              : 'border-border-primary hover:!bg-background-secondary text-text-secondary hover:text-text-primary'
           }`}
           variant="ghost"
           size="sm"
@@ -42,8 +42,8 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = ({
           onClick={() => setUserThemePreference('dark')}
           className={`flex items-center justify-center gap-1 p-2 rounded-md border transition-colors text-xs ${
             userThemePreference === 'dark'
-              ? 'bg-background-accent text-text-on-accent border-border-accent hover:!bg-background-accent hover:!text-text-on-accent'
-              : 'border-border-default hover:!bg-background-muted text-text-muted hover:text-text-default'
+              ? 'bg-background-inverse text-text-inverse border-text-inverse hover:!bg-background-inverse hover:!text-text-inverse'
+              : 'border-border-primary hover:!bg-background-secondary text-text-secondary hover:text-text-primary'
           }`}
           variant="ghost"
           size="sm"
@@ -57,8 +57,8 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = ({
           onClick={() => setUserThemePreference('system')}
           className={`flex items-center justify-center gap-1 p-2 rounded-md border transition-colors text-xs ${
             userThemePreference === 'system'
-              ? 'bg-background-accent text-text-on-accent border-border-accent hover:!bg-background-accent hover:!text-text-on-accent'
-              : 'border-border-default hover:!bg-background-muted text-text-muted hover:text-text-default'
+              ? 'bg-background-inverse text-text-inverse border-text-inverse hover:!bg-background-inverse hover:!text-text-inverse'
+              : 'border-border-primary hover:!bg-background-secondary text-text-secondary hover:text-text-primary'
           }`}
           variant="ghost"
           size="sm"
diff --git a/ui/desktop/src/components/Hub.tsx b/ui/desktop/src/components/Hub.tsx
index 91de96bdb38c..b8d4774e7fed 100644
--- a/ui/desktop/src/components/Hub.tsx
+++ b/ui/desktop/src/components/Hub.tsx
@@ -73,7 +73,7 @@ export default function Hub({
   };
 
   return (
-    <div className="flex flex-col h-full min-h-0 bg-background-muted">
+    <div className="flex flex-col h-full min-h-0 bg-background-secondary">
       <div className="flex-1 flex flex-col min-h-[45vh] overflow-hidden mb-0.5 relative">
         <SessionInsights />
         {isCreatingSession && (
diff --git a/ui/desktop/src/components/ImagePreview.tsx b/ui/desktop/src/components/ImagePreview.tsx
index 52098c385d3d..cc02ea5afd97 100644
--- a/ui/desktop/src/components/ImagePreview.tsx
+++ b/ui/desktop/src/components/ImagePreview.tsx
@@ -19,12 +19,12 @@ export default function ImagePreview({ src }: ImagePreviewProps) {
         alt="goose image"
         onError={() => setError(true)}
         onClick={() => setIsExpanded(!isExpanded)}
-        className={`rounded border border-border-default cursor-pointer hover:border-border-default transition-all ${
+        className={`rounded border border-border-primary cursor-pointer hover:border-border-primary transition-all ${
           isExpanded ? 'max-w-full max-h-96' : 'max-h-40 max-w-40'
         }`}
         style={{ objectFit: 'contain' }}
       />
-      <div className="text-xs text-text-muted mt-1">
+      <div className="text-xs text-text-secondary mt-1">
         Click to {isExpanded ? 'collapse' : 'expand'}
       </div>
     </div>
diff --git a/ui/desktop/src/components/LauncherView.tsx b/ui/desktop/src/components/LauncherView.tsx
index a09a9f8ac7c9..d5609f0b28f2 100644
--- a/ui/desktop/src/components/LauncherView.tsx
+++ b/ui/desktop/src/components/LauncherView.tsx
@@ -28,7 +28,7 @@ export default function LauncherView() {
     <div className="h-screen w-screen flex bg-transparent overflow-hidden">
       <form
         onSubmit={handleSubmit}
-        className="w-full h-full bg-background-default/95 backdrop-blur-lg shadow-2xl border border-border-default"
+        className="w-full h-full bg-background-primary/95 backdrop-blur-lg shadow-2xl border border-border-primary"
       >
         <input
           ref={inputRef}
@@ -36,7 +36,7 @@ export default function LauncherView() {
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           onKeyDown={handleKeyDown}
-          className="w-full h-full bg-transparent text-text-default text-xl px-6 outline-none placeholder-text-muted"
+          className="w-full h-full bg-transparent text-text-primary text-xl px-6 outline-none placeholder:text-text-secondary"
           placeholder="Ask goose anything..."
           autoFocus
         />
diff --git a/ui/desktop/src/components/Layout/AppLayout.tsx b/ui/desktop/src/components/Layout/AppLayout.tsx
index ddd7fc2c7329..9d6747772ec5 100644
--- a/ui/desktop/src/components/Layout/AppLayout.tsx
+++ b/ui/desktop/src/components/Layout/AppLayout.tsx
@@ -94,11 +94,11 @@ const AppLayoutContent: React.FC<AppLayoutContentProps> = ({ activeSessions }) =
       {!shouldHideButtons && (
         <div className={`${headerPadding} absolute top-3 z-100 flex items-center`}>
           <SidebarTrigger
-            className={`no-drag hover:border-border-strong hover:text-text-default hover:!bg-background-medium hover:scale-105`}
+            className={`no-drag hover:border-border-secondary hover:text-text-primary hover:!bg-background-tertiary hover:scale-105`}
           />
           <Button
             onClick={handleNewWindow}
-            className="no-drag hover:!bg-background-medium"
+            className="no-drag hover:!bg-background-tertiary"
             variant="ghost"
             size="xs"
             title="Start a new session in a new window"
diff --git a/ui/desktop/src/components/Layout/MainPanelLayout.tsx b/ui/desktop/src/components/Layout/MainPanelLayout.tsx
index 29e169797674..a085b6f5bca6 100644
--- a/ui/desktop/src/components/Layout/MainPanelLayout.tsx
+++ b/ui/desktop/src/components/Layout/MainPanelLayout.tsx
@@ -4,7 +4,7 @@ export const MainPanelLayout: React.FC<{
   children: React.ReactNode;
   removeTopPadding?: boolean;
   backgroundColor?: string;
-}> = ({ children, removeTopPadding = false, backgroundColor = 'bg-background-default' }) => {
+}> = ({ children, removeTopPadding = false, backgroundColor = 'bg-background-primary' }) => {
   return (
     <div className={`h-dvh`}>
       {/* Padding top matches the app toolbar drag area height - can be removed for full bleed */}
diff --git a/ui/desktop/src/components/LoadingGoose.tsx b/ui/desktop/src/components/LoadingGoose.tsx
index 7e7e23ef3381..45703075a800 100644
--- a/ui/desktop/src/components/LoadingGoose.tsx
+++ b/ui/desktop/src/components/LoadingGoose.tsx
@@ -38,7 +38,7 @@ const LoadingGoose = ({ message, chatState = ChatState.Idle }: LoadingGooseProps
     <div className="w-full animate-fade-slide-up">
       <div
         data-testid="loading-indicator"
-        className="flex items-center gap-2 text-xs text-text-default py-2"
+        className="flex items-center gap-2 text-xs text-text-primary py-2"
       >
         {icon}
         {displayMessage}
diff --git a/ui/desktop/src/components/MCPUIResourceRenderer.tsx b/ui/desktop/src/components/MCPUIResourceRenderer.tsx
index 16f697098406..8edb939a272c 100644
--- a/ui/desktop/src/components/MCPUIResourceRenderer.tsx
+++ b/ui/desktop/src/components/MCPUIResourceRenderer.tsx
@@ -330,7 +330,7 @@ export default function MCPUIResourceRenderer({
   };
 
   return (
-    <div className="mt-3 p-4 border border-border-default rounded-lg bg-background-muted">
+    <div className="mt-3 p-4 border border-border-primary rounded-lg bg-background-secondary">
       <div className="overflow-hidden rounded-sm">
         <UIResourceRenderer
           resource={content.resource}
diff --git a/ui/desktop/src/components/MarkdownContent.tsx b/ui/desktop/src/components/MarkdownContent.tsx
index fd4e68284f9c..e223c0499f94 100644
--- a/ui/desktop/src/components/MarkdownContent.tsx
+++ b/ui/desktop/src/components/MarkdownContent.tsx
@@ -201,15 +201,15 @@ const MarkdownContent = memo(function MarkdownContent({
   return (
     <>
       <div
-        className={`w-full overflow-x-hidden prose prose-sm text-text-default dark:prose-invert max-w-full word-break font-sans
+        className={`w-full overflow-x-hidden prose prose-sm text-text-primary dark:prose-invert max-w-full word-break font-sans
         prose-pre:p-0 prose-pre:m-0 !p-0
         prose-code:break-all prose-code:whitespace-pre-wrap prose-code:font-mono
         prose-a:break-all prose-a:overflow-wrap-anywhere
         prose-table:table prose-table:w-full
         prose-blockquote:text-inherit
-        prose-td:border prose-td:border-border-default prose-td:p-2
-        prose-th:border prose-th:border-border-default prose-th:p-2
-        prose-thead:bg-background-default
+        prose-td:border prose-td:border-border-primary prose-td:p-2
+        prose-th:border prose-th:border-border-primary prose-th:p-2
+        prose-thead:bg-background-primary
         prose-h1:text-2xl prose-h1:font-normal prose-h1:mb-5 prose-h1:mt-0 prose-h1:font-sans
         prose-h2:text-xl prose-h2:font-normal prose-h2:mb-4 prose-h2:mt-4 prose-h2:font-sans
         prose-h3:text-lg prose-h3:font-normal prose-h3:mb-3 prose-h3:mt-3 prose-h3:font-sans
diff --git a/ui/desktop/src/components/McpApps/McpAppRenderer.tsx b/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
index cd1646fcbbd7..ff4ddd801eec 100644
--- a/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
+++ b/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
@@ -238,7 +238,7 @@ export default function McpAppRenderer({
 }: McpAppRendererProps) {
   const isExpandedView = displayMode === 'fullscreen' || displayMode === 'standalone';
 
-  const { resolvedTheme } = useTheme();
+  const { resolvedTheme, mcpHostStyles } = useTheme();
 
   // Survive StrictMode remounts — replay cached results instead of re-fetching,
   // which prevents the iframe from being torn down and recreated (visible flicker).
@@ -604,7 +604,7 @@ export default function McpAppRenderer({
     const context: McpUiHostContext = {
       // todo: toolInfo: {}
       theme: resolvedTheme,
-      // todo: styles: { variables: {}, styles: {} }
+      styles: mcpHostStyles,
       // 'standalone' is a Goose-specific display mode (dedicated Electron window)
       // that maps to the spec's inline | fullscreen | pip modes.
       displayMode: displayMode as McpUiDisplayMode,
@@ -628,7 +628,7 @@ export default function McpAppRenderer({
     };
 
     return context;
-  }, [resolvedTheme, displayMode, containerWidth, containerHeight]);
+  }, [resolvedTheme, mcpHostStyles, displayMode, containerWidth, containerHeight]);
 
   const appToolResult = useMemo((): CallToolResult | undefined => {
     if (!toolResult) return undefined;
@@ -694,10 +694,10 @@ export default function McpAppRenderer({
   };
 
   const containerClasses = cn(
-    'bg-background-default overflow-hidden [&_iframe]:!w-full',
+    'bg-background-primary overflow-hidden [&_iframe]:!w-full',
     isError && 'border border-red-500 rounded-lg bg-red-50 dark:bg-red-900/20',
     !isError && !isExpandedView && 'mt-6 mb-2',
-    !isError && !isExpandedView && meta.prefersBorder && 'border border-border-default rounded-lg'
+    !isError && !isExpandedView && meta.prefersBorder && 'border border-border-primary rounded-lg'
   );
 
   const containerStyle = isExpandedView
diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index f4f05fe1df89..ea8e483c4d9a 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -524,7 +524,7 @@ const MentionPopover = forwardRef<
     return (
       <div
         ref={popoverRef}
-        className="fixed z-50 bg-background-default border border-border-default rounded-lg shadow-lg min-w-96 max-w-lg max-h-80"
+        className="fixed z-50 bg-background-primary border border-border-primary rounded-lg shadow-lg min-w-96 max-w-lg max-h-80"
         style={{
           left: position.x,
           top: position.y - 10, // Position above the chat input
@@ -535,12 +535,12 @@ const MentionPopover = forwardRef<
           {isLoading ? (
             <div className="flex items-center justify-center py-4">
               <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2"></div>
-              <span className="ml-2 text-sm text-text-muted">Scanning files...</span>
+              <span className="ml-2 text-sm text-text-secondary">Scanning files...</span>
             </div>
           ) : (
             <>
               {displayItems.length > 0 && (
-                <div className="text-xs text-text-muted mb-2 px-1">
+                <div className="text-xs text-text-secondary mb-2 px-1">
                   {displayItems.length} item{displayItems.length !== 1 ? 's' : ''} found
                 </div>
               )}
@@ -558,18 +558,18 @@ const MentionPopover = forwardRef<
                       index === selectedIndex ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent/50'
                     }`}
                   >
-                    <div className="flex-shrink-0 text-text-muted">
+                    <div className="flex-shrink-0 text-text-secondary">
                       <ItemIcon item={item} />
                     </div>
                     <div className="flex-1 min-w-0">
-                      <div className="text-sm truncate text-text-default">{item.name}</div>
-                      <div className="text-xs truncate text-text-muted">{item.extra}</div>
+                      <div className="text-sm truncate text-text-primary">{item.name}</div>
+                      <div className="text-xs truncate text-text-secondary">{item.extra}</div>
                     </div>
                   </div>
                 ))}
 
                 {!isLoading && displayItems.length === 0 && query && (
-                  <div className="p-4 text-center text-text-muted text-sm">
+                  <div className="p-4 text-center text-text-secondary text-sm">
                     No items found matching "{query}"
                   </div>
                 )}
diff --git a/ui/desktop/src/components/MessageCopyLink.tsx b/ui/desktop/src/components/MessageCopyLink.tsx
index 667911c074ca..fb61a87a57d0 100644
--- a/ui/desktop/src/components/MessageCopyLink.tsx
+++ b/ui/desktop/src/components/MessageCopyLink.tsx
@@ -51,7 +51,7 @@ export default function MessageCopyLink({ text, contentRef }: MessageCopyLinkPro
   return (
     <button
       onClick={handleCopy}
-      className="flex font-mono items-center gap-1 text-xs text-text-muted hover:cursor-pointer hover:text-text-default transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-y-4 group-hover:translate-y-0"
+      className="flex font-mono items-center gap-1 text-xs text-text-secondary hover:cursor-pointer hover:text-text-primary transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-y-4 group-hover:translate-y-0"
     >
       <Copy className="h-3 w-3" />
       <span>{copied ? 'Copied!' : 'Copy'}</span>
diff --git a/ui/desktop/src/components/MessageQueue.tsx b/ui/desktop/src/components/MessageQueue.tsx
index 61269b921b5b..dd3472b89895 100644
--- a/ui/desktop/src/components/MessageQueue.tsx
+++ b/ui/desktop/src/components/MessageQueue.tsx
@@ -133,7 +133,7 @@ export const MessageQueue: React.FC<MessageQueueProps> = ({
 
             {/* Queue count */}
             {remainingCount > 0 && (
-              <div className="flex items-center gap-1 text-xs text-muted-foreground bg-background-muted border border-border-default px-2 py-1 rounded-full font-medium">
+              <div className="flex items-center gap-1 text-xs text-muted-foreground bg-background-secondary border border-border-primary px-2 py-1 rounded-full font-medium">
                 <span>+{remainingCount}</span>
               </div>
             )}
diff --git a/ui/desktop/src/components/OllamaSetup.tsx b/ui/desktop/src/components/OllamaSetup.tsx
index 90e0c289cdf8..da2053ab4ecc 100644
--- a/ui/desktop/src/components/OllamaSetup.tsx
+++ b/ui/desktop/src/components/OllamaSetup.tsx
@@ -133,7 +133,7 @@ export function OllamaSetup({ onSuccess, onCancel }: OllamaSetupProps) {
         <div className="flex items-center justify-center py-8">
           <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2"></div>
         </div>
-        <p className="text-center text-text-muted">Checking for Ollama...</p>
+        <p className="text-center text-text-secondary">Checking for Ollama...</p>
       </div>
     );
   }
@@ -142,9 +142,9 @@ export function OllamaSetup({ onSuccess, onCancel }: OllamaSetupProps) {
     <div className="space-y-6">
       {/* Header with icon above heading - left aligned like onboarding cards */}
       <div className="text-left">
-        <Ollama className="w-6 h-6 mb-3 text-text-default" />
-        <h3 className="text-lg font-semibold text-text-default mb-2">Ollama Setup</h3>
-        <p className="text-text-muted">
+        <Ollama className="w-6 h-6 mb-3 text-text-primary" />
+        <h3 className="text-lg font-semibold text-text-primary mb-2">Ollama Setup</h3>
+        <p className="text-text-secondary">
           Ollama lets you run AI models for free, private and locally on your computer.
         </p>
       </div>
@@ -167,14 +167,14 @@ export function OllamaSetup({ onSuccess, onCancel }: OllamaSetupProps) {
                 <p className="text-text-warning text-sm">
                   The {getPreferredModel()} model is not installed
                 </p>
-                <p className="text-text-muted text-xs mt-1">
+                <p className="text-text-secondary text-xs mt-1">
                   This model is recommended for the best experience with Goose
                 </p>
               </div>
               <button
                 onClick={handleDownloadModel}
                 disabled={false}
-                className="w-full px-6 py-3 bg-background-muted text-text-default rounded-lg transition-colors font-medium flex items-center justify-center gap-2"
+                className="w-full px-6 py-3 bg-background-secondary text-text-primary rounded-lg transition-colors font-medium flex items-center justify-center gap-2"
               >
                 Download {getPreferredModel()} (~11GB)
               </button>
@@ -185,10 +185,10 @@ export function OllamaSetup({ onSuccess, onCancel }: OllamaSetupProps) {
                 <p className="text-text-info text-sm">Downloading {getPreferredModel()}...</p>
                 {downloadProgress && (
                   <>
-                    <p className="text-text-muted text-xs mt-2">{downloadProgress.status}</p>
+                    <p className="text-text-secondary text-xs mt-2">{downloadProgress.status}</p>
                     {downloadProgress.total && downloadProgress.completed && (
                       <div className="mt-3">
-                        <div className="bg-background-muted rounded-full h-2 overflow-hidden">
+                        <div className="bg-background-secondary rounded-full h-2 overflow-hidden">
                           <div
                             className="h-full transition-all duration-300"
                             style={{
@@ -196,7 +196,7 @@ export function OllamaSetup({ onSuccess, onCancel }: OllamaSetupProps) {
                             }}
                           />
                         </div>
-                        <p className="text-text-muted text-xs mt-1">
+                        <p className="text-text-secondary text-xs mt-1">
                           {Math.round((downloadProgress.completed / downloadProgress.total) * 100)}%
                         </p>
                       </div>
@@ -209,7 +209,7 @@ export function OllamaSetup({ onSuccess, onCancel }: OllamaSetupProps) {
             <button
               onClick={handleConnectOllama}
               disabled={isConnecting}
-              className="w-full px-6 py-3 bg-background-muted text-text-default rounded-lg transition-colors font-medium flex items-center justify-center gap-2"
+              className="w-full px-6 py-3 bg-background-secondary text-text-primary rounded-lg transition-colors font-medium flex items-center justify-center gap-2"
             >
               {isConnecting ? 'Connecting...' : 'Use Goose with Ollama'}
             </button>
@@ -228,8 +228,8 @@ export function OllamaSetup({ onSuccess, onCancel }: OllamaSetupProps) {
               <div className="flex items-center justify-center py-4">
                 <div className="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2"></div>
               </div>
-              <p className="text-text-muted text-sm">Waiting for Ollama to start...</p>
-              <p className="text-text-muted text-xs">
+              <p className="text-text-secondary text-sm">Waiting for Ollama to start...</p>
+              <p className="text-text-secondary text-xs">
                 Once Ollama is installed and running, we'll automatically detect it.
               </p>
             </div>
@@ -239,7 +239,7 @@ export function OllamaSetup({ onSuccess, onCancel }: OllamaSetupProps) {
               target="_blank"
               rel="noopener noreferrer"
               onClick={handleInstallClick}
-              className="block w-full px-6 py-3 bg-background-muted text-text-default rounded-lg transition-colors font-medium text-center"
+              className="block w-full px-6 py-3 bg-background-secondary text-text-primary rounded-lg transition-colors font-medium text-center"
             >
               Install Ollama
             </a>
@@ -249,7 +249,7 @@ export function OllamaSetup({ onSuccess, onCancel }: OllamaSetupProps) {
 
       <button
         onClick={onCancel}
-        className="w-full px-6 py-3 bg-transparent text-text-muted rounded-lg hover:bg-background-muted transition-colors"
+        className="w-full px-6 py-3 bg-transparent text-text-secondary rounded-lg hover:bg-background-secondary transition-colors"
       >
         Cancel
       </button>
diff --git a/ui/desktop/src/components/ParameterInputModal.tsx b/ui/desktop/src/components/ParameterInputModal.tsx
index bd0ea6787bcc..17a0d17060a9 100644
--- a/ui/desktop/src/components/ParameterInputModal.tsx
+++ b/ui/desktop/src/components/ParameterInputModal.tsx
@@ -90,9 +90,9 @@ const ParameterInputModal: React.FC<ParameterInputModalProps> = ({
     <div className="fixed inset-0 backdrop-blur-sm z-50 flex justify-center items-center animate-[fadein_200ms_ease-in]">
       {showCancelOptions ? (
         // Cancel options modal
-        <div className="bg-background-default border border-border-default rounded-xl p-8 shadow-2xl w-full max-w-md">
-          <h2 className="text-xl font-bold text-text-default mb-4">Cancel Recipe Setup</h2>
-          <p className="text-text-default mb-6">What would you like to do?</p>
+        <div className="bg-background-primary border border-border-primary rounded-xl p-8 shadow-2xl w-full max-w-md">
+          <h2 className="text-xl font-bold text-text-primary mb-4">Cancel Recipe Setup</h2>
+          <p className="text-text-primary mb-6">What would you like to do?</p>
           <div className="flex flex-col gap-3">
             <Button
               onClick={() => handleCancelOption('back-to-form')}
@@ -114,15 +114,15 @@ const ParameterInputModal: React.FC<ParameterInputModalProps> = ({
         </div>
       ) : (
         // Main parameter form
-        <div className="bg-background-default border border-border-default rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] flex flex-col overflow-hidden">
+        <div className="bg-background-primary border border-border-primary rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] flex flex-col overflow-hidden">
           <div className="p-8 pb-4 flex-shrink-0">
-            <h2 className="text-xl font-bold text-text-default mb-6">Recipe Parameters</h2>
+            <h2 className="text-xl font-bold text-text-primary mb-6">Recipe Parameters</h2>
           </div>
           <div className="flex-1 overflow-y-auto px-8">
             <form onSubmit={handleSubmit} className="space-y-4 mb-4">
               {parameters.map((param) => (
                 <div key={param.key}>
-                  <label className="block text-md font-medium text-text-default mb-2">
+                  <label className="block text-md font-medium text-text-primary mb-2">
                     {param.description || param.key}
                     {param.requirement === 'required' && (
                       <span className="text-red-500 ml-1">*</span>
@@ -134,10 +134,10 @@ const ParameterInputModal: React.FC<ParameterInputModalProps> = ({
                     <select
                       value={inputValues[param.key] || ''}
                       onChange={(e) => handleChange(param.key, e.target.value)}
-                      className={`w-full p-3 border rounded-lg bg-background-muted text-text-default focus:outline-none focus:ring-2 ${
+                      className={`w-full p-3 border rounded-lg bg-background-secondary text-text-primary focus:outline-none focus:ring-2 ${
                         validationErrors[param.key]
                           ? 'border-red-500 focus:ring-red-500'
-                          : 'border-border-default focus:ring-border-strong'
+                          : 'border-border-primary focus:ring-border-secondary'
                       }`}
                     >
                       <option value="">Select an option...</option>
@@ -151,10 +151,10 @@ const ParameterInputModal: React.FC<ParameterInputModalProps> = ({
                     <select
                       value={inputValues[param.key] || ''}
                       onChange={(e) => handleChange(param.key, e.target.value)}
-                      className={`w-full p-3 border rounded-lg bg-background-muted text-text-default focus:outline-none focus:ring-2 ${
+                      className={`w-full p-3 border rounded-lg bg-background-secondary text-text-primary focus:outline-none focus:ring-2 ${
                         validationErrors[param.key]
                           ? 'border-red-500 focus:ring-red-500'
-                          : 'border-border-default focus:ring-border-strong'
+                          : 'border-border-primary focus:ring-border-secondary'
                       }`}
                     >
                       <option value="">Select...</option>
@@ -166,10 +166,10 @@ const ParameterInputModal: React.FC<ParameterInputModalProps> = ({
                       type={param.input_type === 'number' ? 'number' : 'text'}
                       value={inputValues[param.key] || ''}
                       onChange={(e) => handleChange(param.key, e.target.value)}
-                      className={`w-full p-3 border rounded-lg bg-background-muted text-text-default focus:outline-none focus:ring-2 ${
+                      className={`w-full p-3 border rounded-lg bg-background-secondary text-text-primary focus:outline-none focus:ring-2 ${
                         validationErrors[param.key]
                           ? 'border-red-500 focus:ring-red-500'
-                          : 'border-border-default focus:ring-border-strong'
+                          : 'border-border-primary focus:ring-border-secondary'
                       }`}
                       placeholder={param.default || `Enter value for ${param.key}...`}
                     />
diff --git a/ui/desktop/src/components/PopularChatTopics.tsx b/ui/desktop/src/components/PopularChatTopics.tsx
index 586198835cde..3073a065422a 100644
--- a/ui/desktop/src/components/PopularChatTopics.tsx
+++ b/ui/desktop/src/components/PopularChatTopics.tsx
@@ -43,23 +43,23 @@ export default function PopularChatTopics({ append }: PopularChatTopicsProps) {
 
   return (
     <div className="absolute bottom-0 left-0 p-6 max-w-md">
-      <h3 className="text-text-muted text-sm mb-1">Popular chat topics</h3>
+      <h3 className="text-text-secondary text-sm mb-1">Popular chat topics</h3>
       <div className="space-y-1">
         {POPULAR_TOPICS.map((topic) => (
           <div
             key={topic.id}
-            className="flex items-center justify-between py-1.5 hover:bg-background-muted rounded-md cursor-pointer transition-colors"
+            className="flex items-center justify-between py-1.5 hover:bg-background-secondary rounded-md cursor-pointer transition-colors"
             onClick={() => handleTopicClick(topic.prompt)}
           >
             <div className="flex items-center gap-3 flex-1 min-w-0">
-              <div className="flex-shrink-0 text-text-muted">{topic.icon}</div>
+              <div className="flex-shrink-0 text-text-secondary">{topic.icon}</div>
               <div className="flex-1 min-w-0">
-                <p className="text-text-default text-sm leading-tight">{topic.description}</p>
+                <p className="text-text-primary text-sm leading-tight">{topic.description}</p>
               </div>
             </div>
             <div className="flex-shrink-0 ml-4">
               <button
-                className="text-sm text-text-muted hover:text-text-default transition-colors cursor-pointer"
+                className="text-sm text-text-secondary hover:text-text-primary transition-colors cursor-pointer"
                 onClick={(e) => {
                   e.stopPropagation();
                   handleTopicClick(topic.prompt);
diff --git a/ui/desktop/src/components/ProgressiveMessageList.tsx b/ui/desktop/src/components/ProgressiveMessageList.tsx
index 7cd3686dc82a..3264dcab3453 100644
--- a/ui/desktop/src/components/ProgressiveMessageList.tsx
+++ b/ui/desktop/src/components/ProgressiveMessageList.tsx
@@ -271,7 +271,7 @@ export default function ProgressiveMessageList({
       {isLoading && (
         <div className="flex flex-col items-center justify-center py-8">
           <LoadingGoose message={`Loading messages... (${renderedCount}/${messages.length})`} />
-          <div className="text-xs text-text-muted mt-2">
+          <div className="text-xs text-text-secondary mt-2">
             Press Cmd/Ctrl+F to load all messages immediately for search
           </div>
         </div>
diff --git a/ui/desktop/src/components/ProviderGuard.tsx b/ui/desktop/src/components/ProviderGuard.tsx
index 21094510df6a..99b3f5d0f4c5 100644
--- a/ui/desktop/src/components/ProviderGuard.tsx
+++ b/ui/desktop/src/components/ProviderGuard.tsx
@@ -290,7 +290,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-primary flex items-center justify-center">
         <WelcomeGooseLogo />
       </div>
     );
@@ -319,7 +319,7 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
 
   if (!hasProvider && showFirstTimeSetup) {
     return (
-      <div className="h-screen w-full bg-background-default overflow-hidden relative">
+      <div className="h-screen w-full bg-background-primary overflow-hidden relative">
         <div
           ref={scrollContainerRef}
           onScroll={checkScrollPosition}
@@ -335,7 +335,7 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
                   </div>
                   <h1 className="text-2xl sm:text-4xl font-light text-left">Welcome to Goose</h1>
                 </div>
-                <p className="text-text-muted text-base sm:text-lg mt-4 sm:mt-6">
+                <p className="text-text-secondary text-base sm:text-lg mt-4 sm:mt-6">
                   Since it’s your first time here, let’s get you set up with an AI provider so goose
                   can work its magic.
                 </p>
@@ -404,12 +404,12 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
                 >
                   <div className="flex items-start justify-between mb-3">
                     <div className="flex items-center gap-2">
-                      <ChatGPT className="w-5 h-5 text-text-default" />
-                      <span className="font-medium text-text-default text-sm sm:text-base">
+                      <ChatGPT className="w-5 h-5 text-text-primary" />
+                      <span className="font-medium text-text-primary text-sm sm:text-base">
                         ChatGPT Subscription
                       </span>
                     </div>
-                    <div className="text-text-muted group-hover:text-text-default transition-colors">
+                    <div className="text-text-secondary group-hover:text-text-primary transition-colors">
                       <svg
                         className="w-4 h-4 sm:w-5 sm:h-5"
                         fill="none"
@@ -425,7 +425,7 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
                       </svg>
                     </div>
                   </div>
-                  <p className="text-text-muted text-sm sm:text-base">
+                  <p className="text-text-secondary text-sm sm:text-base">
                     Use your ChatGPT Plus/Pro subscription for GPT-5 Codex models.
                   </p>
                 </div>
@@ -445,13 +445,13 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
                 >
                   <div className="flex items-start justify-between mb-3">
                     <div className="flex items-center gap-2">
-                      <Tetrate className="w-5 h-5 text-text-default" />
+                      <Tetrate className="w-5 h-5 text-text-primary" />
                       <span className="text-sm sm:text-base">
-                        <span className="font-medium text-text-default">Agent Router</span>
-                        <span className="text-text-muted text-xs"> by Tetrate</span>
+                        <span className="font-medium text-text-primary">Agent Router</span>
+                        <span className="text-text-secondary text-xs"> by Tetrate</span>
                       </span>
                     </div>
-                    <div className="text-text-muted group-hover:text-text-default transition-colors">
+                    <div className="text-text-secondary group-hover:text-text-primary transition-colors">
                       <svg
                         className="w-4 h-4 sm:w-5 sm:h-5"
                         fill="none"
@@ -467,7 +467,7 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
                       </svg>
                     </div>
                   </div>
-                  <p className="text-text-muted text-sm sm:text-base">
+                  <p className="text-text-secondary text-sm sm:text-base">
                     Access multiple AI models with automatic setup. Sign up to receive $10 credit.
                   </p>
                 </div>
@@ -483,12 +483,12 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
 
                 <div className="relative flex items-start justify-between mb-3">
                   <div className="flex items-center gap-2">
-                    <OpenRouter className="w-5 h-5 text-text-default" />
-                    <span className="font-medium text-text-default text-sm sm:text-base">
+                    <OpenRouter className="w-5 h-5 text-text-primary" />
+                    <span className="font-medium text-text-primary text-sm sm:text-base">
                       OpenRouter
                     </span>
                   </div>
-                  <div className="text-text-muted group-hover:text-text-default transition-colors">
+                  <div className="text-text-secondary group-hover:text-text-primary transition-colors">
                     <svg
                       className="w-4 h-4 sm:w-5 sm:h-5"
                       fill="none"
@@ -504,17 +504,17 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
                     </svg>
                   </div>
                 </div>
-                <p className="text-text-muted text-sm sm:text-base">
+                <p className="text-text-secondary text-sm sm:text-base">
                   Access 200+ models with one API. Pay-per-use pricing.
                 </p>
               </div>
 
               {/* Other providers section */}
               <div className="w-full p-4 sm:p-6 bg-transparent border rounded-xl">
-                <h3 className="font-medium text-text-default text-sm sm:text-base mb-3">
+                <h3 className="font-medium text-text-primary text-sm sm:text-base mb-3">
                   Other Providers
                 </h3>
-                <p className="text-text-muted text-sm sm:text-base mb-4">
+                <p className="text-text-secondary text-sm sm:text-base mb-4">
                   Set up additional providers manually through settings.
                 </p>
                 <button
@@ -534,7 +534,7 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
         {/* Scroll indicator - fixed at bottom, hides when scrolled to bottom */}
         {showScrollIndicator && (
           <div className="absolute bottom-4 left-1/2 -translate-x-1/2 pointer-events-none transition-opacity duration-300 opacity-60 animate-bounce">
-            <div className="flex flex-col items-center gap-1 text-text-muted">
+            <div className="flex flex-col items-center gap-1 text-text-secondary">
               <span className="text-xs">More options below</span>
               <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
diff --git a/ui/desktop/src/components/RecipeHeader.tsx b/ui/desktop/src/components/RecipeHeader.tsx
index 052e6c901585..9696e8d8fe68 100644
--- a/ui/desktop/src/components/RecipeHeader.tsx
+++ b/ui/desktop/src/components/RecipeHeader.tsx
@@ -4,12 +4,12 @@ interface RecipeHeaderProps {
 
 export function RecipeHeader({ title }: RecipeHeaderProps) {
   return (
-    <div className={`flex items-center justify-between px-4 py-2 border-b border-border-default'}`}>
+    <div className="flex items-center justify-between px-4 py-2 border-b border-border-primary">
       <div className="flex items-center ml-6">
         <span className="w-2 h-2 rounded-full bg-green-500 mr-2" />
         <span className="text-sm">
-          <span className="text-text-muted">Recipe</span>{' '}
-          <span className="text-text-default">{title}</span>
+          <span className="text-text-secondary">Recipe</span>{' '}
+          <span className="text-text-primary">{title}</span>
         </span>
       </div>
     </div>
diff --git a/ui/desktop/src/components/TelemetryOptOutModal.tsx b/ui/desktop/src/components/TelemetryOptOutModal.tsx
index 9f01df0703ac..45756f52a11b 100644
--- a/ui/desktop/src/components/TelemetryOptOutModal.tsx
+++ b/ui/desktop/src/components/TelemetryOptOutModal.tsx
@@ -94,7 +94,7 @@ export default function TelemetryOptOutModal(props: TelemetryOptOutModalProps) {
             variant="ghost"
             onClick={() => handleChoice(false)}
             disabled={isLoading}
-            className="w-full h-[44px] rounded-lg text-text-muted hover:text-text-default"
+            className="w-full h-[44px] rounded-lg text-text-secondary hover:text-text-primary"
           >
             No thanks
           </Button>
@@ -103,17 +103,17 @@ export default function TelemetryOptOutModal(props: TelemetryOptOutModalProps) {
     >
       <div className="px-2 py-3">
         <div className="flex justify-center mb-4">
-          <Goose className="size-10 text-text-default" />
+          <Goose className="size-10 text-text-primary" />
         </div>
         <h2 className="text-2xl font-regular dark:text-white text-gray-900 text-center mb-3">
           Help improve goose
         </h2>
-        <p className="text-text-default text-sm mb-3">
+        <p className="text-text-primary text-sm mb-3">
           Would you like to help improve goose by sharing anonymous usage data? This helps us
           understand how goose is used and identify areas for improvement.
         </p>
-        <div className="text-text-muted text-xs space-y-1">
-          <p className="font-medium text-text-default">What we collect:</p>
+        <div className="text-text-secondary text-xs space-y-1">
+          <p className="font-medium text-text-primary">What we collect:</p>
           <ul className="list-disc list-inside space-y-0.5 ml-1">
             <li>Operating system, version, and architecture</li>
             <li>goose version and install method</li>
@@ -122,7 +122,7 @@ export default function TelemetryOptOutModal(props: TelemetryOptOutModalProps) {
             <li>Session metrics (duration, interaction count, token usage)</li>
             <li>Error types (e.g., "rate_limit", "auth" - no details)</li>
           </ul>
-          <p className="mt-3 text-text-muted">
+          <p className="mt-3 text-text-secondary">
             We never collect your conversations, code, tool arguments, error messages, or any
             personal data. You can change this setting anytime in Settings → App.
           </p>
diff --git a/ui/desktop/src/components/ToolCallArguments.tsx b/ui/desktop/src/components/ToolCallArguments.tsx
index 0ab074af2493..f1a6160c47d1 100644
--- a/ui/desktop/src/components/ToolCallArguments.tsx
+++ b/ui/desktop/src/components/ToolCallArguments.tsx
@@ -30,8 +30,8 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
         return (
           <div className="font-sans text-sm mb-2">
             <div className="flex flex-row">
-              <span className="text-text-muted min-w-[140px]">{key}</span>
-              <span className="text-text-muted">{value}</span>
+              <span className="text-text-secondary min-w-[140px]">{key}</span>
+              <span className="text-text-secondary">{value}</span>
             </div>
           </div>
         );
@@ -42,26 +42,26 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
           <div className={`flex flex-row items-stretch ${isExpanded ? '' : 'truncate min-w-0'}`}>
             <button
               onClick={() => toggleKey(key)}
-              className="flex text-left text-text-muted min-w-[140px]"
+              className="flex text-left text-text-secondary min-w-[140px]"
             >
               <span>{key}</span>
             </button>
             <div className={`w-full flex items-stretch ${isExpanded ? '' : 'truncate min-w-0'}`}>
               {isExpanded ? (
                 <div>
-                  <MarkdownContent content={value} className="font-sans text-sm text-text-muted" />
+                  <MarkdownContent content={value} className="font-sans text-sm text-text-secondary" />
                 </div>
               ) : (
                 <button
                   onClick={() => toggleKey(key)}
-                  className={`text-left text-text-muted ${isExpanded ? '' : 'truncate min-w-0'}`}
+                  className={`text-left text-text-secondary ${isExpanded ? '' : 'truncate min-w-0'}`}
                 >
                   {value}
                 </button>
               )}
               <button
                 onClick={() => toggleKey(key)}
-                className="flex flex-row items-stretch grow text-text-muted pr-2"
+                className="flex flex-row items-stretch grow text-text-secondary pr-2"
               >
                 <div className="min-w-2 grow" />
                 <Expand size={5} isExpanded={isExpanded} />
@@ -82,8 +82,8 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
     return (
       <div className="mb-2">
         <div className="flex flex-row font-sans text-sm">
-          <span className="text-text-muted min-w-[140px]">{key}</span>
-          <pre className="whitespace-pre-wrap text-text-muted overflow-x-auto max-w-full">
+          <span className="text-text-secondary min-w-[140px]">{key}</span>
+          <pre className="whitespace-pre-wrap text-text-secondary overflow-x-auto max-w-full">
             {content}
           </pre>
         </div>
diff --git a/ui/desktop/src/components/ToolCallConfirmation.tsx b/ui/desktop/src/components/ToolCallConfirmation.tsx
index f6519db9f5fb..5ce96bd591eb 100644
--- a/ui/desktop/src/components/ToolCallConfirmation.tsx
+++ b/ui/desktop/src/components/ToolCallConfirmation.tsx
@@ -18,8 +18,8 @@ export default function ToolConfirmation({
   const { id, toolName, prompt } = data;
 
   return (
-    <div className="goose-message-content bg-background-default border border-border-default rounded-2xl overflow-hidden">
-      <div className="bg-background-muted px-4 py-2 text-text-default">
+    <div className="goose-message-content bg-background-primary border border-border-primary rounded-2xl overflow-hidden">
+      <div className="bg-background-secondary px-4 py-2 text-text-primary">
         {prompt
           ? 'Do you allow this tool call?'
           : 'Goose would like to call the above tool. Allow?'}
diff --git a/ui/desktop/src/components/ToolCallStatusIndicator.tsx b/ui/desktop/src/components/ToolCallStatusIndicator.tsx
index dff160805c78..2fbb73992ee5 100644
--- a/ui/desktop/src/components/ToolCallStatusIndicator.tsx
+++ b/ui/desktop/src/components/ToolCallStatusIndicator.tsx
@@ -29,7 +29,7 @@ export const ToolCallStatusIndicator: React.FC<ToolCallStatusIndicatorProps> = (
   return (
     <div
       className={cn(
-        'absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full border border-border-default',
+        'absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full border border-border-primary',
         getStatusStyles(),
         className
       )}
diff --git a/ui/desktop/src/components/ToolCallWithResponse.tsx b/ui/desktop/src/components/ToolCallWithResponse.tsx
index 9b5e13f56e84..b99878f8d972 100644
--- a/ui/desktop/src/components/ToolCallWithResponse.tsx
+++ b/ui/desktop/src/components/ToolCallWithResponse.tsx
@@ -178,7 +178,7 @@ export default function ToolCallWithResponse({
       <div
         className={cn(
           'w-full text-sm font-sans rounded-lg overflow-hidden border',
-          showInlineApproval ? 'border-amber-500/50 bg-amber-50/5' : 'border-border-default'
+          showInlineApproval ? 'border-amber-500/50 bg-amber-50/5' : 'border-border-primary'
         )}
       >
         <ToolCallView
@@ -224,7 +224,7 @@ export default function ToolCallWithResponse({
             return (
               <div key={index} className="mt-3">
                 <MCPUIResourceRenderer content={resourceContent} appendPromptToChat={append} />
-                <div className="mt-3 p-4 py-3 border border-border-default rounded-lg bg-background-muted flex items-center">
+                <div className="mt-3 p-4 py-3 border border-border-primary rounded-lg bg-background-secondary flex items-center">
                   <FlaskConical className="mr-2" size={20} />
                   <div className="text-sm font-sans">
                     MCP UI is experimental and may change at any time.
@@ -735,7 +735,7 @@ function ToolCallView({
           (typeof code === 'string' || Array.isArray(toolGraph))
         ) {
           return (
-            <div className="border-t border-border-default">
+            <div className="border-t border-border-primary">
               <CodeModeView toolGraph={toolGraph} code={code} />
             </div>
           );
@@ -743,7 +743,7 @@ function ToolCallView({
 
         if (isToolDetails) {
           return (
-            <div className="border-t border-border-default">
+            <div className="border-t border-border-primary">
               <ToolDetailsView toolCall={toolCall} isStartExpanded={isExpandToolDetails} />
             </div>
           );
@@ -753,7 +753,7 @@ function ToolCallView({
       })()}
 
       {logs && logs.length > 0 && (
-        <div className="border-t border-border-default">
+        <div className="border-t border-border-primary">
           <ToolLogsView
             logs={logs}
             working={loadingStatus === 'loading'}
@@ -767,7 +767,7 @@ function ToolCallView({
       {toolResults.length === 0 &&
         progressEntries.length > 0 &&
         progressEntries.map((entry, index) => (
-          <div className="p-3 border-t border-border-default" key={index}>
+          <div className="p-3 border-t border-border-primary" key={index}>
             <ProgressBar progress={entry.progress} total={entry.total} message={entry.message} />
           </div>
         ))}
@@ -776,7 +776,7 @@ function ToolCallView({
       {!isCancelledMessage && (
         <>
           {toolResults.map((result, index) => (
-            <div key={index} className={cn('border-t border-border-default')}>
+            <div key={index} className={cn('border-t border-border-primary')}>
               <ToolResultView toolCall={toolCall} result={result} isStartExpanded={false} />
             </div>
           ))}
@@ -836,7 +836,7 @@ function CodeModeView({ toolGraph, code }: CodeModeViewProps) {
         <pre className="font-mono text-xs text-textSubtle whitespace-pre-wrap">{renderGraph()}</pre>
       )}
       {code && (
-        <div className="border-t border-border-default -mx-4 mt-2">
+        <div className="border-t border-border-primary -mx-4 mt-2">
           <ToolCallExpandable
             label={<span className="pl-4 font-sans text-sm">Code</span>}
             isStartExpanded={false}
diff --git a/ui/desktop/src/components/UserMessage.tsx b/ui/desktop/src/components/UserMessage.tsx
index a46d400c533a..112a78e7412d 100644
--- a/ui/desktop/src/components/UserMessage.tsx
+++ b/ui/desktop/src/components/UserMessage.tsx
@@ -131,13 +131,13 @@ export default function UserMessage({ message, onMessageUpdate }: UserMessagePro
       <div className="flex flex-col group">
         {isEditing ? (
           // Truly wide, centered, in-place edit box replacing the bubble
-          <div className="w-full max-w-4xl mx-auto text-text-default rounded-xl border border-border-default shadow-lg py-4 px-4 my-2 transition-all duration-200 ease-in-out">
+          <div className="w-full max-w-4xl mx-auto text-text-primary rounded-xl border border-border-primary shadow-lg py-4 px-4 my-2 transition-all duration-200 ease-in-out">
             <textarea
               ref={textareaRef}
               value={editContent}
               onChange={handleContentChange}
               onKeyDown={handleKeyDown}
-              className="w-full resize-none bg-transparent text-text-default placeholder:text-text-muted border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-all duration-200 text-base leading-relaxed"
+              className="w-full resize-none bg-transparent text-text-primary placeholder:text-text-secondary border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-all duration-200 text-base leading-relaxed"
               style={{
                 minHeight: '120px',
                 maxHeight: '300px',
@@ -163,7 +163,7 @@ export default function UserMessage({ message, onMessageUpdate }: UserMessagePro
               </div>
             )}
             <div className="flex justify-between items-center mt-4">
-              <div className="text-xs text-text-muted">
+              <div className="text-xs text-text-secondary">
                 <span className="font-semibold">Edit in Place</span> updates this session •{' '}
                 <span className="font-semibold">Fork Session</span> creates a new session
               </div>
@@ -195,11 +195,11 @@ export default function UserMessage({ message, onMessageUpdate }: UserMessagePro
             <div className="flex-col max-w-[85%] w-fit">
               <div className="flex flex-col group">
                 {textContent.trim() && (
-                  <div className="flex bg-background-accent text-text-on-accent rounded-xl py-2.5 px-4">
+                  <div className="flex bg-text-primary text-background-primary rounded-xl py-2.5 px-4">
                     <div ref={contentRef}>
                       <MarkdownContent
                         content={textContent}
-                        className="text-text-on-accent prose-a:text-text-on-accent prose-headings:text-text-on-accent prose-strong:text-text-on-accent prose-em:text-text-on-accent user-message"
+                        className="!text-inherit prose-a:!text-inherit prose-headings:!text-inherit prose-strong:!text-inherit prose-em:!text-inherit prose-li:!text-inherit prose-p:!text-inherit user-message"
                       />
                     </div>
                   </div>
@@ -214,7 +214,7 @@ export default function UserMessage({ message, onMessageUpdate }: UserMessagePro
                 )}
 
                 <div className="relative h-[22px] flex justify-end text-right">
-                  <div className="absolute w-40 font-mono right-0 text-xs text-text-muted pt-1 transition-all duration-200 group-hover:-translate-y-4 group-hover:opacity-0">
+                  <div className="absolute w-40 font-mono right-0 text-xs text-text-secondary pt-1 transition-all duration-200 group-hover:-translate-y-4 group-hover:opacity-0">
                     {timestamp}
                   </div>
                   <div className="absolute right-0 pt-1 flex items-center gap-2">
@@ -226,7 +226,7 @@ export default function UserMessage({ message, onMessageUpdate }: UserMessagePro
                           handleEditClick();
                         }
                       }}
-                      className="flex items-center gap-1 text-xs text-text-muted hover:cursor-pointer hover:text-text-default transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-y-4 group-hover:translate-y-0 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 rounded"
+                      className="flex items-center gap-1 text-xs text-text-secondary hover:cursor-pointer hover:text-text-primary transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-y-4 group-hover:translate-y-0 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 rounded"
                       aria-label={`Edit message: ${textContent.substring(0, 50)}${textContent.length > 50 ? '...' : ''}`}
                       aria-expanded={isEditing}
                       title="Edit message"
diff --git a/ui/desktop/src/components/apps/AppsView.tsx b/ui/desktop/src/components/apps/AppsView.tsx
index 689db147d288..fe297b83c8a2 100644
--- a/ui/desktop/src/components/apps/AppsView.tsx
+++ b/ui/desktop/src/components/apps/AppsView.tsx
@@ -212,7 +212,7 @@ export default function AppsView() {
           onChange={handleUploadApp}
           style={{ display: 'none' }}
         />
-        <div className="bg-background-default px-8 pb-8 pt-16">
+        <div className="bg-background-primary px-8 pb-8 pt-16">
           <div className="flex flex-col page-transition">
             <div className="flex justify-between items-center mb-1">
               <h1 className="text-4xl font-light">Apps</h1>
@@ -227,7 +227,7 @@ export default function AppsView() {
               </Button>
             </div>
             <div className="mb-4">
-              <p className="text-sm text-text-muted mb-2">
+              <p className="text-sm text-text-secondary mb-2">
                 Applications from your MCP servers and Apps build by goose itself. You can ask it to
                 create new apps through the chat interface and they will appear here.
               </p>
@@ -238,16 +238,16 @@ export default function AppsView() {
           </div>
         </div>
 
-        <div className="flex-1 overflow-y-auto bg-background-muted px-8 pb-8">
+        <div className="flex-1 overflow-y-auto bg-background-secondary px-8 pb-8">
           {loading ? (
             <div className="flex items-center justify-center h-64">
-              <p className="text-text-muted">Loading apps...</p>
+              <p className="text-text-secondary">Loading apps...</p>
             </div>
           ) : apps.length === 0 ? (
             <div className="flex items-center justify-center h-64">
               <div className="text-center">
                 <h3 className="text-lg font-medium mb-2">No apps available</h3>
-                <p className="text-sm text-text-muted">
+                <p className="text-sm text-text-secondary">
                   Open a chat and ask goose for the app you want to have. It can build one for you
                   and that will appear here. Or if somebody shared an app, you can import it using
                   the button above.
@@ -261,17 +261,17 @@ export default function AppsView() {
                 return (
                   <div
                     key={`${app.uri}-${app.mcpServers?.join(',')}`}
-                    className="flex flex-col p-4 border rounded-lg hover:border-border-default transition-colors"
+                    className="flex flex-col p-4 border rounded-lg hover:border-border-primary transition-colors"
                   >
                     <div className="flex-1 mb-4">
-                      <h3 className="font-medium text-text-default mb-2">
+                      <h3 className="font-medium text-text-primary mb-2">
                         {formatAppName(app.name)}
                       </h3>
                       {app.description && (
-                        <p className="text-sm text-text-muted mb-2">{app.description}</p>
+                        <p className="text-sm text-text-secondary mb-2">{app.description}</p>
                       )}
                       {app.mcpServers && app.mcpServers.length > 0 && (
-                        <span className="inline-block px-2 py-1 text-xs bg-background-muted text-text-muted rounded">
+                        <span className="inline-block px-2 py-1 text-xs bg-background-secondary text-text-secondary rounded">
                           {isCustomApp ? 'Custom app' : app.mcpServers.join(', ')}
                         </span>
                       )}
diff --git a/ui/desktop/src/components/apps/StandaloneAppView.tsx b/ui/desktop/src/components/apps/StandaloneAppView.tsx
index bf5d846fe115..60d71e9b099d 100644
--- a/ui/desktop/src/components/apps/StandaloneAppView.tsx
+++ b/ui/desktop/src/components/apps/StandaloneAppView.tsx
@@ -123,7 +123,7 @@ export default function StandaloneAppView() {
         }}
       >
         <h2 style={{ color: 'var(--text-error, #ef4444)' }}>Failed to Load App</h2>
-        <p style={{ color: 'var(--text-muted, #6b7280)' }}>{error}</p>
+        <p style={{ color: 'var(--color-text-secondary, #6b7280)' }}>{error}</p>
       </div>
     );
   }
@@ -139,7 +139,7 @@ export default function StandaloneAppView() {
           justifyContent: 'center',
         }}
       >
-        <p style={{ color: 'var(--text-muted, #6b7280)' }}>Initializing app...</p>
+        <p style={{ color: 'var(--color-text-secondary, #6b7280)' }}>Initializing app...</p>
       </div>
     );
   }
@@ -168,7 +168,7 @@ export default function StandaloneAppView() {
         justifyContent: 'center',
       }}
     >
-      <p style={{ color: 'var(--text-muted, #6b7280)' }}>Initializing app...</p>
+      <p style={{ color: 'var(--color-text-secondary, #6b7280)' }}>Initializing app...</p>
     </div>
   );
 }
diff --git a/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx b/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
index 0993a6f68694..95cf5a0be036 100644
--- a/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
+++ b/ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx
@@ -205,7 +205,7 @@ export default function BottomMenuAlertPopover({ alerts }: AlertPopoverProps) {
       <div className="relative">
         <button
           ref={triggerRef}
-          className="cursor-pointer flex items-center justify-center min-w-5 min-h-5 rounded hover:bg-background-muted"
+          className="cursor-pointer flex items-center justify-center min-w-5 min-h-5 rounded hover:bg-background-secondary"
           onClick={() => {
             setIsOpen(true);
           }}
diff --git a/ui/desktop/src/components/bottom_menu/BottomMenuExtensionSelection.tsx b/ui/desktop/src/components/bottom_menu/BottomMenuExtensionSelection.tsx
index 221baab1a9ac..390db66de6a6 100644
--- a/ui/desktop/src/components/bottom_menu/BottomMenuExtensionSelection.tsx
+++ b/ui/desktop/src/components/bottom_menu/BottomMenuExtensionSelection.tsx
@@ -232,7 +232,7 @@ export const BottomMenuExtensionSelection = ({ sessionId }: BottomMenuExtensionS
     >
       <DropdownMenuTrigger asChild>
         <button
-          className={`flex items-center [&_svg]:size-4 text-text-default/70 hover:text-text-default hover:scale-100 hover:bg-transparent text-xs cursor-pointer ${allExtensions.length === 0 || (!isHubView && !isSessionExtensionsLoaded) ? 'invisible' : ''}`}
+          className={`flex items-center [&_svg]:size-4 text-text-primary/70 hover:text-text-primary hover:scale-100 hover:bg-transparent text-xs cursor-pointer ${allExtensions.length === 0 || (!isHubView && !isSessionExtensionsLoaded) ? 'invisible' : ''}`}
           title="manage extensions"
         >
           <Puzzle className="mr-1 h-4 w-4" />
@@ -256,7 +256,7 @@ export const BottomMenuExtensionSelection = ({ sessionId }: BottomMenuExtensionS
             className="h-8 text-sm"
             autoFocus
           />
-          <p className="text-xs text-text-default/60 mt-1.5">
+          <p className="text-xs text-text-primary/60 mt-1.5">
             {isHubView ? 'Extensions for new chats' : 'Extensions for this chat session'}
           </p>
         </div>
@@ -266,7 +266,7 @@ export const BottomMenuExtensionSelection = ({ sessionId }: BottomMenuExtensionS
           }`}
         >
           {sortedExtensions.length === 0 ? (
-            <div className="px-2 py-4 text-center text-sm text-text-default/70">
+            <div className="px-2 py-4 text-center text-sm text-text-primary/70">
               {searchQuery ? 'no extensions found' : 'no extensions available'}
             </div>
           ) : (
@@ -281,7 +281,7 @@ export const BottomMenuExtensionSelection = ({ sessionId }: BottomMenuExtensionS
                   onClick={() => !isToggling && handleToggle(ext)}
                   title={ext.description || ext.name}
                 >
-                  <div className="text-sm font-medium text-text-default">
+                  <div className="text-sm font-medium text-text-primary">
                     {formatExtensionName(ext.name)}
                   </div>
                   <div onClick={(e) => e.stopPropagation()}>
diff --git a/ui/desktop/src/components/bottom_menu/BottomMenuModeSelection.tsx b/ui/desktop/src/components/bottom_menu/BottomMenuModeSelection.tsx
index b0720c3770cf..c04ca3b920fb 100644
--- a/ui/desktop/src/components/bottom_menu/BottomMenuModeSelection.tsx
+++ b/ui/desktop/src/components/bottom_menu/BottomMenuModeSelection.tsx
@@ -58,7 +58,7 @@ export const BottomMenuModeSelection = () => {
     <div title={`Current mode: ${getValueByKey(gooseMode)} - ${getModeDescription(gooseMode)}`}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <span className="flex items-center cursor-pointer [&_svg]:size-4 text-text-default/70 hover:text-text-default hover:scale-100 hover:bg-transparent text-xs">
+          <span className="flex items-center cursor-pointer [&_svg]:size-4 text-text-primary/70 hover:text-text-primary hover:scale-100 hover:bg-transparent text-xs">
             <Tornado className="mr-1 h-4 w-4" />
             {getValueByKey(gooseMode).toLowerCase()}
           </span>
diff --git a/ui/desktop/src/components/bottom_menu/CostTracker.tsx b/ui/desktop/src/components/bottom_menu/CostTracker.tsx
index 1f1cfd16e43f..acb039bacb85 100644
--- a/ui/desktop/src/components/bottom_menu/CostTracker.tsx
+++ b/ui/desktop/src/components/bottom_menu/CostTracker.tsx
@@ -126,10 +126,10 @@ export function CostTracker({ inputTokens = 0, outputTokens = 0, sessionCosts }:
   if (isLoading) {
     return (
       <>
-        <div className="flex items-center justify-center h-full text-text-muted translate-y-[1px]">
+        <div className="flex items-center justify-center h-full text-text-secondary translate-y-[1px]">
           <span className="text-xs font-mono">...</span>
         </div>
-        <div className="w-px h-4 bg-border-default mx-2" />
+        <div className="w-px h-4 bg-border-primary mx-2" />
       </>
     );
   }
@@ -143,12 +143,12 @@ export function CostTracker({ inputTokens = 0, outputTokens = 0, sessionCosts }:
     if (freeProviders.includes(currentProvider.toLowerCase())) {
       return (
         <>
-          <div className="flex items-center justify-center h-full text-text-default/70 transition-colors cursor-default translate-y-[1px]">
+          <div className="flex items-center justify-center h-full text-text-primary/70 transition-colors cursor-default translate-y-[1px]">
             <span className="text-xs font-mono">
               {inputTokens.toLocaleString()}↑ {outputTokens.toLocaleString()}↓
             </span>
           </div>
-          <div className="w-px h-4 bg-border-default mx-2" />
+          <div className="w-px h-4 bg-border-primary mx-2" />
         </>
       );
     }
@@ -165,14 +165,14 @@ export function CostTracker({ inputTokens = 0, outputTokens = 0, sessionCosts }:
       <>
         <Tooltip>
           <TooltipTrigger asChild>
-            <div className="flex items-center justify-center h-full transition-colors cursor-default translate-y-[1px] text-text-default/70 hover:text-text-default">
+            <div className="flex items-center justify-center h-full transition-colors cursor-default translate-y-[1px] text-text-primary/70 hover:text-text-primary">
               <CoinIcon className="mr-1" size={16} />
               <span className="text-xs font-mono">0.0000</span>
             </div>
           </TooltipTrigger>
           <TooltipContent>{getUnavailableTooltip()}</TooltipContent>
         </Tooltip>
-        <div className="w-px h-4 bg-border-default mx-2" />
+        <div className="w-px h-4 bg-border-primary mx-2" />
       </>
     );
   }
@@ -219,14 +219,14 @@ export function CostTracker({ inputTokens = 0, outputTokens = 0, sessionCosts }:
     <>
       <Tooltip>
         <TooltipTrigger asChild>
-          <div className="flex items-center justify-center h-full transition-colors cursor-default translate-y-[1px] text-text-default/70 hover:text-text-default">
+          <div className="flex items-center justify-center h-full transition-colors cursor-default translate-y-[1px] text-text-primary/70 hover:text-text-primary">
             <CoinIcon className="mr-1" size={16} />
             <span className="text-xs font-mono">{formatCost(totalCost)}</span>
           </div>
         </TooltipTrigger>
         <TooltipContent>{getTooltipContent()}</TooltipContent>
       </Tooltip>
-      <div className="w-px h-4 bg-border-default mx-2" />
+      <div className="w-px h-4 bg-border-primary mx-2" />
     </>
   );
 }
diff --git a/ui/desktop/src/components/bottom_menu/DirSwitcher.tsx b/ui/desktop/src/components/bottom_menu/DirSwitcher.tsx
index 26c8dc399eae..5269f11eb2cf 100644
--- a/ui/desktop/src/components/bottom_menu/DirSwitcher.tsx
+++ b/ui/desktop/src/components/bottom_menu/DirSwitcher.tsx
@@ -89,7 +89,7 @@ export const DirSwitcher: React.FC<DirSwitcherProps> = ({
       >
         <TooltipTrigger asChild>
           <button
-            className={`z-[100] ${isDirectoryChooserOpen ? 'opacity-50' : 'hover:cursor-pointer hover:text-text-default'} text-text-default/70 text-xs flex items-center transition-colors pl-1 [&>svg]:size-4 ${className}`}
+            className={`z-[100] ${isDirectoryChooserOpen ? 'opacity-50' : 'hover:cursor-pointer hover:text-text-primary'} text-text-primary/70 text-xs flex items-center transition-colors pl-1 [&>svg]:size-4 ${className}`}
             onClick={handleDirectoryClick}
             disabled={isDirectoryChooserOpen}
           >
diff --git a/ui/desktop/src/components/common/InlineEditText.tsx b/ui/desktop/src/components/common/InlineEditText.tsx
index e7ffc242e873..5dc7cb30b270 100644
--- a/ui/desktop/src/components/common/InlineEditText.tsx
+++ b/ui/desktop/src/components/common/InlineEditText.tsx
@@ -153,7 +153,7 @@ export const InlineEditText: React.FC<InlineEditTextProps> = ({
         disabled={isSaving}
         className={`
           w-full px-2 py-1 border rounded
-          bg-background-default text-text-standard
+          bg-background-primary text-text-standard
           border-blue-500 ring-2 ring-blue-500/20
           focus:outline-none focus:ring-2 focus:ring-blue-500/40
           disabled:opacity-50 disabled:cursor-not-allowed
diff --git a/ui/desktop/src/components/conversation/SearchBar.tsx b/ui/desktop/src/components/conversation/SearchBar.tsx
index ea67fcbb2163..0b45274b48d2 100644
--- a/ui/desktop/src/components/conversation/SearchBar.tsx
+++ b/ui/desktop/src/components/conversation/SearchBar.tsx
@@ -164,7 +164,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
               placeholder={placeholder}
               className="no-drag w-full text-sm pl-9 pr-24 py-3 bg-background-inverse text-text-inverse
                       placeholder:text-text-inverse/50 focus:outline-none 
-                       active:border-border-strong"
+                       active:border-border-secondary"
             />
           </div>
 
diff --git a/ui/desktop/src/components/extensions/ExtensionsView.tsx b/ui/desktop/src/components/extensions/ExtensionsView.tsx
index 061330a29ee0..d7ccddbaebe3 100644
--- a/ui/desktop/src/components/extensions/ExtensionsView.tsx
+++ b/ui/desktop/src/components/extensions/ExtensionsView.tsx
@@ -95,17 +95,17 @@ export default function ExtensionsView({
         className="flex flex-col min-w-0 flex-1 overflow-y-auto relative"
         data-search-scroll-area
       >
-        <div className="bg-background-default px-8 pb-4 pt-16">
+        <div className="bg-background-primary px-8 pb-4 pt-16">
           <div className="flex flex-col page-transition">
             <div className="flex justify-between items-center mb-1">
               <h1 className="text-4xl font-light">Extensions</h1>
             </div>
-            <p className="text-sm text-text-muted mb-2">
+            <p className="text-sm text-text-secondary mb-2">
               These extensions use the Model Context Protocol (MCP). They can expand Goose's
               capabilities using three main components: Prompts, Resources, and Tools.{' '}
               {getSearchShortcutText()} to search.
             </p>
-            <p className="text-sm text-text-muted mb-6">
+            <p className="text-sm text-text-secondary mb-6">
               Extensions enabled here are used as the default for new chats. You can also toggle
               active extensions during chat.
             </p>
diff --git a/ui/desktop/src/components/parameter/ParameterInput.tsx b/ui/desktop/src/components/parameter/ParameterInput.tsx
index 7533528b877d..ad9055aa861a 100644
--- a/ui/desktop/src/components/parameter/ParameterInput.tsx
+++ b/ui/desktop/src/components/parameter/ParameterInput.tsx
@@ -30,33 +30,33 @@ const ParameterInput: React.FC<ParameterInputProps> = ({
   };
 
   return (
-    <div className="parameter-input my-4 border rounded-lg bg-background-muted shadow-sm relative">
+    <div className="parameter-input my-4 border rounded-lg bg-background-secondary shadow-sm relative">
       {/* Collapsed header - always visible */}
       <div
-        className={`flex items-center justify-between p-4 ${onToggleExpanded ? 'cursor-pointer hover:bg-background-default/50' : ''} transition-colors`}
+        className={`flex items-center justify-between p-4 ${onToggleExpanded ? 'cursor-pointer hover:bg-background-primary/50' : ''} transition-colors`}
         onClick={handleToggleExpanded}
       >
         <div className="flex items-center gap-2 flex-1">
           {onToggleExpanded && (
             <button
               type="button"
-              className="p-1 hover:bg-background-default rounded transition-colors"
+              className="p-1 hover:bg-background-primary rounded transition-colors"
               onClick={(e) => {
                 e.stopPropagation();
                 onToggleExpanded(key);
               }}
             >
               {isExpanded ? (
-                <ChevronDown className="w-4 h-4 text-text-muted" />
+                <ChevronDown className="w-4 h-4 text-text-secondary" />
               ) : (
-                <ChevronRight className="w-4 h-4 text-text-muted" />
+                <ChevronRight className="w-4 h-4 text-text-secondary" />
               )}
             </button>
           )}
 
           <div className="flex items-center gap-2">
-            <span className="text-md font-bold text-text-default">
-              <code className="bg-background-default px-2 py-1 rounded-md">{parameter.key}</code>
+            <span className="text-md font-bold text-text-primary">
+              <code className="bg-background-primary px-2 py-1 rounded-md">{parameter.key}</code>
             </span>
             {isUnused && (
               <div
@@ -87,20 +87,20 @@ const ParameterInput: React.FC<ParameterInputProps> = ({
 
       {/* Expandable content - only shown when expanded */}
       {isExpanded && (
-        <div className="px-4 pb-4 border-t border-border-default">
+        <div className="px-4 pb-4 border-t border-border-primary">
           <div className="pt-4">
             <div className="mb-4">
-              <label className="block text-md text-text-default mb-2 font-semibold">
+              <label className="block text-md text-text-primary mb-2 font-semibold">
                 description
               </label>
               <input
                 type="text"
                 value={description || ''}
                 onChange={(e) => onChange(key, { description: e.target.value })}
-                className="w-full p-3 border rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-border-strong"
+                className="w-full p-3 border rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-border-secondary"
                 placeholder={`E.g., "Enter the name for the new component"`}
               />
-              <p className="text-sm text-text-muted mt-1">
+              <p className="text-sm text-text-secondary mt-1">
                 This is the message the end-user will see.
               </p>
             </div>
@@ -108,11 +108,11 @@ const ParameterInput: React.FC<ParameterInputProps> = ({
             {/* Controls for requirement, input type, and default value */}
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
               <div>
-                <label className="block text-md text-text-default mb-2 font-semibold">
+                <label className="block text-md text-text-primary mb-2 font-semibold">
                   Input Type
                 </label>
                 <select
-                  className="w-full p-3 border rounded-lg bg-background-default text-text-default"
+                  className="w-full p-3 border rounded-lg bg-background-primary text-text-primary"
                   value={parameter.input_type || 'string'}
                   onChange={(e) =>
                     onChange(key, { input_type: e.target.value as Parameter['input_type'] })
@@ -126,11 +126,11 @@ const ParameterInput: React.FC<ParameterInputProps> = ({
               </div>
 
               <div>
-                <label className="block text-md text-text-default mb-2 font-semibold">
+                <label className="block text-md text-text-primary mb-2 font-semibold">
                   Requirement
                 </label>
                 <select
-                  className="w-full p-3 border rounded-lg bg-background-default text-text-default"
+                  className="w-full p-3 border rounded-lg bg-background-primary text-text-primary"
                   value={requirement}
                   onChange={(e) =>
                     onChange(key, { requirement: e.target.value as Parameter['requirement'] })
@@ -144,14 +144,14 @@ const ParameterInput: React.FC<ParameterInputProps> = ({
               {/* The default value input is only shown for optional parameters */}
               {requirement === 'optional' && (
                 <div>
-                  <label className="block text-md text-text-default mb-2 font-semibold">
+                  <label className="block text-md text-text-primary mb-2 font-semibold">
                     Default Value
                   </label>
                   <input
                     type="text"
                     value={defaultValue}
                     onChange={(e) => onChange(key, { default: e.target.value })}
-                    className="w-full p-3 border rounded-lg bg-background-default text-text-default"
+                    className="w-full p-3 border rounded-lg bg-background-primary text-text-primary"
                     placeholder="Enter default value"
                   />
                 </div>
@@ -161,7 +161,7 @@ const ParameterInput: React.FC<ParameterInputProps> = ({
             {/* Options field for select input type */}
             {parameter.input_type === 'select' && (
               <div className="mt-4">
-                <label className="block text-md text-text-default mb-2 font-semibold">
+                <label className="block text-md text-text-primary mb-2 font-semibold">
                   Options (one per line)
                 </label>
                 <textarea
@@ -177,11 +177,11 @@ const ParameterInput: React.FC<ParameterInputProps> = ({
                       e.stopPropagation();
                     }
                   }}
-                  className="w-full p-3 border rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-border-strong"
+                  className="w-full p-3 border rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-border-secondary"
                   placeholder="Option 1&#10;Option 2&#10;Option 3"
                   rows={4}
                 />
-                <p className="text-sm text-text-muted mt-1">
+                <p className="text-sm text-text-secondary mt-1">
                   Enter each option on a new line. These will be shown as dropdown choices.
                 </p>
               </div>
diff --git a/ui/desktop/src/components/recipes/CreateEditRecipeModal.tsx b/ui/desktop/src/components/recipes/CreateEditRecipeModal.tsx
index 695deba12c32..2ef546bdeb19 100644
--- a/ui/desktop/src/components/recipes/CreateEditRecipeModal.tsx
+++ b/ui/desktop/src/components/recipes/CreateEditRecipeModal.tsx
@@ -355,18 +355,18 @@ export default function CreateEditRecipeModal({
 
   return (
     <div className="fixed inset-0 z-[400] flex items-center justify-center bg-black/50">
-      <div className="bg-background-default border border-border-default rounded-lg w-[90vw] max-w-4xl h-[90vh] flex flex-col">
+      <div className="bg-background-primary border border-border-primary rounded-lg w-[90vw] max-w-4xl h-[90vh] flex flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-border-default">
+        <div className="flex items-center justify-between p-6 border-b border-border-primary">
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 bg-background-default rounded-full flex items-center justify-center">
+            <div className="w-8 h-8 bg-background-primary rounded-full flex items-center justify-center">
               <Geese className="w-6 h-6 text-iconProminent" />
             </div>
             <div>
-              <h1 className="text-xl font-medium text-text-default">
+              <h1 className="text-xl font-medium text-text-primary">
                 {isCreateMode ? 'Create Recipe' : 'View/edit recipe'}
               </h1>
-              <p className="text-text-muted text-sm">
+              <p className="text-text-secondary text-sm">
                 {isCreateMode
                   ? 'Create a new recipe to define agent behavior and capabilities for reusable chat sessions.'
                   : "You can edit the recipe below to change the agent's behavior in a new session."}{' '}
@@ -386,7 +386,7 @@ export default function CreateEditRecipeModal({
             onClick={() => onClose(false)}
             variant="ghost"
             size="sm"
-            className="p-2 hover:bg-background-muted rounded-lg transition-colors"
+            className="p-2 hover:bg-background-secondary rounded-lg transition-colors"
           >
             <X className="w-5 h-5" />
           </Button>
@@ -398,9 +398,9 @@ export default function CreateEditRecipeModal({
 
           {/* Deep Link Display */}
           {requiredFieldsAreFilled() && (
-            <div className="w-full p-4 bg-background-muted rounded-lg mt-6">
+            <div className="w-full p-4 bg-background-secondary rounded-lg mt-6">
               <div className="flex items-center justify-between mb-2">
-                <div className="text-sm text-text-muted">
+                <div className="text-sm text-text-secondary">
                   Copy this link to share with friends or paste directly in Chrome to open
                 </div>
                 <Button
@@ -410,21 +410,21 @@ export default function CreateEditRecipeModal({
                   disabled={
                     !deeplink || isGeneratingDeeplink || deeplink === 'Error generating deeplink'
                   }
-                  className="ml-4 p-2 hover:bg-background-default rounded-lg transition-colors flex items-center disabled:opacity-50 disabled:hover:bg-transparent"
+                  className="ml-4 p-2 hover:bg-background-primary rounded-lg transition-colors flex items-center disabled:opacity-50 disabled:hover:bg-transparent"
                 >
                   {copied ? (
                     <Check className="w-4 h-4 text-green-500" />
                   ) : (
                     <Copy className="w-4 h-4 text-iconSubtle" />
                   )}
-                  <span className="ml-1 text-sm text-text-muted">
+                  <span className="ml-1 text-sm text-text-secondary">
                     {copied ? 'Copied!' : 'Copy'}
                   </span>
                 </Button>
               </div>
               <div
                 onClick={handleCopy}
-                className="text-sm truncate font-mono cursor-pointer text-text-default"
+                className="text-sm truncate font-mono cursor-pointer text-text-primary"
               >
                 {isGeneratingDeeplink
                   ? 'Generating deeplink...'
@@ -435,11 +435,11 @@ export default function CreateEditRecipeModal({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between p-6 border-t border-border-default">
+        <div className="flex items-center justify-between p-6 border-t border-border-primary">
           <Button
             onClick={() => onClose(false)}
             variant="ghost"
-            className="px-4 py-2 text-text-muted rounded-lg hover:bg-background-muted transition-colors"
+            className="px-4 py-2 text-text-secondary rounded-lg hover:bg-background-secondary transition-colors"
           >
             Close
           </Button>
diff --git a/ui/desktop/src/components/recipes/CreateRecipeFromSessionModal.tsx b/ui/desktop/src/components/recipes/CreateRecipeFromSessionModal.tsx
index 4151427c8806..a2c9326f5707 100644
--- a/ui/desktop/src/components/recipes/CreateRecipeFromSessionModal.tsx
+++ b/ui/desktop/src/components/recipes/CreateRecipeFromSessionModal.tsx
@@ -211,19 +211,19 @@ export default function CreateRecipeFromSessionModal({
       className="fixed inset-0 z-[400] flex items-center justify-center bg-black/50 p-4"
       data-testid="create-recipe-modal"
     >
-      <div className="bg-background-default border border-border-default rounded-lg w-full max-w-4xl h-full max-h-[90vh] flex flex-col shadow-xl">
+      <div className="bg-background-primary border border-border-primary rounded-lg w-full max-w-4xl h-full max-h-[90vh] flex flex-col shadow-xl">
         {/* Header */}
         <div
-          className="flex items-center justify-between p-6 border-b border-border-default shrink-0"
+          className="flex items-center justify-between p-6 border-b border-border-primary shrink-0"
           data-testid="modal-header"
         >
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 bg-background-default rounded-full flex items-center justify-center">
+            <div className="w-8 h-8 bg-background-primary rounded-full flex items-center justify-center">
               <Geese className="w-6 h-6 text-iconProminent" />
             </div>
             <div>
-              <h1 className="text-xl font-medium text-text-default">Create Recipe from Session</h1>
-              <p className="text-text-muted text-sm">
+              <h1 className="text-xl font-medium text-text-primary">Create Recipe from Session</h1>
+              <p className="text-text-secondary text-sm">
                 Create a reusable recipe based on your current conversation.
               </p>
             </div>
@@ -232,7 +232,7 @@ export default function CreateRecipeFromSessionModal({
             onClick={onClose}
             variant="ghost"
             size="sm"
-            className="p-2 hover:bg-background-muted rounded-lg transition-colors"
+            className="p-2 hover:bg-background-secondary rounded-lg transition-colors"
             data-testid="close-button"
           >
             <X className="w-5 h-5" />
@@ -252,16 +252,16 @@ export default function CreateRecipeFromSessionModal({
                   data-testid="analysis-spinner"
                 />
                 <div
-                  className="text-lg font-medium text-text-default"
+                  className="text-lg font-medium text-text-primary"
                   data-testid="analyzing-title"
                 >
                   Analyzing your conversation
                 </div>
               </div>
-              <div className="text-text-muted text-center max-w-md" data-testid="analysis-stage">
+              <div className="text-text-secondary text-center max-w-md" data-testid="analysis-stage">
                 {analysisStage}
               </div>
-              <div className="flex items-center space-x-2 text-text-muted">
+              <div className="flex items-center space-x-2 text-text-secondary">
                 <Geese className="w-5 h-5 animate-pulse" />
                 <span className="text-sm">Extracting insights from your chat</span>
               </div>
@@ -275,13 +275,13 @@ export default function CreateRecipeFromSessionModal({
 
         {/* Footer */}
         <div
-          className="flex items-center justify-between p-6 border-t border-border-default shrink-0"
+          className="flex items-center justify-between p-6 border-t border-border-primary shrink-0"
           data-testid="modal-footer"
         >
           <Button
             onClick={onClose}
             variant="ghost"
-            className="px-4 py-2 text-text-muted rounded-lg hover:bg-background-muted transition-colors"
+            className="px-4 py-2 text-text-secondary rounded-lg hover:bg-background-secondary transition-colors"
             data-testid="cancel-button"
           >
             Cancel
@@ -296,7 +296,7 @@ export default function CreateRecipeFromSessionModal({
                   }}
                   disabled={!isFormValid || isCreating}
                   variant="outline"
-                  className="px-4 py-2 border border-border-default rounded-lg hover:bg-background-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-4 py-2 border border-border-primary rounded-lg hover:bg-background-secondary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                   data-testid="create-recipe-button"
                 >
                   <Save className="w-4 h-4 mr-2" />
@@ -307,7 +307,7 @@ export default function CreateRecipeFromSessionModal({
                     handleCreateRecipe(form.state.values, true);
                   }}
                   disabled={!isFormValid || isCreating}
-                  className="px-4 py-2 text-text-on-accent rounded-lg hover:bg-opacity-90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-4 py-2 text-text-inverse rounded-lg hover:bg-opacity-90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                   data-testid="create-and-run-recipe-button"
                 >
                   <Play className="w-4 h-4 mr-2" />
diff --git a/ui/desktop/src/components/recipes/ImportRecipeForm.tsx b/ui/desktop/src/components/recipes/ImportRecipeForm.tsx
index 011a71811e5f..adf698d8ac00 100644
--- a/ui/desktop/src/components/recipes/ImportRecipeForm.tsx
+++ b/ui/desktop/src/components/recipes/ImportRecipeForm.tsx
@@ -146,8 +146,8 @@ export default function ImportRecipeForm({ isOpen, onClose, onSuccess }: ImportR
   return (
     <>
       <div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/50">
-        <div className="bg-background-default border border-border-default rounded-lg p-6 w-[500px] max-w-[90vw]">
-          <h3 className="text-lg font-medium text-text-default mb-4">Import Recipe</h3>
+        <div className="bg-background-primary border border-border-primary rounded-lg p-6 w-[500px] max-w-[90vw]">
+          <h3 className="text-lg font-medium text-text-primary mb-4">Import Recipe</h3>
 
           <form
             onSubmit={(e) => {
@@ -168,7 +168,7 @@ export default function ImportRecipeForm({ isOpen, onClose, onSuccess }: ImportR
                           <div className={isDisabled ? 'opacity-50' : ''}>
                             <label
                               htmlFor="import-deeplink"
-                              className="block text-sm font-medium text-text-default mb-2"
+                              className="block text-sm font-medium text-text-primary mb-2"
                             >
                               Recipe Deeplink
                             </label>
@@ -178,17 +178,17 @@ export default function ImportRecipeForm({ isOpen, onClose, onSuccess }: ImportR
                               onChange={(e) => handleDeeplinkChange(e.target.value, field)}
                               onBlur={field.handleBlur}
                               disabled={isDisabled}
-                              className={`w-full p-3 border rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none ${
+                              className={`w-full p-3 border rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none ${
                                 field.state.meta.errors.length > 0
                                   ? 'border-red-500'
-                                  : 'border-border-default'
+                                  : 'border-border-primary'
                               } ${isDisabled ? 'cursor-not-allowed bg-gray-40 text-gray-300' : ''}`}
                               placeholder="Paste your goose://recipe?config=... deeplink here"
                               rows={3}
                               autoFocus={!isDisabled}
                             />
                             <p
-                              className={`text-xs mt-1 ${isDisabled ? 'text-gray-300' : 'text-text-muted'}`}
+                              className={`text-xs mt-1 ${isDisabled ? 'text-gray-300' : 'text-text-secondary'}`}
                             >
                               Paste a recipe deeplink starting with "goose://recipe?config="
                             </p>
@@ -207,10 +207,10 @@ export default function ImportRecipeForm({ isOpen, onClose, onSuccess }: ImportR
 
                     <div className="relative">
                       <div className="absolute inset-0 flex items-center">
-                        <div className="w-full border-t border-border-default" />
+                        <div className="w-full border-t border-border-primary" />
                       </div>
                       <div className="relative flex justify-center text-sm">
-                        <span className="px-3 bg-background-default text-text-muted font-medium">
+                        <span className="px-3 bg-background-primary text-text-secondary font-medium">
                           OR
                         </span>
                       </div>
@@ -225,7 +225,7 @@ export default function ImportRecipeForm({ isOpen, onClose, onSuccess }: ImportR
                           <div className={isDisabled ? 'opacity-50' : ''}>
                             <label
                               htmlFor="import-recipe-file"
-                              className="block text-sm font-medium text-text-default mb-3"
+                              className="block text-sm font-medium text-text-primary mb-3"
                             >
                               Recipe File
                             </label>
@@ -246,7 +246,7 @@ export default function ImportRecipeForm({ isOpen, onClose, onSuccess }: ImportR
                             </div>
                             <div className="flex items-center justify-between">
                               <p
-                                className={`text-xs mt-1 ${isDisabled ? 'text-gray-300' : 'text-text-muted'}`}
+                                className={`text-xs mt-1 ${isDisabled ? 'text-gray-300' : 'text-text-secondary'}`}
                               >
                                 Upload a YAML or JSON file containing the recipe structure
                               </p>
@@ -275,7 +275,7 @@ export default function ImportRecipeForm({ isOpen, onClose, onSuccess }: ImportR
                 )}
               </importRecipeForm.Subscribe>
 
-              <p className="text-xs text-text-muted">
+              <p className="text-xs text-text-secondary">
                 Ensure you review contents of recipe files before adding them to your goose
                 interface.
               </p>
@@ -306,13 +306,13 @@ export default function ImportRecipeForm({ isOpen, onClose, onSuccess }: ImportR
       {/* Schema Modal */}
       {showSchemaModal && (
         <div className="fixed inset-0 z-[400] flex items-center justify-center bg-black/50">
-          <div className="bg-background-default border border-border-default rounded-lg p-6 w-[800px] max-w-[90vw] max-h-[80vh] flex flex-col">
+          <div className="bg-background-primary border border-border-primary rounded-lg p-6 w-[800px] max-w-[90vw] max-h-[80vh] flex flex-col">
             <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-medium text-text-default">Expected Recipe Structure</h3>
+              <h3 className="text-lg font-medium text-text-primary">Expected Recipe Structure</h3>
               <button
                 type="button"
                 onClick={() => setShowSchemaModal(false)}
-                className="text-text-muted hover:text-text-default"
+                className="text-text-secondary hover:text-text-primary"
               >
                 ✕
               </button>
diff --git a/ui/desktop/src/components/recipes/RecipeActivities.tsx b/ui/desktop/src/components/recipes/RecipeActivities.tsx
index b053e38b97b0..111fcbb708ce 100644
--- a/ui/desktop/src/components/recipes/RecipeActivities.tsx
+++ b/ui/desktop/src/components/recipes/RecipeActivities.tsx
@@ -56,7 +56,7 @@ export default function RecipeActivities({
                 key={index}
                 onClick={() => append(substitutedContent)}
                 title={substitutedContent.length > 60 ? substitutedContent : undefined}
-                className="cursor-pointer px-3 py-1.5 text-sm hover:bg-background-muted transition-colors"
+                className="cursor-pointer px-3 py-1.5 text-sm hover:bg-background-secondary transition-colors"
               >
                 {substitutedContent.length > 60
                   ? substitutedContent.slice(0, 60) + '...'
diff --git a/ui/desktop/src/components/recipes/RecipeActivityEditor.tsx b/ui/desktop/src/components/recipes/RecipeActivityEditor.tsx
index 85a5dead3f83..4cbc65238af6 100644
--- a/ui/desktop/src/components/recipes/RecipeActivityEditor.tsx
+++ b/ui/desktop/src/components/recipes/RecipeActivityEditor.tsx
@@ -60,19 +60,19 @@ export default function RecipeActivityEditor({
 
   return (
     <div>
-      <label htmlFor="activities" className="block text-md text-text-default mb-2 font-bold">
+      <label htmlFor="activities" className="block text-md text-text-primary mb-2 font-bold">
         Activities
       </label>
-      <p className="text-sm text-text-muted space-y-2 pb-4">
+      <p className="text-sm text-text-secondary space-y-2 pb-4">
         The top-line prompts and activity buttons that will display in the recipe chat window.
       </p>
 
       {/* Message Field */}
       <div>
-        <label htmlFor="message" className="block text-sm font-medium text-text-default mb-2">
+        <label htmlFor="message" className="block text-sm font-medium text-text-primary mb-2">
           Message
         </label>
-        <p className="text-xs text-text-muted mb-2">
+        <p className="text-xs text-text-secondary mb-2">
           A formatted message that will appear at the top of the recipe. Supports markdown
           formatting.
         </p>
@@ -81,7 +81,7 @@ export default function RecipeActivityEditor({
           value={messageContent}
           onChange={(e) => handleMessageChange(e.target.value)}
           onBlur={onBlur}
-          className="w-full px-4 py-3 border rounded-lg bg-background-default text-text-default placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-border-strong resize-vertical"
+          className="w-full px-4 py-3 border rounded-lg bg-background-primary text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-border-secondary resize-vertical"
           placeholder="Enter a user facing introduction message for your recipe (supports **bold**, *italic*, `code`, etc.)"
           rows={3}
           autoCorrect="off"
@@ -93,10 +93,10 @@ export default function RecipeActivityEditor({
       {/* Regular Activities */}
       <div className="space-y-4">
         <div>
-          <label className="block text-sm font-medium text-text-default mb-2">
+          <label className="block text-sm font-medium text-text-primary mb-2">
             Activity Buttons
           </label>
-          <p className="text-xs text-text-muted mb-3">
+          <p className="text-xs text-text-secondary mb-3">
             Clickable buttons that will appear below the message to help users interact with your
             recipe.
           </p>
@@ -107,7 +107,7 @@ export default function RecipeActivityEditor({
             {nonMessageActivities.map((activity, index) => (
               <div
                 key={index}
-                className="inline-flex items-center bg-background-default border-2 border-border-default rounded-full px-4 py-2 text-sm text-text-default"
+                className="inline-flex items-center bg-background-primary border-2 border-border-primary rounded-full px-4 py-2 text-sm text-text-primary"
                 title={activity.length > 100 ? activity : undefined}
               >
                 <span>{activity.length > 100 ? activity.slice(0, 100) + '...' : activity}</span>
@@ -116,7 +116,7 @@ export default function RecipeActivityEditor({
                   onClick={() => handleRemoveActivity(activity)}
                   variant="ghost"
                   size="sm"
-                  className="ml-2 text-text-default hover:text-text-muted transition-colors p-0 h-auto"
+                  className="ml-2 text-text-primary hover:text-text-secondary transition-colors p-0 h-auto"
                 >
                   ×
                 </Button>
@@ -131,7 +131,7 @@ export default function RecipeActivityEditor({
             onChange={(e) => setNewActivity(e.target.value)}
             onKeyPress={(e) => e.key === 'Enter' && handleAddActivity()}
             onBlur={onBlur}
-            className="flex-1 px-3 py-2 border border-border-default rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+            className="flex-1 px-3 py-2 border border-border-primary rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
             placeholder="Add new activity..."
           />
           <button
diff --git a/ui/desktop/src/components/recipes/RecipeExpandableInfo.tsx b/ui/desktop/src/components/recipes/RecipeExpandableInfo.tsx
index 7566a6c119c2..7399052007c9 100644
--- a/ui/desktop/src/components/recipes/RecipeExpandableInfo.tsx
+++ b/ui/desktop/src/components/recipes/RecipeExpandableInfo.tsx
@@ -34,12 +34,12 @@ export default function RecipeExpandableInfo({
   return (
     <>
       <div className="flex justify-between items-center mb-2">
-        <label className="block text-md text-text-default font-bold">
+        <label className="block text-md text-text-primary font-bold">
           {infoLabel} {required && <span className="text-red-500">*</span>}
         </label>
       </div>
 
-      <div className="relative rounded-lg bg-background-default text-text-default">
+      <div className="relative rounded-lg bg-background-primary text-text-primary">
         {infoValue && (
           <>
             <div
@@ -81,7 +81,7 @@ export default function RecipeExpandableInfo({
               onClick={() => setValueExpanded(!isValueExpanded)}
               aria-label={isValueExpanded ? 'Collapse content' : 'Expand content'}
               title={isValueExpanded ? 'Collapse' : 'Expand'}
-              className="bg-background-muted hover:bg-background-default text-text-muted hover:text-text-default transition-colors"
+              className="bg-background-secondary hover:bg-background-primary text-text-secondary hover:text-text-primary transition-colors"
             >
               <ChevronDown
                 className={`w-6 h-6 transition-transform duration-300 ${
diff --git a/ui/desktop/src/components/recipes/RecipeInfoModal.tsx b/ui/desktop/src/components/recipes/RecipeInfoModal.tsx
index 544c3c7a7edb..48516c205e36 100644
--- a/ui/desktop/src/components/recipes/RecipeInfoModal.tsx
+++ b/ui/desktop/src/components/recipes/RecipeInfoModal.tsx
@@ -34,14 +34,14 @@ export default function RecipeInfoModal({
   if (!isOpen) return null;
   return (
     <div className="fixed inset-0 bg-black/20 dark:bg-white/20 backdrop-blur-sm transition-colors animate-[fadein_200ms_ease-in_forwards] z-[1000]">
-      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col min-w-[80%] min-h-[80%] bg-background-default rounded-xl overflow-hidden shadow-lg px-8 pt-[24px] pb-0">
+      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col min-w-[80%] min-h-[80%] bg-background-primary rounded-xl overflow-hidden shadow-lg px-8 pt-[24px] pb-0">
         <div className="flex mb-6">
-          <h2 className="text-xl font-semibold text-text-default">Edit {infoLabel}</h2>
+          <h2 className="text-xl font-semibold text-text-primary">Edit {infoLabel}</h2>
         </div>
         <div className="flex flex-col flex-grow overflow-y-auto space-y-8">
           <textarea
             ref={textareaRef}
-            className="w-full flex-grow resize-none min-h-[300px] max-h-[calc(100vh-300px)] border border-border-default rounded-lg p-3 text-text-default bg-background-default focus:outline-none focus:ring-1 focus:ring-border-strong focus:border-border-strong"
+            className="w-full flex-grow resize-none min-h-[300px] max-h-[calc(100vh-300px)] border border-border-primary rounded-lg p-3 text-text-primary bg-background-primary focus:outline-none focus:ring-1 focus:ring-border-secondary focus:border-border-secondary"
             value={value}
             onChange={(e) => setValue(e.target.value)}
             placeholder={`Enter ${infoLabel.toLowerCase()}...`}
@@ -49,14 +49,14 @@ export default function RecipeInfoModal({
         </div>
         <Button
           onClick={onSave}
-          className="w-full h-[60px] rounded-none border-b border-border-default bg-transparent hover:bg-background-muted text-text-default font-medium text-md"
+          className="w-full h-[60px] rounded-none border-b border-border-primary bg-transparent hover:bg-background-secondary text-text-primary font-medium text-md"
         >
           Save Changes
         </Button>
         <Button
           onClick={onClose}
           variant="ghost"
-          className="w-full h-[60px] rounded-none hover:bg-background-muted text-text-muted hover:text-text-default text-md font-regular"
+          className="w-full h-[60px] rounded-none hover:bg-background-secondary text-text-secondary hover:text-text-primary text-md font-regular"
         >
           Cancel
         </Button>
diff --git a/ui/desktop/src/components/recipes/RecipesView.tsx b/ui/desktop/src/components/recipes/RecipesView.tsx
index 7773dd92f498..440433da93d2 100644
--- a/ui/desktop/src/components/recipes/RecipesView.tsx
+++ b/ui/desktop/src/components/recipes/RecipesView.tsx
@@ -460,14 +460,14 @@ export default function RecipesView() {
   }: {
     recipeManifestResponse: RecipeManifest;
   }) => (
-    <Card className="py-2 px-4 mb-2 bg-background-default border-none hover:bg-background-muted transition-all duration-150">
+    <Card className="py-2 px-4 mb-2 bg-background-primary border-none hover:bg-background-secondary transition-all duration-150">
       <div className="flex justify-between items-start gap-4">
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2 mb-1">
             <h3 className="text-base truncate max-w-[50vw]">{recipe.title}</h3>
           </div>
-          <p className="text-text-muted text-sm mb-2 line-clamp-2">{recipe.description}</p>
-          <div className="flex flex-col gap-1 text-xs text-text-muted">
+          <p className="text-text-secondary text-sm mb-2 line-clamp-2">{recipe.description}</p>
+          <div className="flex flex-col gap-1 text-xs text-text-secondary">
             <div className="flex items-center">
               <Calendar className="w-3 h-3 mr-1" />
               {convertToLocaleDateString(lastModified)}
@@ -597,7 +597,7 @@ export default function RecipesView() {
   );
 
   const RecipeSkeleton = () => (
-    <Card className="p-2 mb-2 bg-background-default">
+    <Card className="p-2 mb-2 bg-background-primary">
       <div className="flex justify-between items-start gap-4">
         <div className="min-w-0 flex-1">
           <Skeleton className="h-5 w-3/4 mb-2" />
@@ -633,7 +633,7 @@ export default function RecipesView() {
 
     if (error) {
       return (
-        <div className="flex flex-col items-center justify-center h-full text-text-muted">
+        <div className="flex flex-col items-center justify-center h-full text-text-secondary">
           <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
           <p className="text-lg mb-2">Error Loading Recipes</p>
           <p className="text-sm text-center mb-4">{error}</p>
@@ -648,14 +648,14 @@ export default function RecipesView() {
       return (
         <div className="flex flex-col justify-center pt-2 h-full">
           <p className="text-lg">No saved recipes</p>
-          <p className="text-sm text-text-muted">Recipe saved from chats will show up here.</p>
+          <p className="text-sm text-text-secondary">Recipe saved from chats will show up here.</p>
         </div>
       );
     }
 
     if (filteredRecipes.length === 0 && searchTerm) {
       return (
-        <div className="flex flex-col items-center justify-center h-full text-text-muted mt-4">
+        <div className="flex flex-col items-center justify-center h-full text-text-secondary mt-4">
           <FileText className="h-12 w-12 mb-4" />
           <p className="text-lg mb-2">No matching recipes found</p>
           <p className="text-sm">Try adjusting your search terms</p>
@@ -679,7 +679,7 @@ export default function RecipesView() {
     <>
       <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-primary px-8 pb-8 pt-16">
             <div className="flex flex-col page-transition">
               <div className="flex justify-between items-center mb-1">
                 <h1 className="text-4xl font-light">Recipes</h1>
@@ -696,7 +696,7 @@ export default function RecipesView() {
                   <ImportRecipeButton onClick={() => setShowImportDialog(true)} />
                 </div>
               </div>
-              <p className="text-sm text-text-muted mb-1">
+              <p className="text-sm text-text-secondary mb-1">
                 View and manage your saved recipes to quickly start new sessions with predefined
                 configurations. {getSearchShortcutText()} to search.
               </p>
diff --git a/ui/desktop/src/components/recipes/shared/InstructionsEditor.tsx b/ui/desktop/src/components/recipes/shared/InstructionsEditor.tsx
index 80e312196a6b..b2ea6eece134 100644
--- a/ui/desktop/src/components/recipes/shared/InstructionsEditor.tsx
+++ b/ui/desktop/src/components/recipes/shared/InstructionsEditor.tsx
@@ -72,13 +72,13 @@ Use {{parameter_name}} syntax for any user-provided values.`;
         }
       }}
     >
-      <div className="bg-background-default border border-border-default rounded-lg p-6 w-[900px] max-w-[90vw] max-h-[90vh] overflow-hidden flex flex-col">
+      <div className="bg-background-primary border border-border-primary rounded-lg p-6 w-[900px] max-w-[90vw] max-h-[90vh] overflow-hidden flex flex-col">
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-medium text-text-default">Instructions Editor</h3>
+          <h3 className="text-lg font-medium text-text-primary">Instructions Editor</h3>
           <button
             type="button"
             onClick={handleCancel}
-            className="text-text-muted hover:text-text-default text-2xl leading-none"
+            className="text-text-secondary hover:text-text-primary text-2xl leading-none"
           >
             ×
           </button>
@@ -87,7 +87,7 @@ Use {{parameter_name}} syntax for any user-provided values.`;
         <div className="flex-1 flex flex-col min-h-0">
           <div className="mb-4">
             <div className="flex items-center justify-between mb-2">
-              <label className="block text-sm font-medium text-text-default">Instructions</label>
+              <label className="block text-sm font-medium text-text-primary">Instructions</label>
               <Button
                 type="button"
                 onClick={insertExample}
@@ -98,8 +98,8 @@ Use {{parameter_name}} syntax for any user-provided values.`;
                 Insert Example
               </Button>
             </div>
-            <p className="text-xs text-text-muted mb-3">
-              Use <code className="bg-background-muted px-1 rounded">{`{{parameter_name}}`}</code>{' '}
+            <p className="text-xs text-text-secondary mb-3">
+              Use <code className="bg-background-secondary px-1 rounded">{`{{parameter_name}}`}</code>{' '}
               syntax to define parameters that users can fill in
             </p>
           </div>
@@ -108,8 +108,8 @@ Use {{parameter_name}} syntax for any user-provided values.`;
             <textarea
               value={localValue}
               onChange={(e) => setLocalValue(e.target.value)}
-              className={`w-full h-full min-h-[500px] p-3 border rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none font-mono text-sm ${
-                error ? 'border-red-500' : 'border-border-default'
+              className={`w-full h-full min-h-[500px] p-3 border rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none font-mono text-sm ${
+                error ? 'border-red-500' : 'border-border-primary'
               }`}
               placeholder="Detailed instructions for the AI, hidden from the user"
             />
@@ -117,7 +117,7 @@ Use {{parameter_name}} syntax for any user-provided values.`;
           </div>
         </div>
 
-        <div className="flex justify-end space-x-3 mt-6 pt-4 border-t border-border-default">
+        <div className="flex justify-end space-x-3 mt-6 pt-4 border-t border-border-primary">
           <Button type="button" onClick={handleCancel} variant="ghost">
             Cancel
           </Button>
diff --git a/ui/desktop/src/components/recipes/shared/JsonSchemaEditor.tsx b/ui/desktop/src/components/recipes/shared/JsonSchemaEditor.tsx
index 0a24773094fa..b33812e7de81 100644
--- a/ui/desktop/src/components/recipes/shared/JsonSchemaEditor.tsx
+++ b/ui/desktop/src/components/recipes/shared/JsonSchemaEditor.tsx
@@ -92,13 +92,13 @@ export default function JsonSchemaEditor({
         }
       }}
     >
-      <div className="bg-background-default border border-border-default rounded-lg p-6 w-[800px] max-w-[90vw] max-h-[90vh] overflow-hidden flex flex-col">
+      <div className="bg-background-primary border border-border-primary rounded-lg p-6 w-[800px] max-w-[90vw] max-h-[90vh] overflow-hidden flex flex-col">
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-medium text-text-default">JSON Schema Editor</h3>
+          <h3 className="text-lg font-medium text-text-primary">JSON Schema Editor</h3>
           <button
             type="button"
             onClick={handleCancel}
-            className="text-text-muted hover:text-text-default text-2xl leading-none"
+            className="text-text-secondary hover:text-text-primary text-2xl leading-none"
           >
             ×
           </button>
@@ -107,7 +107,7 @@ export default function JsonSchemaEditor({
         <div className="flex-1 flex flex-col min-h-0">
           <div className="mb-4">
             <div className="flex items-center justify-between mb-2">
-              <label className="block text-sm font-medium text-text-default">
+              <label className="block text-sm font-medium text-text-primary">
                 Response JSON Schema
               </label>
               <Button
@@ -120,7 +120,7 @@ export default function JsonSchemaEditor({
                 Insert Example
               </Button>
             </div>
-            <p className="text-xs text-text-muted mb-3">
+            <p className="text-xs text-text-secondary mb-3">
               Define the expected structure of the AI's response using JSON Schema format
             </p>
           </div>
@@ -132,8 +132,8 @@ export default function JsonSchemaEditor({
                 setLocalValue(e.target.value);
                 setLocalError('');
               }}
-              className={`w-full h-full min-h-[400px] p-3 border rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none font-mono text-sm ${
-                localError || error ? 'border-red-500' : 'border-border-default'
+              className={`w-full h-full min-h-[400px] p-3 border rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none font-mono text-sm ${
+                localError || error ? 'border-red-500' : 'border-border-primary'
               }`}
               placeholder={`{
   "type": "object",
@@ -152,7 +152,7 @@ export default function JsonSchemaEditor({
           </div>
         </div>
 
-        <div className="flex justify-end space-x-3 mt-6 pt-4 border-t border-border-default">
+        <div className="flex justify-end space-x-3 mt-6 pt-4 border-t border-border-primary">
           <Button type="button" onClick={handleCancel} variant="ghost">
             Cancel
           </Button>
diff --git a/ui/desktop/src/components/recipes/shared/RecipeFormFields.tsx b/ui/desktop/src/components/recipes/shared/RecipeFormFields.tsx
index 70df568d2141..5db327cc418a 100644
--- a/ui/desktop/src/components/recipes/shared/RecipeFormFields.tsx
+++ b/ui/desktop/src/components/recipes/shared/RecipeFormFields.tsx
@@ -170,7 +170,7 @@ export function RecipeFormFields({
           <div>
             <label
               htmlFor="recipe-title"
-              className="block text-sm font-medium text-text-default mb-2"
+              className="block text-sm font-medium text-text-primary mb-2"
             >
               Title <span className="text-red-500">*</span>
             </label>
@@ -183,8 +183,8 @@ export function RecipeFormFields({
                 onTitleChange?.(e.target.value);
               }}
               onBlur={field.handleBlur}
-              className={`w-full p-3 border rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                field.state.meta.errors.length > 0 ? 'border-red-500' : 'border-border-default'
+              className={`w-full p-3 border rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                field.state.meta.errors.length > 0 ? 'border-red-500' : 'border-border-primary'
               }`}
               placeholder="Recipe title"
               data-testid="title-input"
@@ -202,7 +202,7 @@ export function RecipeFormFields({
           <div>
             <label
               htmlFor="recipe-description"
-              className="block text-sm font-medium text-text-default mb-2"
+              className="block text-sm font-medium text-text-primary mb-2"
             >
               Description <span className="text-red-500">*</span>
             </label>
@@ -215,8 +215,8 @@ export function RecipeFormFields({
                 onDescriptionChange?.(e.target.value);
               }}
               onBlur={field.handleBlur}
-              className={`w-full p-3 border rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-                field.state.meta.errors.length > 0 ? 'border-red-500' : 'border-border-default'
+              className={`w-full p-3 border rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                field.state.meta.errors.length > 0 ? 'border-red-500' : 'border-border-primary'
               }`}
               placeholder="Brief description of what this recipe does"
               data-testid="description-input"
@@ -235,7 +235,7 @@ export function RecipeFormFields({
             <div className="flex items-center justify-between mb-2">
               <label
                 htmlFor="recipe-instructions"
-                className="block text-sm font-medium text-text-default"
+                className="block text-sm font-medium text-text-primary"
               >
                 Instructions <span className="text-red-500">*</span>
               </label>
@@ -260,14 +260,14 @@ export function RecipeFormFields({
                 field.handleBlur();
                 updateParametersFromFields();
               }}
-              className={`w-full p-3 border rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none font-mono text-sm ${
-                field.state.meta.errors.length > 0 ? 'border-red-500' : 'border-border-default'
+              className={`w-full p-3 border rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none font-mono text-sm ${
+                field.state.meta.errors.length > 0 ? 'border-red-500' : 'border-border-primary'
               }`}
               placeholder="Detailed instructions for the AI, hidden from the user"
               rows={8}
               data-testid="instructions-input"
             />
-            <p className="text-xs text-text-muted mt-1">
+            <p className="text-xs text-text-secondary mt-1">
               Use {`{{parameter_name}}`} to define parameters that can be filled in when running the
               recipe.
             </p>
@@ -297,11 +297,11 @@ export function RecipeFormFields({
           <div>
             <label
               htmlFor="recipe-prompt"
-              className="block text-sm font-medium text-text-default mb-2"
+              className="block text-sm font-medium text-text-primary mb-2"
             >
               Initial Prompt
             </label>
-            <p className="text-xs text-text-muted mt-2 mb-2">
+            <p className="text-xs text-text-secondary mt-2 mb-2">
               (Optional - Instructions or Prompt are required)
             </p>
             <textarea
@@ -315,7 +315,7 @@ export function RecipeFormFields({
                 field.handleBlur();
                 updateParametersFromFields();
               }}
-              className="w-full p-3 border border-border-default rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+              className="w-full p-3 border border-border-primary rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
               placeholder="Pre-filled prompt when the recipe starts"
               rows={3}
               data-testid="prompt-input"
@@ -326,9 +326,9 @@ export function RecipeFormFields({
 
       {/* Advanced Section - Collapsible */}
       <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen} className="mt-6">
-        <CollapsibleTrigger className="flex items-baseline gap-2 w-full py-3 px-4 bg-background-muted hover:bg-background-muted/80 rounded-lg transition-colors border border-border-default">
+        <CollapsibleTrigger className="flex items-baseline gap-2 w-full py-3 px-4 bg-background-secondary hover:bg-background-secondary/80 rounded-lg transition-colors border border-border-primary">
           <ChevronDown
-            className={`w-4 h-4 text-text-muted transition-transform duration-200 flex-shrink-0 relative top-0.5 ${
+            className={`w-4 h-4 text-text-secondary transition-transform duration-200 flex-shrink-0 relative top-0.5 ${
               advancedOpen ? 'rotate-0' : '-rotate-90'
             }`}
           />
@@ -338,7 +338,7 @@ export function RecipeFormFields({
           </span>
         </CollapsibleTrigger>
 
-        <CollapsibleContent className="mt-4 space-y-4 pl-6 border-l-2 border-border-default ml-2">
+        <CollapsibleContent className="mt-4 space-y-4 pl-6 border-l-2 border-border-primary ml-2">
           {/* Activities Field */}
           <form.Field name="activities">
             {(field: FormFieldApi<string[]>) => (
@@ -408,10 +408,10 @@ export function RecipeFormFields({
 
               return (
                 <div>
-                  <label className="block text-md text-text-default mb-2 font-bold">
+                  <label className="block text-md text-text-primary mb-2 font-bold">
                     Parameters
                   </label>
-                  <p className="text-text-muted text-sm space-y-2 pb-4">
+                  <p className="text-text-secondary text-sm space-y-2 pb-4">
                     Parameters will be automatically detected from {`{{parameter_name}}`} syntax in
                     instructions/prompt/activities or you can manually add them below.
                   </p>
@@ -424,7 +424,7 @@ export function RecipeFormFields({
                       onChange={(e) => setNewParameterName(e.target.value)}
                       onKeyPress={handleKeyPress}
                       placeholder="Enter parameter name..."
-                      className="flex-1 px-3 py-2 border border-border-default rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                      className="flex-1 px-3 py-2 border border-border-primary rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                     />
                     <button
                       type="button"
@@ -502,10 +502,10 @@ export function RecipeFormFields({
           <form.Field name="jsonSchema">
             {(field: FormFieldApi<string | undefined>) => (
               <div>
-                <label className="block text-md text-text-default mb-2 font-bold">
+                <label className="block text-md text-text-primary mb-2 font-bold">
                   Response JSON Schema
                 </label>
-                <p className="text-text-muted text-sm space-y-2 pb-4">
+                <p className="text-text-secondary text-sm space-y-2 pb-4">
                   Define the expected structure of the AI's response using JSON Schema format
                 </p>
                 <div className="flex items-center justify-between mb-2">
@@ -522,13 +522,13 @@ export function RecipeFormFields({
 
                 {field.state.value && field.state.value.trim() && (
                   <div
-                    className={`border rounded-lg p-3 bg-background-muted ${
+                    className={`border rounded-lg p-3 bg-background-secondary ${
                       field.state.meta.errors.length > 0
                         ? 'border-red-500'
-                        : 'border-border-default'
+                        : 'border-border-primary'
                     }`}
                   >
-                    <pre className="text-xs font-mono text-text-default whitespace-pre-wrap break-words max-h-32 overflow-y-auto">
+                    <pre className="text-xs font-mono text-text-primary whitespace-pre-wrap break-words max-h-32 overflow-y-auto">
                       {field.state.value}
                     </pre>
                   </div>
diff --git a/ui/desktop/src/components/recipes/shared/RecipeNameField.tsx b/ui/desktop/src/components/recipes/shared/RecipeNameField.tsx
index da0e60a4abe8..bd75cfede4ed 100644
--- a/ui/desktop/src/components/recipes/shared/RecipeNameField.tsx
+++ b/ui/desktop/src/components/recipes/shared/RecipeNameField.tsx
@@ -23,7 +23,7 @@ export function RecipeNameField({
 }: RecipeNameFieldProps) {
   return (
     <div>
-      <label htmlFor={id} className="block text-sm font-medium text-text-default mb-2">
+      <label htmlFor={id} className="block text-sm font-medium text-text-primary mb-2">
         {label} {required && <span className="text-red-500">*</span>}
       </label>
       <input
@@ -50,13 +50,13 @@ export function RecipeNameField({
           onBlur();
         }}
         disabled={disabled}
-        className={`w-full p-3 border rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-          errors.length > 0 ? 'border-red-500' : 'border-border-default'
+        className={`w-full p-3 border rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+          errors.length > 0 ? 'border-red-500' : 'border-border-primary'
         } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
         placeholder={RECIPE_NAME_PLACEHOLDER}
         data-testid="recipe-name-input"
       />
-      <p className="text-xs text-text-muted mt-1">
+      <p className="text-xs text-text-secondary mt-1">
         Will be automatically formatted (lowercase, dashes for spaces)
       </p>
       {errors.length > 0 && <p className="text-red-500 text-sm mt-1">{errors[0]}</p>}
diff --git a/ui/desktop/src/components/schedule/ScheduleDetailView.tsx b/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
index 7a75583f1409..07350124e12c 100644
--- a/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
+++ b/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
@@ -244,10 +244,10 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
 
   if (!scheduleId) {
     return (
-      <div className="h-screen w-full flex flex-col items-center justify-center bg-white dark:bg-gray-900 text-text-default p-8">
+      <div className="h-screen w-full flex flex-col items-center justify-center bg-white dark:bg-gray-900 text-text-primary p-8">
         <BackButton onClick={onNavigateBack} />
-        <h1 className="text-2xl font-medium text-text-default mt-4">Schedule Not Found</h1>
-        <p className="text-text-muted mt-2">No schedule ID provided. Return to schedules list.</p>
+        <h1 className="text-2xl font-medium text-text-primary mt-4">Schedule Not Found</h1>
+        <p className="text-text-secondary mt-2">No schedule ID provided. Return to schedules list.</p>
       </div>
     );
   }
@@ -263,19 +263,19 @@ 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="px-8 pt-6 pb-4 border-b border-border-default flex-shrink-0">
+    <div className="h-screen w-full flex flex-col bg-background-primary text-text-primary">
+      <div className="px-8 pt-6 pb-4 border-b border-border-primary flex-shrink-0">
         <BackButton onClick={onNavigateBack} />
         <h1 className="text-4xl font-light mt-1 mb-1 pt-8">Schedule Details</h1>
-        <p className="text-sm text-text-muted mb-1">Viewing Schedule ID: {scheduleId}</p>
+        <p className="text-sm text-text-secondary mb-1">Viewing Schedule ID: {scheduleId}</p>
       </div>
 
       <ScrollArea className="flex-grow">
         <div className="p-8 space-y-6">
           <section>
-            <h2 className="text-xl font-semibold text-text-default mb-3">Schedule Information</h2>
+            <h2 className="text-xl font-semibold text-text-primary mb-3">Schedule Information</h2>
             {isLoadingSchedule && (
-              <div className="flex items-center text-text-muted">
+              <div className="flex items-center text-text-secondary">
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading schedule...
               </div>
             )}
@@ -285,10 +285,10 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
               </p>
             )}
             {scheduleDetails && (
-              <Card className="p-4 bg-background-default shadow mb-6">
+              <Card className="p-4 bg-background-primary shadow 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">
+                    <h3 className="text-base font-semibold text-text-primary">
                       {scheduleDetails.id}
                     </h3>
                     <div className="mt-2 md:mt-0 flex items-center gap-2">
@@ -306,27 +306,27 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
                       )}
                     </div>
                   </div>
-                  <p className="text-sm text-text-default">
+                  <p className="text-sm text-text-primary">
                     <span className="font-semibold">Schedule:</span> {readableCron}
                   </p>
-                  <p className="text-sm text-text-default">
+                  <p className="text-sm text-text-primary">
                     <span className="font-semibold">Cron Expression:</span> {scheduleDetails.cron}
                   </p>
-                  <p className="text-sm text-text-default">
+                  <p className="text-sm text-text-primary">
                     <span className="font-semibold">Recipe Source:</span> {scheduleDetails.source}
                   </p>
-                  <p className="text-sm text-text-default">
+                  <p className="text-sm text-text-primary">
                     <span className="font-semibold">Last Run:</span>{' '}
                     {formatToLocalDateWithTimezone(scheduleDetails.last_run)}
                   </p>
                   {scheduleDetails.currently_running && scheduleDetails.current_session_id && (
-                    <p className="text-sm text-text-default">
+                    <p className="text-sm text-text-primary">
                       <span className="font-semibold">Current Session:</span>{' '}
                       {scheduleDetails.current_session_id}
                     </p>
                   )}
                   {scheduleDetails.currently_running && scheduleDetails.process_start_time && (
-                    <p className="text-sm text-text-default">
+                    <p className="text-sm text-text-primary">
                       <span className="font-semibold">Process Started:</span>{' '}
                       {formatToLocalDateWithTimezone(scheduleDetails.process_start_time)}
                     </p>
@@ -337,7 +337,7 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
           </section>
 
           <section>
-            <h2 className="text-xl font-semibold text-text-default mb-3">Actions</h2>
+            <h2 className="text-xl font-semibold text-text-primary mb-3">Actions</h2>
             <div className="flex flex-col md:flex-row gap-2">
               <Button
                 onClick={handleRunNow}
@@ -422,15 +422,15 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
           </section>
 
           <section>
-            <h2 className="text-xl font-semibold text-text-default mb-4">Recent Sessions</h2>
-            {isLoadingSessions && <p className="text-text-muted">Loading sessions...</p>}
+            <h2 className="text-xl font-semibold text-text-primary mb-4">Recent Sessions</h2>
+            {isLoadingSessions && <p className="text-text-secondary">Loading sessions...</p>}
             {sessionsError && (
               <p className="text-text-danger text-sm p-3 bg-background-danger border border-border-danger rounded-md">
                 Error: {sessionsError}
               </p>
             )}
             {!isLoadingSessions && sessions.length === 0 && (
-              <p className="text-text-muted text-center py-4">
+              <p className="text-text-secondary text-center py-4">
                 No sessions found for this schedule.
               </p>
             )}
@@ -440,27 +440,27 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
                 {sessions.map((session) => (
                   <Card
                     key={session.id}
-                    className="p-4 bg-background-default shadow cursor-pointer hover:shadow-lg transition-shadow duration-200"
+                    className="p-4 bg-background-primary shadow cursor-pointer hover:shadow-lg transition-shadow duration-200"
                     onClick={() => loadSession(session.id)}
                   >
                     <h3
-                      className="text-sm font-semibold text-text-default truncate"
+                      className="text-sm font-semibold text-text-primary truncate"
                       title={session.name || session.id}
                     >
                       {session.name || `Session ID: ${session.id}`}
                     </h3>
-                    <p className="text-xs text-text-muted mt-1">
+                    <p className="text-xs text-text-secondary mt-1">
                       Created:{' '}
                       {session.createdAt ? formatToLocalDateWithTimezone(session.createdAt) : 'N/A'}
                     </p>
                     {session.messageCount !== undefined && (
-                      <p className="text-xs text-text-muted mt-1">
+                      <p className="text-xs text-text-secondary mt-1">
                         Messages: {session.messageCount}
                       </p>
                     )}
                     {session.workingDir && (
                       <p
-                        className="text-xs text-text-muted mt-1 truncate"
+                        className="text-xs text-text-secondary mt-1 truncate"
                         title={session.workingDir}
                       >
                         Dir: {session.workingDir}
@@ -468,11 +468,11 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
                     )}
                     {session.accumulatedTotalTokens !== undefined &&
                       session.accumulatedTotalTokens !== null && (
-                        <p className="text-xs text-text-muted mt-1">
+                        <p className="text-xs text-text-secondary mt-1">
                           Tokens: {session.accumulatedTotalTokens}
                         </p>
                       )}
-                    <p className="text-xs text-text-muted mt-1">
+                    <p className="text-xs text-text-secondary mt-1">
                       ID: <span className="font-mono">{session.id}</span>
                     </p>
                   </Card>
diff --git a/ui/desktop/src/components/schedule/ScheduleFromRecipeModal.tsx b/ui/desktop/src/components/schedule/ScheduleFromRecipeModal.tsx
index d4951446e51e..8ddfa934be65 100644
--- a/ui/desktop/src/components/schedule/ScheduleFromRecipeModal.tsx
+++ b/ui/desktop/src/components/schedule/ScheduleFromRecipeModal.tsx
@@ -74,7 +74,7 @@ export const ScheduleFromRecipeModal: React.FC<ScheduleFromRecipeModalProps> = (
 
   return (
     <div className="fixed inset-0 bg-black/50 z-40 flex items-center justify-center p-4">
-      <Card className="w-full max-w-md bg-background-default shadow-xl rounded-lg z-50 flex flex-col">
+      <Card className="w-full max-w-md bg-background-primary shadow-xl rounded-lg z-50 flex flex-col">
         <div className="px-6 pt-6 pb-4">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
             Create Schedule from Recipe
@@ -120,7 +120,7 @@ export const ScheduleFromRecipeModal: React.FC<ScheduleFromRecipeModalProps> = (
             type="button"
             variant="outline"
             onClick={handleClose}
-            className="flex-1 rounded-xl hover:bg-background-muted text-text-muted"
+            className="flex-1 rounded-xl hover:bg-background-secondary text-text-secondary"
           >
             Cancel
           </Button>
diff --git a/ui/desktop/src/components/schedule/ScheduleModal.tsx b/ui/desktop/src/components/schedule/ScheduleModal.tsx
index ad70114a8c21..725464a4cf25 100644
--- a/ui/desktop/src/components/schedule/ScheduleModal.tsx
+++ b/ui/desktop/src/components/schedule/ScheduleModal.tsx
@@ -26,7 +26,7 @@ interface ScheduleModalProps {
 
 type SourceType = 'file' | 'deeplink';
 
-const modalLabelClassName = 'block text-sm font-medium text-text-default mb-1';
+const modalLabelClassName = 'block text-sm font-medium text-text-primary mb-1';
 
 export const ScheduleModal: React.FC<ScheduleModalProps> = ({
   isOpen,
@@ -163,15 +163,15 @@ export const ScheduleModal: React.FC<ScheduleModalProps> = ({
 
   return (
     <div className="fixed inset-0 bg-black/50 z-40 flex items-center justify-center p-4">
-      <Card className="w-full max-w-md bg-background-default shadow-xl rounded-3xl z-50 flex flex-col max-h-[90vh] overflow-hidden">
+      <Card className="w-full max-w-md bg-background-primary shadow-xl rounded-3xl z-50 flex flex-col max-h-[90vh] overflow-hidden">
         <div className="px-8 pt-6 pb-4 flex-shrink-0">
           <div className="flex items-center gap-3">
             <img src={ClockIcon} alt="Clock" className="w-8 h-8" />
             <div className="flex-1">
-              <h2 className="text-base font-semibold text-text-default">
+              <h2 className="text-base font-semibold text-text-primary">
                 {isEditMode ? 'Edit Schedule' : 'Create New Schedule'}
               </h2>
-              {isEditMode && <p className="text-sm text-text-muted">{schedule.id}</p>}
+              {isEditMode && <p className="text-sm text-text-secondary">{schedule.id}</p>}
             </div>
           </div>
         </div>
@@ -289,7 +289,7 @@ export const ScheduleModal: React.FC<ScheduleModalProps> = ({
           </div>
         </form>
 
-        <div className="flex gap-2 px-8 py-4 border-t border-border-default">
+        <div className="flex gap-2 px-8 py-4 border-t border-border-primary">
           <Button
             type="button"
             variant="ghost"
diff --git a/ui/desktop/src/components/schedule/SchedulesView.tsx b/ui/desktop/src/components/schedule/SchedulesView.tsx
index 6d2c95cf57ca..40d68d0b2488 100644
--- a/ui/desktop/src/components/schedule/SchedulesView.tsx
+++ b/ui/desktop/src/components/schedule/SchedulesView.tsx
@@ -62,7 +62,7 @@ const ScheduleCard: React.FC<{
 
   return (
     <Card
-      className="py-2 px-4 mb-2 bg-background-default border-none hover:bg-background-muted cursor-pointer transition-all duration-150"
+      className="py-2 px-4 mb-2 bg-background-primary border-none hover:bg-background-secondary cursor-pointer transition-all duration-150"
       onClick={() => onNavigateToDetail(job.id)}
     >
       <div className="flex justify-between items-start gap-4">
@@ -84,10 +84,10 @@ const ScheduleCard: React.FC<{
               </span>
             )}
           </div>
-          <p className="text-text-muted text-sm mb-2 line-clamp-2" title={readableCron}>
+          <p className="text-text-secondary text-sm mb-2 line-clamp-2" title={readableCron}>
             {readableCron}
           </p>
-          <div className="flex items-center text-xs text-text-muted">
+          <div className="flex items-center text-xs text-text-secondary">
             <span>Last run: {formattedLastRun}</span>
           </div>
         </div>
@@ -442,7 +442,7 @@ const SchedulesView: React.FC<SchedulesViewProps> = ({ onClose: _onClose }) => {
     <>
       <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-primary px-8 pb-8 pt-16">
             <div className="flex flex-col page-transition">
               <div className="flex justify-between items-center mb-1">
                 <h1 className="text-4xl font-light">Scheduler</h1>
@@ -470,7 +470,7 @@ const SchedulesView: React.FC<SchedulesViewProps> = ({ onClose: _onClose }) => {
                   </Button>
                 </div>
               </div>
-              <p className="text-sm text-text-muted mb-1">
+              <p className="text-sm text-text-secondary mb-1">
                 Create and manage scheduled tasks to run recipes automatically at specified times.
               </p>
             </div>
@@ -493,8 +493,8 @@ const SchedulesView: React.FC<SchedulesViewProps> = ({ onClose: _onClose }) => {
 
                 {!isLoading && !apiError && schedules.length === 0 && (
                   <div className="flex flex-col pt-4 pb-12">
-                    <CircleDotDashed className="h-5 w-5 text-text-muted mb-3.5" />
-                    <p className="text-base text-text-muted font-light mb-2">No schedules yet</p>
+                    <CircleDotDashed className="h-5 w-5 text-text-secondary mb-3.5" />
+                    <p className="text-base text-text-secondary font-light mb-2">No schedules yet</p>
                   </div>
                 )}
 
diff --git a/ui/desktop/src/components/sessions/SessionHistoryView.tsx b/ui/desktop/src/components/sessions/SessionHistoryView.tsx
index bd98c1ab43ae..b2c7ad1b90e7 100644
--- a/ui/desktop/src/components/sessions/SessionHistoryView.tsx
+++ b/ui/desktop/src/components/sessions/SessionHistoryView.tsx
@@ -89,10 +89,10 @@ const SessionMessages: React.FC<{
         <div className="flex flex-col space-y-6">
           {isLoading ? (
             <div className="flex justify-center items-center py-12">
-              <LoaderCircle className="animate-spin h-8 w-8 text-text-default" />
+              <LoaderCircle className="animate-spin h-8 w-8 text-text-primary" />
             </div>
           ) : error ? (
-            <div className="flex flex-col items-center justify-center py-8 text-text-muted">
+            <div className="flex flex-col items-center justify-center py-8 text-text-secondary">
               <div className="text-red-500 mb-4">
                 <AlertCircle size={32} />
               </div>
@@ -120,7 +120,7 @@ const SessionMessages: React.FC<{
               </SearchView>
             </div>
           ) : (
-            <div className="flex flex-col items-center justify-center py-8 text-text-muted">
+            <div className="flex flex-col items-center justify-center py-8 text-text-secondary">
               <MessageSquareText className="w-12 h-12 mb-4" />
               <p className="text-lg mb-2">No messages found</p>
               <p className="text-sm">This session doesn't contain any messages</p>
@@ -259,7 +259,7 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
             <div className="flex flex-col">
               {!isLoading ? (
                 <>
-                  <div className="flex items-center text-text-muted text-sm space-x-5 font-mono">
+                  <div className="flex items-center text-text-secondary text-sm space-x-5 font-mono">
                     <span className="flex items-center">
                       <Calendar className="w-4 h-4 mr-1" />
                       {formatMessageTimestamp(messages[0]?.created)}
@@ -275,7 +275,7 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
                       </span>
                     )}
                   </div>
-                  <div className="flex items-center text-text-muted text-sm mt-1 font-mono">
+                  <div className="flex items-center text-text-secondary text-sm mt-1 font-mono">
                     <span className="flex items-center">
                       <Folder className="w-4 h-4 mr-1" />
                       {session.working_dir}
@@ -283,7 +283,7 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
                   </div>
                 </>
               ) : (
-                <div className="flex items-center text-text-muted text-sm">
+                <div className="flex items-center text-text-secondary text-sm">
                   <LoaderCircle className="w-4 h-4 mr-2 animate-spin" />
                   <span>Loading session details...</span>
                 </div>
@@ -304,7 +304,7 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle className="flex justify-center items-center gap-2">
-              <Share2 className="w-6 h-6 text-text-default" />
+              <Share2 className="w-6 h-6 text-text-primary" />
               Share Session (beta)
             </DialogTitle>
             <DialogDescription>
@@ -313,8 +313,8 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
           </DialogHeader>
 
           <div className="py-4">
-            <div className="relative rounded-full border border-border-default px-3 py-2 flex items-center bg-gray-100 dark:bg-gray-600">
-              <code className="text-sm text-text-default dark:text-text-inverse overflow-x-hidden break-all pr-8 w-full">
+            <div className="relative rounded-full border border-border-primary px-3 py-2 flex items-center bg-gray-100 dark:bg-gray-600">
+              <code className="text-sm text-text-primary dark:text-text-inverse overflow-x-hidden break-all pr-8 w-full">
                 {shareLink}
               </code>
               <Button
diff --git a/ui/desktop/src/components/sessions/SessionItem.tsx b/ui/desktop/src/components/sessions/SessionItem.tsx
index 83a5ddb3e069..4b234a6de3f6 100644
--- a/ui/desktop/src/components/sessions/SessionItem.tsx
+++ b/ui/desktop/src/components/sessions/SessionItem.tsx
@@ -14,7 +14,7 @@ const SessionItem: React.FC<SessionItemProps> = ({ session, extraActions }) => {
   const displayName = shouldShowNewChatTitle(session) ? DEFAULT_CHAT_TITLE : session.name;
 
   return (
-    <Card className="p-4 mb-2 hover:bg-background-accent/50 cursor-pointer flex justify-between items-center">
+    <Card className="p-4 mb-2 hover:bg-background-inverse/50 cursor-pointer flex justify-between items-center">
       <div>
         <div className="font-medium">{displayName}</div>
         <div className="text-sm text-muted-foreground">
diff --git a/ui/desktop/src/components/sessions/SessionListView.tsx b/ui/desktop/src/components/sessions/SessionListView.tsx
index 9b40e626ce9e..f9d0d9313f9b 100644
--- a/ui/desktop/src/components/sessions/SessionListView.tsx
+++ b/ui/desktop/src/components/sessions/SessionListView.tsx
@@ -135,8 +135,8 @@ const EditSessionModal = React.memo<EditSessionModalProps>(
 
     return (
       <div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/50">
-        <div className="bg-background-default border border-border-default rounded-lg p-6 w-[500px] max-w-[90vw]">
-          <h3 className="text-lg font-medium text-text-default mb-4">Edit Session Description</h3>
+        <div className="bg-background-primary border border-border-primary rounded-lg p-6 w-[500px] max-w-[90vw]">
+          <h3 className="text-lg font-medium text-text-primary mb-4">Edit Session Description</h3>
 
           <div className="space-y-4">
             <div>
@@ -145,7 +145,7 @@ const EditSessionModal = React.memo<EditSessionModalProps>(
                 type="text"
                 value={description}
                 onChange={handleInputChange}
-                className="w-full p-3 border border-border-default rounded-lg bg-background-default text-text-default focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full p-3 border border-border-primary rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500"
                 placeholder="Enter session description"
                 autoFocus
                 maxLength={200}
@@ -617,18 +617,18 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
           <div>
             <h3 className="text-base break-words line-clamp-2 w-full mb-1">{displayName}</h3>
             <div className="flex-1 mt-2">
-              <div className="flex items-center text-text-muted text-xs">
+              <div className="flex items-center text-text-secondary text-xs">
                 <Calendar className="w-3 h-3 mr-1 flex-shrink-0" />
                 <span>{formatMessageTimestamp(Date.parse(session.updated_at) / 1000)}</span>
               </div>
-              <div className="flex items-center text-text-muted text-xs">
+              <div className="flex items-center text-text-secondary text-xs">
                 <Folder className="w-3 h-3 mr-1 flex-shrink-0" />
                 <span className="truncate">{session.working_dir}</span>
               </div>
             </div>
           </div>
           <div className="flex items-center justify-between mt-1">
-            <div className="flex items-center space-x-3 text-xs text-text-muted">
+            <div className="flex items-center space-x-3 text-xs text-text-secondary">
               <div className="flex items-center">
                 <MessageSquareText className="w-3 h-3 mr-1" />
                 <span className="font-mono">{session.message_count}</span>
@@ -669,21 +669,21 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
               className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
               title="Open in new window"
             >
-              <ExternalLink className="w-3 h-3 text-text-muted hover:text-text-default" />
+              <ExternalLink className="w-3 h-3 text-text-secondary hover:text-text-primary" />
             </button>
             <button
               onClick={handleEditClick}
               className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
               title="Edit session name"
             >
-              <Edit2 className="w-3 h-3 text-text-muted hover:text-text-default" />
+              <Edit2 className="w-3 h-3 text-text-secondary hover:text-text-primary" />
             </button>
             <button
               onClick={handleDuplicateClick}
               className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
               title="Duplicate session"
             >
-              <Copy className="w-3 h-3 text-text-muted hover:text-text-default" />
+              <Copy className="w-3 h-3 text-text-secondary hover:text-text-primary" />
             </button>
             <button
               onClick={handleDeleteClick}
@@ -697,7 +697,7 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
               className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
               title="Export session"
             >
-              <Download className="w-3 h-3 text-text-muted hover:text-text-default" />
+              <Download className="w-3 h-3 text-text-secondary hover:text-text-primary" />
             </button>
           </div>
         </Card>
@@ -744,7 +744,7 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
     const renderActualContent = () => {
       if (error) {
         return (
-          <div className="flex flex-col items-center justify-center h-full text-text-muted">
+          <div className="flex flex-col items-center justify-center h-full text-text-secondary">
             <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
             <p className="text-lg mb-2">Error Loading Sessions</p>
             <p className="text-sm text-center mb-4">{error}</p>
@@ -757,7 +757,7 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
 
       if (sessions.length === 0) {
         return (
-          <div className="flex flex-col justify-center h-full text-text-muted">
+          <div className="flex flex-col justify-center h-full text-text-secondary">
             <MessageSquareText className="h-12 w-12 mb-4" />
             <p className="text-lg mb-2">No chat sessions found</p>
             <p className="text-sm">Your chat history will appear here</p>
@@ -767,7 +767,7 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
 
       if (dateGroups.length === 0 && searchResults !== null) {
         return (
-          <div className="flex flex-col items-center justify-center h-full text-text-muted mt-4">
+          <div className="flex flex-col items-center justify-center h-full text-text-secondary mt-4">
             <MessageSquareText className="h-12 w-12 mb-4" />
             <p className="text-lg mb-2">No matching sessions found</p>
             <p className="text-sm">Try adjusting your search terms</p>
@@ -779,8 +779,8 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
         <div className="space-y-8">
           {visibleDateGroups.map((group) => (
             <div key={group.label} className="space-y-4">
-              <div className="sticky top-0 z-10 bg-background-default/95 backdrop-blur-sm">
-                <h2 className="text-text-muted">{group.label}</h2>
+              <div className="sticky top-0 z-10 bg-background-primary/95 backdrop-blur-sm">
+                <h2 className="text-text-secondary">{group.label}</h2>
               </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
                 {group.sessions.map((session) => (
@@ -800,7 +800,7 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
 
           {visibleGroupsCount < dateGroups.length && (
             <div className="flex justify-center py-8">
-              <div className="flex items-center space-x-2 text-text-muted">
+              <div className="flex items-center space-x-2 text-text-secondary">
                 <div className="animate-spin rounded-full h-4 w-4 border-b-2"></div>
                 <span>Loading more sessions...</span>
               </div>
@@ -814,7 +814,7 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
       <>
         <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-primary px-8 pb-8 pt-16">
               <div className="flex flex-col page-transition">
                 <div className="flex justify-between items-center mb-1">
                   <h1 className="text-4xl font-light">Chat history</h1>
@@ -828,7 +828,7 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
                     Import Session
                   </Button>
                 </div>
-                <p className="text-sm text-text-muted mb-4">
+                <p className="text-sm text-text-secondary mb-4">
                   View and search your past conversations with Goose. {getSearchShortcutText()} to
                   search.
                 </p>
diff --git a/ui/desktop/src/components/sessions/SessionViewComponents.tsx b/ui/desktop/src/components/sessions/SessionViewComponents.tsx
index 76e05d41ead8..d3374e5ebb22 100644
--- a/ui/desktop/src/components/sessions/SessionViewComponents.tsx
+++ b/ui/desktop/src/components/sessions/SessionViewComponents.tsx
@@ -69,7 +69,7 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
                 <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2"></div>
               </div>
             ) : error ? (
-              <div className="flex flex-col items-center justify-center py-8 text-text-muted">
+              <div className="flex flex-col items-center justify-center py-8 text-text-secondary">
                 <div className="text-red-500 mb-4">
                   <AlertCircle size={32} />
                 </div>
@@ -107,15 +107,15 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
                       key={index}
                       className={`p-4 ${
                         message.role === 'user'
-                          ? 'bg-bgSecondary border border-border-default'
-                          : 'bg-background-muted'
+                          ? 'bg-bgSecondary border border-border-primary'
+                          : 'bg-background-secondary'
                       }`}
                     >
                       <div className="flex justify-between items-center mb-2">
-                        <span className="font-medium text-text-default">
+                        <span className="font-medium text-text-primary">
                           {message.role === 'user' ? 'You' : 'Goose'}
                         </span>
-                        <span className="text-xs text-text-muted">
+                        <span className="text-xs text-text-secondary">
                           {formatMessageTimestamp(message.created)}
                         </span>
                       </div>
@@ -152,7 +152,7 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
 
                         {/* Tool requests and responses */}
                         {toolRequests.length > 0 && (
-                          <div className="goose-message-tool bg-background-default border border-border-default dark:border-gray-700 rounded-b-2xl px-4 pt-4 pb-2 mt-1">
+                          <div className="goose-message-tool bg-background-primary border border-border-primary dark:border-gray-700 rounded-b-2xl px-4 pt-4 pb-2 mt-1">
                             {toolRequests.map((toolRequest) => (
                               <ToolCallWithResponse
                                 // In the session history page, if no tool response found for given request, it means the tool call
@@ -174,7 +174,7 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
                 })
                 .filter(Boolean) // Filter out null entries
             ) : (
-              <div className="flex flex-col items-center justify-center py-8 text-text-muted">
+              <div className="flex flex-col items-center justify-center py-8 text-text-secondary">
                 <MessageSquare className="w-12 h-12 mb-4" />
                 <p className="text-lg mb-2">No messages found</p>
                 <p className="text-sm">This session doesn't contain any messages</p>
diff --git a/ui/desktop/src/components/sessions/SessionsInsights.tsx b/ui/desktop/src/components/sessions/SessionsInsights.tsx
index 1f36c04fee67..4a18f29b1815 100644
--- a/ui/desktop/src/components/sessions/SessionsInsights.tsx
+++ b/ui/desktop/src/components/sessions/SessionsInsights.tsx
@@ -118,9 +118,9 @@ export function SessionInsights() {
 
   // Render skeleton loader while data is loading
   const renderSkeleton = () => (
-    <div className="bg-background-muted flex flex-col h-full">
+    <div className="bg-background-secondary flex flex-col h-full">
       {/* Header container with rounded bottom */}
-      <div className="bg-background-default rounded-b-2xl mb-0.5">
+      <div className="bg-background-primary rounded-b-2xl mb-0.5">
         <div className="px-8 pb-12 pt-19 space-y-4">
           <div className="origin-bottom-left goose-icon-animation">
             <Goose className="size-8" />
@@ -134,21 +134,21 @@ export function SessionInsights() {
         {/* Top row with three equal columns */}
         <div className="grid grid-cols-2 gap-0.5">
           {/* Total Sessions Card Skeleton */}
-          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-default">
+          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-primary">
             <CardContent className="flex flex-col justify-end h-full p-0">
               <div className="flex flex-col justify-end">
                 <Skeleton className="h-10 w-16 mb-1" />
-                <span className="text-xs text-text-muted">Total sessions</span>
+                <span className="text-xs text-text-secondary">Total sessions</span>
               </div>
             </CardContent>
           </Card>
 
           {/* Total Tokens Card Skeleton */}
-          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-default">
+          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-primary">
             <CardContent className="flex flex-col justify-end h-full p-0">
               <div className="flex flex-col justify-end">
                 <Skeleton className="h-10 w-24 mb-1" />
-                <span className="text-xs text-text-muted">Total tokens</span>
+                <span className="text-xs text-text-secondary">Total tokens</span>
               </div>
             </CardContent>
           </Card>
@@ -156,16 +156,16 @@ export function SessionInsights() {
 
         {/* Recent Chats Card Skeleton */}
         <div className="grid grid-cols-1 gap-0.5">
-          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-default">
+          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-primary">
             <CardContent className="p-0">
               <div className="flex justify-between items-center mb-4">
                 <CardDescription className="mb-0">
-                  <span className="text-lg text-text-default">Recent chats</span>
+                  <span className="text-lg text-text-primary">Recent chats</span>
                 </CardDescription>
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="text-xs text-text-muted flex items-center gap-1 !px-0 hover:bg-transparent hover:underline hover:text-text-default"
+                  className="text-xs text-text-secondary flex items-center gap-1 !px-0 hover:bg-transparent hover:underline hover:text-text-primary"
                   onClick={navigateToSessionHistory}
                 >
                   See all
@@ -200,7 +200,7 @@ export function SessionInsights() {
         </div>
 
         {/* Filler container - extends to fill remaining space */}
-        <div className="bg-background-default rounded-2xl flex-1"></div>
+        <div className="bg-background-primary rounded-2xl flex-1"></div>
       </div>
     </div>
   );
@@ -211,9 +211,9 @@ export function SessionInsights() {
   }
 
   return (
-    <div className="bg-background-muted flex flex-col h-full">
+    <div className="bg-background-secondary flex flex-col h-full">
       {/* Header container with rounded bottom */}
-      <div className="bg-background-default rounded-b-2xl mb-0.5">
+      <div className="bg-background-primary rounded-b-2xl mb-0.5">
         <div className="px-8 pb-12 pt-19 space-y-4">
           <div className="origin-bottom-left goose-icon-animation">
             <Goose className="size-8" />
@@ -239,19 +239,19 @@ export function SessionInsights() {
         {/* Top row with three equal columns */}
         <div className="grid grid-cols-2 gap-0.5">
           {/* Total Sessions Card */}
-          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-default">
+          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-primary">
             <CardContent className="page-transition flex flex-col justify-end h-full p-0">
               <div className="flex flex-col justify-end">
                 <p className="text-4xl font-mono font-light flex items-end">
                   {Math.max(insights?.totalSessions ?? 0, 0)}
                 </p>
-                <span className="text-xs text-text-muted">Total sessions</span>
+                <span className="text-xs text-text-secondary">Total sessions</span>
               </div>
             </CardContent>
           </Card>
 
           {/* Average Duration Card */}
-          {/*<Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-default">*/}
+          {/*<Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-primary">*/}
           {/*  <CardContent className="page-transition flex flex-col justify-end h-full p-0">*/}
           {/*    <div className="flex flex-col justify-end">*/}
           {/*      <p className="text-4xl font-mono font-light flex items-end">*/}
@@ -259,19 +259,19 @@ export function SessionInsights() {
           {/*          ? `${insights.avgSessionDuration.toFixed(1)}m`*/}
           {/*          : '0.0m'}*/}
           {/*      </p>*/}
-          {/*      <span className="text-xs text-text-muted">Avg. chat length</span>*/}
+          {/*      <span className="text-xs text-text-secondary">Avg. chat length</span>*/}
           {/*    </div>*/}
           {/*  </CardContent>*/}
           {/*</Card>*/}
 
           {/* Total Tokens Card */}
-          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-default">
+          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-primary">
             <CardContent className="page-transition flex flex-col justify-end h-full p-0">
               <div className="flex flex-col justify-end">
                 <p className="text-4xl font-mono font-light flex items-end">
                   {formatTokens(insights?.totalTokens)}
                 </p>
-                <span className="text-xs text-text-muted">Total tokens</span>
+                <span className="text-xs text-text-secondary">Total tokens</span>
               </div>
             </CardContent>
           </Card>
@@ -280,16 +280,16 @@ export function SessionInsights() {
         {/* Recent Chats Card */}
         <div className="grid grid-cols-1 gap-0.5">
           {/* Recent Chats Card */}
-          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-default">
+          <Card className="w-full py-6 px-6 border-none rounded-2xl bg-background-primary">
             <CardContent className="page-transition p-0">
               <div className="flex justify-between items-center mb-4">
                 <CardDescription className="mb-0">
-                  <span className="text-lg text-text-default">Recent chats</span>
+                  <span className="text-lg text-text-primary">Recent chats</span>
                 </CardDescription>
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="text-xs text-text-muted flex items-center gap-1 !px-0 hover:bg-transparent hover:underline hover:text-text-default"
+                  className="text-xs text-text-secondary flex items-center gap-1 !px-0 hover:bg-transparent hover:underline hover:text-text-primary"
                   onClick={navigateToSessionHistory}
                 >
                   See all
@@ -324,7 +324,7 @@ export function SessionInsights() {
                   recentSessions.map((session, index) => (
                     <div
                       key={session.id}
-                      className="flex items-center justify-between text-sm py-1 px-2 rounded-md hover:bg-background-muted cursor-pointer transition-colors"
+                      className="flex items-center justify-between text-sm py-1 px-2 rounded-md hover:bg-background-secondary cursor-pointer transition-colors"
                       onClick={() => handleSessionClick(session)}
                       role="button"
                       tabIndex={0}
@@ -336,16 +336,16 @@ export function SessionInsights() {
                       }}
                     >
                       <div className="flex items-center space-x-2">
-                        <ChatSmart className="h-4 w-4 text-text-muted" />
+                        <ChatSmart className="h-4 w-4 text-text-secondary" />
                         <span className="truncate max-w-[300px]">{session.name}</span>
                       </div>
-                      <span className="text-text-muted font-mono font-light">
+                      <span className="text-text-secondary font-mono font-light">
                         {formatDateOnly(session.updated_at)}
                       </span>
                     </div>
                   ))
                 ) : (
-                  <div className="text-text-muted text-sm py-2">No recent chat sessions found.</div>
+                  <div className="text-text-secondary text-sm py-2">No recent chat sessions found.</div>
                 )}
               </div>
             </CardContent>
@@ -353,7 +353,7 @@ export function SessionInsights() {
         </div>
 
         {/* Filler container - extends to fill remaining space */}
-        <div className="bg-background-default rounded-2xl flex-1"></div>
+        <div className="bg-background-primary rounded-2xl flex-1"></div>
       </div>
     </div>
   );
diff --git a/ui/desktop/src/components/sessions/SharedSessionView.tsx b/ui/desktop/src/components/sessions/SharedSessionView.tsx
index 36f89731e1f2..85d39f415122 100644
--- a/ui/desktop/src/components/sessions/SharedSessionView.tsx
+++ b/ui/desktop/src/components/sessions/SharedSessionView.tsx
@@ -34,8 +34,8 @@ const SharedSessionView: React.FC<SharedSessionViewProps> = ({
   return (
     <MainPanelLayout>
       <div className="flex-1 flex flex-col min-h-0 px-8">
-        <div className="flex items-center py-4 border-b border-border-default mb-6">
-          <div className="flex items-center text-text-muted">
+        <div className="flex items-center py-4 border-b border-border-primary mb-6">
+          <div className="flex items-center text-text-secondary">
             <Share2 className="w-5 h-5 mr-2" />
             <span className="text-sm font-medium">Shared Session</span>
           </div>
@@ -45,7 +45,7 @@ const SharedSessionView: React.FC<SharedSessionViewProps> = ({
           <div className="flex flex-col">
             {!isLoading && session && session.messages.length > 0 ? (
               <>
-                <div className="flex items-center text-text-muted text-sm space-x-5 font-mono">
+                <div className="flex items-center text-text-secondary text-sm space-x-5 font-mono">
                   <span className="flex items-center">
                     <Calendar className="w-4 h-4 mr-1" />
                     {formatMessageTimestamp(session.messages[0]?.created)}
@@ -61,7 +61,7 @@ const SharedSessionView: React.FC<SharedSessionViewProps> = ({
                     </span>
                   )}
                 </div>
-                <div className="flex items-center text-text-muted text-sm mt-1 font-mono">
+                <div className="flex items-center text-text-secondary text-sm mt-1 font-mono">
                   <span className="flex items-center">
                     <Folder className="w-4 h-4 mr-1" />
                     {session.working_dir}
@@ -69,7 +69,7 @@ const SharedSessionView: React.FC<SharedSessionViewProps> = ({
                 </div>
               </>
             ) : (
-              <div className="flex items-center text-text-muted text-sm">
+              <div className="flex items-center text-text-secondary text-sm">
                 <LoaderCircle className="w-4 h-4 mr-2 animate-spin" />
                 <span>Loading session details...</span>
               </div>
diff --git a/ui/desktop/src/components/settings/PromptsSettingsSection.tsx b/ui/desktop/src/components/settings/PromptsSettingsSection.tsx
index 2b0ebca2ed8f..ae2063d37abe 100644
--- a/ui/desktop/src/components/settings/PromptsSettingsSection.tsx
+++ b/ui/desktop/src/components/settings/PromptsSettingsSection.tsx
@@ -187,11 +187,11 @@ export default function PromptsSettingsSection() {
             </div>
           </CardHeader>
           <CardContent className="px-4 space-y-4 flex flex-col h-full">
-            <div className="text-sm text-text-muted bg-background-muted p-3 rounded-lg">
+            <div className="text-sm text-text-secondary bg-background-secondary p-3 rounded-lg">
               <p>
                 <strong>Tip:</strong> Template variables like{' '}
-                <code className="bg-background-default px-1 rounded">{'{{ extensions }}'}</code> or{' '}
-                <code className="bg-background-default px-1 rounded">
+                <code className="bg-background-primary px-1 rounded">{'{{ extensions }}'}</code> or{' '}
+                <code className="bg-background-primary px-1 rounded">
                   {'{% for item in list %}'}
                 </code>{' '}
                 are replaced with actual values at runtime. Be careful not to remove required
@@ -215,7 +215,7 @@ export default function PromptsSettingsSection() {
               </div>
               <textarea
                 value={content}
-                className="w-full flex-1 min-h-[500px] border rounded-md p-3 text-sm font-mono resize-y bg-background-default text-text-default border-border-default focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full flex-1 min-h-[500px] border rounded-md p-3 text-sm font-mono resize-y bg-background-primary text-text-primary border-border-primary focus:outline-none focus:ring-2 focus:ring-blue-500"
                 onChange={(e) => setContent(e.target.value)}
                 placeholder="Enter prompt content..."
                 spellCheck={false}
@@ -241,7 +241,7 @@ export default function PromptsSettingsSection() {
             <AlertTriangle className="h-5 w-5 text-yellow-500 flex-shrink-0 mt-1" />
             <div className="flex-1">
               <CardTitle className="text-yellow-600 dark:text-yellow-400">Prompt Editing</CardTitle>
-              <p className="text-sm text-text-muted mt-2">
+              <p className="text-sm text-text-secondary mt-2">
                 Customize the prompts that define goose's behavior in different contexts. These
                 prompts use Jinja2 templating syntax. Be careful when modifying template variables,
                 as incorrect changes can break functionality. Please share any improvements with the
@@ -266,18 +266,18 @@ export default function PromptsSettingsSection() {
             {prompts.map((prompt) => (
               <div
                 key={prompt.name}
-                className="flex items-center justify-between p-3 rounded-lg border border-border-default hover:bg-background-muted transition-colors"
+                className="flex items-center justify-between p-3 rounded-lg border border-border-primary hover:bg-background-secondary transition-colors"
               >
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2">
-                    <h4 className="font-medium text-text-default truncate">{prompt.name}</h4>
+                    <h4 className="font-medium text-text-primary truncate">{prompt.name}</h4>
                     {prompt.is_customized && (
                       <span className="px-2 py-0.5 text-xs rounded-full bg-blue-500/20 text-blue-600 dark:text-blue-400">
                         Customized
                       </span>
                     )}
                   </div>
-                  <p className="text-sm text-text-muted mt-0.5 truncate">{prompt.description}</p>
+                  <p className="text-sm text-text-secondary mt-0.5 truncate">{prompt.description}</p>
                 </div>
                 <Button
                   variant="outline"
diff --git a/ui/desktop/src/components/settings/SettingsView.tsx b/ui/desktop/src/components/settings/SettingsView.tsx
index 11a16ddbafdc..92d2024ceb49 100644
--- a/ui/desktop/src/components/settings/SettingsView.tsx
+++ b/ui/desktop/src/components/settings/SettingsView.tsx
@@ -90,7 +90,7 @@ export default function SettingsView({
     <>
       <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-primary px-8 pb-8 pt-16">
             <div className="flex flex-col page-transition">
               <div className="flex justify-between items-center mb-1">
                 <h1 className="text-4xl font-light">Settings</h1>
diff --git a/ui/desktop/src/components/settings/app/AppSettingsSection.tsx b/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
index ac59aa93e288..c895c83c9cc6 100644
--- a/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
+++ b/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
@@ -157,8 +157,8 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
         <CardContent className="pt-4 space-y-4 px-4">
           <div className="flex items-center justify-between">
             <div>
-              <h3 className="text-text-default text-xs">Notifications</h3>
-              <p className="text-xs text-text-muted max-w-md mt-[2px]">
+              <h3 className="text-text-primary text-xs">Notifications</h3>
+              <p className="text-xs text-text-secondary max-w-md mt-[2px]">
                 Notifications are managed by your OS{' - '}
                 <span
                   className="underline hover:cursor-pointer"
@@ -189,8 +189,8 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
 
           <div className="flex items-center justify-between">
             <div>
-              <h3 className="text-text-default text-xs">Menu bar icon</h3>
-              <p className="text-xs text-text-muted max-w-md mt-[2px]">
+              <h3 className="text-text-primary text-xs">Menu bar icon</h3>
+              <p className="text-xs text-text-secondary max-w-md mt-[2px]">
                 Show goose in the menu bar
               </p>
             </div>
@@ -206,8 +206,8 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
           {isMacOS && (
             <div className="flex items-center justify-between">
               <div>
-                <h3 className="text-text-default text-xs">Dock icon</h3>
-                <p className="text-xs text-text-muted max-w-md mt-[2px]">Show goose in the dock</p>
+                <h3 className="text-text-primary text-xs">Dock icon</h3>
+                <p className="text-xs text-text-secondary max-w-md mt-[2px]">Show goose in the dock</p>
               </div>
               <div className="flex items-center">
                 <Switch
@@ -223,8 +223,8 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
           {/* Prevent Sleep */}
           <div className="flex items-center justify-between">
             <div>
-              <h3 className="text-text-default text-xs">Prevent Sleep</h3>
-              <p className="text-xs text-text-muted max-w-md mt-[2px]">
+              <h3 className="text-text-primary text-xs">Prevent Sleep</h3>
+              <p className="text-xs text-text-secondary max-w-md mt-[2px]">
                 Keep your computer awake while goose is running a task (screen can still lock)
               </p>
             </div>
@@ -241,8 +241,8 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
           {COST_TRACKING_ENABLED && (
             <div className="flex items-center justify-between mb-4">
               <div>
-                <h3 className="text-text-default">Cost Tracking</h3>
-                <p className="text-xs text-text-muted max-w-md mt-[2px]">
+                <h3 className="text-text-primary">Cost Tracking</h3>
+                <p className="text-xs text-text-secondary max-w-md mt-[2px]">
                   Show model pricing and usage costs
                 </p>
               </div>
@@ -392,6 +392,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
     </div>
   );
 }
diff --git a/ui/desktop/src/components/settings/app/ExternalBackendSection.tsx b/ui/desktop/src/components/settings/app/ExternalBackendSection.tsx
index 184537a9f894..6d313d1f10a7 100644
--- a/ui/desktop/src/components/settings/app/ExternalBackendSection.tsx
+++ b/ui/desktop/src/components/settings/app/ExternalBackendSection.tsx
@@ -82,8 +82,8 @@ export default function ExternalBackendSection() {
         <CardContent className="pt-4 space-y-4 px-4">
           <div className="flex items-center justify-between">
             <div>
-              <h3 className="text-text-default text-xs">Use external server</h3>
-              <p className="text-xs text-text-muted max-w-md mt-[2px]">
+              <h3 className="text-text-primary text-xs">Use external server</h3>
+              <p className="text-xs text-text-secondary max-w-md mt-[2px]">
                 Connect to a goose server running elsewhere (requires app restart)
               </p>
             </div>
@@ -100,7 +100,7 @@ export default function ExternalBackendSection() {
           {config.enabled && (
             <>
               <div className="space-y-2">
-                <label htmlFor="external-url" className="text-text-default text-xs">
+                <label htmlFor="external-url" className="text-text-primary text-xs">
                   Server URL
                 </label>
                 <Input
@@ -122,7 +122,7 @@ export default function ExternalBackendSection() {
               </div>
 
               <div className="space-y-2">
-                <label htmlFor="external-secret" className="text-text-default text-xs">
+                <label htmlFor="external-secret" className="text-text-primary text-xs">
                   Secret Key
                 </label>
                 <Input
@@ -134,7 +134,7 @@ export default function ExternalBackendSection() {
                   onBlur={() => saveConfig(config)}
                   disabled={isSaving}
                 />
-                <p className="text-xs text-text-muted">
+                <p className="text-xs text-text-secondary">
                   The secret key configured on the goosed server (GOOSE_SERVER__SECRET_KEY)
                 </p>
               </div>
diff --git a/ui/desktop/src/components/settings/app/TelemetrySettings.tsx b/ui/desktop/src/components/settings/app/TelemetrySettings.tsx
index 1cf069bcf0ff..376b4f7265db 100644
--- a/ui/desktop/src/components/settings/app/TelemetrySettings.tsx
+++ b/ui/desktop/src/components/settings/app/TelemetrySettings.tsx
@@ -95,10 +95,10 @@ export default function TelemetrySettings({ isWelcome = false }: TelemetrySettin
   const toggleRow = (
     <div className="flex items-center justify-between">
       <div>
-        <h4 className={isWelcome ? 'text-text-default text-sm' : 'text-text-default text-xs'}>
+        <h4 className={isWelcome ? 'text-text-primary text-sm' : 'text-text-primary text-xs'}>
           {toggleLabel}
         </h4>
-        <p className={`${isWelcome ? 'text-sm' : 'text-xs'} text-text-muted max-w-md mt-[2px]`}>
+        <p className={`${isWelcome ? 'text-sm' : 'text-xs'} text-text-secondary max-w-md mt-[2px]`}>
           {toggleDescription} {learnMoreLink}
         </p>
       </div>
@@ -110,8 +110,8 @@ export default function TelemetrySettings({ isWelcome = false }: TelemetrySettin
     return (
       <>
         <div className="w-full p-4 sm:p-6 bg-transparent border rounded-xl">
-          <h3 className="font-medium text-text-default text-sm sm:text-base mb-1">{title}</h3>
-          <p className="text-text-muted text-sm sm:text-base mb-4">{description}</p>
+          <h3 className="font-medium text-text-primary text-sm sm:text-base mb-1">{title}</h3>
+          <p className="text-text-secondary text-sm sm:text-base mb-4">{description}</p>
           {toggleRow}
         </div>
         {modal}
diff --git a/ui/desktop/src/components/settings/app/UpdateSection.tsx b/ui/desktop/src/components/settings/app/UpdateSection.tsx
index 1f4f97855bfb..46b9a835536a 100644
--- a/ui/desktop/src/components/settings/app/UpdateSection.tsx
+++ b/ui/desktop/src/components/settings/app/UpdateSection.tsx
@@ -206,18 +206,18 @@ export default function UpdateSection() {
 
   return (
     <div>
-      <div className="text-sm text-text-muted mb-4 flex items-center gap-2">
+      <div className="text-sm text-text-secondary mb-4 flex items-center gap-2">
         <div className="flex flex-col">
-          <div className="text-text-default text-2xl font-mono">
+          <div className="text-text-primary text-2xl font-mono">
             {updateInfo.currentVersion || 'Loading...'}
           </div>
-          <div className="text-xs text-text-muted">Current version</div>
+          <div className="text-xs text-text-secondary">Current version</div>
         </div>
         {updateInfo.latestVersion && updateInfo.isUpdateAvailable && (
-          <span className="text-text-muted"> → {updateInfo.latestVersion} available</span>
+          <span className="text-text-secondary"> → {updateInfo.latestVersion} available</span>
         )}
         {updateInfo.currentVersion && updateInfo.isUpdateAvailable === false && (
-          <span className="text-text-default"> (up to date)</span>
+          <span className="text-text-primary"> (up to date)</span>
         )}
       </div>
 
@@ -240,7 +240,7 @@ export default function UpdateSection() {
         </div>
 
         {getStatusMessage() && (
-          <div className="flex items-center gap-2 text-xs text-text-muted">
+          <div className="flex items-center gap-2 text-xs text-text-secondary">
             {getStatusIcon()}
             <span>{getStatusMessage()}</span>
           </div>
@@ -248,7 +248,7 @@ export default function UpdateSection() {
 
         {updateStatus === 'downloading' && (
           <div className="w-full mt-2">
-            <div className="flex justify-between text-xs text-text-muted mb-1">
+            <div className="flex justify-between text-xs text-text-secondary mb-1">
               <span>Downloading update...</span>
               <span>{progress}%</span>
             </div>
@@ -263,7 +263,7 @@ export default function UpdateSection() {
 
         {/* Update information */}
         {updateInfo.isUpdateAvailable && updateStatus === 'idle' && (
-          <div className="text-xs text-text-muted mt-4 space-y-1">
+          <div className="text-xs text-text-secondary mt-4 space-y-1">
             <p>Update will be downloaded automatically in the background.</p>
             {isUsingGitHubFallback ? (
               <p className="text-xs text-amber-600">
@@ -278,13 +278,13 @@ export default function UpdateSection() {
         )}
 
         {updateStatus === 'ready' && (
-          <div className="text-xs text-text-muted mt-4 space-y-1">
+          <div className="text-xs text-text-secondary mt-4 space-y-1">
             {isUsingGitHubFallback ? (
               <>
                 <p className="text-xs text-green-600">
                   ✓ Update is ready! Click "Install & Restart" for installation instructions.
                 </p>
-                <p className="text-xs text-text-muted">
+                <p className="text-xs text-text-secondary">
                   Manual installation required for this update method.
                 </p>
               </>
@@ -293,7 +293,7 @@ export default function UpdateSection() {
                 <p className="text-xs text-green-600">
                   ✓ Update is ready! It will be installed when you quit Goose.
                 </p>
-                <p className="text-xs text-text-muted">
+                <p className="text-xs text-text-secondary">
                   Or click "Install & Restart" to update now.
                 </p>
               </>
diff --git a/ui/desktop/src/components/settings/chat/GoosehintsModal.tsx b/ui/desktop/src/components/settings/chat/GoosehintsModal.tsx
index b4e925c930b5..29eb0272540b 100644
--- a/ui/desktop/src/components/settings/chat/GoosehintsModal.tsx
+++ b/ui/desktop/src/components/settings/chat/GoosehintsModal.tsx
@@ -12,7 +12,7 @@ import {
 import { errorMessage } from '../../../utils/conversionUtils';
 
 const HelpText = () => (
-  <div className="text-sm flex-col space-y-4 text-text-muted">
+  <div className="text-sm flex-col space-y-4 text-text-secondary">
     <p>
       .goosehints is a text file used to provide additional context about your project and improve
       the communication with Goose.
@@ -39,7 +39,7 @@ const HelpText = () => (
 );
 
 const ErrorDisplay = ({ error }: { error: Error }) => (
-  <div className="text-sm text-text-muted">
+  <div className="text-sm text-text-secondary">
     <div className="text-red-600">Error reading .goosehints file: {errorMessage(error)}</div>
   </div>
 );
@@ -123,7 +123,7 @@ export const GoosehintsModal = ({ directory, setIsGoosehintsModalOpen }: Goosehi
                 <FileInfo filePath={goosehintsFilePath} found={goosehintsFileFound} />
                 <textarea
                   value={goosehintsFile}
-                  className="w-full h-80 border rounded-md p-2 text-sm resize-none bg-background-default text-text-default border-border-default focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full h-80 border rounded-md p-2 text-sm resize-none bg-background-primary text-text-primary border-border-primary focus:outline-none focus:ring-2 focus:ring-blue-500"
                   onChange={(event) => setGoosehintsFile(event.target.value)}
                   placeholder="Enter project hints here..."
                 />
diff --git a/ui/desktop/src/components/settings/chat/GoosehintsSection.tsx b/ui/desktop/src/components/settings/chat/GoosehintsSection.tsx
index 5436c828492d..c84e44f15084 100644
--- a/ui/desktop/src/components/settings/chat/GoosehintsSection.tsx
+++ b/ui/desktop/src/components/settings/chat/GoosehintsSection.tsx
@@ -11,8 +11,8 @@ export const GoosehintsSection = () => {
     <>
       <div className="flex items-center justify-between px-2 py-2">
         <div className="flex-1">
-          <h3 className="text-text-default">Project Hints (.goosehints)</h3>
-          <p className="text-xs text-text-muted mt-[2px]">
+          <h3 className="text-text-primary">Project Hints (.goosehints)</h3>
+          <p className="text-xs text-text-secondary mt-[2px]">
             Configure your project's .goosehints file to provide additional context to Goose
           </p>
         </div>
diff --git a/ui/desktop/src/components/settings/chat/SpellcheckToggle.tsx b/ui/desktop/src/components/settings/chat/SpellcheckToggle.tsx
index 95275746fe8b..73a4444f682e 100644
--- a/ui/desktop/src/components/settings/chat/SpellcheckToggle.tsx
+++ b/ui/desktop/src/components/settings/chat/SpellcheckToggle.tsx
@@ -18,10 +18,10 @@ export const SpellcheckToggle = () => {
   };
 
   return (
-    <div className="flex items-center justify-between py-2 px-2 hover:bg-background-muted rounded-lg transition-all">
+    <div className="flex items-center justify-between py-2 px-2 hover:bg-background-secondary rounded-lg transition-all">
       <div>
-        <h3 className="text-text-default">Enable Spellcheck</h3>
-        <p className="text-xs text-text-muted max-w-md mt-[2px]">
+        <h3 className="text-text-primary">Enable Spellcheck</h3>
+        <p className="text-xs text-text-secondary max-w-md mt-[2px]">
           Check spelling in the chat input. Requires restart to take effect.
         </p>
       </div>
diff --git a/ui/desktop/src/components/settings/config/ConfigSettings.tsx b/ui/desktop/src/components/settings/config/ConfigSettings.tsx
index b617222b5f5e..00cb0579abac 100644
--- a/ui/desktop/src/components/settings/config/ConfigSettings.tsx
+++ b/ui/desktop/src/components/settings/config/ConfigSettings.tsx
@@ -171,18 +171,18 @@ export default function ConfigSettings() {
             <div className="flex-1 max-h-[60vh] overflow-auto pr-4">
               <div className="space-y-4">
                 {configEntries.length === 0 ? (
-                  <p className="text-text-muted">No configuration settings found.</p>
+                  <p className="text-text-secondary">No configuration settings found.</p>
                 ) : (
                   configEntries.map(([key, _value]) => (
                     <div key={key} className="grid grid-cols-[200px_1fr_auto] gap-3 items-center">
-                      <label className="text-sm font-medium text-text-default" title={key}>
+                      <label className="text-sm font-medium text-text-primary" title={key}>
                         {getUiNames(key)}
                       </label>
                       <Input
                         value={String(configValues[key] || '')}
                         onChange={(e) => handleChange(key, e.target.value)}
                         className={cn(
-                          'text-text-default border-border-default hover:border-border-default transition-colors',
+                          'text-text-primary border-border-primary hover:border-border-primary transition-colors',
                           modifiedKeys.has(key) && 'border-blue-500 focus:ring-blue-500/20'
                         )}
                         placeholder={`Enter ${getUiNames(key)}`}
diff --git a/ui/desktop/src/components/settings/dictation/DictationSettings.tsx b/ui/desktop/src/components/settings/dictation/DictationSettings.tsx
index 6b67ddd5c3b8..848346c38d3c 100644
--- a/ui/desktop/src/components/settings/dictation/DictationSettings.tsx
+++ b/ui/desktop/src/components/settings/dictation/DictationSettings.tsx
@@ -95,27 +95,27 @@ export const DictationSettings = () => {
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between py-2 px-2 hover:bg-background-muted rounded-lg transition-all">
+      <div className="flex items-center justify-between py-2 px-2 hover:bg-background-secondary rounded-lg transition-all">
         <div>
-          <h3 className="text-text-default">Voice Dictation Provider</h3>
-          <p className="text-xs text-text-muted max-w-md mt-[2px]">
+          <h3 className="text-text-primary">Voice Dictation Provider</h3>
+          <p className="text-xs text-text-secondary max-w-md mt-[2px]">
             Choose how voice is converted to text
           </p>
         </div>
         <div className="relative">
           <button
             onClick={handleDropdownToggle}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm border border-border-default rounded-md hover:border-border-default transition-colors text-text-default bg-background-default"
+            className="flex items-center gap-2 px-3 py-1.5 text-sm border border-border-primary rounded-md hover:border-border-primary transition-colors text-text-primary bg-background-primary"
           >
             {getProviderLabel(provider)}
             <ChevronDown className="w-4 h-4" />
           </button>
 
           {showProviderDropdown && (
-            <div className="absolute right-0 mt-1 w-max min-w-[250px] max-w-[350px] bg-background-default border border-border-default rounded-md shadow-lg z-50">
+            <div className="absolute right-0 mt-1 w-max min-w-[250px] max-w-[350px] bg-background-primary border border-border-primary rounded-md shadow-lg z-50">
               <button
                 onClick={() => handleProviderChange(null)}
-                className="w-full px-3 py-2 text-left text-sm transition-colors hover:bg-background-muted text-text-default whitespace-nowrap first:rounded-t-md"
+                className="w-full px-3 py-2 text-left text-sm transition-colors hover:bg-background-secondary text-text-primary whitespace-nowrap first:rounded-t-md"
               >
                 <span className="flex items-center justify-between gap-2">
                   <span>Disabled</span>
@@ -127,13 +127,13 @@ export const DictationSettings = () => {
                 <button
                   key={p}
                   onClick={() => handleProviderChange(p)}
-                  className="w-full px-3 py-2 text-left text-sm transition-colors hover:bg-background-muted text-text-default whitespace-nowrap last:rounded-b-md"
+                  className="w-full px-3 py-2 text-left text-sm transition-colors hover:bg-background-secondary text-text-primary whitespace-nowrap last:rounded-b-md"
                 >
                   <span className="flex items-center justify-between gap-2">
                     <span>
                       {getProviderLabel(p)}
                       {!providerStatuses[p]?.configured && (
-                        <span className="text-xs ml-1 text-text-muted">(not configured)</span>
+                        <span className="text-xs ml-1 text-text-secondary">(not configured)</span>
                       )}
                     </span>
                     {provider === p && <span>✓</span>}
@@ -152,9 +152,9 @@ export const DictationSettings = () => {
               <LocalModelManager />
             </div>
           ) : providerStatuses[provider].uses_provider_config ? (
-            <div className="py-2 px-2 bg-background-muted rounded-lg">
+            <div className="py-2 px-2 bg-background-secondary rounded-lg">
               {!providerStatuses[provider].configured ? (
-                <p className="text-xs text-text-muted">
+                <p className="text-xs text-text-secondary">
                   Configure the API key in <b>{providerStatuses[provider].settings_path}</b>
                 </p>
               ) : (
@@ -164,10 +164,10 @@ export const DictationSettings = () => {
               )}
             </div>
           ) : (
-            <div className="py-2 px-2 bg-background-muted rounded-lg">
+            <div className="py-2 px-2 bg-background-secondary rounded-lg">
               <div className="mb-2">
-                <h4 className="text-text-default text-sm">API Key</h4>
-                <p className="text-xs text-text-muted mt-[2px]">
+                <h4 className="text-text-primary text-sm">API Key</h4>
+                <p className="text-xs text-text-secondary mt-[2px]">
                   Required for transcription
                   {providerStatuses[provider]?.configured && (
                     <span className="text-green-600 ml-2">(Configured)</span>
diff --git a/ui/desktop/src/components/settings/dictation/LocalModelManager.tsx b/ui/desktop/src/components/settings/dictation/LocalModelManager.tsx
index 1bd0bc3cfc3e..6fdd4da784ec 100644
--- a/ui/desktop/src/components/settings/dictation/LocalModelManager.tsx
+++ b/ui/desktop/src/components/settings/dictation/LocalModelManager.tsx
@@ -143,7 +143,7 @@ export const LocalModelManager = () => {
 
   return (
     <div className="space-y-3">
-      <div className="text-xs text-text-muted mb-2">
+      <div className="text-xs text-text-secondary mb-2">
         <p>
           Supports GPU acceleration (CUDA for NVIDIA, Metal for Apple Silicon). GPU features must be
           enabled at build time for hardware acceleration.
@@ -162,8 +162,8 @@ export const LocalModelManager = () => {
               key={model.id}
               className={`border rounded-lg p-3 transition-colors ${
                 isSelected
-                  ? 'border-border-accent bg-background-accent/5'
-                  : 'border-border-default bg-background-default hover:border-border-default'
+                  ? 'border-text-inverse bg-background-inverse/5'
+                  : 'border-border-primary bg-background-primary hover:border-border-primary'
               }`}
             >
               <div className="flex items-start justify-between gap-3">
@@ -177,23 +177,23 @@ export const LocalModelManager = () => {
                         className="cursor-pointer"
                       />
                     )}
-                    <h4 className="text-sm font-medium text-text-default">
+                    <h4 className="text-sm font-medium text-text-primary">
                       {capitalize(model.id)}
                     </h4>
-                    <span className="text-xs text-text-muted">{model.size_mb}MB</span>
+                    <span className="text-xs text-text-secondary">{model.size_mb}MB</span>
                     {model.recommended && (
                       <span className="text-xs bg-blue-500 text-white px-2 py-0.5 rounded">
                         Recommended
                       </span>
                     )}
                     {isSelected && (
-                      <span className="text-xs bg-background-accent text-white px-2 py-0.5 rounded">
+                      <span className="text-xs bg-background-inverse text-white px-2 py-0.5 rounded">
                         Active
                       </span>
                     )}
                   </div>
 
-                  <p className="text-xs text-text-muted mt-1">{model.description}</p>
+                  <p className="text-xs text-text-secondary mt-1">{model.description}</p>
                   {model.recommended && (
                     <p className="text-xs text-blue-600 mt-1 font-medium">
                       Recommended for your hardware
@@ -219,7 +219,7 @@ export const LocalModelManager = () => {
                     </>
                   ) : isDownloading ? (
                     <>
-                      <div className="text-xs text-text-muted min-w-[60px]">
+                      <div className="text-xs text-text-secondary min-w-[60px]">
                         {progress.progress_percent.toFixed(0)}%
                       </div>
                       <Button variant="ghost" size="sm" onClick={() => cancelDownload(model.id)}>
@@ -237,13 +237,13 @@ export const LocalModelManager = () => {
 
               {isDownloading && progress && (
                 <div className="mt-2 space-y-1">
-                  <div className="w-full bg-background-muted rounded-full h-1.5">
+                  <div className="w-full bg-background-secondary rounded-full h-1.5">
                     <div
-                      className="bg-background-accent h-1.5 rounded-full transition-all"
+                      className="bg-background-inverse h-1.5 rounded-full transition-all"
                       style={{ width: `${progress.progress_percent}%` }}
                     />
                   </div>
-                  <div className="flex justify-between text-xs text-text-muted">
+                  <div className="flex justify-between text-xs text-text-secondary">
                     <span>
                       {formatBytes(progress.bytes_downloaded)} / {formatBytes(progress.total_bytes)}
                     </span>
@@ -265,7 +265,7 @@ export const LocalModelManager = () => {
           variant="ghost"
           size="sm"
           onClick={() => setShowAllModels(!showAllModels)}
-          className="w-full text-text-muted hover:text-text-default"
+          className="w-full text-text-secondary hover:text-text-primary"
         >
           {showAllModels ? (
             <>
@@ -282,7 +282,7 @@ export const LocalModelManager = () => {
       )}
 
       {models.length === 0 && (
-        <div className="text-center py-6 text-text-muted text-sm">No models available</div>
+        <div className="text-center py-6 text-text-secondary text-sm">No models available</div>
       )}
     </div>
   );
diff --git a/ui/desktop/src/components/settings/extensions/modal/EnvVarsSection.tsx b/ui/desktop/src/components/settings/extensions/modal/EnvVarsSection.tsx
index 33df766b0a7f..35412fe6a639 100644
--- a/ui/desktop/src/components/settings/extensions/modal/EnvVarsSection.tsx
+++ b/ui/desktop/src/components/settings/extensions/modal/EnvVarsSection.tsx
@@ -94,10 +94,10 @@ export default function EnvVarsSection({
   return (
     <div>
       <div className="relative mb-2">
-        <label className="text-sm font-medium text-text-default mb-2 block">
+        <label className="text-sm font-medium text-text-primary mb-2 block">
           Environment Variables
         </label>
-        <p className="text-xs text-text-muted mb-4">
+        <p className="text-xs text-text-secondary mb-4">
           Add key-value pairs for environment variables. Click the "+" button to add after filling
           both fields. For existing secret values, click the edit button to modify.
         </p>
@@ -112,7 +112,7 @@ export default function EnvVarsSection({
                 onChange={(e) => onChange(index, 'key', e.target.value)}
                 placeholder="Variable name"
                 className={cn(
-                  'w-full text-text-default border-border-default hover:border-border-default',
+                  'w-full text-text-primary border-border-primary hover:border-border-primary',
                   isFieldInvalid(index, 'key') && 'border-red-500 focus:border-red-500'
                 )}
               />
@@ -129,10 +129,10 @@ export default function EnvVarsSection({
                 }}
                 placeholder="Value"
                 className={cn(
-                  'w-full border-border-default',
+                  'w-full border-border-primary',
                   envVar.value === '••••••••' && !envVar.isEdited
-                    ? 'text-text-muted opacity-60 cursor-not-allowed hover:border-border-default'
-                    : 'text-text-default hover:border-border-default',
+                    ? 'text-text-secondary opacity-60 cursor-not-allowed hover:border-border-primary'
+                    : 'text-text-primary hover:border-border-primary',
                   isFieldInvalid(index, 'value') && 'border-red-500 focus:border-red-500'
                 )}
               />
@@ -168,7 +168,7 @@ export default function EnvVarsSection({
           }}
           placeholder="Variable name"
           className={cn(
-            'w-full text-text-default border-border-default hover:border-border-default',
+            'w-full text-text-primary border-border-primary hover:border-border-primary',
             invalidFields.key && 'border-red-500 focus:border-red-500'
           )}
         />
@@ -180,7 +180,7 @@ export default function EnvVarsSection({
           }}
           placeholder="Value"
           className={cn(
-            'w-full text-text-default border-border-default hover:border-border-default',
+            'w-full text-text-primary border-border-primary hover:border-border-primary',
             invalidFields.value && 'border-red-500 focus:border-red-500'
           )}
         />
@@ -188,7 +188,7 @@ export default function EnvVarsSection({
           <Button
             onClick={handleAdd}
             variant="ghost"
-            className="flex items-center justify-start gap-1 px-2 pr-4 text-sm rounded-full text-text-default bg-background-default border border-border-default hover:border-border-default transition-colors min-w-[60px] h-9 [&>svg]:!size-4"
+            className="flex items-center justify-start gap-1 px-2 pr-4 text-sm rounded-full text-text-primary bg-background-primary border border-border-primary hover:border-border-primary transition-colors min-w-[60px] h-9 [&>svg]:!size-4"
           >
             <Plus /> Add
           </Button>
diff --git a/ui/desktop/src/components/settings/extensions/modal/ExtensionConfigFields.tsx b/ui/desktop/src/components/settings/extensions/modal/ExtensionConfigFields.tsx
index a2fc88e07eb9..587c5943c535 100644
--- a/ui/desktop/src/components/settings/extensions/modal/ExtensionConfigFields.tsx
+++ b/ui/desktop/src/components/settings/extensions/modal/ExtensionConfigFields.tsx
@@ -21,13 +21,13 @@ export default function ExtensionConfigFields({
     return (
       <div className="space-y-4">
         <div>
-          <label className="text-sm font-medium mb-2 block text-text-default">Command</label>
+          <label className="text-sm font-medium mb-2 block text-text-primary">Command</label>
           <div className="relative">
             <Input
               value={full_cmd}
               onChange={(e) => onChange('cmd', e.target.value)}
               placeholder="e.g. npx -y @modelcontextprotocol/my-extension <filepath>"
-              className={`w-full ${!submitAttempted || isValid ? 'border-border-default' : 'border-red-500'} text-text-default`}
+              className={`w-full ${!submitAttempted || isValid ? 'border-border-primary' : 'border-red-500'} text-text-primary`}
             />
             {submitAttempted && !isValid && (
               <div className="absolute text-xs text-red-500 mt-1">Command is required</div>
@@ -39,13 +39,13 @@ export default function ExtensionConfigFields({
   } else {
     return (
       <div>
-        <label className="text-sm font-medium mb-2 block text-text-default">Endpoint</label>
+        <label className="text-sm font-medium mb-2 block text-text-primary">Endpoint</label>
         <div className="relative">
           <Input
             value={endpoint}
             onChange={(e) => onChange('endpoint', e.target.value)}
             placeholder="Enter endpoint URL..."
-            className={`w-full ${!submitAttempted || isValid ? 'border-border-default' : 'border-red-500'} text-text-default`}
+            className={`w-full ${!submitAttempted || isValid ? 'border-border-primary' : 'border-red-500'} text-text-primary`}
           />
           {submitAttempted && !isValid && (
             <div className="absolute text-xs text-red-500 mt-1">Endpoint URL is required</div>
diff --git a/ui/desktop/src/components/settings/extensions/modal/ExtensionInfoFields.tsx b/ui/desktop/src/components/settings/extensions/modal/ExtensionInfoFields.tsx
index 6b3250251082..d4e9ccb62f2f 100644
--- a/ui/desktop/src/components/settings/extensions/modal/ExtensionInfoFields.tsx
+++ b/ui/desktop/src/components/settings/extensions/modal/ExtensionInfoFields.tsx
@@ -25,13 +25,13 @@ export default function ExtensionInfoFields({
       {/* Top row with Name and Type side by side */}
       <div className="flex justify-between gap-4">
         <div className="flex-1">
-          <label className="text-sm font-medium mb-2 block text-text-default">Extension Name</label>
+          <label className="text-sm font-medium mb-2 block text-text-primary">Extension Name</label>
           <div className="relative">
             <Input
               value={name}
               onChange={(e) => onChange('name', e.target.value)}
               placeholder="Enter extension name..."
-              className={`${!submitAttempted || isNameValid() ? 'border-border-default' : 'border-red-500'} text-text-default focus:border-border-default`}
+              className={`${!submitAttempted || isNameValid() ? 'border-border-primary' : 'border-red-500'} text-text-primary focus:border-border-primary`}
             />
             {submitAttempted && !isNameValid() && (
               <div className="absolute text-xs text-red-500 mt-1">Name is required</div>
@@ -41,7 +41,7 @@ export default function ExtensionInfoFields({
 
         {/* Type Dropdown */}
         <div className="w-[200px]">
-          <label className="text-sm font-medium mb-2 block text-text-default">Type</label>
+          <label className="text-sm font-medium mb-2 block text-text-primary">Type</label>
           <Select
             value={{
               value: type,
@@ -71,13 +71,13 @@ export default function ExtensionInfoFields({
 
       {/* Bottom row with Description spanning full width */}
       <div className="w-full">
-        <label className="text-sm font-medium mb-2 block text-text-default">Description</label>
+        <label className="text-sm font-medium mb-2 block text-text-primary">Description</label>
         <div className="relative">
           <Input
             value={description}
             onChange={(e) => onChange('description', e.target.value)}
             placeholder="Optional description..."
-            className={`text-text-default focus:border-border-default`}
+            className={`text-text-primary focus:border-border-primary`}
           />
         </div>
       </div>
diff --git a/ui/desktop/src/components/settings/extensions/modal/ExtensionModal.tsx b/ui/desktop/src/components/settings/extensions/modal/ExtensionModal.tsx
index a3ba9ccfc15b..af83290afffc 100644
--- a/ui/desktop/src/components/settings/extensions/modal/ExtensionModal.tsx
+++ b/ui/desktop/src/components/settings/extensions/modal/ExtensionModal.tsx
@@ -337,21 +337,21 @@ export default function ExtensionModal({
 
           {showDeleteConfirmation ? (
             <div className="py-4">
-              <p className="text-text-default">
+              <p className="text-text-primary">
                 This will permanently remove this extension and all of its settings.
               </p>
             </div>
           ) : (
             <div className="py-4 space-y-6">
               {formData.installation_notes && (
-                <div className="bg-background-muted border border-border-default rounded-lg p-4">
+                <div className="bg-background-secondary border border-border-primary rounded-lg p-4">
                   <div className="flex items-start gap-2">
                     <Info className="h-5 w-5 text-blue-400 shrink-0 mt-0.5" />
                     <div>
-                      <h4 className="text-sm font-medium text-text-default mb-1">
+                      <h4 className="text-sm font-medium text-text-primary mb-1">
                         Installation Notes
                       </h4>
-                      <p className="text-sm text-text-muted">{formData.installation_notes}</p>
+                      <p className="text-sm text-text-secondary">{formData.installation_notes}</p>
                     </div>
                   </div>
                 </div>
@@ -367,7 +367,7 @@ export default function ExtensionModal({
                 submitAttempted={submitAttempted}
               />
 
-              <hr className="border-t border-border-default" />
+              <hr className="border-t border-border-primary" />
 
               {/* Command */}
               <div>
@@ -389,7 +389,7 @@ export default function ExtensionModal({
 
               {formData.type === 'stdio' && (
                 <>
-                  <hr className="border-t border-border-default" />
+                  <hr className="border-t border-border-primary" />
 
                   <div>
                     <EnvVarsSection
@@ -407,7 +407,7 @@ export default function ExtensionModal({
               {formData.type === 'streamable_http' && (
                 <>
                   {/* Divider */}
-                  <hr className="border-t border-border-default" />
+                  <hr className="border-t border-border-primary" />
 
                   <div>
                     <HeadersSection
diff --git a/ui/desktop/src/components/settings/extensions/modal/ExtensionTimeoutField.tsx b/ui/desktop/src/components/settings/extensions/modal/ExtensionTimeoutField.tsx
index 6a01f033fe57..8050b21bd2ab 100644
--- a/ui/desktop/src/components/settings/extensions/modal/ExtensionTimeoutField.tsx
+++ b/ui/desktop/src/components/settings/extensions/modal/ExtensionTimeoutField.tsx
@@ -29,14 +29,14 @@ export default function ExtensionTimeoutField({
       {/* Row with Timeout and timeout input side by side */}
       <div className="flex flex-col">
         <div className="flex-1">
-          <label className="text-sm font-medium mb-2 block text-text-default">Timeout</label>
+          <label className="text-sm font-medium mb-2 block text-text-primary">Timeout</label>
         </div>
 
         <Input
           value={timeout}
           onChange={(e) => onChange('timeout', e.target.value)}
           defaultValue={300}
-          className={`${!submitAttempted || isTimeoutValid() ? 'border-border-default' : 'border-red-500'} text-text-default focus:border-border-default`}
+          className={`${!submitAttempted || isTimeoutValid() ? 'border-border-primary' : 'border-red-500'} text-text-primary focus:border-border-primary`}
         />
         {submitAttempted && !isTimeoutValid() && (
           <div className="absolute text-xs text-red-500 mt-1">Timeout </div>
diff --git a/ui/desktop/src/components/settings/extensions/modal/HeadersSection.tsx b/ui/desktop/src/components/settings/extensions/modal/HeadersSection.tsx
index 67b8c58fff5b..94ad75ef8bba 100644
--- a/ui/desktop/src/components/settings/extensions/modal/HeadersSection.tsx
+++ b/ui/desktop/src/components/settings/extensions/modal/HeadersSection.tsx
@@ -95,8 +95,8 @@ export default function HeadersSection({
   return (
     <div>
       <div className="relative mb-2">
-        <label className="text-sm font-medium text-text-default mb-2 block">Request Headers</label>
-        <p className="text-xs text-text-muted mb-4">
+        <label className="text-sm font-medium text-text-primary mb-2 block">Request Headers</label>
+        <p className="text-xs text-text-secondary mb-4">
           Add custom HTTP headers to include in requests to the MCP server. Click the "+" button to
           add after filling both fields.
         </p>
@@ -111,7 +111,7 @@ export default function HeadersSection({
                 onChange={(e) => onChange(index, 'key', e.target.value)}
                 placeholder="Header name"
                 className={cn(
-                  'w-full text-text-default border-border-default hover:border-border-default',
+                  'w-full text-text-primary border-border-primary hover:border-border-primary',
                   isFieldInvalid(index, 'key') && 'border-red-500 focus:border-red-500'
                 )}
               />
@@ -122,7 +122,7 @@ export default function HeadersSection({
                 onChange={(e) => onChange(index, 'value', e.target.value)}
                 placeholder="Value"
                 className={cn(
-                  'w-full text-text-default border-border-default hover:border-border-default',
+                  'w-full text-text-primary border-border-primary hover:border-border-primary',
                   isFieldInvalid(index, 'value') && 'border-red-500 focus:border-red-500'
                 )}
               />
@@ -146,7 +146,7 @@ export default function HeadersSection({
           }}
           placeholder="Header name"
           className={cn(
-            'w-full text-text-default border-border-default hover:border-border-default',
+            'w-full text-text-primary border-border-primary hover:border-border-primary',
             invalidFields.key && 'border-red-500 focus:border-red-500'
           )}
         />
@@ -158,14 +158,14 @@ export default function HeadersSection({
           }}
           placeholder="Value"
           className={cn(
-            'w-full text-text-default border-border-default hover:border-border-default',
+            'w-full text-text-primary border-border-primary hover:border-border-primary',
             invalidFields.value && 'border-red-500 focus:border-red-500'
           )}
         />
         <Button
           onClick={handleAdd}
           variant="ghost"
-          className="flex items-center justify-start gap-1 px-2 pr-4 text-sm rounded-full text-text-default bg-background-default border border-border-default hover:border-border-default transition-colors min-w-[60px] h-9 [&>svg]:!size-4"
+          className="flex items-center justify-start gap-1 px-2 pr-4 text-sm rounded-full text-text-primary bg-background-primary border border-border-primary hover:border-border-primary transition-colors min-w-[60px] h-9 [&>svg]:!size-4"
         >
           <Plus /> Add
         </Button>
diff --git a/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionItem.tsx b/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionItem.tsx
index cad47f4a5395..7f1eb127a2c4 100644
--- a/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionItem.tsx
+++ b/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionItem.tsx
@@ -84,7 +84,7 @@ export default function ExtensionItem({
           <div className="flex items-center justify-end gap-2">
             {editable && (
               <button
-                className="text-text-muted hover:text-text-default"
+                className="text-text-secondary hover:text-text-primary"
                 aria-label={`Configure ${getFriendlyTitle(extension)} Extension`}
                 onClick={() => onConfigure?.(extension)}
               >
@@ -101,7 +101,7 @@ export default function ExtensionItem({
           </div>
         </CardAction>
       </CardHeader>
-      <CardContent className="px-4 overflow-hidden text-sm break-words text-text-muted">
+      <CardContent className="px-4 overflow-hidden text-sm break-words text-text-secondary">
         {renderSubtitle()}
       </CardContent>
     </Card>
diff --git a/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionList.tsx b/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionList.tsx
index 288c1c5f56a5..087748c8d165 100644
--- a/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionList.tsx
+++ b/ui/desktop/src/components/settings/extensions/subcomponents/ExtensionList.tsx
@@ -51,7 +51,7 @@ export default function ExtensionList({
     <div className="space-y-8">
       {sortedEnabledExtensions.length > 0 && (
         <div>
-          <h2 className="text-lg font-medium text-text-default mb-4 flex items-center gap-2">
+          <h2 className="text-lg font-medium text-text-primary mb-4 flex items-center gap-2">
             <span className="w-2 h-2 bg-green-500 rounded-full"></span>
             Default Extensions ({sortedEnabledExtensions.length})
           </h2>
@@ -71,7 +71,7 @@ export default function ExtensionList({
 
       {sortedDisabledExtensions.length > 0 && (
         <div>
-          <h2 className="text-lg font-medium text-text-muted mb-4 flex items-center gap-2">
+          <h2 className="text-lg font-medium text-text-secondary mb-4 flex items-center gap-2">
             <span className="w-2 h-2 bg-gray-400 rounded-full"></span>
             Available Extensions ({sortedDisabledExtensions.length})
           </h2>
@@ -90,7 +90,7 @@ export default function ExtensionList({
       )}
 
       {extensions.length === 0 && (
-        <div className="text-center text-text-muted py-8">No extensions available</div>
+        <div className="text-center text-text-secondary py-8">No extensions available</div>
       )}
     </div>
   );
diff --git a/ui/desktop/src/components/settings/keyboard/KeyboardShortcutsSection.tsx b/ui/desktop/src/components/settings/keyboard/KeyboardShortcutsSection.tsx
index 61d7a72da037..a31e446de069 100644
--- a/ui/desktop/src/components/settings/keyboard/KeyboardShortcutsSection.tsx
+++ b/ui/desktop/src/components/settings/keyboard/KeyboardShortcutsSection.tsx
@@ -257,8 +257,8 @@ export default function KeyboardShortcutsSection() {
           <CardContent className="pt-4 px-4 pb-4">
             <div className="flex items-start justify-between gap-4">
               <div className="flex-1">
-                <h3 className="text-text-default text-sm font-medium mb-1">Restart Required</h3>
-                <p className="text-xs text-text-muted">
+                <h3 className="text-text-primary text-sm font-medium mb-1">Restart Required</h3>
+                <p className="text-xs text-text-secondary">
                   Changes to application shortcuts (like New Chat, Settings, etc.) require
                   restarting Goose to take effect. Global shortcuts (Focus Window, Quick Launcher)
                   work immediately.
@@ -292,8 +292,8 @@ export default function KeyboardShortcutsSection() {
               return (
                 <div key={config.key} className="flex items-center justify-between">
                   <div className="flex-1">
-                    <h3 className="text-text-default text-xs">{config.label}</h3>
-                    <p className="text-xs text-text-muted max-w-md mt-[2px]">
+                    <h3 className="text-text-primary text-xs">{config.label}</h3>
+                    <p className="text-xs text-text-secondary max-w-md mt-[2px]">
                       {config.description}
                     </p>
                   </div>
@@ -301,11 +301,11 @@ export default function KeyboardShortcutsSection() {
                     {!isEditing ? (
                       <>
                         {shortcut ? (
-                          <span className="text-xs font-mono px-2 py-1 bg-background-muted rounded min-w-[120px] text-center">
+                          <span className="text-xs font-mono px-2 py-1 bg-background-secondary rounded min-w-[120px] text-center">
                             {formatShortcut(shortcut)}
                           </span>
                         ) : (
-                          <span className="text-xs text-text-muted min-w-[120px] text-center">
+                          <span className="text-xs text-text-secondary min-w-[120px] text-center">
                             Disabled
                           </span>
                         )}
@@ -344,8 +344,8 @@ export default function KeyboardShortcutsSection() {
         <CardContent className="pt-4 px-4 pb-4">
           <div className="flex items-center justify-between">
             <div>
-              <h3 className="text-text-default text-sm font-medium">Reset to Defaults</h3>
-              <p className="text-xs text-text-muted max-w-md mt-[2px]">
+              <h3 className="text-text-primary text-sm font-medium">Reset to Defaults</h3>
+              <p className="text-xs text-text-secondary max-w-md mt-[2px]">
                 Restore all keyboard shortcuts to their original configuration
               </p>
             </div>
diff --git a/ui/desktop/src/components/settings/keyboard/ShortcutRecorder.tsx b/ui/desktop/src/components/settings/keyboard/ShortcutRecorder.tsx
index 871d037a3c9b..36c31a4bd168 100644
--- a/ui/desktop/src/components/settings/keyboard/ShortcutRecorder.tsx
+++ b/ui/desktop/src/components/settings/keyboard/ShortcutRecorder.tsx
@@ -141,27 +141,27 @@ export function ShortcutRecorder({
             text-xs font-mono px-3 py-2 rounded border
             ${
               recording
-                ? 'bg-background-default ring-1'
+                ? 'bg-background-primary ring-1'
                 : conflict
-                  ? 'bg-background-muted border-yellow-600/50'
-                  : 'bg-background-muted border-border-default cursor-pointer'
+                  ? 'bg-background-secondary border-yellow-600/50'
+                  : 'bg-background-secondary border-border-primary cursor-pointer'
             }
             focus:outline-none focus:ring-1
             w-64 text-center
           `}
         >
           {recording ? (
-            <span className="text-text-muted animate-pulse">Press shortcut...</span>
+            <span className="text-text-secondary animate-pulse">Press shortcut...</span>
           ) : displayShortcut ? (
-            <span className={conflict ? 'text-yellow-600' : 'text-text-default'}>
+            <span className={conflict ? 'text-yellow-600' : 'text-text-primary'}>
               {displayShortcut}
             </span>
           ) : capturedShortcut ? (
-            <span className={conflict ? 'text-yellow-600' : 'text-text-default'}>
+            <span className={conflict ? 'text-yellow-600' : 'text-text-primary'}>
               {formatShortcut(capturedShortcut)}
             </span>
           ) : (
-            <span className="text-text-muted">Click to record...</span>
+            <span className="text-text-secondary">Click to record...</span>
           )}
         </div>
         <Button
diff --git a/ui/desktop/src/components/settings/mode/ConfigureApproveMode.tsx b/ui/desktop/src/components/settings/mode/ConfigureApproveMode.tsx
index bed8af2d30e7..0142e716b14f 100644
--- a/ui/desktop/src/components/settings/mode/ConfigureApproveMode.tsx
+++ b/ui/desktop/src/components/settings/mode/ConfigureApproveMode.tsx
@@ -50,15 +50,15 @@ export function ConfigureApproveMode({
 
   return (
     <div className="fixed inset-0 bg-black/30">
-      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[440px] bg-background-default rounded-xl overflow-hidden p-[16px] pt-[24px] pb-0">
+      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[440px] bg-background-primary rounded-xl overflow-hidden p-[16px] pt-[24px] pb-0">
         <div className="px-4 pb-0 space-y-6">
           {/* Header */}
           <div className="flex">
-            <h2 className="text-2xl font-regular text-text-default">Configure approve mode</h2>
+            <h2 className="text-2xl font-regular text-text-primary">Configure approve mode</h2>
           </div>
 
           <div className="mt-[24px]">
-            <p className="text-sm text-text-muted mb-6">
+            <p className="text-sm text-text-secondary mb-6">
               Approve requests can either be given to all tool requests or determine which actions
               may need integration
             </p>
@@ -85,7 +85,7 @@ export function ConfigureApproveMode({
               variant="ghost"
               disabled={isSubmitting}
               onClick={handleModeSubmit}
-              className="w-full h-[60px] rounded-none border-t border-border-default hover:bg-background-muted text-text-default dark:border-gray-600 text-base font-regular"
+              className="w-full h-[60px] rounded-none border-t border-border-primary hover:bg-background-secondary text-text-primary dark:border-gray-600 text-base font-regular"
             >
               {isSubmitting ? 'Saving...' : 'Save'}
             </Button>
@@ -94,7 +94,7 @@ export function ConfigureApproveMode({
               variant="ghost"
               disabled={isSubmitting}
               onClick={onClose}
-              className="w-full h-[60px] rounded-none border-t border-border-default text-text-muted hover:bg-background-muted dark:border-gray-600 text-base font-regular"
+              className="w-full h-[60px] rounded-none border-t border-border-primary text-text-secondary hover:bg-background-secondary dark:border-gray-600 text-base font-regular"
             >
               Cancel
             </Button>
diff --git a/ui/desktop/src/components/settings/mode/ConversationLimitsDropdown.tsx b/ui/desktop/src/components/settings/mode/ConversationLimitsDropdown.tsx
index 283d6fae86a9..adbc4b4ceec7 100644
--- a/ui/desktop/src/components/settings/mode/ConversationLimitsDropdown.tsx
+++ b/ui/desktop/src/components/settings/mode/ConversationLimitsDropdown.tsx
@@ -21,12 +21,12 @@ export const ConversationLimitsDropdown = ({
     <div className="pt-4">
       <button
         onClick={toggleExpanded}
-        className="w-full flex items-center justify-between py-2 px-2 hover:bg-background-muted rounded-lg transition-all group"
+        className="w-full flex items-center justify-between py-2 px-2 hover:bg-background-secondary rounded-lg transition-all group"
       >
-        <h3 className="text-text-default">Conversation Limits</h3>
+        <h3 className="text-text-primary">Conversation Limits</h3>
 
         <ChevronDown
-          className={`w-4 h-4 text-text-muted transition-transform duration-200 ease-in-out ${
+          className={`w-4 h-4 text-text-secondary transition-transform duration-200 ease-in-out ${
             isExpanded ? 'rotate-180' : 'rotate-0'
           }`}
         />
@@ -38,10 +38,10 @@ export const ConversationLimitsDropdown = ({
         }`}
       >
         <div className="space-y-3 pb-2">
-          <div className="flex items-center justify-between py-2 px-2 bg-background-muted rounded-lg transform transition-all duration-200 ease-in-out">
+          <div className="flex items-center justify-between py-2 px-2 bg-background-secondary rounded-lg transform transition-all duration-200 ease-in-out">
             <div>
-              <h4 className="text-text-default text-sm">Max Turns</h4>
-              <p className="text-xs text-text-muted mt-[2px]">
+              <h4 className="text-text-primary text-sm">Max Turns</h4>
+              <p className="text-xs text-text-secondary mt-[2px]">
                 Maximum agent turns before Goose asks for user input
               </p>
             </div>
diff --git a/ui/desktop/src/components/settings/mode/ModeSelectionItem.tsx b/ui/desktop/src/components/settings/mode/ModeSelectionItem.tsx
index 93d550a2634a..33ec4c617137 100644
--- a/ui/desktop/src/components/settings/mode/ModeSelectionItem.tsx
+++ b/ui/desktop/src/components/settings/mode/ModeSelectionItem.tsx
@@ -53,13 +53,13 @@ export const ModeSelectionItem = forwardRef<HTMLDivElement, ModeSelectionItemPro
     return (
       <div ref={ref} className="group hover:cursor-pointer text-sm">
         <div
-          className={`flex items-center justify-between text-text-default py-2 px-2 ${checked ? 'bg-background-muted' : 'bg-background-default hover:bg-background-muted'} rounded-lg transition-all`}
+          className={`flex items-center justify-between text-text-primary py-2 px-2 ${checked ? 'bg-background-secondary' : 'bg-background-primary hover:bg-background-secondary'} rounded-lg transition-all`}
           onClick={() => handleModeChange(mode.key)}
         >
           <div className="flex">
             <div>
-              <h3 className="text-text-default">{mode.label}</h3>
-              {showDescription && <p className="text-text-muted mt-[2px]">{mode.description}</p>}
+              <h3 className="text-text-primary">{mode.label}</h3>
+              {showDescription && <p className="text-text-secondary mt-[2px]">{mode.description}</p>}
             </div>
           </div>
 
@@ -71,7 +71,7 @@ export const ModeSelectionItem = forwardRef<HTMLDivElement, ModeSelectionItemPro
                   setIsPermissionModalOpen(true);
                 }}
               >
-                <Gear className="w-4 h-4 text-text-muted hover:text-text-default" />
+                <Gear className="w-4 h-4 text-text-secondary hover:text-text-primary" />
               </button>
             )}
             <input
@@ -83,10 +83,10 @@ export const ModeSelectionItem = forwardRef<HTMLDivElement, ModeSelectionItemPro
               className="peer sr-only"
             />
             <div
-              className="h-4 w-4 rounded-full border border-border-default 
+              className="h-4 w-4 rounded-full border border-border-primary 
                     peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
                     peer-checked:bg-white dark:peer-checked:bg-black
-                    transition-all duration-200 ease-in-out group-hover:border-border-default"
+                    transition-all duration-200 ease-in-out group-hover:border-border-primary"
             ></div>
           </div>
         </div>
diff --git a/ui/desktop/src/components/settings/models/ModelsSection.tsx b/ui/desktop/src/components/settings/models/ModelsSection.tsx
index 8e903e141b45..497f99de4c0e 100644
--- a/ui/desktop/src/components/settings/models/ModelsSection.tsx
+++ b/ui/desktop/src/components/settings/models/ModelsSection.tsx
@@ -95,8 +95,8 @@ export default function ModelsSection({ setView }: ModelsSectionProps) {
             </>
           ) : (
             <div className="animate-in fade-in duration-100">
-              <h3 className="text-text-default">{displayModelName}</h3>
-              <h4 className="text-xs text-text-muted">{provider}</h4>
+              <h3 className="text-text-primary">{displayModelName}</h3>
+              <h4 className="text-xs text-text-secondary">{provider}</h4>
             </div>
           )}
           <ModelSettingsButtons setView={setView} />
diff --git a/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx b/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx
index 2c7e505f3bd9..2de9a95ec13d 100644
--- a/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx
+++ b/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx
@@ -143,7 +143,7 @@ export default function ModelsBottomBar({
     <div className="relative flex items-center" ref={dropdownRef}>
       <BottomMenuAlertPopover alerts={alerts} />
       <DropdownMenu>
-        <DropdownMenuTrigger className="flex items-center hover:cursor-pointer max-w-[180px] md:max-w-[200px] lg:max-w-[380px] min-w-0 text-text-default/70 hover:text-text-default transition-colors">
+        <DropdownMenuTrigger className="flex items-center hover:cursor-pointer max-w-[180px] md:max-w-[200px] lg:max-w-[380px] min-w-0 text-text-primary/70 hover:text-text-primary transition-colors">
           <div className="flex items-center truncate max-w-[130px] md:max-w-[200px] lg:max-w-[360px] min-w-0">
             <Bot className="mr-1 h-4 w-4 flex-shrink-0" />
             <span className="truncate text-xs">
@@ -155,7 +155,7 @@ export default function ModelsBottomBar({
           </div>
         </DropdownMenuTrigger>
         <DropdownMenuContent side="top" align="center" className="w-64 text-sm">
-          <h6 className="text-xs text-text-default mt-2 ml-2">Current model</h6>
+          <h6 className="text-xs text-text-primary mt-2 ml-2">Current model</h6>
           <p className="flex items-center justify-between text-sm mx-2 pb-2 border-b mb-2">
             {displayModelName}
             {displayProvider && ` — ${displayProvider}`}
diff --git a/ui/desktop/src/components/settings/models/subcomponents/LeadWorkerSettings.tsx b/ui/desktop/src/components/settings/models/subcomponents/LeadWorkerSettings.tsx
index cba30c1c441f..9e962d5f1d1c 100644
--- a/ui/desktop/src/components/settings/models/subcomponents/LeadWorkerSettings.tsx
+++ b/ui/desktop/src/components/settings/models/subcomponents/LeadWorkerSettings.tsx
@@ -204,7 +204,7 @@ export function LeadWorkerSettings({ isOpen, onClose }: LeadWorkerSettingsProps)
         </DialogHeader>
         <div className="p-4 space-y-4">
           <div className="space-y-2">
-            <p className="text-sm text-text-muted">
+            <p className="text-sm text-text-secondary">
               Configure a lead model for planning and a worker model for execution
             </p>
           </div>
@@ -215,9 +215,9 @@ export function LeadWorkerSettings({ isOpen, onClose }: LeadWorkerSettingsProps)
               id="enable-lead-worker"
               checked={isEnabled}
               onChange={(e) => setIsEnabled(e.target.checked)}
-              className="rounded border-border-default"
+              className="rounded border-border-primary"
             />
-            <label htmlFor="enable-lead-worker" className="text-sm text-text-default">
+            <label htmlFor="enable-lead-worker" className="text-sm text-text-primary">
               Enable lead/worker mode
             </label>
           </div>
@@ -225,13 +225,13 @@ export function LeadWorkerSettings({ isOpen, onClose }: LeadWorkerSettingsProps)
           <div className="space-y-4">
             <div className="space-y-2">
               <div className="flex items-center justify-between">
-                <label className={`text-sm ${!isEnabled ? 'text-text-muted' : 'text-text-muted'}`}>
+                <label className={`text-sm ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'}`}>
                   Lead Model
                 </label>
                 {isLeadCustomModel && (
                   <button
                     onClick={() => setIsLeadCustomModel(false)}
-                    className={`text-xs ${!isEnabled ? 'text-text-muted' : 'text-text-muted'} hover:underline`}
+                    className={`text-xs ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'} hover:underline`}
                     type="button"
                   >
                     Back to model list
@@ -270,20 +270,20 @@ export function LeadWorkerSettings({ isOpen, onClose }: LeadWorkerSettingsProps)
                   disabled={!isEnabled}
                 />
               )}
-              <p className={`text-xs ${!isEnabled ? 'text-text-muted' : 'text-text-muted'}`}>
+              <p className={`text-xs ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'}`}>
                 Strong model for initial planning and fallback recovery
               </p>
             </div>
 
             <div className="space-y-2">
               <div className="flex items-center justify-between">
-                <label className={`text-sm ${!isEnabled ? 'text-text-muted' : 'text-text-muted'}`}>
+                <label className={`text-sm ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'}`}>
                   Worker Model
                 </label>
                 {isWorkerCustomModel && (
                   <button
                     onClick={() => setIsWorkerCustomModel(false)}
-                    className={`text-xs ${!isEnabled ? 'text-text-muted' : 'text-text-muted'} hover:underline`}
+                    className={`text-xs ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'} hover:underline`}
                     type="button"
                   >
                     Back to model list
@@ -324,17 +324,17 @@ export function LeadWorkerSettings({ isOpen, onClose }: LeadWorkerSettingsProps)
                   disabled={!isEnabled}
                 />
               )}
-              <p className={`text-xs ${!isEnabled ? 'text-text-muted' : 'text-text-muted'}`}>
+              <p className={`text-xs ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'}`}>
                 Fast model for routine execution tasks
               </p>
             </div>
 
             <div
-              className={`space-y-4 pt-4 border-t border-border-default ${!isEnabled ? 'opacity-50' : ''}`}
+              className={`space-y-4 pt-4 border-t border-border-primary ${!isEnabled ? 'opacity-50' : ''}`}
             >
               <div className="space-y-2">
                 <label
-                  className={`text-sm flex items-center gap-1 ${!isEnabled ? 'text-text-muted' : 'text-text-muted'}`}
+                  className={`text-sm flex items-center gap-1 ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'}`}
                 >
                   Initial Lead Turns
                 </label>
@@ -347,14 +347,14 @@ export function LeadWorkerSettings({ isOpen, onClose }: LeadWorkerSettingsProps)
                   className={`w-20 ${!isEnabled ? 'opacity-50 cursor-not-allowed' : ''}`}
                   disabled={!isEnabled}
                 />
-                <p className={`text-xs ${!isEnabled ? 'text-text-muted' : 'text-text-muted'}`}>
+                <p className={`text-xs ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'}`}>
                   Number of turns to use the lead model at the start
                 </p>
               </div>
 
               <div className="space-y-2">
                 <label
-                  className={`text-sm flex items-center gap-1 ${!isEnabled ? 'text-text-muted' : 'text-text-muted'}`}
+                  className={`text-sm flex items-center gap-1 ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'}`}
                 >
                   Failure Threshold
                 </label>
@@ -367,14 +367,14 @@ export function LeadWorkerSettings({ isOpen, onClose }: LeadWorkerSettingsProps)
                   className={`w-20 ${!isEnabled ? 'opacity-50 cursor-not-allowed' : ''}`}
                   disabled={!isEnabled}
                 />
-                <p className={`text-xs ${!isEnabled ? 'text-text-muted' : 'text-text-muted'}`}>
+                <p className={`text-xs ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'}`}>
                   Consecutive failures before switching back to lead
                 </p>
               </div>
 
               <div className="space-y-2">
                 <label
-                  className={`text-sm flex items-center gap-1 ${!isEnabled ? 'text-text-muted' : 'text-text-muted'}`}
+                  className={`text-sm flex items-center gap-1 ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'}`}
                 >
                   Fallback Turns
                 </label>
@@ -387,14 +387,14 @@ export function LeadWorkerSettings({ isOpen, onClose }: LeadWorkerSettingsProps)
                   className={`w-20 ${!isEnabled ? 'opacity-50 cursor-not-allowed' : ''}`}
                   disabled={!isEnabled}
                 />
-                <p className={`text-xs ${!isEnabled ? 'text-text-muted' : 'text-text-muted'}`}>
+                <p className={`text-xs ${!isEnabled ? 'text-text-secondary' : 'text-text-secondary'}`}>
                   Turns to use lead model during fallback
                 </p>
               </div>
             </div>
           </div>
 
-          <div className="flex justify-end space-x-2 pt-4 border-t border-border-default">
+          <div className="flex justify-end space-x-2 pt-4 border-t border-border-primary">
             <Button variant="ghost" onClick={onClose}>
               Cancel
             </Button>
diff --git a/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx b/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx
index bd18dbc58c91..7883e7e92dcf 100644
--- a/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx
+++ b/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx
@@ -369,7 +369,7 @@ export const SwitchModelModal = ({
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            <Bot size={24} className="text-text-default" />
+            <Bot size={24} className="text-text-primary" />
             {titleOverride || 'Switch models'}
           </DialogTitle>
           <DialogDescription>
@@ -381,35 +381,35 @@ export const SwitchModelModal = ({
           {usePredefinedModels ? (
             <div className="w-full flex flex-col gap-4">
               <div className="flex justify-between items-center">
-                <label className="text-sm font-medium text-text-default">Choose a model:</label>
+                <label className="text-sm font-medium text-text-primary">Choose a model:</label>
               </div>
 
               <div className="space-y-2 max-h-64 overflow-y-auto">
                 {predefinedModels.map((model) => (
                   <div key={model.id || model.name} className="group hover:cursor-pointer text-sm">
                     <div
-                      className={`flex items-center justify-between text-text-default py-2 px-2 ${
+                      className={`flex items-center justify-between text-text-primary py-2 px-2 ${
                         selectedPredefinedModel?.name === model.name
-                          ? 'bg-background-muted'
-                          : 'bg-background-default hover:bg-background-muted'
+                          ? 'bg-background-secondary'
+                          : 'bg-background-primary hover:bg-background-secondary'
                       } rounded-lg transition-all`}
                       onClick={() => setSelectedPredefinedModel(model)}
                     >
                       <div className="flex-1">
                         <div className="flex items-center justify-between">
-                          <span className="text-text-default font-medium">
+                          <span className="text-text-primary font-medium">
                             {model.alias || model.name}
                           </span>
                           {model.alias?.includes('recommended') && (
-                            <span className="text-xs bg-background-muted text-text-default px-2 py-1 rounded-full border border-border-default ml-2">
+                            <span className="text-xs bg-background-secondary text-text-primary px-2 py-1 rounded-full border border-border-primary ml-2">
                               Recommended
                             </span>
                           )}
                         </div>
                         <div className="flex items-center gap-2 mt-[2px]">
-                          <span className="text-xs text-text-muted">{model.subtext}</span>
-                          <span className="text-xs text-text-muted">•</span>
-                          <span className="text-xs text-text-muted">{model.provider}</span>
+                          <span className="text-xs text-text-secondary">{model.subtext}</span>
+                          <span className="text-xs text-text-secondary">•</span>
+                          <span className="text-xs text-text-secondary">{model.provider}</span>
                         </div>
                       </div>
 
@@ -423,10 +423,10 @@ export const SwitchModelModal = ({
                           className="peer sr-only"
                         />
                         <div
-                          className="h-4 w-4 rounded-full border border-border-default
+                          className="h-4 w-4 rounded-full border border-border-primary
                                 peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
                                 peer-checked:bg-white dark:peer-checked:bg-black
-                                transition-all duration-200 ease-in-out group-hover:border-border-default"
+                                transition-all duration-200 ease-in-out group-hover:border-border-primary"
                         ></div>
                       </div>
                     </div>
@@ -563,10 +563,10 @@ export const SwitchModelModal = ({
                   ) : (
                     <div className="flex flex-col gap-2">
                       <div className="flex justify-between">
-                        <label className="text-sm text-text-muted">Custom model name</label>
+                        <label className="text-sm text-text-secondary">Custom model name</label>
                         <button
                           onClick={() => setIsCustomModel(false)}
-                          className="text-sm text-text-muted"
+                          className="text-sm text-text-secondary"
                         >
                           Back to model list
                         </button>
@@ -611,7 +611,7 @@ export const SwitchModelModal = ({
             href={QUICKSTART_GUIDE_URL}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center text-text-muted hover:text-text-default text-sm mr-auto"
+            className="inline-flex items-center text-text-secondary hover:text-text-primary text-sm mr-auto"
           >
             <ExternalLink size={14} className="mr-1" />
             Quick start guide
diff --git a/ui/desktop/src/components/settings/permission/PermissionModal.tsx b/ui/desktop/src/components/settings/permission/PermissionModal.tsx
index 4816db6ac076..d600742da6cd 100644
--- a/ui/desktop/src/components/settings/permission/PermissionModal.tsx
+++ b/ui/desktop/src/components/settings/permission/PermissionModal.tsx
@@ -157,25 +157,25 @@ export default function PermissionModal({ extensionName, onClose }: PermissionMo
             </div>
           ) : loadError === 'no_session' ? (
             <div className="flex flex-col items-center justify-center py-8 text-center">
-              <AlertCircle className="h-12 w-12 text-text-muted mb-4" />
-              <p className="text-text-default font-medium mb-2">No active session</p>
-              <p className="text-sm text-text-muted max-w-sm">
+              <AlertCircle className="h-12 w-12 text-text-secondary mb-4" />
+              <p className="text-text-primary font-medium mb-2">No active session</p>
+              <p className="text-sm text-text-secondary max-w-sm">
                 Start a chat session first to configure tool permissions for this extension. Tool
                 permissions are loaded from the active session's extensions.
               </p>
             </div>
           ) : loadError === 'fetch_failed' ? (
             <div className="flex flex-col items-center justify-center py-8 text-center">
-              <AlertCircle className="h-12 w-12 text-text-muted mb-4" />
-              <p className="text-text-default font-medium mb-2">Failed to load tools</p>
-              <p className="text-sm text-text-muted max-w-sm">
+              <AlertCircle className="h-12 w-12 text-text-secondary mb-4" />
+              <p className="text-text-primary font-medium mb-2">Failed to load tools</p>
+              <p className="text-sm text-text-secondary max-w-sm">
                 Could not load tools for this extension. The extension may not be loaded in the
                 current session.
               </p>
             </div>
           ) : tools.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-8 text-center">
-              <p className="text-text-muted">No tools available for this extension.</p>
+              <p className="text-text-secondary">No tools available for this extension.</p>
             </div>
           ) : (
             <div className="space-y-4">
@@ -185,10 +185,10 @@ export default function PermissionModal({ extensionName, onClose }: PermissionMo
                   className="flex items-center justify-between grid grid-cols-12"
                 >
                   <div className="flex flex-col col-span-8">
-                    <label className="block text-sm font-medium text-text-default">
+                    <label className="block text-sm font-medium text-text-primary">
                       {tool.name}
                     </label>
-                    <p className="text-sm text-text-muted mb-2">
+                    <p className="text-sm text-text-secondary mb-2">
                       {getFirstSentence(tool.description)}
                     </p>
                   </div>
diff --git a/ui/desktop/src/components/settings/permission/PermissionRulesModal.tsx b/ui/desktop/src/components/settings/permission/PermissionRulesModal.tsx
index d4f5a50502ab..2ed4a3a78458 100644
--- a/ui/desktop/src/components/settings/permission/PermissionRulesModal.tsx
+++ b/ui/desktop/src/components/settings/permission/PermissionRulesModal.tsx
@@ -21,8 +21,8 @@ function RuleItem({ title, description }: { title: string; description: string }
         size="lg"
       >
         <div>
-          <h3 className="font-semibold text-text-default">{title}</h3>
-          <p className="text-xs text-text-muted mt-1">{description}</p>
+          <h3 className="font-semibold text-text-primary">{title}</h3>
+          <p className="text-xs text-text-secondary mt-1">{description}</p>
         </div>
         <ChevronRight className="w-4 h-4 text-iconStandard" />
       </Button>
@@ -34,7 +34,7 @@ function RuleItem({ title, description }: { title: string; description: string }
 function RulesSection({ title, rules }: { title: string; rules: React.ReactNode }) {
   return (
     <div className="space-y-4">
-      <h2 className="text-xl font-medium text-text-default">{title}</h2>
+      <h2 className="text-xl font-medium text-text-primary">{title}</h2>
       {rules}
     </div>
   );
@@ -106,10 +106,10 @@ export default function PermissionRulesModal({ isOpen, onClose }: PermissionRule
               </svg>
             </div>
             <div>
-              <DialogTitle className="text-3xl font-medium text-text-default">
+              <DialogTitle className="text-3xl font-medium text-text-primary">
                 Permission Rules
               </DialogTitle>
-              <p className="text-text-muted">
+              <p className="text-text-secondary">
                 Configure tool permissions for extensions to control how they interact with your
                 system.
               </p>
diff --git a/ui/desktop/src/components/settings/permission/PermissionSetting.tsx b/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
index d4fe76c69380..74394af1bcf4 100644
--- a/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
+++ b/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
@@ -22,8 +22,8 @@ function RuleItem({ title, description }: { title: string; description: string }
         size="lg"
       >
         <div>
-          <h3 className="font-semibold text-text-default">{title}</h3>
-          <p className="text-xs text-text-muted mt-1">{description}</p>
+          <h3 className="font-semibold text-text-primary">{title}</h3>
+          <p className="text-xs text-text-secondary mt-1">{description}</p>
         </div>
         <ChevronRight className="w-4 h-4 text-iconStandard" />
         {/* Modal for updating tool permission */}
@@ -36,7 +36,7 @@ function RuleItem({ title, description }: { title: string; description: string }
 function RulesSection({ title, rules }: { title: string; rules: React.ReactNode }) {
   return (
     <div className="space-y-4">
-      <h2 className="text-xl font-medium text-text-default">{title}</h2>
+      <h2 className="text-xl font-medium text-text-primary">{title}</h2>
       {rules}
     </div>
   );
@@ -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-primary 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,8 +102,8 @@ export default function PermissionSettingsView({ onClose }: { onClose: () => voi
                 <circle cx="7.5" cy="15.5" r="5.5" />
               </svg>
             </div>
-            <h1 className="text-3xl font-medium text-text-default mt-4">Permission Rules</h1>
-            <p className="text-text-muted">
+            <h1 className="text-3xl font-medium text-text-primary mt-4">Permission Rules</h1>
+            <p className="text-text-secondary">
               Hidden instructions that will be passed to the provider to help direct and add context
               to your responses.
             </p>
diff --git a/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx b/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx
index 15d874cdde94..aaad639ffe95 100644
--- a/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx
+++ b/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx
@@ -59,11 +59,11 @@ export default function ProviderSettings({
   }, [getProviders]);
 
   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-primary text-text-primary">
       <ScrollArea className="flex-1 w-full">
         <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 pt-12 pb-4">
           {/* Consistent header pattern with back button */}
-          <div className="flex flex-col pb-8 border-b border-border-default">
+          <div className="flex flex-col pb-8 border-b border-border-primary">
             <div className="flex items-center pt-2 mb-1 no-drag">
               <BackButton onClick={onClose} />
             </div>
@@ -71,7 +71,7 @@ export default function ProviderSettings({
               {isOnboarding ? 'Other providers' : 'Provider Configuration Settings'}
             </h1>
             {isOnboarding && (
-              <p className="text-sm sm:text-base text-text-muted max-w-full sm:max-w-2xl">
+              <p className="text-sm sm:text-base text-text-secondary max-w-full sm:max-w-2xl">
                 Select an AI model provider to get started with goose. You'll need to use API keys
                 generated by each provider which will be encrypted and stored locally. You can
                 change your provider at any time in settings.
diff --git a/ui/desktop/src/components/settings/providers/modal/ProviderConfiguationModal.tsx b/ui/desktop/src/components/settings/providers/modal/ProviderConfiguationModal.tsx
index 547fee53a644..2e0e9ccab02f 100644
--- a/ui/desktop/src/components/settings/providers/modal/ProviderConfiguationModal.tsx
+++ b/ui/desktop/src/components/settings/providers/modal/ProviderConfiguationModal.tsx
@@ -225,7 +225,7 @@ export default function ProviderConfigurationModal({
                       ? 'Signing in...'
                       : `Sign in with ${provider.metadata.display_name}`}
                   </Button>
-                  <p className="text-sm text-text-muted text-center">
+                  <p className="text-sm text-text-secondary text-center">
                     A browser window will open for you to complete the login.
                   </p>
                 </div>
diff --git a/ui/desktop/src/components/settings/providers/modal/subcomponents/ProviderSetupActions.tsx b/ui/desktop/src/components/settings/providers/modal/subcomponents/ProviderSetupActions.tsx
index 5fe332cc6d06..121612ce66cd 100644
--- a/ui/desktop/src/components/settings/providers/modal/subcomponents/ProviderSetupActions.tsx
+++ b/ui/desktop/src/components/settings/providers/modal/subcomponents/ProviderSetupActions.tsx
@@ -50,7 +50,7 @@ export default function ProviderSetupActions({
           <Button
             variant="ghost"
             onClick={onCancelDelete}
-            className="w-full h-[60px] rounded-none hover:bg-background-muted text-text-muted hover:text-text-default text-md font-regular"
+            className="w-full h-[60px] rounded-none hover:bg-background-secondary text-text-secondary hover:text-text-primary text-md font-regular"
           >
             Ok
           </Button>
@@ -69,14 +69,14 @@ export default function ProviderSetupActions({
         </div>
         <Button
           onClick={onConfirmDelete}
-          className="w-full h-[60px] rounded-none border-b border-border-default bg-transparent hover:bg-red-900/20 text-red-500 font-medium text-md"
+          className="w-full h-[60px] rounded-none border-b border-border-primary bg-transparent hover:bg-red-900/20 text-red-500 font-medium text-md"
         >
           <Trash2 className="h-4 w-4 mr-2" /> Confirm Delete
         </Button>
         <Button
           variant="ghost"
           onClick={onCancelDelete}
-          className="w-full h-[60px] rounded-none hover:bg-background-muted text-text-muted hover:text-text-default text-md font-regular"
+          className="w-full h-[60px] rounded-none hover:bg-background-secondary text-text-secondary hover:text-text-primary text-md font-regular"
         >
           Cancel
         </Button>
@@ -91,7 +91,7 @@ export default function ProviderSetupActions({
         <Button
           type="button"
           onClick={onDelete}
-          className="w-full h-[60px] rounded-none border-t border-border-default bg-transparent hover:bg-background-muted text-red-500 font-medium text-md"
+          className="w-full h-[60px] rounded-none border-t border-border-primary bg-transparent hover:bg-background-secondary text-red-500 font-medium text-md"
         >
           <Trash2 className="h-4 w-4 mr-2" /> Delete Provider
         </Button>
@@ -102,7 +102,7 @@ export default function ProviderSetupActions({
             type="submit"
             variant="ghost"
             onClick={onSubmit}
-            className="w-full h-[60px] rounded-none border-t border-border-default text-md hover:bg-background-muted text-text-default font-medium"
+            className="w-full h-[60px] rounded-none border-t border-border-primary text-md hover:bg-background-secondary text-text-primary font-medium"
           >
             Submit
           </Button>
@@ -110,7 +110,7 @@ export default function ProviderSetupActions({
             type="button"
             variant="ghost"
             onClick={onCancel}
-            className="w-full h-[60px] rounded-none border-t border-border-default hover:text-text-default text-text-muted hover:bg-background-muted text-md font-regular"
+            className="w-full h-[60px] rounded-none border-t border-border-primary hover:text-text-primary text-text-secondary hover:bg-background-secondary text-md font-regular"
           >
             Cancel
           </Button>
@@ -121,7 +121,7 @@ export default function ProviderSetupActions({
             type="submit"
             variant="ghost"
             onClick={onSubmit}
-            className="w-full h-[60px] rounded-none border-t border-border-default text-md hover:bg-background-muted text-text-default font-medium"
+            className="w-full h-[60px] rounded-none border-t border-border-primary text-md hover:bg-background-secondary text-text-primary font-medium"
           >
             Enable Provider
           </Button>
@@ -129,7 +129,7 @@ export default function ProviderSetupActions({
             type="button"
             variant="ghost"
             onClick={onCancel}
-            className="w-full h-[60px] rounded-none border-t border-border-default hover:text-text-default text-text-muted hover:bg-background-muted text-md font-regular"
+            className="w-full h-[60px] rounded-none border-t border-border-primary hover:text-text-primary text-text-secondary hover:bg-background-secondary text-md font-regular"
           >
             Cancel
           </Button>
diff --git a/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/CustomProviderForm.tsx b/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/CustomProviderForm.tsx
index a70dc4976c1b..35a82ad5268a 100644
--- a/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/CustomProviderForm.tsx
+++ b/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/CustomProviderForm.tsx
@@ -213,7 +213,7 @@ export default function CustomProviderForm({
           <div>
             <label
               htmlFor="provider-select"
-              className="flex items-center text-sm font-medium text-text-default mb-2"
+              className="flex items-center text-sm font-medium text-text-primary mb-2"
             >
               Provider Type
               <span className="text-red-500 ml-1">*</span>
@@ -251,7 +251,7 @@ export default function CustomProviderForm({
           <div>
             <label
               htmlFor="display-name"
-              className="flex items-center text-sm font-medium text-text-default mb-2"
+              className="flex items-center text-sm font-medium text-text-primary mb-2"
             >
               Display Name
               <span className="text-red-500 ml-1">*</span>
@@ -274,7 +274,7 @@ export default function CustomProviderForm({
           <div>
             <label
               htmlFor="api-url"
-              className="flex items-center text-sm font-medium text-text-default mb-2"
+              className="flex items-center text-sm font-medium text-text-primary mb-2"
             >
               API URL
               <span className="text-red-500 ml-1">*</span>
@@ -298,8 +298,8 @@ export default function CustomProviderForm({
       )}
 
       <div>
-        <label className="block text-sm font-medium text-text-default mb-2">Authentication</label>
-        <p className="text-sm text-text-muted mb-3">
+        <label className="block text-sm font-medium text-text-primary mb-2">Authentication</label>
+        <p className="text-sm text-text-secondary mb-3">
           Local LLMs like Ollama typically don't require an API key.
         </p>
         <div className="flex items-center space-x-2">
@@ -308,9 +308,9 @@ export default function CustomProviderForm({
             id="requires-api-key"
             checked={requiresApiKey}
             onChange={(e) => handleRequiresApiKeyChange(e.target.checked)}
-            className="rounded border-border-default"
+            className="rounded border-border-primary"
           />
-          <label htmlFor="requires-api-key" className="text-sm text-text-muted">
+          <label htmlFor="requires-api-key" className="text-sm text-text-secondary">
             This provider requires an API key
           </label>
         </div>
@@ -319,7 +319,7 @@ export default function CustomProviderForm({
           <div className="mt-3">
             <label
               htmlFor="api-key"
-              className="flex items-center text-sm font-medium text-text-default mb-2"
+              className="flex items-center text-sm font-medium text-text-primary mb-2"
             >
               API Key
               {!initialData && <span className="text-red-500 ml-1">*</span>}
@@ -347,7 +347,7 @@ export default function CustomProviderForm({
           <div>
             <label
               htmlFor="available-models"
-              className="flex items-center text-sm font-medium text-text-default mb-2"
+              className="flex items-center text-sm font-medium text-text-primary mb-2"
             >
               Available Models (comma-separated)
               <span className="text-red-500 ml-1">*</span>
@@ -373,9 +373,9 @@ export default function CustomProviderForm({
               id="supports-streaming"
               checked={supportsStreaming}
               onChange={(e) => setSupportsStreaming(e.target.checked)}
-              className="rounded border-border-default"
+              className="rounded border-border-primary"
             />
-            <label htmlFor="supports-streaming" className="text-sm text-text-muted">
+            <label htmlFor="supports-streaming" className="text-sm text-text-secondary">
               Provider supports streaming responses
             </label>
           </div>
@@ -444,7 +444,7 @@ export default function CustomProviderForm({
                 onClick={handleAddHeader}
                 variant="ghost"
                 type="button"
-                className="flex items-center justify-start gap-1 px-2 pr-4 text-sm rounded-full text-textStandard bg-background-default border border-borderSubtle hover:border-borderStandard transition-colors min-w-[60px] h-9 [&>svg]:!size-4"
+                className="flex items-center justify-start gap-1 px-2 pr-4 text-sm rounded-full text-textStandard bg-background-primary border border-borderSubtle hover:border-borderStandard transition-colors min-w-[60px] h-9 [&>svg]:!size-4"
               >
                 <Plus /> Add
               </Button>
diff --git a/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx b/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx
index 68e4636237dd..6d7ad45f9724 100644
--- a/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx
+++ b/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx
@@ -137,7 +137,7 @@ export default function DefaultProviderSetupForm({
   const renderParametersList = (parameters: ConfigKey[]) => {
     return parameters.map((parameter) => (
       <div key={parameter.name}>
-        <label className="block text-sm font-medium text-text-default mb-1">
+        <label className="block text-sm font-medium text-text-primary mb-1">
           {getFieldLabel(parameter)}
           {parameter.required && <span className="text-red-500 ml-1">*</span>}
         </label>
@@ -157,8 +157,8 @@ export default function DefaultProviderSetupForm({
           className={`w-full h-14 px-4 font-regular rounded-lg shadow-none ${
             validationErrors[parameter.name]
               ? 'border-2 border-red-500'
-              : 'border border-border-default hover:border-border-default'
-          } bg-background-default text-lg placeholder:text-text-muted font-regular text-text-default`}
+              : 'border border-border-primary hover:border-border-primary'
+          } bg-background-primary text-lg placeholder:text-text-secondary font-regular text-text-primary`}
           required={parameter.required}
         />
         {validationErrors[parameter.name] && (
diff --git a/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx b/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx
index 283b4037c92d..0524dd6e0eb8 100644
--- a/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx
+++ b/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx
@@ -42,8 +42,8 @@ export default function CardContainer({
       className={`relative h-full p-[2px] overflow-hidden rounded-[9px] group/card
                  ${
                    grayedOut
-                     ? 'bg-background-muted hover:bg-gray-700'
-                     : 'bg-background-muted hover:bg-transparent hover:duration-300'
+                     ? 'bg-background-secondary hover:bg-gray-700'
+                     : 'bg-background-secondary hover:bg-transparent hover:duration-300'
                  }`}
       onClick={!grayedOut ? onClick : undefined}
       style={{
@@ -52,13 +52,13 @@ export default function CardContainer({
     >
       {!grayedOut && <GlowingRing />}
       <div
-        className={`relative bg-background-default rounded-lg p-3 transition-all duration-200 h-[160px] flex flex-col
+        className={`relative bg-background-primary rounded-lg p-3 transition-all duration-200 h-[160px] flex flex-col
                    ${header ? 'justify-between' : 'justify-center'}
                    ${borderStyle === 'dashed' ? 'border-2 border-dashed' : 'border'}
                    ${
                      grayedOut
-                       ? 'border-border-default'
-                       : 'border-border-default hover:border-border-default'
+                       ? 'border-border-primary'
+                       : 'border-border-primary hover:border-border-primary'
                    }`}
       >
         {header && (
diff --git a/ui/desktop/src/components/settings/providers/subcomponents/CardHeader.tsx b/ui/desktop/src/components/settings/providers/subcomponents/CardHeader.tsx
index 9a32b8cd1b65..8e118671d51c 100644
--- a/ui/desktop/src/components/settings/providers/subcomponents/CardHeader.tsx
+++ b/ui/desktop/src/components/settings/providers/subcomponents/CardHeader.tsx
@@ -10,7 +10,7 @@ interface CardHeaderProps {
 
 // Make CardTitle a proper React component
 const CardTitle = memo(({ name }: { name: string }) => {
-  return <h3 className="text-base font-medium text-text-default truncate mr-2">{name}</h3>;
+  return <h3 className="text-base font-medium text-text-primary truncate mr-2">{name}</h3>;
 });
 CardTitle.displayName = 'CardTitle';
 
diff --git a/ui/desktop/src/components/settings/providers/subcomponents/utils/StringUtils.tsx b/ui/desktop/src/components/settings/providers/subcomponents/utils/StringUtils.tsx
index b64527d084a0..ad6cf78c5274 100644
--- a/ui/desktop/src/components/settings/providers/subcomponents/utils/StringUtils.tsx
+++ b/ui/desktop/src/components/settings/providers/subcomponents/utils/StringUtils.tsx
@@ -26,7 +26,7 @@ interface ProviderDescriptionProps {
 
 export function ProviderDescription({ description }: ProviderDescriptionProps) {
   return (
-    <p className="text-xs text-text-muted mt-1.5 mb-3 leading-normal overflow-y-auto max-h-[54px]">
+    <p className="text-xs text-text-secondary mt-1.5 mb-3 leading-normal overflow-y-auto max-h-[54px]">
       {description}
     </p>
   );
diff --git a/ui/desktop/src/components/settings/reset_provider/ResetProviderSection.tsx b/ui/desktop/src/components/settings/reset_provider/ResetProviderSection.tsx
index fa064f02317a..92063be94d1c 100644
--- a/ui/desktop/src/components/settings/reset_provider/ResetProviderSection.tsx
+++ b/ui/desktop/src/components/settings/reset_provider/ResetProviderSection.tsx
@@ -32,7 +32,7 @@ export default function ResetProviderSection(_props: ResetProviderSectionProps)
         <RefreshCw className="h-4 w-4" />
         Reset Provider and Model
       </Button>
-      <p className="text-xs text-text-muted mt-2">
+      <p className="text-xs text-text-secondary mt-2">
         This will clear your selected model and provider settings. If no defaults are available,
         you'll be taken to the welcome screen to set them up again.
       </p>
diff --git a/ui/desktop/src/components/settings/response_styles/ResponseStyleSelectionItem.tsx b/ui/desktop/src/components/settings/response_styles/ResponseStyleSelectionItem.tsx
index f42bc4066140..323e51ab997f 100644
--- a/ui/desktop/src/components/settings/response_styles/ResponseStyleSelectionItem.tsx
+++ b/ui/desktop/src/components/settings/response_styles/ResponseStyleSelectionItem.tsx
@@ -41,14 +41,14 @@ export function ResponseStyleSelectionItem({
   return (
     <div className="group hover:cursor-pointer text-sm">
       <div
-        className={`flex items-center justify-between text-text-default py-2 px-2 ${checked ? 'bg-background-muted' : 'bg-background-default hover:bg-background-muted'} rounded-lg transition-all`}
+        className={`flex items-center justify-between text-text-primary py-2 px-2 ${checked ? 'bg-background-secondary' : 'bg-background-primary hover:bg-background-secondary'} rounded-lg transition-all`}
         onClick={() => handleStyleChange(style.key)}
       >
         <div className="flex">
           <div>
-            <h3 className="text-text-default">{style.label}</h3>
+            <h3 className="text-text-primary">{style.label}</h3>
             {showDescription && (
-              <p className="text-xs text-text-muted mt-[2px]">{style.description}</p>
+              <p className="text-xs text-text-secondary mt-[2px]">{style.description}</p>
             )}
           </div>
         </div>
@@ -63,10 +63,10 @@ export function ResponseStyleSelectionItem({
             className="peer sr-only"
           />
           <div
-            className="h-4 w-4 rounded-full border border-border-default 
+            className="h-4 w-4 rounded-full border border-border-primary 
                   peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
                   peer-checked:bg-white dark:peer-checked:bg-black
-                  transition-all duration-200 ease-in-out group-hover:border-border-default"
+                  transition-all duration-200 ease-in-out group-hover:border-border-primary"
           ></div>
         </div>
       </div>
diff --git a/ui/desktop/src/components/settings/security/SecurityToggle.tsx b/ui/desktop/src/components/settings/security/SecurityToggle.tsx
index e5ce830b8dc9..6c066603036b 100644
--- a/ui/desktop/src/components/settings/security/SecurityToggle.tsx
+++ b/ui/desktop/src/components/settings/security/SecurityToggle.tsx
@@ -50,11 +50,11 @@ const ClassifierEndpointInputs = ({
     <div className="space-y-3">
       <div>
         <label
-          className={`text-sm font-medium ${disabled ? 'text-text-muted' : 'text-text-default'}`}
+          className={`text-sm font-medium ${disabled ? 'text-text-secondary' : 'text-text-primary'}`}
         >
           {endpointLabel}
         </label>
-        <p className="text-xs text-text-muted mb-2">{endpointDescription}</p>
+        <p className="text-xs text-text-secondary mb-2">{endpointDescription}</p>
         <input
           type="url"
           value={endpointValue}
@@ -62,21 +62,21 @@ const ClassifierEndpointInputs = ({
           onBlur={(e) => onEndpointBlur(e.target.value)}
           disabled={disabled}
           placeholder={endpointPlaceholder}
-          className={`w-full px-3 py-2 text-sm border rounded placeholder:text-text-muted ${
+          className={`w-full px-3 py-2 text-sm border rounded placeholder:text-text-secondary ${
             disabled
-              ? 'border-border-default bg-background-muted text-text-muted cursor-not-allowed'
-              : 'border-border-default bg-background-default text-text-default'
+              ? 'border-border-primary bg-background-secondary text-text-secondary cursor-not-allowed'
+              : 'border-border-primary bg-background-primary text-text-primary'
           }`}
         />
       </div>
 
       <div>
         <label
-          className={`text-sm font-medium ${disabled ? 'text-text-muted' : 'text-text-default'}`}
+          className={`text-sm font-medium ${disabled ? 'text-text-secondary' : 'text-text-primary'}`}
         >
           {tokenLabel}
         </label>
-        <p className="text-xs text-text-muted mb-2">{tokenDescription}</p>
+        <p className="text-xs text-text-secondary mb-2">{tokenDescription}</p>
         <input
           type="password"
           value={tokenValue}
@@ -84,10 +84,10 @@ const ClassifierEndpointInputs = ({
           onBlur={(e) => onTokenBlur(e.target.value)}
           disabled={disabled}
           placeholder={tokenPlaceholder}
-          className={`w-full px-3 py-2 text-sm border rounded placeholder:text-text-muted ${
+          className={`w-full px-3 py-2 text-sm border rounded placeholder:text-text-secondary ${
             disabled
-              ? 'border-border-default bg-background-muted text-text-muted cursor-not-allowed'
-              : 'border-border-default bg-background-default text-text-default'
+              ? 'border-border-primary bg-background-secondary text-text-secondary cursor-not-allowed'
+              : 'border-border-primary bg-background-primary text-text-primary'
           }`}
         />
       </div>
@@ -215,10 +215,10 @@ export const SecurityToggle = () => {
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between py-2 px-2 hover:bg-background-muted rounded-lg transition-all">
+      <div className="flex items-center justify-between py-2 px-2 hover:bg-background-secondary rounded-lg transition-all">
         <div>
-          <h3 className="text-text-default">Enable Prompt Injection Detection</h3>
-          <p className="text-xs text-text-muted max-w-md mt-[2px]">
+          <h3 className="text-text-primary">Enable Prompt Injection Detection</h3>
+          <p className="text-xs text-text-secondary max-w-md mt-[2px]">
             Detect and prevent potential prompt injection attacks
           </p>
         </div>
@@ -236,11 +236,11 @@ export const SecurityToggle = () => {
           {/* Detection Threshold */}
           <div className={enabled ? '' : 'opacity-50'}>
             <label
-              className={`text-sm font-medium ${enabled ? 'text-text-default' : 'text-text-muted'}`}
+              className={`text-sm font-medium ${enabled ? 'text-text-primary' : 'text-text-secondary'}`}
             >
               Detection Threshold
             </label>
-            <p className="text-xs text-text-muted mb-2">
+            <p className="text-xs text-text-secondary mb-2">
               Higher values are more strict (0.01 = very lenient, 1.0 = maximum strict)
             </p>
             <input
@@ -264,23 +264,23 @@ export const SecurityToggle = () => {
               disabled={!enabled}
               className={`w-24 px-2 py-1 text-sm border rounded ${
                 enabled
-                  ? 'border-border-default bg-background-default text-text-default'
-                  : 'border-border-default bg-background-muted text-text-muted cursor-not-allowed'
+                  ? 'border-border-primary bg-background-primary text-text-primary'
+                  : 'border-border-primary bg-background-secondary text-text-secondary cursor-not-allowed'
               }`}
               placeholder="0.80"
             />
           </div>
 
           {/* Command Injection Detection Toggle */}
-          <div className="border-t border-border-default pt-4">
-            <div className="flex items-center justify-between py-2 hover:bg-background-muted rounded-lg transition-all">
+          <div className="border-t border-border-primary pt-4">
+            <div className="flex items-center justify-between py-2 hover:bg-background-secondary rounded-lg transition-all">
               <div>
                 <h4
-                  className={`text-sm font-medium ${enabled ? 'text-text-default' : 'text-text-muted'}`}
+                  className={`text-sm font-medium ${enabled ? 'text-text-primary' : 'text-text-secondary'}`}
                 >
                   Enable Command Injection ML Detection
                 </h4>
-                <p className="text-xs text-text-muted max-w-md mt-[2px]">
+                <p className="text-xs text-text-secondary max-w-md mt-[2px]">
                   Use ML models to detect malicious shell commands
                 </p>
               </div>
@@ -328,15 +328,15 @@ export const SecurityToggle = () => {
           </div>
 
           {/* Prompt Injection Detection Toggle */}
-          <div className="border-t border-border-default pt-4">
-            <div className="flex items-center justify-between py-2 hover:bg-background-muted rounded-lg transition-all">
+          <div className="border-t border-border-primary pt-4">
+            <div className="flex items-center justify-between py-2 hover:bg-background-secondary rounded-lg transition-all">
               <div>
                 <h4
-                  className={`text-sm font-medium ${enabled ? 'text-text-default' : 'text-text-muted'}`}
+                  className={`text-sm font-medium ${enabled ? 'text-text-primary' : 'text-text-secondary'}`}
                 >
                   Enable Prompt Injection ML Detection
                 </h4>
-                <p className="text-xs text-text-muted max-w-md mt-[2px]">
+                <p className="text-xs text-text-secondary max-w-md mt-[2px]">
                   Use ML models to detect potential prompt injection in your chat
                 </p>
               </div>
@@ -361,11 +361,11 @@ export const SecurityToggle = () => {
                   <div className="space-y-3">
                     <div>
                       <label
-                        className={`text-sm font-medium ${enabled && mlEnabled ? 'text-text-default' : 'text-text-muted'}`}
+                        className={`text-sm font-medium ${enabled && mlEnabled ? 'text-text-primary' : 'text-text-secondary'}`}
                       >
                         Detection Model
                       </label>
-                      <p className="text-xs text-text-muted mb-2">
+                      <p className="text-xs text-text-secondary mb-2">
                         Select which ML model to use for prompt injection detection
                       </p>
                       <select
@@ -374,8 +374,8 @@ export const SecurityToggle = () => {
                         disabled={!enabled || !mlEnabled}
                         className={`w-full px-3 py-2 text-sm border rounded ${
                           enabled && mlEnabled
-                            ? 'border-border-default bg-background-default text-text-default'
-                            : 'border-border-default bg-background-muted text-text-muted cursor-not-allowed'
+                            ? 'border-border-primary bg-background-primary text-text-primary'
+                            : 'border-border-primary bg-background-secondary text-text-secondary cursor-not-allowed'
                         }`}
                       >
                         {availablePromptModels.map((model) => (
diff --git a/ui/desktop/src/components/settings/sessions/SessionSharingSection.tsx b/ui/desktop/src/components/settings/sessions/SessionSharingSection.tsx
index 432bc49ac6e3..55cb583d89e5 100644
--- a/ui/desktop/src/components/settings/sessions/SessionSharingSection.tsx
+++ b/ui/desktop/src/components/settings/sessions/SessionSharingSection.tsx
@@ -166,7 +166,7 @@ export default function SessionSharingSection() {
               </label>
 
               {envBaseUrlShare ? (
-                <Lock className="w-5 h-5 text-text-muted" />
+                <Lock className="w-5 h-5 text-text-secondary" />
               ) : (
                 <Switch
                   checked={sessionSharingConfig.enabled}
@@ -181,7 +181,7 @@ export default function SessionSharingSection() {
             {sessionSharingConfig.enabled && (
               <div className="space-y-2 relative">
                 <div className="flex items-center space-x-2">
-                  <label htmlFor="session-sharing-url" className="text-sm text-text-default">
+                  <label htmlFor="session-sharing-url" className="text-sm text-text-primary">
                     Base URL
                   </label>
                   {isUrlConfigured && <Check className="w-5 h-5 text-green-500" />}
diff --git a/ui/desktop/src/components/settings/tunnel/TunnelSection.tsx b/ui/desktop/src/components/settings/tunnel/TunnelSection.tsx
index abf5fedde845..100b45360bde 100644
--- a/ui/desktop/src/components/settings/tunnel/TunnelSection.tsx
+++ b/ui/desktop/src/components/settings/tunnel/TunnelSection.tsx
@@ -164,8 +164,8 @@ export default function TunnelSection() {
 
           <div className="flex items-center justify-between">
             <div>
-              <h3 className="text-text-default text-xs">Tunnel Status</h3>
-              <p className="text-xs text-text-muted max-w-md mt-[2px]">
+              <h3 className="text-text-primary text-xs">Tunnel Status</h3>
+              <p className="text-xs text-text-secondary max-w-md mt-[2px]">
                 {STATUS_MESSAGES[tunnelInfo.state]}
               </p>
             </div>
@@ -216,7 +216,7 @@ export default function TunnelSection() {
                 </div>
               </div>
 
-              <div className="text-center text-sm text-text-muted">
+              <div className="text-center text-sm text-text-secondary">
                 Scan this QR code with the goose mobile app. Do not share this code with anyone else
                 as it is for your personal access.
               </div>
@@ -237,7 +237,7 @@ export default function TunnelSection() {
                 {showDetails && (
                   <div className="mt-3 space-y-3">
                     <div>
-                      <h3 className="text-xs font-medium mb-1 text-text-muted">Tunnel URL</h3>
+                      <h3 className="text-xs font-medium mb-1 text-text-secondary">Tunnel URL</h3>
                       <div className="flex items-center gap-2">
                         <code className="flex-1 p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs break-all overflow-hidden">
                           {tunnelInfo.url}
@@ -254,7 +254,7 @@ export default function TunnelSection() {
                     </div>
 
                     <div>
-                      <h3 className="text-xs font-medium mb-1 text-text-muted">Secret Key</h3>
+                      <h3 className="text-xs font-medium mb-1 text-text-secondary">Secret Key</h3>
                       <div className="flex items-center gap-2">
                         <code className="flex-1 p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs break-all overflow-hidden">
                           {tunnelInfo.secret}
@@ -305,7 +305,7 @@ export default function TunnelSection() {
               </div>
             </div>
 
-            <div className="text-center text-sm text-text-muted">
+            <div className="text-center text-sm text-text-secondary">
               Scan this QR code with your iPhone camera to install the goose mobile app from the App
               Store
             </div>
diff --git a/ui/desktop/src/components/ui/BackButton.tsx b/ui/desktop/src/components/ui/BackButton.tsx
index 606e246d9483..d2ce935aaf11 100644
--- a/ui/desktop/src/components/ui/BackButton.tsx
+++ b/ui/desktop/src/components/ui/BackButton.tsx
@@ -69,7 +69,7 @@ const BackButton: React.FC<BackButtonProps> = ({
       size={size}
       shape={shape}
       className={cn(
-        'rounded-full px-6 py-2 flex items-center gap-2 text-text-default hover:cursor-pointer',
+        'rounded-full px-6 py-2 flex items-center gap-2 text-text-primary hover:cursor-pointer',
         className
       )}
       {...props}
diff --git a/ui/desktop/src/components/ui/Diagnostics.tsx b/ui/desktop/src/components/ui/Diagnostics.tsx
index 9ff591657ff8..72bbbf73025c 100644
--- a/ui/desktop/src/components/ui/Diagnostics.tsx
+++ b/ui/desktop/src/components/ui/Diagnostics.tsx
@@ -131,27 +131,27 @@ Add any other context about the problem here.
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-background-default border border-border-default rounded-lg p-6 max-w-md mx-4">
+      <div className="bg-background-primary border border-border-primary rounded-lg p-6 max-w-md mx-4">
         <div className="flex items-start gap-3 mb-4">
           <AlertTriangle className="text-orange-500 flex-shrink-0 mt-1" size={20} />
           <div>
-            <h3 className="text-lg font-semibold text-text-default mb-2">Report a Problem</h3>
-            <p className="text-sm text-text-muted mb-3">
+            <h3 className="text-lg font-semibold text-text-primary mb-2">Report a Problem</h3>
+            <p className="text-sm text-text-secondary 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-text-muted list-disc list-inside space-y-1 mb-3">
+            <ul className="text-sm text-text-secondary 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-text-muted">
+            <p className="text-sm text-text-secondary">
               <strong>Warning:</strong> If your session contains sensitive information, do not share
               the diagnostics file publicly.
             </p>
-            <p className="text-sm text-text-muted">
+            <p className="text-sm text-text-secondary">
               If you file a bug, consider attaching the diagnostics report to it.
             </p>
           </div>
diff --git a/ui/desktop/src/components/ui/Expand.tsx b/ui/desktop/src/components/ui/Expand.tsx
index 1cfec343d368..31025d579d90 100644
--- a/ui/desktop/src/components/ui/Expand.tsx
+++ b/ui/desktop/src/components/ui/Expand.tsx
@@ -3,7 +3,7 @@ import { ChevronUp } from 'lucide-react';
 export default function Expand({ size, isExpanded }: { size: number; isExpanded: boolean }) {
   return (
     <ChevronUp
-      className={`shrink-0 w-${size} h-${size} text-text-muted transition-all origin-center ${isExpanded ? 'rotate-180' : 'rotate-90'}`}
+      className={`shrink-0 w-${size} h-${size} text-text-secondary transition-all origin-center ${isExpanded ? 'rotate-180' : 'rotate-90'}`}
     />
   );
 }
diff --git a/ui/desktop/src/components/ui/JsonSchemaForm.tsx b/ui/desktop/src/components/ui/JsonSchemaForm.tsx
index c4869a51aa53..21e63bb4b89f 100644
--- a/ui/desktop/src/components/ui/JsonSchemaForm.tsx
+++ b/ui/desktop/src/components/ui/JsonSchemaForm.tsx
@@ -147,7 +147,7 @@ export default function JsonSchemaForm({
           value={String(value ?? '')}
           onChange={(e) => handleChange(key, e.target.value)}
           disabled={disabled}
-          className="flex h-9 w-full rounded-md border focus:border-border-strong hover:border-border-strong bg-background-default px-3 py-1 text-base transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+          className="flex h-9 w-full rounded-md border focus:border-border-secondary hover:border-border-secondary bg-background-primary px-3 py-1 text-base transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
         >
           {!isRequired && <option value="">Select...</option>}
           {prop.enum.map((option) => (
@@ -170,7 +170,7 @@ export default function JsonSchemaForm({
             disabled={disabled}
             className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
           />
-          <span className="text-sm text-text-default">{prop.description || key}</span>
+          <span className="text-sm text-text-primary">{prop.description || key}</span>
         </label>
       );
     }
@@ -210,7 +210,7 @@ export default function JsonSchemaForm({
   };
 
   if (!schema.properties || Object.keys(schema.properties).length === 0) {
-    return <div className="text-text-muted text-sm">No fields to display</div>;
+    return <div className="text-text-secondary text-sm">No fields to display</div>;
   }
 
   return (
@@ -230,12 +230,12 @@ export default function JsonSchemaForm({
 
         return (
           <div key={key} className="flex flex-col gap-1">
-            <label htmlFor={key} className="text-sm font-medium text-text-default">
+            <label htmlFor={key} className="text-sm font-medium text-text-primary">
               {key}
               {isRequired && <span className="text-red-500 ml-1">*</span>}
             </label>
             {prop.description && prop.type !== 'boolean' && (
-              <span className="text-xs text-text-muted">{prop.description}</span>
+              <span className="text-xs text-text-secondary">{prop.description}</span>
             )}
             {renderField(key, prop)}
             {error && <span className="text-red-500 text-xs">{error}</span>}
diff --git a/ui/desktop/src/components/ui/RecipeWarningModal.tsx b/ui/desktop/src/components/ui/RecipeWarningModal.tsx
index e1b93deb7269..2f27874dae78 100644
--- a/ui/desktop/src/components/ui/RecipeWarningModal.tsx
+++ b/ui/desktop/src/components/ui/RecipeWarningModal.tsx
@@ -37,7 +37,7 @@ export function RecipeWarningModal({
         <DialogOverlay />
         <DialogPrimitive.Content
           className={cn(
-            'bg-background-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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-[80vw] max-h-[80vh] flex flex-col p-0'
+            'bg-background-primary 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-[80vw] max-h-[80vh] flex flex-col p-0'
           )}
           onPointerDownOutside={(e) => e.preventDefault()}
           onEscapeKeyDown={(e) => e.preventDefault()}
@@ -71,22 +71,22 @@ export function RecipeWarningModal({
           )}
 
           <div className="flex-1 overflow-y-auto p-6 pt-4">
-            <div className="bg-background-muted p-4 rounded-lg">
-              <h3 className="font-medium mb-3 text-text-default">Recipe Preview:</h3>
+            <div className="bg-background-secondary p-4 rounded-lg">
+              <h3 className="font-medium mb-3 text-text-primary">Recipe Preview:</h3>
               <div className="space-y-4">
                 {recipeDetails.title && (
-                  <p className="text-text-default">
+                  <p className="text-text-primary">
                     <strong>Title:</strong> {recipeDetails.title}
                   </p>
                 )}
                 {recipeDetails.description && (
-                  <p className="text-text-default">
+                  <p className="text-text-primary">
                     <strong>Description:</strong> {recipeDetails.description}
                   </p>
                 )}
                 {recipeDetails.instructions && (
                   <div>
-                    <h4 className="font-medium text-text-default mb-1">Instructions:</h4>
+                    <h4 className="font-medium text-text-primary mb-1">Instructions:</h4>
                     <MarkdownContent content={recipeDetails.instructions} className="text-sm" />
                   </div>
                 )}
diff --git a/ui/desktop/src/components/ui/Select.tsx b/ui/desktop/src/components/ui/Select.tsx
index c4442221f83a..9d1c71d69a81 100644
--- a/ui/desktop/src/components/ui/Select.tsx
+++ b/ui/desktop/src/components/ui/Select.tsx
@@ -13,9 +13,9 @@ export const Select = (props: React.ComponentProps<typeof ReactSelect>) => {
         container: () => 'w-full cursor-pointer relative',
         indicatorSeparator: () => 'h-0',
         control: ({ isFocused }) =>
-          `border ${isFocused ? 'border-border-default' : 'border-border-default'} focus:border-border-default hover:border-border-default rounded-md w-full px-4 py-2 text-sm text-text-muted hover:cursor-pointer`,
+          `border ${isFocused ? 'border-border-primary' : 'border-border-primary'} focus:border-border-primary hover:border-border-primary rounded-md w-full px-4 py-2 text-sm text-text-secondary hover:cursor-pointer`,
         menu: () =>
-          'mt-1 bg-background-default border border-border-default rounded-md text-text-muted shadow-lg select__menu z-[9999] absolute',
+          'mt-1 bg-background-primary border border-border-primary rounded-md text-text-secondary shadow-lg select__menu z-[9999] absolute',
         menuList: () => 'max-h-60 overflow-y-auto py-1',
         option: ({ isFocused, isSelected, isDisabled }) => {
           let classes = 'py-2 px-4 text-sm cursor-pointer';
@@ -23,11 +23,11 @@ export const Select = (props: React.ComponentProps<typeof ReactSelect>) => {
           if (isDisabled) {
             classes += ' opacity-50 cursor-not-allowed pointer-events-none';
           } else if (isSelected) {
-            classes += ' bg-background-accent text-text-on-accent pointer-events-auto';
+            classes += ' bg-background-inverse text-text-inverse pointer-events-auto';
           } else if (isFocused) {
-            classes += ' bg-background-muted text-text-default pointer-events-auto';
+            classes += ' bg-background-secondary text-text-primary pointer-events-auto';
           } else {
-            classes += ' text-text-default hover:bg-background-muted pointer-events-auto';
+            classes += ' text-text-primary hover:bg-background-secondary pointer-events-auto';
           }
 
           return classes;
diff --git a/ui/desktop/src/components/ui/Tooltip.tsx b/ui/desktop/src/components/ui/Tooltip.tsx
index 7ebdf7344702..1a65a0ac549b 100644
--- a/ui/desktop/src/components/ui/Tooltip.tsx
+++ b/ui/desktop/src/components/ui/Tooltip.tsx
@@ -40,13 +40,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-background-accent text-text-on-accent animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          'bg-background-inverse text-text-inverse animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-background-accent fill-background-accent z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45" />
+        <TooltipPrimitive.Arrow className="bg-background-inverse fill-background-inverse z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );
diff --git a/ui/desktop/src/components/ui/button.tsx b/ui/desktop/src/components/ui/button.tsx
index ff2516a83d21..ea21f1e1967d 100644
--- a/ui/desktop/src/components/ui/button.tsx
+++ b/ui/desktop/src/components/ui/button.tsx
@@ -8,13 +8,13 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-background-accent text-text-on-accent hover:bg-background-accent/90 shadow-xs',
+        default: 'bg-background-inverse text-text-inverse hover:bg-background-inverse/90 shadow-xs',
         destructive:
           'bg-background-danger text-white hover:bg-background-danger/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-background-danger/60 shadow-xs',
-        outline: 'border hover:bg-background-muted',
-        secondary: 'bg-background-muted text-text-default hover:bg-background-muted/80 shadow-xs',
-        ghost: 'hover:bg-background-muted dark:hover:bg-background-muted/50',
-        link: 'text-text-accent underline-offset-4 hover:underline',
+        outline: 'border hover:bg-background-secondary',
+        secondary: 'bg-background-secondary text-text-primary hover:bg-background-secondary/80 shadow-xs',
+        ghost: 'hover:bg-background-secondary dark:hover:bg-background-secondary/50',
+        link: 'text-text-inverse underline-offset-4 hover:underline',
       },
       size: {
         xs: 'h-6 gap-1 ![&_svg:not([class*="size-"])]:size-3',
diff --git a/ui/desktop/src/components/ui/card.tsx b/ui/desktop/src/components/ui/card.tsx
index 2509e1584f77..07efd5b087a1 100644
--- a/ui/desktop/src/components/ui/card.tsx
+++ b/ui/desktop/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card"
       className={cn(
-        'bg-background-default text-text-default flex flex-col gap-4 rounded-xl border py-4 shadow-sm',
+        'bg-background-primary text-text-primary flex flex-col gap-4 rounded-xl border py-4 shadow-sm',
         className
       )}
       {...props}
@@ -36,7 +36,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-description"
-      className={cn('text-text-muted text-sm', className)}
+      className={cn('text-text-secondary text-sm', className)}
       {...props}
     />
   );
diff --git a/ui/desktop/src/components/ui/dialog.tsx b/ui/desktop/src/components/ui/dialog.tsx
index b05f910f0174..6f7d4426d3d5 100644
--- a/ui/desktop/src/components/ui/dialog.tsx
+++ b/ui/desktop/src/components/ui/dialog.tsx
@@ -49,13 +49,13 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'bg-background-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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-background-primary 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
           className
         )}
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="ring-offset-background p-2 hover:bg-background-muted rounded-full focus:ring-ring data-[state=open]:bg-background-muted transition-all duration-200 data-[state=open]:text-text-muted absolute top-5 right-4 opacity-70 hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+        <DialogPrimitive.Close className="ring-offset-background p-2 hover:bg-background-secondary rounded-full focus:ring-ring data-[state=open]:bg-background-secondary transition-all duration-200 data-[state=open]:text-text-secondary absolute top-5 right-4 opacity-70 hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
           <XIcon />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
@@ -101,7 +101,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn('text-text-muted text-sm', className)}
+      className={cn('text-text-secondary text-sm', className)}
       {...props}
     />
   );
diff --git a/ui/desktop/src/components/ui/dropdown-menu.tsx b/ui/desktop/src/components/ui/dropdown-menu.tsx
index 3371062514e8..7f4787df4d76 100644
--- a/ui/desktop/src/components/ui/dropdown-menu.tsx
+++ b/ui/desktop/src/components/ui/dropdown-menu.tsx
@@ -33,7 +33,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         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-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border p-1 shadow-lg space-y-0.5',
+          'bg-background-primary text-text-primary 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-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border p-1 shadow-lg space-y-0.5',
           className
         )}
         {...props}
@@ -61,7 +61,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-background-muted focus:text-text-muted data-[variant=destructive]:text-text-danger data-[variant=destructive]:focus:bg-background-danger/10 dark:data-[variant=destructive]:focus:bg-background-danger/20 data-[variant=destructive]:focus:text-text-danger data-[variant=destructive]:*:[svg]:!text-text-danger [&_svg:not([class*='text-'])]:text-text-muted relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-background-secondary focus:text-text-secondary data-[variant=destructive]:text-text-danger data-[variant=destructive]:focus:bg-background-danger/10 dark:data-[variant=destructive]:focus:bg-background-danger/20 data-[variant=destructive]:focus:text-text-danger data-[variant=destructive]:*:[svg]:!text-text-danger [&_svg:not([class*='text-'])]:text-text-secondary relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -79,7 +79,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-background-muted focus:text-text-muted relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-background-secondary focus:text-text-secondary relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -110,7 +110,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-background-muted focus:text-text-muted relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-background-secondary focus:text-text-secondary relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -149,7 +149,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('bg-border-default -mx-1 my-1 h-px', className)}
+      className={cn('bg-border-primary -mx-1 my-1 h-px', className)}
       {...props}
     />
   );
@@ -159,7 +159,7 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'spa
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn('text-text-muted ml-auto text-xs tracking-widest', className)}
+      className={cn('text-text-secondary ml-auto text-xs tracking-widest', className)}
       {...props}
     />
   );
@@ -182,7 +182,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        'focus:bg-background-muted focus:text-text-muted data-[state=open]:bg-background-muted data-[state=open]:text-text-muted flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+        'focus:bg-background-secondary focus:text-text-secondary data-[state=open]:bg-background-secondary data-[state=open]:text-text-secondary flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
         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-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+        'bg-background-primary text-text-primary 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-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
         className
       )}
       {...props}
diff --git a/ui/desktop/src/components/ui/input.tsx b/ui/desktop/src/components/ui/input.tsx
index 894a7a5d3c33..b794506aa6ca 100644
--- a/ui/desktop/src/components/ui/input.tsx
+++ b/ui/desktop/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-md border focus:border-border-strong hover:border-border-strong bg-background-default px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-muted placeholder:font-light focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'flex h-9 w-full rounded-md border focus:border-border-secondary hover:border-border-secondary bg-background-primary px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-secondary placeholder:font-light focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className
         )}
         ref={ref}
diff --git a/ui/desktop/src/components/ui/scroll-area.tsx b/ui/desktop/src/components/ui/scroll-area.tsx
index 2fd1c5b1ce68..75900fb302a4 100644
--- a/ui/desktop/src/components/ui/scroll-area.tsx
+++ b/ui/desktop/src/components/ui/scroll-area.tsx
@@ -232,7 +232,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border-default dark:bg-background-muted" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border-primary dark:bg-background-secondary" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
diff --git a/ui/desktop/src/components/ui/separator.tsx b/ui/desktop/src/components/ui/separator.tsx
index 0ad590bb2811..ee8afe251793 100644
--- a/ui/desktop/src/components/ui/separator.tsx
+++ b/ui/desktop/src/components/ui/separator.tsx
@@ -17,7 +17,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'bg-border-default shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        'bg-border-primary shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
         className
       )}
       {...props}
diff --git a/ui/desktop/src/components/ui/sheet.tsx b/ui/desktop/src/components/ui/sheet.tsx
index 9e15efbe11f9..f9b4ef13cd01 100644
--- a/ui/desktop/src/components/ui/sheet.tsx
+++ b/ui/desktop/src/components/ui/sheet.tsx
@@ -52,7 +52,7 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          'bg-background-default data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 shadow-lg',
+          'bg-background-primary data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 shadow-lg',
           side === 'right' &&
             'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
           side === 'left' &&
@@ -66,7 +66,7 @@ function SheetContent({
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-background-muted absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-background-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
@@ -99,7 +99,7 @@ function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPr
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn('text-text-default font-medium', className)}
+      className={cn('text-text-primary font-medium', className)}
       {...props}
     />
   );
@@ -112,7 +112,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn('text-text-muted text-sm', className)}
+      className={cn('text-text-secondary text-sm', className)}
       {...props}
     />
   );
diff --git a/ui/desktop/src/components/ui/sidebar.tsx b/ui/desktop/src/components/ui/sidebar.tsx
index cc57e507e7f6..079a8b386629 100644
--- a/ui/desktop/src/components/ui/sidebar.tsx
+++ b/ui/desktop/src/components/ui/sidebar.tsx
@@ -347,7 +347,7 @@ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof S
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn('bg-border-strong ml-5 my-2 !w-8', className)}
+      className={cn('bg-border-secondary ml-5 my-2 !w-8', className)}
       {...props}
     />
   );
diff --git a/ui/desktop/src/components/ui/skeleton.tsx b/ui/desktop/src/components/ui/skeleton.tsx
index 59822d0334f4..e294e8d0af3a 100644
--- a/ui/desktop/src/components/ui/skeleton.tsx
+++ b/ui/desktop/src/components/ui/skeleton.tsx
@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="skeleton"
-      className={cn('bg-background-muted animate-pulse rounded-md', className)}
+      className={cn('bg-background-secondary animate-pulse rounded-md', className)}
       {...props}
     />
   );
diff --git a/ui/desktop/src/components/ui/switch.tsx b/ui/desktop/src/components/ui/switch.tsx
index bc53da79e196..73cbfbdad943 100644
--- a/ui/desktop/src/components/ui/switch.tsx
+++ b/ui/desktop/src/components/ui/switch.tsx
@@ -12,7 +12,7 @@ export const Switch = React.forwardRef<
     className={cn(
       'peer inline-flex h-[16px] w-[28px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
       variant === 'default'
-        ? 'data-[state=checked]:bg-background-default data-[state=unchecked]:bg-input'
+        ? 'data-[state=checked]:bg-background-primary data-[state=unchecked]:bg-input'
         : 'data-[state=checked]:bg-slate-900 dark:data-[state=checked]:bg-white data-[state=unchecked]:bg-slate-300 dark:data-[state=unchecked]:bg-slate-600',
       className
     )}
@@ -23,7 +23,7 @@ export const Switch = React.forwardRef<
       className={cn(
         'pointer-events-none block h-3 w-3 rounded-full shadow-lg ring-0 transition-transform',
         variant === 'default'
-          ? 'bg-background-default data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0'
+          ? 'bg-background-primary data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0'
           : 'bg-white dark:data-[state=checked]:bg-black dark:data-[state=unchecked]:bg-white data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0'
       )}
     />
diff --git a/ui/desktop/src/components/ui/tabs.tsx b/ui/desktop/src/components/ui/tabs.tsx
index c2d3ab9e68d1..66608b6c8f9a 100644
--- a/ui/desktop/src/components/ui/tabs.tsx
+++ b/ui/desktop/src/components/ui/tabs.tsx
@@ -10,7 +10,7 @@ const Tabs = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Root
     ref={ref}
-    className={cn('flex flex-col rounded-md text-text-muted', className)}
+    className={cn('flex flex-col rounded-md text-text-secondary', className)}
     {...props}
   />
 ));
@@ -23,7 +23,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'flex h-auto justify-start rounded-md bg-background-default p-1 text-muted-foreground gap-2',
+      'flex h-auto justify-start rounded-md bg-background-primary p-1 text-muted-foreground gap-2',
       className
     )}
     {...props}
@@ -39,7 +39,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex items-center justify-start whitespace-nowrap rounded-lg px-3 py-1.5 text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background-muted data-[state=active]:text-text-default data-[state=active]:shadow-sm hover:bg-background-muted hover:text-text-default',
+      'flex items-center justify-start whitespace-nowrap rounded-lg px-3 py-1.5 text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background-secondary data-[state=active]:text-text-primary data-[state=active]:shadow-sm hover:bg-background-secondary hover:text-text-primary',
       className
     )}
     {...props}
diff --git a/ui/desktop/src/contexts/ThemeContext.tsx b/ui/desktop/src/contexts/ThemeContext.tsx
index 6c807c9b6ab6..94dbb236e35f 100644
--- a/ui/desktop/src/contexts/ThemeContext.tsx
+++ b/ui/desktop/src/contexts/ThemeContext.tsx
@@ -1,4 +1,6 @@
 import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
+import { applyThemeTokens, buildMcpHostStyles } from '../theme/theme-tokens';
+import type { McpUiHostStyles } from '@modelcontextprotocol/ext-apps/app-bridge';
 
 type ThemePreference = 'light' | 'dark' | 'system';
 type ResolvedTheme = 'light' | 'dark';
@@ -7,6 +9,7 @@ interface ThemeContextValue {
   userThemePreference: ThemePreference;
   setUserThemePreference: (pref: ThemePreference) => void;
   resolvedTheme: ResolvedTheme;
+  mcpHostStyles: McpUiHostStyles;
 }
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
@@ -28,6 +31,9 @@ function applyThemeToDocument(theme: ResolvedTheme): void {
   document.documentElement.classList.remove(toRemove);
 }
 
+// Built once — light-dark() values are theme-independent
+const mcpHostStyles = buildMcpHostStyles();
+
 interface ThemeProviderProps {
   children: React.ReactNode;
 }
@@ -132,15 +138,17 @@ export function ThemeProvider({ children }: ThemeProviderProps) {
     };
   }, []);
 
-  // Apply theme to document whenever resolvedTheme changes
+  // Apply theme class and CSS tokens whenever resolvedTheme changes
   useEffect(() => {
     applyThemeToDocument(resolvedTheme);
+    applyThemeTokens(resolvedTheme);
   }, [resolvedTheme]);
 
   const value: ThemeContextValue = {
     userThemePreference,
     setUserThemePreference,
     resolvedTheme,
+    mcpHostStyles,
   };
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
diff --git a/ui/desktop/src/preload.ts b/ui/desktop/src/preload.ts
index 0dc7c4368d56..b4ddcc4c3542 100644
--- a/ui/desktop/src/preload.ts
+++ b/ui/desktop/src/preload.ts
@@ -150,6 +150,7 @@ type ElectronAPI = {
     mode: string;
     useSystemTheme: boolean;
     theme: string;
+    tokensUpdated?: boolean;
   }) => void;
   openExternal: (url: string) => Promise<void>;
   // Update-related functions
@@ -273,7 +274,7 @@ const electronAPI: ElectronAPI = {
   emit: (channel: string, ...args: unknown[]) => {
     ipcRenderer.emit(channel, ...args);
   },
-  broadcastThemeChange: (themeData: { mode: string; useSystemTheme: boolean; theme: string }) => {
+  broadcastThemeChange: (themeData: { mode: string; useSystemTheme: boolean; theme: string; tokensUpdated?: boolean }) => {
     ipcRenderer.send('broadcast-theme-change', themeData);
   },
   openExternal: (url: string): Promise<void> => {
diff --git a/ui/desktop/src/renderer.tsx b/ui/desktop/src/renderer.tsx
index f45198e4b6bc..ec546432a7b7 100644
--- a/ui/desktop/src/renderer.tsx
+++ b/ui/desktop/src/renderer.tsx
@@ -6,6 +6,11 @@ import SuspenseLoader from './suspense-loader';
 import { client } from './api/client.gen';
 import { setTelemetryEnabled } from './utils/analytics';
 import { readConfig } from './api';
+import { applyThemeTokens } from './theme/theme-tokens';
+
+// Apply theme tokens to :root before first paint.
+applyThemeTokens();
+
 const App = lazy(() => import('./App'));
 
 const TELEMETRY_CONFIG_KEY = 'GOOSE_TELEMETRY_ENABLED';
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 8dd1b225a7d5..f3b193d5d3e0 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -1,3 +1,7 @@
+/* ═══════════════════════════════════════════════════════════
+   1. TAILWIND IMPORTS & CONFIG
+   ═══════════════════════════════════════════════════════════ */
+
 @import 'tailwindcss';
 @import 'tw-animate-css';
 @plugin '@tailwindcss/typography';
@@ -5,13 +9,17 @@
 @source '../../index.html';
 @source '../**/*.{js,ts,jsx,tsx}';
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
   --breakpoint-md: 930px;
 }
 
-/* Cash Sans */
-
-@custom-variant dark (&:where(.dark, .dark *));
+/* ═══════════════════════════════════════════════════════════
+   2. TAILWIND PRIMITIVES — @theme {}
+   Palette colors, breakpoints, shadow reset.
+   Build-time values Tailwind uses directly. NOT part of MCP spec.
+   ═══════════════════════════════════════════════════════════ */
 
 @theme {
   --shadow-*: initial;
@@ -45,163 +53,192 @@
 
   --color-yellow-100: #ffd966;
   --color-yellow-200: #fbcd44;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   3. MCP SEMANTIC TOKEN REGISTRATION — @theme inline {}
+   Registers every McpUiStyleVariableKey so Tailwind generates utility classes.
+   Self-referential var() for colors, `initial` for non-color tokens.
+   Actual values are set at runtime by theme-tokens.ts (the single source of truth).
+   ═══════════════════════════════════════════════════════════════════════════ */
+@theme inline {
+  --ease-g2: cubic-bezier(0.55, 0, 1, 0.45);
 
-  --color-accent: var(--color-neutral-900);
+  /* Backgrounds */
+  --color-background-primary: var(--color-background-primary);
+  --color-background-secondary: var(--color-background-secondary);
+  --color-background-tertiary: var(--color-background-tertiary);
+  --color-background-inverse: var(--color-background-inverse);
+  --color-background-ghost: var(--color-background-ghost);
+  --color-background-info: var(--color-background-info);
+  --color-background-danger: var(--color-background-danger);
+  --color-background-success: var(--color-background-success);
+  --color-background-warning: var(--color-background-warning);
+  --color-background-disabled: var(--color-background-disabled);
+
+  /* Text */
+  --color-text-primary: var(--color-text-primary);
+  --color-text-secondary: var(--color-text-secondary);
+  --color-text-tertiary: var(--color-text-tertiary);
+  --color-text-inverse: var(--color-text-inverse);
+  --color-text-ghost: var(--color-text-ghost);
+  --color-text-info: var(--color-text-info);
+  --color-text-danger: var(--color-text-danger);
+  --color-text-success: var(--color-text-success);
+  --color-text-warning: var(--color-text-warning);
+  --color-text-disabled: var(--color-text-disabled);
+
+  /* Borders */
+  --color-border-primary: var(--color-border-primary);
+  --color-border-secondary: var(--color-border-secondary);
+  --color-border-tertiary: var(--color-border-tertiary);
+  --color-border-inverse: var(--color-border-inverse);
+  --color-border-ghost: var(--color-border-ghost);
+  --color-border-info: var(--color-border-info);
+  --color-border-danger: var(--color-border-danger);
+  --color-border-success: var(--color-border-success);
+  --color-border-warning: var(--color-border-warning);
+  --color-border-disabled: var(--color-border-disabled);
+
+  /* Rings */
+  --color-ring-primary: var(--color-ring-primary);
+  --color-ring-secondary: var(--color-ring-secondary);
+  --color-ring-inverse: var(--color-ring-inverse);
+  --color-ring-info: var(--color-ring-info);
+  --color-ring-danger: var(--color-ring-danger);
+  --color-ring-success: var(--color-ring-success);
+  --color-ring-warning: var(--color-ring-warning);
+
+  /* Typography */
+  --font-sans: initial;
+  --font-mono: initial;
+  --font-weight-normal: initial;
+  --font-weight-medium: initial;
+  --font-weight-semibold: initial;
+  --font-weight-bold: initial;
+  --font-text-xs-size: initial;
+  --font-text-sm-size: initial;
+  --font-text-md-size: initial;
+  --font-text-lg-size: initial;
+  --font-heading-xs-size: initial;
+  --font-heading-sm-size: initial;
+  --font-heading-md-size: initial;
+  --font-heading-lg-size: initial;
+  --font-heading-xl-size: initial;
+  --font-heading-2xl-size: initial;
+  --font-heading-3xl-size: initial;
+  --font-text-xs-line-height: initial;
+  --font-text-sm-line-height: initial;
+  --font-text-md-line-height: initial;
+  --font-text-lg-line-height: initial;
+  --font-heading-xs-line-height: initial;
+  --font-heading-sm-line-height: initial;
+  --font-heading-md-line-height: initial;
+  --font-heading-lg-line-height: initial;
+  --font-heading-xl-line-height: initial;
+  --font-heading-2xl-line-height: initial;
+  --font-heading-3xl-line-height: initial;
+
+  /* Border radius */
+  --border-radius-xs: initial;
+  --border-radius-sm: initial;
+  --border-radius-md: initial;
+  --border-radius-lg: initial;
+  --border-radius-xl: initial;
+  --border-radius-full: initial;
+
+  /* Border width */
+  --border-width-regular: initial;
+
+  /* Shadows */
+  --shadow-hairline: initial;
+  --shadow-sm: initial;
+  --shadow-md: initial;
+  --shadow-lg: initial;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   4. GOOSE DESKTOP UI ALIASES — @theme inline {}
+   App-specific tokens that map to MCP spec tokens.
+   Not part of the MCP spec — only used by Goose components.
+   ═══════════════════════════════════════════════════════════════════════════ */
+@theme inline {
+  --font-serif: serif;
+  --color-ring: var(--color-ring-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --shadow-default: var(--shadow-default);
 }
 
+/* ═══════════════════════════════════════════════════════════════════════════
+   5. APP-SPECIFIC VARIABLES — :root / .dark
+   Goose-only variables that derive from MCP tokens. These are NOT duplicated
+   in theme-tokens.ts — they exist only here.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
 :root {
-  /* fonts */
-  --font-sans: 'Cash Sans', sans-serif;
-  --font-mono: monospace;
-
-  /* theming accents */
-  --background-accent: var(--color-accent);
-  --border-accent: var(--color-accent);
-  --text-accent: var(--color-accent);
-  --text-on-accent: var(--color-white);
-
-  /* Semantic */
-  --background-default: var(--color-white);
-  --background-muted: var(--color-neutral-50);
-  --background-medium: var(--color-neutral-100);
-  --background-inverse: var(--color-black);
-  --background-danger: var(--color-red-200);
-  --background-info: var(--color-blue-200);
-
-  --border-default: var(--color-neutral-100);
-  --border-strong: var(--color-neutral-100);
-  --border-danger: var(--color-red-200);
-  --border-info: var(--color-blue-200);
-
-  --text-default: var(--color-neutral-800);
-  --text-muted: var(--color-neutral-600);
+  /* Legacy aliases (used by toast and katex styles in this file) */
   --text-inverse: var(--color-white);
   --text-danger: var(--color-red-200);
-  --text-success: var(--color-green-200);
-  --text-warning: var(--color-yellow-200);
-  --text-info: var(--color-blue-200);
-
-  --placeholder: var(--color-neutral-400);
-
-  --ring: var(--border-strong);
 
   /* Search highlighting */
   --highlight-color: rgba(255, 213, 0, 0.5);
   --highlight-current: rgba(252, 213, 3, 0.6);
 
-  --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-accent-foreground: var(--text-default);
-  --sidebar-border: var(--border-default);
-  --sidebar-ring: var(--border-default);
-
-  /* custom shadow */
-
+  /* Sidebar aliases (shadcn sidebar component convention) */
+  --sidebar: var(--color-background-secondary);
+  --sidebar-foreground: var(--color-text-primary);
+  --sidebar-primary: var(--color-background-inverse);
+  --sidebar-primary-foreground: var(--color-text-inverse);
+  --sidebar-accent: var(--color-background-secondary);
+  --sidebar-accent-foreground: var(--color-text-primary);
+  --sidebar-border: var(--color-border-primary);
+  --sidebar-ring: var(--color-border-primary);
+
+  /* Custom shadow */
   --shadow-default:
     0px 12px 32px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.02),
     0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
 }
 
 .dark {
-  /* theming accents */
-  --background-accent: var(--color-white);
-  --border-accent: var(--color-white);
-  --text-accent: var(--color-white);
-  --text-on-accent: var(--color-black);
-
-  /* semantic */
-  --background-default: var(--color-neutral-950);
-  --background-muted: var(--color-neutral-800);
-  --background-medium: var(--color-neutral-700);
-  --background-inverse: var(--color-neutral-200);
-  --background-danger: var(--color-red-100);
-  --background-info: var(--color-blue-100);
-
-  --border-default: var(--color-neutral-800);
-  --border-strong: var(--color-neutral-600);
-  --border-danger: var(--color-red-100);
-  --border-info: var(--color-blue-100);
-
-  --text-default: var(--color-white);
-  --text-muted: var(--color-neutral-300);
+  /* Legacy aliases */
   --text-inverse: var(--color-black);
   --text-danger: var(--color-red-100);
-  --text-success: var(--color-green-100);
-  --text-warning: var(--color-yellow-100);
-  --text-info: var(--color-blue-100);
-
-  --placeholder: var(--color-neutral-400);
-
-  --ring: var(--border-strong);
 
   /* Search highlighting */
   --highlight-color: rgba(255, 213, 0, 0.5);
   --highlight-current: rgba(252, 213, 3, 0.6);
 
-  --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-accent-foreground: var(--text-default);
-  --sidebar-border: var(--border-default);
-  --sidebar-ring: var(--border-default);
-
+  /* Sidebar aliases */
+  --sidebar: var(--color-background-secondary);
+  --sidebar-foreground: var(--color-text-primary);
+  --sidebar-primary: var(--color-background-inverse);
+  --sidebar-primary-foreground: var(--color-text-inverse);
+  --sidebar-accent: var(--color-background-secondary);
+  --sidebar-accent-foreground: var(--color-text-primary);
+  --sidebar-border: var(--color-border-primary);
+  --sidebar-ring: var(--color-border-primary);
+
+  /* Custom shadow */
   --shadow-default:
     0px 12px 32px 0px rgba(0, 0, 0, 0.2), 0px 8px 16px 0px rgba(0, 0, 0, 0.15),
     0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
 }
 
-@theme inline {
-  --ease-g2: cubic-bezier(0.55, 0, 1, 0.45);
-
-  --color-background-default: var(--background-default);
-  --color-background-muted: var(--background-muted);
-  --color-background-medium: var(--background-medium);
-  --color-background-inverse: var(--background-inverse);
-  --color-background-danger: var(--background-danger);
-  --color-background-info: var(--background-info);
-
-  --color-background-accent: var(--background-accent);
-  --color-border-accent: var(--border-accent);
-  --color-text-accent: var(--text-accent);
-  --color-text-on-accent: var(--text-on-accent);
-
-  --color-border-default: var(--border-default);
-  --color-border-strong: var(--border-strong);
-  --color-border-danger: var(--border-danger);
-  --color-border-info: var(--border-info);
-
-  --color-text-default: var(--text-default);
-  --color-text-muted: var(--text-muted);
-  --color-text-inverse: var(--text-inverse);
-  --color-text-danger: var(--text-danger);
-  --color-text-warning: var(--text-warning);
-  --color-text-info: var(--text-info);
-
-  --font-sans: 'Cash Sans', sans-serif;
-  --font-mono: monospace;
-  --font-serif: serif;
-
-  --color-ring: var(--ring);
-
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-
-  --shadow-default: var(--shadow-default);
-}
+/* ═══════════════════════════════════════════════════════════════════════════
+   6. BASE LAYER + FONTS + ANIMATIONS + COMPONENTS
+   Everything below is standard Tailwind @layer base / component styles.
+   ═══════════════════════════════════════════════════════════════════════════ */
 
 @layer base {
   * {
-    @apply border-border-default;
+    @apply border-border-primary;
   }
   body {
-    @apply text-text-default;
+    @apply text-text-primary;
   }
 }
 
@@ -486,30 +523,8 @@
   background-color: var(--color-neutral-500);
 }
 
-::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-neutral-200);
-  border-radius: 4px;
-}
-
-.dark ::-webkit-scrollbar-thumb {
-  background: var(--color-neutral-400);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-neutral-300);
-}
-
-.dark ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-neutral-500);
-}
-
 body {
-  background-color: var(--background-default);
+  background-color: var(--color-background-primary);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
@@ -743,17 +758,6 @@ p > code.bg-inline-code {
   will-change: width;
 }
 
-/* Remove will-change when not transitioning to save memory */
-[data-state='expanded'] [data-slot='sidebar-container'],
-[data-state='collapsed'] [data-slot='sidebar-container'] {
-  will-change: auto;
-}
-
-[data-state='expanded'] [data-slot='sidebar-gap'],
-[data-state='collapsed'] [data-slot='sidebar-gap'] {
-  will-change: auto;
-}
-
 /* Ensure smooth transitions during state changes */
 [data-state='expanded'] [data-slot='sidebar-container'],
 [data-state='collapsed'] [data-slot='sidebar-container'] {
@@ -801,8 +805,8 @@ p > code.bg-inline-code {
 .katex-display {
   margin: 0.75em 0;
   padding: 1em;
-  background-color: var(--background-muted);
-  border: 1px solid var(--border-default);
+  background-color: var(--color-background-secondary);
+  border: 1px solid var(--color-border-primary);
   border-radius: 6px;
   overflow-x: auto;
   overflow-y: hidden;
@@ -825,14 +829,14 @@ p > code.bg-inline-code {
 /* Search Highlighting Styles */
 .search-highlight {
   background-color: var(--highlight-color);
-  color: var(--text-default);
+  color: var(--color-text-primary);
   padding: 0;
   border-radius: 2px;
 }
 
 .search-highlight.current {
   background-color: var(--highlight-current);
-  box-shadow: inset 0 0 0 1px var(--text-default);
+  box-shadow: inset 0 0 0 1px var(--color-text-primary);
   z-index: 2;
 }
 
diff --git a/ui/desktop/src/suspense-loader.tsx b/ui/desktop/src/suspense-loader.tsx
index 385a552162e6..d37c9305cf46 100644
--- a/ui/desktop/src/suspense-loader.tsx
+++ b/ui/desktop/src/suspense-loader.tsx
@@ -5,7 +5,7 @@ export default function SuspenseLoader() {
     <div className="flex flex-col items-start justify-end w-screen h-screen overflow-hidden p-6 page-transition">
       <div className="flex gap-2 items-center justify-end">
         <GooseLogo size="small" />
-        <span className="text-text-muted">Loading...</span>
+        <span className="text-text-secondary">Loading...</span>
       </div>
     </div>
   );
diff --git a/ui/desktop/src/theme/theme-tokens.ts b/ui/desktop/src/theme/theme-tokens.ts
new file mode 100644
index 000000000000..07231674caa4
--- /dev/null
+++ b/ui/desktop/src/theme/theme-tokens.ts
@@ -0,0 +1,292 @@
+/**
+ * Theme tokens — the single source of truth for all MCP semantic token values.
+ *
+ * Every key in McpUiStyleVariableKey must be present in both lightTokens and
+ * darkTokens. The TypeScript compiler enforces this: if the SDK adds a new key,
+ * the build breaks until both maps are updated.
+ *
+ * Values are applied to :root via style.setProperty() before first paint
+ * (see renderer.tsx). main.css only registers the variable names for Tailwind
+ * class generation — it does NOT define values.
+ *
+ * These tokens serve two purposes:
+ *  1. Goose desktop — applied to :root per resolved theme.
+ *  2. MCP apps — encoded as light-dark() in hostContext.styles.variables.
+ */
+import type {
+  McpUiHostStyles,
+  McpUiStyleVariableKey,
+  McpUiStyles,
+} from '@modelcontextprotocol/ext-apps/app-bridge';
+
+type ThemeTokens = Record<McpUiStyleVariableKey, string>;
+
+// Subset of keys that are the same across both themes.
+type BaseTokenKey = Extract<
+  McpUiStyleVariableKey,
+  | `--font-${string}`
+  | `--border-radius-${string}`
+  | `--border-width-${string}`
+>;
+
+type ColorTokenKey = Exclude<McpUiStyleVariableKey, BaseTokenKey>;
+
+// ---------------------------------------------------------------------------
+// Base tokens — shared across light and dark themes
+// ---------------------------------------------------------------------------
+const baseTokens: Pick<ThemeTokens, BaseTokenKey> = {
+  // Typography — families
+  '--font-sans': "'Cash Sans', sans-serif",
+  '--font-mono': 'monospace',
+
+  // Typography — weights
+  '--font-weight-normal': '400',
+  '--font-weight-medium': '500',
+  '--font-weight-semibold': '600',
+  '--font-weight-bold': '700',
+
+  // Typography — text sizes
+  '--font-text-xs-size': '0.75rem',
+  '--font-text-sm-size': '0.875rem',
+  '--font-text-md-size': '1rem',
+  '--font-text-lg-size': '1.125rem',
+
+  // Typography — heading sizes
+  '--font-heading-xs-size': '1rem',
+  '--font-heading-sm-size': '1.125rem',
+  '--font-heading-md-size': '1.25rem',
+  '--font-heading-lg-size': '1.5rem',
+  '--font-heading-xl-size': '1.875rem',
+  '--font-heading-2xl-size': '2.25rem',
+  '--font-heading-3xl-size': '3rem',
+
+  // Typography — text line heights
+  '--font-text-xs-line-height': '1rem',
+  '--font-text-sm-line-height': '1.25rem',
+  '--font-text-md-line-height': '1.5rem',
+  '--font-text-lg-line-height': '1.75rem',
+
+  // Typography — heading line heights
+  '--font-heading-xs-line-height': '1.5rem',
+  '--font-heading-sm-line-height': '1.75rem',
+  '--font-heading-md-line-height': '1.75rem',
+  '--font-heading-lg-line-height': '2rem',
+  '--font-heading-xl-line-height': '2.25rem',
+  '--font-heading-2xl-line-height': '2.5rem',
+  '--font-heading-3xl-line-height': '3.5rem',
+
+  // Border radius
+  '--border-radius-xs': '2px',
+  '--border-radius-sm': '4px',
+  '--border-radius-md': '8px',
+  '--border-radius-lg': '12px',
+  '--border-radius-xl': '16px',
+  '--border-radius-full': '9999px',
+
+  // Border width
+  '--border-width-regular': '1px',
+};
+
+// Theme-specific color/shadow tokens only.
+type ColorTokens = Pick<ThemeTokens, ColorTokenKey>;
+
+// ---------------------------------------------------------------------------
+// Light theme — colors & shadows
+// ---------------------------------------------------------------------------
+const lightColorTokens: ColorTokens = {
+  // Backgrounds
+  '--color-background-primary': '#ffffff',
+  '--color-background-secondary': '#f4f6f7',
+  '--color-background-tertiary': '#e3e6ea',
+  '--color-background-inverse': '#000000',
+  '--color-background-ghost': 'transparent',
+  '--color-background-info': '#5c98f9',
+  '--color-background-danger': '#f94b4b',
+  '--color-background-success': '#91cb80',
+  '--color-background-warning': '#fbcd44',
+  '--color-background-disabled': '#e3e6ea',
+
+  // Text
+  '--color-text-primary': '#3f434b',
+  '--color-text-secondary': '#878787',
+  '--color-text-tertiary': '#a7b0b9',
+  '--color-text-inverse': '#ffffff',
+  '--color-text-ghost': '#878787',
+  '--color-text-info': '#5c98f9',
+  '--color-text-danger': '#f94b4b',
+  '--color-text-success': '#91cb80',
+  '--color-text-warning': '#fbcd44',
+  '--color-text-disabled': '#cbd1d6',
+
+  // Borders
+  '--color-border-primary': '#e3e6ea',
+  '--color-border-secondary': '#e3e6ea',
+  '--color-border-tertiary': '#cbd1d6',
+  '--color-border-inverse': '#000000',
+  '--color-border-ghost': 'transparent',
+  '--color-border-info': '#5c98f9',
+  '--color-border-danger': '#f94b4b',
+  '--color-border-success': '#91cb80',
+  '--color-border-warning': '#fbcd44',
+  '--color-border-disabled': '#e3e6ea',
+
+  // Rings
+  '--color-ring-primary': '#e3e6ea',
+  '--color-ring-secondary': '#cbd1d6',
+  '--color-ring-inverse': '#ffffff',
+  '--color-ring-info': '#5c98f9',
+  '--color-ring-danger': '#f94b4b',
+  '--color-ring-success': '#91cb80',
+  '--color-ring-warning': '#fbcd44',
+
+  // Shadows
+  '--shadow-hairline': '0 0 0 1px rgba(0, 0, 0, 0.05)',
+  '--shadow-sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  '--shadow-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+  '--shadow-lg':
+    '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+};
+
+// ---------------------------------------------------------------------------
+// Dark theme — colors & shadows
+// ---------------------------------------------------------------------------
+const darkColorTokens: ColorTokens = {
+  // Backgrounds
+  '--color-background-primary': '#22252a',
+  '--color-background-secondary': '#3f434b',
+  '--color-background-tertiary': '#474e57',
+  '--color-background-inverse': '#cbd1d6',
+  '--color-background-ghost': 'transparent',
+  '--color-background-info': '#7cacff',
+  '--color-background-danger': '#ff6b6b',
+  '--color-background-success': '#a3d795',
+  '--color-background-warning': '#ffd966',
+  '--color-background-disabled': '#474e57',
+
+  // Text
+  '--color-text-primary': '#ffffff',
+  '--color-text-secondary': '#878787',
+  '--color-text-tertiary': '#606c7a',
+  '--color-text-inverse': '#000000',
+  '--color-text-ghost': '#878787',
+  '--color-text-info': '#7cacff',
+  '--color-text-danger': '#ff6b6b',
+  '--color-text-success': '#a3d795',
+  '--color-text-warning': '#ffd966',
+  '--color-text-disabled': '#525b68',
+
+  // Borders
+  '--color-border-primary': '#3f434b',
+  '--color-border-secondary': '#525b68',
+  '--color-border-tertiary': '#474e57',
+  '--color-border-inverse': '#ffffff',
+  '--color-border-ghost': 'transparent',
+  '--color-border-info': '#7cacff',
+  '--color-border-danger': '#ff6b6b',
+  '--color-border-success': '#a3d795',
+  '--color-border-warning': '#ffd966',
+  '--color-border-disabled': '#3f434b',
+
+  // Rings
+  '--color-ring-primary': '#525b68',
+  '--color-ring-secondary': '#474e57',
+  '--color-ring-inverse': '#000000',
+  '--color-ring-info': '#7cacff',
+  '--color-ring-danger': '#ff6b6b',
+  '--color-ring-success': '#a3d795',
+  '--color-ring-warning': '#ffd966',
+
+  // Shadows (darker for dark mode)
+  '--shadow-hairline': '0 0 0 1px rgba(0, 0, 0, 0.2)',
+  '--shadow-sm': '0 1px 2px 0 rgba(0, 0, 0, 0.2)',
+  '--shadow-md': '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)',
+  '--shadow-lg':
+    '0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2)',
+};
+
+// ---------------------------------------------------------------------------
+// Merged token maps — used by applyThemeTokens() and buildMcpHostStyles()
+// ---------------------------------------------------------------------------
+export const lightTokens: ThemeTokens = { ...baseTokens, ...lightColorTokens };
+export const darkTokens: ThemeTokens = { ...baseTokens, ...darkColorTokens };
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+// @font-face rules passed to MCP apps so sandboxed iframes can load host fonts.
+const HOST_FONT_CSS = `
+@font-face {
+  font-family: 'Cash Sans';
+  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Light.woff2) format('woff2'),
+       url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Light.woff) format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Cash Sans';
+  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2) format('woff2'),
+       url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Regular.woff) format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Cash Sans';
+  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2) format('woff2'),
+       url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Medium.woff) format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Cash Sans';
+  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Bold.woff2) format('woff2'),
+       url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Bold.woff) format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+`.trim();
+
+/**
+ * Build the McpUiHostStyles object for MCP apps.
+ * Color keys use light-dark() so a single payload works for both themes.
+ * Non-color keys (fonts, radii, shadows) use plain values from baseTokens
+ * (or light as the default when values differ, e.g. shadows).
+ * css.fonts provides @font-face rules so sandboxed apps can load host fonts.
+ */
+export function buildMcpHostStyles(): McpUiHostStyles {
+  const variables: McpUiStyles = {} as McpUiStyles;
+  for (const key of Object.keys(lightTokens) as McpUiStyleVariableKey[]) {
+    const light = lightTokens[key];
+    const dark = darkTokens[key];
+    if (key.startsWith('--color-')) {
+      variables[key] = `light-dark(${light}, ${dark})`;
+    } else {
+      variables[key] = light;
+    }
+  }
+  return { variables, css: { fonts: HOST_FONT_CSS } };
+}
+
+/**
+ * Resolve the current theme from localStorage / system preference.
+ */
+export function getResolvedTheme(): 'light' | 'dark' {
+  const useSystem = localStorage.getItem('use_system_theme') !== 'false';
+  if (useSystem) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
+}
+
+/**
+ * Apply theme tokens to the document root as CSS custom properties.
+ * When called without an argument, resolves the theme from localStorage.
+ */
+export function applyThemeTokens(theme?: 'light' | 'dark'): void {
+  const resolved = theme ?? getResolvedTheme();
+  const tokens = resolved === 'dark' ? darkTokens : lightTokens;
+  const root = document.documentElement;
+  for (const [key, value] of Object.entries(tokens)) {
+    root.style.setProperty(key, value);
+  }
+}