diff --git a/app/src-tauri/tauri.conf.json b/app/src-tauri/tauri.conf.json
index eef6b2dab..46855f8a9 100644
--- a/app/src-tauri/tauri.conf.json
+++ b/app/src-tauri/tauri.conf.json
@@ -18,6 +18,8 @@
         "height": 800,
         "visible": false,
         "decorations": true,
+        "titleBarStyle": "Overlay",
+        "hiddenTitle": true,
         "resizable": true,
         "center": false
       }
diff --git a/app/src/agentworld/components/AmountCommitDialog.tsx b/app/src/agentworld/components/AmountCommitDialog.tsx
index 3b6cef3ff..ed0b19203 100644
--- a/app/src/agentworld/components/AmountCommitDialog.tsx
+++ b/app/src/agentworld/components/AmountCommitDialog.tsx
@@ -130,15 +130,13 @@ export default function AmountCommitDialog({
       maxWidthClassName="max-w-sm">
       <div className="space-y-4">
         <div>
-          <label
-            className="mb-1 block text-xs text-stone-400 dark:text-neutral-500"
-            htmlFor="x402-commit-amount">
+          <label className="mb-1 block text-xs text-content-faint" htmlFor="x402-commit-amount">
             {t('agentWorld.trading.amountLabel', 'Amount')} ({asset})
           </label>
           <input
             id="x402-commit-amount"
             data-testid="commit-amount-input"
-            className="w-full rounded-md border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 outline-none focus:border-primary-500"
+            className="w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-content outline-none focus:border-primary-500"
             inputMode="decimal"
             placeholder="0.0"
             value={amount}
@@ -162,7 +160,7 @@ export default function AmountCommitDialog({
           )}
         </div>
 
-        <p className="text-xs text-stone-400 dark:text-neutral-500">
+        <p className="text-xs text-content-faint">
           {t(
             'agentWorld.trading.commitSettleNote',
             'This is a signed commitment — funds only move if it is accepted.'
diff --git a/app/src/agentworld/components/WalletAddressChip.tsx b/app/src/agentworld/components/WalletAddressChip.tsx
index be260d1bc..c4febba7d 100644
--- a/app/src/agentworld/components/WalletAddressChip.tsx
+++ b/app/src/agentworld/components/WalletAddressChip.tsx
@@ -173,8 +173,8 @@ export default function WalletAddressChip() {
   if (state.status === 'loading') {
     return (
       <div data-testid="wallet-address-chip" className="flex items-center gap-1.5 animate-pulse">
-        <div className="h-3.5 w-3.5 rounded bg-stone-300 dark:bg-neutral-600 shrink-0" />
-        <div className="h-3 w-24 rounded bg-stone-300 dark:bg-neutral-600" />
+        <div className="h-3.5 w-3.5 rounded bg-surface-strong shrink-0" />
+        <div className="h-3 w-24 rounded bg-surface-strong" />
       </div>
     );
   }
@@ -192,7 +192,7 @@ export default function WalletAddressChip() {
         }}
         aria-label={t('agentWorld.walletRetry')}
         title={t('agentWorld.walletRetry')}
-        className="flex items-center gap-1.5 text-stone-400 transition-colors hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary-500">
+        className="flex items-center gap-1.5 text-content-faint transition-colors hover:text-content-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary-500">
         <WalletIcon />
         <span className="text-[11px] leading-none">{t('agentWorld.walletUnavailable')}</span>
       </button>
@@ -204,7 +204,7 @@ export default function WalletAddressChip() {
     return (
       <div
         data-testid="wallet-address-chip"
-        className="flex items-center gap-1.5 text-stone-400 dark:text-neutral-500">
+        className="flex items-center gap-1.5 text-content-faint">
         <WalletIcon />
         <span className="text-[11px] leading-none">{t('agentWorld.walletNotConfigured')}</span>
       </div>
@@ -216,9 +216,7 @@ export default function WalletAddressChip() {
   const truncated = truncateAddress(address);
 
   return (
-    <div
-      data-testid="wallet-address-chip"
-      className="flex items-center gap-1.5 text-stone-500 dark:text-neutral-400">
+    <div data-testid="wallet-address-chip" className="flex items-center gap-1.5 text-content-muted">
       <WalletIcon />
       <span className="font-mono text-[11px] leading-none tracking-tight" title={address}>
         {truncated}
@@ -228,7 +226,7 @@ export default function WalletAddressChip() {
         aria-label={copied ? t('agentWorld.addressCopied') : t('agentWorld.copyAddress')}
         title={copied ? t('agentWorld.addressCopied') : t('agentWorld.copyAddress')}
         onClick={() => void handleCopy(address)}
-        className="shrink-0 rounded p-0.5 text-stone-400 transition-colors hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary-500">
+        className="shrink-0 rounded p-0.5 text-content-faint transition-colors hover:text-content-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary-500">
         {copied ? <CheckIcon /> : <CopyIcon />}
       </button>
     </div>
diff --git a/app/src/agentworld/components/X402ConfirmDialog.tsx b/app/src/agentworld/components/X402ConfirmDialog.tsx
index 4bc919480..22b4de788 100644
--- a/app/src/agentworld/components/X402ConfirmDialog.tsx
+++ b/app/src/agentworld/components/X402ConfirmDialog.tsx
@@ -203,23 +203,19 @@ export default function X402ConfirmDialog({
       onClose={busy ? () => undefined : onCancel}
       maxWidthClassName="max-w-sm">
       <div className="space-y-4">
-        <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-900/50 p-4 space-y-3">
+        <div className="rounded-lg border border-line bg-surface-muted p-4 space-y-3">
           <Row label={t('agentWorld.trading.amountLabel', 'Amount')}>
-            <span
-              className="font-semibold text-stone-900 dark:text-neutral-100"
-              data-testid="x402-amount">
+            <span className="font-semibold text-content" data-testid="x402-amount">
               {amountDisplay} {assetSymbol}
             </span>
           </Row>
           <Row label={t('agentWorld.trading.networkLabel', 'Network')}>
-            <span className="text-xs text-stone-500 dark:text-neutral-400">
-              {friendlyNetwork(network)}
-            </span>
+            <span className="text-xs text-content-muted">{friendlyNetwork(network)}</span>
           </Row>
           <Row label={t('agentWorld.trading.balanceLabel', 'Your balance')}>
             <span
               className={`font-medium ${
-                insufficient ? 'text-coral-500' : 'text-stone-700 dark:text-neutral-200'
+                insufficient ? 'text-coral-500' : 'text-content-secondary'
               }`}
               data-testid="x402-balance">
               {balance
@@ -228,7 +224,7 @@ export default function X402ConfirmDialog({
             </span>
           </Row>
           <Row label={t('agentWorld.trading.walletLabel', 'Wallet')}>
-            <span className="font-mono text-xs text-stone-500 dark:text-neutral-400">
+            <span className="font-mono text-xs text-content-muted">
               {truncateAddress(walletAddress)}
             </span>
           </Row>
@@ -260,14 +256,14 @@ export default function X402ConfirmDialog({
             )}
           </p>
         ) : mode === 'commit' ? (
-          <p className="text-xs text-stone-400 dark:text-neutral-500">
+          <p className="text-xs text-content-faint">
             {t(
               'agentWorld.trading.commitSettleNote',
               'This is a signed commitment — funds only move if it is accepted.'
             )}
           </p>
         ) : (
-          <p className="text-xs text-stone-400 dark:text-neutral-500">
+          <p className="text-xs text-content-faint">
             {t(
               'agentWorld.trading.spendBroadcastNote',
               'Your wallet will sign and broadcast this payment on'
@@ -312,7 +308,7 @@ export default function X402ConfirmDialog({
 function Row({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="flex items-center justify-between gap-3">
-      <span className="text-xs text-stone-400 dark:text-neutral-500">{label}</span>
+      <span className="text-xs text-content-faint">{label}</span>
       {children}
     </div>
   );
diff --git a/app/src/agentworld/pages/AgentWorld.tsx b/app/src/agentworld/pages/AgentWorld.tsx
index 9189338dd..f6402687a 100644
--- a/app/src/agentworld/pages/AgentWorld.tsx
+++ b/app/src/agentworld/pages/AgentWorld.tsx
@@ -132,7 +132,7 @@ export default function AgentWorld() {
             ]}
             header={
               <div className="space-y-2">
-                <p className="min-w-0 text-[11px] leading-relaxed text-stone-500 dark:text-neutral-400">
+                <p className="min-w-0 text-[11px] leading-relaxed text-content-muted">
                   {t('agentWorld.description')}
                 </p>
                 <WalletAddressChip />
@@ -149,7 +149,7 @@ export default function AgentWorld() {
           className={
             isWorld
               ? 'h-full overflow-hidden bg-black'
-              : 'h-full overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-soft dark:border-neutral-800 dark:bg-neutral-900'
+              : 'h-full overflow-hidden rounded-2xl border border-line bg-surface shadow-soft'
           }>
           <Routes>
             <Route index element={<Navigate to="/agent-world/world" replace />} />
diff --git a/app/src/agentworld/pages/BountiesSection.test.tsx b/app/src/agentworld/pages/BountiesSection.test.tsx
index 94a630f0b..934e9b396 100644
--- a/app/src/agentworld/pages/BountiesSection.test.tsx
+++ b/app/src/agentworld/pages/BountiesSection.test.tsx
@@ -167,7 +167,7 @@ describe('BountyStatusBadge colors', () => {
   test('draft → gray (stone)', () => {
     render(<BountyStatusBadge status="draft" />);
     const badge = screen.getByText('draft');
-    expect(badge.className).toContain('stone');
+    expect(badge.className).toContain('content-secondary');
   });
 
   test('open → green', () => {
@@ -197,13 +197,13 @@ describe('BountyStatusBadge colors', () => {
   test('cancelled → gray (stone)', () => {
     render(<BountyStatusBadge status="cancelled" />);
     const badge = screen.getByText('cancelled');
-    expect(badge.className).toContain('stone');
+    expect(badge.className).toContain('content-secondary');
   });
 
   test('refunded → gray (stone)', () => {
     render(<BountyStatusBadge status="refunded" />);
     const badge = screen.getByText('refunded');
-    expect(badge.className).toContain('stone');
+    expect(badge.className).toContain('content-secondary');
   });
 });
 
diff --git a/app/src/agentworld/pages/BountiesSection.tsx b/app/src/agentworld/pages/BountiesSection.tsx
index e7e1412a5..afd416934 100644
--- a/app/src/agentworld/pages/BountiesSection.tsx
+++ b/app/src/agentworld/pages/BountiesSection.tsx
@@ -85,7 +85,7 @@ function StatusBlock({ tone, title, body }: { tone: string; title: string; body?
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
-      {body && <p className="max-w-md text-sm text-stone-500 dark:text-neutral-400">{body}</p>}
+      {body && <p className="max-w-md text-sm text-content-muted">{body}</p>}
     </div>
   );
 }
@@ -111,7 +111,7 @@ function useMyAgentId(): string | null {
 export function BountyStatusBadge({ status }: { status: string }) {
   const color =
     status === 'draft'
-      ? 'bg-stone-100 text-stone-600 dark:bg-neutral-800 dark:text-neutral-400'
+      ? 'bg-surface-subtle text-content-secondary'
       : status === 'open'
         ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
         : status === 'judging'
@@ -120,7 +120,7 @@ export function BountyStatusBadge({ status }: { status: string }) {
             ? 'bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400'
             : status === 'awarded'
               ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
-              : 'bg-stone-100 text-stone-600 dark:bg-neutral-800 dark:text-neutral-400'; // refunded / cancelled
+              : 'bg-surface-subtle text-content-secondary'; // refunded / cancelled
   return (
     <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${color}`}>
       {status}
@@ -175,25 +175,23 @@ function BountyRow({
 
   return (
     <div
-      className={`overflow-hidden rounded-lg border bg-white transition-colors dark:bg-neutral-900 ${
+      className={`overflow-hidden rounded-lg border bg-surface transition-colors ${
         expanded
           ? 'border-primary-300 dark:border-primary-700 sm:col-span-2'
-          : 'border-stone-200 hover:border-stone-300 dark:border-neutral-800 dark:hover:border-neutral-700'
+          : 'border-line hover:border-line-strong dark:hover:border-line-strong'
       }`}>
       {/* Summary (card header) */}
       <button
         type="button"
         onClick={onToggle}
-        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/50">
+        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted dark:hover:bg-surface-muted/50">
         <div className="min-w-0 flex-1">
           <div className="flex flex-wrap items-center gap-2">
-            <span className="truncate text-sm font-medium text-stone-900 dark:text-neutral-100">
-              {bounty.title}
-            </span>
+            <span className="truncate text-sm font-medium text-content">{bounty.title}</span>
             <BountyStatusBadge status={bounty.status} />
           </div>
-          <div className="mt-1 flex flex-wrap items-center gap-3 text-xs text-stone-500 dark:text-neutral-400">
-            <span className="font-medium text-stone-700 dark:text-neutral-300">
+          <div className="mt-1 flex flex-wrap items-center gap-3 text-xs text-content-muted">
+            <span className="font-medium text-content-secondary">
               {formatReward(bounty.reward.amount, bounty.reward.asset)}
             </span>
             <span>
@@ -210,7 +208,7 @@ function BountyRow({
           </div>
         </div>
         <svg
-          className={`mt-0.5 h-4 w-4 shrink-0 text-stone-400 transition-transform ${expanded ? 'rotate-180' : ''}`}
+          className={`mt-0.5 h-4 w-4 shrink-0 text-content-faint transition-transform ${expanded ? 'rotate-180' : ''}`}
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24">
@@ -220,87 +218,77 @@ function BountyRow({
 
       {/* Detail panel */}
       {expanded && (
-        <div className="border-t border-stone-100 bg-stone-50/50 px-4 pb-4 pt-3 dark:border-neutral-800 dark:bg-neutral-900/50">
+        <div className="border-t border-line-subtle bg-surface-muted/50 px-4 pb-4 pt-3 dark:bg-surface/50">
           {detailLoading && (
-            <p className="animate-pulse text-xs text-stone-400 dark:text-neutral-500">
-              Loading details…
-            </p>
+            <p className="animate-pulse text-xs text-content-faint">Loading details…</p>
           )}
 
           {/* Description */}
-          <p className="mb-3 whitespace-pre-wrap text-sm text-stone-700 dark:text-neutral-300">
+          <p className="mb-3 whitespace-pre-wrap text-sm text-content-secondary">
             {bounty.description}
           </p>
 
           {/* Reward detail */}
           <div className="mb-3 flex flex-wrap gap-4 text-xs">
             <div>
-              <span className="font-medium text-stone-600 dark:text-neutral-400">Reward: </span>
-              <span className="text-stone-800 dark:text-neutral-200">
+              <span className="font-medium text-content-secondary">Reward: </span>
+              <span className="text-content">
                 {formatReward(bounty.reward.amount, bounty.reward.asset)}
               </span>
               {bounty.reward.network && (
-                <span className="ml-1 text-stone-400"> ({bounty.reward.network})</span>
+                <span className="ml-1 text-content-faint"> ({bounty.reward.network})</span>
               )}
             </div>
             {bounty.deadline && (
               <div>
-                <span className="font-medium text-stone-600 dark:text-neutral-400">Deadline: </span>
-                <span className="text-stone-800 dark:text-neutral-200">
-                  {new Date(bounty.deadline).toLocaleString()}
-                </span>
+                <span className="font-medium text-content-secondary">Deadline: </span>
+                <span className="text-content">{new Date(bounty.deadline).toLocaleString()}</span>
               </div>
             )}
             <div>
-              <span className="font-medium text-stone-600 dark:text-neutral-400">Created: </span>
-              <span className="text-stone-800 dark:text-neutral-200">
-                {new Date(bounty.createdAt).toLocaleString()}
-              </span>
+              <span className="font-medium text-content-secondary">Created: </span>
+              <span className="text-content">{new Date(bounty.createdAt).toLocaleString()}</span>
             </div>
           </div>
 
           {/* Council section */}
           {bounty.council && (
-            <div className="mb-3 rounded border border-stone-200 bg-white p-3 dark:border-neutral-700 dark:bg-neutral-800">
-              <p className="mb-1 text-xs font-semibold text-stone-600 dark:text-neutral-300">
-                Council
-              </p>
+            <div className="mb-3 rounded border border-line bg-surface p-3">
+              <p className="mb-1 text-xs font-semibold text-content-secondary">Council</p>
               <div className="flex flex-wrap gap-3 text-xs">
-                <span className="text-stone-700 dark:text-neutral-300">
+                <span className="text-content-secondary">
                   Status: <span className="font-medium">{bounty.council.status}</span>
                 </span>
                 {bounty.council.winnerSubmissionId && (
-                  <span className="text-stone-700 dark:text-neutral-300">
+                  <span className="text-content-secondary">
                     Winner:{' '}
                     <span className="font-mono">{abbrev(bounty.council.winnerSubmissionId)}</span>
                   </span>
                 )}
               </div>
               {bounty.council.reasoning && (
-                <p className="mt-1 text-xs text-stone-600 dark:text-neutral-400 line-clamp-3">
+                <p className="mt-1 text-xs text-content-secondary line-clamp-3">
                   {bounty.council.reasoning}
                 </p>
               )}
               {bounty.council.votes && bounty.council.votes.length > 0 && (
                 <div className="mt-2">
-                  <p className="mb-1 text-xs font-medium text-stone-500 dark:text-neutral-400">
-                    Votes
-                  </p>
+                  <p className="mb-1 text-xs font-medium text-content-muted">Votes</p>
                   <div className="space-y-1">
                     {bounty.council.votes.map((vote, i) => (
                       <div
                         key={i}
-                        className="rounded border border-stone-100 bg-stone-50 px-2 py-1 text-xs dark:border-neutral-700 dark:bg-neutral-900">
-                        <span className="font-mono text-stone-600 dark:text-neutral-400">
+                        className="rounded border border-line-subtle bg-surface-muted px-2 py-1 text-xs dark:border-line-strong">
+                        <span className="font-mono text-content-secondary">
                           {vote.model ?? 'judge'}
                         </span>
                         {vote.winnerSubmissionId && (
-                          <span className="ml-2 text-stone-700 dark:text-neutral-300">
+                          <span className="ml-2 text-content-secondary">
                             → {abbrev(vote.winnerSubmissionId)}
                           </span>
                         )}
                         {vote.reasoning && (
-                          <p className="mt-0.5 text-stone-500 dark:text-neutral-500 line-clamp-1">
+                          <p className="mt-0.5 text-content-muted dark:text-content-faint line-clamp-1">
                             {vote.reasoning}
                           </p>
                         )}
@@ -315,25 +303,23 @@ function BountyRow({
           {/* Submissions section */}
           {submissions.length > 0 && (
             <div className="mb-3">
-              <p className="mb-1 text-xs font-semibold text-stone-600 dark:text-neutral-300">
+              <p className="mb-1 text-xs font-semibold text-content-secondary">
                 Submissions ({submissions.length})
               </p>
               <div className="space-y-1">
                 {submissions.map(sub => (
                   <div
                     key={sub.submissionId}
-                    className="rounded border border-stone-200 bg-white p-2 text-xs dark:border-neutral-700 dark:bg-neutral-800">
+                    className="rounded border border-line bg-surface p-2 text-xs">
                     <div className="flex flex-wrap items-center gap-2">
-                      <span className="font-mono text-stone-600 dark:text-neutral-400">
+                      <span className="font-mono text-content-secondary">
                         {abbrev(sub.submitter)}
                       </span>
-                      <span className="text-stone-500 dark:text-neutral-500">{sub.status}</span>
+                      <span className="text-content-muted dark:text-content-faint">
+                        {sub.status}
+                      </span>
                     </div>
-                    {sub.title && (
-                      <p className="mt-0.5 font-medium text-stone-800 dark:text-neutral-200">
-                        {sub.title}
-                      </p>
-                    )}
+                    {sub.title && <p className="mt-0.5 font-medium text-content">{sub.title}</p>}
                     <a
                       href={sub.url}
                       target="_blank"
@@ -342,7 +328,7 @@ function BountyRow({
                       {sub.url}
                     </a>
                     {sub.note && (
-                      <p className="mt-0.5 text-stone-500 dark:text-neutral-500 line-clamp-2">
+                      <p className="mt-0.5 text-content-muted dark:text-content-faint line-clamp-2">
                         {sub.note}
                       </p>
                     )}
@@ -355,23 +341,19 @@ function BountyRow({
           {/* Comments section */}
           {comments.length > 0 && (
             <div className="mb-3">
-              <p className="mb-1 text-xs font-semibold text-stone-600 dark:text-neutral-300">
+              <p className="mb-1 text-xs font-semibold text-content-secondary">
                 Comments ({comments.length})
               </p>
               <div className="space-y-1">
                 {comments.map(c => (
                   <div
                     key={c.commentId}
-                    className="rounded border border-stone-200 bg-white p-2 text-xs dark:border-neutral-700 dark:bg-neutral-800">
+                    className="rounded border border-line bg-surface p-2 text-xs">
                     <div className="flex items-center gap-2">
-                      <span className="font-mono text-stone-600 dark:text-neutral-400">
-                        {abbrev(c.author)}
-                      </span>
-                      <span className="text-stone-400 dark:text-neutral-500">
-                        {relativeTime(c.createdAt)}
-                      </span>
+                      <span className="font-mono text-content-secondary">{abbrev(c.author)}</span>
+                      <span className="text-content-faint">{relativeTime(c.createdAt)}</span>
                     </div>
-                    <p className="mt-0.5 text-stone-700 dark:text-neutral-300">{c.body}</p>
+                    <p className="mt-0.5 text-content-secondary">{c.body}</p>
                   </div>
                 ))}
               </div>
@@ -380,28 +362,28 @@ function BountyRow({
 
           {/* On-chain section */}
           {(bounty.escrowAddress ?? bounty.fundingTxSig ?? bounty.payoutTxSig) && (
-            <div className="mb-3 rounded border border-stone-200 bg-white p-3 text-xs dark:border-neutral-700 dark:bg-neutral-800">
-              <p className="mb-1 font-semibold text-stone-600 dark:text-neutral-300">On-chain</p>
+            <div className="mb-3 rounded border border-line bg-surface p-3 text-xs">
+              <p className="mb-1 font-semibold text-content-secondary">On-chain</p>
               {bounty.escrowAddress && (
                 <div>
-                  <span className="text-stone-500 dark:text-neutral-400">Escrow: </span>
-                  <span className="font-mono text-stone-700 dark:text-neutral-300">
+                  <span className="text-content-muted">Escrow: </span>
+                  <span className="font-mono text-content-secondary">
                     {abbrev(bounty.escrowAddress)}
                   </span>
                 </div>
               )}
               {bounty.fundingTxSig && (
                 <div>
-                  <span className="text-stone-500 dark:text-neutral-400">Funding tx: </span>
-                  <span className="font-mono text-stone-700 dark:text-neutral-300">
+                  <span className="text-content-muted">Funding tx: </span>
+                  <span className="font-mono text-content-secondary">
                     {abbrev(bounty.fundingTxSig)}
                   </span>
                 </div>
               )}
               {bounty.payoutTxSig && (
                 <div>
-                  <span className="text-stone-500 dark:text-neutral-400">Payout tx: </span>
-                  <span className="font-mono text-stone-700 dark:text-neutral-300">
+                  <span className="text-content-muted">Payout tx: </span>
+                  <span className="font-mono text-content-secondary">
                     {abbrev(bounty.payoutTxSig)}
                   </span>
                 </div>
@@ -440,7 +422,7 @@ function BountyRow({
               {/* TODO: surface Approve when admin role detection is available */}
             </div>
           ) : (
-            <p className="mt-2 text-xs text-stone-400 dark:text-neutral-500">
+            <p className="mt-2 text-xs text-content-faint">
               Unlock your wallet to interact with this bounty.
             </p>
           )}
@@ -596,19 +578,17 @@ function CreateBountyModal({
         }}
         className="space-y-3">
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-600 dark:text-neutral-400">
-            Title *
-          </label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">Title *</label>
           <input
             type="text"
             value={title}
             onChange={e => setTitle(e.target.value)}
             placeholder="Bounty title"
-            className="w-full rounded border border-stone-300 bg-white px-3 py-1.5 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600"
           />
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-600 dark:text-neutral-400">
+          <label className="mb-1 block text-xs font-medium text-content-secondary">
             Description *
           </label>
           <textarea
@@ -616,12 +596,12 @@ function CreateBountyModal({
             onChange={e => setDescription(e.target.value)}
             placeholder="Describe the bounty task…"
             rows={4}
-            className="w-full rounded border border-stone-300 bg-white px-3 py-1.5 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600"
           />
         </div>
         <div className="flex gap-2">
           <div className="flex-1">
-            <label className="mb-1 block text-xs font-medium text-stone-600 dark:text-neutral-400">
+            <label className="mb-1 block text-xs font-medium text-content-secondary">
               Amount *
             </label>
             <input
@@ -631,24 +611,22 @@ function CreateBountyModal({
               value={amount}
               onChange={e => setAmount(e.target.value)}
               placeholder="5"
-              className="w-full rounded border border-stone-300 bg-white px-3 py-1.5 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
+              className="w-full rounded border border-line-strong bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600"
             />
           </div>
           <div className="w-28">
-            <label className="mb-1 block text-xs font-medium text-stone-600 dark:text-neutral-400">
-              Asset
-            </label>
+            <label className="mb-1 block text-xs font-medium text-content-secondary">Asset</label>
             <input
               type="text"
               value={asset}
               onChange={e => setAsset(e.target.value)}
               placeholder="USDC"
-              className="w-full rounded border border-stone-300 bg-white px-3 py-1.5 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
+              className="w-full rounded border border-line-strong bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600"
             />
           </div>
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-600 dark:text-neutral-400">
+          <label className="mb-1 block text-xs font-medium text-content-secondary">
             Deadline (optional)
           </label>
           <input
@@ -656,11 +634,11 @@ function CreateBountyModal({
             value={deadline}
             min={minDeadline}
             onChange={e => setDeadline(e.target.value)}
-            className="w-full rounded border border-stone-300 bg-white px-3 py-1.5 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600"
           />
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-600 dark:text-neutral-400">
+          <label className="mb-1 block text-xs font-medium text-content-secondary">
             Duration (days, alternative to deadline)
           </label>
           <input
@@ -670,7 +648,7 @@ function CreateBountyModal({
             value={durationDays}
             onChange={e => setDurationDays(e.target.value)}
             placeholder="14"
-            className="w-full rounded border border-stone-300 bg-white px-3 py-1.5 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600"
           />
         </div>
         {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
@@ -735,19 +713,17 @@ function SubmitWorkModal({
         }}
         className="space-y-3">
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-600 dark:text-neutral-400">
-            URL *
-          </label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">URL *</label>
           <input
             type="text"
             value={url}
             onChange={e => setUrl(e.target.value)}
             placeholder="https://github.com/…"
-            className="w-full rounded border border-stone-300 bg-white px-3 py-1.5 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600"
           />
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-600 dark:text-neutral-400">
+          <label className="mb-1 block text-xs font-medium text-content-secondary">
             Title (optional)
           </label>
           <input
@@ -755,11 +731,11 @@ function SubmitWorkModal({
             value={title}
             onChange={e => setTitle(e.target.value)}
             placeholder="My submission"
-            className="w-full rounded border border-stone-300 bg-white px-3 py-1.5 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600"
           />
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-600 dark:text-neutral-400">
+          <label className="mb-1 block text-xs font-medium text-content-secondary">
             Note (optional)
           </label>
           <textarea
@@ -767,7 +743,7 @@ function SubmitWorkModal({
             onChange={e => setNote(e.target.value)}
             placeholder="Additional notes…"
             rows={3}
-            className="w-full rounded border border-stone-300 bg-white px-3 py-1.5 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600"
           />
         </div>
         {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
@@ -825,16 +801,14 @@ function CommentModal({
         }}
         className="space-y-3">
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-600 dark:text-neutral-400">
-            Comment *
-          </label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">Comment *</label>
           <textarea
             value={body}
             onChange={e => setBody(e.target.value)}
             placeholder="Your comment…"
             required
             rows={4}
-            className="w-full rounded border border-stone-300 bg-white px-3 py-1.5 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-neutral-600"
           />
         </div>
         {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
@@ -919,7 +893,7 @@ export default function BountiesSection() {
   let body: React.ReactNode;
   if (state.status === 'loading') {
     body = (
-      <div className="flex h-64 items-center justify-center text-stone-400 dark:text-neutral-500">
+      <div className="flex h-64 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading bounties...</span>
       </div>
     );
@@ -934,7 +908,7 @@ export default function BountiesSection() {
   } else if (state.bounties.length === 0) {
     body = (
       <StatusBlock
-        tone="text-stone-500 dark:text-neutral-400"
+        tone="text-content-muted"
         title="No bounties found"
         body="No bounties have been posted yet. Create one to get started."
       />
diff --git a/app/src/agentworld/pages/DirectorySection.tsx b/app/src/agentworld/pages/DirectorySection.tsx
index 359f8dd2d..c607a1bbc 100644
--- a/app/src/agentworld/pages/DirectorySection.tsx
+++ b/app/src/agentworld/pages/DirectorySection.tsx
@@ -139,8 +139,7 @@ function getFollowerCount(agent: AgentCard): number | null {
 
 // ── Sub-components ────────────────────────────────────────────────────────────
 
-const CARD_CLASS =
-  'rounded-lg border border-stone-200 bg-white dark:border-neutral-800 dark:bg-neutral-900';
+const CARD_CLASS = 'rounded-lg border border-line bg-surface';
 
 function LoadingSkeleton() {
   return (
@@ -148,13 +147,13 @@ function LoadingSkeleton() {
       {Array.from({ length: 6 }).map((_, i) => (
         <div key={i} className={`animate-pulse p-3 ${CARD_CLASS}`}>
           <div className="flex items-start gap-2.5">
-            <div className="h-8 w-8 flex-shrink-0 rounded-full bg-stone-200 dark:bg-neutral-800" />
+            <div className="h-8 w-8 flex-shrink-0 rounded-full bg-surface-strong" />
             <div className="min-w-0 flex-1 space-y-2">
-              <div className="h-4 w-20 rounded bg-stone-200 dark:bg-neutral-800" />
-              <div className="h-3 w-full rounded bg-stone-200 dark:bg-neutral-800" />
+              <div className="h-4 w-20 rounded bg-surface-strong" />
+              <div className="h-3 w-full rounded bg-surface-strong" />
               <div className="flex gap-1">
-                <div className="h-4 w-12 rounded-full bg-stone-200 dark:bg-neutral-800" />
-                <div className="h-4 w-14 rounded-full bg-stone-200 dark:bg-neutral-800" />
+                <div className="h-4 w-12 rounded-full bg-surface-strong" />
+                <div className="h-4 w-14 rounded-full bg-surface-strong" />
               </div>
             </div>
           </div>
@@ -237,7 +236,7 @@ function AgentCardItem({ agent, myAgentId }: { agent: AgentCard; myAgentId: stri
         CARD_CLASS,
         selected
           ? 'border-primary-400 ring-1 ring-primary-400 dark:border-primary-500'
-          : 'hover:border-stone-300 dark:hover:border-neutral-700',
+          : 'hover:border-line-strong dark:hover:border-line-strong',
       ].join(' ')}
       onClick={() => setSelected(s => !s)}
       onKeyDown={e => {
@@ -255,17 +254,15 @@ function AgentCardItem({ agent, myAgentId }: { agent: AgentCard; myAgentId: stri
         </div>
         <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between">
-            <p className="truncate text-sm font-medium text-stone-900 dark:text-neutral-100">
-              {handle}
-            </p>
+            <p className="truncate text-sm font-medium text-content">{handle}</p>
             {!isSelf && myAgentId && followState !== 'unknown' && (
               <button
                 type="button"
                 className={[
                   'ml-2 flex-shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors',
                   followState === 'following'
-                    ? 'bg-stone-200 text-stone-700 hover:bg-red-100 hover:text-red-700 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:bg-red-900/30 dark:hover:text-red-400'
-                    : 'bg-primary-600 text-white hover:bg-primary-700',
+                    ? 'bg-surface-strong text-content-secondary hover:bg-red-100 hover:text-red-700 dark:hover:bg-red-900/30 dark:hover:text-red-400'
+                    : 'bg-primary-600 text-content-inverted hover:bg-primary-700',
                 ].join(' ')}
                 disabled={actionLoading}
                 onClick={handleFollow}>
@@ -273,11 +270,9 @@ function AgentCardItem({ agent, myAgentId }: { agent: AgentCard; myAgentId: stri
               </button>
             )}
           </div>
-          <p className="mt-0.5 truncate text-xs text-stone-500 dark:text-neutral-400">
-            {agent.description ?? ''}
-          </p>
+          <p className="mt-0.5 truncate text-xs text-content-muted">{agent.description ?? ''}</p>
           {followerCount != null && (
-            <p className="mt-0.5 text-xs text-stone-400 dark:text-neutral-500">
+            <p className="mt-0.5 text-xs text-content-faint">
               {followerCount} {followerCount === 1 ? 'follower' : 'followers'}
             </p>
           )}
@@ -286,7 +281,7 @@ function AgentCardItem({ agent, myAgentId }: { agent: AgentCard; myAgentId: stri
               {skills.map(skill => (
                 <span
                   key={skill}
-                  className="rounded-full bg-stone-100 px-1.5 py-0.5 text-xs text-stone-600 dark:bg-neutral-800 dark:text-neutral-300">
+                  className="rounded-full bg-surface-subtle px-1.5 py-0.5 text-xs text-content-secondary">
                   {skill}
                 </span>
               ))}
@@ -303,7 +298,7 @@ function StatusBlock({ tone, title, body }: { tone: string; title: string; body?
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
-      {body && <p className="max-w-md text-sm text-stone-500 dark:text-neutral-400">{body}</p>}
+      {body && <p className="max-w-md text-sm text-content-muted">{body}</p>}
     </div>
   );
 }
@@ -332,7 +327,7 @@ export default function DirectorySection() {
       state.message.includes('wallet secret material is missing');
     body = isWalletLocked ? (
       <StatusBlock
-        tone="text-stone-700 dark:text-neutral-200"
+        tone="text-content-secondary"
         title="Unlock your wallet to browse the Directory"
         body="Agent World uses your wallet identity. Import your recovery phrase in Settings to continue."
       />
@@ -348,7 +343,7 @@ export default function DirectorySection() {
     body =
       agents.length === 0 ? (
         <StatusBlock
-          tone="text-stone-600 dark:text-neutral-300"
+          tone="text-content-secondary"
           title="No agents found"
           body="No agents are registered in the directory yet."
         />
diff --git a/app/src/agentworld/pages/ExploreSection/index.tsx b/app/src/agentworld/pages/ExploreSection/index.tsx
index b0980f144..4d771b91a 100644
--- a/app/src/agentworld/pages/ExploreSection/index.tsx
+++ b/app/src/agentworld/pages/ExploreSection/index.tsx
@@ -34,8 +34,7 @@ const debug = debugFactory('agentworld:explore');
 
 // ── Shared card style ─────────────────────────────────────────────────────────
 
-const CARD_CLASS =
-  'rounded-lg border border-stone-200 bg-white dark:border-neutral-800 dark:bg-neutral-900';
+const CARD_CLASS = 'rounded-lg border border-line bg-surface';
 
 function formatAmount(amount: string): string {
   if (!Number.isFinite(Number(amount))) return amount;
@@ -268,13 +267,11 @@ function num(value?: number): string {
 function StatCard({ label, value, sub }: { label: string; value: string; sub?: string }) {
   return (
     <div className={`p-4 ${CARD_CLASS}`}>
-      <div className="text-[11px] font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+      <div className="text-[11px] font-semibold uppercase tracking-wider text-content-muted">
         {label}
       </div>
-      <div className="mt-1.5 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
-        {value}
-      </div>
-      {sub && <div className="mt-0.5 text-xs text-stone-400 dark:text-neutral-500">{sub}</div>}
+      <div className="mt-1.5 text-2xl font-semibold text-content">{value}</div>
+      {sub && <div className="mt-0.5 text-xs text-content-faint">{sub}</div>}
     </div>
   );
 }
@@ -284,7 +281,7 @@ function StatusBlock({ tone, title, body }: { tone: string; title: string; body?
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
-      {body && <p className="max-w-md text-sm text-stone-500 dark:text-neutral-400">{body}</p>}
+      {body && <p className="max-w-md text-sm text-content-muted">{body}</p>}
     </div>
   );
 }
@@ -301,7 +298,7 @@ function SectionHeader({
 }) {
   return (
     <div className="mb-3 flex items-center justify-between">
-      <h3 className="text-sm font-semibold text-stone-800 dark:text-neutral-200">{title}</h3>
+      <h3 className="text-sm font-semibold text-content">{title}</h3>
       <button
         type="button"
         onClick={onViewAll}
@@ -314,7 +311,7 @@ function SectionHeader({
 
 /** Inline empty message rendered inside a section when it has no data. */
 function SectionEmpty({ message }: { message: string }) {
-  return <p className="py-4 text-center text-sm text-stone-400 dark:text-neutral-500">{message}</p>;
+  return <p className="py-4 text-center text-sm text-content-faint">{message}</p>;
 }
 
 // ── Communities section ───────────────────────────────────────────────────────
@@ -325,9 +322,9 @@ function CommunitySkeletonGrid() {
       {Array.from({ length: 6 }).map((_, i) => (
         <div key={i} className={`animate-pulse p-3 ${CARD_CLASS}`}>
           <div className="space-y-2">
-            <div className="h-4 w-3/4 rounded bg-stone-200 dark:bg-neutral-800" />
-            <div className="h-3 w-full rounded bg-stone-200 dark:bg-neutral-800" />
-            <div className="h-3 w-1/3 rounded bg-stone-200 dark:bg-neutral-800" />
+            <div className="h-4 w-3/4 rounded bg-surface-strong" />
+            <div className="h-3 w-full rounded bg-surface-strong" />
+            <div className="h-3 w-1/3 rounded bg-surface-strong" />
           </div>
         </div>
       ))}
@@ -339,20 +336,16 @@ function CommunityCard({ group }: { group: GroupMetadata }) {
   const tags = group.tags ?? [];
   return (
     <div className={`p-3 ${CARD_CLASS}`}>
-      <div className="font-medium text-stone-900 dark:text-neutral-100">{group.name}</div>
+      <div className="font-medium text-content">{group.name}</div>
       {group.description && (
-        <p className="mt-1 line-clamp-2 text-xs text-stone-500 dark:text-neutral-400">
-          {group.description}
-        </p>
+        <p className="mt-1 line-clamp-2 text-xs text-content-muted">{group.description}</p>
       )}
       <div className="mt-2 flex flex-wrap items-center gap-1">
-        <span className="text-xs text-stone-400 dark:text-neutral-500">
-          {group.memberCount} members
-        </span>
+        <span className="text-xs text-content-faint">{group.memberCount} members</span>
         {tags.slice(0, 3).map(tag => (
           <span
             key={tag}
-            className="rounded-full bg-stone-100 px-2 py-0.5 text-[11px] text-stone-600 dark:bg-neutral-800 dark:text-neutral-400">
+            className="rounded-full bg-surface-subtle px-2 py-0.5 text-[11px] text-content-secondary">
             {tag}
           </span>
         ))}
@@ -401,10 +394,10 @@ function JobSkeletonList() {
         <div key={i} className={`animate-pulse p-3 ${CARD_CLASS}`}>
           <div className="flex items-start justify-between gap-2">
             <div className="flex-1 space-y-2">
-              <div className="h-4 w-2/3 rounded bg-stone-200 dark:bg-neutral-800" />
-              <div className="h-3 w-1/3 rounded bg-stone-200 dark:bg-neutral-800" />
+              <div className="h-4 w-2/3 rounded bg-surface-strong" />
+              <div className="h-3 w-1/3 rounded bg-surface-strong" />
             </div>
-            <div className="h-5 w-16 rounded bg-stone-200 dark:bg-neutral-800" />
+            <div className="h-5 w-16 rounded bg-surface-strong" />
           </div>
         </div>
       ))}
@@ -428,8 +421,8 @@ function JobRow({ job }: { job: GqlJobPosting }) {
     <div className={`p-3 ${CARD_CLASS}`}>
       <div className="flex items-start justify-between gap-2">
         <div className="min-w-0 flex-1">
-          <div className="font-medium text-stone-900 dark:text-neutral-100">{job.title}</div>
-          <div className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+          <div className="font-medium text-content">{job.title}</div>
+          <div className="mt-0.5 text-xs text-content-muted">
             {job.clientProfile.displayName} &middot; {relativeTime(job.createdAt)}
           </div>
           {skills.length > 0 && (
@@ -437,7 +430,7 @@ function JobRow({ job }: { job: GqlJobPosting }) {
               {skills.slice(0, 4).map(skill => (
                 <span
                   key={skill}
-                  className="rounded-full bg-stone-100 px-2 py-0.5 text-[11px] text-stone-600 dark:bg-neutral-800 dark:text-neutral-400">
+                  className="rounded-full bg-surface-subtle px-2 py-0.5 text-[11px] text-content-secondary">
                   {skill}
                 </span>
               ))}
@@ -445,7 +438,7 @@ function JobRow({ job }: { job: GqlJobPosting }) {
           )}
         </div>
         <div className="flex-shrink-0 text-right">
-          <div className="text-sm font-semibold text-stone-800 dark:text-neutral-200">
+          <div className="text-sm font-semibold text-content">
             {job.budget.amount} {job.budget.asset}
           </div>
         </div>
@@ -494,10 +487,10 @@ function BountySkeletonList() {
         <div key={i} className={`animate-pulse p-3 ${CARD_CLASS}`}>
           <div className="flex items-start justify-between gap-2">
             <div className="flex-1 space-y-2">
-              <div className="h-4 w-2/3 rounded bg-stone-200 dark:bg-neutral-800" />
-              <div className="h-3 w-1/4 rounded bg-stone-200 dark:bg-neutral-800" />
+              <div className="h-4 w-2/3 rounded bg-surface-strong" />
+              <div className="h-3 w-1/4 rounded bg-surface-strong" />
             </div>
-            <div className="h-5 w-20 rounded bg-stone-200 dark:bg-neutral-800" />
+            <div className="h-5 w-20 rounded bg-surface-strong" />
           </div>
         </div>
       ))}
@@ -510,14 +503,14 @@ function BountyRow({ bounty }: { bounty: GqlBounty }) {
     <div className={`p-3 ${CARD_CLASS}`}>
       <div className="flex items-start justify-between gap-2">
         <div className="min-w-0 flex-1">
-          <div className="font-medium text-stone-900 dark:text-neutral-100">{bounty.title}</div>
-          <div className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+          <div className="font-medium text-content">{bounty.title}</div>
+          <div className="mt-0.5 text-xs text-content-muted">
             {bounty.submissionCount} submission{bounty.submissionCount !== 1 ? 's' : ''}
             {bounty.deadline ? ` · deadline ${new Date(bounty.deadline).toLocaleDateString()}` : ''}
           </div>
         </div>
         <div className="flex-shrink-0 text-right">
-          <div className="text-sm font-semibold text-stone-800 dark:text-neutral-200">
+          <div className="text-sm font-semibold text-content">
             {formatReward(bounty.reward.amount, bounty.reward.asset)}
           </div>
         </div>
@@ -588,9 +581,9 @@ function AgentSkeletonGrid() {
       {Array.from({ length: 8 }).map((_, i) => (
         <div key={i} className={`animate-pulse p-3 ${CARD_CLASS}`}>
           <div className="flex flex-col items-center gap-2 text-center">
-            <div className="h-10 w-10 rounded-full bg-stone-200 dark:bg-neutral-800" />
-            <div className="h-3 w-16 rounded bg-stone-200 dark:bg-neutral-800" />
-            <div className="h-3 w-full rounded bg-stone-200 dark:bg-neutral-800" />
+            <div className="h-10 w-10 rounded-full bg-surface-strong" />
+            <div className="h-3 w-16 rounded bg-surface-strong" />
+            <div className="h-3 w-full rounded bg-surface-strong" />
           </div>
         </div>
       ))}
@@ -611,11 +604,9 @@ function AgentMiniCard({ agent }: { agent: AgentCard }) {
           className={`flex h-10 w-10 items-center justify-center rounded-full text-xs font-bold text-white ${colorClass}`}>
           {initials}
         </div>
-        <div className="text-xs font-medium text-stone-800 dark:text-neutral-200">{handle}</div>
+        <div className="text-xs font-medium text-content">{handle}</div>
         {agent.description && (
-          <p className="line-clamp-2 text-[11px] text-stone-400 dark:text-neutral-500">
-            {agent.description}
-          </p>
+          <p className="line-clamp-2 text-[11px] text-content-faint">{agent.description}</p>
         )}
       </div>
     </div>
@@ -658,7 +649,7 @@ function ExploreAgentsGrid({
 function NetworkStatsSection({ state }: { state: StatsState }) {
   if (state.status === 'loading') {
     return (
-      <div className="flex h-40 items-center justify-center text-stone-400 dark:text-neutral-500">
+      <div className="flex h-40 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading network overview…</span>
       </div>
     );
@@ -678,7 +669,7 @@ function NetworkStatsSection({ state }: { state: StatsState }) {
       state.message.includes('wallet secret material is missing');
     return isWalletLocked ? (
       <StatusBlock
-        tone="text-stone-700 dark:text-neutral-200"
+        tone="text-content-secondary"
         title="Unlock your wallet to use Agent World"
         body="Agent World uses your wallet identity. Import your recovery phrase in Settings to continue."
       />
@@ -695,7 +686,7 @@ function NetworkStatsSection({ state }: { state: StatsState }) {
   return (
     <div className="space-y-4">
       <div>
-        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-content-muted">
           All time
         </h3>
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
@@ -705,7 +696,7 @@ function NetworkStatsSection({ state }: { state: StatsState }) {
         </div>
       </div>
       <div>
-        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-content-muted">
           Last 24 hours
         </h3>
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
@@ -716,7 +707,7 @@ function NetworkStatsSection({ state }: { state: StatsState }) {
         </div>
       </div>
       <div>
-        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-content-muted">
           Ledger
         </h3>
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
@@ -753,7 +744,7 @@ export default function ExploreSection() {
       <div className="space-y-8">
         {/* ── Network stats (top, always first) ── */}
         <section>
-          <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+          <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-content-muted">
             {t('explore.networkOverview')}
           </h3>
           <NetworkStatsSection state={statsState} />
diff --git a/app/src/agentworld/pages/FeedSection.test.tsx b/app/src/agentworld/pages/FeedSection.test.tsx
index 699c01332..1a0b78250 100644
--- a/app/src/agentworld/pages/FeedSection.test.tsx
+++ b/app/src/agentworld/pages/FeedSection.test.tsx
@@ -291,7 +291,6 @@ describe('Feed list', () => {
   });
 
   test('tolerates response missing items field and shows empty state', async () => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     vi.mocked(apiClient.graphql.homeFeed).mockResolvedValue({} as any);
     render(<FeedSection />);
     await waitFor(() => {
diff --git a/app/src/agentworld/pages/FeedSection.tsx b/app/src/agentworld/pages/FeedSection.tsx
index e975fb036..42f0051fc 100644
--- a/app/src/agentworld/pages/FeedSection.tsx
+++ b/app/src/agentworld/pages/FeedSection.tsx
@@ -110,7 +110,7 @@ function StatusBlock({ tone, title, body }: { tone: string; title: string; body?
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
-      {body && <p className="max-w-md text-sm text-stone-500 dark:text-neutral-400">{body}</p>}
+      {body && <p className="max-w-md text-sm text-content-muted">{body}</p>}
     </div>
   );
 }
@@ -119,7 +119,7 @@ function StatusBlock({ tone, title, body }: { tone: string; title: string; body?
 function InitialAvatar({ name }: { name: string }) {
   const initial = (name[0] ?? '?').toUpperCase();
   return (
-    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-500 text-xs font-semibold text-white">
+    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-500 text-xs font-semibold text-content-inverted">
       {initial}
     </div>
   );
@@ -209,9 +209,9 @@ function CommentComposer({
         }}
         placeholder="Write a comment..."
         disabled={submitting}
-        className="flex-1 rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm
+        className="flex-1 rounded-lg border border-line bg-surface px-3 py-2 text-sm
                    placeholder:text-stone-400 focus:border-primary-400 focus:outline-none
-                   dark:border-neutral-700 dark:bg-neutral-800 dark:placeholder:text-neutral-500
+                   dark:border-line-strong dark:bg-surface-muted dark:placeholder:text-neutral-500
                    dark:focus:border-primary-600 disabled:opacity-50"
       />
       <Button
@@ -276,7 +276,7 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
   };
 
   return (
-    <div className="mb-3 rounded-xl border border-stone-200 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-900">
+    <div className="mb-3 rounded-xl border border-line bg-surface p-3">
       <div className="flex gap-2.5">
         <InitialAvatar name={myAgentId} />
         <textarea
@@ -298,27 +298,20 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
           maxLength={MAX_FEED_BODY_LENGTH}
           disabled={submitting}
           aria-label="Write a post"
-          className="min-h-[2.25rem] w-full resize-none border-0 bg-transparent p-0 pt-1.5 text-sm leading-relaxed text-stone-900 shadow-none outline-none ring-0 placeholder:text-stone-400 focus:border-0 focus:outline-none focus:ring-0 focus-visible:outline-none disabled:opacity-50 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="min-h-[2.25rem] w-full resize-none border-0 bg-transparent p-0 pt-1.5 text-sm leading-relaxed text-content shadow-none outline-none ring-0 placeholder:text-stone-400 focus:border-0 focus:outline-none focus:ring-0 focus-visible:outline-none disabled:opacity-50 dark:placeholder:text-neutral-500"
         />
       </div>
       {error && <p className="mt-1 pl-[2.625rem] text-xs text-coral-500">{error}</p>}
-      <div className="mt-2 flex items-center justify-between gap-3 border-t border-stone-100 pl-[2.625rem] pt-2 dark:border-neutral-800">
-        <span className="hidden text-[11px] text-stone-400 dark:text-neutral-500 sm:inline">
-          <kbd className="rounded border border-stone-200 px-1 font-sans dark:border-neutral-700">
-            ⌘
-          </kbd>
-          <kbd className="ml-0.5 rounded border border-stone-200 px-1 font-sans dark:border-neutral-700">
-            ↵
-          </kbd>{' '}
-          to post
+      <div className="mt-2 flex items-center justify-between gap-3 border-t border-line-subtle pl-[2.625rem] pt-2">
+        <span className="hidden text-[11px] text-content-faint sm:inline">
+          <kbd className="rounded border border-line px-1 font-sans">⌘</kbd>
+          <kbd className="ml-0.5 rounded border border-line px-1 font-sans">↵</kbd> to post
         </span>
         <div className="ml-auto flex items-center gap-3">
           {(nearLimit || draft.length > 0) && (
             <span
               className={`text-[11px] tabular-nums ${
-                remaining <= 20
-                  ? 'font-medium text-coral-500'
-                  : 'text-stone-400 dark:text-neutral-500'
+                remaining <= 20 ? 'font-medium text-coral-500' : 'text-content-faint'
               }`}>
               {remaining}
             </span>
@@ -371,17 +364,15 @@ function InlineComments({ post, myAgentId }: { post: GqlPost; myAgentId: string
   }, [load]);
 
   return (
-    <div className="mt-3 border-t border-stone-100 pt-2 dark:border-neutral-800">
+    <div className="mt-3 border-t border-line-subtle pt-2">
       {loading && (
-        <p className="animate-pulse py-2 text-xs text-stone-400 dark:text-neutral-500">
-          Loading comments…
-        </p>
+        <p className="animate-pulse py-2 text-xs text-content-faint">Loading comments…</p>
       )}
       {error && <p className="py-2 text-xs text-red-500">{error}</p>}
       {!loading && !error && comments.length === 0 && (
-        <p className="py-2 text-xs text-stone-400 dark:text-neutral-500">No comments yet.</p>
+        <p className="py-2 text-xs text-content-faint">No comments yet.</p>
       )}
-      <div className="divide-y divide-stone-100 dark:divide-neutral-800">
+      <div className="divide-y divide-line-subtle dark:divide-neutral-800">
         {comments.map(c => (
           <CommentRow
             key={c.commentId}
@@ -421,7 +412,7 @@ function PostCard({
   const [showComments, setShowComments] = useState(false);
 
   return (
-    <article className="rounded-lg border border-stone-200 bg-white p-4 transition-colors hover:border-stone-300 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-neutral-700">
+    <article className="rounded-lg border border-line bg-surface p-4 transition-colors hover:border-line-strong dark:hover:border-line-strong">
       {/* Author row */}
       <div className="mb-2 flex items-center gap-2">
         {post.author.avatarUrl ? (
@@ -435,7 +426,7 @@ function PostCard({
         )}
         <div className="min-w-0">
           <div className="flex items-center gap-1">
-            <span className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            <span className="truncate text-sm font-semibold text-content">
               {post.author.displayName || post.author.handle}
             </span>
             {post.author.verified && (
@@ -451,9 +442,7 @@ function PostCard({
               </svg>
             )}
           </div>
-          <span className="text-xs text-stone-400 dark:text-neutral-500">
-            @{post.author.handle}
-          </span>
+          <span className="text-xs text-content-faint">@{post.author.handle}</span>
         </div>
         {myAgentId && post.author.cryptoId !== myAgentId && (
           <button
@@ -462,8 +451,8 @@ function PostCard({
             onClick={() => onToggleFollow(post.author.cryptoId)}
             className={`ml-auto shrink-0 rounded-full border px-3 py-1 text-xs font-medium transition-colors disabled:opacity-50 ${
               followState[post.author.cryptoId]
-                ? 'border-stone-300 text-stone-600 hover:bg-stone-50 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800'
-                : 'border-primary-600 bg-primary-600 text-white hover:bg-primary-700 dark:border-primary-500 dark:bg-primary-500'
+                ? 'border-line-strong text-content-secondary hover:bg-surface-hover'
+                : 'border-primary-600 bg-primary-600 text-content-inverted hover:bg-primary-700 dark:border-primary-500 dark:bg-primary-500'
             }`}>
             {followState[post.author.cryptoId] ? 'Following' : 'Follow'}
           </button>
@@ -472,7 +461,7 @@ function PostCard({
           <button
             type="button"
             onClick={() => onDeletePost(post)}
-            className="ml-auto text-xs text-stone-400 hover:text-red-500 dark:text-neutral-500
+            className="ml-auto text-xs text-content-faint hover:text-red-500
                        dark:hover:text-red-400">
             Delete
           </button>
@@ -480,12 +469,10 @@ function PostCard({
       </div>
 
       {/* Post body */}
-      <p className="mb-3 whitespace-pre-wrap text-sm leading-relaxed text-stone-800 dark:text-neutral-200">
-        {post.body}
-      </p>
+      <p className="mb-3 whitespace-pre-wrap text-sm leading-relaxed text-content">{post.body}</p>
 
       {/* Metadata row */}
-      <div className="flex items-center gap-4 text-xs text-stone-400 dark:text-neutral-500">
+      <div className="flex items-center gap-4 text-xs text-content-faint">
         <span>{relativeTime(post.createdAt)}</span>
         {item.reason === 'recommended' && (
           <span className="rounded-full bg-primary-50 px-1.5 py-0.5 text-[10px] font-medium text-primary-600 dark:bg-primary-900/30 dark:text-primary-300">
@@ -495,7 +482,7 @@ function PostCard({
         <button
           type="button"
           onClick={() => setShowComments(open => !open)}
-          className="hover:text-stone-600 dark:hover:text-neutral-300">
+          className="hover:text-content-secondary">
           {post.commentCount} {post.commentCount === 1 ? 'comment' : 'comments'}
         </button>
         {myAgentId ? (
@@ -505,7 +492,7 @@ function PostCard({
             className={`flex items-center gap-1 ${
               (likeState[post.postId]?.liked ?? post.viewerHasLiked)
                 ? 'text-red-500'
-                : 'text-stone-400 dark:text-neutral-500 hover:text-red-400'
+                : 'text-content-faint hover:text-red-400'
             }`}>
             <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20">
               <path
@@ -556,12 +543,10 @@ function CommentRow({
       )}
       <div className="min-w-0 flex-1">
         <div className="flex items-baseline gap-2">
-          <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+          <span className="text-sm font-medium text-content">
             {comment.author.displayName || comment.author.handle}
           </span>
-          <span className="text-xs text-stone-400 dark:text-neutral-500">
-            {relativeTime(comment.createdAt)}
-          </span>
+          <span className="text-xs text-content-faint">{relativeTime(comment.createdAt)}</span>
           {myAgentId && comment.author.cryptoId === myAgentId && (
             <button
               type="button"
@@ -573,13 +558,13 @@ function CommentRow({
                     .catch(err => console.error('[FeedSection] delete comment failed:', err));
                 }
               }}
-              className="text-xs text-stone-400 hover:text-red-500 dark:text-neutral-500
+              className="text-xs text-content-faint hover:text-red-500
                          dark:hover:text-red-400">
               Delete
             </button>
           )}
         </div>
-        <p className="mt-0.5 text-sm text-stone-700 dark:text-neutral-300">{comment.body}</p>
+        <p className="mt-0.5 text-sm text-content-secondary">{comment.body}</p>
       </div>
     </div>
   );
@@ -750,14 +735,14 @@ export default function FeedSection() {
 
   if (feedState.status === 'loading') {
     body = (
-      <div className="flex h-64 items-center justify-center text-stone-400 dark:text-neutral-500">
+      <div className="flex h-64 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading feed…</span>
       </div>
     );
   } else if (feedState.status === 'wallet_unconfigured') {
     body = (
       <StatusBlock
-        tone="text-stone-700 dark:text-neutral-200"
+        tone="text-content-secondary"
         title="Set up your wallet to view your feed"
         body="Your personalized feed uses your wallet identity. Set up or import a wallet in Settings to continue."
       />
@@ -773,7 +758,7 @@ export default function FeedSection() {
   } else if (feedState.status === 'error') {
     body = isWalletLocked(feedState.message) ? (
       <StatusBlock
-        tone="text-stone-700 dark:text-neutral-200"
+        tone="text-content-secondary"
         title="Unlock your wallet to view your feed"
         body="Your personalized feed uses your wallet identity. Import your recovery phrase in Settings to continue."
       />
@@ -787,7 +772,7 @@ export default function FeedSection() {
   } else if (feedState.items.length === 0) {
     body = (
       <StatusBlock
-        tone="text-stone-500 dark:text-neutral-400"
+        tone="text-content-muted"
         title="No posts in your feed yet"
         body="Follow some agents to see their posts here."
       />
diff --git a/app/src/agentworld/pages/IdentitiesSection.tsx b/app/src/agentworld/pages/IdentitiesSection.tsx
index 2ccc6a1e1..7b019797f 100644
--- a/app/src/agentworld/pages/IdentitiesSection.tsx
+++ b/app/src/agentworld/pages/IdentitiesSection.tsx
@@ -237,7 +237,7 @@ function PaymentRequiredBanner() {
   return (
     <div className="flex flex-col items-center justify-center h-32 gap-2 text-amber-400">
       <p className="text-sm font-medium">Access requires payment</p>
-      <p className="text-xs text-stone-500 dark:text-neutral-400">
+      <p className="text-xs text-content-muted">
         Your wallet will be used to fulfill the x402 payment challenge.
       </p>
     </div>
@@ -251,7 +251,7 @@ function ErrorBanner({ message }: { message: string }) {
 
   if (isWalletLocked) {
     return (
-      <div className="flex flex-col items-center justify-center h-32 gap-2 text-stone-500 dark:text-neutral-400">
+      <div className="flex flex-col items-center justify-center h-32 gap-2 text-content-muted">
         <p className="text-sm font-medium">Unlock your wallet to use Agent World</p>
         <p className="text-xs">
           Agent World uses your wallet identity. Import your recovery phrase in Settings to
@@ -264,7 +264,7 @@ function ErrorBanner({ message }: { message: string }) {
   return (
     <div className="flex flex-col items-center justify-center h-32 gap-2 text-red-400">
       <p className="text-sm font-medium">Failed to load</p>
-      <p className="text-xs text-stone-400 dark:text-neutral-500">{message}</p>
+      <p className="text-xs text-content-faint">{message}</p>
     </div>
   );
 }
@@ -417,13 +417,11 @@ function RegisterTab({ onRegistered }: { onRegistered?: () => void }) {
 
   return (
     <div className="space-y-4">
-      <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-900/50 p-4">
-        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-2">
-          Check handle availability
-        </h3>
+      <div className="rounded-lg border border-line bg-surface-muted p-4">
+        <h3 className="text-sm font-semibold text-content mb-2">Check handle availability</h3>
         <form className="flex gap-2" onSubmit={handleSubmit}>
           <input
-            className="flex-1 rounded-md border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 outline-none focus:border-primary-500"
+            className="flex-1 rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder-content-faint outline-none focus:border-primary-500"
             placeholder="Search for a name..."
             type="text"
             value={input}
@@ -437,9 +435,7 @@ function RegisterTab({ onRegistered }: { onRegistered?: () => void }) {
         </form>
 
         {availState.status === 'loading' && (
-          <p className="mt-2 text-xs text-stone-500 dark:text-neutral-400 animate-pulse">
-            Checking…
-          </p>
+          <p className="mt-2 text-xs text-content-muted animate-pulse">Checking…</p>
         )}
         {availState.status === 'payment_required' && (
           <p className="mt-2 text-xs text-amber-400">Payment required to check availability.</p>
@@ -472,7 +468,7 @@ function RegisterTab({ onRegistered }: { onRegistered?: () => void }) {
                   @{availState.data.name.replace(/^@+/, '')} is taken
                 </span>
                 {availState.data.identity && (
-                  <span className="ml-2 text-xs text-stone-500 dark:text-neutral-400 font-mono">
+                  <span className="ml-2 text-xs text-content-muted font-mono">
                     {availState.data.identity.cryptoId.slice(0, 12)}...
                   </span>
                 )}
@@ -509,7 +505,7 @@ function RegisterTab({ onRegistered }: { onRegistered?: () => void }) {
                 ? 'Payment sent but registration did not complete.'
                 : 'Registration failed.'}
             </p>
-            <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">{reg.state.message}</p>
+            <p className="mt-1 text-xs text-content-muted">{reg.state.message}</p>
             {reg.state.onChainTx && (
               <a
                 href={explorerTxUrl(reg.state.onChainTx)}
@@ -523,10 +519,8 @@ function RegisterTab({ onRegistered }: { onRegistered?: () => void }) {
         )}
       </div>
 
-      <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-900/50 p-4">
-        <h4 className="text-xs font-semibold text-stone-900 dark:text-neutral-100 mb-2">
-          Pricing tiers
-        </h4>
+      <div className="rounded-lg border border-line bg-surface-muted p-4">
+        <h4 className="text-xs font-semibold text-content mb-2">Pricing tiers</h4>
         <div className="space-y-1">
           {[
             { label: '3 chars', example: '@abc', fee: '$250/yr' },
@@ -535,7 +529,7 @@ function RegisterTab({ onRegistered }: { onRegistered?: () => void }) {
           ].map(tier => (
             <div
               key={tier.label}
-              className="flex items-center justify-between text-xs text-stone-500 dark:text-neutral-400">
+              className="flex items-center justify-between text-xs text-content-muted">
               <span>
                 {tier.label} <span className="font-mono opacity-60">({tier.example})</span>
               </span>
@@ -586,63 +580,43 @@ function RegistryTab() {
 
   return (
     <div className="space-y-3">
-      <div className="overflow-hidden rounded-lg border border-stone-200 dark:border-neutral-800">
-        <div className="flex items-center justify-between border-b border-stone-200 dark:border-neutral-800 px-3 py-2">
-          <span className="text-xs font-medium text-stone-900 dark:text-neutral-100">
-            Directory identities
-          </span>
-          <span className="text-xs text-stone-400 dark:text-neutral-500">Live from staging</span>
+      <div className="overflow-hidden rounded-lg border border-line">
+        <div className="flex items-center justify-between border-b border-line px-3 py-2">
+          <span className="text-xs font-medium text-content">Directory identities</span>
+          <span className="text-xs text-content-faint">Live from staging</span>
         </div>
 
         {directoryState.status === 'loading' && (
-          <p className="px-3 py-4 text-xs text-stone-500 dark:text-neutral-400 animate-pulse">
-            Loading identities…
-          </p>
+          <p className="px-3 py-4 text-xs text-content-muted animate-pulse">Loading identities…</p>
         )}
         {directoryState.status === 'payment_required' && <PaymentRequiredBanner />}
         {directoryState.status === 'error' && <ErrorBanner message={directoryState.message} />}
         {directoryState.status === 'ok' && listings.length === 0 && (
-          <p className="px-3 py-4 text-xs text-stone-500 dark:text-neutral-400">
+          <p className="px-3 py-4 text-xs text-content-muted">
             No directory identities are currently listed.
           </p>
         )}
         {listings.length > 0 && (
           <table className="w-full text-left text-xs">
             <thead>
-              <tr className="border-b border-stone-200 dark:border-neutral-800">
-                <th className="px-3 py-2 font-medium text-stone-400 dark:text-neutral-500">
-                  Handle
-                </th>
-                <th className="px-3 py-2 font-medium text-stone-400 dark:text-neutral-500">
-                  Seller
-                </th>
-                <th className="px-3 py-2 font-medium text-stone-400 dark:text-neutral-500">
-                  Updated
-                </th>
-                <th className="px-3 py-2 font-medium text-stone-400 dark:text-neutral-500">
-                  Status
-                </th>
-                <th className="px-3 py-2 text-right font-medium text-stone-400 dark:text-neutral-500">
-                  Price
-                </th>
+              <tr className="border-b border-line">
+                <th className="px-3 py-2 font-medium text-content-faint">Handle</th>
+                <th className="px-3 py-2 font-medium text-content-faint">Seller</th>
+                <th className="px-3 py-2 font-medium text-content-faint">Updated</th>
+                <th className="px-3 py-2 font-medium text-content-faint">Status</th>
+                <th className="px-3 py-2 text-right font-medium text-content-faint">Price</th>
               </tr>
             </thead>
             <tbody>
               {listings.map((entry, index) => (
                 <tr
                   key={entry.listingId}
-                  className={`border-b border-stone-200 dark:border-neutral-800 last:border-b-0 ${
-                    index % 2 === 1 ? 'bg-stone-50 dark:bg-neutral-900/50' : ''
+                  className={`border-b border-line last:border-b-0 ${
+                    index % 2 === 1 ? 'bg-surface-muted' : ''
                   }`}>
-                  <td className="px-3 py-2 font-medium text-stone-900 dark:text-neutral-100">
-                    {entry.name}
-                  </td>
-                  <td className="px-3 py-2 font-mono text-stone-400 dark:text-neutral-500">
-                    {entry.seller ?? '—'}
-                  </td>
-                  <td className="px-3 py-2 text-stone-400 dark:text-neutral-500">
-                    {formatDate(entry.updatedAt)}
-                  </td>
+                  <td className="px-3 py-2 font-medium text-content">{entry.name}</td>
+                  <td className="px-3 py-2 font-mono text-content-faint">{entry.seller ?? '—'}</td>
+                  <td className="px-3 py-2 text-content-faint">{formatDate(entry.updatedAt)}</td>
                   <td className="px-3 py-2">
                     <span
                       className={`rounded-full px-2 py-0.5 text-xs font-medium ${
@@ -653,7 +627,7 @@ function RegistryTab() {
                       {entry.status ?? 'unknown'}
                     </span>
                   </td>
-                  <td className="px-3 py-2 text-right font-medium text-stone-900 dark:text-neutral-100">
+                  <td className="px-3 py-2 text-right font-medium text-content">
                     {entry.price ? formatPrice(entry.price.amount, entry.price.asset) : '—'}
                   </td>
                 </tr>
@@ -678,24 +652,22 @@ function FloorCard({ length }: { length: number }) {
   };
 
   return (
-    <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-900/50 p-3">
-      <div className="text-xs text-stone-400 dark:text-neutral-500">
+    <div className="rounded-lg border border-line bg-surface-muted p-3">
+      <div className="text-xs text-content-faint">
         {labels[length] ?? `${String(length)} chars`}
       </div>
-      <div className="mt-1 text-sm font-semibold text-stone-900 dark:text-neutral-100">
+      <div className="mt-1 text-sm font-semibold text-content">
         {state.status === 'loading' && (
-          <span className="animate-pulse text-stone-400 dark:text-neutral-500">Loading…</span>
+          <span className="animate-pulse text-content-faint">Loading…</span>
         )}
         {state.status === 'ok' && state.data.price
           ? formatPrice(state.data.price.amount, state.data.price.asset)
           : state.status === 'ok'
             ? 'No floor'
             : null}
-        {state.status === 'error' && (
-          <span className="text-stone-400 dark:text-neutral-500">Unavailable</span>
-        )}
+        {state.status === 'error' && <span className="text-content-faint">Unavailable</span>}
       </div>
-      <div className="mt-1 text-xs text-stone-400 dark:text-neutral-500">
+      <div className="mt-1 text-xs text-content-faint">
         {descriptions[length] ?? 'Handle identities'}
       </div>
     </div>
@@ -769,7 +741,7 @@ function TradingTab() {
     <div className="space-y-4">
       {/* Floor prices */}
       <div>
-        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-content-faint">
           Floor Prices
         </h3>
         <div className="grid grid-cols-3 gap-2">
@@ -781,44 +753,36 @@ function TradingTab() {
 
       {/* Listed for sale */}
       <div>
-        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-content-faint">
           Listed for Sale
         </h3>
         {marketState.status === 'loading' && (
-          <p className="text-xs text-stone-500 dark:text-neutral-400 animate-pulse">
-            Loading listings…
-          </p>
+          <p className="text-xs text-content-muted animate-pulse">Loading listings…</p>
         )}
         {marketState.status === 'payment_required' && <PaymentRequiredBanner />}
         {marketState.status === 'error' && <ErrorBanner message={marketState.message} />}
         {marketState.status === 'ok' && listings.length === 0 && (
-          <p className="text-xs text-stone-500 dark:text-neutral-400">
-            No identities listed for sale
-          </p>
+          <p className="text-xs text-content-muted">No identities listed for sale</p>
         )}
         {listings.length > 0 && (
           <div className="grid grid-cols-2 gap-2">
             {listings.map(listing => (
               <div
                 key={listing.listingId}
-                className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-900/50 p-3">
+                className="rounded-lg border border-line bg-surface-muted p-3">
                 <div className="flex items-center gap-2">
-                  <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
-                    {listing.name}
-                  </span>
+                  <span className="text-sm font-medium text-content">{listing.name}</span>
                   {listing.listingType === 'auction' && (
                     <span className="rounded-full bg-orange-600/20 px-2 py-0.5 text-xs font-medium text-orange-500">
                       Auction
                     </span>
                   )}
                 </div>
-                <div className="mt-1 text-xs font-semibold text-stone-900 dark:text-neutral-100">
+                <div className="mt-1 text-xs font-semibold text-content">
                   {formatPrice(listing.price.amount, listing.price.asset)}
                 </div>
                 {listing.seller && (
-                  <div className="mt-0.5 text-xs text-stone-400 dark:text-neutral-500">
-                    by {listing.seller}
-                  </div>
+                  <div className="mt-0.5 text-xs text-content-faint">by {listing.seller}</div>
                 )}
                 <div className="mt-2 flex gap-1">
                   {listing.listingType !== 'auction' && (
@@ -868,9 +832,7 @@ function TradingTab() {
             className="mt-3 rounded-md border border-red-500/30 bg-red-500/10 p-3"
             data-testid="commit-error">
             <p className="text-xs font-medium text-red-500">Commitment failed.</p>
-            <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
-              {commitState.message}
-            </p>
+            <p className="mt-1 text-xs text-content-muted">{commitState.message}</p>
           </div>
         )}
 
@@ -913,7 +875,7 @@ function TradingTab() {
             <p className="text-xs font-medium text-red-500">
               {bs.onChainTx ? 'Payment sent but purchase did not complete.' : 'Purchase failed.'}
             </p>
-            <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">{bs.message}</p>
+            <p className="mt-1 text-xs text-content-muted">{bs.message}</p>
           </div>
         )}
 
@@ -939,56 +901,44 @@ function TradingTab() {
 
       {/* Recent sales */}
       <div>
-        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-content-faint">
           Recent Sales
         </h3>
-        <div className="overflow-hidden rounded-lg border border-stone-200 dark:border-neutral-800">
+        <div className="overflow-hidden rounded-lg border border-line">
           {salesState.status === 'loading' && (
-            <p className="p-3 text-xs text-stone-500 dark:text-neutral-400 animate-pulse">
-              Loading sales…
-            </p>
+            <p className="p-3 text-xs text-content-muted animate-pulse">Loading sales…</p>
           )}
           {salesState.status === 'error' && (
             <p className="p-3 text-xs text-red-400">Failed to load sales</p>
           )}
           {salesState.status === 'ok' && sales.length === 0 && (
-            <p className="p-3 text-xs text-stone-500 dark:text-neutral-400">No recent sales</p>
+            <p className="p-3 text-xs text-content-muted">No recent sales</p>
           )}
           {sales.length > 0 && (
             <table className="w-full text-left text-xs">
               <thead>
-                <tr className="border-b border-stone-200 dark:border-neutral-800">
-                  <th className="px-3 py-2 font-medium text-stone-400 dark:text-neutral-500">
-                    Handle
-                  </th>
-                  <th className="px-3 py-2 font-medium text-stone-400 dark:text-neutral-500">
-                    Price
-                  </th>
-                  <th className="px-3 py-2 font-medium text-stone-400 dark:text-neutral-500">
-                    Buyer
-                  </th>
-                  <th className="px-3 py-2 text-right font-medium text-stone-400 dark:text-neutral-500">
-                    Date
-                  </th>
+                <tr className="border-b border-line">
+                  <th className="px-3 py-2 font-medium text-content-faint">Handle</th>
+                  <th className="px-3 py-2 font-medium text-content-faint">Price</th>
+                  <th className="px-3 py-2 font-medium text-content-faint">Buyer</th>
+                  <th className="px-3 py-2 text-right font-medium text-content-faint">Date</th>
                 </tr>
               </thead>
               <tbody>
                 {sales.map((sale, index) => (
                   <tr
                     key={sale.saleId}
-                    className={`border-b border-stone-200 dark:border-neutral-800 last:border-b-0 ${
-                      index % 2 === 1 ? 'bg-stone-50 dark:bg-neutral-900/50' : ''
+                    className={`border-b border-line last:border-b-0 ${
+                      index % 2 === 1 ? 'bg-surface-muted' : ''
                     }`}>
-                    <td className="px-3 py-2 font-medium text-stone-900 dark:text-neutral-100">
-                      {sale.name}
-                    </td>
-                    <td className="px-3 py-2 text-stone-900 dark:text-neutral-100">
+                    <td className="px-3 py-2 font-medium text-content">{sale.name}</td>
+                    <td className="px-3 py-2 text-content">
                       {formatPrice(sale.price.amount, sale.price.asset)}
                     </td>
-                    <td className="px-3 py-2 font-mono text-stone-400 dark:text-neutral-500">
+                    <td className="px-3 py-2 font-mono text-content-faint">
                       {sale.buyer.slice(0, 12)}...
                     </td>
-                    <td className="px-3 py-2 text-right text-stone-400 dark:text-neutral-500">
+                    <td className="px-3 py-2 text-right text-content-faint">
                       {sale.createdAt.slice(0, 10)}
                     </td>
                   </tr>
diff --git a/app/src/agentworld/pages/JobsSection.test.tsx b/app/src/agentworld/pages/JobsSection.test.tsx
index e38446d8f..ec6b90005 100644
--- a/app/src/agentworld/pages/JobsSection.test.tsx
+++ b/app/src/agentworld/pages/JobsSection.test.tsx
@@ -154,7 +154,6 @@ describe('Jobs list', () => {
   });
 
   test('tolerates response missing jobs field and shows empty', async () => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     vi.mocked(apiClient.graphql.jobs).mockResolvedValue({} as any);
     render(<JobsSection />);
     await waitFor(() => {
diff --git a/app/src/agentworld/pages/JobsSection.tsx b/app/src/agentworld/pages/JobsSection.tsx
index 850b88348..e6ca1b825 100644
--- a/app/src/agentworld/pages/JobsSection.tsx
+++ b/app/src/agentworld/pages/JobsSection.tsx
@@ -96,7 +96,7 @@ function StatusBlock({ tone, title, body }: { tone: string; title: string; body?
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
-      {body && <p className="max-w-md text-sm text-stone-500 dark:text-neutral-400">{body}</p>}
+      {body && <p className="max-w-md text-sm text-content-muted">{body}</p>}
     </div>
   );
 }
@@ -131,8 +131,8 @@ export function JobStatusBadge({ status }: { status: string }) {
           : status === 'DISPUTED'
             ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
             : status === 'CANCELLED'
-              ? 'bg-stone-100 text-stone-600 dark:bg-neutral-800 dark:text-neutral-400'
-              : 'bg-stone-100 text-stone-600 dark:bg-neutral-800 dark:text-neutral-400';
+              ? 'bg-surface-subtle text-content-secondary'
+              : 'bg-surface-subtle text-content-secondary';
   return (
     <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${color}`}>
       {status}
@@ -257,57 +257,51 @@ function PostJobModal({ onClose, onCreated }: { onClose: () => void; onCreated:
         }}
         className="space-y-3">
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-700 dark:text-neutral-300">
-            Title *
-          </label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">Title *</label>
           <input
             type="text"
             required
             value={title}
             onChange={e => setTitle(e.target.value)}
-            className="w-full rounded border border-stone-300 bg-white px-2.5 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="e.g. Build a Solana integration"
           />
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-700 dark:text-neutral-300">
+          <label className="mb-1 block text-xs font-medium text-content-secondary">
             Description
           </label>
           <textarea
             rows={3}
             value={description}
             onChange={e => setDescription(e.target.value)}
-            className="w-full rounded border border-stone-300 bg-white px-2.5 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="Describe the work, requirements, and deliverables"
           />
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-700 dark:text-neutral-300">
-            Category
-          </label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">Category</label>
           <input
             type="text"
             value={category}
             onChange={e => setCategory(e.target.value)}
-            className="w-full rounded border border-stone-300 bg-white px-2.5 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="e.g. development, design, research"
           />
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-700 dark:text-neutral-300">
-            Skills
-          </label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">Skills</label>
           <input
             type="text"
             value={skillsCsv}
             onChange={e => setSkillsCsv(e.target.value)}
-            className="w-full rounded border border-stone-300 bg-white px-2.5 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="e.g. React, TypeScript"
           />
         </div>
         <div className="flex gap-2">
           <div className="flex-1">
-            <label className="mb-1 block text-xs font-medium text-stone-700 dark:text-neutral-300">
+            <label className="mb-1 block text-xs font-medium text-content-secondary">
               Budget Amount *
             </label>
             <input
@@ -315,32 +309,30 @@ function PostJobModal({ onClose, onCreated }: { onClose: () => void; onCreated:
               required
               value={budgetAmount}
               onChange={e => setBudgetAmount(e.target.value)}
-              className="w-full rounded border border-stone-300 bg-white px-2.5 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+              className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
               placeholder="500"
             />
           </div>
           <div className="w-28">
-            <label className="mb-1 block text-xs font-medium text-stone-700 dark:text-neutral-300">
-              Asset
-            </label>
+            <label className="mb-1 block text-xs font-medium text-content-secondary">Asset</label>
             <input
               type="text"
               value={budgetAsset}
               onChange={e => setBudgetAsset(e.target.value)}
-              className="w-full rounded border border-stone-300 bg-white px-2.5 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+              className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
               placeholder="USDC"
             />
           </div>
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-700 dark:text-neutral-300">
+          <label className="mb-1 block text-xs font-medium text-content-secondary">
             Proposal Deadline
           </label>
           <input
             type="date"
             value={proposalDeadline}
             onChange={e => setProposalDeadline(e.target.value)}
-            className="w-full rounded border border-stone-300 bg-white px-2.5 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
           />
         </div>
         {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
@@ -424,7 +416,7 @@ function ApplyModal({
           <p className="text-sm font-medium text-green-700 dark:text-green-400">
             {t('agentworld.jobs.applyModal.successHeading')}
           </p>
-          <p className="text-xs text-stone-500 dark:text-neutral-400">
+          <p className="text-xs text-content-muted">
             {t('agentworld.jobs.applyModal.successBody')}
           </p>
         </div>
@@ -435,38 +427,38 @@ function ApplyModal({
           }}
           className="space-y-3">
           <div>
-            <label className="mb-1 block text-xs font-medium text-stone-700 dark:text-neutral-300">
+            <label className="mb-1 block text-xs font-medium text-content-secondary">
               {t('agentworld.jobs.applyModal.coverLetterLabel')}
             </label>
             <textarea
               rows={4}
               value={coverLetter}
               onChange={e => setCoverLetter(e.target.value)}
-              className="w-full rounded border border-stone-300 bg-white px-2.5 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+              className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
               placeholder={t('agentworld.jobs.applyModal.coverLetterPlaceholder')}
             />
           </div>
           <div>
-            <label className="mb-1 block text-xs font-medium text-stone-700 dark:text-neutral-300">
+            <label className="mb-1 block text-xs font-medium text-content-secondary">
               {t('agentworld.jobs.applyModal.bidAmountLabel')}
             </label>
             <input
               type="text"
               value={bidAmount}
               onChange={e => setBidAmount(e.target.value)}
-              className="w-full rounded border border-stone-300 bg-white px-2.5 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+              className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
               placeholder={t('agentworld.jobs.applyModal.bidAmountPlaceholder')}
             />
           </div>
           <div>
-            <label className="mb-1 block text-xs font-medium text-stone-700 dark:text-neutral-300">
+            <label className="mb-1 block text-xs font-medium text-content-secondary">
               {t('agentworld.jobs.applyModal.deliveryLabel')}
             </label>
             <input
               type="text"
               value={estimatedDelivery}
               onChange={e => setEstimatedDelivery(e.target.value)}
-              className="w-full rounded border border-stone-300 bg-white px-2.5 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+              className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
               placeholder={t('agentworld.jobs.applyModal.deliveryPlaceholder')}
             />
           </div>
@@ -534,15 +526,13 @@ function DisputeModal({
         }}
         className="space-y-3">
         <div>
-          <label className="mb-1 block text-xs font-medium text-stone-700 dark:text-neutral-300">
-            Reason *
-          </label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">Reason *</label>
           <textarea
             rows={4}
             required
             value={reason}
             onChange={e => setReason(e.target.value)}
-            className="w-full rounded border border-stone-300 bg-white px-2.5 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+            className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="Describe the issue that requires dispute resolution"
           />
         </div>
@@ -607,12 +597,12 @@ function JobRow({
   const proposalLabel = `${job.proposalCount} proposal${job.proposalCount !== 1 ? 's' : ''}`;
 
   return (
-    <div className="border-b border-stone-100 last:border-0 dark:border-neutral-800">
+    <div className="border-b border-line-subtle last:border-0">
       {/* Summary row — avatar · stacked content · fixed meta column */}
       <button
         type="button"
         onClick={onToggle}
-        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/50">
+        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted dark:hover:bg-surface-muted/50">
         <ClientAvatar
           avatarUrl={job.clientProfile.avatarUrl ?? undefined}
           displayName={job.clientProfile.displayName}
@@ -622,20 +612,18 @@ function JobRow({
         <div className="min-w-0 flex-1">
           {/* Line 1: title + status */}
           <div className="flex items-center gap-2">
-            <span className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-100">
-              {job.title}
-            </span>
+            <span className="truncate text-sm font-semibold text-content">{job.title}</span>
             <span className="shrink-0">
               <JobStatusBadge status={job.status} />
             </span>
           </div>
 
           {/* Line 2: client · budget */}
-          <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-stone-500 dark:text-neutral-400">
+          <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-content-muted">
             <span className="truncate">{displayClientName(job.clientProfile.displayName)}</span>
             {job.clientProfile.verified && <VerifiedBadge />}
-            <span className="text-stone-300 dark:text-neutral-600">·</span>
-            <span className="whitespace-nowrap font-medium text-stone-700 dark:text-neutral-300">
+            <span className="text-content-faint dark:text-neutral-600">·</span>
+            <span className="whitespace-nowrap font-medium text-content-secondary">
               {budgetLabel}
             </span>
           </div>
@@ -646,9 +634,9 @@ function JobRow({
               <SkillChip key={skill} skill={skill} />
             ))}
             {overflowCount > 0 && (
-              <span className="text-xs text-stone-400 dark:text-neutral-500">+{overflowCount}</span>
+              <span className="text-xs text-content-faint">+{overflowCount}</span>
             )}
-            <span className="text-xs text-stone-400 dark:text-neutral-500">
+            <span className="text-xs text-content-faint">
               {skills.length > 0 ? '· ' : ''}
               {proposalLabel}
             </span>
@@ -657,11 +645,11 @@ function JobRow({
 
         {/* Fixed meta column: time + chevron */}
         <div className="flex shrink-0 flex-col items-end gap-2">
-          <span className="whitespace-nowrap text-xs text-stone-400 dark:text-neutral-500">
+          <span className="whitespace-nowrap text-xs text-content-faint">
             {relativeTime(job.createdAt)}
           </span>
           <svg
-            className={`h-4 w-4 shrink-0 text-stone-400 transition-transform dark:text-neutral-500 ${expanded ? 'rotate-180' : ''}`}
+            className={`h-4 w-4 shrink-0 text-content-faint transition-transform ${expanded ? 'rotate-180' : ''}`}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24">
@@ -672,31 +660,29 @@ function JobRow({
 
       {/* Expanded detail */}
       {expanded && (
-        <div className="border-t border-stone-100 bg-stone-50 px-4 py-3 dark:border-neutral-800 dark:bg-neutral-900/50">
+        <div className="border-t border-line-subtle bg-surface-muted px-4 py-3">
           {/* Description */}
-          <p className="mb-3 whitespace-pre-wrap text-sm text-stone-700 dark:text-neutral-300">
+          <p className="mb-3 whitespace-pre-wrap text-sm text-content-secondary">
             {job.description}
           </p>
 
           <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
             {/* Job ID */}
-            <dt className="font-medium text-stone-500 dark:text-neutral-400">Job ID</dt>
-            <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
-              {job.jobId}
-            </dd>
+            <dt className="font-medium text-content-muted">Job ID</dt>
+            <dd className="break-all font-mono text-content">{job.jobId}</dd>
 
             {/* Category */}
             {job.category && (
               <>
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">Category</dt>
-                <dd className="text-stone-800 dark:text-neutral-200">{job.category}</dd>
+                <dt className="font-medium text-content-muted">Category</dt>
+                <dd className="text-content">{job.category}</dd>
               </>
             )}
 
             {/* All skills */}
             {skills.length > 0 && (
               <>
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">Skills</dt>
+                <dt className="font-medium text-content-muted">Skills</dt>
                 <dd className="flex flex-wrap gap-1">
                   {skills.map(skill => (
                     <SkillChip key={skill} skill={skill} />
@@ -708,59 +694,49 @@ function JobRow({
             {/* Budget chain */}
             {job.budget.chain && (
               <>
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">Chain</dt>
-                <dd className="text-stone-800 dark:text-neutral-200">{job.budget.chain}</dd>
+                <dt className="font-medium text-content-muted">Chain</dt>
+                <dd className="text-content">{job.budget.chain}</dd>
               </>
             )}
 
             {/* Proposal deadline */}
             {job.proposalDeadline && (
               <>
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">
-                  Proposal Deadline
-                </dt>
-                <dd className="text-stone-800 dark:text-neutral-200">{job.proposalDeadline}</dd>
+                <dt className="font-medium text-content-muted">Proposal Deadline</dt>
+                <dd className="text-content">{job.proposalDeadline}</dd>
               </>
             )}
 
             {/* Contract escrow ID */}
             {job.contractEscrowId && (
               <>
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">Escrow ID</dt>
-                <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
-                  {job.contractEscrowId}
-                </dd>
+                <dt className="font-medium text-content-muted">Escrow ID</dt>
+                <dd className="break-all font-mono text-content">{job.contractEscrowId}</dd>
               </>
             )}
 
             {/* Selected candidate */}
             {job.selectedCandidate && (
               <>
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">
-                  Selected Candidate
-                </dt>
-                <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
-                  {job.selectedCandidate}
-                </dd>
+                <dt className="font-medium text-content-muted">Selected Candidate</dt>
+                <dd className="break-all font-mono text-content">{job.selectedCandidate}</dd>
               </>
             )}
 
             {/* Group ID */}
             {job.groupId && (
               <>
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">Group ID</dt>
-                <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
-                  {job.groupId}
-                </dd>
+                <dt className="font-medium text-content-muted">Group ID</dt>
+                <dd className="break-all font-mono text-content">{job.groupId}</dd>
               </>
             )}
 
             {/* Timestamps */}
-            <dt className="font-medium text-stone-500 dark:text-neutral-400">Created</dt>
-            <dd className="text-stone-800 dark:text-neutral-200">{job.createdAt}</dd>
+            <dt className="font-medium text-content-muted">Created</dt>
+            <dd className="text-content">{job.createdAt}</dd>
 
-            <dt className="font-medium text-stone-500 dark:text-neutral-400">Updated</dt>
-            <dd className="text-stone-800 dark:text-neutral-200">{job.updatedAt}</dd>
+            <dt className="font-medium text-content-muted">Updated</dt>
+            <dd className="text-content">{job.updatedAt}</dd>
           </dl>
 
           {/* Dispute section */}
@@ -768,71 +744,57 @@ function JobRow({
             <div className="mt-3">
               <p className="mb-1 text-xs font-semibold text-red-600 dark:text-red-400">Dispute</p>
               <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">Reason</dt>
-                <dd className="text-stone-800 dark:text-neutral-200">{job.dispute.reason}</dd>
+                <dt className="font-medium text-content-muted">Reason</dt>
+                <dd className="text-content">{job.dispute.reason}</dd>
 
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">Opened By</dt>
-                <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
-                  {job.dispute.openedBy}
-                </dd>
+                <dt className="font-medium text-content-muted">Opened By</dt>
+                <dd className="break-all font-mono text-content">{job.dispute.openedBy}</dd>
 
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">Opened At</dt>
-                <dd className="text-stone-800 dark:text-neutral-200">{job.dispute.openedAt}</dd>
+                <dt className="font-medium text-content-muted">Opened At</dt>
+                <dd className="text-content">{job.dispute.openedAt}</dd>
 
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">Status</dt>
-                <dd className="text-stone-800 dark:text-neutral-200">{job.dispute.status}</dd>
+                <dt className="font-medium text-content-muted">Status</dt>
+                <dd className="text-content">{job.dispute.status}</dd>
 
                 {job.dispute.outcome && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">Outcome</dt>
-                    <dd className="text-stone-800 dark:text-neutral-200">{job.dispute.outcome}</dd>
+                    <dt className="font-medium text-content-muted">Outcome</dt>
+                    <dd className="text-content">{job.dispute.outcome}</dd>
                   </>
                 )}
 
                 {job.dispute.splitBps != null && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">Split bps</dt>
-                    <dd className="text-stone-800 dark:text-neutral-200">{job.dispute.splitBps}</dd>
+                    <dt className="font-medium text-content-muted">Split bps</dt>
+                    <dd className="text-content">{job.dispute.splitBps}</dd>
                   </>
                 )}
 
                 {job.dispute.judgeModel && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">
-                      Judge Model
-                    </dt>
-                    <dd className="text-stone-800 dark:text-neutral-200">
-                      {job.dispute.judgeModel}
-                    </dd>
+                    <dt className="font-medium text-content-muted">Judge Model</dt>
+                    <dd className="text-content">{job.dispute.judgeModel}</dd>
                   </>
                 )}
 
                 {job.dispute.presided != null && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">Presided</dt>
-                    <dd className="text-stone-800 dark:text-neutral-200">
-                      {job.dispute.presided ? 'Yes' : 'No'}
-                    </dd>
+                    <dt className="font-medium text-content-muted">Presided</dt>
+                    <dd className="text-content">{job.dispute.presided ? 'Yes' : 'No'}</dd>
                   </>
                 )}
 
                 {job.dispute.reasoning && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">Reasoning</dt>
-                    <dd className="text-stone-800 dark:text-neutral-200">
-                      {job.dispute.reasoning}
-                    </dd>
+                    <dt className="font-medium text-content-muted">Reasoning</dt>
+                    <dd className="text-content">{job.dispute.reasoning}</dd>
                   </>
                 )}
 
                 {job.dispute.resolvedAt && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">
-                      Resolved At
-                    </dt>
-                    <dd className="text-stone-800 dark:text-neutral-200">
-                      {job.dispute.resolvedAt}
-                    </dd>
+                    <dt className="font-medium text-content-muted">Resolved At</dt>
+                    <dd className="text-content">{job.dispute.resolvedAt}</dd>
                   </>
                 )}
               </dl>
@@ -840,44 +802,28 @@ function JobRow({
               {/* Jury votes table */}
               {job.dispute.jury && job.dispute.jury.length > 0 && (
                 <div className="mt-2">
-                  <p className="mb-1 text-xs font-medium text-stone-500 dark:text-neutral-400">
-                    Jury Votes
-                  </p>
+                  <p className="mb-1 text-xs font-medium text-content-muted">Jury Votes</p>
                   <div className="overflow-x-auto">
                     <table className="w-full text-xs">
                       <thead>
-                        <tr className="border-b border-stone-200 dark:border-neutral-700">
-                          <th className="pb-1 text-left font-medium text-stone-500 dark:text-neutral-400">
-                            Model
-                          </th>
-                          <th className="pb-1 text-left font-medium text-stone-500 dark:text-neutral-400">
-                            Outcome
-                          </th>
-                          <th className="pb-1 text-left font-medium text-stone-500 dark:text-neutral-400">
+                        <tr className="border-b border-line">
+                          <th className="pb-1 text-left font-medium text-content-muted">Model</th>
+                          <th className="pb-1 text-left font-medium text-content-muted">Outcome</th>
+                          <th className="pb-1 text-left font-medium text-content-muted">
                             Split bps
                           </th>
-                          <th className="pb-1 text-left font-medium text-stone-500 dark:text-neutral-400">
+                          <th className="pb-1 text-left font-medium text-content-muted">
                             Reasoning
                           </th>
                         </tr>
                       </thead>
                       <tbody>
                         {job.dispute.jury.map((vote, i) => (
-                          <tr
-                            key={i}
-                            className="border-b border-stone-100 last:border-0 dark:border-neutral-800">
-                            <td className="py-0.5 font-mono text-stone-800 dark:text-neutral-200">
-                              {vote.model}
-                            </td>
-                            <td className="py-0.5 text-stone-800 dark:text-neutral-200">
-                              {vote.outcome}
-                            </td>
-                            <td className="py-0.5 text-stone-800 dark:text-neutral-200">
-                              {vote.splitBps}
-                            </td>
-                            <td className="py-0.5 text-stone-800 dark:text-neutral-200">
-                              {vote.reasoning ?? '-'}
-                            </td>
+                          <tr key={i} className="border-b border-line-subtle last:border-0">
+                            <td className="py-0.5 font-mono text-content">{vote.model}</td>
+                            <td className="py-0.5 text-content">{vote.outcome}</td>
+                            <td className="py-0.5 text-content">{vote.splitBps}</td>
+                            <td className="py-0.5 text-content">{vote.reasoning ?? '-'}</td>
                           </tr>
                         ))}
                       </tbody>
@@ -891,34 +837,26 @@ function JobRow({
           {/* On-chain section */}
           {job.onChain && (
             <div className="mt-3">
-              <p className="mb-1 text-xs font-semibold text-stone-500 dark:text-neutral-400">
-                On-chain
-              </p>
+              <p className="mb-1 text-xs font-semibold text-content-muted">On-chain</p>
               <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
                 {job.onChain.vault && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">Vault</dt>
-                    <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
-                      {job.onChain.vault}
-                    </dd>
+                    <dt className="font-medium text-content-muted">Vault</dt>
+                    <dd className="break-all font-mono text-content">{job.onChain.vault}</dd>
                   </>
                 )}
 
                 {job.onChain.jobPdaCommit && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">
-                      Job PDA Commit
-                    </dt>
-                    <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
-                      {job.onChain.jobPdaCommit}
-                    </dd>
+                    <dt className="font-medium text-content-muted">Job PDA Commit</dt>
+                    <dd className="break-all font-mono text-content">{job.onChain.jobPdaCommit}</dd>
                   </>
                 )}
 
                 {job.onChain.fundingTxSig && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">Funding Tx</dt>
-                    <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
+                    <dt className="font-medium text-content-muted">Funding Tx</dt>
+                    <dd className="break-all font-mono text-content">
                       <a
                         href={explorerTxUrl(job.onChain.fundingTxSig, 'solana-devnet')}
                         target="_blank"
@@ -979,7 +917,7 @@ function JobRow({
               )}
             </div>
           ) : (
-            <p className="mt-4 text-xs text-stone-400 dark:text-neutral-500">
+            <p className="mt-4 text-xs text-content-faint">
               Unlock your wallet to interact with this job.
             </p>
           )}
@@ -987,36 +925,30 @@ function JobRow({
           {/* Inline proposals panel */}
           {showingProposals && (
             <div className="mt-4">
-              <p className="mb-2 text-xs font-semibold text-stone-600 dark:text-neutral-300">
-                Proposals
-              </p>
+              <p className="mb-2 text-xs font-semibold text-content-secondary">Proposals</p>
               {proposalsLoading ? (
-                <p className="text-xs text-stone-400 dark:text-neutral-500 animate-pulse">
-                  Loading proposals…
-                </p>
+                <p className="text-xs text-content-faint animate-pulse">Loading proposals…</p>
               ) : proposals.length === 0 ? (
-                <p className="text-xs text-stone-400 dark:text-neutral-500">No proposals yet.</p>
+                <p className="text-xs text-content-faint">No proposals yet.</p>
               ) : (
                 <div className="space-y-2">
                   {proposals.map(p => (
                     <div
                       key={p.proposalId}
-                      className="rounded border border-stone-200 bg-white p-2 text-xs dark:border-neutral-700 dark:bg-neutral-800">
+                      className="rounded border border-line bg-surface p-2 text-xs">
                       <div className="mb-1 flex items-center gap-2">
-                        <span className="font-mono text-stone-600 dark:text-neutral-400">
+                        <span className="font-mono text-content-secondary">
                           {p.candidate.slice(0, 8)}…
                         </span>
-                        <span className="text-stone-500 dark:text-neutral-500">{p.status}</span>
+                        <span className="text-content-muted dark:text-content-faint">
+                          {p.status}
+                        </span>
                         {p.bidAmount && (
-                          <span className="font-medium text-stone-800 dark:text-neutral-200">
-                            {p.bidAmount}
-                          </span>
+                          <span className="font-medium text-content">{p.bidAmount}</span>
                         )}
                       </div>
                       {p.coverLetter && (
-                        <p className="mb-1 text-stone-700 dark:text-neutral-300 line-clamp-2">
-                          {p.coverLetter}
-                        </p>
+                        <p className="mb-1 text-content-secondary line-clamp-2">{p.coverLetter}</p>
                       )}
                       <div className="flex gap-1">
                         <Button
@@ -1201,7 +1133,7 @@ export default function JobsSection() {
 
   if (jobsState.status === 'loading') {
     body = (
-      <div className="flex h-64 items-center justify-center text-stone-400 dark:text-neutral-500">
+      <div className="flex h-64 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading jobs...</span>
       </div>
     );
@@ -1216,14 +1148,14 @@ export default function JobsSection() {
   } else if (jobsState.jobs.length === 0) {
     body = (
       <StatusBlock
-        tone="text-stone-500 dark:text-neutral-400"
+        tone="text-content-muted"
         title="No jobs found"
         body="The jobs board is empty or no postings match the current filter."
       />
     );
   } else {
     body = (
-      <div className="rounded-lg border border-stone-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+      <div className="rounded-lg border border-line bg-surface">
         {jobsState.jobs.map(job => (
           <JobRow
             key={job.jobId}
diff --git a/app/src/agentworld/pages/LedgerSection.test.tsx b/app/src/agentworld/pages/LedgerSection.test.tsx
index 6edb2ec5e..20113a7f5 100644
--- a/app/src/agentworld/pages/LedgerSection.test.tsx
+++ b/app/src/agentworld/pages/LedgerSection.test.tsx
@@ -95,7 +95,6 @@ describe('Ledger list', () => {
   });
 
   test('tolerates response missing transactions field and shows empty', async () => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     vi.mocked(apiClient.graphql.ledgerTransactions).mockResolvedValue({} as any);
     render(<LedgerSection />);
     await waitFor(() => {
diff --git a/app/src/agentworld/pages/LedgerSection.tsx b/app/src/agentworld/pages/LedgerSection.tsx
index 6b1ffae48..51e27989f 100644
--- a/app/src/agentworld/pages/LedgerSection.tsx
+++ b/app/src/agentworld/pages/LedgerSection.tsx
@@ -81,7 +81,7 @@ function StatusBlock({ tone, title, body }: { tone: string; title: string; body?
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
-      {body && <p className="max-w-md text-sm text-stone-500 dark:text-neutral-400">{body}</p>}
+      {body && <p className="max-w-md text-sm text-content-muted">{body}</p>}
     </div>
   );
 }
@@ -96,7 +96,7 @@ export function StatusBadge({ status }: { status: string }) {
         ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
         : status === 'FAILED'
           ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-          : 'bg-stone-100 text-stone-600 dark:bg-neutral-800 dark:text-neutral-400';
+          : 'bg-surface-subtle text-content-secondary';
   return (
     <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${color}`}>
       {status}
@@ -113,8 +113,8 @@ function TypeBadge({ type }: { type: string }) {
       : type === 'SALE'
         ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
         : type === 'FEE'
-          ? 'bg-stone-100 text-stone-600 dark:bg-neutral-800 dark:text-neutral-400'
-          : 'bg-stone-100 text-stone-600 dark:bg-neutral-800 dark:text-neutral-400';
+          ? 'bg-surface-subtle text-content-secondary'
+          : 'bg-surface-subtle text-content-secondary';
   return (
     <span
       className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${color}`}>
@@ -131,7 +131,7 @@ function TypeIcon({ type }: { type: string }) {
       ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400'
       : type === 'SALE'
         ? 'bg-purple-50 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400'
-        : 'bg-stone-100 text-stone-500 dark:bg-neutral-800 dark:text-neutral-400';
+        : 'bg-surface-subtle text-content-muted';
   return (
     <div
       className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full ${color}`}
@@ -160,19 +160,19 @@ function TransactionRow({
   onToggle: () => void;
 }) {
   return (
-    <div className="border-b border-stone-100 last:border-0 dark:border-neutral-800">
+    <div className="border-b border-line-subtle last:border-0">
       {/* Summary row — leading icon · stacked content · fixed meta column */}
       <button
         type="button"
         onClick={onToggle}
-        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/50">
+        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted dark:hover:bg-surface-muted/50">
         <TypeIcon type={tx.type} />
 
         {/* Content */}
         <div className="min-w-0 flex-1">
           {/* Line 1: amount + type + status */}
           <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            <span className="text-sm font-semibold text-content">
               {formatLedgerAmount(tx.amount, tx.asset)}
               {tx.asset ? ` ${resolveAssetSymbol(tx.asset)}` : ''}
             </span>
@@ -181,10 +181,10 @@ function TransactionRow({
           </div>
 
           {/* Line 2: from → to · network */}
-          <div className="mt-1 flex min-w-0 items-center gap-1.5 text-xs text-stone-500 dark:text-neutral-400">
+          <div className="mt-1 flex min-w-0 items-center gap-1.5 text-xs text-content-muted">
             <span className="font-mono">{abbreviateAddress(tx.from)}</span>
             <svg
-              className="h-3 w-3 shrink-0 text-stone-400"
+              className="h-3 w-3 shrink-0 text-content-faint"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24">
@@ -196,14 +196,14 @@ function TransactionRow({
               />
             </svg>
             <span className="font-mono">{abbreviateAddress(tx.to)}</span>
-            <span className="text-stone-300 dark:text-neutral-600">·</span>
+            <span className="text-content-faint dark:text-neutral-600">·</span>
             <span className="truncate">{friendlyNetwork(tx.network)}</span>
           </div>
         </div>
 
         {/* Fixed meta column: time + (view-on-chain + chevron) */}
         <div className="flex shrink-0 flex-col items-end gap-1.5">
-          <span className="whitespace-nowrap text-xs text-stone-400 dark:text-neutral-500">
+          <span className="whitespace-nowrap text-xs text-content-faint">
             {relativeTime(tx.timestamp)}
           </span>
           <div className="flex items-center gap-2">
@@ -218,7 +218,7 @@ function TransactionRow({
               </a>
             )}
             <svg
-              className={`h-4 w-4 shrink-0 text-stone-400 transition-transform dark:text-neutral-500 ${expanded ? 'rotate-180' : ''}`}
+              className={`h-4 w-4 shrink-0 text-content-faint transition-transform ${expanded ? 'rotate-180' : ''}`}
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24">
@@ -235,54 +235,46 @@ function TransactionRow({
 
       {/* Expanded detail */}
       {expanded && (
-        <div className="border-t border-stone-100 bg-stone-50 px-4 py-3 dark:border-neutral-800 dark:bg-neutral-900/50">
+        <div className="border-t border-line-subtle bg-surface-muted px-4 py-3">
           <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
             {/* Ledger TX ID */}
-            <dt className="font-medium text-stone-500 dark:text-neutral-400">Tx ID</dt>
-            <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">{tx.txId}</dd>
+            <dt className="font-medium text-content-muted">Tx ID</dt>
+            <dd className="break-all font-mono text-content">{tx.txId}</dd>
 
             {/* Visibility */}
-            <dt className="font-medium text-stone-500 dark:text-neutral-400">Visibility</dt>
-            <dd className="text-stone-800 dark:text-neutral-200">{tx.visibility}</dd>
+            <dt className="font-medium text-content-muted">Visibility</dt>
+            <dd className="text-content">{tx.visibility}</dd>
 
             {/* Full From */}
-            <dt className="font-medium text-stone-500 dark:text-neutral-400">From</dt>
-            <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
-              {tx.from ?? '-'}
-            </dd>
+            <dt className="font-medium text-content-muted">From</dt>
+            <dd className="break-all font-mono text-content">{tx.from ?? '-'}</dd>
 
             {/* Full To */}
-            <dt className="font-medium text-stone-500 dark:text-neutral-400">To</dt>
-            <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
-              {tx.to ?? '-'}
-            </dd>
+            <dt className="font-medium text-content-muted">To</dt>
+            <dd className="break-all font-mono text-content">{tx.to ?? '-'}</dd>
 
             {/* Reference */}
             {tx.reference && (
               <>
-                <dt className="font-medium text-stone-500 dark:text-neutral-400">Ref kind</dt>
-                <dd className="text-stone-800 dark:text-neutral-200">{tx.reference.kind}</dd>
+                <dt className="font-medium text-content-muted">Ref kind</dt>
+                <dd className="text-content">{tx.reference.kind}</dd>
 
                 {tx.reference.id && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">Ref ID</dt>
-                    <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
-                      {tx.reference.id}
-                    </dd>
+                    <dt className="font-medium text-content-muted">Ref ID</dt>
+                    <dd className="break-all font-mono text-content">{tx.reference.id}</dd>
                   </>
                 )}
                 {tx.reference.parentTxId && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">Parent Tx</dt>
-                    <dd className="break-all font-mono text-stone-800 dark:text-neutral-200">
-                      {tx.reference.parentTxId}
-                    </dd>
+                    <dt className="font-medium text-content-muted">Parent Tx</dt>
+                    <dd className="break-all font-mono text-content">{tx.reference.parentTxId}</dd>
                   </>
                 )}
                 {tx.reference.rate && (
                   <>
-                    <dt className="font-medium text-stone-500 dark:text-neutral-400">Rate</dt>
-                    <dd className="text-stone-800 dark:text-neutral-200">{tx.reference.rate}</dd>
+                    <dt className="font-medium text-content-muted">Rate</dt>
+                    <dd className="text-content">{tx.reference.rate}</dd>
                   </>
                 )}
               </>
@@ -292,18 +284,14 @@ function TransactionRow({
           {/* Metadata key-value table */}
           {tx.metadata && Object.keys(tx.metadata).length > 0 && (
             <div className="mt-2">
-              <p className="mb-1 text-xs font-medium text-stone-500 dark:text-neutral-400">
-                Metadata
-              </p>
+              <p className="mb-1 text-xs font-medium text-content-muted">Metadata</p>
               <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
                 {Object.entries(tx.metadata).map(([key, val]) => (
                   <>
-                    <dt
-                      key={`k-${key}`}
-                      className="font-medium text-stone-500 dark:text-neutral-400">
+                    <dt key={`k-${key}`} className="font-medium text-content-muted">
                       {key}
                     </dt>
-                    <dd key={`v-${key}`} className="break-all text-stone-800 dark:text-neutral-200">
+                    <dd key={`v-${key}`} className="break-all text-content">
                       {typeof val === 'string' ? val : JSON.stringify(val)}
                     </dd>
                   </>
@@ -352,7 +340,7 @@ export default function LedgerSection() {
 
   if (ledgerState.status === 'loading') {
     body = (
-      <div className="flex h-64 items-center justify-center text-stone-400 dark:text-neutral-500">
+      <div className="flex h-64 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading ledger…</span>
       </div>
     );
@@ -367,14 +355,14 @@ export default function LedgerSection() {
   } else if (ledgerState.transactions.length === 0) {
     body = (
       <StatusBlock
-        tone="text-stone-500 dark:text-neutral-400"
+        tone="text-content-muted"
         title="No transactions found"
         body="The ledger is empty or no transactions match the current filter."
       />
     );
   } else {
     body = (
-      <div className="rounded-lg border border-stone-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+      <div className="rounded-lg border border-line bg-surface">
         {ledgerState.transactions.map(tx => (
           <TransactionRow
             key={tx.txId}
diff --git a/app/src/agentworld/pages/MarketplaceSection.tsx b/app/src/agentworld/pages/MarketplaceSection.tsx
index d50ad748d..2a7f2eeed 100644
--- a/app/src/agentworld/pages/MarketplaceSection.tsx
+++ b/app/src/agentworld/pages/MarketplaceSection.tsx
@@ -125,7 +125,7 @@ function SearchTab() {
   return (
     <div className="flex flex-col gap-4">
       <input
-        className="w-full rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none"
+        className="w-full rounded-lg border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder-content-faint focus:border-primary-500 focus:outline-none"
         placeholder="Search products by name, description, tag, or seller…"
         type="search"
         value={query}
@@ -139,25 +139,17 @@ function SearchTab() {
       ) : (
         <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
           {filtered.map(product => (
-            <div
-              key={product.productId}
-              className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4">
+            <div key={product.productId} className="rounded-xl border border-line bg-surface p-4">
               <div className="flex items-start justify-between gap-2">
-                <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
-                  {product.name}
-                </span>
-                <span className="shrink-0 rounded-full bg-stone-100 dark:bg-neutral-800 px-2 py-0.5 text-xs text-stone-500 dark:text-neutral-400">
+                <span className="text-sm font-medium text-content">{product.name}</span>
+                <span className="shrink-0 rounded-full bg-surface-subtle px-2 py-0.5 text-xs text-content-muted">
                   {product.category}
                 </span>
               </div>
-              <p className="mt-1 text-xs text-stone-400 dark:text-neutral-500">
-                {product.description}
-              </p>
+              <p className="mt-1 text-xs text-content-faint">{product.description}</p>
               <div className="mt-2 flex items-center justify-between">
-                <span className="text-xs text-stone-500 dark:text-neutral-400">
-                  {product.seller}
-                </span>
-                <span className="text-xs font-medium text-stone-900 dark:text-neutral-100">
+                <span className="text-xs text-content-muted">{product.seller}</span>
+                <span className="text-xs font-medium text-content">
                   {product.price.amount} {product.price.asset}
                 </span>
               </div>
@@ -166,7 +158,7 @@ function SearchTab() {
                   {product.tags.map(tag => (
                     <span
                       key={tag}
-                      className="rounded-full bg-stone-100 dark:bg-neutral-800 px-1.5 py-0.5 text-[10px] text-stone-400 dark:text-neutral-500">
+                      className="rounded-full bg-surface-subtle px-1.5 py-0.5 text-[10px] text-content-faint">
                       {tag}
                     </span>
                   ))}
@@ -209,7 +201,7 @@ function SearchTab() {
           <p className="text-xs font-medium text-red-500">
             {bs.onChainTx ? 'Payment sent but purchase did not complete.' : 'Purchase failed.'}
           </p>
-          <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">{bs.message}</p>
+          <p className="mt-1 text-xs text-content-muted">{bs.message}</p>
           {bs.onChainTx && (
             <a
               href={explorerTxUrl(bs.onChainTx)}
@@ -286,21 +278,17 @@ function JobsTab() {
   return (
     <div className="flex flex-col gap-3">
       {jobs.map(job => (
-        <div
-          key={job.jobId}
-          className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4">
+        <div key={job.jobId} className="rounded-xl border border-line bg-surface p-4">
           <div className="flex items-center justify-between gap-2">
-            <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+            <span className="text-sm font-medium text-content">
               {typeof job.title === 'string' ? job.title : job.jobId}
             </span>
             <StatusBadge status={job.status} />
           </div>
           {typeof job.description === 'string' && (
-            <p className="mt-1 text-xs text-stone-400 dark:text-neutral-500">{job.description}</p>
+            <p className="mt-1 text-xs text-content-faint">{job.description}</p>
           )}
-          <span className="mt-2 block text-xs text-stone-500 dark:text-neutral-400">
-            {job.client}
-          </span>
+          <span className="mt-2 block text-xs text-content-muted">{job.client}</span>
         </div>
       ))}
     </div>
@@ -449,21 +437,17 @@ function ArtifactsTab() {
   return (
     <div className="flex flex-col gap-3">
       {artifacts.map(artifact => (
-        <div
-          key={artifact.artifactId}
-          className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4">
+        <div key={artifact.artifactId} className="rounded-xl border border-line bg-surface p-4">
           <div className="flex items-center justify-between gap-2">
-            <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+            <span className="text-sm font-medium text-content">
               {artifact.name ?? artifact.artifactId}
             </span>
             {artifact.status && <StatusBadge status={artifact.status} />}
           </div>
           {artifact.description && (
-            <p className="mt-1 text-xs text-stone-400 dark:text-neutral-500">
-              {artifact.description}
-            </p>
+            <p className="mt-1 text-xs text-content-faint">{artifact.description}</p>
           )}
-          <div className="mt-2 flex items-center gap-3 text-xs text-stone-500 dark:text-neutral-400">
+          <div className="mt-2 flex items-center gap-3 text-xs text-content-muted">
             <span>{artifact.mimeType ?? 'unknown type'}</span>
             {artifact.sizeBytes !== undefined && (
               <span>{(artifact.sizeBytes / 1024).toFixed(1)} KB</span>
@@ -480,7 +464,7 @@ function ArtifactsTab() {
 function LoadingSpinner({ label }: { label: string }) {
   return (
     <div className="flex items-center justify-center py-12">
-      <span className="animate-pulse text-sm text-stone-500 dark:text-neutral-400">{label}</span>
+      <span className="animate-pulse text-sm text-content-muted">{label}</span>
     </div>
   );
 }
@@ -489,7 +473,7 @@ function PaymentRequired() {
   return (
     <div className="flex flex-col items-center justify-center gap-4 py-12 text-amber-400">
       <p className="text-lg font-medium">Access requires payment</p>
-      <p className="text-sm text-stone-500 dark:text-neutral-400">
+      <p className="text-sm text-content-muted">
         Your wallet will be used to fulfill the x402 payment challenge.
       </p>
     </div>
@@ -503,7 +487,7 @@ function ErrorState({ message }: { message: string }) {
 
   if (isWalletLocked) {
     return (
-      <div className="flex flex-col items-center justify-center gap-4 py-12 text-stone-500 dark:text-neutral-400">
+      <div className="flex flex-col items-center justify-center gap-4 py-12 text-content-muted">
         <p className="text-lg font-medium">Unlock your wallet to use Agent World</p>
         <p className="text-sm">
           Agent World uses your wallet identity. Import your recovery phrase in Settings to
@@ -516,7 +500,7 @@ function ErrorState({ message }: { message: string }) {
   return (
     <div className="flex flex-col items-center justify-center gap-2 py-12 text-red-400">
       <p className="font-medium">Failed to load</p>
-      <p className="text-sm text-stone-400 dark:text-neutral-500">{message}</p>
+      <p className="text-sm text-content-faint">{message}</p>
     </div>
   );
 }
@@ -524,7 +508,7 @@ function ErrorState({ message }: { message: string }) {
 function EmptyState({ label }: { label: string }) {
   return (
     <div className="flex items-center justify-center py-12">
-      <span className="text-sm text-stone-500 dark:text-neutral-400">{label}</span>
+      <span className="text-sm text-content-muted">{label}</span>
     </div>
   );
 }
@@ -535,12 +519,11 @@ function StatusBadge({ status }: { status: string }) {
     funded: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
     accepted: 'bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',
     delivered: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
-    settled: 'bg-stone-200 text-stone-600 dark:bg-neutral-700 dark:text-neutral-300',
+    settled: 'bg-surface-strong text-content-secondary',
     cancelled: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
-    expired: 'bg-stone-100 text-stone-400 dark:bg-neutral-800 dark:text-neutral-500',
+    expired: 'bg-surface-subtle text-content-faint',
   };
-  const cls =
-    colorMap[status] ?? 'bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400';
+  const cls = colorMap[status] ?? 'bg-surface-subtle text-content-muted';
   return <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}>{status}</span>;
 }
 
@@ -556,14 +539,14 @@ function EscrowRow({
   };
 }) {
   return (
-    <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4">
+    <div className="rounded-xl border border-line bg-surface p-4">
       <div className="flex items-center justify-between gap-2">
-        <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+        <span className="text-sm font-medium text-content">
           {typeof escrow.title === 'string' ? escrow.title : escrow.escrowId}
         </span>
         <StatusBadge status={escrow.status} />
       </div>
-      <div className="mt-2 flex items-center gap-3 text-xs text-stone-500 dark:text-neutral-400">
+      <div className="mt-2 flex items-center gap-3 text-xs text-content-muted">
         <span>Client: {escrow.client}</span>
         <span>Provider: {escrow.provider}</span>
       </div>
diff --git a/app/src/agentworld/pages/MessagingSection.tsx b/app/src/agentworld/pages/MessagingSection.tsx
index ce86378c8..9326dfb80 100644
--- a/app/src/agentworld/pages/MessagingSection.tsx
+++ b/app/src/agentworld/pages/MessagingSection.tsx
@@ -121,7 +121,7 @@ function useMyAgentId(): string | null {
 
 function LoadingPane() {
   return (
-    <div className="flex items-center justify-center py-12 text-stone-500 dark:text-neutral-400">
+    <div className="flex items-center justify-center py-12 text-content-muted">
       <span className="animate-pulse text-sm">Loading…</span>
     </div>
   );
@@ -134,7 +134,7 @@ function ErrorPane({ message }: { message: string }) {
 
   if (isWalletLocked) {
     return (
-      <div className="flex flex-col items-center justify-center py-12 gap-2 text-stone-500 dark:text-neutral-400">
+      <div className="flex flex-col items-center justify-center py-12 gap-2 text-content-muted">
         <p className="font-medium">Unlock your wallet to use Agent World</p>
         <p className="text-sm">Import your recovery phrase in Settings to continue.</p>
       </div>
@@ -144,7 +144,7 @@ function ErrorPane({ message }: { message: string }) {
   return (
     <div className="flex flex-col items-center justify-center py-12 gap-2 text-red-400">
       <p className="font-medium text-sm">Failed to load</p>
-      <p className="text-xs text-stone-400 dark:text-neutral-500">{message}</p>
+      <p className="text-xs text-content-faint">{message}</p>
     </div>
   );
 }
@@ -153,7 +153,7 @@ function PaymentRequiredPane() {
   return (
     <div className="flex flex-col items-center justify-center py-12 gap-2 text-amber-400">
       <p className="font-medium">Access requires payment</p>
-      <p className="text-sm text-stone-500 dark:text-neutral-400">
+      <p className="text-sm text-content-muted">
         Your wallet will be used to fulfill the x402 payment challenge.
       </p>
     </div>
@@ -228,13 +228,11 @@ function SignalKeyStatusCard() {
   const discoverable = status?.encryptionKeyPublished === true;
 
   return (
-    <div className="mx-4 mb-3 rounded-lg border border-stone-200 bg-stone-50 p-3 dark:border-neutral-800 dark:bg-neutral-900/50">
+    <div className="mx-4 mb-3 rounded-lg border border-line bg-surface-muted p-3">
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-sm font-medium text-stone-800 dark:text-neutral-200">
-            Encrypted messaging
-          </p>
-          <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+          <p className="text-sm font-medium text-content">Encrypted messaging</p>
+          <p className="mt-0.5 text-xs text-content-muted">
             {!keysReady
               ? 'Set up encryption keys to enable direct messages'
               : discoverable
@@ -287,7 +285,7 @@ function ChannelsPanel() {
 
   if (channels.length === 0) {
     return (
-      <div className="flex items-center justify-center py-12 text-stone-400 dark:text-neutral-500 text-sm">
+      <div className="flex items-center justify-center py-12 text-content-faint text-sm">
         No channels found
       </div>
     );
@@ -302,26 +300,22 @@ function ChannelsPanel() {
           return (
             <div
               key={ch.channelId}
-              className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-900/50 p-3 text-sm">
+              className="rounded-lg border border-line bg-surface-muted p-3 text-sm">
               <div className="flex items-center justify-between gap-2">
-                <span className="font-medium text-stone-900 dark:text-neutral-100 truncate">
-                  {ch.name}
-                </span>
-                <span className="shrink-0 text-xs text-stone-400 dark:text-neutral-500">
+                <span className="font-medium text-content truncate">{ch.name}</span>
+                <span className="shrink-0 text-xs text-content-faint">
                   {ch.memberCount} members
                 </span>
               </div>
               {ch.description ? (
-                <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400 truncate">
-                  {ch.description}
-                </p>
+                <p className="mt-1 text-xs text-content-muted truncate">{ch.description}</p>
               ) : null}
               {ch.tags && ch.tags.length > 0 ? (
                 <div className="mt-2 flex flex-wrap gap-1">
                   {ch.tags.map(tag => (
                     <span
                       key={tag}
-                      className="rounded-full bg-stone-100 dark:bg-neutral-800 px-2 py-0.5 text-[10px] text-stone-500 dark:text-neutral-400">
+                      className="rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] text-content-muted">
                       {tag}
                     </span>
                   ))}
@@ -412,7 +406,7 @@ function GroupsPanel() {
             Redeem Invite
           </Button>
         </div>
-        <div className="flex items-center justify-center py-12 text-stone-400 dark:text-neutral-500 text-sm">
+        <div className="flex items-center justify-center py-12 text-content-faint text-sm">
           No groups found
         </div>
       </div>
@@ -424,7 +418,7 @@ function GroupsPanel() {
       <div className="flex justify-end">
         <button
           type="button"
-          className="rounded bg-stone-200 dark:bg-neutral-700 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200 hover:bg-stone-300 dark:hover:bg-neutral-600"
+          className="rounded bg-surface-strong px-2 py-1 text-xs text-content-secondary hover:bg-stone-300 dark:hover:bg-neutral-600"
           onClick={() => setShowRedeem(true)}>
           Redeem Invite
         </button>
@@ -437,21 +431,17 @@ function GroupsPanel() {
           return (
             <div
               key={group.groupId}
-              className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-900/50 p-3 text-sm">
+              className="rounded-lg border border-line bg-surface-muted p-3 text-sm">
               <div className="flex items-center justify-between gap-2">
-                <span className="font-medium text-stone-900 dark:text-neutral-100 truncate">
-                  {group.name}
-                </span>
+                <span className="font-medium text-content truncate">{group.name}</span>
                 <span className="shrink-0 rounded-full bg-green-500/10 px-1.5 py-0.5 text-[8px] text-green-500">
                   Encrypted
                 </span>
               </div>
               {group.description ? (
-                <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400 truncate">
-                  {group.description}
-                </p>
+                <p className="mt-1 text-xs text-content-muted truncate">{group.description}</p>
               ) : null}
-              <div className="mt-2 flex items-center gap-3 text-[10px] text-stone-400 dark:text-neutral-500">
+              <div className="mt-2 flex items-center gap-3 text-[10px] text-content-faint">
                 <span>{group.memberCount} members</span>
                 <span>{group.membershipPolicy}</span>
               </div>
@@ -556,33 +546,31 @@ function GroupInvitesPanel({
   );
 
   return (
-    <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-900/50 p-3">
+    <div className="rounded-lg border border-line bg-surface-muted p-3">
       <div className="flex items-center justify-between mb-2">
-        <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
-          Invites for {groupName}
-        </span>
+        <span className="text-sm font-medium text-content">Invites for {groupName}</span>
         <Button variant="tertiary" size="xs" onClick={onClose}>
           Close
         </Button>
       </div>
       {error ? <p className="mb-2 text-xs text-red-500">{error}</p> : null}
       {loading ? (
-        <p className="text-xs text-stone-400 dark:text-neutral-500 animate-pulse">Loading...</p>
+        <p className="text-xs text-content-faint animate-pulse">Loading...</p>
       ) : (
         <>
           {invites.length === 0 ? (
-            <p className="text-xs text-stone-400 dark:text-neutral-500">No active invites</p>
+            <p className="text-xs text-content-faint">No active invites</p>
           ) : (
             <div className="space-y-1 mb-2">
               {invites.map(inv => (
                 <div
                   key={inv.token}
-                  className="flex items-center justify-between rounded bg-stone-100 dark:bg-neutral-800 px-2 py-1 text-xs">
+                  className="flex items-center justify-between rounded bg-surface-subtle px-2 py-1 text-xs">
                   <div className="min-w-0 flex-1">
-                    <span className="font-mono text-stone-600 dark:text-neutral-300 truncate block">
+                    <span className="font-mono text-content-secondary truncate block">
                       {inv.token}
                     </span>
-                    <span className="text-stone-400 dark:text-neutral-500">
+                    <span className="text-content-faint">
                       {inv.uses} uses
                       {inv.maxUses != null ? ` / ${inv.maxUses} max` : ''}
                       {inv.revoked ? ' (revoked)' : ''}
@@ -655,11 +643,9 @@ function RedeemInvitePanel({ onClose }: { onClose: () => void }) {
   }, [groupId, token]);
 
   return (
-    <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-900/50 p-3">
+    <div className="rounded-lg border border-line bg-surface-muted p-3">
       <div className="flex items-center justify-between mb-2">
-        <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
-          Redeem Invite
-        </span>
+        <span className="text-sm font-medium text-content">Redeem Invite</span>
         <Button variant="tertiary" size="xs" onClick={onClose}>
           Close
         </Button>
@@ -677,14 +663,14 @@ function RedeemInvitePanel({ onClose }: { onClose: () => void }) {
               placeholder="Group ID"
               value={groupId}
               onChange={e => setGroupId(e.target.value)}
-              className="w-full rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-2 py-1 text-xs text-stone-900 dark:text-neutral-100 placeholder:text-stone-400"
+              className="w-full rounded border border-line-strong bg-surface px-2 py-1 text-xs text-content placeholder:text-stone-400"
             />
             <input
               type="text"
               placeholder="Invite token"
               value={token}
               onChange={e => setToken(e.target.value)}
-              className="w-full rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-2 py-1 text-xs text-stone-900 dark:text-neutral-100 placeholder:text-stone-400"
+              className="w-full rounded border border-line-strong bg-surface px-2 py-1 text-xs text-content placeholder:text-stone-400"
             />
           </div>
           <div className="flex gap-1 mb-2">
@@ -704,10 +690,10 @@ function RedeemInvitePanel({ onClose }: { onClose: () => void }) {
             </Button>
           </div>
           {preview ? (
-            <div className="rounded bg-stone-100 dark:bg-neutral-800 p-2 text-xs text-stone-600 dark:text-neutral-300">
+            <div className="rounded bg-surface-subtle p-2 text-xs text-content-secondary">
               <p className="font-medium">{preview.name}</p>
               {preview.description ? (
-                <p className="mt-0.5 text-stone-400 dark:text-neutral-500">{preview.description}</p>
+                <p className="mt-0.5 text-content-faint">{preview.description}</p>
               ) : null}
               <p className="mt-0.5">
                 {preview.memberCount} members / {preview.membershipPolicy} / invited by{' '}
@@ -739,7 +725,7 @@ function BroadcastsPanel() {
 
   if (broadcasts.length === 0) {
     return (
-      <div className="flex items-center justify-center py-12 text-stone-400 dark:text-neutral-500 text-sm">
+      <div className="flex items-center justify-center py-12 text-content-faint text-sm">
         No broadcasts found
       </div>
     );
@@ -754,23 +740,17 @@ function BroadcastsPanel() {
           return (
             <div
               key={bc.broadcastId}
-              className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-900/50 p-3 text-sm">
+              className="rounded-lg border border-line bg-surface-muted p-3 text-sm">
               <div className="flex items-center justify-between gap-2">
-                <span className="font-medium text-stone-900 dark:text-neutral-100 truncate">
-                  {bc.name}
-                </span>
-                <span className="shrink-0 text-xs text-stone-400 dark:text-neutral-500">
+                <span className="font-medium text-content truncate">{bc.name}</span>
+                <span className="shrink-0 text-xs text-content-faint">
                   {bc.subscriberCount} subs
                 </span>
               </div>
               {bc.description ? (
-                <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400 truncate">
-                  {bc.description}
-                </p>
+                <p className="mt-1 text-xs text-content-muted truncate">{bc.description}</p>
               ) : null}
-              <p className="mt-1 text-[10px] text-stone-400 dark:text-neutral-500 truncate">
-                by {bc.owner}
-              </p>
+              <p className="mt-1 text-[10px] text-content-faint truncate">by {bc.owner}</p>
               <div className="mt-2 flex gap-1">
                 <RowAction
                   label="Subscribe"
@@ -839,7 +819,7 @@ function RowAction({
       type="button"
       disabled={disabled}
       onClick={onClick}
-      className="rounded border border-stone-200 px-1.5 py-0.5 text-[10px] font-medium text-stone-600 hover:bg-stone-100 disabled:opacity-40 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800">
+      className="rounded border border-line px-1.5 py-0.5 text-[10px] font-medium text-content-secondary hover:bg-surface-hover disabled:opacity-40">
       {label}
     </button>
   );
@@ -907,7 +887,6 @@ function InboxPanel() {
         void apiClient.streams.stop(streamRef.current).catch(() => {});
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Bump version when a stream message arrives to trigger re-fetch.
@@ -927,9 +906,9 @@ function InboxPanel() {
   const anyBusy = busyKey !== null;
 
   return (
-    <div className="flex flex-col overflow-hidden rounded-lg border border-stone-200 dark:border-neutral-800">
-      <div className="flex items-center justify-between border-b border-stone-200 dark:border-neutral-800 px-4 py-2">
-        <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+    <div className="flex flex-col overflow-hidden rounded-lg border border-line">
+      <div className="flex items-center justify-between border-b border-line px-4 py-2">
+        <span className="text-sm font-medium text-content">
           Inbox
           {unread > 0 ? (
             <span className="ml-2 inline-flex items-center justify-center rounded-full bg-blue-500 px-1.5 py-0.5 text-[10px] font-semibold text-white">
@@ -959,11 +938,11 @@ function InboxPanel() {
         </div>
       ) : null}
       {items.length === 0 ? (
-        <div className="flex items-center justify-center py-12 text-stone-400 dark:text-neutral-500 text-sm">
+        <div className="flex items-center justify-center py-12 text-content-faint text-sm">
           Your inbox is empty
         </div>
       ) : (
-        <div className="divide-y divide-stone-200 dark:divide-neutral-800/50">
+        <div className="divide-y divide-line dark:divide-neutral-800/50">
           {items.map(item => {
             const busy = busyKey === item.itemId;
             const archived = item.status === 'archived';
@@ -973,17 +952,11 @@ function InboxPanel() {
                   className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${TYPE_DOT_COLORS[item.type] ?? 'bg-stone-400 dark:bg-neutral-500'}`}
                 />
                 <div className="min-w-0 flex-1">
-                  <p className="text-xs font-medium text-stone-900 dark:text-neutral-100">
-                    {item.subject}
-                  </p>
+                  <p className="text-xs font-medium text-content">{item.subject}</p>
                   {item.summary ? (
-                    <p className="text-[10px] text-stone-500 dark:text-neutral-400">
-                      {item.summary}
-                    </p>
+                    <p className="text-[10px] text-content-muted">{item.summary}</p>
                   ) : null}
-                  <p className="mt-1 text-[10px] text-stone-400 dark:text-neutral-500">
-                    {formatTs(item.timestamp)}
-                  </p>
+                  <p className="mt-1 text-[10px] text-content-faint">{formatTs(item.timestamp)}</p>
                 </div>
                 <div className="flex shrink-0 items-center gap-1">
                   {item.status === 'unread' ? (
@@ -1168,13 +1141,11 @@ function ActiveDmView({
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="flex items-center gap-2 border-b border-stone-200 dark:border-neutral-800 px-3 py-2">
+      <div className="flex items-center gap-2 border-b border-line px-3 py-2">
         <Button variant="tertiary" size="xs" onClick={onBack}>
           Back
         </Button>
-        <span className="text-sm font-medium text-stone-900 dark:text-neutral-100 truncate">
-          {peerId}
-        </span>
+        <span className="text-sm font-medium text-content truncate">{peerId}</span>
         <span className="ml-auto flex items-center gap-1 text-[10px] text-green-600 dark:text-green-400">
           <svg
             className="h-3 w-3"
@@ -1195,17 +1166,15 @@ function ActiveDmView({
       {/* Messages */}
       <div className="flex-1 overflow-auto p-3 space-y-2">
         {loading && messages.length === 0 ? (
-          <p className="text-xs text-stone-400 animate-pulse">Loading encrypted messages...</p>
+          <p className="text-xs text-content-faint animate-pulse">Loading encrypted messages...</p>
         ) : null}
         {error ? <p className="text-xs text-red-500">{error}</p> : null}
         {!loading && !error && messages.length === 0 ? (
           <div
             data-testid="dm-empty-state"
             className="flex h-full flex-col items-center justify-center gap-1 text-center">
-            <p className="text-sm font-medium text-stone-500 dark:text-neutral-400">
-              No messages yet
-            </p>
-            <p className="text-xs text-stone-400 dark:text-neutral-500">
+            <p className="text-sm font-medium text-content-muted">No messages yet</p>
+            <p className="text-xs text-content-faint">
               Send the first end-to-end encrypted message below to start the conversation.
             </p>
           </div>
@@ -1216,10 +1185,10 @@ function ActiveDmView({
             className={`max-w-[80%] rounded-lg px-3 py-2 text-sm ${
               msg.outgoing
                 ? 'ml-auto bg-primary-500/15 dark:bg-primary-500/20'
-                : 'mr-auto bg-stone-100 dark:bg-neutral-800'
+                : 'mr-auto bg-surface-subtle'
             }`}>
-            <p className="text-stone-900 dark:text-neutral-100">{msg.plaintext}</p>
-            <p className="mt-1 text-[10px] text-stone-400 dark:text-neutral-500">
+            <p className="text-content">{msg.plaintext}</p>
+            <p className="mt-1 text-[10px] text-content-faint">
               {msg.from} &middot; {msg.timestamp}
             </p>
           </div>
@@ -1227,7 +1196,7 @@ function ActiveDmView({
       </div>
 
       {/* Compose */}
-      <div className="border-t border-stone-200 dark:border-neutral-800 p-3 flex gap-2">
+      <div className="border-t border-line p-3 flex gap-2">
         <input
           type="text"
           value={composeText}
@@ -1236,7 +1205,7 @@ function ActiveDmView({
             if (e.key === 'Enter' && !e.shiftKey) void handleSend();
           }}
           placeholder="Type a message..."
-          className="flex-1 rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400"
+          className="flex-1 rounded border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400"
         />
         <Button
           variant="primary"
@@ -1267,11 +1236,11 @@ function DmsPanel() {
     return (
       <div
         data-testid="dms-coming-soon"
-        className="flex flex-col items-center justify-center gap-3 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/30 p-12 text-center">
-        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-stone-100 dark:bg-neutral-800">
+        className="flex flex-col items-center justify-center gap-3 rounded-lg border border-line bg-surface p-12 text-center">
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-surface-subtle">
           <svg
             aria-hidden="true"
-            className="h-5 w-5 text-stone-500 dark:text-neutral-400"
+            className="h-5 w-5 text-content-muted"
             fill="none"
             stroke="currentColor"
             strokeWidth={1.5}
@@ -1284,10 +1253,8 @@ function DmsPanel() {
           </svg>
         </div>
         <div>
-          <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
-            Secure direct messages — coming soon
-          </p>
-          <p className="mt-1 text-xs text-stone-400 dark:text-neutral-500">
+          <p className="text-sm font-medium text-content">Secure direct messages — coming soon</p>
+          <p className="mt-1 text-xs text-content-faint">
             End-to-end encrypted DMs use the Signal protocol. Full support is in progress.
           </p>
         </div>
@@ -1355,7 +1322,7 @@ function DmsPanel() {
             setResolveError(null);
           }}
           placeholder="Recipient @handle or wallet address"
-          className="flex-1 rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400"
+          className="flex-1 rounded border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400"
         />
         <Button
           variant="primary"
@@ -1402,7 +1369,7 @@ export default function MessagingSection({ tabs = VISIBLE_TABS }: MessagingSecti
         <ChipTabs<Tab>
           as="tab"
           ariaLabel="Messaging sections"
-          className="flex gap-1 px-4 py-3 border-b border-stone-200 dark:border-neutral-800 overflow-x-auto shrink-0"
+          className="flex gap-1 px-4 py-3 border-b border-line overflow-x-auto shrink-0"
           items={tabs.map(tab => ({ id: tab, label: TAB_LABELS[tab] }))}
           value={activeTab}
           onChange={setActiveTab}
diff --git a/app/src/agentworld/pages/ProfilesSection.tsx b/app/src/agentworld/pages/ProfilesSection.tsx
index 99f969250..4b437c414 100644
--- a/app/src/agentworld/pages/ProfilesSection.tsx
+++ b/app/src/agentworld/pages/ProfilesSection.tsx
@@ -241,7 +241,7 @@ function AgentProfileCard({ data }: { data: ProfileData }) {
   }, [agentId]);
 
   return (
-    <div className="rounded-lg border border-stone-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
+    <div className="rounded-lg border border-line bg-surface p-4">
       <div className="flex items-start gap-4">
         {avatarUrl ? (
           <img
@@ -250,12 +250,12 @@ function AgentProfileCard({ data }: { data: ProfileData }) {
             className="h-14 w-14 shrink-0 rounded-full object-cover"
           />
         ) : (
-          <div className="bg-primary-600 flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-lg font-semibold text-white">
+          <div className="bg-primary-600 flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-lg font-semibold text-content-inverted">
             {initials}
           </div>
         )}
         <div className="min-w-0">
-          <h3 className="flex items-center gap-1.5 text-sm font-semibold text-stone-900 dark:text-neutral-100">
+          <h3 className="flex items-center gap-1.5 text-sm font-semibold text-content">
             {handle}
             {verified && (
               <span className="text-xs text-blue-500" title="Verified">
@@ -274,28 +274,22 @@ function AgentProfileCard({ data }: { data: ProfileData }) {
             )}
           </h3>
           {cryptoId && (
-            <p
-              className="mt-0.5 font-mono text-xs text-stone-500 dark:text-neutral-400"
-              title={cryptoId}>
+            <p className="mt-0.5 font-mono text-xs text-content-muted" title={cryptoId}>
               {truncateCryptoId(cryptoId)}
             </p>
           )}
-          {bio && (
-            <p className="mt-1.5 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">
-              {bio}
-            </p>
-          )}
+          {bio && <p className="mt-1.5 text-xs leading-relaxed text-content-secondary">{bio}</p>}
         </div>
       </div>
 
       {skills.length > 0 && (
-        <div className="mt-4 border-t border-stone-200 pt-4 dark:border-neutral-800">
-          <h4 className="mb-2 text-xs font-medium text-stone-900 dark:text-neutral-100">Skills</h4>
+        <div className="mt-4 border-t border-line pt-4">
+          <h4 className="mb-2 text-xs font-medium text-content">Skills</h4>
           <div className="flex flex-wrap gap-1.5">
             {skills.map(skill => (
               <span
                 key={skill}
-                className="rounded-full bg-stone-100 px-2 py-0.5 text-xs text-stone-600 dark:bg-neutral-800 dark:text-neutral-300">
+                className="rounded-full bg-surface-subtle px-2 py-0.5 text-xs text-content-secondary">
                 {skill}
               </span>
             ))}
@@ -304,10 +298,8 @@ function AgentProfileCard({ data }: { data: ProfileData }) {
       )}
 
       {attestations.length > 0 && (
-        <div className="mt-4 border-t border-stone-200 pt-4 dark:border-neutral-800">
-          <h4 className="mb-2 text-xs font-medium text-stone-900 dark:text-neutral-100">
-            Verified Accounts
-          </h4>
+        <div className="mt-4 border-t border-line pt-4">
+          <h4 className="mb-2 text-xs font-medium text-content">Verified Accounts</h4>
           <div className="flex flex-wrap gap-2">
             {attestations.map(a => (
               <span
@@ -321,16 +313,16 @@ function AgentProfileCard({ data }: { data: ProfileData }) {
       )}
 
       {ownedIdentities.length > 0 && (
-        <div className="mt-4 border-t border-stone-200 pt-4 dark:border-neutral-800">
-          <h4 className="mb-2 text-xs font-medium text-stone-900 dark:text-neutral-100">
+        <div className="mt-4 border-t border-line pt-4">
+          <h4 className="mb-2 text-xs font-medium text-content">
             Handles owned{ownedIdentities.length > 1 ? ` (${ownedIdentities.length})` : ''}
           </h4>
           <div className="space-y-1.5">
             {ownedIdentities.map(id => (
               <div
                 key={id.username}
-                className="flex items-center justify-between gap-3 rounded-lg border border-stone-200 px-3 py-1.5 text-sm dark:border-neutral-800">
-                <span className="truncate font-medium text-stone-800 dark:text-neutral-200">
+                className="flex items-center justify-between gap-3 rounded-lg border border-line px-3 py-1.5 text-sm">
+                <span className="truncate font-medium text-content">
                   @{id.username.replace(/^@+/, '')}
                 </span>
                 <span className="flex items-center gap-2">
@@ -339,7 +331,7 @@ function AgentProfileCard({ data }: { data: ProfileData }) {
                       primary
                     </span>
                   )}
-                  <span className="text-[10px] uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+                  <span className="text-[10px] uppercase tracking-wide text-content-faint">
                     {id.status}
                   </span>
                 </span>
@@ -350,36 +342,34 @@ function AgentProfileCard({ data }: { data: ProfileData }) {
       )}
 
       {followStats && (
-        <div className="mt-4 border-t border-stone-200 pt-4 dark:border-neutral-800">
+        <div className="mt-4 border-t border-line pt-4">
           <div className="flex gap-6">
             <div>
-              <span className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+              <span className="text-sm font-semibold text-content">
                 {followStats.followerCount}
               </span>
-              <span className="ml-1 text-xs text-stone-500 dark:text-neutral-400">
+              <span className="ml-1 text-xs text-content-muted">
                 {followStats.followerCount === 1 ? 'follower' : 'followers'}
               </span>
             </div>
             <div>
-              <span className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+              <span className="text-sm font-semibold text-content">
                 {followStats.followingCount}
               </span>
-              <span className="ml-1 text-xs text-stone-500 dark:text-neutral-400">following</span>
+              <span className="ml-1 text-xs text-content-muted">following</span>
             </div>
           </div>
         </div>
       )}
 
       {createdAt && (
-        <div className="mt-4 border-t border-stone-200 pt-4 dark:border-neutral-800">
-          <span className="text-xs text-stone-500 dark:text-neutral-400">
-            Joined {formatDate(createdAt)}
-          </span>
+        <div className="mt-4 border-t border-line pt-4">
+          <span className="text-xs text-content-muted">Joined {formatDate(createdAt)}</span>
         </div>
       )}
 
       {/* Export identity */}
-      <div className="mt-4 border-t border-stone-200 pt-4 dark:border-neutral-800">
+      <div className="mt-4 border-t border-line pt-4">
         <Button variant="secondary" size="sm" disabled={exportLoading} onClick={handleExport}>
           {exportLoading ? 'Exporting...' : exportData ? 'Hide Export' : 'Export Identity'}
         </Button>
@@ -387,7 +377,7 @@ function AgentProfileCard({ data }: { data: ProfileData }) {
           <p className="mt-2 text-xs text-red-600 dark:text-red-400">{exportError}</p>
         )}
         {exportData && (
-          <pre className="mt-3 max-h-64 overflow-auto rounded-md bg-stone-50 p-3 text-xs text-stone-700 dark:bg-neutral-950 dark:text-neutral-300">
+          <pre className="mt-3 max-h-64 overflow-auto rounded-md bg-surface-muted p-3 text-xs text-content-secondary">
             {JSON.stringify(exportData, null, 2)}
           </pre>
         )}
@@ -401,7 +391,7 @@ function StatusBlock({ tone, title, body }: { tone: string; title: string; body?
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
-      {body && <p className="max-w-md text-sm text-stone-500 dark:text-neutral-400">{body}</p>}
+      {body && <p className="max-w-md text-sm text-content-muted">{body}</p>}
     </div>
   );
 }
@@ -415,14 +405,14 @@ export default function ProfilesSection() {
 
   if (state.status === 'loading') {
     body = (
-      <div className="flex h-64 items-center justify-center text-stone-400 dark:text-neutral-500">
+      <div className="flex h-64 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading your profile…</span>
       </div>
     );
   } else if (state.status === 'wallet_locked') {
     body = (
       <StatusBlock
-        tone="text-stone-700 dark:text-neutral-200"
+        tone="text-content-secondary"
         title="Unlock your wallet to use Agent World"
         body="Agent World uses your wallet identity. Import your recovery phrase in Settings to continue."
       />
@@ -430,7 +420,7 @@ export default function ProfilesSection() {
   } else if (state.status === 'no_handle') {
     body = (
       <StatusBlock
-        tone="text-stone-600 dark:text-neutral-300"
+        tone="text-content-secondary"
         title="No handle registered yet"
         body={`Your wallet (${truncateCryptoId(state.cryptoId)}) doesn't own a @handle yet. Register one in the Identities tab to claim your profile.`}
       />
diff --git a/app/src/agentworld/pages/WorldSection.tsx b/app/src/agentworld/pages/WorldSection.tsx
index cf0db2a04..c5a8e555a 100644
--- a/app/src/agentworld/pages/WorldSection.tsx
+++ b/app/src/agentworld/pages/WorldSection.tsx
@@ -21,8 +21,8 @@ const populationFor = (key: string): number =>
 const toggleClass = (active: boolean): string =>
   `rounded-lg border px-3 py-2 text-sm transition ${
     active
-      ? 'border-primary-500 bg-primary-500 text-white dark:border-primary-500 dark:bg-primary-600'
-      : 'border-stone-200 bg-white/85 text-stone-800 hover:border-primary-400 dark:border-neutral-700 dark:bg-neutral-950/70 dark:text-neutral-100 dark:hover:border-primary-500'
+      ? 'border-primary-500 bg-primary-500 text-content-inverted dark:border-primary-500 dark:bg-primary-600'
+      : 'border-line bg-surface/85 text-content hover:border-primary-400 dark:bg-surface-canvas/70 dark:hover:border-primary-500'
   }`;
 
 export default function WorldSection() {
@@ -135,13 +135,13 @@ export default function WorldSection() {
           <p className="max-w-sm text-sm text-neutral-200">{error}</p>
           <button
             type="button"
-            className="rounded-lg border border-primary-500 bg-primary-500 px-4 py-2 text-sm font-medium text-white transition hover:bg-primary-600 dark:border-primary-500 dark:bg-primary-600"
+            className="rounded-lg border border-primary-500 bg-primary-500 px-4 py-2 text-sm font-medium text-content-inverted transition hover:bg-primary-600 dark:border-primary-500 dark:bg-primary-600"
             onClick={handleRetry}>
             {t('agentWorld.world.retry', 'Retry')}
           </button>
         </div>
       ) : ready ? null : (
-        <div className="absolute inset-0 flex items-center justify-center text-sm text-neutral-300">
+        <div className="absolute inset-0 flex items-center justify-center text-sm text-content-faint">
           {t('agentWorld.world.booting', 'Booting renderer...')}
         </div>
       )}
@@ -150,7 +150,7 @@ export default function WorldSection() {
         <h1 className="text-lg font-semibold text-white">
           {t('agentWorld.world.title', 'Tiny Place')}
         </h1>
-        <p className="mt-1 text-xs leading-relaxed text-neutral-300">
+        <p className="mt-1 text-xs leading-relaxed text-content-faint">
           {t(
             'agentWorld.world.description',
             'Join tiny.place so your agent can coordinate with other agents — find and post jobs, trade, message, and team up on bounties.'
@@ -159,8 +159,8 @@ export default function WorldSection() {
       </div>
 
       <aside className="absolute right-3 top-3 z-10 flex w-72 max-w-[calc(100%-1.5rem)] flex-col gap-4 overflow-y-auto rounded-xl border border-white/15 bg-neutral-950/70 p-4 shadow-xl backdrop-blur-md">
-        <section className="flex flex-col gap-2 rounded-lg border border-white/10 bg-white/10 p-3">
-          <h2 className="text-xs font-semibold uppercase tracking-wide text-neutral-300">
+        <section className="flex flex-col gap-2 rounded-lg border border-white/10 bg-surface/10 p-3">
+          <h2 className="text-xs font-semibold uppercase tracking-wide text-content-faint">
             {t('agentWorld.world.room', 'Room')}
           </h2>
           <div className="grid grid-cols-2 gap-2">
@@ -176,7 +176,7 @@ export default function WorldSection() {
               </button>
             ))}
           </div>
-          <p className="text-[11px] leading-relaxed text-neutral-300">
+          <p className="text-[11px] leading-relaxed text-content-faint">
             {activeRoom
               ? t(`agentWorld.world.rooms.${activeRoom.key}.description`, activeRoom.description)
               : null}
diff --git a/app/src/components/AppBackground.tsx b/app/src/components/AppBackground.tsx
index a09a3317e..d7d17c441 100644
--- a/app/src/components/AppBackground.tsx
+++ b/app/src/components/AppBackground.tsx
@@ -1,3 +1,5 @@
+import { useAppSelector } from '../store/hooks';
+import { selectEffectiveTheme } from '../store/themeSlice';
 import MeshGradient from './MeshGradient';
 
 interface AppBackgroundProps {
@@ -5,16 +7,29 @@ interface AppBackgroundProps {
 }
 
 /**
- * The app's shared background layer: animated mesh gradient + dotted canvas
- * overlay. Renders as an absolutely-positioned layer that fills its parent,
- * so callers stay in control of layout. Place your foreground content in a
- * sibling `relative z-10` container.
+ * The app's shared background layer. The backdrop is theme-controlled:
+ * - `mesh` (default): animated WebGL mesh gradient (theme-tinted) + dotted canvas.
+ * - `solid`: just the dotted canvas over the themed flat/gradient body.
+ * - `image`: a cover image over the dotted canvas.
+ *
+ * Renders as an absolutely-positioned layer that fills its parent; place
+ * foreground content in a sibling `relative z-10` container.
  */
 export default function AppBackground({ className = '' }: AppBackgroundProps) {
+  const theme = useAppSelector(selectEffectiveTheme);
+  const backdrop = theme.backdrop?.kind ?? 'mesh';
+  const showDots = theme.backdrop?.dots !== false; // default on
+
   return (
     <div className={`absolute inset-0 overflow-hidden ${className}`} aria-hidden="true">
-      <MeshGradient />
-      <div className="app-dotted-canvas absolute inset-0" />
+      {backdrop === 'mesh' && <MeshGradient />}
+      {backdrop === 'image' && theme.backdrop?.imageUrl && (
+        <div
+          className="absolute inset-0 bg-cover bg-center"
+          style={{ backgroundImage: `url("${theme.backdrop.imageUrl}")` }}
+        />
+      )}
+      {showDots && <div className="app-dotted-canvas absolute inset-0" />}
     </div>
   );
 }
diff --git a/app/src/components/AppUpdatePrompt.tsx b/app/src/components/AppUpdatePrompt.tsx
index 5f61e9559..33d69fea8 100644
--- a/app/src/components/AppUpdatePrompt.tsx
+++ b/app/src/components/AppUpdatePrompt.tsx
@@ -121,19 +121,19 @@ const AppUpdatePrompt = (props: AppUpdatePromptProps) => {
         <div className="px-4 pt-1 pb-3">
           {phase === 'ready_to_install' && (
             <>
-              <p className="text-xs text-stone-300 leading-relaxed">
+              <p className="text-xs text-content-faint leading-relaxed">
                 {newVersion
                   ? t('app.update.versionReady').replace('{version}', newVersion)
                   : t('app.update.newVersionReady')}
                 {currentVersion && (
-                  <span className="text-stone-500">
+                  <span className="text-content-muted">
                     {' '}
                     {t('app.update.currentlyOn').replace('{version}', currentVersion)}
                   </span>
                 )}
               </p>
               {info?.body && <ReleaseNotes body={info.body} />}
-              <p className="mt-2 text-[11px] text-stone-500 leading-relaxed">
+              <p className="mt-2 text-[11px] text-content-muted leading-relaxed">
                 {t('app.update.restartNote')}
               </p>
               <div className="mt-3 flex gap-2">
@@ -150,9 +150,9 @@ const AppUpdatePrompt = (props: AppUpdatePromptProps) => {
           {(phase === 'installing' || phase === 'restarting') && (
             <>
               <ProgressBar indeterminate />
-              <div className="mt-2 flex items-center justify-between text-[11px] text-stone-400">
+              <div className="mt-2 flex items-center justify-between text-[11px] text-content-faint">
                 <span>{progressDetail(phase, bytesDownloaded, totalBytes, percent, t)}</span>
-                {newVersion && <span className="text-stone-500">v{newVersion}</span>}
+                {newVersion && <span className="text-content-muted">v{newVersion}</span>}
               </div>
             </>
           )}
@@ -242,7 +242,7 @@ const ReleaseNotes = ({ body }: { body: string }) => {
   const display = expanded || !isLong ? trimmed : `${trimmed.slice(0, 160).trimEnd()}…`;
   return (
     <div className="mt-2 rounded-lg bg-stone-800/60 border border-stone-700/40 px-3 py-2">
-      <p className="text-[11px] text-stone-400 whitespace-pre-line break-words">{display}</p>
+      <p className="text-[11px] text-content-faint whitespace-pre-line break-words">{display}</p>
       {isLong && (
         <ReleaseNotesToggle expanded={expanded} onToggle={() => setExpanded(prev => !prev)} />
       )}
diff --git a/app/src/components/BootCheckGate/BootCheckGate.tsx b/app/src/components/BootCheckGate/BootCheckGate.tsx
index 1d3a869ad..d60ef3213 100644
--- a/app/src/components/BootCheckGate/BootCheckGate.tsx
+++ b/app/src/components/BootCheckGate/BootCheckGate.tsx
@@ -89,7 +89,7 @@ function Panel({ children }: PanelProps) {
       className="fixed inset-0 z-[10000] flex items-center justify-center p-4"
       style={{ backgroundColor: 'var(--color-background)' }}>
       <AppBackground />
-      <div className="relative z-10 w-full max-w-xl rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-soft animate-fade-up">
+      <div className="relative z-10 w-full max-w-xl rounded-2xl border border-line bg-surface p-6 shadow-soft animate-fade-up">
         {children}
       </div>
     </div>
@@ -239,16 +239,16 @@ function ModePicker({ onConfirm }: PickerProps) {
   return (
     <Panel>
       <BootCheckLanguageSelect />
-      <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
+      <h2 className="text-xl font-semibold text-content">
         {isDesktop ? t('bootCheck.chooseCoreMode') : t('bootCheck.connectToCore')}
       </h2>
-      <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
+      <p className="mt-2 text-sm text-content-secondary">
         {isDesktop ? t('bootCheck.desktopDescription') : t('bootCheck.webDescription')}
       </p>
 
       {!isDesktop && (
         <div
-          className="mt-4 rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 text-xs text-stone-600 dark:text-neutral-300"
+          className="mt-4 rounded-xl border border-line bg-surface-muted p-3 text-xs text-content-secondary"
           data-testid="web-download-cta">
           {t('bootCheck.preferDesktop')}{' '}
           <a
@@ -271,11 +271,11 @@ function ModePicker({ onConfirm }: PickerProps) {
             aria-pressed={selected === 'local'}
             className={`rounded-xl border-2 p-5 text-left transition-colors focus:outline-none ${
               selected === 'local'
-                ? '!border-primary-500 bg-primary-50 dark:bg-primary-500/15 text-stone-900 dark:text-neutral-100 shadow-sm'
-                : '!border-stone-200 dark:!border-neutral-700 bg-white dark:bg-neutral-900 text-stone-700 dark:text-neutral-200 hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
+                ? '!border-primary-500 bg-primary-50 dark:bg-primary-500/15 text-content shadow-sm'
+                : '!border-stone-200 dark:!border-neutral-700 bg-surface text-content-secondary hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-surface-hover'
             }`}>
             <div className="font-medium">{t('bootCheck.localRecommended')}</div>
-            <div className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+            <div className="mt-0.5 text-xs text-content-muted">
               {t('bootCheck.localDescription')}
             </div>
           </button>
@@ -289,11 +289,11 @@ function ModePicker({ onConfirm }: PickerProps) {
             aria-pressed={selected === 'cloud'}
             className={`rounded-xl border-2 p-5 text-left transition-colors focus:outline-none ${
               selected === 'cloud'
-                ? '!border-primary-500 bg-primary-50 dark:bg-primary-500/15 text-stone-900 dark:text-neutral-100 shadow-sm'
-                : '!border-stone-200 dark:!border-neutral-700 bg-white dark:bg-neutral-900 text-stone-700 dark:text-neutral-200 hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
+                ? '!border-primary-500 bg-primary-50 dark:bg-primary-500/15 text-content shadow-sm'
+                : '!border-stone-200 dark:!border-neutral-700 bg-surface text-content-secondary hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-surface-hover'
             }`}>
             <div className="font-medium">{t('bootCheck.cloudMode')}</div>
-            <div className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+            <div className="mt-0.5 text-xs text-content-muted">
               {t('bootCheck.cloudDescription')}
             </div>
           </button>
@@ -302,7 +302,7 @@ function ModePicker({ onConfirm }: PickerProps) {
         {selected === 'cloud' && (
           <div className="mt-1 flex flex-col gap-3">
             <div className="flex flex-col gap-1">
-              <label className="text-xs font-medium text-stone-700 dark:text-neutral-200">
+              <label className="text-xs font-medium text-content-secondary">
                 {t('bootCheck.coreRpcUrl')}
               </label>
               <input
@@ -316,7 +316,7 @@ function ModePicker({ onConfirm }: PickerProps) {
                   setUrlWarning(httpPublicHostWarning(next, t));
                   setTestStatus({ kind: 'idle' });
                 }}
-                className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                className="rounded-lg border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder-content-faint focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
               />
               {urlError && <p className="text-xs text-red-600">{urlError}</p>}
               {!urlError && urlWarning && (
@@ -324,7 +324,7 @@ function ModePicker({ onConfirm }: PickerProps) {
               )}
             </div>
             <div className="flex flex-col gap-1">
-              <label className="text-xs font-medium text-stone-700 dark:text-neutral-200">
+              <label className="text-xs font-medium text-content-secondary">
                 {t('bootCheck.authToken')} (
                 <code className="text-[10px]">OPENHUMAN_CORE_TOKEN</code>)
               </label>
@@ -341,10 +341,10 @@ function ModePicker({ onConfirm }: PickerProps) {
                   setTokenError(null);
                   setTestStatus({ kind: 'idle' });
                 }}
-                className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                className="rounded-lg border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder-content-faint focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
               />
               {tokenError && <p className="text-xs text-red-600">{tokenError}</p>}
-              <p className="text-[11px] text-stone-500 dark:text-neutral-400 leading-snug">
+              <p className="text-[11px] text-content-muted leading-snug">
                 {t('bootCheck.storedLocally')} <code>Authorization: Bearer …</code>{' '}
                 {t('bootCheck.rpcAuthSuffix')}
               </p>
@@ -396,10 +396,8 @@ function CheckingScreen() {
   return (
     <Panel>
       <div className="flex flex-col items-center gap-4 py-4">
-        <div className="h-8 w-8 animate-spin rounded-full border-2 border-stone-300 dark:border-neutral-700 border-t-primary-500" />
-        <p className="text-sm text-stone-600 dark:text-neutral-300">
-          {t('bootCheck.checkingCore')}
-        </p>
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-line-strong border-t-primary-500" />
+        <p className="text-sm text-content-secondary">{t('bootCheck.checkingCore')}</p>
       </div>
     </Panel>
   );
@@ -438,10 +436,10 @@ function ResultScreen({
     const foreignOwner = result.foreignOwner;
     return (
       <Panel>
-        <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
+        <h2 className="text-xl font-semibold text-content">
           {isPortConflict ? t('bootCheck.portConflictTitle') : t('bootCheck.cannotReach')}
         </h2>
-        <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
+        <p className="mt-2 text-sm text-content-secondary">
           {isPortConflict
             ? foreignOwner
               ? t('bootCheck.portConflictOwner')
@@ -452,9 +450,7 @@ function ResultScreen({
             : result.reason || t('bootCheck.cannotReachDesc')}
         </p>
         {isPortConflict && foreignOwner && (
-          <p className="mt-2 text-xs text-stone-500 dark:text-neutral-400">
-            {t('bootCheck.portConflictGuidance')}
-          </p>
+          <p className="mt-2 text-xs text-content-muted">{t('bootCheck.portConflictGuidance')}</p>
         )}
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
         <div className="mt-5 flex gap-3 flex-wrap">
@@ -497,12 +493,8 @@ function ResultScreen({
   if (result.kind === 'daemonDetected') {
     return (
       <Panel>
-        <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
-          {t('bootCheck.legacyDetected')}
-        </h2>
-        <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
-          {t('bootCheck.legacyDescription')}
-        </p>
+        <h2 className="text-xl font-semibold text-content">{t('bootCheck.legacyDetected')}</h2>
+        <p className="mt-2 text-sm text-content-secondary">{t('bootCheck.legacyDescription')}</p>
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
         <div className="mt-5 flex gap-3">
           <Button tone="danger" onClick={onAction} disabled={actionBusy}>
@@ -519,10 +511,8 @@ function ResultScreen({
   if (result.kind === 'outdatedLocal') {
     return (
       <Panel>
-        <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
-          {t('bootCheck.localNeedsRestart')}
-        </h2>
-        <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
+        <h2 className="text-xl font-semibold text-content">{t('bootCheck.localNeedsRestart')}</h2>
+        <p className="mt-2 text-sm text-content-secondary">
           {t('bootCheck.localNeedsRestartDesc')}
         </p>
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
@@ -541,12 +531,8 @@ function ResultScreen({
   if (result.kind === 'outdatedCloud') {
     return (
       <Panel>
-        <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
-          {t('bootCheck.cloudNeedsUpdate')}
-        </h2>
-        <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
-          {t('bootCheck.cloudNeedsUpdateDesc')}
-        </p>
+        <h2 className="text-xl font-semibold text-content">{t('bootCheck.cloudNeedsUpdate')}</h2>
+        <p className="mt-2 text-sm text-content-secondary">{t('bootCheck.cloudNeedsUpdateDesc')}</p>
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
         <div className="mt-5 flex gap-3">
           <Button onClick={onAction} disabled={actionBusy}>
@@ -563,12 +549,8 @@ function ResultScreen({
   // noVersionMethod — treat like outdated, user picks which flavor of action
   return (
     <Panel>
-      <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
-        {t('bootCheck.versionCheckFailed')}
-      </h2>
-      <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
-        {t('bootCheck.versionCheckFailedDesc')}
-      </p>
+      <h2 className="text-xl font-semibold text-content">{t('bootCheck.versionCheckFailed')}</h2>
+      <p className="mt-2 text-sm text-content-secondary">{t('bootCheck.versionCheckFailedDesc')}</p>
       {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
       <div className="mt-5 flex gap-3">
         <Button onClick={onAction} disabled={actionBusy}>
diff --git a/app/src/components/EmptyStateCard.tsx b/app/src/components/EmptyStateCard.tsx
index 756cf1387..28bd71e36 100644
--- a/app/src/components/EmptyStateCard.tsx
+++ b/app/src/components/EmptyStateCard.tsx
@@ -21,14 +21,12 @@ const EmptyStateCard = ({
 }: EmptyStateCardProps) => {
   return (
     <div
-      className={`flex flex-col items-center justify-center rounded-2xl border border-dashed border-stone-300 dark:border-neutral-700 bg-stone-50/80 dark:bg-neutral-900/80 px-6 py-16 text-center ${className}`.trim()}>
+      className={`flex flex-col items-center justify-center rounded-2xl border border-dashed border-line-strong bg-surface-muted/80 dark:bg-surface/80 px-6 py-16 text-center ${className}`.trim()}>
       <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-50 dark:bg-primary-500/10">
         {icon}
       </div>
-      <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">{title}</h3>
-      <p className="mt-2 max-w-md text-sm leading-relaxed text-stone-500 dark:text-neutral-400">
-        {description}
-      </p>
+      <h3 className="text-base font-semibold text-content">{title}</h3>
+      <p className="mt-2 max-w-md text-sm leading-relaxed text-content-muted">{description}</p>
       {actionLabel && onAction ? (
         <button
           type="button"
diff --git a/app/src/components/ErrorFallbackScreen.tsx b/app/src/components/ErrorFallbackScreen.tsx
index 3e3f0d71e..f38c119dd 100644
--- a/app/src/components/ErrorFallbackScreen.tsx
+++ b/app/src/components/ErrorFallbackScreen.tsx
@@ -106,19 +106,21 @@ export default function ErrorFallbackScreen({
           <h1 className="text-xl font-semibold text-white text-center mb-2">
             {t('app.errorFallback.heading')}
           </h1>
-          <p className="text-sm text-stone-400 text-center mb-6">
+          <p className="text-sm text-content-faint text-center mb-6">
             {t('app.errorFallback.subheading')}
           </p>
-          <p className="text-xs text-stone-500 text-center mb-6">{t('app.errorFallback.hint')}</p>
+          <p className="text-xs text-content-muted text-center mb-6">
+            {t('app.errorFallback.hint')}
+          </p>
 
           {/* Sentry Event ID — copyable; hidden when analytics produced no id */}
           {hasEventId && (
             <div className="flex items-center justify-between gap-3 bg-stone-800/50 border border-stone-700/50 rounded-xl px-3 py-2.5 mb-4">
               <div className="flex flex-col min-w-0">
-                <span className="text-[10px] uppercase tracking-wide text-stone-500">
+                <span className="text-[10px] uppercase tracking-wide text-content-muted">
                   {t('app.errorFallback.eventIdLabel')}
                 </span>
-                <span className="font-mono text-xs text-stone-300 truncate">{eventId}</span>
+                <span className="font-mono text-xs text-content-faint truncate">{eventId}</span>
               </div>
               <button
                 onClick={copyEventId}
@@ -135,13 +137,13 @@ export default function ErrorFallbackScreen({
           {/* Error details */}
           <div className="bg-stone-800/50 border border-stone-700/50 rounded-xl p-4 mb-6">
             <p className="text-sm font-medium text-coral-400 mb-1">{errorName}</p>
-            <p className="text-xs text-stone-300 break-words">{errorMessage}</p>
+            <p className="text-xs text-content-faint break-words">{errorMessage}</p>
             {componentStack && (
               <details className="mt-3">
-                <summary className="text-xs text-stone-500 cursor-pointer hover:text-stone-300 transition-colors">
+                <summary className="text-xs text-content-muted cursor-pointer hover:text-content-faint transition-colors">
                   {t('app.errorFallback.componentStack')}
                 </summary>
-                <pre className="mt-2 text-[11px] text-stone-500 whitespace-pre-wrap break-words max-h-[200px] overflow-auto">
+                <pre className="mt-2 text-[11px] text-content-muted whitespace-pre-wrap break-words max-h-[200px] overflow-auto">
                   {componentStack}
                 </pre>
               </details>
@@ -160,7 +162,7 @@ export default function ErrorFallbackScreen({
                 window.location.hash = '#/home';
                 window.location.reload();
               }}
-              className="bg-coral-500 hover:bg-coral-600 text-white text-sm font-medium rounded-xl px-4 py-3 transition-colors">
+              className="bg-coral-500 hover:bg-coral-600 text-content-inverted text-sm font-medium rounded-xl px-4 py-3 transition-colors">
               {t('app.errorFallback.reloadApp')}
             </button>
             {/* Always rendered — `isTauri()` is false during the CEF IPC
@@ -185,7 +187,7 @@ export default function ErrorFallbackScreen({
             )}
             <button
               onClick={() => openUrl(LATEST_APP_DOWNLOAD_URL)}
-              className="text-stone-500 hover:text-stone-300 hover:underline transition-colors">
+              className="text-content-muted hover:text-content-faint hover:underline transition-colors">
               {t('app.errorFallback.downloadLatest')}
             </button>
           </div>
diff --git a/app/src/components/InitProgressScreen/InitProgressScreen.tsx b/app/src/components/InitProgressScreen/InitProgressScreen.tsx
index eaa9dce99..23f831916 100644
--- a/app/src/components/InitProgressScreen/InitProgressScreen.tsx
+++ b/app/src/components/InitProgressScreen/InitProgressScreen.tsx
@@ -52,7 +52,7 @@ function StepRow({ step }: { step: HarnessInitStep }) {
         {icon}
       </span>
       <span className="flex-1 text-sm text-stone-200">{label}</span>
-      <span className="text-xs text-stone-400">{stateText}</span>
+      <span className="text-xs text-content-faint">{stateText}</span>
     </li>
   );
 }
@@ -90,7 +90,7 @@ export default function InitProgressScreen({
         <h2 id="harness-init-title" className="text-lg font-semibold text-white">
           {t('harnessInit.title')}
         </h2>
-        <p className="mt-1 text-sm text-stone-400">{t('harnessInit.subtitle')}</p>
+        <p className="mt-1 text-sm text-content-faint">{t('harnessInit.subtitle')}</p>
 
         <ul className="mt-5 divide-y divide-stone-800">
           {snapshot.steps.map(step => (
@@ -100,11 +100,11 @@ export default function InitProgressScreen({
 
         {!failed && (
           <div className="mt-5 flex items-center justify-between gap-3">
-            <p className="text-xs text-stone-500">{t('harnessInit.backgroundHint')}</p>
+            <p className="text-xs text-content-muted">{t('harnessInit.backgroundHint')}</p>
             <button
               type="button"
               onClick={onContinue}
-              className="shrink-0 rounded-lg border border-stone-700 px-3 py-1.5 text-sm text-stone-300 hover:bg-stone-800 hover:text-white">
+              className="shrink-0 rounded-lg border border-stone-700 px-3 py-1.5 text-sm text-content-faint hover:bg-stone-800 hover:text-white">
               {t('harnessInit.runInBackground')}
             </button>
           </div>
@@ -124,14 +124,14 @@ export default function InitProgressScreen({
               <button
                 type="button"
                 onClick={onContinue}
-                className="rounded-lg px-3 py-1.5 text-sm text-stone-300 hover:text-white">
+                className="rounded-lg px-3 py-1.5 text-sm text-content-faint hover:text-white">
                 {t('harnessInit.continueAnyway')}
               </button>
               <button
                 type="button"
                 onClick={onRetry}
                 disabled={retrying}
-                className="inline-flex items-center gap-2 rounded-lg bg-primary-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-500/90 disabled:opacity-60">
+                className="inline-flex items-center gap-2 rounded-lg bg-primary-500 px-3 py-1.5 text-sm font-medium text-content-inverted hover:bg-primary-500/90 disabled:opacity-60">
                 {retrying && <Spinner className="h-3 w-3" />}
                 {t('harnessInit.retry')}
               </button>
diff --git a/app/src/components/LanguageSelect.tsx b/app/src/components/LanguageSelect.tsx
index 249a4defa..4c4159cce 100644
--- a/app/src/components/LanguageSelect.tsx
+++ b/app/src/components/LanguageSelect.tsx
@@ -38,7 +38,7 @@ interface LanguageSelectProps {
 }
 
 const DEFAULT_CLASS =
-  "appearance-none rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 bg-[url('data:image/svg+xml;utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%20fill=%22%2378716c%22><path%20d=%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22/></svg>')] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1rem_1rem] py-2 pl-3 pr-8 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:border-stone-300 dark:hover:border-neutral-600 hover:bg-stone-50 dark:hover:bg-neutral-800 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 cursor-pointer";
+  "appearance-none rounded-lg border border-line bg-surface bg-[url('data:image/svg+xml;utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%20fill=%22%2378716c%22><path%20d=%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22/></svg>')] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1rem_1rem] py-2 pl-3 pr-8 text-xs font-medium text-content-secondary hover:border-line-strong dark:hover:border-neutral-600 hover:bg-surface-hover focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 cursor-pointer";
 
 /**
  * Shared language picker used by the boot-check gate and the Settings home
diff --git a/app/src/components/LocalAIDownloadSnackbar.tsx b/app/src/components/LocalAIDownloadSnackbar.tsx
index 2344e114c..419c4b560 100644
--- a/app/src/components/LocalAIDownloadSnackbar.tsx
+++ b/app/src/components/LocalAIDownloadSnackbar.tsx
@@ -128,7 +128,7 @@ const LocalAIDownloadSnackbar = () => {
             <path d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z" />
             <path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z" />
           </svg>
-          <span className="text-xs font-medium text-stone-300">
+          <span className="text-xs font-medium text-content-faint">
             {percent != null ? `${percent}%` : label}
           </span>
         </button>
@@ -180,7 +180,7 @@ const LocalAIDownloadSnackbar = () => {
         {/* Phase detail */}
         {phaseDetail && (
           <div className="px-4 pb-1">
-            <span className="text-[11px] text-stone-400 truncate block">{phaseDetail}</span>
+            <span className="text-[11px] text-content-faint truncate block">{phaseDetail}</span>
           </div>
         )}
 
@@ -197,7 +197,7 @@ const LocalAIDownloadSnackbar = () => {
         </div>
 
         {/* Details */}
-        <div className="flex items-center justify-between px-4 pb-3 text-xs text-stone-400">
+        <div className="flex items-center justify-between px-4 pb-3 text-xs text-content-faint">
           <span>
             {isInstallingPhase
               ? t('app.localAiDownload.installing')
diff --git a/app/src/components/MeshGradient.test.tsx b/app/src/components/MeshGradient.test.tsx
new file mode 100644
index 000000000..4d48408dc
--- /dev/null
+++ b/app/src/components/MeshGradient.test.tsx
@@ -0,0 +1,93 @@
+import { act } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import ThemeProvider from '../providers/ThemeProvider';
+import { setThemeToken, upsertCustomTheme } from '../store/themeSlice';
+import { renderWithProviders } from '../test/test-utils';
+import MeshGradient from './MeshGradient';
+
+const gradientMock = vi.hoisted(() => ({
+  disconnect: vi.fn(),
+  // eslint-disable-next-line prefer-arrow-callback -- constructor mock must be new-able; arrows are not constructible.
+  Gradient: vi.fn(function MockGradient() {
+    return {
+      disconnect: gradientMock.disconnect,
+      initGradient: gradientMock.initGradient,
+      pause: gradientMock.pause,
+    };
+  }),
+  initGradient: vi.fn(),
+  pause: vi.fn(),
+}));
+
+vi.mock('../lib/meshGradient', () => ({ Gradient: gradientMock.Gradient }));
+
+describe('<MeshGradient />', () => {
+  let rafQueue: FrameRequestCallback[];
+
+  beforeEach(() => {
+    gradientMock.disconnect.mockClear();
+    gradientMock.Gradient.mockClear();
+    gradientMock.initGradient.mockClear();
+    gradientMock.pause.mockClear();
+    rafQueue = [];
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+      rafQueue.push(callback);
+      return rafQueue.length;
+    });
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
+  });
+
+  function flushAnimationFrames() {
+    const pending = [...rafQueue];
+    rafQueue = [];
+    for (const callback of pending) {
+      callback(performance.now());
+    }
+  }
+
+  it('restarts when a custom theme mesh colour changes without changing theme id', () => {
+    const { container, store } = renderWithProviders(
+      <ThemeProvider>
+        <MeshGradient />
+      </ThemeProvider>
+    );
+
+    act(() => {
+      store.dispatch(
+        upsertCustomTheme({
+          id: 'custom-live',
+          name: 'Live',
+          isDark: false,
+          builtIn: false,
+          colors: {
+            'primary-700': '1 2 3',
+            'primary-300': '4 5 6',
+            'primary-500': '7 8 9',
+            surface: '10 11 12',
+          },
+          fonts: {},
+        })
+      );
+    });
+    act(() => {
+      flushAnimationFrames();
+    });
+
+    const canvas = container.querySelector('#mesh-gradient') as HTMLCanvasElement;
+    expect(canvas.style.getPropertyValue('--gradient-color-4')).toBe('#070809');
+    expect(gradientMock.initGradient).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      store.dispatch(setThemeToken({ key: 'primary-500', value: '20 30 40' }));
+    });
+    act(() => {
+      flushAnimationFrames();
+    });
+
+    expect(canvas.style.getPropertyValue('--gradient-color-4')).toBe('#141e28');
+    expect(gradientMock.disconnect).toHaveBeenCalledTimes(1);
+    expect(gradientMock.pause).toHaveBeenCalledTimes(1);
+    expect(gradientMock.initGradient).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/app/src/components/MeshGradient.tsx b/app/src/components/MeshGradient.tsx
index d2f47a951..d52358f5c 100644
--- a/app/src/components/MeshGradient.tsx
+++ b/app/src/components/MeshGradient.tsx
@@ -1,28 +1,40 @@
 import { useEffect, useRef } from 'react';
 
 import { Gradient } from '../lib/meshGradient';
+import { channelsToHex } from '../lib/theme/color';
+import { useAppSelector } from '../store/hooks';
+import { selectEffectiveTheme, selectThemeVariant } from '../store/themeSlice';
 
 /**
- * Animated WebGL mesh gradient background (Stripe-style).
- * Renders behind the dotted-canvas overlay so dots remain visible on top.
- * Catches WebGL errors gracefully so the app still works when the GPU context
- * is unavailable or lost (e.g. Tauri WebView on some platforms).
+ * Animated WebGL mesh gradient background (Stripe-style), tinted by the active
+ * theme. The four gradient stops are derived from the theme's primary ramp +
+ * surface token (read as hex from the resolved CSS variables), so the backdrop
+ * follows Matrix green / HAL red / Ocean blue / etc. It re-initialises whenever
+ * the active theme or its light/dark variant changes.
+ *
+ * Renders behind the dotted-canvas overlay so dots remain visible on top, and
+ * catches WebGL errors gracefully (Tauri WebView can lack a GPU context).
  */
 export default function MeshGradient() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  // Re-init the gradient when the effective theme's mesh-driving tokens change.
+  const effectiveTheme = useAppSelector(selectEffectiveTheme);
+  const variant = useAppSelector(selectThemeVariant);
+  const tokenSignature = [
+    effectiveTheme.id,
+    effectiveTheme.isDark ? 'dark' : 'light',
+    effectiveTheme.colors['primary-700'] ?? '',
+    effectiveTheme.colors['primary-300'] ?? '',
+    effectiveTheme.colors.surface ?? '',
+    effectiveTheme.colors['primary-500'] ?? '',
+  ].join('|');
 
   useEffect(() => {
     let gradient: InstanceType<typeof Gradient> | null = null;
+    let raf = 0;
+    let disposed = false;
 
-    try {
-      gradient = new Gradient();
-      gradient.initGradient('#mesh-gradient');
-    } catch (err) {
-      console.warn('[MeshGradient] WebGL init failed, gradient disabled:', err);
-      gradient = null;
-    }
-
-    return () => {
+    const disconnectGradient = () => {
       try {
         if (gradient) {
           gradient.disconnect();
@@ -30,9 +42,66 @@ export default function MeshGradient() {
         }
       } catch {
         // Cleanup is best-effort.
+      } finally {
+        gradient = null;
       }
     };
-  }, []);
+
+    const start = () => {
+      if (disposed) return;
+      const root = document.documentElement;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      disconnectGradient();
+      const hex = (token: string, fallback: string) => {
+        const v = window.getComputedStyle(root).getPropertyValue(`--${token}`).trim();
+        return v ? channelsToHex(v) : fallback;
+      };
+      // Accent-led stops + the surface base, so the mesh reads on any theme.
+      canvas.style.setProperty('--gradient-color-1', hex('primary-700', '#0019d9'));
+      canvas.style.setProperty('--gradient-color-2', hex('primary-300', '#b5d5ff'));
+      canvas.style.setProperty('--gradient-color-3', hex('surface', '#ffffff'));
+      canvas.style.setProperty('--gradient-color-4', hex('primary-500', '#4fa4ff'));
+      console.debug('[theme] mesh gradient stops applied', { themeId: effectiveTheme.id, variant });
+
+      try {
+        gradient = new Gradient();
+        gradient.initGradient('#mesh-gradient');
+      } catch (err) {
+        console.warn('[MeshGradient] WebGL init failed, gradient disabled:', err);
+        gradient = null;
+      }
+    };
+
+    const scheduleStart = () => {
+      window.cancelAnimationFrame(raf);
+      // Defer one frame so ThemeProvider (an ancestor) has applied the theme's
+      // CSS variables before we read them — child effects run before parents.
+      raf = window.requestAnimationFrame(start);
+    };
+
+    scheduleStart();
+
+    let removeSystemListener: (() => void) | undefined;
+    if (variant === 'system' && typeof window !== 'undefined' && window.matchMedia) {
+      const mq = window.matchMedia('(prefers-color-scheme: dark)');
+      const listener = () => scheduleStart();
+      if (mq.addEventListener) {
+        mq.addEventListener('change', listener);
+        removeSystemListener = () => mq.removeEventListener('change', listener);
+      } else {
+        mq.addListener(listener);
+        removeSystemListener = () => mq.removeListener(listener);
+      }
+    }
+
+    return () => {
+      disposed = true;
+      removeSystemListener?.();
+      window.cancelAnimationFrame(raf);
+      disconnectGradient();
+    };
+  }, [effectiveTheme.id, tokenSignature, variant]);
 
   return (
     <canvas
@@ -40,14 +109,6 @@ export default function MeshGradient() {
       id="mesh-gradient"
       data-transition-in
       className="absolute inset-0 w-full h-full opacity-10"
-      style={
-        {
-          '--gradient-color-1': '#0019d9',
-          '--gradient-color-2': '#b5d5ff', // primary-50
-          '--gradient-color-3': '#ffffff', // primary-100
-          '--gradient-color-4': '#4fa4ff', // primary-200
-        } as React.CSSProperties
-      }
     />
   );
 }
diff --git a/app/src/components/OpenhumanLinkModal.tsx b/app/src/components/OpenhumanLinkModal.tsx
index 74e64b200..599fbd1a8 100644
--- a/app/src/components/OpenhumanLinkModal.tsx
+++ b/app/src/components/OpenhumanLinkModal.tsx
@@ -87,12 +87,10 @@ const OpenhumanLinkModal = () => {
       role="dialog"
       aria-modal="true">
       <div
-        className="w-full max-w-md rounded-2xl bg-white dark:bg-neutral-900 shadow-xl overflow-hidden"
+        className="w-full max-w-md rounded-2xl bg-surface shadow-xl overflow-hidden"
         onClick={e => e.stopPropagation()}>
-        <div className="flex items-center justify-between border-b border-stone-100 dark:border-neutral-800 px-5 py-3">
-          <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
-            {titleForPath(activePath, t)}
-          </h2>
+        <div className="flex items-center justify-between border-b border-line-subtle px-5 py-3">
+          <h2 className="text-sm font-semibold text-content">{titleForPath(activePath, t)}</h2>
           <Button
             iconOnly
             variant="tertiary"
@@ -129,7 +127,7 @@ const MessagingSetupBridge = ({ onClose }: { onClose: () => void }) => {
   if (loading && !telegram) {
     return (
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
-        <div className="rounded-2xl bg-white dark:bg-neutral-900 px-6 py-4 text-sm text-stone-600 dark:text-neutral-300 shadow-xl">
+        <div className="rounded-2xl bg-surface px-6 py-4 text-sm text-content-secondary shadow-xl">
           {t('app.openhumanLink.loadingChannelSetup')}
         </div>
       </div>
@@ -142,7 +140,7 @@ const MessagingSetupBridge = ({ onClose }: { onClose: () => void }) => {
         className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
         onClick={onClose}>
         <div
-          className="rounded-2xl bg-white dark:bg-neutral-900 p-6 text-sm text-stone-700 dark:text-neutral-200 shadow-xl max-w-sm"
+          className="rounded-2xl bg-surface p-6 text-sm text-content-secondary shadow-xl max-w-sm"
           onClick={e => e.stopPropagation()}>
           <p>{t('app.openhumanLink.telegramUnavailable')}</p>
           <div className="mt-3 flex justify-end">
@@ -256,7 +254,7 @@ const NotificationsBody = ({ close }: { close: () => void }) => {
   };
 
   return (
-    <div className="space-y-4 text-sm text-stone-700 dark:text-neutral-200">
+    <div className="space-y-4 text-sm text-content-secondary">
       <p>{t('app.openhumanLink.notifications.intro')}</p>
       {permissionState === 'denied' && (
         <div className="rounded-xl border border-coral-200 bg-coral-50 dark:bg-coral-500/15 p-3 text-xs text-coral-700 dark:text-coral-300">
@@ -270,7 +268,7 @@ const NotificationsBody = ({ close }: { close: () => void }) => {
         </div>
       )}
       {(permissionState === 'prompt' || permissionState === 'unknown') && (
-        <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 text-xs text-stone-700 dark:text-neutral-200">
+        <div className="rounded-xl border border-line bg-surface-muted p-3 text-xs text-content-secondary">
           {t('app.openhumanLink.notifications.promptHint')}
         </div>
       )}
@@ -299,15 +297,15 @@ const NotificationsBody = ({ close }: { close: () => void }) => {
 const BillingBody = ({ close }: { close: () => void }) => {
   const { t } = useT();
   return (
-    <div className="space-y-4 text-sm text-stone-700 dark:text-neutral-200">
-      <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
-        <p className="text-xs uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+    <div className="space-y-4 text-sm text-content-secondary">
+      <div className="rounded-xl border border-line bg-surface-muted p-4">
+        <p className="text-xs uppercase tracking-wide text-content-muted">
           {t('app.openhumanLink.billing.trialCredit')}
         </p>
-        <p className="mt-1 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
+        <p className="mt-1 text-2xl font-semibold text-content">
           {t('onboarding.runtimeChoice.cloud.creditHighlight')}
         </p>
-        <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
+        <p className="mt-1 text-xs text-content-muted">
           {t('app.openhumanLink.billing.trialDesc')}
         </p>
       </div>
@@ -328,9 +326,9 @@ const BillingBody = ({ close }: { close: () => void }) => {
 const DiscordBody = ({ close }: { close: () => void }) => {
   const { t } = useT();
   return (
-    <div className="space-y-4 text-sm text-stone-700 dark:text-neutral-200">
+    <div className="space-y-4 text-sm text-content-secondary">
       <p>{t('app.openhumanLink.discord.intro')}</p>
-      <ul className="space-y-1.5 text-xs text-stone-600 dark:text-neutral-300 pl-1">
+      <ul className="space-y-1.5 text-xs text-content-secondary pl-1">
         <li className="flex items-center gap-2">
           <span className="h-1.5 w-1.5 rounded-full bg-primary-400 flex-shrink-0" />
           {t('app.openhumanLink.discord.perk1')}
@@ -376,7 +374,7 @@ const DiscordReportBody = ({ close }: { close: () => void }) => {
   const { t } = useT();
 
   return (
-    <div className="space-y-4 text-sm text-stone-700 dark:text-neutral-200">
+    <div className="space-y-4 text-sm text-content-secondary">
       <p>{t('app.openhumanLink.discordReport.intro')}</p>
       <Button
         onClick={async () => {
@@ -513,7 +511,7 @@ const AccountsSetupBody = ({ close }: { close: () => void }) => {
     : t('app.openhumanLink.accounts.done');
 
   return (
-    <div className="space-y-4 text-sm text-stone-700 dark:text-neutral-200">
+    <div className="space-y-4 text-sm text-content-secondary">
       <p>{t('app.openhumanLink.accounts.intro')}</p>
       <div className="space-y-2">
         {providerDescriptors.map(p => {
@@ -523,25 +521,21 @@ const AccountsSetupBody = ({ close }: { close: () => void }) => {
           return (
             <div
               key={p.id}
-              className="flex items-center gap-3 rounded-xl border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
+              className="flex items-center gap-3 rounded-xl border border-line-subtle bg-surface p-3">
               <ProviderIcon provider={p.id} className="h-5 w-5 flex-none" />
               <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium text-stone-900 dark:text-neutral-100">
-                  {p.label}
-                </div>
+                <div className="text-sm font-medium text-content">{p.label}</div>
                 {on && status ? (
                   <div className="flex items-center gap-1.5">
                     <span
                       className={`inline-block h-1.5 w-1.5 rounded-full ${statusDisplay(status).dotClass}`}
                     />
-                    <span className="text-xs text-stone-500 dark:text-neutral-400">
+                    <span className="text-xs text-content-muted">
                       {t(statusDisplay(status).labelKey)}
                     </span>
                   </div>
                 ) : (
-                  <p className="line-clamp-1 text-xs text-stone-500 dark:text-neutral-400">
-                    {p.description}
-                  </p>
+                  <p className="line-clamp-1 text-xs text-content-muted">{p.description}</p>
                 )}
               </div>
               <button
@@ -551,10 +545,10 @@ const AccountsSetupBody = ({ close }: { close: () => void }) => {
                 aria-label={`${on ? t('skills.disconnect') : t('skills.connect')} ${p.label}`}
                 onClick={() => handleToggle(p.id, p.label, on)}
                 className={`relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors ${
-                  on ? 'bg-primary-500' : 'bg-stone-200'
+                  on ? 'bg-primary-500' : 'bg-surface-strong'
                 }`}>
                 <span
-                  className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform ${
+                  className={`inline-block h-5 w-5 transform rounded-full bg-surface shadow transition-transform ${
                     on ? 'translate-x-5' : 'translate-x-0.5'
                   }`}
                 />
@@ -563,9 +557,7 @@ const AccountsSetupBody = ({ close }: { close: () => void }) => {
           );
         })}
       </div>
-      <p className="text-xs text-stone-400 dark:text-neutral-500">
-        {t('app.openhumanLink.accounts.webviewNote')}
-      </p>
+      <p className="text-xs text-content-faint">{t('app.openhumanLink.accounts.webviewNote')}</p>
       <DoneFooter close={close} onDone={handleDone} doneLabel={doneLabel} />
     </div>
   );
diff --git a/app/src/components/PersistRehydrationScreen.tsx b/app/src/components/PersistRehydrationScreen.tsx
index 567053a4c..fba828538 100644
--- a/app/src/components/PersistRehydrationScreen.tsx
+++ b/app/src/components/PersistRehydrationScreen.tsx
@@ -55,12 +55,10 @@ function PersistRehydrationScreen() {
   };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-canvas-50 dark:bg-neutral-950 p-6">
-      <div className="max-w-sm w-full space-y-4 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-soft text-center">
-        <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
-          {t('app.persistRehydration.heading')}
-        </p>
-        <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+    <div className="fixed inset-0 flex items-center justify-center bg-canvas-50 dark:bg-surface-canvas p-6">
+      <div className="max-w-sm w-full space-y-4 rounded-xl border border-line bg-surface p-6 shadow-soft text-center">
+        <p className="text-sm font-medium text-content">{t('app.persistRehydration.heading')}</p>
+        <p className="text-xs text-content-muted leading-relaxed">
           {t('app.persistRehydration.body')}
         </p>
         <Button onClick={handleReset} disabled={resetting} className="w-full">
diff --git a/app/src/components/RouteLoadingScreen.tsx b/app/src/components/RouteLoadingScreen.tsx
index 3b37aafa5..956d3f743 100644
--- a/app/src/components/RouteLoadingScreen.tsx
+++ b/app/src/components/RouteLoadingScreen.tsx
@@ -8,7 +8,7 @@ const RouteLoadingScreen = ({ label }: RouteLoadingScreenProps) => {
   const { t } = useT();
   return (
     <div className="h-full min-h-[280px] w-full flex items-center justify-center">
-      <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3 text-sm text-stone-700 dark:text-neutral-200">
+      <div className="rounded-xl border border-line bg-surface px-4 py-3 text-sm text-content-secondary">
         {label ?? t('app.routeLoading.initializing')}
       </div>
     </div>
diff --git a/app/src/components/accounts/AddAccountModal.tsx b/app/src/components/accounts/AddAccountModal.tsx
index 68709c532..ea6308201 100644
--- a/app/src/components/accounts/AddAccountModal.tsx
+++ b/app/src/components/accounts/AddAccountModal.tsx
@@ -40,12 +40,10 @@ const AddAccountModal = ({ open, onClose, onPick, connectedProviders }: AddAccou
       aria-labelledby="add-account-modal-title"
       onClick={onClose}>
       <div
-        className="w-[420px] max-w-[90vw] rounded-2xl bg-white dark:bg-neutral-900 p-6 shadow-strong"
+        className="w-[420px] max-w-[90vw] rounded-2xl bg-surface p-6 shadow-strong"
         onClick={e => e.stopPropagation()}>
         <div className="mb-4 flex items-center justify-between">
-          <h2
-            id="add-account-modal-title"
-            className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+          <h2 id="add-account-modal-title" className="text-lg font-semibold text-content">
             {t('accounts.addModal.title')}
           </h2>
           <Button
@@ -62,7 +60,7 @@ const AddAccountModal = ({ open, onClose, onPick, connectedProviders }: AddAccou
 
         <div className="space-y-1">
           {available.length === 0 ? (
-            <div className="rounded-lg border border-dashed border-stone-200 dark:border-neutral-800 p-6 text-center text-sm text-stone-500 dark:text-neutral-400">
+            <div className="rounded-lg border border-dashed border-line p-6 text-center text-sm text-content-muted">
               {t('accounts.addModal.allConnected')}
             </div>
           ) : (
@@ -73,11 +71,9 @@ const AddAccountModal = ({ open, onClose, onPick, connectedProviders }: AddAccou
                 data-analytics-id={`add-account-provider-${p.id}`}
                 data-testid={`add-account-provider-${p.id}`}
                 onClick={() => onPick(p)}
-                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60">
+                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-surface-hover dark:bg-surface-muted dark:hover:bg-surface-muted/60">
                 <ProviderIcon provider={p.id} className="h-5 w-5 flex-none" />
-                <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
-                  {p.label}
-                </span>
+                <span className="text-sm font-medium text-content">{p.label}</span>
               </button>
             ))
           )}
diff --git a/app/src/components/accounts/RespondQueuePanel.tsx b/app/src/components/accounts/RespondQueuePanel.tsx
index a92dd1604..42f8294b0 100644
--- a/app/src/components/accounts/RespondQueuePanel.tsx
+++ b/app/src/components/accounts/RespondQueuePanel.tsx
@@ -37,13 +37,11 @@ export default function RespondQueuePanel({
 }: RespondQueuePanelProps) {
   const { t } = useT();
   return (
-    <aside className="flex w-80 flex-none flex-col border-l border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
-      <div className="flex flex-none items-center justify-between border-b border-stone-100 dark:border-neutral-800 px-4 py-3">
+    <aside className="flex w-80 flex-none flex-col border-l border-line bg-surface">
+      <div className="flex flex-none items-center justify-between border-b border-line-subtle px-4 py-3">
         <div>
-          <h3 className="text-sm font-semibold text-stone-800 dark:text-neutral-100">
-            {t('accounts.respondQueue.title')}
-          </h3>
-          <p className="text-xs text-stone-500 dark:text-neutral-400">
+          <h3 className="text-sm font-semibold text-content">{t('accounts.respondQueue.title')}</h3>
+          <p className="text-xs text-content-muted">
             {count} {t('accounts.respondQueue.pending')}
           </p>
         </div>
@@ -57,7 +55,7 @@ export default function RespondQueuePanel({
       </div>
       <div className="flex-1 overflow-y-auto px-3 py-3">
         {status === 'loading' && items.length === 0 ? (
-          <p className="rounded-lg bg-stone-50 dark:bg-neutral-800/60 px-3 py-2 text-xs text-stone-500 dark:text-neutral-400">
+          <p className="rounded-lg bg-surface-muted px-3 py-2 text-xs text-content-muted">
             {t('accounts.respondQueue.loading')}
           </p>
         ) : null}
@@ -69,7 +67,7 @@ export default function RespondQueuePanel({
         ) : null}
 
         {items.length === 0 && status !== 'loading' ? (
-          <p className="rounded-lg bg-stone-50 dark:bg-neutral-800/60 px-3 py-2 text-xs text-stone-500 dark:text-neutral-400">
+          <p className="rounded-lg bg-surface-muted px-3 py-2 text-xs text-content-muted">
             {t('accounts.respondQueue.empty')}
           </p>
         ) : null}
@@ -85,22 +83,18 @@ export default function RespondQueuePanel({
                   void openUrl(item.deepLink);
                 }
               }}
-              className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-left transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:cursor-default"
+              className="w-full rounded-xl border border-line bg-surface px-3 py-2 text-left transition-colors hover:bg-surface-hover disabled:cursor-default"
               disabled={!item.deepLink}>
               <div className="flex items-center justify-between gap-2">
-                <p className="truncate text-xs font-medium text-stone-800 dark:text-neutral-100">
-                  {queueTitle(item)}
-                </p>
-                <span className="rounded-full bg-stone-100 dark:bg-neutral-800 px-2 py-0.5 text-[10px] uppercase text-stone-600 dark:text-neutral-300">
+                <p className="truncate text-xs font-medium text-content">{queueTitle(item)}</p>
+                <span className="rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] uppercase text-content-secondary">
                   {item.provider}
                 </span>
               </div>
               {item.snippet ? (
-                <p className="mt-1 line-clamp-2 text-xs text-stone-600 dark:text-neutral-300">
-                  {item.snippet}
-                </p>
+                <p className="mt-1 line-clamp-2 text-xs text-content-secondary">{item.snippet}</p>
               ) : null}
-              <div className="mt-1 flex items-center justify-between text-[10px] text-stone-500 dark:text-neutral-400">
+              <div className="mt-1 flex items-center justify-between text-[10px] text-content-muted">
                 <span>{item.senderName ?? item.senderHandle ?? item.accountId}</span>
                 <span>{relativeTime(item.timestamp)}</span>
               </div>
diff --git a/app/src/components/accounts/WebviewHost.tsx b/app/src/components/accounts/WebviewHost.tsx
index 280aadece..73bca1963 100644
--- a/app/src/components/accounts/WebviewHost.tsx
+++ b/app/src/components/accounts/WebviewHost.tsx
@@ -77,7 +77,7 @@ const LoadingPhaseHint = ({ accountId }: { accountId: string }) => {
   return (
     <span
       data-testid={`webview-loading-hint-${accountId}`}
-      className="text-[11px] font-medium text-stone-400 dark:text-neutral-500">
+      className="text-[11px] font-medium text-content-faint">
       {text}
     </span>
   );
@@ -199,7 +199,7 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
   return (
     <div
       ref={ref}
-      className="relative h-full w-full overflow-hidden bg-stone-100 dark:bg-neutral-800"
+      className="relative h-full w-full overflow-hidden bg-surface-subtle"
       aria-label={`webview host for account ${accountId}`}>
       {/* Branded placeholder + (optional) loading overlay collapsed into a
           single absolute container so we never paint two stacked / offset
@@ -214,9 +214,7 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
         <div
           data-testid={`webview-placeholder-${accountId}`}
           className={`pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 ${
-            isLoading
-              ? 'text-stone-500 dark:text-neutral-400'
-              : 'text-stone-400 dark:text-neutral-500'
+            isLoading ? 'text-content-muted' : 'text-content-faint'
           }`}
           role={isLoading ? 'status' : undefined}
           aria-live={isLoading ? 'polite' : undefined}
@@ -226,7 +224,7 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
             className={`h-12 w-12 ${isLoading ? '' : 'opacity-70'}`}
           />
           <span
-            className={`text-xs font-medium tracking-wide ${isLoading ? '' : 'text-stone-500 dark:text-neutral-400'}`}>
+            className={`text-xs font-medium tracking-wide ${isLoading ? '' : 'text-content-muted'}`}>
             {isLoading
               ? t('accounts.webviewHost.loading').replace('{providerName}', providerName)
               : providerName}
@@ -235,7 +233,7 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
             <div
               data-testid={`webview-loading-${accountId}`}
               className="flex flex-col items-center gap-2">
-              <div className="h-8 w-8 animate-spin rounded-full border-2 border-stone-300 dark:border-neutral-700 border-t-stone-600 dark:border-t-neutral-400" />
+              <div className="h-8 w-8 animate-spin rounded-full border-2 border-line-strong border-t-stone-600 dark:border-t-neutral-400" />
               {/* Issue #1233 — `key={accountId}` forces React to unmount the
                   hint when the user switches between two still-loading
                   accounts so the elapsed counter doesn't carry the
@@ -249,15 +247,15 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
       {isTimeout ? (
         <div
           data-testid={`webview-timeout-${accountId}`}
-          className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-4 bg-stone-50 dark:bg-neutral-800/60 px-6 text-center"
+          className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-4 bg-surface-muted px-6 text-center"
           role="status"
           aria-live="polite"
           aria-label={t('accounts.webviewHost.loadTimeout')}>
           <div className="max-w-sm space-y-1">
-            <p className="text-sm font-semibold text-stone-800 dark:text-neutral-100">
+            <p className="text-sm font-semibold text-content">
               {t('accounts.webviewHost.takingLonger').replace('{providerName}', providerName)}
             </p>
-            <p className="text-xs text-stone-600 dark:text-neutral-300">
+            <p className="text-xs text-content-secondary">
               {t('accounts.webviewHost.timeoutHint')}
             </p>
           </div>
diff --git a/app/src/components/channels/ChannelCapabilities.tsx b/app/src/components/channels/ChannelCapabilities.tsx
index 82940cc2e..c208597b5 100644
--- a/app/src/components/channels/ChannelCapabilities.tsx
+++ b/app/src/components/channels/ChannelCapabilities.tsx
@@ -9,7 +9,7 @@ const ChannelCapabilities = ({ capabilities }: ChannelCapabilitiesProps) => {
       {capabilities.map(cap => (
         <span
           key={cap}
-          className="px-1.5 py-0.5 text-[10px] rounded bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400 border border-stone-200 dark:border-neutral-800">
+          className="px-1.5 py-0.5 text-[10px] rounded bg-surface-subtle text-content-muted border border-line">
           {cap.replace(/_/g, ' ')}
         </span>
       ))}
diff --git a/app/src/components/channels/ChannelConfigPanel.tsx b/app/src/components/channels/ChannelConfigPanel.tsx
index e10197002..23072f812 100644
--- a/app/src/components/channels/ChannelConfigPanel.tsx
+++ b/app/src/components/channels/ChannelConfigPanel.tsx
@@ -19,14 +19,10 @@ const ChannelConfigPanel = ({ selectedChannel, definitions }: ChannelConfigPanel
   if (selectedChannel === 'mcp') {
     return (
       <div className="space-y-4">
-        <section className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+        <section className="rounded-xl border border-line bg-surface p-4 space-y-3">
           <div>
-            <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
-              {t('channels.mcp.title')}
-            </h3>
-            <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
-              {t('channels.mcp.description')}
-            </p>
+            <h3 className="text-base font-semibold text-content">{t('channels.mcp.title')}</h3>
+            <p className="text-xs text-content-muted mt-1">{t('channels.mcp.description')}</p>
           </div>
           <McpServersTab />
         </section>
@@ -39,12 +35,12 @@ const ChannelConfigPanel = ({ selectedChannel, definitions }: ChannelConfigPanel
 
   return (
     <div className="space-y-4">
-      <section className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+      <section className="rounded-xl border border-line bg-surface p-4 space-y-3">
         <div>
-          <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+          <h3 className="text-base font-semibold text-content">
             {t(`channels.${definition.id}.displayName`, definition.display_name)}
           </h3>
-          <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
+          <p className="text-xs text-content-muted mt-1">
             {t(`channels.${definition.id}.description`, definition.description)}
           </p>
         </div>
diff --git a/app/src/components/channels/ChannelFieldInput.tsx b/app/src/components/channels/ChannelFieldInput.tsx
index aa669aa9f..1722faafa 100644
--- a/app/src/components/channels/ChannelFieldInput.tsx
+++ b/app/src/components/channels/ChannelFieldInput.tsx
@@ -17,17 +17,15 @@ const ChannelFieldInput = ({ field, value, onChange, disabled }: ChannelFieldInp
           checked={checked}
           disabled={disabled}
           onChange={e => onChange(e.target.checked ? 'true' : 'false')}
-          className="mt-0.5 h-4 w-4 rounded border-stone-300 text-primary-600 focus:ring-primary-500 disabled:opacity-50"
+          className="mt-0.5 h-4 w-4 rounded border-line-strong text-primary-600 focus:ring-primary-500 disabled:opacity-50"
         />
         <span className="min-w-0">
-          <span className="block text-xs font-medium text-stone-700 dark:text-neutral-200">
+          <span className="block text-xs font-medium text-content-secondary">
             {field.label}
             {field.required && <span className="text-coral-500 ml-0.5">*</span>}
           </span>
           {field.placeholder && (
-            <span className="block text-[11px] text-stone-500 dark:text-neutral-400">
-              {field.placeholder}
-            </span>
+            <span className="block text-[11px] text-content-muted">{field.placeholder}</span>
           )}
         </span>
       </label>
@@ -36,7 +34,7 @@ const ChannelFieldInput = ({ field, value, onChange, disabled }: ChannelFieldInp
 
   return (
     <div>
-      <label className="block text-xs text-stone-500 dark:text-neutral-400 mb-1">
+      <label className="block text-xs text-content-muted mb-1">
         {field.label}
         {field.required && <span className="text-coral-500 ml-0.5">*</span>}
       </label>
@@ -46,7 +44,7 @@ const ChannelFieldInput = ({ field, value, onChange, disabled }: ChannelFieldInp
         onChange={e => onChange(e.target.value)}
         placeholder={field.placeholder || field.label}
         disabled={disabled}
-        className="w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:border-primary-500/60 disabled:opacity-50"
+        className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:border-primary-500/60 disabled:opacity-50"
       />
     </div>
   );
diff --git a/app/src/components/channels/ChannelSelector.tsx b/app/src/components/channels/ChannelSelector.tsx
index d340fc11b..11e5e11ff 100644
--- a/app/src/components/channels/ChannelSelector.tsx
+++ b/app/src/components/channels/ChannelSelector.tsx
@@ -42,12 +42,10 @@ const ChannelSelector = ({
   }, [channelConnections, t]);
 
   return (
-    <section className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-4">
+    <section className="rounded-xl border border-line bg-surface p-4 space-y-4">
       <div className="flex items-center justify-between">
-        <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
-          {t('channels.title')}
-        </h2>
-        <p className="text-xs text-stone-400 dark:text-neutral-500">
+        <h2 className="text-sm font-semibold text-content">{t('channels.title')}</h2>
+        <p className="text-xs text-content-faint">
           {t('channels.activeRoute')}:{' '}
           <span className="text-primary-600 dark:text-primary-300">{activeRoute}</span>
         </p>
@@ -77,7 +75,7 @@ const ChannelSelector = ({
               className={`flex-1 flex items-center justify-between gap-2 rounded-lg border px-4 py-3 text-sm transition-colors ${
                 isSelected
                   ? 'border-primary-500/60 bg-primary-50 dark:bg-primary-500/15 text-primary-600 dark:text-primary-300'
-                  : 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-700'
+                  : 'border-line bg-surface-muted text-content-secondary hover:border-line-strong dark:hover:border-line-strong'
               }`}>
               <span className="flex items-center gap-2">
                 {renderChannelIcon(def.icon)}
@@ -99,7 +97,7 @@ const ChannelSelector = ({
               className={`flex-1 flex items-center gap-2 rounded-lg border px-4 py-3 text-sm transition-colors ${
                 isSelected
                   ? 'border-primary-500/60 bg-primary-50 dark:bg-primary-500/15 text-primary-600 dark:text-primary-300'
-                  : 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-700'
+                  : 'border-line bg-surface-muted text-content-secondary hover:border-line-strong dark:hover:border-line-strong'
               }`}>
               {renderChannelIcon(tab.id)}
               <span className="font-medium">{tab.display_name}</span>
diff --git a/app/src/components/channels/ChannelSetupModal.tsx b/app/src/components/channels/ChannelSetupModal.tsx
index c2a41ea3d..4ae740d61 100644
--- a/app/src/components/channels/ChannelSetupModal.tsx
+++ b/app/src/components/channels/ChannelSetupModal.tsx
@@ -32,7 +32,7 @@ function ChannelConfigContent({ definition }: { definition: ChannelDefinition })
       return <YuanbaoConfig definition={definition} />;
     default:
       return (
-        <p className="text-sm text-stone-400 dark:text-neutral-500 py-4">
+        <p className="text-sm text-content-faint py-4">
           {t('channels.configNotAvailable')} {definition.display_name}
         </p>
       );
@@ -66,7 +66,7 @@ export default function ChannelSetupModal({ definition, onClose }: ChannelSetupM
       aria-labelledby="channel-setup-title">
       <div
         ref={modalRef}
-        className="bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-3xl shadow-large w-full max-w-[500px] overflow-hidden animate-fade-up focus:outline-none focus:ring-0"
+        className="bg-surface border border-line rounded-3xl shadow-large w-full max-w-[500px] overflow-hidden animate-fade-up focus:outline-none focus:ring-0"
         style={{
           animationDuration: '200ms',
           animationTimingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
@@ -75,23 +75,19 @@ export default function ChannelSetupModal({ definition, onClose }: ChannelSetupM
         tabIndex={-1}
         onClick={e => e.stopPropagation()}>
         {/* Header */}
-        <div className="px-5 pt-5 pb-4 border-b border-stone-200 dark:border-neutral-800">
+        <div className="px-5 pt-5 pb-4 border-b border-line">
           <div className="flex items-start justify-between">
             <div className="flex-1 min-w-0 pr-2">
               <div className="flex items-center gap-2">
                 {renderChannelIcon(definition.icon)}
-                <h2
-                  id="channel-setup-title"
-                  className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+                <h2 id="channel-setup-title" className="text-base font-semibold text-content">
                   {definition.display_name}
                 </h2>
                 <span className="px-1.5 py-0.5 text-[10px] font-medium rounded-md bg-primary-500/15 text-primary-600 dark:text-primary-300">
                   {t('channels.channel')}
                 </span>
               </div>
-              <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1.5">
-                {definition.description}
-              </p>
+              <p className="text-xs text-content-muted mt-1.5">{definition.description}</p>
             </div>
             <Button
               iconOnly
diff --git a/app/src/components/channels/DiscordConfig.tsx b/app/src/components/channels/DiscordConfig.tsx
index 8cf198cd8..7604151b8 100644
--- a/app/src/components/channels/DiscordConfig.tsx
+++ b/app/src/components/channels/DiscordConfig.tsx
@@ -288,7 +288,7 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
       {error && <ChannelConfigError message={error} />}
 
       {isLocalSession && visibleAuthModes.length !== definition.auth_modes.length && (
-        <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-4 py-3 text-sm text-stone-700 dark:text-neutral-200">
+        <div className="rounded-lg border border-line bg-surface-muted px-4 py-3 text-sm text-content-secondary">
           {t('channels.localManagedUnavailable')}
         </div>
       )}
@@ -331,14 +331,14 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
                   {t('channels.discord.linkTokenLabel')}
                 </p>
                 <div className="flex items-center gap-2">
-                  <code className="flex-1 rounded bg-white dark:bg-neutral-900 border border-primary-200 dark:border-primary-500/30 px-2 py-1 text-xs font-mono text-stone-800 dark:text-neutral-100 select-all break-all">
+                  <code className="flex-1 rounded bg-surface border border-primary-200 dark:border-primary-500/30 px-2 py-1 text-xs font-mono text-content select-all break-all">
                     {linkToken}
                   </code>
                   <Button variant="secondary" size="xs" onClick={copyToken} className="shrink-0">
                     {copied ? t('common.copied') : t('common.copy')}
                   </Button>
                 </div>
-                <p className="text-xs text-stone-500 dark:text-neutral-400">
+                <p className="text-xs text-content-muted">
                   {t('channels.discord.linkTokenInstruction').replace('{token}', linkToken)}
                 </p>
                 <p className="text-xs text-amber-600 font-medium">
@@ -350,7 +350,7 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
             {/* Connected state for managed_dm — show only Disconnect */}
             {spec.mode === 'managed_dm' && status === 'connected' ? (
               <>
-                <label className="mt-3 flex items-start gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
+                <label className="mt-3 flex items-start gap-2 rounded-lg border border-line bg-surface px-3 py-2">
                   <input
                     type="checkbox"
                     checked={Boolean(clearMemoryOnDisconnect[compositeKey])}
@@ -360,13 +360,13 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
                         [compositeKey]: event.currentTarget.checked,
                       }))
                     }
-                    className="mt-0.5 h-4 w-4 rounded border-stone-300 text-primary-600 focus:ring-primary-500"
+                    className="mt-0.5 h-4 w-4 rounded border-line-strong text-primary-600 focus:ring-primary-500"
                   />
                   <span className="min-w-0">
-                    <span className="block text-xs font-medium text-stone-800 dark:text-neutral-100">
+                    <span className="block text-xs font-medium text-content">
                       {t('accounts.disconnectClearMemory')}
                     </span>
-                    <span className="block text-[11px] text-stone-500 dark:text-neutral-400">
+                    <span className="block text-[11px] text-content-muted">
                       {t('accounts.disconnectClearMemoryHint')}
                     </span>
                   </span>
@@ -390,7 +390,7 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
             spec.mode !== 'managed_dm' || status !== 'connecting' ? (
               <>
                 {status === 'connected' && (
-                  <label className="mt-3 flex items-start gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
+                  <label className="mt-3 flex items-start gap-2 rounded-lg border border-line bg-surface px-3 py-2">
                     <input
                       type="checkbox"
                       checked={Boolean(clearMemoryOnDisconnect[compositeKey])}
@@ -400,13 +400,13 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
                           [compositeKey]: event.currentTarget.checked,
                         }))
                       }
-                      className="mt-0.5 h-4 w-4 rounded border-stone-300 text-primary-600 focus:ring-primary-500"
+                      className="mt-0.5 h-4 w-4 rounded border-line-strong text-primary-600 focus:ring-primary-500"
                     />
                     <span className="min-w-0">
-                      <span className="block text-xs font-medium text-stone-800 dark:text-neutral-100">
+                      <span className="block text-xs font-medium text-content">
                         {t('accounts.disconnectClearMemory')}
                       </span>
-                      <span className="block text-[11px] text-stone-500 dark:text-neutral-400">
+                      <span className="block text-[11px] text-content-muted">
                         {t('accounts.disconnectClearMemoryHint')}
                       </span>
                     </span>
diff --git a/app/src/components/channels/DiscordServerChannelPicker.tsx b/app/src/components/channels/DiscordServerChannelPicker.tsx
index f5c0fe851..bf0c1bcc9 100644
--- a/app/src/components/channels/DiscordServerChannelPicker.tsx
+++ b/app/src/components/channels/DiscordServerChannelPicker.tsx
@@ -157,7 +157,7 @@ const DiscordServerChannelPicker = ({
 
   return (
     <div className="mt-3 space-y-3">
-      <p className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+      <p className="text-xs font-medium text-content-secondary">
         {t('channels.discord.picker.serverChannelSelection')}
       </p>
 
@@ -170,9 +170,7 @@ const DiscordServerChannelPicker = ({
 
       {/* Guild selector */}
       <div>
-        <label
-          htmlFor="discord-guild-select"
-          className="block text-xs text-stone-500 dark:text-neutral-400 mb-1">
+        <label htmlFor="discord-guild-select" className="block text-xs text-content-muted mb-1">
           {t('channels.discord.picker.server')}
         </label>
         <select
@@ -180,7 +178,7 @@ const DiscordServerChannelPicker = ({
           value={selectedGuildId}
           onChange={e => handleGuildChange(e.target.value)}
           disabled={isLoading || guilds.length === 0}
-          className="w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none disabled:opacity-50">
+          className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content focus:border-primary-500 focus:outline-none disabled:opacity-50">
           <option value="">
             {state === 'loading_guilds'
               ? t('channels.discord.picker.loadingServers')
@@ -195,7 +193,7 @@ const DiscordServerChannelPicker = ({
           ))}
         </select>
         {guilds.length === 0 && state === 'guilds_loaded' && (
-          <p className="mt-1 text-xs text-stone-400 dark:text-neutral-500">
+          <p className="mt-1 text-xs text-content-faint">
             {t('channels.discord.picker.botNotInServers')}
           </p>
         )}
@@ -204,9 +202,7 @@ const DiscordServerChannelPicker = ({
       {/* Channel selector */}
       {selectedGuildId && (
         <div>
-          <label
-            htmlFor="discord-channel-select"
-            className="block text-xs text-stone-500 dark:text-neutral-400 mb-1">
+          <label htmlFor="discord-channel-select" className="block text-xs text-content-muted mb-1">
             {t('channels.discord.picker.channel')}
           </label>
           <select
@@ -214,7 +210,7 @@ const DiscordServerChannelPicker = ({
             value={selectedChannelId}
             onChange={e => handleChannelChange(e.target.value)}
             disabled={isLoading || channels.length === 0}
-            className="w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none disabled:opacity-50">
+            className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content focus:border-primary-500 focus:outline-none disabled:opacity-50">
             <option value="">
               {state === 'loading_channels'
                 ? t('channels.discord.picker.loadingChannels')
@@ -248,8 +244,8 @@ const DiscordServerChannelPicker = ({
 
       {/* Permission check result */}
       {state === 'checking_permissions' && (
-        <div className="flex items-center gap-2 text-xs text-stone-500 dark:text-neutral-400">
-          <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-stone-300 dark:border-neutral-700 border-t-primary-500" />
+        <div className="flex items-center gap-2 text-xs text-content-muted">
+          <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-line-strong border-t-primary-500" />
           {t('channels.discord.picker.checkingPermissions')}
         </div>
       )}
diff --git a/app/src/components/channels/TelegramConfig.tsx b/app/src/components/channels/TelegramConfig.tsx
index e11d683fd..11d9e4b27 100644
--- a/app/src/components/channels/TelegramConfig.tsx
+++ b/app/src/components/channels/TelegramConfig.tsx
@@ -323,11 +323,9 @@ const TelegramConfig = ({ definition }: TelegramConfigProps) => {
 
   return (
     <div className="space-y-3">
-      <div className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50/80 dark:bg-primary-500/10 px-4 py-3 text-sm text-stone-700 dark:text-neutral-200">
-        <p className="font-medium text-stone-900 dark:text-neutral-100">
-          {t('channels.telegram.remoteControlTitle')}
-        </p>
-        <p className="mt-1 text-xs text-stone-600 dark:text-neutral-400">
+      <div className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50/80 dark:bg-primary-500/10 px-4 py-3 text-sm text-content-secondary">
+        <p className="font-medium text-content">{t('channels.telegram.remoteControlTitle')}</p>
+        <p className="mt-1 text-xs text-content-secondary">
           {t('channels.telegram.remoteControlBody')}
         </p>
       </div>
@@ -335,7 +333,7 @@ const TelegramConfig = ({ definition }: TelegramConfigProps) => {
       {error && <ChannelConfigError message={error} />}
 
       {isLocalSession && visibleAuthModes.length !== definition.auth_modes.length && (
-        <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-4 py-3 text-sm text-stone-700 dark:text-neutral-200">
+        <div className="rounded-lg border border-line bg-surface-muted px-4 py-3 text-sm text-content-secondary">
           {t('channels.localManagedUnavailable')}
         </div>
       )}
@@ -370,7 +368,7 @@ const TelegramConfig = ({ definition }: TelegramConfigProps) => {
             )}
 
             {status === 'connected' && (
-              <label className="mt-3 flex items-start gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
+              <label className="mt-3 flex items-start gap-2 rounded-lg border border-line bg-surface px-3 py-2">
                 <input
                   type="checkbox"
                   checked={Boolean(clearMemoryOnDisconnect[compositeKey])}
@@ -380,13 +378,13 @@ const TelegramConfig = ({ definition }: TelegramConfigProps) => {
                       [compositeKey]: event.currentTarget.checked,
                     }))
                   }
-                  className="mt-0.5 h-4 w-4 rounded border-stone-300 text-primary-600 focus:ring-primary-500"
+                  className="mt-0.5 h-4 w-4 rounded border-line-strong text-primary-600 focus:ring-primary-500"
                 />
                 <span className="min-w-0">
-                  <span className="block text-xs font-medium text-stone-800 dark:text-neutral-100">
+                  <span className="block text-xs font-medium text-content">
                     {t('accounts.disconnectClearMemory')}
                   </span>
-                  <span className="block text-[11px] text-stone-500 dark:text-neutral-400">
+                  <span className="block text-[11px] text-content-muted">
                     {t('accounts.disconnectClearMemoryHint')}
                   </span>
                 </span>
diff --git a/app/src/components/channels/WebChannelConfig.tsx b/app/src/components/channels/WebChannelConfig.tsx
index 39b8c019c..7d5922407 100644
--- a/app/src/components/channels/WebChannelConfig.tsx
+++ b/app/src/components/channels/WebChannelConfig.tsx
@@ -15,9 +15,7 @@ const WebChannelConfig = ({ definition: _definition }: WebChannelConfigProps) =>
           <ChannelStatusBadge status="connected" />
         </div>
       </div>
-      <p className="text-sm text-stone-500 dark:text-neutral-400">
-        {t('channels.web.alwaysAvailable')}
-      </p>
+      <p className="text-sm text-content-muted">{t('channels.web.alwaysAvailable')}</p>
     </div>
   );
 };
diff --git a/app/src/components/channels/YuanbaoConfig.tsx b/app/src/components/channels/YuanbaoConfig.tsx
index bb3311fb0..e0e0259cf 100644
--- a/app/src/components/channels/YuanbaoConfig.tsx
+++ b/app/src/components/channels/YuanbaoConfig.tsx
@@ -217,13 +217,13 @@ const YuanbaoConfig = ({ definition }: YuanbaoConfigProps) => {
 
   return (
     <div className="space-y-3">
-      <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3">
+      <div className="rounded-lg border border-line bg-surface-muted p-3">
         <div className="flex items-start justify-between gap-3">
           <div>
-            <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+            <p className="text-sm font-medium text-content">
               {AUTH_MODE_LABELS[spec.mode] ?? spec.mode}
             </p>
-            <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">{spec.description}</p>
+            <p className="text-xs text-content-muted mt-1">{spec.description}</p>
             {connection?.lastError && (
               <p className="text-xs text-coral-600 mt-1">{connection.lastError}</p>
             )}
diff --git a/app/src/components/channels/__tests__/ChannelSelector.test.tsx b/app/src/components/channels/__tests__/ChannelSelector.test.tsx
index 4b51a6819..8281b9145 100644
--- a/app/src/components/channels/__tests__/ChannelSelector.test.tsx
+++ b/app/src/components/channels/__tests__/ChannelSelector.test.tsx
@@ -119,6 +119,6 @@ describe('ChannelSelector', () => {
     );
     const mcpBtn = screen.getByRole('button', { name: /mcp servers/i });
     expect(mcpBtn.className).not.toContain('bg-primary-50');
-    expect(mcpBtn.className).toContain('bg-stone-50');
+    expect(mcpBtn.className).toContain('bg-surface-muted');
   });
 });
diff --git a/app/src/components/channels/channelConfigPrimitives.tsx b/app/src/components/channels/channelConfigPrimitives.tsx
index 491d00b08..cece2872d 100644
--- a/app/src/components/channels/channelConfigPrimitives.tsx
+++ b/app/src/components/channels/channelConfigPrimitives.tsx
@@ -60,15 +60,11 @@ export function ChannelAuthModeCard({
   lastError,
 }: ChannelAuthModeCardProps) {
   return (
-    <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3">
+    <div className="rounded-lg border border-line bg-surface-muted p-3">
       <div className="flex items-start justify-between gap-3">
         <div>
-          {title ? (
-            <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">{title}</p>
-          ) : null}
-          <p className={`text-xs text-stone-500 dark:text-neutral-400 ${title ? 'mt-1' : ''}`}>
-            {description}
-          </p>
+          {title ? <p className="text-sm font-medium text-content">{title}</p> : null}
+          <p className={`text-xs text-content-muted ${title ? 'mt-1' : ''}`}>{description}</p>
           {lastError ? <p className="text-xs text-coral-600 mt-1">{lastError}</p> : null}
         </div>
         <ChannelStatusBadge status={status} />
diff --git a/app/src/components/channels/mcp/ConfigAssistantPanel.tsx b/app/src/components/channels/mcp/ConfigAssistantPanel.tsx
index 48a9b61d9..e80bca1e9 100644
--- a/app/src/components/channels/mcp/ConfigAssistantPanel.tsx
+++ b/app/src/components/channels/mcp/ConfigAssistantPanel.tsx
@@ -134,9 +134,9 @@ const ConfigAssistantPanel = ({
   return (
     <div className="flex flex-col h-full space-y-2">
       {/* Message list */}
-      <div className="flex-1 overflow-y-auto space-y-2 min-h-0 rounded-lg border border-stone-100 dark:border-neutral-800 p-2">
+      <div className="flex-1 overflow-y-auto space-y-2 min-h-0 rounded-lg border border-line-subtle p-2">
         {messages.length === 0 && (
-          <p className="text-xs text-stone-400 dark:text-neutral-500 py-2 text-center">
+          <p className="text-xs text-content-faint py-2 text-center">
             {t('mcp.configAssistant.empty')}
           </p>
         )}
@@ -147,8 +147,8 @@ const ConfigAssistantPanel = ({
             <div
               className={`max-w-[85%] rounded-lg px-3 py-2 text-sm ${
                 msg.role === 'user'
-                  ? 'bg-primary-500 text-white'
-                  : 'bg-stone-100 dark:bg-neutral-800 text-stone-800 dark:text-neutral-100'
+                  ? 'bg-primary-500 text-content-inverted'
+                  : 'bg-surface-subtle text-content'
               }`}>
               {msg.role === 'assistant' ? (
                 <BubbleMarkdown content={msg.content} tone="agent" />
@@ -172,7 +172,7 @@ const ConfigAssistantPanel = ({
                     <button
                       type="button"
                       onClick={() => onApplySuggestedEnv(msg.suggested_env!)}
-                      className="mt-1 rounded px-2 py-1 text-[11px] font-medium bg-white/20 hover:bg-white/30 transition-colors">
+                      className="mt-1 rounded px-2 py-1 text-[11px] font-medium bg-surface/20 hover:bg-white/30 transition-colors">
                       {t('mcp.configAssistant.applySuggested')}
                     </button>
                   )}
@@ -188,7 +188,7 @@ const ConfigAssistantPanel = ({
         ))}
         {sending && (
           <div className="flex justify-start">
-            <div className="rounded-lg px-3 py-2 text-sm bg-stone-100 dark:bg-neutral-800 text-stone-400 dark:text-neutral-500">
+            <div className="rounded-lg px-3 py-2 text-sm bg-surface-subtle text-content-faint">
               {t('mcp.configAssistant.thinking')}
             </div>
           </div>
@@ -212,7 +212,7 @@ const ConfigAssistantPanel = ({
           onKeyDown={handleKeyDown}
           disabled={sending}
           placeholder={t('mcp.configAssistant.inputPlaceholder')}
-          className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-sm text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50 resize-none"
+          className="flex-1 rounded-lg border border-line bg-surface px-3 py-1.5 text-sm text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50 resize-none"
         />
         <Button
           variant="primary"
diff --git a/app/src/components/channels/mcp/ConfigHelpModal.tsx b/app/src/components/channels/mcp/ConfigHelpModal.tsx
index ecb965dab..893d9ebf2 100644
--- a/app/src/components/channels/mcp/ConfigHelpModal.tsx
+++ b/app/src/components/channels/mcp/ConfigHelpModal.tsx
@@ -47,9 +47,9 @@ const ConfigHelpModal = ({
         if (e.target === e.currentTarget) onClose();
       }}
       className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 px-4 py-6 overflow-y-auto">
-      <div className="flex h-[78vh] max-h-[88vh] w-full max-w-2xl flex-col rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-xl p-4">
+      <div className="flex h-[78vh] max-h-[88vh] w-full max-w-2xl flex-col rounded-xl border border-line bg-surface shadow-xl p-4">
         <div className="mb-2 flex items-center justify-between">
-          <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+          <h3 className="text-base font-semibold text-content">
             {t('mcp.connectAuth.howToGetToken')}
           </h3>
           <Button
diff --git a/app/src/components/channels/mcp/ConnectAuthModal.tsx b/app/src/components/channels/mcp/ConnectAuthModal.tsx
index 84e4bb39a..e6956a216 100644
--- a/app/src/components/channels/mcp/ConnectAuthModal.tsx
+++ b/app/src/components/channels/mcp/ConnectAuthModal.tsx
@@ -241,14 +241,12 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
         if (e.target === e.currentTarget && !busy) onClose();
       }}
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4 py-6 overflow-y-auto">
-      <div className="w-full max-w-md rounded-xl bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 shadow-xl p-5 space-y-4">
+      <div className="w-full max-w-md rounded-xl bg-surface border border-line shadow-xl p-5 space-y-4">
         <div>
-          <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+          <h3 className="text-base font-semibold text-content">
             {t('mcp.connectAuth.title').replace('{name}', server.display_name)}
           </h3>
-          <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
-            {t('mcp.connectAuth.hint')}
-          </p>
+          <p className="text-xs text-content-muted mt-1">{t('mcp.connectAuth.hint')}</p>
           <button
             type="button"
             onClick={() => setShowConfigHelp(true)}
@@ -266,29 +264,25 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
         {/* Browser OAuth — shown when detection says this server needs a sign-in. */}
         {authKind === 'oauth' && (
           <div className="space-y-2 rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 p-3">
-            <p className="text-xs text-stone-600 dark:text-neutral-300">
-              {t('mcp.connectAuth.oauthHint')}
-            </p>
+            <p className="text-xs text-content-secondary">{t('mcp.connectAuth.oauthHint')}</p>
             <Button variant="primary" size="sm" onClick={handleOAuth} disabled={busy}>
               {oauthWaiting ? t('mcp.connectAuth.oauthWaiting') : t('mcp.connectAuth.signIn')}
             </Button>
-            <p className="text-[11px] text-stone-400 dark:text-neutral-500">
-              {t('mcp.connectAuth.oauthOrToken')}
-            </p>
+            <p className="text-[11px] text-content-faint">{t('mcp.connectAuth.oauthOrToken')}</p>
           </div>
         )}
 
         {/* Declared / known fields */}
         {knownKeys.length > 0 && (
           <div className="space-y-2">
-            <p className="text-[11px] font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+            <p className="text-[11px] font-medium uppercase tracking-wide text-content-faint">
               {t('mcp.connectAuth.requiredLabel')}
             </p>
             {knownKeys.map(key => (
               <div key={key} className="space-y-1">
                 <label
                   htmlFor={`auth-${key}`}
-                  className="block text-[11px] font-medium text-stone-600 dark:text-neutral-400 font-mono">
+                  className="block text-[11px] font-medium text-content-secondary font-mono">
                   {key}
                 </label>
                 <div className="flex gap-2">
@@ -302,7 +296,7 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
                     }
                     disabled={busy}
                     title={t('mcp.connectAuth.schemeLabel')}
-                    className="shrink-0 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-1.5 py-1.5 text-[11px] text-stone-700 dark:text-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50">
+                    className="shrink-0 rounded-lg border border-line bg-surface px-1.5 py-1.5 text-[11px] text-content-secondary focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50">
                     <option value="bearer">{t('mcp.connectAuth.schemeBearer')}</option>
                     <option value="raw">{t('mcp.connectAuth.schemeRaw')}</option>
                   </select>
@@ -319,7 +313,7 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
                     data-1p-ignore
                     data-lpignore="true"
                     data-form-type="other"
-                    className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
+                    className="flex-1 rounded-lg border border-line bg-surface px-3 py-1.5 text-xs text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
                   />
                   <Button
                     variant="secondary"
@@ -338,7 +332,7 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
         {/* Custom headers */}
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <p className="text-[11px] font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+            <p className="text-[11px] font-medium uppercase tracking-wide text-content-faint">
               {t('mcp.connectAuth.customHeadersLabel')}
             </p>
             <button
@@ -350,14 +344,12 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
             </button>
           </div>
           {customHeaders.length === 0 && (
-            <p className="text-[11px] text-stone-400 dark:text-neutral-500">
+            <p className="text-[11px] text-content-faint">
               {t('mcp.connectAuth.customHeadersEmpty')}
             </p>
           )}
           {customHeaders.map(h => (
-            <div
-              key={h.id}
-              className="space-y-1.5 rounded-lg border border-stone-200 dark:border-neutral-800 p-2">
+            <div key={h.id} className="space-y-1.5 rounded-lg border border-line p-2">
               {/* Row 1: header name + scheme + remove */}
               <div className="flex gap-2">
                 <input
@@ -373,7 +365,7 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
                   data-1p-ignore
                   data-lpignore="true"
                   data-form-type="other"
-                  className="flex-1 min-w-0 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1.5 text-xs font-mono text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
+                  className="flex-1 min-w-0 rounded-lg border border-line bg-surface px-2 py-1.5 text-xs font-mono text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
                 />
                 <select
                   value={h.scheme}
@@ -386,7 +378,7 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
                   }
                   disabled={busy}
                   title={t('mcp.connectAuth.schemeLabel')}
-                  className="shrink-0 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-1.5 py-1.5 text-[11px] text-stone-700 dark:text-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50">
+                  className="shrink-0 rounded-lg border border-line bg-surface px-1.5 py-1.5 text-[11px] text-content-secondary focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50">
                   <option value="bearer">{t('mcp.connectAuth.schemeBearer')}</option>
                   <option value="raw">{t('mcp.connectAuth.schemeRaw')}</option>
                 </select>
@@ -417,7 +409,7 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
                 data-1p-ignore
                 data-lpignore="true"
                 data-form-type="other"
-                className="w-full rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1.5 text-xs text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
+                className="w-full rounded-lg border border-line bg-surface px-2 py-1.5 text-xs text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
               />
             </div>
           ))}
diff --git a/app/src/components/channels/mcp/InstallDialog.tsx b/app/src/components/channels/mcp/InstallDialog.tsx
index bc0a26f07..a17c1cd70 100644
--- a/app/src/components/channels/mcp/InstallDialog.tsx
+++ b/app/src/components/channels/mcp/InstallDialog.tsx
@@ -166,7 +166,7 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
 
   if (loadingDetail) {
     return (
-      <div className="py-10 text-center text-sm text-stone-400 dark:text-neutral-500">
+      <div className="py-10 text-center text-sm text-content-faint">
         {t('mcp.install.loadingDetail')}
       </div>
     );
@@ -182,7 +182,7 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
           variant="tertiary"
           size="sm"
           onClick={onCancel}
-          className="text-stone-500 dark:text-neutral-400 hover:underline">
+          className="text-content-muted hover:underline">
           {t('mcp.install.back')}
         </Button>
       </div>
@@ -203,7 +203,7 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
           variant="tertiary"
           size="xs"
           onClick={onCancel}
-          className="text-stone-500 dark:text-neutral-400 hover:underline">
+          className="text-content-muted hover:underline">
           ← {t('mcp.install.back')}
         </Button>
 
@@ -213,7 +213,7 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
             <img
               src={detail.icon_url}
               alt=""
-              className="w-14 h-14 rounded-lg shrink-0 object-contain bg-white dark:bg-neutral-900 border border-stone-100 dark:border-neutral-800"
+              className="w-14 h-14 rounded-lg shrink-0 object-contain bg-surface border border-line-subtle"
             />
           ) : (
             <div className="w-14 h-14 rounded-lg shrink-0 bg-primary-100 dark:bg-primary-500/20 flex items-center justify-center text-2xl">
@@ -221,11 +221,9 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
             </div>
           )}
           <div className="min-w-0 flex-1">
-            <h3 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
-              {detail.display_name}
-            </h3>
+            <h3 className="text-lg font-semibold text-content">{detail.display_name}</h3>
             {author && (
-              <p className="text-sm text-stone-500 dark:text-neutral-400 mt-0.5">
+              <p className="text-sm text-content-muted mt-0.5">
                 {t('mcp.install.by')} {author}
               </p>
             )}
@@ -235,14 +233,14 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
         {/* Stats badges */}
         <div className="flex flex-wrap gap-2">
           {transport && (
-            <span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300">
+            <span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium bg-surface-subtle text-content-secondary">
               {transport === 'stdio'
                 ? t('mcp.install.transportLocal')
                 : t('mcp.install.transportRemote')}
             </span>
           )}
           {detail.use_count != null && detail.use_count > 0 && (
-            <span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300">
+            <span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium bg-surface-subtle text-content-secondary">
               {t('mcp.install.useCount').replace('{count}', formatUseCount(detail.use_count))}
             </span>
           )}
@@ -260,35 +258,29 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
 
         {/* Description */}
         {detail.description && (
-          <div className="text-sm text-stone-600 dark:text-neutral-300 leading-relaxed whitespace-pre-line">
+          <div className="text-sm text-content-secondary leading-relaxed whitespace-pre-line">
             {detail.description}
           </div>
         )}
 
         {/* Connections info */}
         {detail.connections.length > 0 && (
-          <div className="rounded-lg border border-stone-150 dark:border-neutral-700/60 bg-stone-50 dark:bg-neutral-800/40 p-3">
-            <p className="text-xs font-medium text-stone-500 dark:text-neutral-400 mb-2">
+          <div className="rounded-lg border border-stone-150 dark:border-line-strong/60 bg-surface-muted p-3">
+            <p className="text-xs font-medium text-content-muted mb-2">
               {t('mcp.install.connections')}
             </p>
             <div className="space-y-1.5">
               {detail.connections.map((conn, i) => (
-                <div
-                  key={i}
-                  className="flex items-center gap-2 text-xs text-stone-600 dark:text-neutral-300">
+                <div key={i} className="flex items-center gap-2 text-xs text-content-secondary">
                   <span
-                    className={`w-2 h-2 rounded-full shrink-0 ${conn.published ? 'bg-sage-500' : 'bg-stone-300 dark:bg-neutral-600'}`}
+                    className={`w-2 h-2 rounded-full shrink-0 ${conn.published ? 'bg-sage-500' : 'bg-surface-strong'}`}
                   />
                   <span className="font-mono">{conn.type}</span>
                   {conn.published && (
-                    <span className="text-stone-400 dark:text-neutral-500">
-                      ({t('mcp.install.published')})
-                    </span>
+                    <span className="text-content-faint">({t('mcp.install.published')})</span>
                   )}
                   {conn.deployment_url && (
-                    <span className="text-stone-400 dark:text-neutral-500 truncate">
-                      {conn.deployment_url}
-                    </span>
+                    <span className="text-content-faint truncate">{conn.deployment_url}</span>
                   )}
                 </div>
               ))}
@@ -353,7 +345,7 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
           setStep('detail');
           setInstallError(null);
         }}
-        className="text-stone-500 dark:text-neutral-400 hover:underline">
+        className="text-content-muted hover:underline">
         ← {detail.display_name}
       </Button>
 
@@ -363,14 +355,14 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
           <img
             src={detail.icon_url}
             alt=""
-            className="w-8 h-8 rounded shrink-0 object-contain bg-white dark:bg-neutral-900"
+            className="w-8 h-8 rounded shrink-0 object-contain bg-surface"
           />
         ) : (
           <div className="w-8 h-8 rounded shrink-0 bg-primary-100 dark:bg-primary-500/20 flex items-center justify-center text-sm">
             🔌
           </div>
         )}
-        <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+        <h3 className="text-base font-semibold text-content">
           {t('mcp.install.configureTitle').replace('{name}', detail.display_name)}
         </h3>
       </div>
@@ -378,14 +370,14 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
       {/* Env var inputs */}
       {hasEnvKeys && (
         <div className="space-y-3">
-          <p className="text-xs font-medium text-stone-700 dark:text-neutral-300">
+          <p className="text-xs font-medium text-content-secondary">
             {t('mcp.install.requiredEnv')}
           </p>
           {detail.required_env_keys!.map(key => (
             <div key={key} className="space-y-1">
               <label
                 htmlFor={`env-${key}`}
-                className="block text-xs font-medium text-stone-600 dark:text-neutral-400 font-mono">
+                className="block text-xs font-medium text-content-secondary font-mono">
                 {key}
               </label>
               <div className="flex gap-2">
@@ -396,7 +388,7 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
                   onChange={e => handleEnvChange(key, e.target.value)}
                   placeholder={t('mcp.install.enterValue').replace('{key}', key)}
                   disabled={installing}
-                  className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
+                  className="flex-1 rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
                 />
                 <Button
                   variant="secondary"
@@ -417,14 +409,14 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
         <button
           type="button"
           onClick={() => setShowAdvanced(!showAdvanced)}
-          className="text-xs text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 transition-colors">
+          className="text-xs text-content-muted hover:text-content-secondary transition-colors">
           {showAdvanced ? '▾' : '▸'} {t('mcp.install.advancedConfig')}
         </button>
         {showAdvanced && (
           <div className="mt-2 space-y-1">
             <label
               htmlFor="mcp-config-json"
-              className="block text-xs font-medium text-stone-600 dark:text-neutral-400">
+              className="block text-xs font-medium text-content-secondary">
               {t('mcp.install.configLabel')}
             </label>
             <textarea
@@ -434,7 +426,7 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
               disabled={installing}
               rows={4}
               placeholder={t('mcp.install.configPlaceholder')}
-              className="w-full rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm font-mono text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50 resize-y"
+              className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm font-mono text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50 resize-y"
             />
           </div>
         )}
diff --git a/app/src/components/channels/mcp/InstalledServerDetail.tsx b/app/src/components/channels/mcp/InstalledServerDetail.tsx
index 4763d1888..a487c946c 100644
--- a/app/src/components/channels/mcp/InstalledServerDetail.tsx
+++ b/app/src/components/channels/mcp/InstalledServerDetail.tsx
@@ -221,7 +221,7 @@ const InstalledServerDetail = ({
           <img
             src={server.icon_url}
             alt=""
-            className="w-10 h-10 rounded shrink-0 object-contain bg-white dark:bg-neutral-900 border border-stone-100 dark:border-neutral-800"
+            className="w-10 h-10 rounded shrink-0 object-contain bg-surface border border-line-subtle"
           />
         ) : (
           <div className="w-10 h-10 rounded shrink-0 bg-primary-100 dark:bg-primary-500/20 flex items-center justify-center text-lg">
@@ -230,19 +230,13 @@ const InstalledServerDetail = ({
         )}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 flex-wrap">
-            <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
-              {server.display_name}
-            </h3>
+            <h3 className="text-base font-semibold text-content">{server.display_name}</h3>
             <McpStatusBadge status={status} />
           </div>
           {server.description && (
-            <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
-              {server.description}
-            </p>
+            <p className="text-xs text-content-muted mt-0.5">{server.description}</p>
           )}
-          <p className="text-[11px] text-stone-400 dark:text-neutral-500 mt-1 font-mono">
-            {server.qualified_name}
-          </p>
+          <p className="text-[11px] text-content-faint mt-1 font-mono">{server.qualified_name}</p>
         </div>
       </div>
 
@@ -352,9 +346,7 @@ const InstalledServerDetail = ({
       {visibleEnvKeys.length > 0 && (
         <div className="space-y-1.5">
           <div className="flex items-center justify-between">
-            <p className="text-xs font-medium text-stone-600 dark:text-neutral-400">
-              {t('mcp.detail.envVars')}
-            </p>
+            <p className="text-xs font-medium text-content-secondary">{t('mcp.detail.envVars')}</p>
             <button
               type="button"
               disabled={busy}
@@ -368,22 +360,20 @@ const InstalledServerDetail = ({
               {visibleEnvKeys.map(key => (
                 <span
                   key={key}
-                  className="px-2 py-0.5 text-[11px] font-mono rounded bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 border border-stone-200 dark:border-neutral-700">
+                  className="px-2 py-0.5 text-[11px] font-mono rounded bg-surface-subtle text-content-secondary border border-line">
                   {key}
                 </span>
               ))}
             </div>
           )}
           {reconfigOpen && (
-            <div className="space-y-2 rounded-lg border border-stone-200 dark:border-neutral-800 p-3">
-              <p className="text-[11px] text-stone-500 dark:text-neutral-400">
-                {t('mcp.detail.reconfigureHint')}
-              </p>
+            <div className="space-y-2 rounded-lg border border-line p-3">
+              <p className="text-[11px] text-content-muted">{t('mcp.detail.reconfigureHint')}</p>
               {visibleEnvKeys.map(key => (
                 <div key={key} className="space-y-1">
                   <label
                     htmlFor={`reconfig-${key}`}
-                    className="block text-[11px] font-medium text-stone-600 dark:text-neutral-400">
+                    className="block text-[11px] font-medium text-content-secondary">
                     {key}
                   </label>
                   <div className="flex gap-2">
@@ -396,7 +386,7 @@ const InstalledServerDetail = ({
                       }
                       placeholder={t('mcp.install.enterValue').replace('{key}', key)}
                       disabled={busy}
-                      className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
+                      className="flex-1 rounded-lg border border-line bg-surface px-3 py-1.5 text-xs text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
                     />
                     <Button
                       variant="secondary"
@@ -421,9 +411,7 @@ const InstalledServerDetail = ({
           When connected, each tool gets a "Try" button via `onTryTool`
           that opens the Tool Execution Playground modal below. */}
       <div className="space-y-1">
-        <p className="text-xs font-medium text-stone-600 dark:text-neutral-400">
-          {t('mcp.detail.tools')}
-        </p>
+        <p className="text-xs font-medium text-content-secondary">{t('mcp.detail.tools')}</p>
         <McpToolList
           tools={status === 'connected' ? tools : []}
           onTryTool={status === 'connected' ? setPlaygroundTool : undefined}
diff --git a/app/src/components/channels/mcp/InstalledServerList.tsx b/app/src/components/channels/mcp/InstalledServerList.tsx
index 672b970ce..d577bca09 100644
--- a/app/src/components/channels/mcp/InstalledServerList.tsx
+++ b/app/src/components/channels/mcp/InstalledServerList.tsx
@@ -28,10 +28,10 @@ interface InstalledServerListProps {
 const STATUS_DOT: Record<ServerStatus, string> = {
   connected: 'bg-sage-500',
   connecting: 'bg-amber-400',
-  disconnected: 'bg-stone-300 dark:bg-neutral-600',
+  disconnected: 'bg-surface-strong',
   unauthorized: 'bg-amber-500',
   error: 'bg-coral-500',
-  disabled: 'bg-stone-200 dark:bg-neutral-700',
+  disabled: 'bg-surface-strong',
 };
 
 // i18n keys for the per-status tooltip on the status dot. Reuses the
@@ -91,7 +91,7 @@ const InstalledServerList = ({
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between mb-2">
-        <h3 className="text-xs font-semibold text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
+        <h3 className="text-xs font-semibold text-content-muted uppercase tracking-wide">
           {t('mcp.installed.title')}
         </h3>
         <Button
@@ -105,7 +105,7 @@ const InstalledServerList = ({
 
       {servers.length === 0 ? (
         <div className="flex-1 flex flex-col items-center justify-center text-center gap-3 py-8">
-          <p className="text-sm text-stone-400 dark:text-neutral-500">{t('mcp.installed.empty')}</p>
+          <p className="text-sm text-content-faint">{t('mcp.installed.empty')}</p>
           <Button variant="primary" size="md" onClick={onBrowseCatalog}>
             {t('mcp.installed.browseCatalog')}
           </Button>
@@ -113,10 +113,7 @@ const InstalledServerList = ({
       ) : (
         <>
           {isFiltering && (
-            <p
-              role="status"
-              aria-live="polite"
-              className="mb-2 text-[11px] text-stone-500 dark:text-neutral-400">
+            <p role="status" aria-live="polite" className="mb-2 text-[11px] text-content-muted">
               {t('mcp.installed.search.countMatches')
                 .replace('{shown}', String(filteredServers.length))
                 .replace('{total}', String(servers.length))}
@@ -124,7 +121,7 @@ const InstalledServerList = ({
           )}
           {filteredServers.length === 0 ? (
             <div className="flex-1 flex items-center justify-center text-center py-8">
-              <p className="text-sm text-stone-400 dark:text-neutral-500">
+              <p className="text-sm text-content-faint">
                 {t('mcp.installed.search.noMatches').replace('{query}', filter.trim())}
               </p>
             </div>
@@ -146,18 +143,18 @@ const InstalledServerList = ({
                       className={`w-full flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-left transition-colors ${
                         isSelected
                           ? 'bg-primary-50 dark:bg-primary-500/15 border border-primary-200 dark:border-primary-500/30'
-                          : 'hover:bg-stone-50 dark:hover:bg-neutral-800/60 border border-transparent'
+                          : 'hover:bg-surface-hover border border-transparent'
                       }`}>
                       <span
                         className={`w-2 h-2 rounded-full shrink-0 ${STATUS_DOT[status]}`}
                         title={t(STATUS_I18N_KEYS[status])}
                       />
                       <span className="flex-1 min-w-0">
-                        <span className="block text-sm font-medium text-stone-800 dark:text-neutral-100 truncate">
+                        <span className="block text-sm font-medium text-content truncate">
                           {server.display_name}
                         </span>
                         {status === 'connected' && toolCount > 0 && (
-                          <span className="block text-[11px] text-stone-400 dark:text-neutral-500">
+                          <span className="block text-[11px] text-content-faint">
                             {t(
                               toolCount === 1
                                 ? 'mcp.installed.toolSingular'
diff --git a/app/src/components/channels/mcp/McpCatalogBrowser.tsx b/app/src/components/channels/mcp/McpCatalogBrowser.tsx
index dd4e0a138..9b669ff87 100644
--- a/app/src/components/channels/mcp/McpCatalogBrowser.tsx
+++ b/app/src/components/channels/mcp/McpCatalogBrowser.tsx
@@ -93,7 +93,7 @@ const McpCatalogBrowser = ({ onSelectInstall }: McpCatalogBrowserProps) => {
           placeholder={t('mcp.catalog.searchPlaceholder')}
           value={query}
           onChange={e => setQuery(e.target.value)}
-          className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
+          className="flex-1 rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
         />
       </div>
 
@@ -104,11 +104,9 @@ const McpCatalogBrowser = ({ onSelectInstall }: McpCatalogBrowserProps) => {
       )}
 
       {loading && servers.length === 0 ? (
-        <div className="text-sm text-stone-400 dark:text-neutral-500 py-6 text-center">
-          {t('common.loading')}
-        </div>
+        <div className="text-sm text-content-faint py-6 text-center">{t('common.loading')}</div>
       ) : servers.length === 0 ? (
-        <div className="text-sm text-stone-400 dark:text-neutral-500 py-6 text-center">
+        <div className="text-sm text-content-faint py-6 text-center">
           {query
             ? t('mcp.catalog.noResultsFor').replace('{query}', query)
             : t('mcp.catalog.noResults')}
diff --git a/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx b/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx
index b0bb62d27..c5d9f56b2 100644
--- a/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx
+++ b/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx
@@ -133,9 +133,9 @@ const McpConnectionHealthToolbar = ({
   };
 
   return (
-    <div className="mb-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2.5 py-2">
+    <div className="mb-2 rounded-lg border border-line bg-surface px-2.5 py-2">
       <div className="flex items-center justify-between gap-2 mb-1.5">
-        <span className="text-[10px] font-semibold text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
+        <span className="text-[10px] font-semibold text-content-muted uppercase tracking-wide">
           {t('mcp.health.title')}
         </span>
         <div className="flex items-center gap-2">
@@ -161,7 +161,7 @@ const McpConnectionHealthToolbar = ({
                 '{count}',
                 String(counts.connectedCount)
               )}
-              className="text-[10px] font-medium text-stone-600 dark:text-neutral-300 hover:underline disabled:opacity-50 disabled:no-underline">
+              className="text-[10px] font-medium text-content-secondary hover:underline disabled:opacity-50 disabled:no-underline">
               {t('mcp.health.disconnectAll').replace('{count}', String(counts.connectedCount))}
             </button>
           )}
@@ -171,7 +171,7 @@ const McpConnectionHealthToolbar = ({
         role="status"
         aria-live="polite"
         aria-label={t('mcp.health.summaryAria')}
-        className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px] text-stone-600 dark:text-neutral-300">
+        className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px] text-content-secondary">
         <span className="inline-flex items-center gap-1">
           <span className="w-1.5 h-1.5 rounded-full bg-sage-500" aria-hidden="true" />
           <span>
@@ -193,10 +193,7 @@ const McpConnectionHealthToolbar = ({
           </span>
         )}
         <span className="inline-flex items-center gap-1">
-          <span
-            className="w-1.5 h-1.5 rounded-full bg-stone-300 dark:bg-neutral-600"
-            aria-hidden="true"
-          />
+          <span className="w-1.5 h-1.5 rounded-full bg-surface-strong" aria-hidden="true" />
           <span>
             {t('mcp.health.disconnectedCount').replace('{count}', String(counts.disconnectedCount))}
           </span>
@@ -218,15 +215,11 @@ const McpConnectionHealthToolbar = ({
           aria-labelledby="mcp-disconnect-all-title"
           aria-describedby="mcp-disconnect-all-body"
           className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
-          <div className="bg-white dark:bg-neutral-900 rounded-xl shadow-xl max-w-sm w-full p-4">
-            <h2
-              id="mcp-disconnect-all-title"
-              className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-2">
+          <div className="bg-surface rounded-xl shadow-xl max-w-sm w-full p-4">
+            <h2 id="mcp-disconnect-all-title" className="text-sm font-semibold text-content mb-2">
               {t('mcp.health.disconnectConfirm.title')}
             </h2>
-            <p
-              id="mcp-disconnect-all-body"
-              className="text-xs text-stone-600 dark:text-neutral-300 mb-4">
+            <p id="mcp-disconnect-all-body" className="text-xs text-content-secondary mb-4">
               {t('mcp.health.disconnectConfirm.body').replace(
                 '{count}',
                 String(counts.connectedCount)
diff --git a/app/src/components/channels/mcp/McpInventoryExportTab.tsx b/app/src/components/channels/mcp/McpInventoryExportTab.tsx
index f571261b8..2c2713179 100644
--- a/app/src/components/channels/mcp/McpInventoryExportTab.tsx
+++ b/app/src/components/channels/mcp/McpInventoryExportTab.tsx
@@ -31,7 +31,7 @@ const McpInventoryExportTab = ({ servers }: McpInventoryExportTabProps) => {
 
   if (servers.length === 0) {
     return (
-      <p className="text-sm text-stone-500 dark:text-neutral-400 py-6 text-center">
+      <p className="text-sm text-content-muted py-6 text-center">
         {t('mcp.inventory.export.empty')}
       </p>
     );
@@ -68,12 +68,12 @@ const McpInventoryExportTab = ({ servers }: McpInventoryExportTabProps) => {
     <div className="space-y-3">
       <div
         role="note"
-        className="rounded-lg border border-sage-200 dark:border-sage-500/30 bg-sage-50 dark:bg-sage-500/10 px-3 py-2 text-xs text-stone-700 dark:text-neutral-200">
+        className="rounded-lg border border-sage-200 dark:border-sage-500/30 bg-sage-50 dark:bg-sage-500/10 px-3 py-2 text-xs text-content-secondary">
         <p className="font-medium mb-1">{t('mcp.inventory.export.privacyTitle')}</p>
         <p>{t('mcp.inventory.export.privacyBody')}</p>
       </div>
       <div className="flex items-center justify-between gap-2">
-        <p className="text-xs text-stone-500 dark:text-neutral-400">
+        <p className="text-xs text-content-muted">
           {t('mcp.inventory.export.serverCount').replace('{count}', String(servers.length))}
         </p>
         <div className="flex items-center gap-2">
@@ -97,7 +97,7 @@ const McpInventoryExportTab = ({ servers }: McpInventoryExportTabProps) => {
       </div>
       <pre
         data-testid="mcp-inventory-export-pre"
-        className="max-h-80 overflow-auto rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-950 p-3 text-[11px] font-mono text-stone-800 dark:text-neutral-100 whitespace-pre-wrap break-words">
+        className="max-h-80 overflow-auto rounded-lg border border-line bg-surface-muted p-3 text-[11px] font-mono text-content whitespace-pre-wrap break-words">
         {serialized}
       </pre>
     </div>
diff --git a/app/src/components/channels/mcp/McpInventoryImportTab.tsx b/app/src/components/channels/mcp/McpInventoryImportTab.tsx
index a4cce43db..dea41d7b7 100644
--- a/app/src/components/channels/mcp/McpInventoryImportTab.tsx
+++ b/app/src/components/channels/mcp/McpInventoryImportTab.tsx
@@ -152,7 +152,7 @@ const McpInventoryImportTab = ({
     <div className="space-y-3">
       <div
         role="note"
-        className="rounded-lg border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 px-3 py-2 text-xs text-stone-700 dark:text-neutral-200">
+        className="rounded-lg border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 px-3 py-2 text-xs text-content-secondary">
         <p className="font-medium mb-1">{t('mcp.inventory.import.trustTitle')}</p>
         <p>{t('mcp.inventory.import.trustBody')}</p>
       </div>
@@ -160,7 +160,7 @@ const McpInventoryImportTab = ({
       <div className="space-y-1.5">
         <label
           htmlFor="mcp-inventory-import-textarea"
-          className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+          className="text-xs font-medium text-content-secondary">
           {t('mcp.inventory.import.pasteLabel')}
         </label>
         <textarea
@@ -176,7 +176,7 @@ const McpInventoryImportTab = ({
           rows={6}
           placeholder={t('mcp.inventory.import.pastePlaceholder')}
           aria-label={t('mcp.inventory.import.pasteLabel')}
-          className="w-full rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-xs font-mono text-stone-800 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-primary-400 resize-y"
+          className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-xs font-mono text-content focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-primary-400 resize-y"
         />
       </div>
 
@@ -222,53 +222,48 @@ const McpInventoryImportTab = ({
         <section aria-labelledby="mcp-inventory-import-preview-heading" className="space-y-2">
           <h3
             id="mcp-inventory-import-preview-heading"
-            className="text-xs font-semibold text-stone-700 dark:text-neutral-200">
+            className="text-xs font-semibold text-content-secondary">
             {t('mcp.inventory.import.previewHeading')}
           </h3>
-          <div
-            role="status"
-            aria-live="polite"
-            className="text-[11px] text-stone-500 dark:text-neutral-400">
+          <div role="status" aria-live="polite" className="text-[11px] text-content-muted">
             {t('mcp.inventory.import.previewCounts')
               .replace('{total}', String(stats.total))
               .replace('{newly}', String(stats.newly))
               .replace('{already}', String(stats.already))}
           </div>
-          <div className="text-[10px] text-stone-400 dark:text-neutral-500">
+          <div className="text-[10px] text-content-faint">
             {t('mcp.inventory.import.exportedFrom').replace('{exporter}', manifest.exported_by)} ·{' '}
             {t('mcp.inventory.import.exportedAt').replace('{when}', manifest.exported_at)}
           </div>
           {classified.length === 0 ? (
-            <p className="text-xs text-stone-500 dark:text-neutral-400">
-              {t('mcp.inventory.import.previewEmpty')}
-            </p>
+            <p className="text-xs text-content-muted">{t('mcp.inventory.import.previewEmpty')}</p>
           ) : (
             <ul className="space-y-1">
               {classified.map(({ entry, status }) => (
                 <li
                   key={entry.qualified_name}
-                  className="flex items-center justify-between gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-2">
+                  className="flex items-center justify-between gap-2 rounded-lg border border-line px-3 py-2">
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-2">
                       <span
                         className={`inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-semibold uppercase tracking-wider shrink-0 ${
                           status === 'new'
                             ? 'bg-sage-100 dark:bg-sage-500/20 text-sage-700 dark:text-sage-300'
-                            : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-400'
+                            : 'bg-surface-subtle text-content-secondary'
                         }`}>
                         {status === 'new'
                           ? t('mcp.inventory.import.statusNew')
                           : t('mcp.inventory.import.statusAlreadyInstalled')}
                       </span>
-                      <span className="text-sm font-medium text-stone-800 dark:text-neutral-100 truncate">
+                      <span className="text-sm font-medium text-content truncate">
                         {entry.display_name}
                       </span>
                     </div>
-                    <p className="text-[11px] font-mono text-stone-400 dark:text-neutral-500 truncate">
+                    <p className="text-[11px] font-mono text-content-faint truncate">
                       {entry.qualified_name}
                     </p>
                     {entry.env_keys.length > 0 && (
-                      <p className="text-[10px] text-stone-500 dark:text-neutral-400 mt-0.5">
+                      <p className="text-[10px] text-content-muted mt-0.5">
                         {t('mcp.inventory.import.envKeysLabel')}: {entry.env_keys.join(', ')}
                       </p>
                     )}
@@ -286,7 +281,7 @@ const McpInventoryImportTab = ({
                       {t('mcp.inventory.import.install')}
                     </Button>
                   ) : (
-                    <span className="shrink-0 text-[10px] text-stone-400 dark:text-neutral-500 italic">
+                    <span className="shrink-0 text-[10px] text-content-faint italic">
                       {t('mcp.inventory.import.skipped')}
                     </span>
                   )}
diff --git a/app/src/components/channels/mcp/McpInventoryPanel.tsx b/app/src/components/channels/mcp/McpInventoryPanel.tsx
index 66749ebc2..08928789c 100644
--- a/app/src/components/channels/mcp/McpInventoryPanel.tsx
+++ b/app/src/components/channels/mcp/McpInventoryPanel.tsx
@@ -65,17 +65,13 @@ const McpInventoryPanel = ({ servers, onInstallServer, onClose }: McpInventoryPa
         if (event.target === event.currentTarget) onClose();
       }}
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4 py-6 overflow-y-auto">
-      <div className="bg-white dark:bg-neutral-900 rounded-xl shadow-xl max-w-3xl w-full p-5 max-h-full overflow-y-auto">
+      <div className="bg-surface rounded-xl shadow-xl max-w-3xl w-full p-5 max-h-full overflow-y-auto">
         <div className="flex items-start justify-between gap-3 mb-3">
           <div>
-            <h2
-              id="mcp-inventory-panel-title"
-              className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+            <h2 id="mcp-inventory-panel-title" className="text-base font-semibold text-content">
               {t('mcp.inventory.title')}
             </h2>
-            <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
-              {t('mcp.inventory.subtitle')}
-            </p>
+            <p className="text-xs text-content-muted mt-1">{t('mcp.inventory.subtitle')}</p>
           </div>
           <Button
             iconOnly
@@ -100,7 +96,7 @@ const McpInventoryPanel = ({ servers, onInstallServer, onClose }: McpInventoryPa
         <div
           role="tablist"
           aria-label={t('mcp.inventory.tablistAria')}
-          className="flex gap-1 border-b border-stone-200 dark:border-neutral-800 mb-4">
+          className="flex gap-1 border-b border-line mb-4">
           <button
             type="button"
             role="tab"
@@ -112,7 +108,7 @@ const McpInventoryPanel = ({ servers, onInstallServer, onClose }: McpInventoryPa
             className={`-mb-px px-3 py-1.5 text-xs font-medium border-b-2 transition-colors ${
               tab === 'export'
                 ? 'border-primary-500 text-primary-600 dark:text-primary-300'
-                : 'border-transparent text-stone-500 dark:text-neutral-400 hover:text-stone-800 dark:hover:text-neutral-200'
+                : 'border-transparent text-content-muted hover:text-content dark:hover:text-neutral-200'
             }`}>
             {t('mcp.inventory.tab.export')}
           </button>
@@ -127,7 +123,7 @@ const McpInventoryPanel = ({ servers, onInstallServer, onClose }: McpInventoryPa
             className={`-mb-px px-3 py-1.5 text-xs font-medium border-b-2 transition-colors ${
               tab === 'import'
                 ? 'border-primary-500 text-primary-600 dark:text-primary-300'
-                : 'border-transparent text-stone-500 dark:text-neutral-400 hover:text-stone-800 dark:hover:text-neutral-200'
+                : 'border-transparent text-content-muted hover:text-content dark:hover:text-neutral-200'
             }`}>
             {t('mcp.inventory.tab.import')}
           </button>
diff --git a/app/src/components/channels/mcp/McpServerCard.tsx b/app/src/components/channels/mcp/McpServerCard.tsx
index 4b6ce97af..e2095bef3 100644
--- a/app/src/components/channels/mcp/McpServerCard.tsx
+++ b/app/src/components/channels/mcp/McpServerCard.tsx
@@ -22,12 +22,12 @@ const McpServerCard = ({ server, onSelect }: McpServerCardProps) => {
     <button
       type="button"
       onClick={() => onSelect(server.qualified_name)}
-      className="w-full text-left rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 flex items-start gap-3 hover:border-primary-300 dark:hover:border-primary-500/40 hover:bg-stone-100/50 dark:hover:bg-neutral-800 transition-colors cursor-pointer">
+      className="w-full text-left rounded-lg border border-line bg-surface-muted p-3 flex items-start gap-3 hover:border-primary-300 dark:hover:border-primary-500/40 hover:bg-surface-subtle/50 dark:hover:bg-surface-muted transition-colors cursor-pointer">
       {server.icon_url ? (
         <img
           src={server.icon_url}
           alt=""
-          className="w-8 h-8 rounded shrink-0 object-contain bg-white dark:bg-neutral-900"
+          className="w-8 h-8 rounded shrink-0 object-contain bg-surface"
         />
       ) : (
         <div className="w-8 h-8 rounded shrink-0 bg-primary-100 dark:bg-primary-500/20 flex items-center justify-center text-sm">
@@ -35,13 +35,9 @@ const McpServerCard = ({ server, onSelect }: McpServerCardProps) => {
         </div>
       )}
       <div className="flex-1 min-w-0">
-        <p className="text-sm font-medium text-stone-900 dark:text-neutral-100 truncate">
-          {server.display_name}
-        </p>
+        <p className="text-sm font-medium text-content truncate">{server.display_name}</p>
         {server.description && (
-          <p className="text-xs text-stone-500 dark:text-neutral-400 line-clamp-4 mt-0.5">
-            {server.description}
-          </p>
+          <p className="text-xs text-content-muted line-clamp-4 mt-0.5">{server.description}</p>
         )}
       </div>
     </button>
diff --git a/app/src/components/channels/mcp/McpServerSearch.tsx b/app/src/components/channels/mcp/McpServerSearch.tsx
index be404b8f2..d112f676b 100644
--- a/app/src/components/channels/mcp/McpServerSearch.tsx
+++ b/app/src/components/channels/mcp/McpServerSearch.tsx
@@ -28,14 +28,14 @@ const McpServerSearch = ({ value, onChange }: McpServerSearchProps) => {
         onChange={e => onChange(e.target.value)}
         placeholder={t('mcp.installed.search.placeholder')}
         aria-label={t('mcp.installed.search.inputAria')}
-        className="w-full rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 pr-7 text-xs text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-primary-400"
+        className="w-full rounded-lg border border-line bg-surface px-3 py-1.5 pr-7 text-xs text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-primary-400"
       />
       {hasValue && (
         <button
           type="button"
           onClick={() => onChange('')}
           aria-label={t('mcp.installed.search.clearAria')}
-          className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-stone-400 hover:text-stone-700 dark:text-neutral-500 dark:hover:text-neutral-200 transition-colors">
+          className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-content-faint hover:text-content-secondary transition-colors">
           <svg
             className="w-3 h-3"
             fill="none"
diff --git a/app/src/components/channels/mcp/McpServersTab.tsx b/app/src/components/channels/mcp/McpServersTab.tsx
index bc42c1ee5..bea68fabd 100644
--- a/app/src/components/channels/mcp/McpServersTab.tsx
+++ b/app/src/components/channels/mcp/McpServersTab.tsx
@@ -33,10 +33,10 @@ type FilterChip = 'all' | 'installed' | 'registry';
 const STATUS_DOT: Record<ServerStatus, string> = {
   connected: 'bg-sage-500',
   connecting: 'bg-amber-400',
-  disconnected: 'bg-stone-300 dark:bg-neutral-600',
+  disconnected: 'bg-surface-strong',
   unauthorized: 'bg-amber-500',
   error: 'bg-coral-500',
-  disabled: 'bg-stone-200 dark:bg-neutral-700',
+  disabled: 'bg-surface-strong',
 };
 
 const McpServersTab = () => {
@@ -217,9 +217,7 @@ const McpServersTab = () => {
 
   if (loading) {
     return (
-      <div className="py-10 text-center text-sm text-stone-400 dark:text-neutral-500">
-        {t('mcp.tab.loading')}
-      </div>
+      <div className="py-10 text-center text-sm text-content-faint">{t('mcp.tab.loading')}</div>
     );
   }
 
@@ -294,7 +292,7 @@ const McpServersTab = () => {
           onChange={e => setSearchQuery(e.target.value)}
           placeholder={t('mcp.catalog.searchPlaceholder')}
           aria-label={t('mcp.catalog.searchAria')}
-          className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
+          className="flex-1 rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
         />
         <Button
           variant="secondary"
@@ -331,22 +329,22 @@ const McpServersTab = () => {
       )}
 
       {/* Table */}
-      <div className="rounded-lg border border-stone-200 dark:border-neutral-800 overflow-hidden">
+      <div className="rounded-lg border border-line overflow-hidden">
         <table className="w-full text-sm">
           <thead>
-            <tr className="border-b border-stone-100 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-900">
-              <th className="text-left px-4 py-2.5 text-xs font-medium text-stone-500 dark:text-neutral-400">
+            <tr className="border-b border-line-subtle bg-surface-muted">
+              <th className="text-left px-4 py-2.5 text-xs font-medium text-content-muted">
                 {t('mcp.tab.column.name')}
               </th>
-              <th className="text-left px-4 py-2.5 text-xs font-medium text-stone-500 dark:text-neutral-400 hidden sm:table-cell w-36">
+              <th className="text-left px-4 py-2.5 text-xs font-medium text-content-muted hidden sm:table-cell w-36">
                 {t('mcp.tab.column.author')}
               </th>
-              <th className="text-right px-4 py-2.5 text-xs font-medium text-stone-500 dark:text-neutral-400 w-28">
+              <th className="text-right px-4 py-2.5 text-xs font-medium text-content-muted w-28">
                 {t('mcp.tab.column.action')}
               </th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-stone-100 dark:divide-neutral-800">
+          <tbody className="divide-y divide-line-subtle dark:divide-neutral-800">
             {/* Installed servers */}
             {(activeChip === 'all' || activeChip === 'installed') &&
               filteredInstalled.map(server => {
@@ -355,7 +353,7 @@ const McpServersTab = () => {
                 return (
                   <tr
                     key={`installed-${server.server_id}`}
-                    className="hover:bg-stone-50 dark:hover:bg-neutral-800/40 cursor-pointer transition-colors"
+                    className="hover:bg-surface-muted dark:hover:bg-surface-muted/40 cursor-pointer transition-colors"
                     tabIndex={0}
                     role="button"
                     aria-label={t('mcp.tab.aria.viewDetails').replace(
@@ -376,11 +374,11 @@ const McpServersTab = () => {
                           title={status}
                         />
                         <div className="min-w-0">
-                          <span className="font-medium text-stone-900 dark:text-neutral-100 truncate block">
+                          <span className="font-medium text-content truncate block">
                             {server.display_name}
                           </span>
                           {server.description && (
-                            <span className="text-xs text-stone-400 dark:text-neutral-500 line-clamp-4 block">
+                            <span className="text-xs text-content-faint line-clamp-4 block">
                               {server.description}
                             </span>
                           )}
@@ -388,7 +386,7 @@ const McpServersTab = () => {
                       </div>
                     </td>
                     <td className="px-4 py-3 hidden sm:table-cell">
-                      <span className="text-xs text-stone-500 dark:text-neutral-400 truncate block">
+                      <span className="text-xs text-content-muted truncate block">
                         {deriveAuthor(server.qualified_name) ?? '—'}
                       </span>
                     </td>
@@ -406,7 +404,7 @@ const McpServersTab = () => {
               filteredCatalog.map(server => (
                 <tr
                   key={`catalog-${server.qualified_name}`}
-                  className="hover:bg-stone-50 dark:hover:bg-neutral-800/40 cursor-pointer transition-colors"
+                  className="hover:bg-surface-muted dark:hover:bg-surface-muted/40 cursor-pointer transition-colors"
                   tabIndex={0}
                   role="button"
                   aria-label={t('mcp.tab.aria.installServer').replace(
@@ -434,11 +432,11 @@ const McpServersTab = () => {
                         </span>
                       )}
                       <div className="min-w-0">
-                        <span className="font-medium text-stone-900 dark:text-neutral-100 truncate block">
+                        <span className="font-medium text-content truncate block">
                           {server.display_name}
                         </span>
                         {server.description && (
-                          <span className="text-xs text-stone-400 dark:text-neutral-500 line-clamp-4 block">
+                          <span className="text-xs text-content-faint line-clamp-4 block">
                             {server.description}
                           </span>
                         )}
@@ -446,7 +444,7 @@ const McpServersTab = () => {
                     </div>
                   </td>
                   <td className="px-4 py-3 hidden sm:table-cell">
-                    <span className="text-xs text-stone-500 dark:text-neutral-400 truncate block">
+                    <span className="text-xs text-content-muted truncate block">
                       {deriveAuthor(server.qualified_name) ?? '—'}
                     </span>
                   </td>
@@ -464,14 +462,14 @@ const McpServersTab = () => {
         {activeChip === 'installed' && filteredInstalled.length === 0 && (
           <div
             data-testid="mcp-installed-empty"
-            className="py-8 text-center text-sm text-stone-400 dark:text-neutral-500">
+            className="py-8 text-center text-sm text-content-faint">
             {t('mcp.installed.empty')}
           </div>
         )}
         {activeChip === 'registry' && filteredCatalog.length === 0 && !catalogLoading && (
           <div
             data-testid="mcp-catalog-empty"
-            className="py-8 text-center text-sm text-stone-400 dark:text-neutral-500">
+            className="py-8 text-center text-sm text-content-faint">
             {searchQuery
               ? t('mcp.catalog.noResultsFor').replace('{query}', searchQuery)
               : t('mcp.catalog.noResults')}
@@ -483,7 +481,7 @@ const McpServersTab = () => {
           !catalogLoading && (
             <div
               data-testid="mcp-catalog-empty"
-              className="py-8 text-center text-sm text-stone-400 dark:text-neutral-500">
+              className="py-8 text-center text-sm text-content-faint">
               {searchQuery
                 ? t('mcp.catalog.noResultsFor').replace('{query}', searchQuery)
                 : t('mcp.catalog.noResults')}
@@ -492,14 +490,12 @@ const McpServersTab = () => {
 
         {/* Loading / load more */}
         {catalogLoading && (
-          <div className="py-4 text-center text-xs text-stone-400 dark:text-neutral-500">
-            {t('common.loading')}
-          </div>
+          <div className="py-4 text-center text-xs text-content-faint">{t('common.loading')}</div>
         )}
         {!catalogLoading &&
           catalogPage < catalogTotalPages &&
           (activeChip === 'all' || activeChip === 'registry') && (
-            <div className="py-3 text-center border-t border-stone-100 dark:border-neutral-800">
+            <div className="py-3 text-center border-t border-line-subtle">
               <Button
                 variant="tertiary"
                 size="xs"
diff --git a/app/src/components/channels/mcp/McpStatusBadge.tsx b/app/src/components/channels/mcp/McpStatusBadge.tsx
index 6d86b38b7..2d02c0606 100644
--- a/app/src/components/channels/mcp/McpStatusBadge.tsx
+++ b/app/src/components/channels/mcp/McpStatusBadge.tsx
@@ -18,8 +18,7 @@ const STATUS_META: Record<ServerStatus, { i18nKey: string; className: string }>
   },
   disconnected: {
     i18nKey: 'channels.status.disconnected',
-    className:
-      'bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400 border-stone-200 dark:border-neutral-700',
+    className: 'bg-surface-subtle text-content-muted border-line',
   },
   unauthorized: {
     i18nKey: 'mcp.status.unauthorized',
@@ -31,8 +30,7 @@ const STATUS_META: Record<ServerStatus, { i18nKey: string; className: string }>
   },
   disabled: {
     i18nKey: 'mcp.status.disabled',
-    className:
-      'bg-stone-100 dark:bg-neutral-800 text-stone-400 dark:text-neutral-500 border-stone-200 dark:border-neutral-700 italic',
+    className: 'bg-surface-subtle text-content-faint border-line italic',
   },
 };
 
diff --git a/app/src/components/channels/mcp/McpToolList.tsx b/app/src/components/channels/mcp/McpToolList.tsx
index 33eb44140..e25cc12d7 100644
--- a/app/src/components/channels/mcp/McpToolList.tsx
+++ b/app/src/components/channels/mcp/McpToolList.tsx
@@ -25,9 +25,7 @@ const McpToolList = ({ tools, onTryTool }: McpToolListProps) => {
   const safeTools = tools ?? [];
 
   if (safeTools.length === 0) {
-    return (
-      <p className="text-xs text-stone-400 dark:text-neutral-500">{t('mcp.toolList.noTools')}</p>
-    );
+    return <p className="text-xs text-content-faint">{t('mcp.toolList.noTools')}</p>;
   }
 
   return (
@@ -35,7 +33,7 @@ const McpToolList = ({ tools, onTryTool }: McpToolListProps) => {
       <button
         type="button"
         onClick={() => setExpanded(prev => !prev)}
-        className="flex items-center gap-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:text-stone-900 dark:hover:text-neutral-100">
+        className="flex items-center gap-1.5 text-xs font-medium text-content-secondary hover:text-content">
         <span className={`transition-transform ${expanded ? 'rotate-90' : ''}`} aria-hidden="true">
           ▶
         </span>
@@ -45,11 +43,11 @@ const McpToolList = ({ tools, onTryTool }: McpToolListProps) => {
       </button>
 
       {expanded && (
-        <ul className="mt-2 space-y-1 pl-4 border-l-2 border-stone-100 dark:border-neutral-800">
+        <ul className="mt-2 space-y-1 pl-4 border-l-2 border-line-subtle">
           {safeTools.map(tool => (
             <li key={tool.name} className="space-y-0.5">
               <div className="flex items-start justify-between gap-2">
-                <p className="text-xs font-mono font-medium text-stone-800 dark:text-neutral-100 break-words min-w-0">
+                <p className="text-xs font-mono font-medium text-content break-words min-w-0">
                   {tool.name}
                 </p>
                 {onTryTool && (
@@ -63,9 +61,7 @@ const McpToolList = ({ tools, onTryTool }: McpToolListProps) => {
                 )}
               </div>
               {tool.description && (
-                <p className="text-[11px] text-stone-500 dark:text-neutral-400">
-                  {tool.description}
-                </p>
+                <p className="text-[11px] text-content-muted">{tool.description}</p>
               )}
             </li>
           ))}
diff --git a/app/src/components/channels/mcp/McpToolPlayground.tsx b/app/src/components/channels/mcp/McpToolPlayground.tsx
index 9b7f1ef7d..c19a429cc 100644
--- a/app/src/components/channels/mcp/McpToolPlayground.tsx
+++ b/app/src/components/channels/mcp/McpToolPlayground.tsx
@@ -247,19 +247,17 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
       aria-labelledby="mcp-playground-title"
       onMouseDown={handleBackdropMouseDown}
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4 py-6 overflow-y-auto">
-      <div className="bg-white dark:bg-neutral-900 rounded-xl shadow-xl max-w-2xl w-full p-5 max-h-full overflow-y-auto">
+      <div className="bg-surface rounded-xl shadow-xl max-w-2xl w-full p-5 max-h-full overflow-y-auto">
         {/* Header */}
         <div className="flex items-start justify-between gap-3 mb-3">
           <div className="min-w-0">
             <h2
               id="mcp-playground-title"
-              className="text-base font-semibold text-stone-900 dark:text-neutral-100 font-mono break-words">
+              className="text-base font-semibold text-content font-mono break-words">
               {t('mcp.playground.title').replace('{name}', tool.name)}
             </h2>
             {tool.description && (
-              <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
-                {tool.description}
-              </p>
+              <p className="text-xs text-content-muted mt-1">{tool.description}</p>
             )}
           </div>
           <Button
@@ -287,7 +285,7 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
             type="button"
             onClick={() => setShowSchema(prev => !prev)}
             aria-expanded={showSchema}
-            className="flex items-center gap-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:text-stone-900 dark:hover:text-neutral-100">
+            className="flex items-center gap-1.5 text-xs font-medium text-content-secondary hover:text-content">
             <span
               className={`transition-transform ${showSchema ? 'rotate-90' : ''}`}
               aria-hidden="true">
@@ -298,7 +296,7 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
           {showSchema && (
             <pre
               data-testid="mcp-playground-schema"
-              className="mt-1.5 max-h-40 overflow-auto rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-950 p-2 text-[11px] font-mono text-stone-700 dark:text-neutral-200 whitespace-pre-wrap break-words">
+              className="mt-1.5 max-h-40 overflow-auto rounded-lg border border-line bg-surface-muted p-2 text-[11px] font-mono text-content-secondary whitespace-pre-wrap break-words">
               {schemaJson}
             </pre>
           )}
@@ -309,11 +307,11 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
           <div className="flex items-center justify-between mb-1.5">
             <label
               htmlFor="mcp-playground-args"
-              className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+              className="text-xs font-medium text-content-secondary">
               {t('mcp.playground.argsLabel')}
             </label>
             <div className="flex items-center gap-2">
-              <span className="text-[10px] text-stone-400 dark:text-neutral-500">
+              <span className="text-[10px] text-content-faint">
                 {t('mcp.playground.runShortcut')}
               </span>
               <button
@@ -335,11 +333,9 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
             rows={6}
             aria-label={t('mcp.playground.argsLabel')}
             aria-describedby="mcp-playground-args-help"
-            className="w-full rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-xs font-mono text-stone-800 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-primary-400 resize-y"
+            className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-xs font-mono text-content focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-primary-400 resize-y"
           />
-          <p
-            id="mcp-playground-args-help"
-            className="mt-1 text-[10px] text-stone-400 dark:text-neutral-500">
+          <p id="mcp-playground-args-help" className="mt-1 text-[10px] text-content-faint">
             {t('mcp.playground.argsHelp')}
           </p>
           {parseError && (
@@ -360,7 +356,7 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
         {resultText !== null && (
           <div className="mb-4">
             <div className="flex items-center justify-between mb-1.5">
-              <p className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+              <p className="text-xs font-medium text-content-secondary">
                 {resultIsError ? t('mcp.playground.resultError') : t('mcp.playground.result')}
               </p>
               <button
@@ -380,7 +376,7 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
               className={`max-h-60 overflow-auto rounded-lg border p-2 text-[11px] font-mono whitespace-pre-wrap break-words ${
                 resultIsError
                   ? 'border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 text-coral-700 dark:text-coral-300'
-                  : 'border-sage-200 dark:border-sage-500/30 bg-sage-50 dark:bg-sage-500/10 text-stone-800 dark:text-neutral-100'
+                  : 'border-sage-200 dark:border-sage-500/30 bg-sage-50 dark:bg-sage-500/10 text-content'
               }`}>
               {resultText}
             </pre>
@@ -393,7 +389,7 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
             type="button"
             onClick={() => setShowHistory(prev => !prev)}
             aria-expanded={showHistory}
-            className="flex items-center gap-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:text-stone-900 dark:hover:text-neutral-100">
+            className="flex items-center gap-1.5 text-xs font-medium text-content-secondary hover:text-content">
             <span
               className={`transition-transform ${showHistory ? 'rotate-90' : ''}`}
               aria-hidden="true">
@@ -404,15 +400,13 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
           {showHistory && (
             <div className="mt-1.5">
               {history.length === 0 ? (
-                <p className="text-[11px] text-stone-400 dark:text-neutral-500">
-                  {t('mcp.playground.historyEmpty')}
-                </p>
+                <p className="text-[11px] text-content-faint">{t('mcp.playground.historyEmpty')}</p>
               ) : (
                 <ul className="space-y-1">
                   {history.map((record, idx) => (
                     <li
                       key={`${record.timestamp}-${idx}`}
-                      className="flex items-center justify-between gap-2 rounded border border-stone-200 dark:border-neutral-800 px-2 py-1">
+                      className="flex items-center justify-between gap-2 rounded border border-line px-2 py-1">
                       <div className="min-w-0 flex items-center gap-2">
                         <span
                           className={`w-1.5 h-1.5 rounded-full shrink-0 ${
@@ -420,10 +414,10 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
                           }`}
                           aria-hidden="true"
                         />
-                        <span className="text-[10px] font-mono text-stone-500 dark:text-neutral-400">
+                        <span className="text-[10px] font-mono text-content-muted">
                           {record.timestamp}
                         </span>
-                        <span className="text-[10px] text-stone-600 dark:text-neutral-300 truncate">
+                        <span className="text-[10px] text-content-secondary truncate">
                           {record.argsJson}
                         </span>
                       </div>
diff --git a/app/src/components/chat/ApprovalRequestCard.tsx b/app/src/components/chat/ApprovalRequestCard.tsx
index 8cb443f86..bdd856f70 100644
--- a/app/src/components/chat/ApprovalRequestCard.tsx
+++ b/app/src/components/chat/ApprovalRequestCard.tsx
@@ -74,7 +74,7 @@ export const ApprovalRequestCard: React.FC<Props> = ({ threadId, approval }) =>
             {approval.message || t('chat.approval.fallback')}
           </p>
           {approval.command && (
-            <pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-all rounded border border-amber-200/80 bg-white px-2 py-1.5 font-mono text-xs text-ink shadow-inner dark:border-amber-700 dark:bg-neutral-950 dark:text-neutral-100">
+            <pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-all rounded border border-amber-200/80 bg-surface px-2 py-1.5 font-mono text-xs text-ink shadow-inner dark:border-amber-700 dark:bg-surface-canvas dark:text-content">
               {approval.command}
             </pre>
           )}
diff --git a/app/src/components/chat/ArtifactCard.tsx b/app/src/components/chat/ArtifactCard.tsx
index 687aa245e..540420aa4 100644
--- a/app/src/components/chat/ArtifactCard.tsx
+++ b/app/src/components/chat/ArtifactCard.tsx
@@ -191,7 +191,7 @@ export default function ArtifactCard({ artifact, onRetry }: ArtifactCardProps) {
     <div
       role="group"
       aria-label={t('chat.artifact.aria').replace('{title}', artifact.title)}
-      className="flex flex-col gap-1.5 rounded-xl border border-stone-200 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800 px-3 py-2.5 text-sm text-stone-700 dark:text-neutral-200 max-w-[420px]">
+      className="flex flex-col gap-1.5 rounded-xl border border-line bg-surface-muted px-3 py-2.5 text-sm text-content-secondary max-w-[420px]">
       <div className="flex items-center gap-2.5">
         {artifact.status === 'in_progress' ? (
           <Spinner />
@@ -202,7 +202,7 @@ export default function ArtifactCard({ artifact, onRetry }: ArtifactCardProps) {
         )}
         <div className="flex flex-col min-w-0 flex-1">
           <span className="truncate font-medium leading-tight">{artifact.title}</span>
-          <span className="text-xs text-stone-500 dark:text-neutral-400 leading-tight font-mono">
+          <span className="text-xs text-content-muted leading-tight font-mono">
             {artifact.status === 'in_progress'
               ? t('chat.artifact.generating').replace('{kind}', artifact.kind)
               : artifact.status === 'ready' && artifact.sizeBytes != null
@@ -229,7 +229,7 @@ export default function ArtifactCard({ artifact, onRetry }: ArtifactCardProps) {
             type="button"
             data-analytics-id={`chat-artifact-retry-${artifact.kind}`}
             onClick={() => onRetry(artifact.artifactId)}
-            className="ml-auto rounded-md bg-stone-200 dark:bg-neutral-700 hover:bg-stone-300 dark:hover:bg-neutral-600 text-stone-700 dark:text-neutral-200 text-xs font-medium px-3 py-1.5 transition-colors">
+            className="ml-auto rounded-md bg-surface-strong hover:bg-stone-300 dark:hover:bg-neutral-600 text-content-secondary text-xs font-medium px-3 py-1.5 transition-colors">
             {t('chat.artifact.retry')}
           </button>
         )}
diff --git a/app/src/components/chat/AttachmentPreview.tsx b/app/src/components/chat/AttachmentPreview.tsx
index d875f4c1b..a6ecd386b 100644
--- a/app/src/components/chat/AttachmentPreview.tsx
+++ b/app/src/components/chat/AttachmentPreview.tsx
@@ -21,7 +21,7 @@ export default function AttachmentPreview({
       {attachments.map(attachment => (
         <div
           key={attachment.id}
-          className="relative flex items-center gap-2 rounded-lg border border-stone-200 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800 px-2 py-1.5 text-xs text-stone-700 dark:text-neutral-300 max-w-[180px]">
+          className="relative flex items-center gap-2 rounded-lg border border-line bg-surface-muted px-2 py-1.5 text-xs text-content-secondary max-w-[180px]">
           {attachment.kind === 'image' ? (
             <img
               src={attachment.previewUri ?? attachment.dataUri}
@@ -31,7 +31,7 @@ export default function AttachmentPreview({
           ) : (
             <div
               aria-hidden
-              className="w-8 h-8 rounded border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 flex items-center justify-center flex-shrink-0 text-stone-500 dark:text-neutral-400">
+              className="w-8 h-8 rounded border border-line bg-surface flex items-center justify-center flex-shrink-0 text-content-muted">
               <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
@@ -50,7 +50,7 @@ export default function AttachmentPreview({
           )}
           <div className="flex flex-col min-w-0">
             <span className="truncate font-medium leading-tight">{attachment.file.name}</span>
-            <span className="text-stone-400 dark:text-neutral-500 leading-tight">
+            <span className="text-content-faint leading-tight">
               {formatFileSize(attachment.payloadSizeBytes)}
             </span>
           </div>
diff --git a/app/src/components/chat/ChatComposer.tsx b/app/src/components/chat/ChatComposer.tsx
index f139426a9..886620326 100644
--- a/app/src/components/chat/ChatComposer.tsx
+++ b/app/src/components/chat/ChatComposer.tsx
@@ -123,7 +123,7 @@ export default function ChatComposer({
       {headerSlots}
 
       {/* The input box — only this carries the focus-within highlight. */}
-      <div className="relative flex flex-col rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-all focus-within:border-primary-500/50 focus-within:ring-1 focus-within:ring-primary-500/50">
+      <div className="relative flex flex-col rounded-2xl border border-line bg-surface transition-all focus-within:border-primary-500/50 focus-within:ring-1 focus-within:ring-primary-500/50">
         {/* Hidden file input for attachment (gated — see attachmentsEnabled). */}
         {attachmentsEnabled && (
           <input
@@ -168,7 +168,7 @@ export default function ChatComposer({
               disabled={
                 composerInteractionBlocked || isSending || attachments.length >= maxAttachments
               }
-              className="flex-shrink-0 flex items-center justify-center w-6 h-6 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
+              className="flex-shrink-0 flex items-center justify-center w-6 h-6 text-content-faint hover:text-content-secondary transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
@@ -186,7 +186,7 @@ export default function ChatComposer({
               aria-hidden
               className="pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap break-words py-0.5 text-sm leading-5 font-sans">
               <span className="invisible">{inputValue}</span>
-              <span className="text-stone-500 dark:text-neutral-400/50">
+              <span className="text-content-muted dark:text-content-muted/50">
                 {inlineCompletionSuffix}
               </span>
             </div>
@@ -204,7 +204,7 @@ export default function ChatComposer({
               placeholder={allowParallelSend ? t('chat.followupHint') : t('chat.typeMessage')}
               rows={1}
               disabled={textareaDisabled}
-              className="relative z-10 w-full resize-none border-0 bg-transparent py-0.5 px-0.5 text-sm leading-5 whitespace-pre-wrap break-words font-sans text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 outline-none focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
+              className="relative z-10 w-full resize-none border-0 bg-transparent py-0.5 px-0.5 text-sm leading-5 whitespace-pre-wrap break-words font-sans text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 outline-none focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
             />
           </div>
 
@@ -216,7 +216,7 @@ export default function ChatComposer({
             title={t('composer.voiceMode')}
             onClick={onSwitchToMicCloud}
             disabled={composerInteractionBlocked || isSending}
-            className="flex-shrink-0 flex items-center justify-center w-6 h-6 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
+            className="flex-shrink-0 flex items-center justify-center w-6 h-6 text-content-faint hover:text-content-secondary transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
@@ -246,7 +246,7 @@ export default function ChatComposer({
               aria-label={t('chat.stopGeneration')}
               title={t('chat.stopGeneration')}
               onClick={onStopGeneration}
-              className="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-primary-500 hover:bg-primary-600 text-white transition-colors">
+              className="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-primary-500 hover:bg-primary-600 text-content-inverted transition-colors">
               <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                 <rect x="6" y="6" width="12" height="12" rx="1.5" />
               </svg>
@@ -262,7 +262,7 @@ export default function ChatComposer({
                 void onSend();
               }}
               disabled={!hasContent || composerLocked}
-              className="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-primary-500 hover:bg-primary-600 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
+              className="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-primary-500 hover:bg-primary-600 text-content-inverted disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
               {showSendingSpinner ? (
                 <svg className="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
                   <circle
diff --git a/app/src/components/chat/ChatFilesChip.tsx b/app/src/components/chat/ChatFilesChip.tsx
index b099deb9f..b5544b3ac 100644
--- a/app/src/components/chat/ChatFilesChip.tsx
+++ b/app/src/components/chat/ChatFilesChip.tsx
@@ -47,7 +47,7 @@ export default function ChatFilesChip({ threadId }: ChatFilesChipProps) {
           count === 1 ? 'chat.files.chip.aria.one' : 'chat.files.chip.aria.other'
         ).replace('{count}', String(count))}
         data-testid="chat-files-chip"
-        className="h-7 inline-flex items-center gap-1.5 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 hover:bg-stone-50 dark:hover:bg-neutral-800/60 text-xs font-medium text-stone-600 dark:text-neutral-300 transition-colors px-2">
+        className="h-7 inline-flex items-center gap-1.5 rounded-lg border border-line bg-surface hover:bg-surface-hover text-xs font-medium text-content-secondary transition-colors px-2">
         <svg
           aria-hidden="true"
           className="w-3.5 h-3.5"
diff --git a/app/src/components/chat/ChatFilesPanel.tsx b/app/src/components/chat/ChatFilesPanel.tsx
index 119f1dcbc..034ef1736 100644
--- a/app/src/components/chat/ChatFilesPanel.tsx
+++ b/app/src/components/chat/ChatFilesPanel.tsx
@@ -260,9 +260,9 @@ export default function ChatFilesPanel({ threadId, artifacts, onClose }: ChatFil
       role="dialog"
       aria-label={t('chat.files.panel.aria')}
       data-testid="chat-files-panel"
-      className="absolute right-0 top-9 z-30 w-[360px] max-h-[420px] overflow-y-auto rounded-xl border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 shadow-lg">
-      <header className="sticky top-0 z-10 bg-white dark:bg-neutral-900 border-b border-stone-100 dark:border-neutral-800 px-3 py-2 flex items-center justify-between">
-        <span className="text-xs font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+      className="absolute right-0 top-9 z-30 w-[360px] max-h-[420px] overflow-y-auto rounded-xl border border-line bg-surface shadow-lg">
+      <header className="sticky top-0 z-10 bg-surface border-b border-line-subtle px-3 py-2 flex items-center justify-between">
+        <span className="text-xs font-semibold uppercase tracking-wide text-content-muted">
           {t('chat.files.panel.title').replace('{count}', String(artifacts.length))}
         </span>
         <Button
@@ -284,11 +284,11 @@ export default function ChatFilesPanel({ threadId, artifacts, onClose }: ChatFil
       </header>
 
       {artifacts.length === 0 ? (
-        <div className="px-3 py-6 text-xs text-stone-500 dark:text-neutral-400 text-center">
+        <div className="px-3 py-6 text-xs text-content-muted text-center">
           {t('chat.files.panel.empty')}
         </div>
       ) : (
-        <ul className="divide-y divide-stone-100 dark:divide-neutral-800">
+        <ul className="divide-y divide-line-subtle dark:divide-neutral-800">
           {artifacts.map(artifact => {
             const row = downloadState[artifact.artifactId] ?? { state: 'idle' as const };
             const isConfirming = confirmDeleteId === artifact.artifactId;
@@ -297,25 +297,25 @@ export default function ChatFilesPanel({ threadId, artifacts, onClose }: ChatFil
                 key={artifact.artifactId}
                 className="px-3 py-2.5 flex flex-col gap-1"
                 data-testid={`chat-files-row-${artifact.artifactId}`}>
-                <div className="flex items-center gap-2.5 text-sm text-stone-700 dark:text-neutral-200">
+                <div className="flex items-center gap-2.5 text-sm text-content-secondary">
                   <KindIcon kind={artifact.kind} />
                   <div className="flex flex-col min-w-0 flex-1">
                     <span className="truncate font-medium leading-tight">{artifact.title}</span>
-                    <span className="text-[11px] font-mono text-stone-500 dark:text-neutral-400 leading-tight">
+                    <span className="text-[11px] font-mono text-content-muted leading-tight">
                       {artifact.sizeBytes != null ? formatFileSize(artifact.sizeBytes) : ''}
                     </span>
                   </div>
                 </div>
                 {isConfirming ? (
                   <div className="flex items-center gap-2 mt-1">
-                    <span className="text-[11px] text-stone-600 dark:text-neutral-300 flex-1">
+                    <span className="text-[11px] text-content-secondary flex-1">
                       {t('chat.files.delete.confirm')}
                     </span>
                     <button
                       type="button"
                       onClick={() => setConfirmDeleteId(null)}
                       data-analytics-id="chat-files-delete-cancel"
-                      className="rounded-md bg-stone-100 dark:bg-neutral-800 hover:bg-stone-200 dark:hover:bg-neutral-700 text-stone-700 dark:text-neutral-200 text-[11px] font-medium px-2 py-1 transition-colors">
+                      className="rounded-md bg-surface-subtle hover:bg-surface-strong dark:hover:bg-neutral-700 text-content-secondary text-[11px] font-medium px-2 py-1 transition-colors">
                       {t('chat.files.delete.cancel')}
                     </button>
                     <button
@@ -323,7 +323,7 @@ export default function ChatFilesPanel({ threadId, artifacts, onClose }: ChatFil
                       onClick={() => void handleDeleteConfirm(artifact)}
                       data-analytics-id={`chat-files-delete-confirm-${artifact.kind}`}
                       data-testid={`chat-files-confirm-${artifact.artifactId}`}
-                      className="rounded-md bg-coral-500 hover:bg-coral-600 text-white text-[11px] font-medium px-2 py-1 transition-colors">
+                      className="rounded-md bg-coral-500 hover:bg-coral-600 text-content-inverted text-[11px] font-medium px-2 py-1 transition-colors">
                       {t('chat.files.delete.action')}
                     </button>
                   </div>
@@ -356,7 +356,7 @@ export default function ChatFilesPanel({ threadId, artifacts, onClose }: ChatFil
                       data-analytics-id={`chat-files-delete-${artifact.kind}`}
                       data-testid={`chat-files-delete-${artifact.artifactId}`}
                       aria-label={t('chat.files.delete.aria').replace('{title}', artifact.title)}
-                      className="ml-auto rounded-md bg-transparent text-stone-500 dark:text-neutral-400 hover:bg-coral-50 dark:hover:bg-coral-900/20 hover:text-coral-700 dark:hover:text-coral-300 text-[11px] font-medium px-2 py-1 transition-colors">
+                      className="ml-auto rounded-md bg-transparent text-content-muted hover:bg-coral-50 dark:hover:bg-coral-900/20 hover:text-coral-700 dark:hover:text-coral-300 text-[11px] font-medium px-2 py-1 transition-colors">
                       <svg
                         className="w-3.5 h-3.5"
                         fill="none"
@@ -383,7 +383,7 @@ export default function ChatFilesPanel({ threadId, artifacts, onClose }: ChatFil
         </ul>
       )}
       {deleteError && (
-        <div className="px-3 py-2 border-t border-stone-100 dark:border-neutral-800 text-[11px] text-coral-600 dark:text-coral-400 break-words">
+        <div className="px-3 py-2 border-t border-line-subtle text-[11px] text-coral-600 dark:text-coral-400 break-words">
           {deleteError}
         </div>
       )}
diff --git a/app/src/components/chat/ChatNewWindowHero.tsx b/app/src/components/chat/ChatNewWindowHero.tsx
index 06764967a..c18409ff6 100644
--- a/app/src/components/chat/ChatNewWindowHero.tsx
+++ b/app/src/components/chat/ChatNewWindowHero.tsx
@@ -147,9 +147,9 @@ export default function ChatNewWindowHero() {
           the app background. */}
       <div
         data-walkthrough="home-card"
-        className="animate-fade-up rounded-2xl border border-stone-200/80 bg-white/80 p-6 shadow-soft backdrop-blur-sm dark:border-neutral-800/80 dark:bg-neutral-900/80">
+        className="animate-fade-up rounded-2xl border border-line/80 bg-surface/80 p-6 shadow-soft backdrop-blur-sm dark:border-line/80">
         {/* Animated greeting */}
-        <h1 className="min-h-[3.5rem] text-2xl text-center font-bold text-stone-900 dark:text-neutral-100">
+        <h1 className="min-h-[3.5rem] text-2xl text-center font-bold text-content">
           {typedWelcome}
           <span aria-hidden="true" className="ml-0.5 inline-block animate-pulse text-primary-500">
             |
@@ -158,9 +158,7 @@ export default function ChatNewWindowHero() {
 
         {/* Description — copy mirrors the active blocking state (incl. the
             "device connected" get-started line in the normal case). */}
-        <p className="text-center text-sm leading-relaxed text-stone-500 dark:text-neutral-400">
-          {statusCopy}
-        </p>
+        <p className="text-center text-sm leading-relaxed text-content-muted">{statusCopy}</p>
 
         {/* Recovery: only when the local core is the broken link. */}
         {blocking === 'core-unreachable' && (
@@ -169,7 +167,7 @@ export default function ChatNewWindowHero() {
               type="button"
               onClick={handleRestartCore}
               disabled={isRestartingCore}
-              className="w-full rounded-xl bg-amber-500 py-3 font-medium text-white transition-colors duration-200 hover:bg-amber-600 disabled:opacity-50">
+              className="w-full rounded-xl bg-amber-500 py-3 font-medium text-content-inverted transition-colors duration-200 hover:bg-amber-600 disabled:opacity-50">
               {isRestartingCore ? t('home.restartingCore') : t('home.restartCore')}
             </button>
             {restartError && (
diff --git a/app/src/components/chat/ComposerTokenStats.tsx b/app/src/components/chat/ComposerTokenStats.tsx
index 927b0997d..8fb99ae83 100644
--- a/app/src/components/chat/ComposerTokenStats.tsx
+++ b/app/src/components/chat/ComposerTokenStats.tsx
@@ -15,7 +15,7 @@ function ok(n: number): boolean {
 }
 
 function dot() {
-  return <span className="text-stone-300 dark:text-neutral-700">·</span>;
+  return <span className="text-content-faint dark:text-neutral-700">·</span>;
 }
 
 interface ComposerTokenStatsProps {
@@ -86,7 +86,7 @@ export default function ComposerTokenStats({ model }: ComposerTokenStatsProps =
   if (parts.length === 0) return null;
 
   return (
-    <div className="flex min-w-0 flex-wrap items-center gap-2.5 text-[10px] font-mono text-stone-400 dark:text-neutral-500 select-none">
+    <div className="flex min-w-0 flex-wrap items-center gap-2.5 text-[10px] font-mono text-content-faint select-none">
       {parts.map((part, i) => (
         <span key={i} className="contents">
           {i > 0 && dot()}
diff --git a/app/src/components/chat/CycleUsagePill.tsx b/app/src/components/chat/CycleUsagePill.tsx
index e21cb5cfe..75a2e9b3b 100644
--- a/app/src/components/chat/CycleUsagePill.tsx
+++ b/app/src/components/chat/CycleUsagePill.tsx
@@ -19,26 +19,24 @@ export default function CycleUsagePill() {
       {teamUsage ? (
         <LimitPill label={t('chat.cycle')} usedPct={usagePct} />
       ) : (
-        <span className="text-[10px] text-stone-400 dark:text-neutral-500 animate-pulse">
-          {t('common.loading')}
-        </span>
+        <span className="text-[10px] text-content-faint animate-pulse">{t('common.loading')}</span>
       )}
       {teamUsage && (
         <div className="absolute bottom-full left-0 mb-2 hidden group-hover:block z-50">
           <div className="bg-stone-900 text-white text-[10px] rounded-lg px-3 py-2 shadow-lg whitespace-nowrap space-y-1.5">
             <div className="flex items-center justify-between gap-4">
-              <span className="text-stone-400">{t('chat.cycleSpent')}</span>
+              <span className="text-content-faint">{t('chat.cycleSpent')}</span>
               <span>
                 ${(teamUsage.cycleSpentUsd ?? 0).toFixed(2)} / $
                 {(teamUsage.cycleBudgetUsd ?? 0).toFixed(2)}
               </span>
             </div>
             <div className="flex items-center justify-between gap-4">
-              <span className="text-stone-400">{t('chat.cycleRemaining')}</span>
+              <span className="text-content-faint">{t('chat.cycleRemaining')}</span>
               <span>
                 ${(teamUsage.remainingUsd ?? 0).toFixed(2)} {t('chat.left')}
                 {teamUsage.cycleEndsAt && (
-                  <span className="text-stone-400 dark:text-neutral-500 ml-1">
+                  <span className="text-content-faint ml-1">
                     — {t('chat.resets')} {formatResetTime(teamUsage.cycleEndsAt)}
                   </span>
                 )}
diff --git a/app/src/components/chat/IntegrationConnectCard.tsx b/app/src/components/chat/IntegrationConnectCard.tsx
index c1677fa81..41063a205 100644
--- a/app/src/components/chat/IntegrationConnectCard.tsx
+++ b/app/src/components/chat/IntegrationConnectCard.tsx
@@ -284,16 +284,14 @@ export const IntegrationConnectCard: React.FC<Props> = ({ threadId, approval })
           🔗
         </span>
         <div className="min-w-0 flex-1">
-          <p className="break-words font-semibold text-neutral-900 dark:text-neutral-50">
+          <p className="break-words font-semibold text-content">
             {approval.message || t('chat.approval.fallback')}
           </p>
 
           {showFields && (
             <div className="mt-2.5 flex flex-col gap-2.5">
               {requiredFields.map(field => (
-                <label
-                  key={field.key}
-                  className="block text-xs text-neutral-700 dark:text-neutral-300">
+                <label key={field.key} className="block text-xs text-content-secondary">
                   <span className="font-medium">{t(field.labelKey)}</span>
                   <span className="mt-1 flex items-center gap-1.5">
                     <input
@@ -303,18 +301,14 @@ export const IntegrationConnectCard: React.FC<Props> = ({ threadId, approval })
                       onChange={e =>
                         setFieldValues(prev => ({ ...prev, [field.key]: e.target.value }))
                       }
-                      className="min-w-0 flex-1 rounded-lg border border-neutral-300 bg-neutral-0 px-2.5 py-1.5 text-ink outline-none transition focus:border-primary-500 focus:ring-1 focus:ring-primary-500 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
+                      className="min-w-0 flex-1 rounded-lg border border-line-strong bg-neutral-0 px-2.5 py-1.5 text-ink outline-none transition focus:border-primary-500 focus:ring-1 focus:ring-primary-500 dark:bg-surface dark:text-content"
                     />
                     {field.suffix && (
-                      <span className="shrink-0 text-neutral-400 dark:text-neutral-500">
-                        {field.suffix}
-                      </span>
+                      <span className="shrink-0 text-content-faint">{field.suffix}</span>
                     )}
                   </span>
                   {field.hintKey && (
-                    <span className="mt-1 block text-neutral-500 dark:text-neutral-400">
-                      {t(field.hintKey)}
-                    </span>
+                    <span className="mt-1 block text-content-muted">{t(field.hintKey)}</span>
                   )}
                   {fieldErrors[field.key] && (
                     <span className="mt-1 block text-coral-600 dark:text-coral-400">
@@ -333,11 +327,9 @@ export const IntegrationConnectCard: React.FC<Props> = ({ threadId, approval })
             </p>
           )}
 
-          <p className="mt-1.5 text-xs text-neutral-400 dark:text-neutral-500">
+          <p className="mt-1.5 text-xs text-content-faint">
             {t('chat.approval.tool')}{' '}
-            <span className="font-mono text-neutral-500 dark:text-neutral-400">
-              {approval.toolName}
-            </span>
+            <span className="font-mono text-content-muted">{approval.toolName}</span>
           </p>
 
           {errorMsg && (
diff --git a/app/src/components/chat/ModelQualityPill.tsx b/app/src/components/chat/ModelQualityPill.tsx
index 1a9391a02..203570c4d 100644
--- a/app/src/components/chat/ModelQualityPill.tsx
+++ b/app/src/components/chat/ModelQualityPill.tsx
@@ -18,9 +18,9 @@ export default function ModelQualityPill({ className }: ModelQualityPillProps) {
       aria-label={t('composer.modelSelector')}
       title={t('composer.modelSelector')}
       disabled
-      className={`flex items-center gap-1 rounded-full px-2 py-0.5 text-xs text-stone-400 dark:text-neutral-500 disabled:cursor-default disabled:opacity-100 select-none ${className ?? ''}`}>
+      className={`flex items-center gap-1 rounded-full px-2 py-0.5 text-xs text-content-faint disabled:cursor-default disabled:opacity-100 select-none ${className ?? ''}`}>
       <span>OpenHuman</span>
-      <span className="text-stone-300 dark:text-neutral-600">·</span>
+      <span className="text-content-faint dark:text-neutral-600">·</span>
       <span>{t('composer.qualityHigh')}</span>
       {/* `shrink-0` keeps the chevron from being squeezed, and the button's
           `px-2` gives it trailing padding so the glyph is never clipped against
diff --git a/app/src/components/chat/QueuedFollowups.tsx b/app/src/components/chat/QueuedFollowups.tsx
index 2cfb2c62a..39f59efd6 100644
--- a/app/src/components/chat/QueuedFollowups.tsx
+++ b/app/src/components/chat/QueuedFollowups.tsx
@@ -22,16 +22,16 @@ export default function QueuedFollowups({ items, onClear }: QueuedFollowupsProps
   return (
     <div
       data-testid="queued-followups"
-      className="mb-2 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
+      className="mb-2 rounded-xl border border-line bg-surface px-3 py-2">
       <div className="flex items-center justify-between gap-2 mb-1.5">
-        <span className="text-xs font-medium text-stone-500 dark:text-neutral-400">
+        <span className="text-xs font-medium text-content-muted">
           {t('chat.queuedFollowups.label')} · {items.length}
         </span>
         <button
           type="button"
           data-analytics-id="chat-queued-followups-clear"
           onClick={onClear}
-          className="text-xs font-medium text-stone-500 dark:text-neutral-400 hover:text-coral-500 dark:hover:text-coral-400 transition-colors">
+          className="text-xs font-medium text-content-muted hover:text-coral-500 dark:hover:text-coral-400 transition-colors">
           {t('chat.queuedFollowups.clear')}
         </button>
       </div>
@@ -39,7 +39,7 @@ export default function QueuedFollowups({ items, onClear }: QueuedFollowupsProps
         {items.map(item => (
           <li
             key={item.message.id}
-            className="truncate text-sm text-stone-700 dark:text-neutral-200"
+            className="truncate text-sm text-content-secondary"
             title={item.label}>
             {item.label}
           </li>
diff --git a/app/src/components/chat/SuperContextToggle.tsx b/app/src/components/chat/SuperContextToggle.tsx
index 773458822..061122ffa 100644
--- a/app/src/components/chat/SuperContextToggle.tsx
+++ b/app/src/components/chat/SuperContextToggle.tsx
@@ -87,7 +87,7 @@ const SuperContextToggle = () => {
   );
 
   return (
-    <div className="flex h-7 flex-shrink-0 items-center gap-1.5 text-xs text-stone-500 dark:text-neutral-400">
+    <div className="flex h-7 flex-shrink-0 items-center gap-1.5 text-xs text-content-muted">
       <SettingsSwitch
         id="super-context-toggle"
         checked={enabled}
@@ -96,9 +96,7 @@ const SuperContextToggle = () => {
         aria-label={t('chat.superContext.label')}
         data-testid="super-context-toggle"
       />
-      <span className="font-medium text-stone-600 dark:text-neutral-300">
-        {t('chat.superContext.label')}
-      </span>
+      <span className="font-medium text-content-secondary">{t('chat.superContext.label')}</span>
       {/* Self-contained wrapping tooltip (the shared <Tooltip> is single-line
           nowrap and can't fit this paragraph). Anchored bottom-full + right-0
           so it grows up-and-left into the app interior — the toggle only shows
@@ -109,7 +107,7 @@ const SuperContextToggle = () => {
           aria-describedby="super-context-tooltip"
           aria-label={t('chat.superContext.label')}
           data-testid="super-context-info"
-          className="flex h-4 w-4 items-center justify-center rounded-full text-stone-400 transition-colors hover:text-stone-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-neutral-500 dark:hover:text-neutral-300">
+          className="flex h-4 w-4 items-center justify-center rounded-full text-content-faint transition-colors hover:text-content-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500">
           <svg
             className="h-3.5 w-3.5"
             fill="none"
diff --git a/app/src/components/chat/TokenUsagePill.tsx b/app/src/components/chat/TokenUsagePill.tsx
index 619de1840..d6c8842d2 100644
--- a/app/src/components/chat/TokenUsagePill.tsx
+++ b/app/src/components/chat/TokenUsagePill.tsx
@@ -65,7 +65,7 @@ const TokenUsagePill = () => {
     <div className="flex items-center gap-1.5 text-[11px] leading-none">
       {showSessionCounter ? (
         <span
-          className="inline-flex items-center gap-1 rounded-full bg-stone-100 dark:bg-neutral-800 px-2 py-1 font-mono text-stone-600 dark:text-neutral-300 ring-1 ring-stone-200/60 dark:ring-neutral-700"
+          className="inline-flex items-center gap-1 rounded-full bg-surface-subtle px-2 py-1 font-mono text-content-secondary ring-1 ring-stone-200/60 dark:ring-neutral-700"
           title={t('token.sessionTokens')
             .replace('{in}', sessionTokens.inputTokens.toLocaleString())
             .replace('{out}', sessionTokens.outputTokens.toLocaleString())
diff --git a/app/src/components/chat/UnsubscribeApprovalCard.tsx b/app/src/components/chat/UnsubscribeApprovalCard.tsx
index 29ec19c4b..badbdf75c 100644
--- a/app/src/components/chat/UnsubscribeApprovalCard.tsx
+++ b/app/src/components/chat/UnsubscribeApprovalCard.tsx
@@ -56,17 +56,17 @@ export const UnsubscribeApprovalCard: React.FC<Props> = ({ payload }) => {
   if (payload.action !== 'unsubscribe' || payload.status !== 'pending_approval') return null;
 
   return (
-    <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4 my-2 bg-gray-50 dark:bg-gray-900">
+    <div className="border border-line dark:border-gray-800 rounded-lg p-4 my-2 bg-surface-muted dark:bg-gray-900">
       <div className="flex items-start gap-3">
         <div className="text-xl">📧</div>
         <div className="flex-1">
-          <h4 className="font-semibold text-sm text-gray-900 dark:text-gray-100">
+          <h4 className="font-semibold text-sm text-content dark:text-gray-100">
             {t('chat.unsubscribeApproval.title')}
           </h4>
-          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+          <p className="text-sm text-content-secondary dark:text-gray-400 mt-1">
             {payload.metadata.message}
           </p>
-          <div className="text-xs text-gray-500 mt-2 font-mono break-all bg-gray-100 dark:bg-gray-800 p-2 rounded">
+          <div className="text-xs text-content-muted mt-2 font-mono break-all bg-surface-subtle dark:bg-gray-800 p-2 rounded">
             {payload.metadata.unsubscribe_link}
           </div>
 
diff --git a/app/src/components/chat/__tests__/ApprovalRequestCard.test.tsx b/app/src/components/chat/__tests__/ApprovalRequestCard.test.tsx
index 415b665f2..1ff51caec 100644
--- a/app/src/components/chat/__tests__/ApprovalRequestCard.test.tsx
+++ b/app/src/components/chat/__tests__/ApprovalRequestCard.test.tsx
@@ -54,7 +54,7 @@ describe('ApprovalRequestCard', () => {
     expect(card).toHaveClass('dark:bg-amber-950');
     expect(card).not.toHaveClass('bg-amber/5');
     expect(card.className).not.toMatch(/\bdark:bg-[^\s/]+\/\d+/);
-    expect(command).toHaveClass('dark:bg-neutral-950');
+    expect(command).toHaveClass('dark:bg-surface-canvas');
     expect(command.className).not.toMatch(/\bdark:bg-[^\s/]+\/\d+/);
   });
 
diff --git a/app/src/components/composio/ComposioConnectModal.tsx b/app/src/components/composio/ComposioConnectModal.tsx
index 4c850580f..c7092606c 100644
--- a/app/src/components/composio/ComposioConnectModal.tsx
+++ b/app/src/components/composio/ComposioConnectModal.tsx
@@ -569,7 +569,7 @@ export default function ComposioConnectModal({
       aria-labelledby="composio-setup-title">
       <div
         ref={modalRef}
-        className="bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-3xl shadow-large w-full max-w-[460px] overflow-hidden animate-fade-up focus:outline-none focus:ring-0"
+        className="bg-surface border border-line rounded-3xl shadow-large w-full max-w-[460px] overflow-hidden animate-fade-up focus:outline-none focus:ring-0"
         style={{
           animationDuration: '200ms',
           animationTimingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
@@ -578,18 +578,16 @@ export default function ComposioConnectModal({
         tabIndex={-1}
         onClick={e => e.stopPropagation()}>
         {/* Header */}
-        <div className="p-4 border-b border-stone-200 dark:border-neutral-800">
+        <div className="p-4 border-b border-line">
           <div className="flex items-start justify-between">
             <div className="flex-1 min-w-0 pr-2">
               <div className="flex items-center gap-2">
                 {toolkit.icon}
-                <h2
-                  id="composio-setup-title"
-                  className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+                <h2 id="composio-setup-title" className="text-base font-semibold text-content">
                   {headerTitle}
                 </h2>
               </div>
-              <p className="text-xs text-stone-400 dark:text-neutral-500 mt-1.5 line-clamp-2">
+              <p className="text-xs text-content-faint mt-1.5 line-clamp-2">
                 {toolkit.description}
               </p>
             </div>
@@ -598,7 +596,7 @@ export default function ComposioConnectModal({
               variant="tertiary"
               size="sm"
               onClick={onClose}
-              className="text-stone-400 dark:text-neutral-500 hover:text-stone-900 dark:hover:text-neutral-100 flex-shrink-0"
+              className="text-content-faint hover:text-content flex-shrink-0"
               aria-label={t('common.close')}>
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
@@ -616,11 +614,11 @@ export default function ComposioConnectModal({
         <div className="p-4 space-y-3">
           {phase === 'idle' && (
             <>
-              <p className="text-sm text-stone-600 dark:text-neutral-300">
+              <p className="text-sm text-content-secondary">
                 {`${t('composio.connect.idleDescription')} ${toolkit.name} ${t('composio.connect.idleDescriptionSuffix')}`}
               </p>
-              <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3">
-                <p className="mt-1 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">
+              <div className="rounded-xl border border-line bg-surface-muted p-3">
+                <p className="mt-1 text-xs leading-relaxed text-content-secondary">
                   {toolkit.name} {t('composio.connect.permissionsNote')}{' '}
                   <span className="font-medium">{toolkit.permissionLabel}</span>.{' '}
                   {t('composio.connect.permissionsNoteSuffix')}
@@ -655,7 +653,7 @@ export default function ComposioConnectModal({
 
           {phase === 'needs-fields' && (
             <>
-              <p className="text-sm text-stone-600 dark:text-neutral-300">
+              <p className="text-sm text-content-secondary">
                 {`${t('composio.connect.needsFieldsPrefix')} ${toolkit.name} ${t('composio.connect.needsFieldsSuffix')}`}
               </p>
               <RequiredFieldsForm
@@ -697,14 +695,12 @@ export default function ComposioConnectModal({
           )}
 
           {phase === 'authorizing' && (
-            <p className="text-sm text-stone-500 dark:text-neutral-400">
-              {t('composio.connect.requestingUrl')}
-            </p>
+            <p className="text-sm text-content-muted">{t('composio.connect.requestingUrl')}</p>
           )}
 
           {phase === 'waiting' && (
             <>
-              <div className="flex items-center gap-2 text-sm text-stone-700 dark:text-neutral-200">
+              <div className="flex items-center gap-2 text-sm text-content-secondary">
                 <div className="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
                 {`${t('composio.connect.waitingFor')} ${toolkit.name} ${t('composio.connect.oauthComplete')}`}
               </div>
@@ -717,9 +713,7 @@ export default function ComposioConnectModal({
                   {t('composio.connect.reopenBrowser')}
                 </Button>
               )}
-              <p className="text-xs text-stone-400 dark:text-neutral-500">
-                {t('composio.connect.waitingHint')}
-              </p>
+              <p className="text-xs text-content-faint">{t('composio.connect.waitingHint')}</p>
             </>
           )}
 
@@ -755,7 +749,7 @@ export default function ComposioConnectModal({
                     {`${toolkit.name} ${t('composio.connect.isConnected')}`} &nbsp;
                     {(activeConnections[0] ?? activeConnection) &&
                       deriveConnectionLabel(activeConnections[0] ?? activeConnection!) && (
-                        <span className="text-[11px] text-stone-400 dark:text-neutral-500 font-mono">
+                        <span className="text-[11px] text-content-faint font-mono">
                           ({deriveConnectionLabel((activeConnections[0] ?? activeConnection)!)})
                         </span>
                       )}
@@ -765,16 +759,16 @@ export default function ComposioConnectModal({
               {/* Multiple connections: list with per-connection controls */}
               {activeConnections.length > 1 && (
                 <div className="space-y-2">
-                  <p className="text-xs font-medium text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
+                  <p className="text-xs font-medium text-content-muted uppercase tracking-wide">
                     {t('composio.connect.connectedAccounts')} ({activeConnections.length})
                   </p>
                   {activeConnections.map(conn => (
                     <div
                       key={conn.id}
-                      className="flex items-center justify-between gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+                      className="flex items-center justify-between gap-2 rounded-lg border border-line bg-surface-muted px-3 py-2">
                       <div className="flex items-center gap-2 min-w-0">
                         <div className="w-2 h-2 rounded-full bg-sage-500 shrink-0" />
-                        <span className="text-sm text-stone-800 dark:text-neutral-100 truncate">
+                        <span className="text-sm text-content truncate">
                           {deriveConnectionLabel(conn) ?? toolkit.name}
                         </span>
                         {conn.id === activeConnections[0]?.id && (
@@ -827,18 +821,18 @@ export default function ComposioConnectModal({
                 className="w-full">
                 {t('composio.connect.addAnotherAccount')}
               </Button>
-              <label className="flex items-start gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+              <label className="flex items-start gap-2 rounded-lg border border-line bg-surface-muted px-3 py-2">
                 <input
                   type="checkbox"
                   checked={clearMemoryOnDisconnect}
                   onChange={event => setClearMemoryOnDisconnect(event.currentTarget.checked)}
-                  className="mt-0.5 h-4 w-4 rounded border-stone-300 text-primary-600 focus:ring-primary-500"
+                  className="mt-0.5 h-4 w-4 rounded border-line-strong text-primary-600 focus:ring-primary-500"
                 />
                 <span className="min-w-0">
-                  <span className="block text-sm font-medium text-stone-800 dark:text-neutral-100">
+                  <span className="block text-sm font-medium text-content">
                     {t('accounts.disconnectClearMemory')}
                   </span>
-                  <span className="block text-xs text-stone-500 dark:text-neutral-400">
+                  <span className="block text-xs text-content-muted">
                     {t('accounts.disconnectClearMemoryHint')}
                   </span>
                 </span>
@@ -860,9 +854,7 @@ export default function ComposioConnectModal({
           )}
 
           {phase === 'disconnecting' && (
-            <p className="text-sm text-stone-500 dark:text-neutral-400">
-              {t('composio.connect.disconnecting')}
-            </p>
+            <p className="text-sm text-content-muted">{t('composio.connect.disconnecting')}</p>
           )}
 
           {phase === 'error' && (
@@ -929,14 +921,12 @@ function ScopeToggles({ scopes, savingScope, onToggle, error }: ScopeTogglesProp
   const loading = scopes === null;
 
   return (
-    <div className="border-t border-stone-100 dark:border-neutral-800 pt-3 mt-1 space-y-2">
+    <div className="border-t border-line-subtle pt-3 mt-1 space-y-2">
       <div className="flex items-baseline justify-between">
-        <h3 className="text-xs font-semibold text-stone-700 dark:text-neutral-200 uppercase tracking-wide">
+        <h3 className="text-xs font-semibold text-content-secondary uppercase tracking-wide">
           {t('composio.connect.permissions')}
         </h3>
-        <p className="text-[10px] text-stone-400 dark:text-neutral-500">
-          {t('composio.connect.permissionsDefault')}
-        </p>
+        <p className="text-[10px] text-content-faint">{t('composio.connect.permissionsDefault')}</p>
       </div>
       <ul className="space-y-1.5">
         {SCOPE_ROWS.map(row => {
@@ -947,14 +937,10 @@ function ScopeToggles({ scopes, savingScope, onToggle, error }: ScopeTogglesProp
           return (
             <li
               key={row.key}
-              className="flex items-start justify-between gap-3 rounded-lg px-2 py-1.5 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
+              className="flex items-start justify-between gap-3 rounded-lg px-2 py-1.5 hover:bg-surface-hover">
               <div className="min-w-0 flex-1">
-                <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
-                  {rowLabel}
-                </span>
-                <p className="text-[11px] text-stone-400 dark:text-neutral-500 leading-snug">
-                  {rowHint}
-                </p>
+                <span className="text-sm font-medium text-content">{rowLabel}</span>
+                <p className="text-[11px] text-content-faint leading-snug">{rowHint}</p>
               </div>
               <button
                 type="button"
@@ -967,7 +953,7 @@ function ScopeToggles({ scopes, savingScope, onToggle, error }: ScopeTogglesProp
                   enabled ? 'bg-primary-500' : 'bg-stone-300'
                 }`}>
                 <span
-                  className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${
+                  className={`inline-block h-3.5 w-3.5 transform rounded-full bg-surface shadow transition-transform ${
                     enabled ? 'translate-x-5' : 'translate-x-0.5'
                   } ${isSaving ? 'animate-pulse' : ''}`}
                 />
@@ -1019,13 +1005,11 @@ function RequiredFieldsForm({
         const errorText = errorKey ? t(errorKey) : null;
         return (
           <div key={field.key} className="space-y-1.5">
-            <label
-              htmlFor={inputId}
-              className="block text-xs font-medium text-stone-700 dark:text-neutral-200">
+            <label htmlFor={inputId} className="block text-xs font-medium text-content-secondary">
               {t(field.labelKey)}
               <span className="ml-1 text-coral-500">*</span>
             </label>
-            <div className="flex items-center rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 focus-within:border-primary-400 focus-within:ring-2 focus-within:ring-primary-100 overflow-hidden">
+            <div className="flex items-center rounded-xl border border-line bg-surface focus-within:border-primary-400 focus-within:ring-2 focus-within:ring-primary-100 overflow-hidden">
               <input
                 id={inputId}
                 data-testid={inputId}
@@ -1036,10 +1020,10 @@ function RequiredFieldsForm({
                 placeholder={field.placeholderKey ? t(field.placeholderKey) : undefined}
                 aria-describedby={hintId}
                 aria-invalid={!!errorText}
-                className="flex-1 min-w-0 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 bg-transparent focus:outline-none"
+                className="flex-1 min-w-0 px-3 py-2 text-sm text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 bg-transparent focus:outline-none"
               />
               {field.suffix && (
-                <span className="pr-3 text-xs text-stone-400 dark:text-neutral-500 select-none whitespace-nowrap">
+                <span className="pr-3 text-xs text-content-faint select-none whitespace-nowrap">
                   {field.suffix}
                 </span>
               )}
@@ -1052,9 +1036,7 @@ function RequiredFieldsForm({
               </p>
             ) : (
               field.hintKey && (
-                <p
-                  id={hintId}
-                  className="text-[11px] leading-relaxed text-stone-400 dark:text-neutral-500">
+                <p id={hintId} className="text-[11px] leading-relaxed text-content-faint">
                   {t(field.hintKey)}
                 </p>
               )
diff --git a/app/src/components/composio/TriggerToggles.tsx b/app/src/components/composio/TriggerToggles.tsx
index 37447dbbf..ae90e351c 100644
--- a/app/src/components/composio/TriggerToggles.tsx
+++ b/app/src/components/composio/TriggerToggles.tsx
@@ -144,7 +144,7 @@ export default function TriggerToggles({
 
   if (loadError) {
     return (
-      <div className="border-t border-stone-100 dark:border-neutral-800 pt-3 mt-1">
+      <div className="border-t border-line-subtle pt-3 mt-1">
         <p className="text-[11px] text-coral-600">{loadError}</p>
       </div>
     );
@@ -152,24 +152,22 @@ export default function TriggerToggles({
 
   if (available === null) {
     return (
-      <div className="border-t border-stone-100 dark:border-neutral-800 pt-3 mt-1">
-        <h3 className="text-xs font-semibold text-stone-700 dark:text-neutral-200 uppercase tracking-wide">
+      <div className="border-t border-line-subtle pt-3 mt-1">
+        <h3 className="text-xs font-semibold text-content-secondary uppercase tracking-wide">
           {t('composio.triggers.heading')}
         </h3>
-        <p className="mt-1 text-[11px] text-stone-400 dark:text-neutral-500">
-          {t('composio.triggers.loading')}
-        </p>
+        <p className="mt-1 text-[11px] text-content-faint">{t('composio.triggers.loading')}</p>
       </div>
     );
   }
 
   if (available.length === 0) {
     return (
-      <div className="border-t border-stone-100 dark:border-neutral-800 pt-3 mt-1">
-        <h3 className="text-xs font-semibold text-stone-700 dark:text-neutral-200 uppercase tracking-wide">
+      <div className="border-t border-line-subtle pt-3 mt-1">
+        <h3 className="text-xs font-semibold text-content-secondary uppercase tracking-wide">
           {t('composio.triggers.heading')}
         </h3>
-        <p className="mt-1 text-[11px] text-stone-400 dark:text-neutral-500">
+        <p className="mt-1 text-[11px] text-content-faint">
           {`${t('composio.triggers.noneAvailable')} ${toolkitName}.`}
         </p>
       </div>
@@ -177,14 +175,12 @@ export default function TriggerToggles({
   }
 
   return (
-    <div
-      className="border-t border-stone-100 dark:border-neutral-800 pt-3 mt-1 space-y-2"
-      data-testid="trigger-toggles">
+    <div className="border-t border-line-subtle pt-3 mt-1 space-y-2" data-testid="trigger-toggles">
       <div className="flex items-baseline justify-between">
-        <h3 className="text-xs font-semibold text-stone-700 dark:text-neutral-200 uppercase tracking-wide">
+        <h3 className="text-xs font-semibold text-content-secondary uppercase tracking-wide">
           {t('composio.triggers.heading')}
         </h3>
-        <p className="text-[10px] text-stone-400 dark:text-neutral-500">{`${t('composio.triggers.listenFrom')} ${toolkitName}`}</p>
+        <p className="text-[10px] text-content-faint">{`${t('composio.triggers.listenFrom')} ${toolkitName}`}</p>
       </div>
       <ul className="space-y-1.5 max-h-56 overflow-y-auto pr-1">
         {available.map(entry => {
@@ -219,16 +215,10 @@ export default function TriggerToggles({
             <li
               key={sig}
               data-testid={`trigger-row-${sig}`}
-              className="flex items-start justify-between gap-3 rounded-lg px-2 py-1.5 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
+              className="flex items-start justify-between gap-3 rounded-lg px-2 py-1.5 hover:bg-surface-hover">
               <div className="min-w-0 flex-1">
-                <span className="text-sm font-medium text-stone-900 dark:text-neutral-100 break-all">
-                  {label}
-                </span>
-                {sub && (
-                  <p className="text-[11px] text-stone-400 dark:text-neutral-500 leading-snug">
-                    {sub}
-                  </p>
-                )}
+                <span className="text-sm font-medium text-content break-all">{label}</span>
+                {sub && <p className="text-[11px] text-content-faint leading-snug">{sub}</p>}
               </div>
               <button
                 type="button"
@@ -238,10 +228,10 @@ export default function TriggerToggles({
                 disabled={disabled}
                 onClick={() => void handleToggle(entry)}
                 className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 ${
-                  enabled ? 'bg-primary-500' : 'bg-stone-300 dark:bg-neutral-700'
+                  enabled ? 'bg-primary-500' : 'bg-surface-strong'
                 }`}>
                 <span
-                  className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${
+                  className={`inline-block h-3.5 w-3.5 transform rounded-full bg-surface shadow transition-transform ${
                     enabled ? 'translate-x-5' : 'translate-x-0.5'
                   } ${isPending ? 'animate-pulse' : ''}`}
                 />
diff --git a/app/src/components/composio/toolkitMeta.tsx b/app/src/components/composio/toolkitMeta.tsx
index 13cda81a1..e81829a4b 100644
--- a/app/src/components/composio/toolkitMeta.tsx
+++ b/app/src/components/composio/toolkitMeta.tsx
@@ -238,7 +238,7 @@ const PLATFORM_KEYWORDS = [
 
 function GenericIntegrationIcon() {
   return (
-    <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 shadow-sm ring-1 ring-black/5">
+    <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-surface-subtle text-content-secondary shadow-sm ring-1 ring-black/5">
       <svg className="h-[18px] w-[18px]" viewBox="0 0 24 24" aria-hidden="true" fill="none">
         <path
           d="M8 8h8v8H8zM5 12h3m8 0h3M12 5v3m0 8v3"
@@ -270,7 +270,7 @@ function ComposioLogoBadge({
   }
 
   return (
-    <span className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-xl bg-white dark:bg-neutral-900 shadow-sm ring-1 ring-black/5">
+    <span className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-xl bg-surface shadow-sm ring-1 ring-black/5">
       <img
         src={logoUrl}
         alt={`${name} logo`}
diff --git a/app/src/components/daemon/ServiceBlockingGate.tsx b/app/src/components/daemon/ServiceBlockingGate.tsx
index e8fb6d4e3..bd7111524 100644
--- a/app/src/components/daemon/ServiceBlockingGate.tsx
+++ b/app/src/components/daemon/ServiceBlockingGate.tsx
@@ -55,8 +55,8 @@ const ServiceBlockingGate = ({ children }: ServiceBlockingGateProps) => {
           <h2 className="text-xl font-semibold text-white">
             {t('daemon.serviceBlockingGate.title')}
           </h2>
-          <p className="mt-2 text-sm text-stone-300">{t('daemon.serviceBlockingGate.body')}</p>
-          <p className="mt-2 text-sm text-stone-400">
+          <p className="mt-2 text-sm text-content-faint">{t('daemon.serviceBlockingGate.body')}</p>
+          <p className="mt-2 text-sm text-content-faint">
             {t('daemon.serviceBlockingGate.downloadHint')}
           </p>
           {restartError && <p className="mt-3 text-sm text-coral-300">{restartError}</p>}
@@ -73,7 +73,7 @@ const ServiceBlockingGate = ({ children }: ServiceBlockingGateProps) => {
             <button
               type="button"
               onClick={handleDownloadLatest}
-              className="rounded-lg bg-coral-500 px-4 py-2 text-sm font-medium text-white hover:bg-coral-600">
+              className="rounded-lg bg-coral-500 px-4 py-2 text-sm font-medium text-content-inverted hover:bg-coral-600">
               {t('daemon.serviceBlockingGate.downloadLatest')}
             </button>
           </div>
diff --git a/app/src/components/dashboard/BudgetSummary.tsx b/app/src/components/dashboard/BudgetSummary.tsx
index 5a1fd2e54..2399d8102 100644
--- a/app/src/components/dashboard/BudgetSummary.tsx
+++ b/app/src/components/dashboard/BudgetSummary.tsx
@@ -53,9 +53,9 @@ const BudgetSummary = ({
       {/* Hero tile: 7-day total + status badge + progress bar */}
       <div
         data-testid="metric-total-spend"
-        className="md:col-span-2 rounded-2xl border border-stone-200 dark:border-neutral-800 bg-gradient-to-br from-ocean-50 to-white dark:from-neutral-900 dark:to-neutral-950 p-5 flex flex-col gap-3 shadow-soft">
+        className="md:col-span-2 rounded-2xl border border-line bg-gradient-to-br from-ocean-50 to-white dark:from-neutral-900 dark:to-neutral-950 p-5 flex flex-col gap-3 shadow-soft">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2 text-xs uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+          <div className="flex items-center gap-2 text-xs uppercase tracking-wide text-content-muted">
             <WalletIcon className="h-4 w-4" />
             <span>{t('settings.costDashboard.totalSpend')}</span>
           </div>
@@ -64,21 +64,21 @@ const BudgetSummary = ({
             className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[11px] font-medium text-white ${STATUS_BG[status]}`}>
             <span
               aria-hidden
-              className="inline-block h-1.5 w-1.5 rounded-full bg-white/80 animate-pulse"
+              className="inline-block h-1.5 w-1.5 rounded-full bg-surface/80 animate-pulse"
             />
             {t(STATUS_LABEL_KEY[status])}
           </span>
         </div>
         <div className="flex items-baseline gap-3">
-          <span className="text-3xl md:text-4xl font-semibold tabular-nums text-stone-900 dark:text-neutral-50">
+          <span className="text-3xl md:text-4xl font-semibold tabular-nums text-content">
             {formatCurrency(periodTotalUsd, currency)}
           </span>
-          <span className="text-xs text-stone-500 dark:text-neutral-400">
+          <span className="text-xs text-content-muted">
             {t('settings.costDashboard.lastSevenDays')}
           </span>
         </div>
         <div className="flex flex-col gap-1">
-          <div className="flex items-center justify-between text-[11px] text-stone-500 dark:text-neutral-400">
+          <div className="flex items-center justify-between text-[11px] text-content-muted">
             <span>
               {budgetLimitMonthlyUsd > 0
                 ? `${formatCurrency(monthToDateUsd, currency)} ${t('settings.costDashboard.utilizationOf')} ${formatCurrency(budgetLimitMonthlyUsd, currency)} ${t('settings.costDashboard.thisMonth')}`
@@ -88,9 +88,7 @@ const BudgetSummary = ({
               {`${utilizationPct}%`}
             </span>
           </div>
-          <div
-            aria-hidden
-            className="h-2 w-full rounded-full bg-stone-200 dark:bg-neutral-800 overflow-hidden">
+          <div aria-hidden className="h-2 w-full rounded-full bg-surface-strong overflow-hidden">
             <div
               data-testid="utilization-fill"
               className={`h-full rounded-full transition-all duration-300 ${STATUS_BG[status]}`}
@@ -136,14 +134,12 @@ const SmallMetric = ({ icon, label, value, hint, testId }: SmallMetricProps) =>
   <div
     data-testid={testId}
     title={hint}
-    className="rounded-2xl border border-stone-200 dark:border-neutral-800 p-3 flex flex-col gap-1 hover:border-ocean-300 dark:hover:border-ocean-700 transition-colors">
-    <div className="flex items-center gap-2 text-[11px] uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+    className="rounded-2xl border border-line p-3 flex flex-col gap-1 hover:border-ocean-300 dark:hover:border-ocean-700 transition-colors">
+    <div className="flex items-center gap-2 text-[11px] uppercase tracking-wide text-content-muted">
       {icon}
       <span>{label}</span>
     </div>
-    <span className="text-lg font-semibold tabular-nums text-stone-800 dark:text-neutral-100">
-      {value}
-    </span>
+    <span className="text-lg font-semibold tabular-nums text-content">{value}</span>
   </div>
 );
 
diff --git a/app/src/components/dashboard/ChartTooltip.tsx b/app/src/components/dashboard/ChartTooltip.tsx
index 1cafe2b5f..05466e6a4 100644
--- a/app/src/components/dashboard/ChartTooltip.tsx
+++ b/app/src/components/dashboard/ChartTooltip.tsx
@@ -23,8 +23,8 @@ const ChartTooltip = ({ title, rows, footer }: ChartTooltipProps) => (
   <div
     role="tooltip"
     data-testid="chart-tooltip"
-    className="rounded-lg border border-stone-200 dark:border-neutral-700 bg-white/95 dark:bg-neutral-900/95 backdrop-blur-sm shadow-soft px-3 py-2 text-xs text-stone-800 dark:text-neutral-100">
-    <div className="font-medium mb-1 text-stone-700 dark:text-neutral-200">{title}</div>
+    className="rounded-lg border border-line bg-surface/95 backdrop-blur-sm shadow-soft px-3 py-2 text-xs text-content">
+    <div className="font-medium mb-1 text-content-secondary">{title}</div>
     <ul className="space-y-0.5">
       {rows.map(row => (
         <li key={row.label} className="flex items-center gap-2">
@@ -35,13 +35,13 @@ const ChartTooltip = ({ title, rows, footer }: ChartTooltipProps) => (
               style={{ backgroundColor: row.color }}
             />
           )}
-          <span className="text-stone-500 dark:text-neutral-400">{row.label}</span>
+          <span className="text-content-muted">{row.label}</span>
           <span className="ml-auto tabular-nums font-medium">{row.value}</span>
         </li>
       ))}
     </ul>
     {footer && (
-      <div className="mt-1 pt-1 border-t border-stone-200/60 dark:border-neutral-800 text-[10px] text-stone-500 dark:text-neutral-400">
+      <div className="mt-1 pt-1 border-t border-line/60 dark:border-line text-[10px] text-content-muted">
         {footer}
       </div>
     )}
diff --git a/app/src/components/dashboard/CostBarChart.tsx b/app/src/components/dashboard/CostBarChart.tsx
index 467e71901..a75f9f7fc 100644
--- a/app/src/components/dashboard/CostBarChart.tsx
+++ b/app/src/components/dashboard/CostBarChart.tsx
@@ -78,7 +78,7 @@ const CostBarChart = ({
   return (
     <div data-testid="cost-bar-chart" className="w-full">
       {dailyTarget > 0 && (
-        <div className="text-[11px] text-stone-500 dark:text-neutral-400 mb-1 flex items-center gap-1.5">
+        <div className="text-[11px] text-content-muted mb-1 flex items-center gap-1.5">
           <span
             aria-hidden
             className="inline-block h-px w-3 border-t border-dashed border-stone-400 dark:border-neutral-500"
diff --git a/app/src/components/dashboard/CostDashboardPanel.tsx b/app/src/components/dashboard/CostDashboardPanel.tsx
index f1b64abc9..8f6cd8951 100644
--- a/app/src/components/dashboard/CostDashboardPanel.tsx
+++ b/app/src/components/dashboard/CostDashboardPanel.tsx
@@ -51,14 +51,14 @@ const CostDashboardPanel = ({ embedded = false }: CostDashboardPanelProps) => {
   const body = (
     <>
       <div className="flex items-start justify-between gap-3">
-        <p className="text-xs text-neutral-500 dark:text-neutral-400 max-w-prose">
+        <p className="text-xs text-content-muted max-w-prose">
           {t('settings.costDashboard.subtitle')}
         </p>
         <div className="flex items-center gap-2 shrink-0">
           {(lastUpdated !== null || usageLogUpdated !== null) && (
             <span
               data-testid="cost-dashboard-updated"
-              className="inline-flex items-center gap-1.5 text-[11px] text-neutral-500 dark:text-neutral-400">
+              className="inline-flex items-center gap-1.5 text-[11px] text-content-muted">
               <span
                 aria-hidden
                 className={`inline-block h-1.5 w-1.5 rounded-full ${isFetching || usageLogFetching ? 'bg-ocean-500 animate-pulse' : 'bg-sage-500'}`}
@@ -117,12 +117,12 @@ const CostDashboardPanel = ({ embedded = false }: CostDashboardPanelProps) => {
           />
           <section
             data-testid="cost-dashboard-cost-chart"
-            className="rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4 bg-white/40 dark:bg-neutral-900/40">
+            className="rounded-2xl border border-line p-4 bg-surface/40">
             <header className="mb-2 flex items-baseline justify-between">
-              <h2 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+              <h2 className="text-sm font-semibold text-content">
                 {t('settings.costDashboard.sevenDayCost')}
               </h2>
-              <span className="text-[11px] text-neutral-500 dark:text-neutral-400">
+              <span className="text-[11px] text-content-muted">
                 {t('settings.costDashboard.utcNote')}
               </span>
             </header>
@@ -136,12 +136,12 @@ const CostDashboardPanel = ({ embedded = false }: CostDashboardPanelProps) => {
           </section>
           <section
             data-testid="cost-dashboard-token-chart"
-            className="rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4 bg-white/40 dark:bg-neutral-900/40">
+            className="rounded-2xl border border-line p-4 bg-surface/40">
             <header className="mb-2 flex items-baseline justify-between">
-              <h2 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+              <h2 className="text-sm font-semibold text-content">
                 {t('settings.costDashboard.sevenDayTokens')}
               </h2>
-              <span className="text-[11px] text-neutral-500 dark:text-neutral-400">
+              <span className="text-[11px] text-content-muted">
                 {t('settings.costDashboard.stackedNote')}
               </span>
             </header>
@@ -149,12 +149,12 @@ const CostDashboardPanel = ({ embedded = false }: CostDashboardPanelProps) => {
           </section>
           <section
             data-testid="cost-dashboard-model-table"
-            className="rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4 bg-white/40 dark:bg-neutral-900/40">
+            className="rounded-2xl border border-line p-4 bg-surface/40">
             <header className="mb-2">
-              <h2 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+              <h2 className="text-sm font-semibold text-content">
                 {t('settings.costDashboard.modelBreakdown')}
               </h2>
-              <p className="text-[11px] text-neutral-500 dark:text-neutral-400">
+              <p className="text-[11px] text-content-muted">
                 {t('settings.costDashboard.modelBreakdownHint')}
               </p>
             </header>
@@ -162,12 +162,12 @@ const CostDashboardPanel = ({ embedded = false }: CostDashboardPanelProps) => {
           </section>
           <section
             data-testid="cost-dashboard-category-distribution"
-            className="rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4 bg-white/40 dark:bg-neutral-900/40">
+            className="rounded-2xl border border-line p-4 bg-surface/40">
             <header className="mb-3">
-              <h2 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+              <h2 className="text-sm font-semibold text-content">
                 {t('settings.costDashboard.categoryDistribution')}
               </h2>
-              <p className="text-[11px] text-neutral-500 dark:text-neutral-400">
+              <p className="text-[11px] text-content-muted">
                 {t('settings.costDashboard.categoryDistributionHint')}
               </p>
             </header>
@@ -177,20 +177,20 @@ const CostDashboardPanel = ({ embedded = false }: CostDashboardPanelProps) => {
                 currency={usageLog.currency}
               />
             ) : usageLogLoading ? (
-              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+              <div className="text-xs text-content-muted">
                 {t('settings.costDashboard.loading')}
               </div>
             ) : null}
           </section>
           <section
             data-testid="cost-dashboard-usage-log"
-            className="rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4 bg-white/40 dark:bg-neutral-900/40">
+            className="rounded-2xl border border-line p-4 bg-surface/40">
             <header className="mb-3 flex items-baseline justify-between gap-3">
               <div>
-                <h2 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+                <h2 className="text-sm font-semibold text-content">
                   {t('settings.costDashboard.usageLog')}
                 </h2>
-                <p className="text-[11px] text-neutral-500 dark:text-neutral-400">
+                <p className="text-[11px] text-content-muted">
                   {usageLog
                     ? t('settings.costDashboard.usageLogHint')
                         .replace('{days}', String(usageLog.days))
@@ -201,7 +201,7 @@ const CostDashboardPanel = ({ embedded = false }: CostDashboardPanelProps) => {
                 </p>
               </div>
               {usageLog && (
-                <span className="shrink-0 text-[11px] text-neutral-500 dark:text-neutral-400">
+                <span className="shrink-0 text-[11px] text-content-muted">
                   {t('settings.costDashboard.logTotal')
                     .replace('{requests}', String(usageLog.request_count))
                     .replace('{cost}', formatCurrency(usageLog.total_cost_usd, usageLog.currency))}
@@ -211,7 +211,7 @@ const CostDashboardPanel = ({ embedded = false }: CostDashboardPanelProps) => {
             {usageLog ? (
               <UsageLogTable records={usageLog.records} currency={usageLog.currency} />
             ) : usageLogLoading ? (
-              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+              <div className="text-xs text-content-muted">
                 {t('settings.costDashboard.loading')}
               </div>
             ) : null}
@@ -219,11 +219,11 @@ const CostDashboardPanel = ({ embedded = false }: CostDashboardPanelProps) => {
           {!hasAnyCost && (
             <div
               data-testid="cost-dashboard-empty"
-              className="rounded-xl border border-dashed border-neutral-300 dark:border-neutral-700 px-4 py-6 text-center">
-              <div className="text-sm font-medium text-neutral-700 dark:text-neutral-200">
+              className="rounded-xl border border-dashed border-line-strong px-4 py-6 text-center">
+              <div className="text-sm font-medium text-content-secondary">
                 {t('settings.costDashboard.noData')}
               </div>
-              <div className="text-[11px] text-neutral-500 dark:text-neutral-400 mt-1">
+              <div className="text-[11px] text-content-muted mt-1">
                 {t('settings.costDashboard.noDataHint')}
               </div>
             </div>
@@ -263,7 +263,7 @@ const CategoryDistribution = ({
   const { t } = useT();
   if (categories.length === 0) {
     return (
-      <div className="text-xs text-neutral-500 dark:text-neutral-400 italic py-2">
+      <div className="text-xs text-content-muted italic py-2">
         {t('settings.costDashboard.noCategories')}
       </div>
     );
@@ -271,9 +271,7 @@ const CategoryDistribution = ({
 
   return (
     <div className="space-y-3">
-      <div
-        aria-hidden
-        className="flex h-3 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800">
+      <div aria-hidden className="flex h-3 w-full overflow-hidden rounded-full bg-surface-strong">
         {categories.map((category, index) => (
           <div
             key={category.category}
@@ -284,24 +282,22 @@ const CategoryDistribution = ({
       </div>
       <div className="grid gap-2 sm:grid-cols-2">
         {categories.map((category, index) => (
-          <div
-            key={category.category}
-            className="rounded-lg border border-neutral-200 dark:border-neutral-800 px-3 py-2">
+          <div key={category.category} className="rounded-lg border border-line px-3 py-2">
             <div className="flex items-center justify-between gap-3">
               <div className="flex min-w-0 items-center gap-2">
                 <span
                   aria-hidden
                   className={`h-2 w-2 rounded-full ${CATEGORY_COLORS[index % CATEGORY_COLORS.length]}`}
                 />
-                <span className="truncate text-xs font-medium text-neutral-800 dark:text-neutral-100">
+                <span className="truncate text-xs font-medium text-content">
                   {category.category}
                 </span>
               </div>
-              <span className="shrink-0 text-xs font-semibold tabular-nums text-neutral-900 dark:text-neutral-50">
+              <span className="shrink-0 text-xs font-semibold tabular-nums text-content">
                 {formatCurrency(category.cost_usd, currency)}
               </span>
             </div>
-            <div className="mt-1 flex items-center justify-between gap-2 text-[11px] text-neutral-500 dark:text-neutral-400">
+            <div className="mt-1 flex items-center justify-between gap-2 text-[11px] text-content-muted">
               <span>{`${category.percent_of_total.toFixed(1)}%`}</span>
               <span>
                 {t('settings.costDashboard.categoryMeta')
@@ -320,7 +316,7 @@ const UsageLogTable = ({ records, currency }: { records: CostUsageRecord[]; curr
   const { t } = useT();
   if (records.length === 0) {
     return (
-      <div className="text-xs text-neutral-500 dark:text-neutral-400 italic py-2">
+      <div className="text-xs text-content-muted italic py-2">
         {t('settings.costDashboard.noUsageLog')}
       </div>
     );
@@ -330,7 +326,7 @@ const UsageLogTable = ({ records, currency }: { records: CostUsageRecord[]; curr
     <div className="overflow-x-auto -mx-1">
       <table className="w-full min-w-[760px] text-xs">
         <thead>
-          <tr className="border-b border-neutral-200 text-left text-[10px] uppercase tracking-wide text-neutral-500 dark:border-neutral-800 dark:text-neutral-400">
+          <tr className="border-b border-line text-left text-[10px] uppercase tracking-wide text-content-muted">
             <Th>{t('settings.costDashboard.when')}</Th>
             <Th>{t('settings.costDashboard.category')}</Th>
             <Th>{t('settings.costDashboard.model')}</Th>
@@ -344,34 +340,34 @@ const UsageLogTable = ({ records, currency }: { records: CostUsageRecord[]; curr
           {records.map(record => (
             <tr
               key={record.id}
-              className="border-b border-neutral-100 transition-colors last:border-0 hover:bg-neutral-50/60 dark:border-neutral-800/60 dark:hover:bg-neutral-800/40">
+              className="border-b border-line-subtle transition-colors last:border-0 hover:bg-surface-muted/60 dark:border-line/60 dark:hover:bg-surface-muted/40">
               <Td>
-                <div className="tabular-nums text-neutral-700 dark:text-neutral-200">
+                <div className="tabular-nums text-content-secondary">
                   {formatDateTime(record.timestamp)}
                 </div>
               </Td>
               <Td>
-                <span className="inline-flex rounded-full bg-neutral-100 px-2 py-0.5 text-[10px] font-medium text-neutral-700 ring-1 ring-inset ring-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:ring-neutral-700">
+                <span className="inline-flex rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-medium text-content-secondary ring-1 ring-inset ring-neutral-200 dark:ring-neutral-700">
                   {record.category}
                 </span>
               </Td>
               <Td>
-                <div className="max-w-[16rem] truncate font-medium text-neutral-800 dark:text-neutral-100">
+                <div className="max-w-[16rem] truncate font-medium text-content">
                   {record.model}
                 </div>
-                <div className="text-[10px] text-neutral-500 dark:text-neutral-400">
+                <div className="text-[10px] text-content-muted">
                   {record.provider ?? t('settings.costDashboard.unknownProvider')}
                 </div>
               </Td>
               <Td align="right">{formatTokens(record.input_tokens)}</Td>
               <Td align="right">{formatTokens(record.output_tokens)}</Td>
               <Td align="right">
-                <span className="font-semibold tabular-nums text-neutral-900 dark:text-neutral-50">
+                <span className="font-semibold tabular-nums text-content">
                   {formatCurrency(record.cost_usd, currency)}
                 </span>
               </Td>
               <Td>
-                <span className="font-mono text-[10px] text-neutral-500 dark:text-neutral-400">
+                <span className="font-mono text-[10px] text-content-muted">
                   {shortId(record.session_id)}
                 </span>
               </Td>
diff --git a/app/src/components/dashboard/DashboardSkeleton.tsx b/app/src/components/dashboard/DashboardSkeleton.tsx
index c37e1a7c6..e25cd8248 100644
--- a/app/src/components/dashboard/DashboardSkeleton.tsx
+++ b/app/src/components/dashboard/DashboardSkeleton.tsx
@@ -10,15 +10,15 @@ const DashboardSkeleton = () => (
     data-testid="cost-dashboard-skeleton"
     className="space-y-4 animate-pulse">
     <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-      <div className="md:col-span-2 rounded-2xl border border-stone-200 dark:border-neutral-800 p-5 h-32 bg-stone-50 dark:bg-neutral-900/40" />
+      <div className="md:col-span-2 rounded-2xl border border-line p-5 h-32 bg-surface-muted" />
       <div className="grid grid-cols-2 md:grid-cols-1 gap-3">
-        <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 h-14 bg-stone-50 dark:bg-neutral-900/40" />
-        <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 h-14 bg-stone-50 dark:bg-neutral-900/40" />
+        <div className="rounded-2xl border border-line h-14 bg-surface-muted" />
+        <div className="rounded-2xl border border-line h-14 bg-surface-muted" />
       </div>
     </div>
-    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 p-4 h-64 bg-stone-50 dark:bg-neutral-900/40" />
-    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 p-4 h-64 bg-stone-50 dark:bg-neutral-900/40" />
-    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 p-4 h-32 bg-stone-50 dark:bg-neutral-900/40" />
+    <div className="rounded-2xl border border-line p-4 h-64 bg-surface-muted" />
+    <div className="rounded-2xl border border-line p-4 h-64 bg-surface-muted" />
+    <div className="rounded-2xl border border-line p-4 h-32 bg-surface-muted" />
   </div>
 );
 
diff --git a/app/src/components/dashboard/ModelCostTable.tsx b/app/src/components/dashboard/ModelCostTable.tsx
index 16857b69e..844cc285e 100644
--- a/app/src/components/dashboard/ModelCostTable.tsx
+++ b/app/src/components/dashboard/ModelCostTable.tsx
@@ -19,7 +19,7 @@ const PROVIDER_PALETTE: Record<string, string> = {
 };
 
 const PROVIDER_FALLBACK =
-  'bg-stone-200 text-stone-700 dark:bg-neutral-800 dark:text-neutral-300 ring-stone-300 dark:ring-neutral-700';
+  'bg-surface-strong text-content-secondary ring-stone-300 dark:ring-neutral-700';
 
 function providerChipClass(provider: string | null): string {
   if (!provider) return PROVIDER_FALLBACK;
@@ -30,9 +30,7 @@ const ModelCostTable = ({ models, currency }: ModelCostTableProps) => {
   const { t } = useT();
   if (models.length === 0) {
     return (
-      <div
-        data-testid="model-cost-table-empty"
-        className="text-xs text-stone-500 dark:text-neutral-400 italic py-2">
+      <div data-testid="model-cost-table-empty" className="text-xs text-content-muted italic py-2">
         {t('settings.costDashboard.noModels')}
       </div>
     );
@@ -42,7 +40,7 @@ const ModelCostTable = ({ models, currency }: ModelCostTableProps) => {
     <div className="overflow-x-auto -mx-1" data-testid="model-cost-table">
       <table className="w-full text-xs">
         <thead>
-          <tr className="text-left text-[10px] uppercase tracking-wide text-stone-500 dark:text-neutral-400 border-b border-stone-200 dark:border-neutral-800">
+          <tr className="text-left text-[10px] uppercase tracking-wide text-content-muted border-b border-line">
             <Th>{t('settings.costDashboard.model')}</Th>
             <Th>{t('settings.costDashboard.provider')}</Th>
             <Th align="right">{t('settings.costDashboard.tokens')}</Th>
@@ -61,10 +59,10 @@ const ModelCostTable = ({ models, currency }: ModelCostTableProps) => {
               <tr
                 key={row.model}
                 data-testid={`model-row-${row.model}`}
-                className="group border-b border-stone-100 dark:border-neutral-800/60 last:border-0 hover:bg-stone-50/60 dark:hover:bg-neutral-800/40 transition-colors">
+                className="group border-b border-line-subtle dark:border-line/60 last:border-0 hover:bg-surface-muted/60 dark:hover:bg-surface-muted/40 transition-colors">
                 <Td>
                   <div
-                    className="font-medium text-stone-800 dark:text-neutral-100 truncate max-w-[16rem]"
+                    className="font-medium text-content truncate max-w-[16rem]"
                     title={row.model}>
                     {modelName}
                   </div>
@@ -76,17 +74,15 @@ const ModelCostTable = ({ models, currency }: ModelCostTableProps) => {
                   </span>
                 </Td>
                 <Td align="right">
-                  <span className="tabular-nums text-stone-700 dark:text-neutral-200">
+                  <span className="tabular-nums text-content-secondary">
                     {formatTokens(row.total_tokens)}
                   </span>
                 </Td>
                 <Td align="right">
-                  <span className="tabular-nums text-stone-700 dark:text-neutral-200">
-                    {row.request_count}
-                  </span>
+                  <span className="tabular-nums text-content-secondary">{row.request_count}</span>
                 </Td>
                 <Td align="right">
-                  <span className="tabular-nums font-medium text-stone-900 dark:text-neutral-50">
+                  <span className="tabular-nums font-medium text-content">
                     {formatCurrency(row.cost_usd, currency)}
                   </span>
                 </Td>
@@ -94,13 +90,13 @@ const ModelCostTable = ({ models, currency }: ModelCostTableProps) => {
                   <div className="flex items-center justify-end gap-2">
                     <div
                       aria-hidden
-                      className="h-1 w-12 rounded-full bg-stone-200 dark:bg-neutral-800 overflow-hidden">
+                      className="h-1 w-12 rounded-full bg-surface-strong overflow-hidden">
                       <div
                         className="h-full rounded-full bg-ocean-500"
                         style={{ width: `${sharePct}%` }}
                       />
                     </div>
-                    <span className="tabular-nums w-10 text-right text-stone-600 dark:text-neutral-300">
+                    <span className="tabular-nums w-10 text-right text-content-secondary">
                       {`${sharePct.toFixed(1)}%`}
                     </span>
                   </div>
diff --git a/app/src/components/feedback/FeedbackAdminMenu.tsx b/app/src/components/feedback/FeedbackAdminMenu.tsx
index 7e2cbc1bc..0eb8a4623 100644
--- a/app/src/components/feedback/FeedbackAdminMenu.tsx
+++ b/app/src/components/feedback/FeedbackAdminMenu.tsx
@@ -47,7 +47,7 @@ export default function FeedbackAdminMenu({ item, onUpdated }: FeedbackAdminMenu
 
   return (
     <div className="flex items-center gap-2">
-      <label htmlFor={`feedback-status-${item.id}`} className="text-xs text-stone-500">
+      <label htmlFor={`feedback-status-${item.id}`} className="text-xs text-content-muted">
         {t('feedback.admin.status')}
       </label>
       <select
@@ -55,7 +55,7 @@ export default function FeedbackAdminMenu({ item, onUpdated }: FeedbackAdminMenu
         value={item.status}
         disabled={pending}
         onChange={e => handleChange(e.target.value as FeedbackStatus)}
-        className="text-xs px-2 py-1 rounded-md bg-white/5 border border-white/10 focus:outline-none focus:ring-2 focus:ring-primary-500/50 disabled:opacity-50">
+        className="text-xs px-2 py-1 rounded-md bg-surface/5 border border-white/10 focus:outline-none focus:ring-2 focus:ring-primary-500/50 disabled:opacity-50">
         {ADMIN_STATUSES.map(status => (
           <option key={status} value={status}>
             {t(STATUS_LABEL_KEYS[status])}
diff --git a/app/src/components/feedback/FeedbackComments.tsx b/app/src/components/feedback/FeedbackComments.tsx
index bc6a0c241..5ca23797d 100644
--- a/app/src/components/feedback/FeedbackComments.tsx
+++ b/app/src/components/feedback/FeedbackComments.tsx
@@ -82,15 +82,13 @@ export default function FeedbackComments({ feedbackId, onCommentAdded }: Feedbac
   };
 
   return (
-    <div className="mt-3 space-y-3 border-t border-neutral-200 pt-3 dark:border-neutral-800">
+    <div className="mt-3 space-y-3 border-t border-line pt-3">
       {isLoading ? (
-        <p className="text-xs text-neutral-500 dark:text-neutral-400">{t('common.loading')}</p>
+        <p className="text-xs text-content-muted">{t('common.loading')}</p>
       ) : loadError ? (
         <p className="text-xs text-coral-600 dark:text-coral-400">{loadError}</p>
       ) : comments.length === 0 ? (
-        <p className="text-xs text-neutral-500 dark:text-neutral-400">
-          {t('feedback.comments.empty')}
-        </p>
+        <p className="text-xs text-content-muted">{t('feedback.comments.empty')}</p>
       ) : (
         <ul className="space-y-2">
           {comments.map(comment => {
@@ -98,9 +96,9 @@ export default function FeedbackComments({ feedbackId, onCommentAdded }: Feedbac
             return (
               <li
                 key={comment.id}
-                className="rounded-xl bg-neutral-50 px-3 py-2 dark:bg-white/[0.03]">
-                <div className="flex items-center gap-2 text-xs text-neutral-400 dark:text-neutral-500">
-                  <span className="font-medium text-neutral-600 dark:text-neutral-300">
+                className="rounded-xl bg-surface-muted px-3 py-2 dark:bg-white/[0.03]">
+                <div className="flex items-center gap-2 text-xs text-content-faint">
+                  <span className="font-medium text-content-secondary">
                     {isMine
                       ? t('feedback.comments.you')
                       : comment.userName?.trim() || authorLabel(comment.user)}
@@ -108,7 +106,7 @@ export default function FeedbackComments({ feedbackId, onCommentAdded }: Feedbac
                   <span>·</span>
                   <span>{formatDate(comment.createdAt)}</span>
                 </div>
-                <p className="mt-1 whitespace-pre-wrap break-words text-sm text-neutral-700 dark:text-neutral-300">
+                <p className="mt-1 whitespace-pre-wrap break-words text-sm text-content-secondary">
                   {comment.body}
                 </p>
               </li>
@@ -125,7 +123,7 @@ export default function FeedbackComments({ feedbackId, onCommentAdded }: Feedbac
           placeholder={t('feedback.comments.placeholder')}
           disabled={posting}
           rows={2}
-          className="flex-1 resize-y rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 transition-all focus:border-primary-500/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500/30 dark:border-neutral-700 dark:bg-white/[0.03] dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="flex-1 resize-y rounded-xl border border-line bg-surface-muted px-3 py-2 text-sm text-content placeholder:text-neutral-400 transition-all focus:border-primary-500/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500/30 dark:border-line-strong dark:bg-white/[0.03] dark:placeholder:text-neutral-500"
         />
         <Button
           variant="primary"
diff --git a/app/src/components/feedback/FeedbackFilterSelect.tsx b/app/src/components/feedback/FeedbackFilterSelect.tsx
index ceb281d4e..8a0584692 100644
--- a/app/src/components/feedback/FeedbackFilterSelect.tsx
+++ b/app/src/components/feedback/FeedbackFilterSelect.tsx
@@ -132,8 +132,8 @@ export default function FeedbackFilterSelect({
         onKeyDown={onTriggerKeyDown}
         className={`flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${
           open
-            ? 'border-primary-500/50 bg-white text-neutral-900 ring-2 ring-primary-500/20 dark:bg-neutral-800 dark:text-neutral-100'
-            : 'border-neutral-200 bg-neutral-50 text-neutral-600 hover:border-neutral-300 hover:text-neutral-800 dark:border-neutral-700 dark:bg-white/[0.03] dark:text-neutral-300 dark:hover:text-neutral-100'
+            ? 'border-primary-500/50 bg-surface text-content ring-2 ring-primary-500/20'
+            : 'border-line bg-surface-muted text-content-secondary hover:border-line-strong hover:text-content dark:border-line-strong dark:bg-white/[0.03] dark:hover:text-content'
         }`}>
         {current?.label}
         <svg
@@ -153,7 +153,7 @@ export default function FeedbackFilterSelect({
           aria-label={ariaLabel}
           aria-activedescendant={activeIndex >= 0 ? optionId(activeIndex) : undefined}
           onKeyDown={onListKeyDown}
-          className="absolute z-20 mt-1.5 min-w-[10rem] animate-scale-in overflow-hidden rounded-xl border border-neutral-200 bg-white p-1 shadow-medium focus:outline-none dark:border-neutral-700 dark:bg-neutral-800">
+          className="absolute z-20 mt-1.5 min-w-[10rem] animate-scale-in overflow-hidden rounded-xl border border-line bg-surface p-1 shadow-medium focus:outline-none dark:border-line-strong">
           {options.map((option, index) => {
             const selected = option.value === value;
             const active = index === activeIndex;
@@ -167,10 +167,10 @@ export default function FeedbackFilterSelect({
                   className={`flex w-full items-center justify-between gap-3 rounded-lg px-3 py-1.5 text-left text-xs transition-colors ${
                     selected
                       ? 'font-medium text-primary-600 dark:text-primary-400'
-                      : 'text-neutral-600 dark:text-neutral-300'
+                      : 'text-content-secondary'
                   } ${
                     active
-                      ? 'bg-neutral-100 dark:bg-white/[0.08]'
+                      ? 'bg-surface-subtle dark:bg-white/[0.08]'
                       : selected
                         ? 'bg-primary-500/10'
                         : ''
diff --git a/app/src/components/feedback/FeedbackItemRow.tsx b/app/src/components/feedback/FeedbackItemRow.tsx
index 075c7d66c..f4087e2c6 100644
--- a/app/src/components/feedback/FeedbackItemRow.tsx
+++ b/app/src/components/feedback/FeedbackItemRow.tsx
@@ -57,7 +57,7 @@ export default function FeedbackItemRow({
   const avatarInitial = (item.createdByName?.trim() || handle).charAt(0).toUpperCase();
 
   return (
-    <div className="group flex items-start gap-3 rounded-2xl border border-neutral-200 bg-white p-4 transition-all hover:border-neutral-300 hover:shadow-soft dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-neutral-700">
+    <div className="group flex items-start gap-3 rounded-2xl border border-line bg-surface p-4 transition-all hover:border-line-strong hover:shadow-soft dark:hover:border-line-strong">
       <FeedbackVoteControl item={item} onVoted={onChange} />
 
       <div className="min-w-0 flex-1">
@@ -68,18 +68,18 @@ export default function FeedbackItemRow({
           <FeedbackStatusBadge status={item.status} />
         </div>
 
-        <h3 className="mt-2 break-words font-display text-[15px] font-semibold leading-snug text-neutral-900 dark:text-neutral-100">
+        <h3 className="mt-2 break-words font-title text-[15px] font-semibold leading-snug text-content">
           {item.title}
         </h3>
 
         <p
-          className={`mt-1 whitespace-pre-wrap break-words text-sm text-neutral-500 dark:text-neutral-400 ${
+          className={`mt-1 whitespace-pre-wrap break-words text-sm text-content-muted ${
             expanded ? '' : 'line-clamp-2'
           }`}>
           {item.body}
         </p>
 
-        <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-neutral-400 dark:text-neutral-500">
+        <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-content-faint">
           <span className="flex items-center gap-1.5">
             <span
               className={`flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold ${avatarTint(
@@ -87,7 +87,7 @@ export default function FeedbackItemRow({
               )}`}>
               {avatarInitial}
             </span>
-            <span className="font-medium text-neutral-500 dark:text-neutral-400">{authorName}</span>
+            <span className="font-medium text-content-muted">{authorName}</span>
           </span>
           <span>·</span>
           <span>{formatDate(item.createdAt)}</span>
@@ -127,7 +127,7 @@ export default function FeedbackItemRow({
         )}
 
         {isAdmin && (
-          <div className="mt-3 border-t border-neutral-200 pt-3 dark:border-neutral-800">
+          <div className="mt-3 border-t border-line pt-3">
             <FeedbackAdminMenu item={item} onUpdated={onChange} />
           </div>
         )}
diff --git a/app/src/components/feedback/FeedbackStatusBadge.tsx b/app/src/components/feedback/FeedbackStatusBadge.tsx
index 45cd428ff..e6942dcfb 100644
--- a/app/src/components/feedback/FeedbackStatusBadge.tsx
+++ b/app/src/components/feedback/FeedbackStatusBadge.tsx
@@ -6,10 +6,7 @@ const STATUS_STYLES: Record<FeedbackStatus, { pill: string; dot: string }> = {
   open: { pill: 'bg-primary-500/10 text-primary-600 dark:text-primary-400', dot: 'bg-primary-500' },
   planned: { pill: 'bg-amber-500/10 text-amber-600 dark:text-amber-400', dot: 'bg-amber-500' },
   completed: { pill: 'bg-sage-500/10 text-sage-600 dark:text-sage-400', dot: 'bg-sage-500' },
-  closed: {
-    pill: 'bg-neutral-500/10 text-neutral-500 dark:text-neutral-400',
-    dot: 'bg-neutral-400',
-  },
+  closed: { pill: 'bg-neutral-500/10 text-content-muted', dot: 'bg-neutral-400' },
 };
 
 const STATUS_LABEL_KEYS: Record<FeedbackStatus, string> = {
diff --git a/app/src/components/feedback/FeedbackSubmitForm.tsx b/app/src/components/feedback/FeedbackSubmitForm.tsx
index 0eb4d2cd5..a133e776a 100644
--- a/app/src/components/feedback/FeedbackSubmitForm.tsx
+++ b/app/src/components/feedback/FeedbackSubmitForm.tsx
@@ -20,9 +20,9 @@ interface FeedbackSubmitFormProps {
 }
 
 const INPUT_CLASS =
-  'w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-900 ' +
+  'w-full rounded-xl border border-line bg-surface-muted px-4 py-2.5 text-sm text-content ' +
   'placeholder:text-neutral-400 transition-all focus:border-primary-500/50 focus:bg-white focus:outline-none ' +
-  'focus:ring-2 focus:ring-primary-500/30 dark:border-neutral-700 dark:bg-white/[0.03] dark:text-neutral-100 ' +
+  'focus:ring-2 focus:ring-primary-500/30 dark:border-line-strong dark:bg-white/[0.03] dark:text-content ' +
   'dark:placeholder:text-neutral-500 dark:focus:bg-white/[0.06]';
 
 export default function FeedbackSubmitForm({ onAccepted }: FeedbackSubmitFormProps) {
@@ -76,13 +76,11 @@ export default function FeedbackSubmitForm({ onAccepted }: FeedbackSubmitFormPro
         : 'text-coral-600 dark:text-coral-400';
 
   return (
-    <div className="rounded-2xl border border-neutral-200 bg-white p-6 shadow-soft dark:border-neutral-800 dark:bg-neutral-900 dark:shadow-none">
-      <h2 className="font-display text-base font-semibold text-neutral-900 dark:text-neutral-100">
+    <div className="rounded-2xl border border-line bg-surface p-6 shadow-soft dark:shadow-none">
+      <h2 className="font-title text-base font-semibold text-content">
         {t('feedback.submit.heading')}
       </h2>
-      <p className="mb-4 mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
-        {t('feedback.submit.subheading')}
-      </p>
+      <p className="mb-4 mt-0.5 text-xs text-content-muted">{t('feedback.submit.subheading')}</p>
 
       <div className="mb-4 grid grid-cols-2 gap-2.5">
         <button
@@ -92,7 +90,7 @@ export default function FeedbackSubmitForm({ onAccepted }: FeedbackSubmitFormPro
           className={`flex items-center justify-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-medium transition-all ${
             type === 'feature'
               ? 'border-primary-500 bg-primary-500/10 text-primary-600 ring-1 ring-primary-500/30 dark:text-primary-400'
-              : 'border-neutral-200 text-neutral-500 hover:border-neutral-300 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-white/[0.03]'
+              : 'border-line text-content-muted hover:border-line-strong hover:bg-surface-muted dark:border-line-strong dark:hover:bg-white/[0.03]'
           }`}>
           <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
@@ -111,7 +109,7 @@ export default function FeedbackSubmitForm({ onAccepted }: FeedbackSubmitFormPro
           className={`flex items-center justify-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-medium transition-all ${
             type === 'bug'
               ? 'border-coral-500 bg-coral-500/10 text-coral-600 ring-1 ring-coral-500/30 dark:text-coral-400'
-              : 'border-neutral-200 text-neutral-500 hover:border-neutral-300 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-white/[0.03]'
+              : 'border-line text-content-muted hover:border-line-strong hover:bg-surface-muted dark:border-line-strong dark:hover:bg-white/[0.03]'
           }`}>
           <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
@@ -160,7 +158,7 @@ export default function FeedbackSubmitForm({ onAccepted }: FeedbackSubmitFormPro
         <div className="flex items-center gap-3">
           {message && <p className={`text-xs ${messageClass}`}>{message}</p>}
           {body.length > 0 && (
-            <span className="text-[11px] tabular-nums text-neutral-400 dark:text-neutral-600">
+            <span className="text-[11px] tabular-nums text-content-faint dark:text-neutral-600">
               {body.length}/{BODY_MAX}
             </span>
           )}
diff --git a/app/src/components/feedback/FeedbackVoteControl.tsx b/app/src/components/feedback/FeedbackVoteControl.tsx
index 6f543dc7d..dd0bbd873 100644
--- a/app/src/components/feedback/FeedbackVoteControl.tsx
+++ b/app/src/components/feedback/FeedbackVoteControl.tsx
@@ -63,14 +63,14 @@ export default function FeedbackVoteControl({ item, onVoted }: FeedbackVoteContr
     ? 'bg-orange-500/10'
     : downActive
       ? 'bg-indigo-500/10'
-      : 'bg-neutral-100 dark:bg-white/[0.04]';
+      : 'bg-surface-subtle dark:bg-white/[0.04]';
   const countColor = error
     ? 'text-coral-500'
     : upActive
       ? 'text-orange-500'
       : downActive
         ? 'text-indigo-400'
-        : 'text-neutral-700 dark:text-neutral-200';
+        : 'text-content-secondary';
 
   return (
     <div
@@ -85,7 +85,7 @@ export default function FeedbackVoteControl({ item, onVoted }: FeedbackVoteContr
         className={`flex h-6 w-6 items-center justify-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
           upActive
             ? 'text-orange-500'
-            : 'text-neutral-400 hover:bg-orange-500/10 hover:text-orange-500 dark:text-neutral-500'
+            : 'text-content-faint hover:bg-orange-500/10 hover:text-orange-500'
         }`}>
         <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
           <path d="M10 3.5a1 1 0 01.78.375l5.5 6.5A1 1 0 0115.5 12H13v4a1 1 0 01-1 1H8a1 1 0 01-1-1v-4H4.5a1 1 0 01-.78-1.625l5.5-6.5A1 1 0 0110 3.5z" />
@@ -106,7 +106,7 @@ export default function FeedbackVoteControl({ item, onVoted }: FeedbackVoteContr
         className={`flex h-6 w-6 items-center justify-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
           downActive
             ? 'text-indigo-400'
-            : 'text-neutral-400 hover:bg-indigo-500/10 hover:text-indigo-400 dark:text-neutral-500'
+            : 'text-content-faint hover:bg-indigo-500/10 hover:text-indigo-400'
         }`}>
         <svg className="h-4 w-4 rotate-180" fill="currentColor" viewBox="0 0 20 20">
           <path d="M10 3.5a1 1 0 01.78.375l5.5 6.5A1 1 0 0115.5 12H13v4a1 1 0 01-1 1H8a1 1 0 01-1-1v-4H4.5a1 1 0 01-.78-1.625l5.5-6.5A1 1 0 0110 3.5z" />
diff --git a/app/src/components/home/HomeBanners.tsx b/app/src/components/home/HomeBanners.tsx
index ab8e4f79d..466d3cbd4 100644
--- a/app/src/components/home/HomeBanners.tsx
+++ b/app/src/components/home/HomeBanners.tsx
@@ -136,7 +136,7 @@ export function EarlyBirdyBanner({ onDismiss }: { onDismiss?: () => void }) {
           </p>
           <p className="mt-1 text-sm leading-relaxed text-orange-600 dark:text-orange-300/80">
             {t('home.banners.earlyBirdUseCode')}{' '}
-            <span className="rounded-md border border-orange-300 bg-white px-1.5 py-0.5 font-mono text-[12px] font-bold text-orange-700 dark:border-orange-500/40 dark:bg-neutral-900 dark:text-orange-300">
+            <span className="rounded-md border border-orange-300 bg-surface px-1.5 py-0.5 font-mono text-[12px] font-bold text-orange-700 dark:border-orange-500/40 dark:text-orange-300">
               EARLYBIRDY
             </span>{' '}
             {t('home.banners.earlyBirdOn')}{' '}
diff --git a/app/src/components/intelligence/ActionableCard.tsx b/app/src/components/intelligence/ActionableCard.tsx
index 073131b6a..f3100ebe4 100644
--- a/app/src/components/intelligence/ActionableCard.tsx
+++ b/app/src/components/intelligence/ActionableCard.tsx
@@ -88,13 +88,13 @@ function SnoozeDropdownPortal({ isOpen, buttonRef, onClose, onSnooze }: SnoozeDr
     <div
       ref={dropdownRef}
       data-snooze-dropdown
-      className="fixed py-1 bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-lg shadow-xl min-w-[120px] z-[9999] animate-fade-in"
+      className="fixed py-1 bg-surface border border-line rounded-lg shadow-xl min-w-[120px] z-[9999] animate-fade-in"
       style={{ top: position.top, left: position.left }}>
       {SNOOZE_OPTIONS.map(option => (
         <button
           key={option.label}
           onClick={() => onSnooze(option.duration)}
-          className="w-full text-left px-3 py-1.5 text-xs text-stone-900 dark:text-neutral-100 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors cursor-pointer">
+          className="w-full text-left px-3 py-1.5 text-xs text-content hover:bg-surface-hover dark:bg-surface-muted transition-colors cursor-pointer">
           {option.label}
         </button>
       ))}
@@ -237,7 +237,7 @@ export function ActionableCard({
   const priorityClasses = {
     critical: 'border-coral-500/30 bg-coral-500/5',
     important: 'border-amber-500/30 bg-amber-500/5',
-    normal: 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60',
+    normal: 'border-line bg-surface-muted',
   };
 
   const priorityDotClasses = {
@@ -260,13 +260,13 @@ export function ActionableCard({
       <div
         className={`
           relative p-4 rounded-xl border backdrop-blur-sm transition-all duration-200
-          hover:bg-stone-50 dark:hover:bg-neutral-800/60 hover:border-stone-200 dark:border-neutral-800
+          hover:bg-surface-hover hover:border-line dark:border-line
           ${priorityClasses[item.priority]}
         `}>
         {/* Main content row */}
         <div className="flex items-start gap-3">
           {/* Icon */}
-          <div className="w-8 h-8 flex items-center justify-center text-stone-600 dark:text-neutral-300 flex-shrink-0 mt-0.5">
+          <div className="w-8 h-8 flex items-center justify-center text-content-secondary flex-shrink-0 mt-0.5">
             {sourceIcon}
           </div>
 
@@ -274,11 +274,9 @@ export function ActionableCard({
           <div className="flex-1 min-w-0">
             <div className="flex items-start justify-between gap-3">
               <div className="flex-1 min-w-0">
-                <h3 className="text-sm font-medium text-stone-900 dark:text-neutral-100 leading-snug">
-                  {item.title}
-                </h3>
+                <h3 className="text-sm font-medium text-content leading-snug">{item.title}</h3>
                 {item.description && (
-                  <p className="text-xs text-stone-400 dark:text-neutral-500 mt-1 leading-relaxed">
+                  <p className="text-xs text-content-faint mt-1 leading-relaxed">
                     {item.description}
                   </p>
                 )}
@@ -289,7 +287,7 @@ export function ActionableCard({
                 {/* Complete button */}
                 <button
                   onClick={handleComplete}
-                  className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 dark:text-neutral-500 hover:text-sage-400 hover:bg-sage-400/10 transition-all duration-150"
+                  className="w-6 h-6 flex items-center justify-center rounded-md text-content-faint hover:text-sage-400 hover:bg-sage-400/10 transition-all duration-150"
                   title={t('actionable.complete')}>
                   <svg
                     className="w-3.5 h-3.5"
@@ -308,7 +306,7 @@ export function ActionableCard({
                 {/* Dismiss button */}
                 <button
                   onClick={handleDismiss}
-                  className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 dark:text-neutral-500 hover:text-coral-400 hover:bg-coral-400/10 transition-all duration-150"
+                  className="w-6 h-6 flex items-center justify-center rounded-md text-content-faint hover:text-coral-400 hover:bg-coral-400/10 transition-all duration-150"
                   title={t('actionable.dismiss')}>
                   <svg
                     className="w-3.5 h-3.5"
@@ -329,7 +327,7 @@ export function ActionableCard({
                   <button
                     ref={snoozeButtonRef}
                     onClick={() => setShowSnoozeMenu(!showSnoozeMenu)}
-                    className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 dark:text-neutral-500 hover:text-amber-400 hover:bg-amber-400/10 transition-all duration-150"
+                    className="w-6 h-6 flex items-center justify-center rounded-md text-content-faint hover:text-amber-400 hover:bg-amber-400/10 transition-all duration-150"
                     title={t('actionable.snooze')}>
                     <svg
                       className="w-3.5 h-3.5"
@@ -352,16 +350,16 @@ export function ActionableCard({
             <div className="flex items-center gap-2 mt-2">
               <div className="flex items-center gap-1.5">
                 <div className={`w-1.5 h-1.5 rounded-full ${priorityDotClasses[item.priority]}`} />
-                <span className="text-xs text-stone-500 dark:text-neutral-400">
+                <span className="text-xs text-content-muted">
                   {item.sourceLabel || item.source}
                 </span>
               </div>
-              <span className="text-xs text-stone-600 dark:text-neutral-300">•</span>
-              <span className="text-xs text-stone-500 dark:text-neutral-400">{timeAgo}</span>
+              <span className="text-xs text-content-secondary">•</span>
+              <span className="text-xs text-content-muted">{timeAgo}</span>
               {isNew && (
                 <>
-                  <span className="text-xs text-stone-600 dark:text-neutral-300">•</span>
-                  <span className="text-xs bg-sage-500 text-white px-1.5 py-0.5 rounded-sm font-medium">
+                  <span className="text-xs text-content-secondary">•</span>
+                  <span className="text-xs bg-sage-500 text-content-inverted px-1.5 py-0.5 rounded-sm font-medium">
                     {t('actionable.new')}
                   </span>
                 </>
diff --git a/app/src/components/intelligence/AddMemorySourceDialog.tsx b/app/src/components/intelligence/AddMemorySourceDialog.tsx
index d43fbf130..3d04dd868 100644
--- a/app/src/components/intelligence/AddMemorySourceDialog.tsx
+++ b/app/src/components/intelligence/AddMemorySourceDialog.tsx
@@ -198,27 +198,23 @@ export function AddMemorySourceDialog({ open, onClose, onAdded }: AddMemorySourc
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-      <div className="w-full max-w-lg rounded-xl border border-stone-200 bg-white p-6 shadow-xl dark:border-neutral-700 dark:bg-neutral-900">
-        <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
-          {t('memorySources.addSource')}
-        </h2>
+      <div className="w-full max-w-lg rounded-xl border border-line bg-surface p-6 shadow-xl">
+        <h2 className="text-lg font-semibold text-content">{t('memorySources.addSource')}</h2>
 
         {!kind ? (
           <>
-            <p className="mt-2 text-sm text-stone-500 dark:text-neutral-400">
-              {t('memorySources.pickKind')}
-            </p>
+            <p className="mt-2 text-sm text-content-muted">{t('memorySources.pickKind')}</p>
             <div className="mt-4 grid grid-cols-2 gap-3">
               {ALL_KINDS.map(k => (
                 <button
                   key={k}
                   type="button"
                   onClick={() => setKind(k)}
-                  className="flex items-center gap-3 rounded-lg border border-stone-200 p-3
+                  className="flex items-center gap-3 rounded-lg border border-line p-3
                              text-left transition-colors hover:border-primary-400 hover:bg-primary-50
-                             dark:border-neutral-700 dark:hover:border-primary-500 dark:hover:bg-primary-500/10">
+                             dark:border-line-strong dark:hover:border-primary-500 dark:hover:bg-primary-500/10">
                   <span className="text-xl">{SOURCE_KIND_ICONS[k]}</span>
-                  <span className="text-sm font-medium text-stone-800 dark:text-neutral-200">
+                  <span className="text-sm font-medium text-content">
                     {t(SOURCE_KIND_LABEL_KEYS[k])}
                   </span>
                 </button>
@@ -232,7 +228,7 @@ export function AddMemorySourceDialog({ open, onClose, onAdded }: AddMemorySourc
           </>
         ) : (
           <>
-            <p className="mt-1 text-sm text-stone-500 dark:text-neutral-400">
+            <p className="mt-1 text-sm text-content-muted">
               {SOURCE_KIND_ICONS[kind]} {t(SOURCE_KIND_LABEL_KEYS[kind])}
             </p>
 
@@ -345,24 +341,24 @@ function FolderField({ label, value, onChange }: FolderFieldProps) {
   const { t } = useT();
   return (
     <label className="block">
-      <span className="text-xs font-medium text-stone-600 dark:text-neutral-400">{label}</span>
+      <span className="text-xs font-medium text-content-secondary">{label}</span>
       <div className="mt-1 flex gap-2">
         <input
           type="text"
           value={value}
           onChange={e => onChange(e.target.value)}
           placeholder={t('memorySources.folderPathPlaceholder')}
-          className="block w-full rounded-md border border-stone-300 bg-white px-3 py-2
-                     text-sm text-stone-900 placeholder-stone-400
+          className="block w-full rounded-md border border-line-strong bg-surface px-3 py-2
+                     text-sm text-content placeholder-content-faint
                      focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-400
-                     dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100
-                     dark:placeholder-neutral-500 dark:focus:border-primary-500"
+                     dark:border-neutral-600 dark:bg-surface-muted dark:text-content
+                     dark:placeholder-content-faint dark:focus:border-primary-500"
         />
         <label
-          className="shrink-0 cursor-pointer rounded-md border border-stone-300 bg-white px-3 py-2
-                     text-xs font-medium text-stone-700 transition-colors
+          className="shrink-0 cursor-pointer rounded-md border border-line-strong bg-surface px-3 py-2
+                     text-xs font-medium text-content-secondary transition-colors
                      hover:border-primary-400 hover:text-primary-600
-                     dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300
+                     dark:border-neutral-600 dark:bg-surface-muted dark:text-content-secondary
                      dark:hover:border-primary-500 dark:hover:text-primary-400">
           {t('memorySources.browse')}
           <input
@@ -399,17 +395,17 @@ function FolderField({ label, value, onChange }: FolderFieldProps) {
 function Field({ label, value, onChange, placeholder, type = 'text' }: FieldProps) {
   return (
     <label className="block">
-      <span className="text-xs font-medium text-stone-600 dark:text-neutral-400">{label}</span>
+      <span className="text-xs font-medium text-content-secondary">{label}</span>
       <input
         type={type}
         value={value}
         onChange={e => onChange(e.target.value)}
         placeholder={placeholder}
-        className="mt-1 block w-full rounded-md border border-stone-300 bg-white px-3 py-2
-                   text-sm text-stone-900 placeholder-stone-400
+        className="mt-1 block w-full rounded-md border border-line-strong bg-surface px-3 py-2
+                   text-sm text-content placeholder-content-faint
                    focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-400
-                   dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100
-                   dark:placeholder-neutral-500 dark:focus:border-primary-500"
+                   dark:border-neutral-600 dark:bg-surface-muted dark:text-content
+                   dark:placeholder-content-faint dark:focus:border-primary-500"
       />
     </label>
   );
@@ -655,11 +651,7 @@ function ComposioPicker({
   }, [open]);
 
   if (loadingConnections) {
-    return (
-      <p className="text-xs text-stone-500 dark:text-neutral-400">
-        {t('memorySources.loadingConnections')}
-      </p>
-    );
+    return <p className="text-xs text-content-muted">{t('memorySources.loadingConnections')}</p>;
   }
 
   if (connections.length === 0) {
@@ -757,7 +749,7 @@ function ComposioPicker({
 
   return (
     <div className="block" ref={containerRef}>
-      <span className="text-xs font-medium text-stone-600 dark:text-neutral-400">
+      <span className="text-xs font-medium text-content-secondary">
         {t('memorySources.pickConnection')}
       </span>
       <div className="relative mt-1">
@@ -770,15 +762,15 @@ function ComposioPicker({
           aria-controls={open ? LISTBOX_ID : undefined}
           onClick={() => (open ? close(false) : openListbox())}
           onKeyDown={onButtonKeyDown}
-          className="flex w-full items-center justify-between rounded-md border border-stone-300
-                     bg-white px-3 py-2 text-left text-sm text-stone-900
+          className="flex w-full items-center justify-between rounded-md border border-line-strong
+                     bg-surface px-3 py-2 text-left text-sm text-content
                      focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-400
-                     dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100
+                     dark:border-neutral-600 dark:bg-surface-muted dark:text-content
                      dark:focus:border-primary-500">
-          <span className={selected ? '' : 'text-stone-400 dark:text-neutral-500'}>
+          <span className={selected ? '' : 'text-content-faint'}>
             {selected ? selected.label : t('memorySources.selectConnection')}
           </span>
-          <span aria-hidden className="ml-2 text-stone-400 dark:text-neutral-500">
+          <span aria-hidden className="ml-2 text-content-faint">
             ▾
           </span>
         </button>
@@ -794,8 +786,8 @@ function ComposioPicker({
             onKeyDown={onListKeyDown}
             data-testid="composio-connection-listbox"
             className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border
-                       border-stone-200 bg-white py-1 shadow-lg focus:outline-none
-                       dark:border-neutral-700 dark:bg-neutral-800">
+                       border-line bg-surface py-1 shadow-lg focus:outline-none
+                       dark:border-line-strong dark:bg-surface-muted">
             {entries.map((entry, index) => {
               const isSelected = entry.conn.id === connectionId;
               const isActive = index === activeIndex;
@@ -814,8 +806,8 @@ function ComposioPicker({
                   className={[
                     'flex items-center justify-between gap-2 px-3 py-2 text-sm',
                     entry.supported
-                      ? 'cursor-pointer text-stone-800 dark:text-neutral-200'
-                      : 'cursor-not-allowed text-stone-400 dark:text-neutral-500',
+                      ? 'cursor-pointer text-content'
+                      : 'cursor-not-allowed text-content-faint',
                     isActive && entry.supported ? 'bg-primary-50 dark:bg-primary-500/10' : '',
                   ].join(' ')}>
                   <span className="flex items-center gap-2 truncate">
@@ -829,9 +821,9 @@ function ComposioPicker({
                   {!entry.supported && (
                     <span
                       data-testid={`composio-option-coming-soon-${entry.conn.id}`}
-                      className="shrink-0 rounded-full bg-stone-100 px-2 py-0.5 text-[10px]
-                                 font-medium uppercase tracking-wide text-stone-500
-                                 dark:bg-neutral-700 dark:text-neutral-400">
+                      className="shrink-0 rounded-full bg-surface-subtle px-2 py-0.5 text-[10px]
+                                 font-medium uppercase tracking-wide text-content-muted
+                                 dark:bg-neutral-700 dark:text-content-muted">
                       {t('memorySources.comingSoon')}
                     </span>
                   )}
diff --git a/app/src/components/intelligence/AgentsLibraryPanel.tsx b/app/src/components/intelligence/AgentsLibraryPanel.tsx
index 75d322626..0c444f5cc 100644
--- a/app/src/components/intelligence/AgentsLibraryPanel.tsx
+++ b/app/src/components/intelligence/AgentsLibraryPanel.tsx
@@ -117,13 +117,11 @@ export default function AgentsLibraryPanel({
     <section className="space-y-3">
       <div className="flex flex-wrap items-start justify-between gap-2">
         <div className="min-w-0">
-          <h3 className="flex items-center gap-2 truncate text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          <h3 className="flex items-center gap-2 truncate text-sm font-semibold text-content-secondary">
             <LuBot className="h-4 w-4 text-ocean-500" />
             {t('intelligence.agents.title')}
           </h3>
-          <p className="mt-1 text-xs text-stone-400 dark:text-neutral-500">
-            {t('intelligence.agents.subtitle')}
-          </p>
+          <p className="mt-1 text-xs text-content-faint">{t('intelligence.agents.subtitle')}</p>
         </div>
         <Button
           variant="secondary"
@@ -135,7 +133,7 @@ export default function AgentsLibraryPanel({
       </div>
 
       {loading && (
-        <div className="flex items-center justify-center rounded-xl border border-stone-200 py-5 text-sm text-stone-400 dark:border-neutral-800 dark:text-neutral-500">
+        <div className="flex items-center justify-center rounded-xl border border-line py-5 text-sm text-content-faint">
           <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent" />
           {t('intelligence.agents.loading')}
         </div>
@@ -148,13 +146,13 @@ export default function AgentsLibraryPanel({
       )}
 
       {!loading && !error && visibleAgents.length === 0 && (
-        <div className="rounded-xl border border-dashed border-stone-200 py-6 text-center text-sm text-stone-400 dark:border-neutral-800 dark:text-neutral-500">
+        <div className="rounded-xl border border-dashed border-line py-6 text-center text-sm text-content-faint">
           {t('intelligence.agents.empty')}
         </div>
       )}
 
       {!loading && !error && visibleAgents.length > 0 && (
-        <ul className="divide-y divide-stone-100 rounded-xl border border-stone-200 bg-white dark:divide-neutral-800 dark:border-neutral-800 dark:bg-neutral-900">
+        <ul className="divide-y divide-line-subtle rounded-xl border border-line bg-surface dark:divide-neutral-800">
           {visibleAgents.map(agent => {
             const draft = drafts[agent.id] ?? '';
             const running = runningAgentId === agent.id;
@@ -163,24 +161,22 @@ export default function AgentsLibraryPanel({
                 <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                   <div className="min-w-0 space-y-1">
                     <div className="flex flex-wrap items-center gap-1.5">
-                      <span className="truncate text-sm font-semibold text-stone-800 dark:text-neutral-100">
+                      <span className="truncate text-sm font-semibold text-content">
                         {agent.display_name}
                       </span>
-                      <span className="rounded-md bg-stone-100 px-1.5 py-0.5 font-mono text-[10px] text-stone-500 dark:bg-neutral-800 dark:text-neutral-400">
+                      <span className="rounded-md bg-surface-subtle px-1.5 py-0.5 font-mono text-[10px] text-content-muted">
                         {agent.id}
                       </span>
                       <span className="rounded-md bg-ocean-50 px-1.5 py-0.5 text-[10px] font-medium text-ocean-700 dark:bg-ocean-500/10 dark:text-ocean-200">
                         {modelLabel(agent, t)}
                       </span>
                     </div>
-                    <p className="text-xs leading-5 text-stone-500 dark:text-neutral-400">
-                      {agent.when_to_use}
-                    </p>
+                    <p className="text-xs leading-5 text-content-muted">{agent.when_to_use}</p>
                     <div className="flex flex-wrap gap-1.5">
                       {capabilityChips(agent, t).map(chip => (
                         <span
                           key={chip}
-                          className="rounded-md bg-stone-50 px-1.5 py-0.5 text-[10px] font-medium text-stone-500 dark:bg-neutral-800 dark:text-neutral-400">
+                          className="rounded-md bg-surface-muted px-1.5 py-0.5 text-[10px] font-medium text-content-muted">
                           {chip}
                         </span>
                       ))}
@@ -218,7 +214,7 @@ export default function AgentsLibraryPanel({
                       setDrafts(prev => ({ ...prev, [agent.id]: event.target.value }))
                     }
                     placeholder={t('intelligence.agents.taskPlaceholder')}
-                    className="min-w-0 flex-1 rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-800 placeholder:text-stone-400 focus:border-ocean-400 focus:outline-none focus:ring-2 focus:ring-ocean-100 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-600"
+                    className="min-w-0 flex-1 rounded-md border border-line bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400 focus:border-ocean-400 focus:outline-none focus:ring-2 focus:ring-ocean-100 dark:bg-surface-canvas dark:placeholder:text-neutral-600"
                   />
                   <button
                     type="button"
diff --git a/app/src/components/intelligence/ConfirmationModal.tsx b/app/src/components/intelligence/ConfirmationModal.tsx
index 5bc02aa20..b0398c8e0 100644
--- a/app/src/components/intelligence/ConfirmationModal.tsx
+++ b/app/src/components/intelligence/ConfirmationModal.tsx
@@ -38,7 +38,7 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
       className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/30 animate-fade-in"
       onClick={handleCancel}>
       <div
-        className="bg-white dark:bg-neutral-900 rounded-2xl max-w-md w-full shadow-large border border-stone-200 dark:border-neutral-800 animate-slide-up"
+        className="bg-surface rounded-2xl max-w-md w-full shadow-large border border-line animate-slide-up"
         onClick={e => e.stopPropagation()}>
         {/* Header */}
         <div className="p-6 pb-4">
@@ -60,10 +60,8 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
               </div>
             )}
             <div className="flex-1">
-              <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
-                {modal.title}
-              </h2>
-              <p className="text-sm text-stone-600 dark:text-neutral-300 mt-1">{modal.message}</p>
+              <h2 className="text-lg font-semibold text-content">{modal.title}</h2>
+              <p className="text-sm text-content-secondary mt-1">{modal.message}</p>
             </div>
           </div>
         </div>
@@ -71,12 +69,12 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
         {/* Don't show again option */}
         {modal.showDontShowAgain && (
           <div className="px-6 pb-2">
-            <label className="flex items-center gap-2 text-sm text-stone-600 dark:text-neutral-300 cursor-pointer">
+            <label className="flex items-center gap-2 text-sm text-content-secondary cursor-pointer">
               <input
                 type="checkbox"
                 checked={dontShowAgain}
                 onChange={e => setDontShowAgain(e.target.checked)}
-                className="rounded border-stone-300 dark:border-neutral-700 bg-stone-100 dark:bg-neutral-800 text-primary-500 focus:ring-primary-500 focus:ring-offset-0"
+                className="rounded border-line-strong bg-surface-subtle text-primary-500 focus:ring-primary-500 focus:ring-offset-0"
               />
               {t('modal.dontShowAgain')}
             </label>
@@ -84,7 +82,7 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
         )}
 
         {/* Actions */}
-        <div className="flex items-center justify-end gap-3 p-6 pt-4 border-t border-stone-200 dark:border-neutral-800">
+        <div className="flex items-center justify-end gap-3 p-6 pt-4 border-t border-line">
           <Button variant="tertiary" size="md" onClick={handleCancel}>
             {modal.cancelText || t('common.cancel')}
           </Button>
diff --git a/app/src/components/intelligence/ConnectionPathPanel.tsx b/app/src/components/intelligence/ConnectionPathPanel.tsx
index a2ff7457d..88061a200 100644
--- a/app/src/components/intelligence/ConnectionPathPanel.tsx
+++ b/app/src/components/intelligence/ConnectionPathPanel.tsx
@@ -28,7 +28,7 @@ const ConnectionPathPanel = ({
   const intro = (
     <div
       role="note"
-      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-stone-700 dark:text-neutral-200">
+      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-content-secondary">
       <p className="font-medium mb-1">{t('connectionPath.title')}</p>
       <p>{t('connectionPath.intro')}</p>
     </div>
@@ -46,7 +46,7 @@ const ConnectionPathPanel = ({
           {[0, 1, 2].map(i => (
             <div
               key={i}
-              className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-10"
+              className="animate-pulse rounded-lg border border-line bg-surface-muted h-10"
             />
           ))}
         </div>
@@ -77,12 +77,10 @@ const ConnectionPathPanel = ({
       <div className="space-y-4">
         {intro}
         <div className="py-8 text-center">
-          <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          <h3 className="text-sm font-semibold text-content-secondary">
             {t('connectionPath.empty')}
           </h3>
-          <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
-            {t('connectionPath.emptyHint')}
-          </p>
+          <p className="mt-1 text-xs text-content-muted">{t('connectionPath.emptyHint')}</p>
         </div>
       </div>
     );
@@ -92,9 +90,7 @@ const ConnectionPathPanel = ({
     return (
       <div className="space-y-4">
         {intro}
-        <p className="py-6 text-center text-xs text-stone-500 dark:text-neutral-400">
-          {t('connectionPath.prompt')}
-        </p>
+        <p className="py-6 text-center text-xs text-content-muted">{t('connectionPath.prompt')}</p>
       </div>
     );
   }
@@ -115,7 +111,7 @@ const ConnectionPathPanel = ({
       className={`inline-flex items-center rounded-lg border px-2.5 py-1 text-sm break-words ${
         isEndpoint
           ? 'border-primary-300 dark:border-primary-500/40 bg-primary-50 dark:bg-primary-500/10 text-primary-800 dark:text-primary-200 font-medium'
-          : 'border-stone-200 dark:border-neutral-700 text-stone-800 dark:text-neutral-100'
+          : 'border-line text-content'
       }`}>
       {id}
     </span>
@@ -126,7 +122,7 @@ const ConnectionPathPanel = ({
       {intro}
 
       {message ? (
-        <p role="status" className="py-6 text-center text-sm text-stone-600 dark:text-neutral-300">
+        <p role="status" className="py-6 text-center text-sm text-content-secondary">
           {message}
         </p>
       ) : (
@@ -134,10 +130,10 @@ const ConnectionPathPanel = ({
           <div className="flex items-baseline justify-between">
             <h3
               id="connection-path-heading"
-              className="text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+              className="text-xs font-semibold uppercase tracking-wider text-content-muted">
               {t('connectionPath.resultHeading')}
             </h3>
-            <span className="text-[11px] tabular-nums text-stone-400 dark:text-neutral-500">
+            <span className="text-[11px] tabular-nums text-content-faint">
               {t('connectionPath.pathSummary').replace('{length}', String(result.length))}
             </span>
           </div>
@@ -145,7 +141,7 @@ const ConnectionPathPanel = ({
             <li>{nodeChip(result.source, true)}</li>
             {result.hops.map((hop, i) => (
               <Fragment key={`${hop.from}-${hop.to}-${i}`}>
-                <li className="pl-3 text-[11px] text-stone-400 dark:text-neutral-500">
+                <li className="pl-3 text-[11px] text-content-faint">
                   {hop.forward ? `${hop.predicate} →` : `← ${hop.predicate}`}
                 </li>
                 <li>{nodeChip(hop.to, i === result.hops.length - 1)}</li>
diff --git a/app/src/components/intelligence/ConnectionPathTab.tsx b/app/src/components/intelligence/ConnectionPathTab.tsx
index c0a138314..470b0d46b 100644
--- a/app/src/components/intelligence/ConnectionPathTab.tsx
+++ b/app/src/components/intelligence/ConnectionPathTab.tsx
@@ -71,12 +71,12 @@ const ConnectionPathTab = () => {
   return (
     <div className="space-y-4">
       {namespaces.length > 0 && (
-        <label className="flex items-center gap-2 text-xs text-stone-600 dark:text-neutral-300">
+        <label className="flex items-center gap-2 text-xs text-content-secondary">
           {t('connectionPath.namespaceLabel')}
           <select
             value={namespace}
             onChange={e => handleNamespace(e.target.value)}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-sm text-stone-800 dark:text-neutral-100">
+            className="rounded-lg border border-line bg-surface px-2 py-1 text-sm text-content">
             <option value="">{t('connectionPath.namespaceAll')}</option>
             {namespaces.map(ns => (
               <option key={ns} value={ns}>
@@ -88,7 +88,7 @@ const ConnectionPathTab = () => {
       )}
 
       <div className="flex flex-wrap gap-3">
-        <label className="flex flex-1 min-w-[10rem] flex-col gap-1 text-xs text-stone-600 dark:text-neutral-300">
+        <label className="flex flex-1 min-w-[10rem] flex-col gap-1 text-xs text-content-secondary">
           {t('connectionPath.sourceLabel')}
           <input
             type="text"
@@ -96,10 +96,10 @@ const ConnectionPathTab = () => {
             value={source}
             onChange={e => setSource(e.target.value)}
             placeholder={t('connectionPath.sourcePlaceholder')}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1.5 text-sm text-stone-800 dark:text-neutral-100"
+            className="rounded-lg border border-line bg-surface px-2 py-1.5 text-sm text-content"
           />
         </label>
-        <label className="flex flex-1 min-w-[10rem] flex-col gap-1 text-xs text-stone-600 dark:text-neutral-300">
+        <label className="flex flex-1 min-w-[10rem] flex-col gap-1 text-xs text-content-secondary">
           {t('connectionPath.targetLabel')}
           <input
             type="text"
@@ -107,7 +107,7 @@ const ConnectionPathTab = () => {
             value={target}
             onChange={e => setTarget(e.target.value)}
             placeholder={t('connectionPath.targetPlaceholder')}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1.5 text-sm text-stone-800 dark:text-neutral-100"
+            className="rounded-lg border border-line bg-surface px-2 py-1.5 text-sm text-content"
           />
         </label>
         <datalist id={ENTITY_LIST_ID}>
diff --git a/app/src/components/intelligence/DiagramViewerTab.tsx b/app/src/components/intelligence/DiagramViewerTab.tsx
index ab7537f01..e45d3dc1a 100644
--- a/app/src/components/intelligence/DiagramViewerTab.tsx
+++ b/app/src/components/intelligence/DiagramViewerTab.tsx
@@ -92,14 +92,10 @@ export default function DiagramViewerTab() {
     <section className="space-y-5" aria-labelledby="diagram-viewer-title">
       <div className="flex flex-wrap items-start justify-between gap-3">
         <div>
-          <h2
-            id="diagram-viewer-title"
-            className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+          <h2 id="diagram-viewer-title" className="text-lg font-semibold text-content">
             {t('intelligence.diagram.title')}
           </h2>
-          <p className="mt-1 text-sm text-stone-500 dark:text-neutral-400">
-            {t('intelligence.diagram.description')}
-          </p>
+          <p className="mt-1 text-sm text-content-muted">{t('intelligence.diagram.description')}</p>
         </div>
         <Button
           variant="secondary"
@@ -112,23 +108,23 @@ export default function DiagramViewerTab() {
       </div>
 
       {showEmptyState && (
-        <div className="flex min-h-72 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-stone-300 bg-stone-50 px-6 py-10 text-center dark:border-neutral-700 dark:bg-neutral-950/60">
+        <div className="flex min-h-72 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-line-strong bg-surface-muted px-6 py-10 text-center dark:bg-surface-canvas/60">
           <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-300">
             <LuImage aria-hidden="true" className="h-6 w-6" />
           </div>
           <div>
-            <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            <h3 className="text-sm font-semibold text-content">
               {t('intelligence.diagram.emptyTitle')}
             </h3>
-            <p className="mt-1 max-w-md text-sm text-stone-500 dark:text-neutral-400">
+            <p className="mt-1 max-w-md text-sm text-content-muted">
               {t('intelligence.diagram.emptyDescription')}
             </p>
           </div>
           <div className="flex max-w-full flex-col gap-2">
-            <code className="max-w-full overflow-x-auto rounded-md bg-white px-3 py-2 text-xs text-stone-600 dark:bg-neutral-900 dark:text-neutral-300">
+            <code className="max-w-full overflow-x-auto rounded-md bg-surface px-3 py-2 text-xs text-content-secondary">
               {t('intelligence.diagram.skillInstallCommand')}
             </code>
-            <code className="max-w-full overflow-x-auto rounded-md bg-white px-3 py-2 text-xs text-stone-600 dark:bg-neutral-900 dark:text-neutral-300">
+            <code className="max-w-full overflow-x-auto rounded-md bg-surface px-3 py-2 text-xs text-content-secondary">
               {t('intelligence.diagram.promptExample')}
             </code>
           </div>
@@ -141,11 +137,11 @@ export default function DiagramViewerTab() {
             key={imageUrl}
             src={imageUrl}
             alt={t('intelligence.diagram.imageAlt')}
-            className="block w-full rounded-lg border border-stone-200 bg-white object-contain dark:border-neutral-800 dark:bg-neutral-950"
+            className="block w-full rounded-lg border border-line bg-surface object-contain dark:bg-surface-canvas"
             onLoad={() => setImageState('loaded')}
             onError={() => setImageState('error')}
           />
-          <figcaption className="flex flex-wrap items-center justify-between gap-2 text-xs text-stone-500 dark:text-neutral-400">
+          <figcaption className="flex flex-wrap items-center justify-between gap-2 text-xs text-content-muted">
             <span>
               {t('intelligence.diagram.refreshesEvery').replace(
                 '{seconds}',
diff --git a/app/src/components/intelligence/EntityAssociationsPanel.tsx b/app/src/components/intelligence/EntityAssociationsPanel.tsx
index 876359270..f2e6e8678 100644
--- a/app/src/components/intelligence/EntityAssociationsPanel.tsx
+++ b/app/src/components/intelligence/EntityAssociationsPanel.tsx
@@ -26,7 +26,7 @@ const EntityAssociationsPanel = ({
   const intro = (
     <div
       role="note"
-      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-stone-700 dark:text-neutral-200">
+      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-content-secondary">
       <p className="font-medium mb-1">{t('entityAssociations.title')}</p>
       <p>{t('entityAssociations.intro')}</p>
     </div>
@@ -45,14 +45,14 @@ const EntityAssociationsPanel = ({
             {[0, 1].map(i => (
               <div
                 key={i}
-                className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-16"
+                className="animate-pulse rounded-lg border border-line bg-surface-muted h-16"
               />
             ))}
           </div>
           {[0, 1, 2, 3].map(i => (
             <div
               key={i}
-              className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-10"
+              className="animate-pulse rounded-lg border border-line bg-surface-muted h-10"
             />
           ))}
         </div>
@@ -83,12 +83,10 @@ const EntityAssociationsPanel = ({
       <div className="space-y-4">
         {intro}
         <div className="py-8 text-center">
-          <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          <h3 className="text-sm font-semibold text-content-secondary">
             {t('entityAssociations.empty')}
           </h3>
-          <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
-            {t('entityAssociations.emptyHint')}
-          </p>
+          <p className="mt-1 text-xs text-content-muted">{t('entityAssociations.emptyHint')}</p>
         </div>
       </div>
     );
@@ -104,15 +102,11 @@ const EntityAssociationsPanel = ({
           { label: t('entityAssociations.metricEntities'), value: report.entityCount },
           { label: t('entityAssociations.metricPairs'), value: report.pairCount },
         ].map(tile => (
-          <div
-            key={tile.label}
-            className="rounded-lg border border-stone-200 dark:border-neutral-800 p-3">
-            <div className="text-[10px] uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+          <div key={tile.label} className="rounded-lg border border-line p-3">
+            <div className="text-[10px] uppercase tracking-wider text-content-faint">
               {tile.label}
             </div>
-            <div className="text-lg font-semibold tabular-nums text-stone-900 dark:text-neutral-100">
-              {tile.value}
-            </div>
+            <div className="text-lg font-semibold tabular-nums text-content">{tile.value}</div>
           </div>
         ))}
       </div>
@@ -121,21 +115,21 @@ const EntityAssociationsPanel = ({
       <section aria-labelledby="entity-associations-heading" className="space-y-1">
         <h3
           id="entity-associations-heading"
-          className="text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+          className="text-xs font-semibold uppercase tracking-wider text-content-muted">
           {t('entityAssociations.rankedHeading')}
         </h3>
         <ul className="space-y-1.5">
           {report.pairs.map(pair => (
             <li
               key={JSON.stringify([pair.a, pair.b])}
-              className="rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-2"
+              className="rounded-lg border border-line px-3 py-2"
               title={t('entityAssociations.pairTitle')
                 .replace('{jaccard}', String(pct(pair.jaccard)))
                 .replace('{shared}', String(pair.sharedCount))
                 .replace('{union}', String(pair.unionCount))}>
               <div className="flex items-center justify-between gap-2">
-                <p className="min-w-0 text-sm text-stone-800 dark:text-neutral-100 break-words">
-                  {pair.a} <span className="text-stone-400 dark:text-neutral-500">~</span> {pair.b}
+                <p className="min-w-0 text-sm text-content break-words">
+                  {pair.a} <span className="text-content-faint">~</span> {pair.b}
                 </p>
                 <span
                   title={
@@ -145,7 +139,7 @@ const EntityAssociationsPanel = ({
                   }
                   className={`shrink-0 inline-flex items-center rounded px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider ${
                     pair.directlyLinked
-                      ? 'bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400'
+                      ? 'bg-surface-subtle text-content-muted'
                       : 'bg-primary-100 dark:bg-primary-500/20 text-primary-700 dark:text-primary-300'
                   }`}>
                   {pair.directlyLinked
@@ -154,16 +148,16 @@ const EntityAssociationsPanel = ({
                 </span>
               </div>
               <div className="mt-1 flex items-center gap-2 text-[11px] tabular-nums">
-                <div className="flex-1 h-2 rounded bg-stone-100 dark:bg-neutral-800 overflow-hidden">
+                <div className="flex-1 h-2 rounded bg-surface-subtle overflow-hidden">
                   <div
                     className="h-full bg-primary-400/70"
                     style={{ width: `${pct(pair.jaccard)}%` }}
                   />
                 </div>
-                <span className="w-10 shrink-0 text-right text-stone-500 dark:text-neutral-400">
+                <span className="w-10 shrink-0 text-right text-content-muted">
                   {pct(pair.jaccard)}%
                 </span>
-                <span className="w-20 shrink-0 text-right text-stone-400 dark:text-neutral-500">
+                <span className="w-20 shrink-0 text-right text-content-faint">
                   {t('entityAssociations.sharedLabel').replace(
                     '{shared}',
                     String(pair.sharedCount)
@@ -174,7 +168,7 @@ const EntityAssociationsPanel = ({
           ))}
         </ul>
         {report.truncated && (
-          <p className="text-center text-xs text-stone-400 dark:text-neutral-500">
+          <p className="text-center text-xs text-content-faint">
             {t('entityAssociations.truncated')
               .replace('{shown}', String(report.pairs.length))
               .replace('{total}', String(report.pairCount))}
diff --git a/app/src/components/intelligence/EntityAssociationsTab.tsx b/app/src/components/intelligence/EntityAssociationsTab.tsx
index e11a28766..c87f51e39 100644
--- a/app/src/components/intelligence/EntityAssociationsTab.tsx
+++ b/app/src/components/intelligence/EntityAssociationsTab.tsx
@@ -54,12 +54,12 @@ const EntityAssociationsTab = () => {
   return (
     <div className="space-y-4">
       {namespaces.length > 0 && (
-        <label className="flex items-center gap-2 text-xs text-stone-600 dark:text-neutral-300">
+        <label className="flex items-center gap-2 text-xs text-content-secondary">
           {t('entityAssociations.namespaceLabel')}
           <select
             value={namespace}
             onChange={e => handleNamespace(e.target.value)}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-sm text-stone-800 dark:text-neutral-100">
+            className="rounded-lg border border-line bg-surface px-2 py-1 text-sm text-content">
             <option value="">{t('entityAssociations.namespaceAll')}</option>
             {namespaces.map(ns => (
               <option key={ns} value={ns}>
diff --git a/app/src/components/intelligence/GoalsPanel.tsx b/app/src/components/intelligence/GoalsPanel.tsx
index 5485bba03..db2034aa3 100644
--- a/app/src/components/intelligence/GoalsPanel.tsx
+++ b/app/src/components/intelligence/GoalsPanel.tsx
@@ -14,8 +14,7 @@ import { type GoalItem, goalsApi } from '../../services/api/goalsApi';
 import Button from '../ui/Button';
 import Input from '../ui/Input';
 
-const cardClass =
-  'rounded-lg border border-stone-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900';
+const cardClass = 'rounded-lg border border-line bg-surface p-4';
 
 export default function GoalsPanel() {
   const { t } = useT();
@@ -159,12 +158,8 @@ export default function GoalsPanel() {
         {/* Header */}
         <div className="flex items-start justify-between gap-3">
           <div className="min-w-0">
-            <h2 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
-              {t('brain.goals.title')}
-            </h2>
-            <p className="mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
-              {t('brain.goals.description')}
-            </p>
+            <h2 className="text-sm font-semibold text-content">{t('brain.goals.title')}</h2>
+            <p className="mt-0.5 text-xs text-content-muted">{t('brain.goals.description')}</p>
           </div>
           <Button
             type="button"
@@ -216,7 +211,7 @@ export default function GoalsPanel() {
         {/* List */}
         <div className="mt-4">
           {loading ? (
-            <div className="flex items-center justify-center py-8 text-neutral-400 dark:text-neutral-500">
+            <div className="flex items-center justify-center py-8 text-content-faint">
               <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent" />
               <span className="text-sm">{t('common.loading')}</span>
             </div>
@@ -225,13 +220,11 @@ export default function GoalsPanel() {
               {error}
             </div>
           ) : goals.length === 0 ? (
-            <p className="py-6 text-center text-sm text-neutral-400 dark:text-neutral-500">
-              {t('brain.goals.empty')}
-            </p>
+            <p className="py-6 text-center text-sm text-content-faint">{t('brain.goals.empty')}</p>
           ) : (
-            <ul className="divide-y divide-neutral-200 overflow-hidden rounded-xl border border-neutral-200 dark:divide-neutral-800 dark:border-neutral-800">
+            <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line dark:divide-neutral-800">
               {goals.map(goal => (
-                <li key={goal.id} className="bg-white px-3 py-2.5 dark:bg-neutral-900">
+                <li key={goal.id} className="bg-surface px-3 py-2.5">
                   {editingId === goal.id ? (
                     <div className="flex items-center gap-2">
                       <Input
@@ -264,7 +257,7 @@ export default function GoalsPanel() {
                     </div>
                   ) : (
                     <div className="flex items-center justify-between gap-3">
-                      <span className="min-w-0 flex-1 text-sm text-neutral-700 dark:text-neutral-200">
+                      <span className="min-w-0 flex-1 text-sm text-content-secondary">
                         {goal.text}
                       </span>
                       <div className="flex shrink-0 items-center gap-1">
diff --git a/app/src/components/intelligence/GraphCentralityPanel.tsx b/app/src/components/intelligence/GraphCentralityPanel.tsx
index b20ae619a..4f559665b 100644
--- a/app/src/components/intelligence/GraphCentralityPanel.tsx
+++ b/app/src/components/intelligence/GraphCentralityPanel.tsx
@@ -42,7 +42,7 @@ const GraphCentralityPanel = ({ result, loading, error, onRetry }: GraphCentrali
   const intro = (
     <div
       role="note"
-      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-stone-700 dark:text-neutral-200">
+      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-content-secondary">
       <p className="font-medium mb-1">{t('graphCentrality.title')}</p>
       <p>{t('graphCentrality.intro')}</p>
     </div>
@@ -61,14 +61,14 @@ const GraphCentralityPanel = ({ result, loading, error, onRetry }: GraphCentrali
             {[0, 1, 2].map(i => (
               <div
                 key={i}
-                className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-16"
+                className="animate-pulse rounded-lg border border-line bg-surface-muted h-16"
               />
             ))}
           </div>
           {[0, 1, 2, 3].map(i => (
             <div
               key={i}
-              className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-8"
+              className="animate-pulse rounded-lg border border-line bg-surface-muted h-8"
             />
           ))}
         </div>
@@ -99,12 +99,10 @@ const GraphCentralityPanel = ({ result, loading, error, onRetry }: GraphCentrali
       <div className="space-y-4">
         {intro}
         <div className="py-8 text-center">
-          <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          <h3 className="text-sm font-semibold text-content-secondary">
             {t('graphCentrality.empty')}
           </h3>
-          <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
-            {t('graphCentrality.emptyHint')}
-          </p>
+          <p className="mt-1 text-xs text-content-muted">{t('graphCentrality.emptyHint')}</p>
         </div>
       </div>
     );
@@ -124,19 +122,15 @@ const GraphCentralityPanel = ({ result, loading, error, onRetry }: GraphCentrali
           { label: t('graphCentrality.metricConnections'), value: result.edgeCount },
           { label: t('graphCentrality.metricClusters'), value: result.componentCount },
         ].map(tile => (
-          <div
-            key={tile.label}
-            className="rounded-lg border border-stone-200 dark:border-neutral-800 p-3">
-            <div className="text-[10px] uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+          <div key={tile.label} className="rounded-lg border border-line p-3">
+            <div className="text-[10px] uppercase tracking-wider text-content-faint">
               {tile.label}
             </div>
-            <div className="text-lg font-semibold tabular-nums text-stone-900 dark:text-neutral-100">
-              {tile.value}
-            </div>
+            <div className="text-lg font-semibold tabular-nums text-content">{tile.value}</div>
           </div>
         ))}
       </div>
-      <p className="text-[11px] text-stone-500 dark:text-neutral-400">
+      <p className="text-[11px] text-content-muted">
         {t('graphCentrality.clustersCaption')
           .replace('{components}', String(result.componentCount))
           .replace('{largest}', String(largestCluster))}
@@ -153,11 +147,11 @@ const GraphCentralityPanel = ({ result, loading, error, onRetry }: GraphCentrali
       <section aria-labelledby="graph-centrality-heading" className="space-y-1">
         <h3
           id="graph-centrality-heading"
-          className="text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+          className="text-xs font-semibold uppercase tracking-wider text-content-muted">
           {t('graphCentrality.rankedHeading')}
         </h3>
         <table className="w-full text-left text-[11px] tabular-nums">
-          <thead className="text-stone-400 dark:text-neutral-500">
+          <thead className="text-content-faint">
             <tr>
               <th scope="col" className="w-8 py-1 pr-2 font-medium">
                 {t('graphCentrality.colRank')}
@@ -175,9 +169,9 @@ const GraphCentralityPanel = ({ result, loading, error, onRetry }: GraphCentrali
           </thead>
           <tbody>
             {rows.map((node, i) => (
-              <tr key={node.id} className="border-t border-stone-100 dark:border-neutral-800/60">
-                <td className="py-1 pr-2 text-stone-400 dark:text-neutral-500">{i + 1}</td>
-                <td className="py-1 pr-2 text-stone-800 dark:text-neutral-100 break-words">
+              <tr key={node.id} className="border-t border-line-subtle dark:border-line/60">
+                <td className="py-1 pr-2 text-content-faint">{i + 1}</td>
+                <td className="py-1 pr-2 text-content break-words">
                   {node.id}
                   {bridgeIds.has(node.id) && (
                     <span
@@ -189,19 +183,19 @@ const GraphCentralityPanel = ({ result, loading, error, onRetry }: GraphCentrali
                 </td>
                 <td className="py-1 pr-2">
                   <div className="flex items-center gap-2">
-                    <div className="flex-1 h-2 rounded bg-stone-100 dark:bg-neutral-800 overflow-hidden">
+                    <div className="flex-1 h-2 rounded bg-surface-subtle overflow-hidden">
                       <div
                         className="h-full bg-primary-400/70"
                         style={{ width: `${(node.pageRank / maxRank) * 100}%` }}
                       />
                     </div>
-                    <span className="w-12 shrink-0 text-right text-stone-500 dark:text-neutral-400">
+                    <span className="w-12 shrink-0 text-right text-content-muted">
                       {node.pageRank.toFixed(3)}
                     </span>
                   </div>
                 </td>
                 <td
-                  className="py-1 text-right text-stone-500 dark:text-neutral-400"
+                  className="py-1 text-right text-content-muted"
                   title={t('graphCentrality.degreeTitle')
                     .replace('{in}', String(node.inDegree))
                     .replace('{out}', String(node.outDegree))}
diff --git a/app/src/components/intelligence/GraphCentralityTab.tsx b/app/src/components/intelligence/GraphCentralityTab.tsx
index e70a78bd9..d8a158866 100644
--- a/app/src/components/intelligence/GraphCentralityTab.tsx
+++ b/app/src/components/intelligence/GraphCentralityTab.tsx
@@ -54,12 +54,12 @@ const GraphCentralityTab = () => {
   return (
     <div className="space-y-4">
       {namespaces.length > 0 && (
-        <label className="flex items-center gap-2 text-xs text-stone-600 dark:text-neutral-300">
+        <label className="flex items-center gap-2 text-xs text-content-secondary">
           {t('graphCentrality.namespaceLabel')}
           <select
             value={namespace}
             onChange={e => handleNamespace(e.target.value)}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-sm text-stone-800 dark:text-neutral-100">
+            className="rounded-lg border border-line bg-surface px-2 py-1 text-sm text-content">
             <option value="">{t('graphCentrality.namespaceAll')}</option>
             {namespaces.map(ns => (
               <option key={ns} value={ns}>
diff --git a/app/src/components/intelligence/GraphCohesionPanel.tsx b/app/src/components/intelligence/GraphCohesionPanel.tsx
index 0c05bfd90..06feb5ffa 100644
--- a/app/src/components/intelligence/GraphCohesionPanel.tsx
+++ b/app/src/components/intelligence/GraphCohesionPanel.tsx
@@ -27,7 +27,7 @@ const GraphCohesionPanel = ({ result, loading, error, onRetry }: GraphCohesionPa
   const intro = (
     <div
       role="note"
-      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-stone-700 dark:text-neutral-200">
+      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-content-secondary">
       <p className="font-medium mb-1">{t('graphCohesion.title')}</p>
       <p>{t('graphCohesion.intro')}</p>
     </div>
@@ -46,14 +46,14 @@ const GraphCohesionPanel = ({ result, loading, error, onRetry }: GraphCohesionPa
             {[0, 1, 2].map(i => (
               <div
                 key={i}
-                className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-16"
+                className="animate-pulse rounded-lg border border-line bg-surface-muted h-16"
               />
             ))}
           </div>
           {[0, 1, 2, 3].map(i => (
             <div
               key={i}
-              className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-8"
+              className="animate-pulse rounded-lg border border-line bg-surface-muted h-8"
             />
           ))}
         </div>
@@ -84,12 +84,10 @@ const GraphCohesionPanel = ({ result, loading, error, onRetry }: GraphCohesionPa
       <div className="space-y-4">
         {intro}
         <div className="py-8 text-center">
-          <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          <h3 className="text-sm font-semibold text-content-secondary">
             {t('graphCohesion.empty')}
           </h3>
-          <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
-            {t('graphCohesion.emptyHint')}
-          </p>
+          <p className="mt-1 text-xs text-content-muted">{t('graphCohesion.emptyHint')}</p>
         </div>
       </div>
     );
@@ -106,19 +104,15 @@ const GraphCohesionPanel = ({ result, loading, error, onRetry }: GraphCohesionPa
           { label: t('graphCohesion.metricConnections'), value: result.edgeCount },
           { label: t('graphCohesion.metricTriangles'), value: result.triangleCount },
         ].map(tile => (
-          <div
-            key={tile.label}
-            className="rounded-lg border border-stone-200 dark:border-neutral-800 p-3">
-            <div className="text-[10px] uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+          <div key={tile.label} className="rounded-lg border border-line p-3">
+            <div className="text-[10px] uppercase tracking-wider text-content-faint">
               {tile.label}
             </div>
-            <div className="text-lg font-semibold tabular-nums text-stone-900 dark:text-neutral-100">
-              {tile.value}
-            </div>
+            <div className="text-lg font-semibold tabular-nums text-content">{tile.value}</div>
           </div>
         ))}
       </div>
-      <p className="text-[11px] text-stone-500 dark:text-neutral-400">
+      <p className="text-[11px] text-content-muted">
         {t('graphCohesion.summaryCaption')
           .replace('{avg}', result.averageClustering.toFixed(2))
           .replace('{transitivity}', result.transitivity.toFixed(2))}
@@ -126,18 +120,18 @@ const GraphCohesionPanel = ({ result, loading, error, onRetry }: GraphCohesionPa
 
       {/* Brokerage ranking: loosest neighbourhoods first (structural holes). */}
       {brokers.length === 0 ? (
-        <p className="py-4 text-center text-xs text-stone-500 dark:text-neutral-400">
+        <p className="py-4 text-center text-xs text-content-muted">
           {t('graphCohesion.noBrokers')}
         </p>
       ) : (
         <section aria-labelledby="graph-cohesion-heading" className="space-y-1">
           <h3
             id="graph-cohesion-heading"
-            className="text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+            className="text-xs font-semibold uppercase tracking-wider text-content-muted">
             {t('graphCohesion.rankedHeading')}
           </h3>
           <table className="w-full text-left text-[11px] tabular-nums">
-            <thead className="text-stone-400 dark:text-neutral-500">
+            <thead className="text-content-faint">
               <tr>
                 <th scope="col" className="w-8 py-1 pr-2 font-medium">
                   {t('graphCohesion.colRank')}
@@ -155,9 +149,9 @@ const GraphCohesionPanel = ({ result, loading, error, onRetry }: GraphCohesionPa
             </thead>
             <tbody>
               {brokers.map((node, i) => (
-                <tr key={node.id} className="border-t border-stone-100 dark:border-neutral-800/60">
-                  <td className="py-1 pr-2 text-stone-400 dark:text-neutral-500">{i + 1}</td>
-                  <td className="py-1 pr-2 text-stone-800 dark:text-neutral-100 break-words">
+                <tr key={node.id} className="border-t border-line-subtle dark:border-line/60">
+                  <td className="py-1 pr-2 text-content-faint">{i + 1}</td>
+                  <td className="py-1 pr-2 text-content break-words">
                     {node.id}
                     {node.localClustering === 0 && (
                       <span
@@ -169,20 +163,18 @@ const GraphCohesionPanel = ({ result, loading, error, onRetry }: GraphCohesionPa
                   </td>
                   <td className="py-1 pr-2">
                     <div className="flex items-center gap-2">
-                      <div className="flex-1 h-2 rounded bg-stone-100 dark:bg-neutral-800 overflow-hidden">
+                      <div className="flex-1 h-2 rounded bg-surface-subtle overflow-hidden">
                         <div
                           className="h-full bg-primary-400/70"
                           style={{ width: `${node.localClustering * 100}%` }}
                         />
                       </div>
-                      <span className="w-10 shrink-0 text-right text-stone-500 dark:text-neutral-400">
+                      <span className="w-10 shrink-0 text-right text-content-muted">
                         {node.localClustering.toFixed(2)}
                       </span>
                     </div>
                   </td>
-                  <td className="py-1 text-right text-stone-500 dark:text-neutral-400">
-                    {node.degree}
-                  </td>
+                  <td className="py-1 text-right text-content-muted">{node.degree}</td>
                 </tr>
               ))}
             </tbody>
diff --git a/app/src/components/intelligence/GraphCohesionTab.tsx b/app/src/components/intelligence/GraphCohesionTab.tsx
index f834c1525..b6efff52a 100644
--- a/app/src/components/intelligence/GraphCohesionTab.tsx
+++ b/app/src/components/intelligence/GraphCohesionTab.tsx
@@ -54,12 +54,12 @@ const GraphCohesionTab = () => {
   return (
     <div className="space-y-4">
       {namespaces.length > 0 && (
-        <label className="flex items-center gap-2 text-xs text-stone-600 dark:text-neutral-300">
+        <label className="flex items-center gap-2 text-xs text-content-secondary">
           {t('graphCohesion.namespaceLabel')}
           <select
             value={namespace}
             onChange={e => handleNamespace(e.target.value)}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-sm text-stone-800 dark:text-neutral-100">
+            className="rounded-lg border border-line bg-surface px-2 py-1 text-sm text-content">
             <option value="">{t('graphCohesion.namespaceAll')}</option>
             {namespaces.map(ns => (
               <option key={ns} value={ns}>
diff --git a/app/src/components/intelligence/IntelligenceAgentWorkTab.tsx b/app/src/components/intelligence/IntelligenceAgentWorkTab.tsx
index 20b7acafc..aa58a655c 100644
--- a/app/src/components/intelligence/IntelligenceAgentWorkTab.tsx
+++ b/app/src/components/intelligence/IntelligenceAgentWorkTab.tsx
@@ -51,8 +51,7 @@ const BUCKET_ACCENT: Record<AgentWorkBucket, string> = {
     'border-sage-200 bg-sage-50 text-sage-700 dark:border-sage-500/30 dark:bg-sage-500/10 dark:text-sage-300',
   failed:
     'border-coral-200 bg-coral-50 text-coral-700 dark:border-coral-500/30 dark:bg-coral-500/10 dark:text-coral-300',
-  stopped:
-    'border-stone-200 bg-stone-50 text-stone-600 dark:border-neutral-700 dark:bg-neutral-800/60 dark:text-neutral-300',
+  stopped: 'border-line bg-surface-muted text-content-secondary',
 };
 
 /** i18n key for each bucket's localized label. */
@@ -166,7 +165,7 @@ export default function IntelligenceAgentWorkTab() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-10 text-stone-400 dark:text-neutral-500">
+      <div className="flex items-center justify-center py-10 text-content-faint">
         <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent" />
         <span className="text-sm">{t('intelligence.agentWork.loading')}</span>
       </div>
@@ -184,10 +183,8 @@ export default function IntelligenceAgentWorkTab() {
   if (!data || data.total === 0) {
     return (
       <div className="space-y-4">
-        <p className="text-xs text-stone-400 dark:text-neutral-500">
-          {t('intelligence.agentWork.subtitle')}
-        </p>
-        <div className="rounded-xl border border-dashed border-stone-200 py-10 text-center text-sm text-stone-400 dark:border-neutral-800 dark:text-neutral-500">
+        <p className="text-xs text-content-faint">{t('intelligence.agentWork.subtitle')}</p>
+        <div className="rounded-xl border border-dashed border-line py-10 text-center text-sm text-content-faint">
           {t('intelligence.agentWork.empty')}
         </div>
       </div>
@@ -198,9 +195,7 @@ export default function IntelligenceAgentWorkTab() {
 
   return (
     <div className="space-y-6">
-      <p className="text-xs text-stone-400 dark:text-neutral-500">
-        {t('intelligence.agentWork.subtitle')}
-      </p>
+      <p className="text-xs text-content-faint">{t('intelligence.agentWork.subtitle')}</p>
 
       {BUCKET_ORDER.map(bucket => {
         const group = groupByBucket.get(bucket);
@@ -216,12 +211,10 @@ export default function IntelligenceAgentWorkTab() {
                 )}
                 {t(BUCKET_LABEL_KEY[bucket])}
               </span>
-              <span className="text-xs text-stone-400 dark:text-neutral-500">
-                {group?.count ?? rows.length}
-              </span>
+              <span className="text-xs text-content-faint">{group?.count ?? rows.length}</span>
             </div>
 
-            <ul className="divide-y divide-stone-100 overflow-hidden rounded-xl border border-stone-200 bg-white dark:divide-neutral-800 dark:border-neutral-800 dark:bg-neutral-900">
+            <ul className="divide-y divide-line-subtle overflow-hidden rounded-xl border border-line bg-surface dark:divide-neutral-800">
               {rows.map(row => (
                 <AgentWorkRowItem
                   key={row.runId}
@@ -245,7 +238,7 @@ const RETRYABLE_STATUSES = new Set(['failed', 'cancelled', 'interrupted']);
 
 /** Shared button styling for the row's secondary actions. */
 const ACTION_BTN =
-  'rounded-md border border-stone-200 px-2 py-1 text-[11px] font-medium hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:hover:bg-neutral-800';
+  'rounded-md border border-line px-2 py-1 text-[11px] font-medium hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-50';
 
 interface AgentWorkRowItemProps {
   row: AgentWorkRow;
@@ -307,20 +300,20 @@ function AgentWorkRowItem({ row, onOpenThread, onControlled }: AgentWorkRowItemP
           <div className="flex flex-wrap items-center gap-1.5">
             <span
               title={t('intelligence.agentWork.column.agent')}
-              className="truncate text-sm font-medium text-stone-800 dark:text-neutral-100">
+              className="truncate text-sm font-medium text-content">
               {name}
             </span>
             <span
               title={t('intelligence.agentWork.column.status')}
-              className="rounded-md border border-stone-200 px-1.5 py-0.5 text-[10px] font-medium text-stone-500 dark:border-neutral-700 dark:text-neutral-400">
+              className="rounded-md border border-line px-1.5 py-0.5 text-[10px] font-medium text-content-muted">
               {statusLabel}
             </span>
-            <span className="text-[10px] uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+            <span className="text-[10px] uppercase tracking-wide text-content-faint">
               {kindLabel}
             </span>
           </div>
           {row.summary && (
-            <p className="line-clamp-2 break-words text-xs leading-snug text-stone-500 dark:text-neutral-400">
+            <p className="line-clamp-2 break-words text-xs leading-snug text-content-muted">
               {row.summary}
             </p>
           )}
@@ -331,7 +324,7 @@ function AgentWorkRowItem({ row, onOpenThread, onControlled }: AgentWorkRowItemP
           )}
         </div>
 
-        <div className="flex flex-none items-center gap-3 text-xs text-stone-500 dark:text-neutral-400">
+        <div className="flex flex-none items-center gap-3 text-xs text-content-muted">
           <span title={t('intelligence.agentWork.column.elapsed')}>
             {formatElapsed(row.elapsedMs)}
           </span>
@@ -373,7 +366,7 @@ function AgentWorkRowItem({ row, onOpenThread, onControlled }: AgentWorkRowItemP
           type="button"
           disabled={busy}
           onClick={() => openComposer('follow_up')}
-          className={`${ACTION_BTN} text-stone-600 dark:text-neutral-300`}>
+          className={`${ACTION_BTN} text-content-secondary`}>
           {t('intelligence.agentWork.action.followUp')}
         </button>
         {canStop && (
@@ -413,7 +406,7 @@ function AgentWorkRowItem({ row, onOpenThread, onControlled }: AgentWorkRowItemP
                 ? 'intelligence.agentWork.action.continuePlaceholder'
                 : 'intelligence.agentWork.action.followUpPlaceholder'
             )}
-            className="w-full resize-y rounded-md border border-stone-200 bg-white px-2 py-1.5 text-xs text-stone-800 focus:border-ocean-400 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
+            className="w-full resize-y rounded-md border border-line bg-surface px-2 py-1.5 text-xs text-content focus:border-ocean-400 focus:outline-none"
           />
           <div className="flex items-center gap-2">
             <button
@@ -427,7 +420,7 @@ function AgentWorkRowItem({ row, onOpenThread, onControlled }: AgentWorkRowItemP
               type="button"
               disabled={busy}
               onClick={() => setComposer(null)}
-              className={`${ACTION_BTN} text-stone-500 dark:text-neutral-400`}>
+              className={`${ACTION_BTN} text-content-muted`}>
               {t('intelligence.agentWork.action.cancel')}
             </button>
           </div>
diff --git a/app/src/components/intelligence/IntelligenceMemoryTab.tsx b/app/src/components/intelligence/IntelligenceMemoryTab.tsx
index cb980f1af..49cd8516d 100644
--- a/app/src/components/intelligence/IntelligenceMemoryTab.tsx
+++ b/app/src/components/intelligence/IntelligenceMemoryTab.tsx
@@ -48,7 +48,7 @@ export default function IntelligenceMemoryTab({
             placeholder={t('memory.search')}
             value={searchFilter}
             onChange={e => setSearchFilter(e.target.value)}
-            className="w-full px-3 py-2 text-sm bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-lg text-stone-900 dark:text-neutral-100 placeholder-stone-400 focus:outline-none focus:border-primary-500/50 transition-colors"
+            className="w-full px-3 py-2 text-sm bg-surface border border-line rounded-lg text-content placeholder-content-faint focus:outline-none focus:border-primary-500/50 transition-colors"
           />
         </div>
         <label htmlFor="actionable-source" className="sr-only">
@@ -58,7 +58,7 @@ export default function IntelligenceMemoryTab({
           id="actionable-source"
           value={sourceFilter}
           onChange={e => setSourceFilter(e.target.value as ActionableItemSource | 'all')}
-          className="px-3 py-2 text-sm bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-lg text-stone-900 dark:text-neutral-100 focus:outline-none focus:border-primary-500/50 transition-colors">
+          className="px-3 py-2 text-sm bg-surface border border-line rounded-lg text-content focus:outline-none focus:border-primary-500/50 transition-colors">
           <option value="all">{t('memory.sourceFilter.all')}</option>
           <option value="email">{t('memory.sourceFilter.email')}</option>
           <option value="calendar">{t('memory.sourceFilter.calendar')}</option>
@@ -75,22 +75,16 @@ export default function IntelligenceMemoryTab({
           <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-primary-500/10">
             <div className="w-8 h-8 border-2 border-primary-400 border-t-transparent rounded-full animate-spin" />
           </div>
-          <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100 mb-2">
-            {t('memory.loading')}
-          </h2>
-          <p className="text-stone-400 dark:text-neutral-500 text-sm">{t('memory.fetching')}</p>
+          <h2 className="text-lg font-semibold text-content mb-2">{t('memory.loading')}</h2>
+          <p className="text-content-faint text-sm">{t('memory.fetching')}</p>
         </div>
       ) : isRunning && items.length === 0 ? (
         <div className="glass rounded-2xl p-8 text-center animate-fade-up">
           <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-primary-500/10">
             <div className="w-8 h-8 border-2 border-primary-400 border-t-transparent rounded-full animate-spin" />
           </div>
-          <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100 mb-2">
-            {t('memory.analyzing')}
-          </h2>
-          <p className="text-stone-400 dark:text-neutral-500 text-sm">
-            {t('memory.analyzingHint')}
-          </p>
+          <h2 className="text-lg font-semibold text-content mb-2">{t('memory.analyzing')}</h2>
+          <p className="text-content-faint text-sm">{t('memory.analyzingHint')}</p>
         </div>
       ) : timeGroups.length === 0 ? (
         <div className="glass rounded-2xl p-8 text-center animate-fade-up">
@@ -110,30 +104,18 @@ export default function IntelligenceMemoryTab({
           </div>
           {searchFilter || sourceFilter !== 'all' ? (
             <>
-              <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100 mb-2">
-                {t('memory.noMatches')}
-              </h2>
-              <p className="text-stone-400 dark:text-neutral-500 text-sm">
-                {t('memory.noMatchesHint')}
-              </p>
+              <h2 className="text-lg font-semibold text-content mb-2">{t('memory.noMatches')}</h2>
+              <p className="text-content-faint text-sm">{t('memory.noMatchesHint')}</p>
             </>
           ) : usingMemoryData ? (
             <>
-              <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100 mb-2">
-                {t('memory.allCaughtUp')}
-              </h2>
-              <p className="text-stone-400 dark:text-neutral-500 text-sm">
-                {t('memory.allCaughtUpHint')}
-              </p>
+              <h2 className="text-lg font-semibold text-content mb-2">{t('memory.allCaughtUp')}</h2>
+              <p className="text-content-faint text-sm">{t('memory.allCaughtUpHint')}</p>
             </>
           ) : (
             <>
-              <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100 mb-2">
-                {t('memory.noAnalysis')}
-              </h2>
-              <p className="text-stone-400 dark:text-neutral-500 text-sm mb-4">
-                {t('memory.noAnalysisHint')}
-              </p>
+              <h2 className="text-lg font-semibold text-content mb-2">{t('memory.noAnalysis')}</h2>
+              <p className="text-content-faint text-sm mb-4">{t('memory.noAnalysisHint')}</p>
               <Button
                 variant="primary"
                 size="md"
@@ -147,7 +129,7 @@ export default function IntelligenceMemoryTab({
       ) : (
         <div className="space-y-6">
           {isRunning && (
-            <div className="flex items-center gap-2 text-xs text-stone-400 dark:text-neutral-500 animate-fade-up">
+            <div className="flex items-center gap-2 text-xs text-content-faint animate-fade-up">
               <div className="w-3 h-3 border border-stone-400 border-t-transparent rounded-full animate-spin" />
               {t('memory.analyzing')}
             </div>
@@ -158,10 +140,8 @@ export default function IntelligenceMemoryTab({
               className="animate-fade-up"
               style={{ animationDelay: `${groupIndex * 50}ms` }}>
               <div className="flex items-center justify-between mb-3">
-                <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 opacity-80">
-                  {group.label}
-                </h2>
-                <div className="text-xs bg-stone-100 dark:bg-neutral-800 text-stone-900 dark:text-neutral-100 px-2 py-1 rounded-full">
+                <h2 className="text-sm font-semibold text-content opacity-80">{group.label}</h2>
+                <div className="text-xs bg-surface-subtle text-content px-2 py-1 rounded-full">
                   {group.count}
                 </div>
               </div>
diff --git a/app/src/components/intelligence/IntelligenceOrchestrationTab.tsx b/app/src/components/intelligence/IntelligenceOrchestrationTab.tsx
index 98fd53326..0422988b2 100644
--- a/app/src/components/intelligence/IntelligenceOrchestrationTab.tsx
+++ b/app/src/components/intelligence/IntelligenceOrchestrationTab.tsx
@@ -225,7 +225,7 @@ export default function IntelligenceOrchestrationTab() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-10 text-stone-400 dark:text-neutral-500">
+      <div className="flex items-center justify-center py-10 text-content-faint">
         <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent" />
         <span className="text-sm">{t('orchestration.loading')}</span>
       </div>
@@ -253,15 +253,15 @@ export default function IntelligenceOrchestrationTab() {
 
   return (
     <div className="space-y-6" data-testid="orchestration-tab">
-      <p className="text-xs text-stone-400 dark:text-neutral-500">{t('orchestration.subtitle')}</p>
+      <p className="text-xs text-content-faint">{t('orchestration.subtitle')}</p>
 
       {/* Definitions catalog */}
       <section className="space-y-2">
-        <h3 className="text-xs font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+        <h3 className="text-xs font-semibold uppercase tracking-wide text-content-muted">
           {t('orchestration.definitions')}
         </h3>
         {definitions.length === 0 ? (
-          <div className="rounded-xl border border-dashed border-stone-200 py-8 text-center text-sm text-stone-400 dark:border-neutral-800 dark:text-neutral-500">
+          <div className="rounded-xl border border-dashed border-line py-8 text-center text-sm text-content-faint">
             {t('orchestration.noDefinitions')}
           </div>
         ) : (
@@ -273,14 +273,12 @@ export default function IntelligenceOrchestrationTab() {
                 <li
                   key={def.id}
                   data-testid={`orchestration-definition-${def.id}`}
-                  className="rounded-xl border border-stone-200 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-900">
+                  className="rounded-xl border border-line bg-surface p-3">
                   <div className="flex flex-wrap items-start justify-between gap-2">
                     <div className="min-w-0">
                       <div className="flex flex-wrap items-center gap-1.5">
-                        <span className="text-sm font-medium text-stone-800 dark:text-neutral-100">
-                          {def.name}
-                        </span>
-                        <span className="rounded-md border border-stone-200 px-1.5 py-0.5 text-[10px] font-medium text-stone-500 dark:border-neutral-700 dark:text-neutral-400">
+                        <span className="text-sm font-medium text-content">{def.name}</span>
+                        <span className="rounded-md border border-line px-1.5 py-0.5 text-[10px] font-medium text-content-muted">
                           {t(SAFETY_TIER_KEY[def.safetyTier])}
                         </span>
                         {assessment.requiresApproval && (
@@ -291,9 +289,7 @@ export default function IntelligenceOrchestrationTab() {
                           </span>
                         )}
                       </div>
-                      <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
-                        {def.description}
-                      </p>
+                      <p className="mt-1 text-xs text-content-muted">{def.description}</p>
                     </div>
                     {!isStarting && (
                       <Button
@@ -309,8 +305,8 @@ export default function IntelligenceOrchestrationTab() {
 
                   {/* Inline start panel */}
                   {isStarting && (
-                    <div className="mt-3 space-y-3 border-t border-stone-100 pt-3 dark:border-neutral-800">
-                      <label className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
+                    <div className="mt-3 space-y-3 border-t border-line-subtle pt-3">
+                      <label className="block text-xs font-medium text-content-secondary">
                         {t('orchestration.questionLabel')}
                         <textarea
                           data-testid="orchestration-question"
@@ -318,7 +314,7 @@ export default function IntelligenceOrchestrationTab() {
                           onChange={e => setQuestion(e.target.value)}
                           rows={2}
                           placeholder={t('orchestration.questionPlaceholder')}
-                          className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-2 py-1.5 text-sm text-stone-800 focus:border-primary-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+                          className="mt-1 w-full rounded-lg border border-line bg-surface px-2 py-1.5 text-sm text-content focus:border-primary-500 focus:outline-none"
                         />
                       </label>
 
@@ -369,7 +365,7 @@ export default function IntelligenceOrchestrationTab() {
       {selectedRun && (
         <section className="space-y-2" data-testid="orchestration-selected-run">
           <div className="flex items-center justify-between">
-            <h3 className="text-xs font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+            <h3 className="text-xs font-semibold uppercase tracking-wide text-content-muted">
               {t('orchestration.runProgress')}
             </h3>
             <button
@@ -379,7 +375,7 @@ export default function IntelligenceOrchestrationTab() {
                 setSelectedRunId(null);
                 setSelectedRun(null);
               }}
-              className="text-[11px] text-stone-400 hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300">
+              className="text-[11px] text-content-faint hover:text-content-secondary">
               {t('orchestration.close')}
             </button>
           </div>
@@ -395,16 +391,16 @@ export default function IntelligenceOrchestrationTab() {
 
       {/* Recent runs */}
       <section className="space-y-2">
-        <h3 className="text-xs font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+        <h3 className="text-xs font-semibold uppercase tracking-wide text-content-muted">
           {t('orchestration.recentRuns')}
         </h3>
         {runs.length === 0 ? (
-          <div className="rounded-xl border border-dashed border-stone-200 py-8 text-center text-sm text-stone-400 dark:border-neutral-800 dark:text-neutral-500">
+          <div className="rounded-xl border border-dashed border-line py-8 text-center text-sm text-content-faint">
             {t('orchestration.noRuns')}
           </div>
         ) : (
           <ul
-            className="divide-y divide-stone-100 overflow-hidden rounded-xl border border-stone-200 bg-white dark:divide-neutral-800 dark:border-neutral-800 dark:bg-neutral-900"
+            className="divide-y divide-line-subtle overflow-hidden rounded-xl border border-line bg-surface dark:divide-neutral-800"
             data-testid="orchestration-runs">
             {runs.map(run => {
               const def = definitions.find(d => d.id === run.definitionId);
@@ -414,18 +410,16 @@ export default function IntelligenceOrchestrationTab() {
                     type="button"
                     data-testid={`orchestration-run-${run.id}`}
                     onClick={() => openRun(run)}
-                    className={`flex w-full items-center justify-between gap-2 p-3 text-left hover:bg-stone-50 dark:hover:bg-neutral-800/60 ${
-                      run.id === selectedRunId ? 'bg-stone-50 dark:bg-neutral-800/60' : ''
+                    className={`flex w-full items-center justify-between gap-2 p-3 text-left hover:bg-surface-hover ${
+                      run.id === selectedRunId ? 'bg-surface-muted' : ''
                     }`}>
                     <span className="min-w-0">
-                      <span className="block truncate text-sm font-medium text-stone-800 dark:text-neutral-100">
+                      <span className="block truncate text-sm font-medium text-content">
                         {def?.name ?? run.definitionId}
                       </span>
-                      <span className="font-mono text-[10px] text-stone-400 dark:text-neutral-500">
-                        {run.id}
-                      </span>
+                      <span className="font-mono text-[10px] text-content-faint">{run.id}</span>
                     </span>
-                    <span className="flex-none text-[11px] text-stone-400 dark:text-neutral-500">
+                    <span className="flex-none text-[11px] text-content-faint">
                       {t(`orchestration.runStatus.${run.status}`)}
                     </span>
                   </button>
diff --git a/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx b/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx
index 412be8204..244191ef2 100644
--- a/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx
+++ b/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx
@@ -109,9 +109,7 @@ export default function IntelligenceSubconsciousTab({
     <div className="space-y-5 animate-fade-up">
       {/* Mode selector */}
       <div>
-        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-2">
-          {t('subconscious.mode.label')}
-        </h3>
+        <h3 className="text-sm font-semibold text-content mb-2">{t('subconscious.mode.label')}</h3>
         <div className="grid grid-cols-3 gap-2">
           {MODE_OPTIONS.map(opt => (
             <button
@@ -122,21 +120,17 @@ export default function IntelligenceSubconsciousTab({
               className={`flex flex-col items-center text-center rounded-lg border p-3 transition ${
                 mode === opt.id
                   ? 'border-primary-500 bg-primary-50 dark:bg-primary-500/10'
-                  : 'border-stone-200 dark:border-neutral-800 hover:border-primary-300 dark:hover:border-primary-500/40'
+                  : 'border-line hover:border-primary-300 dark:hover:border-primary-500/40'
               } ${settingMode ? 'opacity-60 cursor-wait' : ''}`}>
               <span
                 className={`inline-block w-3 h-3 rounded-full border-2 mb-1.5 ${
                   mode === opt.id
                     ? 'bg-primary-500 border-primary-500'
-                    : 'border-stone-300 dark:border-neutral-600'
+                    : 'border-line-strong dark:border-neutral-600'
                 }`}
               />
-              <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
-                {t(opt.titleKey)}
-              </span>
-              <p className="mt-1 text-[11px] leading-tight text-stone-500 dark:text-neutral-400">
-                {t(opt.descKey)}
-              </p>
+              <span className="text-sm font-medium text-content">{t(opt.titleKey)}</span>
+              <p className="mt-1 text-[11px] leading-tight text-content-muted">{t(opt.descKey)}</p>
             </button>
           ))}
         </div>
@@ -151,10 +145,10 @@ export default function IntelligenceSubconsciousTab({
       {isEnabled && (
         <div>
           <div className="flex items-center justify-between mb-1.5">
-            <label className="text-xs font-medium text-stone-700 dark:text-neutral-300">
+            <label className="text-xs font-medium text-content-secondary">
               {t('subconscious.interval.label')}
             </label>
-            <span className="text-xs text-stone-500 dark:text-neutral-400">
+            <span className="text-xs text-content-muted">
               {formatMinutes(sliderToMinutes(localSlider), t)}
             </span>
           </div>
@@ -167,9 +161,9 @@ export default function IntelligenceSubconsciousTab({
             onChange={handleSliderChange}
             onMouseUp={handleSliderCommit}
             onTouchEnd={handleSliderCommit}
-            className="w-full h-1.5 rounded-full appearance-none cursor-pointer bg-stone-200 dark:bg-neutral-700 accent-primary-500"
+            className="w-full h-1.5 rounded-full appearance-none cursor-pointer bg-surface-strong accent-primary-500"
           />
-          <div className="flex justify-between mt-1 text-[10px] text-stone-400 dark:text-neutral-500">
+          <div className="flex justify-between mt-1 text-[10px] text-content-faint">
             <span>5m</span>
             <span>1h</span>
             <span>24h</span>
@@ -180,7 +174,7 @@ export default function IntelligenceSubconsciousTab({
       {/* Status bar + Run Now */}
       {isEnabled && (
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2 text-xs text-stone-400 dark:text-neutral-500">
+          <div className="flex items-center gap-2 text-xs text-content-faint">
             {status && (
               <>
                 <span>
@@ -188,7 +182,7 @@ export default function IntelligenceSubconsciousTab({
                 </span>
                 {status.last_tick_at && (
                   <>
-                    <span className="text-stone-300 dark:text-neutral-600">|</span>
+                    <span className="text-content-faint dark:text-neutral-600">|</span>
                     <span>
                       {t('subconscious.last')}:{' '}
                       {new Date(status.last_tick_at * 1000).toLocaleTimeString()}
@@ -197,7 +191,7 @@ export default function IntelligenceSubconsciousTab({
                 )}
                 {status.consecutive_failures > 0 && (
                   <>
-                    <span className="text-stone-300 dark:text-neutral-600">|</span>
+                    <span className="text-content-faint dark:text-neutral-600">|</span>
                     <span className="text-coral-500">
                       {status.consecutive_failures} {t('subconscious.failed')}
                     </span>
@@ -243,7 +237,7 @@ export default function IntelligenceSubconsciousTab({
             <button
               type="button"
               onClick={() => navigate('/settings/llm', settingsNavState(location))}
-              className="flex-shrink-0 rounded-md bg-amber-600 px-2.5 py-1.5 text-xs font-medium text-white hover:bg-amber-700 transition-colors">
+              className="flex-shrink-0 rounded-md bg-amber-600 px-2.5 py-1.5 text-xs font-medium text-content-inverted hover:bg-amber-700 transition-colors">
               {t('subconscious.providerSettings')}
             </button>
           </div>
diff --git a/app/src/components/intelligence/IntelligenceTasksTab.tsx b/app/src/components/intelligence/IntelligenceTasksTab.tsx
index 1b4c72426..71d57e716 100644
--- a/app/src/components/intelligence/IntelligenceTasksTab.tsx
+++ b/app/src/components/intelligence/IntelligenceTasksTab.tsx
@@ -546,9 +546,7 @@ export default function IntelligenceTasksTab() {
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between gap-3">
-        <p className="text-xs text-stone-400 dark:text-neutral-500">
-          {t('intelligence.tasks.subtitle')}
-        </p>
+        <p className="text-xs text-content-faint">{t('intelligence.tasks.subtitle')}</p>
         <button
           type="button"
           onClick={() => setComposerOpen(true)}
@@ -567,7 +565,7 @@ export default function IntelligenceTasksTab() {
       {/* Personal board — always present so users can manage their own tasks. */}
       <section className="space-y-2">
         <div className="flex items-center gap-2">
-          <h3 className="truncate text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          <h3 className="truncate text-sm font-semibold text-content-secondary">
             {t('intelligence.tasks.personalBoardTitle')}
           </h3>
         </div>
@@ -609,7 +607,7 @@ export default function IntelligenceTasksTab() {
       )}
 
       {loading && (
-        <div className="flex items-center justify-center py-6 text-stone-400 dark:text-neutral-500">
+        <div className="flex items-center justify-center py-6 text-content-faint">
           <div className="h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent mr-2" />
           <span className="text-sm">{t('intelligence.tasks.loadingBoards')}</span>
         </div>
@@ -626,7 +624,7 @@ export default function IntelligenceTasksTab() {
         <section key={entry.threadId} className="space-y-2">
           <div className="flex items-center gap-2">
             <h3
-              className="truncate text-sm font-semibold text-stone-700 dark:text-neutral-200"
+              className="truncate text-sm font-semibold text-content-secondary"
               title={entry.title}>
               {entry.title}
             </h3>
@@ -791,10 +789,10 @@ function TaskSourceTaskList({
     <section className="space-y-2">
       <div className="flex flex-wrap items-center justify-between gap-2">
         <div className="min-w-0">
-          <h3 className="truncate text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          <h3 className="truncate text-sm font-semibold text-content-secondary">
             {t('settings.taskSources.title')}
           </h3>
-          <p className="text-xs text-stone-400 dark:text-neutral-500">
+          <p className="text-xs text-content-faint">
             {t('intelligence.tasks.sourceList.subtitle')}
           </p>
         </div>
@@ -807,11 +805,11 @@ function TaskSourceTaskList({
       </div>
 
       {sortedCards.length === 0 ? (
-        <div className="rounded-xl border border-dashed border-stone-200 py-7 text-center text-sm text-stone-400 dark:border-neutral-800 dark:text-neutral-500">
+        <div className="rounded-xl border border-dashed border-line py-7 text-center text-sm text-content-faint">
           {t('intelligence.tasks.sourceList.empty')}
         </div>
       ) : (
-        <ul className="divide-y divide-stone-100 rounded-xl border border-stone-200 bg-white dark:divide-neutral-800 dark:border-neutral-800 dark:bg-neutral-900">
+        <ul className="divide-y divide-line-subtle rounded-xl border border-line bg-surface dark:divide-neutral-800">
           {sortedCards.map(card => {
             const source = readSourceMetadata(card.sourceMetadata);
             const done = card.status === 'done';
@@ -830,11 +828,11 @@ function TaskSourceTaskList({
                         </span>
                       )}
                     </div>
-                    <p className="break-words text-sm font-medium leading-snug text-stone-800 dark:text-neutral-100">
+                    <p className="break-words text-sm font-medium leading-snug text-content">
                       {card.title}
                     </p>
                     {(card.objective || card.notes) && (
-                      <p className="line-clamp-2 break-words text-xs leading-snug text-stone-500 dark:text-neutral-400">
+                      <p className="line-clamp-2 break-words text-xs leading-snug text-content-muted">
                         {card.objective || card.notes}
                       </p>
                     )}
@@ -846,7 +844,7 @@ function TaskSourceTaskList({
                         target="_blank"
                         rel="noreferrer"
                         title={t('conversations.taskKanban.source.openExternal')}
-                        className="flex h-8 w-8 items-center justify-center rounded-md border border-stone-200 text-stone-500 hover:bg-stone-50 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
+                        className="flex h-8 w-8 items-center justify-center rounded-md border border-line text-content-muted hover:bg-surface-hover dark:text-content-secondary">
                         <LuExternalLink className="h-4 w-4" />
                       </a>
                     )}
@@ -908,13 +906,13 @@ function TaskSourceRefinementDialog({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
-      <div className="max-h-[90vh] w-full max-w-2xl overflow-hidden rounded-xl border border-stone-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-950">
-        <div className="flex items-start justify-between gap-3 border-b border-stone-100 px-4 py-3 dark:border-neutral-800">
+      <div className="max-h-[90vh] w-full max-w-2xl overflow-hidden rounded-xl border border-line bg-surface shadow-xl dark:bg-surface-canvas">
+        <div className="flex items-start justify-between gap-3 border-b border-line-subtle px-4 py-3">
           <div className="min-w-0">
-            <h3 className="text-sm font-semibold text-stone-800 dark:text-neutral-100">
+            <h3 className="text-sm font-semibold text-content">
               {t('intelligence.tasks.sourcePlan.title')}
             </h3>
-            <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+            <p className="mt-0.5 text-xs text-content-muted">
               {t('intelligence.tasks.sourcePlan.subtitle')}
             </p>
           </div>
@@ -938,66 +936,66 @@ function TaskSourceRefinementDialog({
           </div>
 
           <label className="block space-y-1">
-            <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+            <span className="text-xs font-medium text-content-secondary">
               {t('conversations.taskKanban.field.title')}
             </span>
             <input
               value={title}
               onChange={event => setTitle(event.target.value)}
-              className="w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-800 outline-none focus:border-ocean-400 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100"
+              className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content outline-none focus:border-ocean-400"
             />
           </label>
 
           <label className="block space-y-1">
-            <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+            <span className="text-xs font-medium text-content-secondary">
               {t('conversations.taskKanban.field.objective')}
             </span>
             <textarea
               value={objective}
               onChange={event => setObjective(event.target.value)}
               rows={3}
-              className="w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-800 outline-none focus:border-ocean-400 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100"
+              className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content outline-none focus:border-ocean-400"
             />
           </label>
 
           <label className="block space-y-1">
-            <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+            <span className="text-xs font-medium text-content-secondary">
               {t('conversations.taskKanban.field.plan')}
             </span>
             <textarea
               value={planText}
               onChange={event => setPlanText(event.target.value)}
               rows={5}
-              className="w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-800 outline-none focus:border-ocean-400 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100"
+              className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content outline-none focus:border-ocean-400"
             />
           </label>
 
           <label className="block space-y-1">
-            <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+            <span className="text-xs font-medium text-content-secondary">
               {t('conversations.taskKanban.field.acceptanceCriteria')}
             </span>
             <textarea
               value={criteriaText}
               onChange={event => setCriteriaText(event.target.value)}
               rows={4}
-              className="w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-800 outline-none focus:border-ocean-400 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100"
+              className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content outline-none focus:border-ocean-400"
             />
           </label>
 
           <label className="block space-y-1">
-            <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+            <span className="text-xs font-medium text-content-secondary">
               {t('conversations.taskKanban.field.notes')}
             </span>
             <textarea
               value={notes}
               onChange={event => setNotes(event.target.value)}
               rows={3}
-              className="w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-800 outline-none focus:border-ocean-400 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100"
+              className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content outline-none focus:border-ocean-400"
             />
           </label>
         </div>
 
-        <div className="flex flex-wrap items-center justify-end gap-2 border-t border-stone-100 px-4 py-3 dark:border-neutral-800">
+        <div className="flex flex-wrap items-center justify-end gap-2 border-t border-line-subtle px-4 py-3">
           <Button variant="secondary" size="sm" onClick={onClose} disabled={saving}>
             {t('common.cancel')}
           </Button>
diff --git a/app/src/components/intelligence/IntelligenceTeamsTab.tsx b/app/src/components/intelligence/IntelligenceTeamsTab.tsx
index c422d53c4..7b0918221 100644
--- a/app/src/components/intelligence/IntelligenceTeamsTab.tsx
+++ b/app/src/components/intelligence/IntelligenceTeamsTab.tsx
@@ -240,7 +240,7 @@ export default function IntelligenceTeamsTab() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-10 text-stone-400 dark:text-neutral-500">
+      <div className="flex items-center justify-center py-10 text-content-faint">
         <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent" />
         <span className="text-sm">{t('intelligence.teams.loading')}</span>
       </div>
@@ -261,17 +261,11 @@ export default function IntelligenceTeamsTab() {
   if (teams.length === 0) {
     return (
       <div className="space-y-4">
-        <p className="text-xs text-stone-400 dark:text-neutral-500">
-          {t('intelligence.teams.subtitle')}
-        </p>
-        <div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-stone-200 py-12 text-center dark:border-neutral-800">
-          <LuUsers className="h-6 w-6 text-stone-300 dark:text-neutral-600" />
-          <p className="text-sm text-stone-500 dark:text-neutral-400">
-            {t('intelligence.teams.empty')}
-          </p>
-          <p className="max-w-sm text-xs text-stone-400 dark:text-neutral-500">
-            {t('intelligence.teams.emptyHint')}
-          </p>
+        <p className="text-xs text-content-faint">{t('intelligence.teams.subtitle')}</p>
+        <div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-line py-12 text-center">
+          <LuUsers className="h-6 w-6 text-content-faint dark:text-neutral-600" />
+          <p className="text-sm text-content-muted">{t('intelligence.teams.empty')}</p>
+          <p className="max-w-sm text-xs text-content-faint">{t('intelligence.teams.emptyHint')}</p>
         </div>
       </div>
     );
@@ -330,23 +324,21 @@ export default function IntelligenceTeamsTab() {
   return (
     <div className="space-y-3">
       <div className="flex items-center justify-between gap-2">
-        <p className="text-xs text-stone-400 dark:text-neutral-500">
-          {t('intelligence.teams.subtitle')}
-        </p>
+        <p className="text-xs text-content-faint">{t('intelligence.teams.subtitle')}</p>
         <RefreshButton refreshing={refreshing} onClick={() => void refresh()} t={t} />
       </div>
-      <ul className="divide-y divide-stone-100 overflow-hidden rounded-xl border border-stone-200 bg-white dark:divide-neutral-800 dark:border-neutral-800 dark:bg-neutral-900">
+      <ul className="divide-y divide-line-subtle overflow-hidden rounded-xl border border-line bg-surface dark:divide-neutral-800">
         {teams.map(team => (
           <li key={team.id}>
             <button
               type="button"
               onClick={() => selectTeam(team.id)}
-              className="flex w-full items-center justify-between gap-3 p-3 text-left hover:bg-stone-50 dark:hover:bg-neutral-800/60">
+              className="flex w-full items-center justify-between gap-3 p-3 text-left hover:bg-surface-hover">
               <div className="min-w-0">
-                <p className="truncate text-sm font-medium text-stone-800 dark:text-neutral-100">
+                <p className="truncate text-sm font-medium text-content">
                   {team.summary?.trim() || team.leadAgentId}
                 </p>
-                <p className="truncate text-[11px] text-stone-500 dark:text-neutral-400">
+                <p className="truncate text-[11px] text-content-muted">
                   {t('intelligence.teams.header.lead')}{' '}
                   <span className="font-mono">{team.leadAgentId}</span>
                 </p>
@@ -355,7 +347,7 @@ export default function IntelligenceTeamsTab() {
                 className={`flex-none rounded-md px-1.5 py-0.5 text-[10px] ${
                   team.status === 'active'
                     ? 'bg-sage-50 text-sage-700 dark:bg-sage-500/10 dark:text-sage-300'
-                    : 'bg-stone-100 text-stone-500 dark:bg-neutral-800 dark:text-neutral-400'
+                    : 'bg-surface-subtle text-content-muted'
                 }`}>
                 {team.status === 'active'
                   ? t('intelligence.teams.status.active')
diff --git a/app/src/components/intelligence/IntelligenceWorktreesTab.tsx b/app/src/components/intelligence/IntelligenceWorktreesTab.tsx
index f6b21edc6..63476ff5c 100644
--- a/app/src/components/intelligence/IntelligenceWorktreesTab.tsx
+++ b/app/src/components/intelligence/IntelligenceWorktreesTab.tsx
@@ -61,7 +61,7 @@ export default function IntelligenceWorktreesTab() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-10 text-stone-400 dark:text-neutral-500">
+      <div className="flex items-center justify-center py-10 text-content-faint">
         <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent" />
         <span className="text-sm">{t('worktree.panel.loading')}</span>
       </div>
@@ -79,10 +79,8 @@ export default function IntelligenceWorktreesTab() {
   if (!data || data.worktrees.length === 0) {
     return (
       <div className="space-y-4">
-        <p className="text-xs text-stone-400 dark:text-neutral-500">
-          {t('worktree.panel.subtitle')}
-        </p>
-        <div className="rounded-xl border border-dashed border-stone-200 py-10 text-center text-sm text-stone-400 dark:border-neutral-800 dark:text-neutral-500">
+        <p className="text-xs text-content-faint">{t('worktree.panel.subtitle')}</p>
+        <div className="rounded-xl border border-dashed border-line py-10 text-center text-sm text-content-faint">
           {t('worktree.panel.empty')}
         </div>
       </div>
@@ -91,7 +89,7 @@ export default function IntelligenceWorktreesTab() {
 
   return (
     <div className="space-y-4">
-      <p className="text-xs text-stone-400 dark:text-neutral-500">{t('worktree.panel.subtitle')}</p>
+      <p className="text-xs text-content-faint">{t('worktree.panel.subtitle')}</p>
 
       {data.overlaps.length > 0 ? (
         <div
@@ -112,17 +110,15 @@ export default function IntelligenceWorktreesTab() {
         </div>
       ) : null}
 
-      <ul className="divide-y divide-stone-100 overflow-hidden rounded-xl border border-stone-200 bg-white dark:divide-neutral-800 dark:border-neutral-800 dark:bg-neutral-900">
+      <ul className="divide-y divide-line-subtle overflow-hidden rounded-xl border border-line bg-surface dark:divide-neutral-800">
         {data.worktrees.map(wt => (
           <li key={wt.path} className="space-y-2 p-3" data-testid="worktree-row">
             <div className="flex flex-wrap items-center gap-2">
-              <span
-                className="truncate text-sm font-medium text-stone-800 dark:text-neutral-100"
-                title={wt.path}>
+              <span className="truncate text-sm font-medium text-content" title={wt.path}>
                 {basename(wt.path)}
               </span>
               {wt.branch ? (
-                <span className="rounded-md border border-stone-200 px-1.5 py-0.5 font-mono text-[10px] text-stone-500 dark:border-neutral-700 dark:text-neutral-400">
+                <span className="rounded-md border border-line px-1.5 py-0.5 font-mono text-[10px] text-content-muted">
                   {wt.branch}
                 </span>
               ) : null}
@@ -136,7 +132,7 @@ export default function IntelligenceWorktreesTab() {
                 </span>
               )}
               {wt.changedFiles.length > 0 ? (
-                <span className="text-[11px] text-stone-400 dark:text-neutral-500">
+                <span className="text-[11px] text-content-faint">
                   {wt.changedFiles.length}{' '}
                   {wt.changedFiles.length === 1
                     ? t('worktree.changedFile')
@@ -146,16 +142,14 @@ export default function IntelligenceWorktreesTab() {
             </div>
 
             {wt.changedFiles.length > 0 ? (
-              <ul className="ml-1 space-y-0.5 font-mono text-[11px] text-stone-500 dark:text-neutral-400">
+              <ul className="ml-1 space-y-0.5 font-mono text-[11px] text-content-muted">
                 {wt.changedFiles.slice(0, 8).map(f => (
                   <li key={f} className="truncate" title={f}>
                     {f}
                   </li>
                 ))}
                 {wt.changedFiles.length > 8 ? (
-                  <li className="text-stone-400 dark:text-neutral-500">
-                    +{wt.changedFiles.length - 8}
-                  </li>
+                  <li className="text-content-faint">+{wt.changedFiles.length - 8}</li>
                 ) : null}
               </ul>
             ) : null}
diff --git a/app/src/components/intelligence/MemoryControls.tsx b/app/src/components/intelligence/MemoryControls.tsx
index 51e237f33..468077fd1 100644
--- a/app/src/components/intelligence/MemoryControls.tsx
+++ b/app/src/components/intelligence/MemoryControls.tsx
@@ -42,11 +42,11 @@ interface MemoryControlsProps {
 
 const BTN_BASE =
   'inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2';
-const BTN_PRIMARY = `${BTN_BASE} bg-primary-500 text-white shadow-sm hover:bg-primary-600 focus:ring-primary-200`;
-const BTN_GHOST = `${BTN_BASE} border border-stone-200 bg-white text-stone-700 shadow-sm hover:bg-stone-50 focus:ring-stone-200 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:ring-neutral-700`;
+const BTN_PRIMARY = `${BTN_BASE} bg-primary-500 text-content-inverted shadow-sm hover:bg-primary-600 focus:ring-primary-200`;
+const BTN_GHOST = `${BTN_BASE} border border-line bg-surface text-content-secondary shadow-sm hover:bg-surface-hover focus:ring-stone-200 dark:focus:ring-neutral-700`;
 // Destructive actions read as proper (bordered) buttons but stay muted until
 // hover, when they reveal their warning tint.
-const BTN_MUTED = `${BTN_BASE} border border-stone-200 bg-white text-stone-500 shadow-sm focus:ring-stone-200 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-400 dark:focus:ring-neutral-700`;
+const BTN_MUTED = `${BTN_BASE} border border-line bg-surface text-content-muted shadow-sm focus:ring-stone-200 dark:focus:ring-neutral-700`;
 
 export function MemoryControls({
   mode,
@@ -174,7 +174,7 @@ export function MemoryControls({
           {resetting ? t('workspace.rebuilding') : t('workspace.resetMemoryTree')}
         </button>
 
-        <span aria-hidden className="mx-1 h-5 w-px self-center bg-stone-200 dark:bg-neutral-700" />
+        <span aria-hidden className="mx-1 h-5 w-px self-center bg-surface-strong" />
 
         {/* Secondary actions — quiet ghost buttons. */}
         <button
diff --git a/app/src/components/intelligence/MemoryFreshnessPanel.tsx b/app/src/components/intelligence/MemoryFreshnessPanel.tsx
index ccffc12b4..6a6e0f6ab 100644
--- a/app/src/components/intelligence/MemoryFreshnessPanel.tsx
+++ b/app/src/components/intelligence/MemoryFreshnessPanel.tsx
@@ -35,7 +35,7 @@ const MemoryFreshnessPanel = ({ report, loading, error, onRetry }: MemoryFreshne
   const intro = (
     <div
       role="note"
-      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-stone-700 dark:text-neutral-200">
+      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-content-secondary">
       <p className="font-medium mb-1">{t('memoryFreshness.title')}</p>
       <p>{t('memoryFreshness.intro')}</p>
     </div>
@@ -54,14 +54,14 @@ const MemoryFreshnessPanel = ({ report, loading, error, onRetry }: MemoryFreshne
             {[0, 1, 2].map(i => (
               <div
                 key={i}
-                className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-16"
+                className="animate-pulse rounded-lg border border-line bg-surface-muted h-16"
               />
             ))}
           </div>
           {[0, 1, 2, 3].map(i => (
             <div
               key={i}
-              className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-8"
+              className="animate-pulse rounded-lg border border-line bg-surface-muted h-8"
             />
           ))}
         </div>
@@ -92,12 +92,10 @@ const MemoryFreshnessPanel = ({ report, loading, error, onRetry }: MemoryFreshne
       <div className="space-y-4">
         {intro}
         <div className="py-8 text-center">
-          <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          <h3 className="text-sm font-semibold text-content-secondary">
             {t('memoryFreshness.empty')}
           </h3>
-          <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
-            {t('memoryFreshness.emptyHint')}
-          </p>
+          <p className="mt-1 text-xs text-content-muted">{t('memoryFreshness.emptyHint')}</p>
         </div>
       </div>
     );
@@ -116,19 +114,15 @@ const MemoryFreshnessPanel = ({ report, loading, error, onRetry }: MemoryFreshne
           { label: t('memoryFreshness.metricFading'), value: report.fadingCount },
           { label: t('memoryFreshness.metricStale'), value: report.staleCount },
         ].map(tile => (
-          <div
-            key={tile.label}
-            className="rounded-lg border border-stone-200 dark:border-neutral-800 p-3">
-            <div className="text-[10px] uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+          <div key={tile.label} className="rounded-lg border border-line p-3">
+            <div className="text-[10px] uppercase tracking-wider text-content-faint">
               {tile.label}
             </div>
-            <div className="text-lg font-semibold tabular-nums text-stone-900 dark:text-neutral-100">
-              {tile.value}
-            </div>
+            <div className="text-lg font-semibold tabular-nums text-content">{tile.value}</div>
           </div>
         ))}
       </div>
-      <p className="text-[11px] text-stone-500 dark:text-neutral-400 tabular-nums">
+      <p className="text-[11px] text-content-muted tabular-nums">
         {t('memoryFreshness.recallCaption')
           .replace('{recall}', String(pct(report.averageRecall)))
           .replace('{total}', String(report.total))}
@@ -138,24 +132,22 @@ const MemoryFreshnessPanel = ({ report, loading, error, onRetry }: MemoryFreshne
       <section aria-labelledby="memory-freshness-heading" className="space-y-1">
         <h3
           id="memory-freshness-heading"
-          className="text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+          className="text-xs font-semibold uppercase tracking-wider text-content-muted">
           {t('memoryFreshness.queueHeading')}
         </h3>
         {queue.length === 0 ? (
-          <p className="text-xs text-stone-500 dark:text-neutral-400">
-            {t('memoryFreshness.allFresh')}
-          </p>
+          <p className="text-xs text-content-muted">{t('memoryFreshness.allFresh')}</p>
         ) : (
           <ul className="space-y-1.5">
             {queue.map(fact => (
               <li
                 key={fact.id}
-                className="rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-2"
+                className="rounded-lg border border-line px-3 py-2"
                 title={t('memoryFreshness.recallTitle')
                   .replace('{recall}', String(pct(fact.recall)))
                   .replace('{halfLife}', String(Math.round(fact.halfLifeDays)))}>
                 <div className="flex items-center justify-between gap-2">
-                  <p className="min-w-0 text-sm text-stone-800 dark:text-neutral-100 break-words">
+                  <p className="min-w-0 text-sm text-content break-words">
                     {fact.subject} {fact.predicate} {fact.object}
                   </p>
                   <span
@@ -166,16 +158,16 @@ const MemoryFreshnessPanel = ({ report, loading, error, onRetry }: MemoryFreshne
                   </span>
                 </div>
                 <div className="mt-1 flex items-center gap-2 text-[11px] tabular-nums">
-                  <div className="flex-1 h-2 rounded bg-stone-100 dark:bg-neutral-800 overflow-hidden">
+                  <div className="flex-1 h-2 rounded bg-surface-subtle overflow-hidden">
                     <div
                       className={`h-full ${STATUS_BAR[fact.status]}`}
                       style={{ width: `${pct(fact.recall)}%` }}
                     />
                   </div>
-                  <span className="w-10 shrink-0 text-right text-stone-500 dark:text-neutral-400">
+                  <span className="w-10 shrink-0 text-right text-content-muted">
                     {pct(fact.recall)}%
                   </span>
-                  <span className="w-16 shrink-0 text-right text-stone-400 dark:text-neutral-500">
+                  <span className="w-16 shrink-0 text-right text-content-faint">
                     {t('memoryFreshness.ageLabel').replace(
                       '{days}',
                       String(Math.round(fact.ageDays))
@@ -187,7 +179,7 @@ const MemoryFreshnessPanel = ({ report, loading, error, onRetry }: MemoryFreshne
           </ul>
         )}
         {report.staleQueue.length > MAX_QUEUE_ROWS && (
-          <p className="text-center text-xs text-stone-400 dark:text-neutral-500">
+          <p className="text-center text-xs text-content-faint">
             {t('memoryFreshness.queueTruncated')
               .replace('{shown}', String(MAX_QUEUE_ROWS))
               .replace('{total}', String(report.staleQueue.length))}
diff --git a/app/src/components/intelligence/MemoryFreshnessTab.tsx b/app/src/components/intelligence/MemoryFreshnessTab.tsx
index 694c52235..dd440751e 100644
--- a/app/src/components/intelligence/MemoryFreshnessTab.tsx
+++ b/app/src/components/intelligence/MemoryFreshnessTab.tsx
@@ -56,12 +56,12 @@ const MemoryFreshnessTab = () => {
   return (
     <div className="space-y-4">
       {namespaces.length > 0 && (
-        <label className="flex items-center gap-2 text-xs text-stone-600 dark:text-neutral-300">
+        <label className="flex items-center gap-2 text-xs text-content-secondary">
           {t('memoryFreshness.namespaceLabel')}
           <select
             value={namespace}
             onChange={e => handleNamespace(e.target.value)}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-sm text-stone-800 dark:text-neutral-100">
+            className="rounded-lg border border-line bg-surface px-2 py-1 text-sm text-content">
             <option value="">{t('memoryFreshness.namespaceAll')}</option>
             {namespaces.map(ns => (
               <option key={ns} value={ns}>
diff --git a/app/src/components/intelligence/MemoryGraph.tsx b/app/src/components/intelligence/MemoryGraph.tsx
index 6d2299cb2..60221f2f4 100644
--- a/app/src/components/intelligence/MemoryGraph.tsx
+++ b/app/src/components/intelligence/MemoryGraph.tsx
@@ -532,7 +532,7 @@ export function MemoryGraph({ nodes, edges, mode, emptyHint, onReady }: MemoryGr
   if (nodes.length === 0) {
     return (
       <div
-        className="flex h-[640px] items-center justify-center rounded-lg border border-stone-100 dark:border-neutral-800 bg-stone-50/40 text-sm text-stone-500 dark:text-neutral-400"
+        className="flex h-[640px] items-center justify-center rounded-lg border border-line-subtle bg-surface-muted/40 text-sm text-content-muted"
         data-testid="memory-graph-empty">
         {emptyHint ?? (mode === 'contacts' ? t('graph.noContactMentions') : t('graph.noMemory'))}
       </div>
@@ -565,14 +565,14 @@ export function MemoryGraph({ nodes, edges, mode, emptyHint, onReady }: MemoryGr
 
   return (
     <div
-      className="memory-graph rounded-lg border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900"
+      className="memory-graph rounded-lg border border-line-subtle bg-surface"
       onMouseLeave={() => setHovered(null)}>
-      <div className="flex items-center justify-between gap-4 border-b border-stone-100 dark:border-neutral-800 px-4 py-2">
-        <div className="flex items-center gap-3 text-xs text-stone-500 dark:text-neutral-400">
+      <div className="flex items-center justify-between gap-4 border-b border-line-subtle px-4 py-2">
+        <div className="flex items-center gap-3 text-xs text-content-muted">
           <span>
             {nodes.length} {t('graph.nodes')}
           </span>
-          <span className="text-stone-300 dark:text-neutral-600">·</span>
+          <span className="text-content-faint dark:text-neutral-600">·</span>
           <span>
             {sim.edges.length}{' '}
             {mode === 'tree' ? t('graph.parentChild') : t('graph.documentContact')}{' '}
@@ -583,7 +583,7 @@ export function MemoryGraph({ nodes, edges, mode, emptyHint, onReady }: MemoryGr
           {legend.map(item => (
             <span
               key={item.label}
-              className="flex items-center gap-1.5 text-xs text-stone-600 dark:text-neutral-300">
+              className="flex items-center gap-1.5 text-xs text-content-secondary">
               <span
                 className="inline-block h-2.5 w-2.5 rounded-full"
                 style={{ backgroundColor: item.color }}
@@ -700,7 +700,7 @@ export function MemoryGraph({ nodes, edges, mode, emptyHint, onReady }: MemoryGr
       )}
       {hovered && (
         <div
-          className="border-t border-stone-100 dark:border-neutral-800 bg-stone-50/70 dark:bg-neutral-900/70 px-4 py-2 text-xs text-stone-700 dark:text-neutral-200"
+          className="border-t border-line-subtle bg-surface-muted/70 dark:bg-surface/70 px-4 py-2 text-xs text-content-secondary"
           data-testid="memory-graph-tooltip">
           {hovered.kind === 'root' ? (
             <span className="font-medium text-violet-600 dark:text-violet-400">
@@ -713,17 +713,17 @@ export function MemoryGraph({ nodes, edges, mode, emptyHint, onReady }: MemoryGr
           ) : hovered.kind === 'summary' ? (
             <>
               <span className="font-mono">L{hovered.level ?? '?'}</span>
-              <span className="text-stone-400 dark:text-neutral-500"> · </span>
+              <span className="text-content-faint"> · </span>
               <span className="capitalize">{hovered.tree_kind}</span>
-              <span className="text-stone-400 dark:text-neutral-500"> · </span>
+              <span className="text-content-faint"> · </span>
               <span>{hovered.tree_scope}</span>
-              <span className="text-stone-400 dark:text-neutral-500"> · </span>
+              <span className="text-content-faint"> · </span>
               <span>
                 {hovered.child_count ?? 0} {t('graph.children')}
               </span>
               {hoveredSummaryPath && (
                 <>
-                  <span className="ml-3 break-all font-mono text-stone-400 dark:text-neutral-500">
+                  <span className="ml-3 break-all font-mono text-content-faint">
                     workspace:{hoveredSummaryPath}
                   </span>
                   <Button
@@ -745,28 +745,26 @@ export function MemoryGraph({ nodes, edges, mode, emptyHint, onReady }: MemoryGr
               <span className="font-medium text-violet-700 dark:text-violet-300">
                 {hovered.label}
               </span>
-              <span className="ml-3 text-stone-400 dark:text-neutral-500">
+              <span className="ml-3 text-content-faint">
                 {t('graph.person')} · canonical id {hovered.id.slice(0, 12)}…
               </span>
             </>
           ) : (
             <>
               <span className="font-medium">{hovered.label || 'chunk'}</span>
-              <span className="ml-3 text-stone-400 dark:text-neutral-500">
-                {t('graph.document')}
-              </span>
+              <span className="ml-3 text-content-faint">{t('graph.document')}</span>
             </>
           )}
         </div>
       )}
       {preview && (
         <div
-          className="border-t border-stone-100 bg-white px-4 py-3 dark:border-neutral-800 dark:bg-neutral-950"
+          className="border-t border-line-subtle bg-surface px-4 py-3 dark:bg-surface-canvas"
           data-testid="memory-graph-preview">
-          <div className="mb-2 break-all font-mono text-[11px] text-stone-400 dark:text-neutral-500">
+          <div className="mb-2 break-all font-mono text-[11px] text-content-faint">
             workspace:{preview.path}
           </div>
-          <pre className="max-h-40 overflow-auto whitespace-pre-wrap rounded-md bg-stone-50 p-3 text-xs text-stone-700 dark:bg-neutral-900 dark:text-neutral-200">
+          <pre className="max-h-40 overflow-auto whitespace-pre-wrap rounded-md bg-surface-muted p-3 text-xs text-content-secondary">
             {preview.error || preview.contents}
             {preview.truncated ? '\n…' : ''}
           </pre>
diff --git a/app/src/components/intelligence/MemoryHeatmap.tsx b/app/src/components/intelligence/MemoryHeatmap.tsx
index 64bfc0cc9..afceee100 100644
--- a/app/src/components/intelligence/MemoryHeatmap.tsx
+++ b/app/src/components/intelligence/MemoryHeatmap.tsx
@@ -128,23 +128,19 @@ export function MemoryHeatmap({ timestamps, loading }: MemoryHeatmapProps) {
 
   if (loading) {
     return (
-      <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
-        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-3">
-          {t('memory.ingestionActivity')}
-        </h3>
-        <div className="h-28 rounded-lg bg-stone-200 dark:bg-neutral-800 animate-pulse" />
+      <div className="rounded-xl border border-line bg-surface-muted p-5">
+        <h3 className="text-sm font-semibold text-content mb-3">{t('memory.ingestionActivity')}</h3>
+        <div className="h-28 rounded-lg bg-surface-strong animate-pulse" />
       </div>
     );
   }
 
   return (
-    <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
+    <div className="rounded-xl border border-line bg-surface-muted p-5">
       <div className="flex items-center justify-between mb-3">
         <div>
-          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
-            {t('memory.ingestionActivity')}
-          </h3>
-          <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
+          <h3 className="text-sm font-semibold text-content">{t('memory.ingestionActivity')}</h3>
+          <p className="text-xs text-content-muted mt-0.5">
             {totalEvents} {totalEvents !== 1 ? t('memory.events') : t('memory.event')}{' '}
             {t('memory.overTheLast')} {MONTHS} {t('memory.months')}
             {maxDailyCount > 0 && (
@@ -156,7 +152,7 @@ export function MemoryHeatmap({ timestamps, loading }: MemoryHeatmapProps) {
             )}
           </p>
         </div>
-        <div className="flex items-center gap-1 text-[10px] text-stone-500 dark:text-neutral-400">
+        <div className="flex items-center gap-1 text-[10px] text-content-muted">
           <span>{t('memory.less')}</span>
           {INTENSITY_COLORS.map((color, i) => (
             <div
@@ -242,12 +238,12 @@ export function MemoryHeatmap({ timestamps, loading }: MemoryHeatmapProps) {
       {/* Tooltip */}
       {hoveredCell && (
         <div
-          className="fixed z-50 px-2 py-1 rounded-md bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 text-[11px] text-stone-900 dark:text-neutral-100 shadow-lg pointer-events-none"
+          className="fixed z-50 px-2 py-1 rounded-md bg-surface border border-line text-[11px] text-content shadow-lg pointer-events-none"
           style={{ left: hoveredCell.x, top: hoveredCell.y - 32, transform: 'translateX(-50%)' }}>
           <span className="font-medium">
             {hoveredCell.count} {hoveredCell.count !== 1 ? t('memory.events') : t('memory.event')}
           </span>{' '}
-          <span className="text-stone-400 dark:text-neutral-500">
+          <span className="text-content-faint">
             {t('memory.on')} {formatDate(hoveredCell.date)}
           </span>
         </div>
diff --git a/app/src/components/intelligence/MemoryInsights.tsx b/app/src/components/intelligence/MemoryInsights.tsx
index 369a47d49..117bcf05a 100644
--- a/app/src/components/intelligence/MemoryInsights.tsx
+++ b/app/src/components/intelligence/MemoryInsights.tsx
@@ -130,9 +130,9 @@ function useInsightCategoryLabels() {
     other: {
       label: t('insights.other'),
       icon: 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z',
-      color: 'text-stone-600 dark:text-neutral-300',
-      bgColor: 'bg-stone-100 dark:bg-neutral-800',
-      borderColor: 'border-stone-200 dark:border-neutral-800',
+      color: 'text-content-secondary',
+      bgColor: 'bg-surface-subtle',
+      borderColor: 'border-line',
     },
   } as const;
 }
@@ -140,7 +140,7 @@ function useInsightCategoryLabels() {
 /** Small inline badge that displays an entity type (e.g. "person", "project"). */
 function EntityTypeBadge({ type }: { type: string }) {
   return (
-    <span className="inline-block ml-1 px-1 py-px rounded text-[9px] leading-tight font-medium bg-white/8 text-stone-400 dark:text-neutral-500 border border-white/6 uppercase tracking-wide">
+    <span className="inline-block ml-1 px-1 py-px rounded text-[9px] leading-tight font-medium bg-surface/8 text-content-faint border border-white/6 uppercase tracking-wide">
       {type}
     </span>
   );
@@ -192,16 +192,11 @@ export function MemoryInsights({ relations, loading }: MemoryInsightsProps) {
 
   if (loading) {
     return (
-      <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
-        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-4">
-          {t('insights.title')}
-        </h3>
+      <div className="rounded-xl border border-line bg-surface-muted p-5">
+        <h3 className="text-sm font-semibold text-content mb-4">{t('insights.title')}</h3>
         <div className="grid grid-cols-2 lg:grid-cols-3 gap-3">
           {[1, 2, 3].map(i => (
-            <div
-              key={i}
-              className="h-28 rounded-lg bg-stone-200 dark:bg-neutral-800 animate-pulse"
-            />
+            <div key={i} className="h-28 rounded-lg bg-surface-strong animate-pulse" />
           ))}
         </div>
       </div>
@@ -210,23 +205,19 @@ export function MemoryInsights({ relations, loading }: MemoryInsightsProps) {
 
   if (groups.length === 0) {
     return (
-      <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
-        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-2">
-          {t('insights.title')}
-        </h3>
-        <p className="text-sm text-stone-600 dark:text-neutral-300">{t('insights.empty')}</p>
+      <div className="rounded-xl border border-line bg-surface-muted p-5">
+        <h3 className="text-sm font-semibold text-content mb-2">{t('insights.title')}</h3>
+        <p className="text-sm text-content-secondary">{t('insights.empty')}</p>
       </div>
     );
   }
 
   return (
-    <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
+    <div className="rounded-xl border border-line bg-surface-muted p-5">
       <div className="flex items-center justify-between mb-4">
         <div>
-          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
-            {t('insights.title')}
-          </h3>
-          <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
+          <h3 className="text-sm font-semibold text-content">{t('insights.title')}</h3>
+          <p className="text-xs text-content-muted mt-0.5">
             {t('insights.description').replace('{count}', String(relations.length))}
           </p>
         </div>
@@ -263,12 +254,12 @@ export function MemoryInsights({ relations, loading }: MemoryInsightsProps) {
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className={`text-xs font-medium ${group.color}`}>{group.label}</div>
-                  <div className="text-[10px] text-stone-500 dark:text-neutral-400">
+                  <div className="text-[10px] text-content-muted">
                     {group.items.length} {t('insights.items')}
                   </div>
                 </div>
                 <svg
-                  className={`w-3.5 h-3.5 text-stone-500 dark:text-neutral-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+                  className={`w-3.5 h-3.5 text-content-muted transition-transform ${isExpanded ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24">
@@ -287,29 +278,25 @@ export function MemoryInsights({ relations, loading }: MemoryInsightsProps) {
                     key={`${item.subject}-${item.predicate}-${item.object}-${idx}`}
                     className="flex items-start gap-1.5 text-[11px] leading-relaxed">
                     <span
-                      className="text-stone-900 dark:text-neutral-100 font-medium shrink-0 max-w-[30%] truncate"
+                      className="text-content font-medium shrink-0 max-w-[30%] truncate"
                       title={item.subject}>
                       {item.subject}
                       {item.subjectType && <EntityTypeBadge type={item.subjectType} />}
                     </span>
-                    <span className="text-stone-500 dark:text-neutral-400 shrink-0 italic">
-                      {item.predicate}
-                    </span>
-                    <span
-                      className="text-stone-600 dark:text-neutral-300 truncate"
-                      title={item.object}>
+                    <span className="text-content-muted shrink-0 italic">{item.predicate}</span>
+                    <span className="text-content-secondary truncate" title={item.object}>
                       {item.object}
                       {item.objectType && <EntityTypeBadge type={item.objectType} />}
                     </span>
                     {item.evidenceCount > 1 && (
-                      <span className="ml-auto text-[9px] text-stone-600 dark:text-neutral-300 shrink-0 tabular-nums">
+                      <span className="ml-auto text-[9px] text-content-secondary shrink-0 tabular-nums">
                         x{item.evidenceCount}
                       </span>
                     )}
                   </div>
                 ))}
                 {!isExpanded && group.items.length > 3 && (
-                  <div className="text-[10px] text-stone-500 dark:text-neutral-400 pt-0.5">
+                  <div className="text-[10px] text-content-muted pt-0.5">
                     +{group.items.length - 3} {t('insights.more')}
                   </div>
                 )}
diff --git a/app/src/components/intelligence/MemorySourcesRegistry.tsx b/app/src/components/intelligence/MemorySourcesRegistry.tsx
index d17d565bf..f7f0a21ad 100644
--- a/app/src/components/intelligence/MemorySourcesRegistry.tsx
+++ b/app/src/components/intelligence/MemorySourcesRegistry.tsx
@@ -492,13 +492,9 @@ export function MemorySourcesRegistry({
   };
 
   return (
-    <section
-      className="rounded-lg border border-stone-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900"
-      data-testid="memory-sources">
+    <section className="rounded-lg border border-line bg-surface p-4" data-testid="memory-sources">
       <header className="mb-3 flex items-center justify-between gap-2">
-        <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
-          {t('memorySources.title')}
-        </h3>
+        <h3 className="text-sm font-semibold text-content-secondary">{t('memorySources.title')}</h3>
         <div className="flex items-center gap-2">
           <button
             type="button"
@@ -506,10 +502,10 @@ export function MemorySourcesRegistry({
             disabled={applyingAllIn}
             data-testid="all-in-button"
             className="inline-flex items-center gap-1 rounded-md border border-primary-300
-                       bg-white px-3 py-1.5 text-xs font-semibold text-primary-600
+                       bg-surface px-3 py-1.5 text-xs font-semibold text-primary-600
                        shadow-sm transition-colors hover:bg-primary-50
                        disabled:cursor-not-allowed disabled:opacity-50
-                       dark:border-primary-500/30 dark:bg-neutral-900 dark:text-primary-400
+                       dark:border-primary-500/30 dark:bg-surface dark:text-primary-400
                        dark:hover:bg-primary-500/10
                        focus:outline-none focus:ring-2 focus:ring-primary-200">
             <AllInIcon />
@@ -528,11 +524,11 @@ export function MemorySourcesRegistry({
       <MemorySyncSchedule lastSyncMs={overallLastSyncMs} onToast={onToast} />
 
       {loading ? (
-        <p className="text-xs text-stone-500 dark:text-neutral-400">{t('common.loading')}</p>
+        <p className="text-xs text-content-muted">{t('common.loading')}</p>
       ) : sources.length === 0 ? (
-        <p className="text-xs text-stone-500 dark:text-neutral-400">{t('memorySources.empty')}</p>
+        <p className="text-xs text-content-muted">{t('memorySources.empty')}</p>
       ) : (
-        <ul className="divide-y divide-stone-100 dark:divide-neutral-800">
+        <ul className="divide-y divide-line-subtle dark:divide-neutral-800">
           {sources.map(source => (
             <SourceRow
               key={source.id}
@@ -646,14 +642,14 @@ function MemorySyncSchedule({ lastSyncMs, onToast }: MemorySyncScheduleProps) {
 
   return (
     <div
-      className="mb-3 rounded-md border border-stone-200 bg-stone-50 p-3 dark:border-neutral-800 dark:bg-neutral-800/40"
+      className="mb-3 rounded-md border border-line bg-surface-muted p-3"
       data-testid="memory-sync-schedule">
       <div className="flex flex-wrap items-center justify-between gap-2">
         <div className="min-w-0">
-          <p className="text-xs font-semibold text-stone-600 dark:text-neutral-300">
+          <p className="text-xs font-semibold text-content-secondary">
             {t('memorySyncInterval.title')}
           </p>
-          <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+          <p className="mt-0.5 text-xs text-content-muted">
             <span>
               {t('memorySyncInterval.lastSynced')} {lastSync ?? t('memorySyncInterval.never')}
             </span>
@@ -681,7 +677,7 @@ function MemorySyncSchedule({ lastSyncMs, onToast }: MemorySyncScheduleProps) {
                   disabled:cursor-not-allowed disabled:opacity-50 ${
                     isSelected
                       ? 'border-primary-500 bg-primary-50 text-primary-700 dark:border-primary-500/50 dark:bg-primary-500/10 dark:text-primary-300'
-                      : 'border-stone-200 bg-white text-stone-600 hover:bg-stone-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800'
+                      : 'border-line bg-surface text-content-secondary hover:bg-surface-hover'
                   }`}>
                 {intervalChipLabel(secs, t)}
               </button>
@@ -740,25 +736,19 @@ function SourceRow({
             <span className="text-base">{icon}</span>
             <span
               className={`truncate text-sm font-medium ${
-                source.enabled
-                  ? 'text-stone-900 dark:text-neutral-100'
-                  : 'text-stone-400 line-through dark:text-neutral-500'
+                source.enabled ? 'text-content' : 'text-content-faint line-through'
               }`}>
               {source.label}
             </span>
-            <span className="rounded-md bg-stone-100 px-1.5 py-0.5 text-[10px] font-medium text-stone-500 dark:bg-neutral-800 dark:text-neutral-400">
+            <span className="rounded-md bg-surface-subtle px-1.5 py-0.5 text-[10px] font-medium text-content-muted">
               {kindLabel}
             </span>
             {status && status.chunks_synced > 0 && <FreshnessPill freshness={status.freshness} />}
           </div>
-          {detail && (
-            <p className="mt-0.5 truncate pl-7 text-xs text-stone-400 dark:text-neutral-500">
-              {detail}
-            </p>
-          )}
+          {detail && <p className="mt-0.5 truncate pl-7 text-xs text-content-faint">{detail}</p>}
           {progress && (
             <div className="mt-2 pl-7">
-              <div className="flex items-center gap-2 text-xs text-stone-500 dark:text-neutral-400">
+              <div className="flex items-center gap-2 text-xs text-content-muted">
                 <span className="capitalize">{progress.stage}</span>
                 {progress.percent !== null && (
                   <span className="font-medium text-primary-600 dark:text-primary-400">
@@ -766,12 +756,10 @@ function SourceRow({
                   </span>
                 )}
                 {progress.detail && (
-                  <span className="truncate text-stone-400 dark:text-neutral-500">
-                    {progress.detail}
-                  </span>
+                  <span className="truncate text-content-faint">{progress.detail}</span>
                 )}
               </div>
-              <div className="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-stone-200 dark:bg-neutral-700">
+              <div className="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-surface-strong">
                 <div
                   className="h-full rounded-full bg-primary-500 transition-all duration-300"
                   style={{
@@ -807,7 +795,7 @@ function SourceRow({
             !result &&
             status &&
             (status.chunks_synced > 0 || status.chunks_pending > 0) && (
-              <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 pl-7 text-xs text-stone-500 dark:text-neutral-400">
+              <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 pl-7 text-xs text-content-muted">
                 <span>
                   {status.chunks_synced.toLocaleString()} {t('sync.chunks')}
                 </span>
@@ -834,7 +822,7 @@ function SourceRow({
             className={`rounded p-1 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-200 ${
               settingsExpanded
                 ? 'bg-primary-100 text-primary-600 dark:bg-primary-500/20 dark:text-primary-400'
-                : 'text-stone-400 hover:bg-stone-100 hover:text-stone-600 dark:text-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-neutral-300'
+                : 'text-content-faint hover:bg-surface-hover hover:text-content-secondary'
             }`}>
             <GearIcon />
           </button>
@@ -854,10 +842,10 @@ function SourceRow({
             disabled={!source.enabled || isBuilding || isSyncing}
             title={t('memorySources.build.title')}
             className="inline-flex items-center gap-1 rounded-md border border-primary-300
-                     bg-white px-3 py-1.5 text-xs font-semibold text-primary-600
+                     bg-surface px-3 py-1.5 text-xs font-semibold text-primary-600
                      shadow-sm transition-colors hover:bg-primary-50
                      disabled:cursor-not-allowed disabled:opacity-50
-                     dark:border-primary-500/30 dark:bg-neutral-900 dark:text-primary-400
+                     dark:border-primary-500/30 dark:bg-surface dark:text-primary-400
                      dark:hover:bg-primary-500/10
                      focus:outline-none focus:ring-2 focus:ring-primary-200">
             {isBuilding ? <Spinner /> : <BuildIcon />}
@@ -868,10 +856,10 @@ function SourceRow({
             onClick={() => onToggle(source)}
             title={source.enabled ? t('memorySources.disable') : t('memorySources.enable')}
             className={`relative h-5 w-9 rounded-full transition-colors ${
-              source.enabled ? 'bg-primary-500' : 'bg-stone-300 dark:bg-neutral-600'
+              source.enabled ? 'bg-primary-500' : 'bg-surface-strong'
             }`}>
             <span
-              className={`absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform ${
+              className={`absolute top-0.5 h-4 w-4 rounded-full bg-surface shadow transition-transform ${
                 source.enabled ? 'left-[18px]' : 'left-0.5'
               }`}
             />
@@ -913,7 +901,7 @@ function FreshnessPill({ freshness }: { freshness: FreshnessLabel }) {
       ? 'bg-primary-100 dark:bg-primary-500/20 text-primary-700 dark:text-primary-300'
       : freshness === 'recent'
         ? 'bg-sage-100 dark:bg-sage-500/20 text-sage-700 dark:text-sage-300'
-        : 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200';
+        : 'bg-surface-subtle text-content-secondary';
   return <span className={`rounded-md px-2 py-0.5 text-[10px] font-medium ${cls}`}>{label}</span>;
 }
 
diff --git a/app/src/components/intelligence/MemoryStatsBar.tsx b/app/src/components/intelligence/MemoryStatsBar.tsx
index 44269ed39..a5c1a2039 100644
--- a/app/src/components/intelligence/MemoryStatsBar.tsx
+++ b/app/src/components/intelligence/MemoryStatsBar.tsx
@@ -102,22 +102,18 @@ export function MemoryStatsBar(props: MemoryStatsBarProps) {
       {stats.map(stat => (
         <div
           key={stat.label}
-          className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800">
-          <div className="text-[11px] uppercase tracking-wide text-stone-500 dark:text-neutral-400 mb-1">
+          className="rounded-xl border border-line bg-surface-muted p-3 transition-colors hover:bg-surface-hover dark:bg-surface-muted">
+          <div className="text-[11px] uppercase tracking-wide text-content-muted mb-1">
             {stat.label}
           </div>
           <div className={`text-xl font-semibold ${stat.color}`}>
             {loading ? (
-              <div className="h-7 w-16 rounded bg-stone-200 dark:bg-neutral-800 animate-pulse" />
+              <div className="h-7 w-16 rounded bg-surface-strong animate-pulse" />
             ) : (
               stat.value
             )}
           </div>
-          {stat.sub && (
-            <div className="text-[11px] text-stone-500 dark:text-neutral-400 mt-0.5">
-              {stat.sub}
-            </div>
-          )}
+          {stat.sub && <div className="text-[11px] text-content-muted mt-0.5">{stat.sub}</div>}
         </div>
       ))}
     </div>
diff --git a/app/src/components/intelligence/MemoryTimelinePanel.tsx b/app/src/components/intelligence/MemoryTimelinePanel.tsx
index 2ac63a308..98aca2ed8 100644
--- a/app/src/components/intelligence/MemoryTimelinePanel.tsx
+++ b/app/src/components/intelligence/MemoryTimelinePanel.tsx
@@ -21,7 +21,7 @@ const MemoryTimelinePanel = ({ report, loading, error, onRetry }: MemoryTimeline
   const intro = (
     <div
       role="note"
-      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-stone-700 dark:text-neutral-200">
+      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-content-secondary">
       <p className="font-medium mb-1">{t('memoryTimeline.title')}</p>
       <p>{t('memoryTimeline.intro')}</p>
     </div>
@@ -40,14 +40,14 @@ const MemoryTimelinePanel = ({ report, loading, error, onRetry }: MemoryTimeline
             {[0, 1, 2].map(i => (
               <div
                 key={i}
-                className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-16"
+                className="animate-pulse rounded-lg border border-line bg-surface-muted h-16"
               />
             ))}
           </div>
           {[0, 1, 2, 3].map(i => (
             <div
               key={i}
-              className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-6"
+              className="animate-pulse rounded-lg border border-line bg-surface-muted h-6"
             />
           ))}
         </div>
@@ -78,12 +78,10 @@ const MemoryTimelinePanel = ({ report, loading, error, onRetry }: MemoryTimeline
       <div className="space-y-4">
         {intro}
         <div className="py-8 text-center">
-          <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          <h3 className="text-sm font-semibold text-content-secondary">
             {t('memoryTimeline.empty')}
           </h3>
-          <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
-            {t('memoryTimeline.emptyHint')}
-          </p>
+          <p className="mt-1 text-xs text-content-muted">{t('memoryTimeline.emptyHint')}</p>
         </div>
       </div>
     );
@@ -104,21 +102,17 @@ const MemoryTimelinePanel = ({ report, loading, error, onRetry }: MemoryTimeline
           { label: t('memoryTimeline.metricMonths'), value: report.buckets.length },
           { label: t('memoryTimeline.metricRecent'), value: report.recentCount },
         ].map(tile => (
-          <div
-            key={tile.label}
-            className="rounded-lg border border-stone-200 dark:border-neutral-800 p-3">
-            <div className="text-[10px] uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+          <div key={tile.label} className="rounded-lg border border-line p-3">
+            <div className="text-[10px] uppercase tracking-wider text-content-faint">
               {tile.label}
             </div>
-            <div className="text-lg font-semibold tabular-nums text-stone-900 dark:text-neutral-100">
-              {tile.value}
-            </div>
+            <div className="text-lg font-semibold tabular-nums text-content">{tile.value}</div>
           </div>
         ))}
       </div>
 
       {report.busiest && (
-        <p className="text-[11px] text-stone-500 dark:text-neutral-400 tabular-nums">
+        <p className="text-[11px] text-content-muted tabular-nums">
           {t('memoryTimeline.busiestCaption')
             .replace('{period}', report.busiest.period)
             .replace('{count}', String(report.busiest.count))}
@@ -130,29 +124,25 @@ const MemoryTimelinePanel = ({ report, loading, error, onRetry }: MemoryTimeline
         <section aria-labelledby="memory-timeline-heading" className="space-y-1">
           <h3
             id="memory-timeline-heading"
-            className="text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+            className="text-xs font-semibold uppercase tracking-wider text-content-muted">
             {t('memoryTimeline.heading')}
           </h3>
           <ul className="space-y-1">
             {shown.map(bucket => (
               <li key={bucket.period} className="flex items-center gap-2 text-[11px] tabular-nums">
-                <span className="w-16 shrink-0 text-stone-400 dark:text-neutral-500">
-                  {bucket.period}
-                </span>
-                <div className="flex-1 h-3 rounded bg-stone-100 dark:bg-neutral-800 overflow-hidden">
+                <span className="w-16 shrink-0 text-content-faint">{bucket.period}</span>
+                <div className="flex-1 h-3 rounded bg-surface-subtle overflow-hidden">
                   <div
                     className="h-full bg-primary-400/70"
                     style={{ width: `${(bucket.count / maxCount) * 100}%` }}
                   />
                 </div>
-                <span className="w-8 shrink-0 text-right text-stone-500 dark:text-neutral-400">
-                  {bucket.count}
-                </span>
+                <span className="w-8 shrink-0 text-right text-content-muted">{bucket.count}</span>
               </li>
             ))}
           </ul>
           {truncated && (
-            <p className="text-center text-xs text-stone-400 dark:text-neutral-500">
+            <p className="text-center text-xs text-content-faint">
               {t('memoryTimeline.truncated')
                 .replace('{shown}', String(shown.length))
                 .replace('{total}', String(report.buckets.length))}
@@ -162,7 +152,7 @@ const MemoryTimelinePanel = ({ report, loading, error, onRetry }: MemoryTimeline
       )}
 
       {report.undated > 0 && (
-        <p className="text-[11px] text-stone-400 dark:text-neutral-500">
+        <p className="text-[11px] text-content-faint">
           {t('memoryTimeline.undatedNote').replace('{count}', String(report.undated))}
         </p>
       )}
diff --git a/app/src/components/intelligence/MemoryTimelineTab.tsx b/app/src/components/intelligence/MemoryTimelineTab.tsx
index b4fe8bbfd..af5ef309c 100644
--- a/app/src/components/intelligence/MemoryTimelineTab.tsx
+++ b/app/src/components/intelligence/MemoryTimelineTab.tsx
@@ -53,12 +53,12 @@ const MemoryTimelineTab = () => {
   return (
     <div className="space-y-4">
       {namespaces.length > 0 && (
-        <label className="flex items-center gap-2 text-xs text-stone-600 dark:text-neutral-300">
+        <label className="flex items-center gap-2 text-xs text-content-secondary">
           {t('memoryTimeline.namespaceLabel')}
           <select
             value={namespace}
             onChange={e => handleNamespace(e.target.value)}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-sm text-stone-800 dark:text-neutral-100">
+            className="rounded-lg border border-line bg-surface px-2 py-1 text-sm text-content">
             <option value="">{t('memoryTimeline.namespaceAll')}</option>
             {namespaces.map(ns => (
               <option key={ns} value={ns}>
diff --git a/app/src/components/intelligence/MemoryTreeStatusPanel.tsx b/app/src/components/intelligence/MemoryTreeStatusPanel.tsx
index e3a90b20b..7232a7396 100644
--- a/app/src/components/intelligence/MemoryTreeStatusPanel.tsx
+++ b/app/src/components/intelligence/MemoryTreeStatusPanel.tsx
@@ -260,7 +260,7 @@ function IntegrationHealthStrip({
 }) {
   return (
     <div className="space-y-2" data-testid="memory-tree-integrations">
-      <div className="text-[11px] uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+      <div className="text-[11px] uppercase tracking-wide text-content-muted">
         {t('memoryTree.status.integrationsTitle')}
       </div>
       {loading && integrations.length === 0 ? (
@@ -269,17 +269,17 @@ function IntegrationHealthStrip({
         // before data arrives (CodeRabbit feedback on #2763).
         <div
           data-testid="memory-tree-integrations-skeleton"
-          className="h-9 animate-pulse rounded-lg bg-stone-200 dark:bg-neutral-800"
+          className="h-9 animate-pulse rounded-lg bg-surface-strong"
         />
       ) : integrations.length === 0 ? (
         <div
           data-testid="memory-tree-integrations-empty"
-          className="rounded-lg border border-dashed border-stone-200 dark:border-neutral-800 px-3 py-2 text-xs text-stone-500 dark:text-neutral-400">
+          className="rounded-lg border border-dashed border-line px-3 py-2 text-xs text-content-muted">
           {t('memoryTree.status.integrationsEmpty')}
         </div>
       ) : (
         <ul
-          className="max-h-48 space-y-1 overflow-y-auto rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50/40 dark:bg-neutral-800/30 p-2"
+          className="max-h-48 space-y-1 overflow-y-auto rounded-lg border border-line bg-surface-muted/40 dark:bg-surface-muted/30 p-2"
           aria-label={t('memoryTree.status.integrationsTitle')}>
           {integrations.map(row => {
             const health = classifyIntegration(row.freshness);
@@ -292,16 +292,14 @@ function IntegrationHealthStrip({
               <li
                 key={row.provider}
                 data-testid={`memory-tree-integration-row-${row.provider}`}
-                className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-stone-100/60 dark:hover:bg-neutral-800/60">
+                className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-surface-subtle/60 dark:hover:bg-surface-muted/60">
                 <div className="flex min-w-0 items-center gap-2">
                   <span aria-hidden className="text-base leading-none">
                     {providerIconChar(row.provider)}
                   </span>
-                  <span className="truncate text-sm font-medium text-stone-800 dark:text-neutral-200">
-                    {row.provider}
-                  </span>
+                  <span className="truncate text-sm font-medium text-content">{row.provider}</span>
                 </div>
-                <div className="flex shrink-0 items-center gap-3 text-xs text-stone-500 dark:text-neutral-400">
+                <div className="flex shrink-0 items-center gap-3 text-xs text-content-muted">
                   <span>
                     {t('memoryTree.status.integrationChunks').replace(
                       '{count}',
@@ -311,7 +309,7 @@ function IntegrationHealthStrip({
                   <span>
                     {formatRelativeMs(row.last_chunk_at_ms ?? 0, t, t('memoryTree.status.never'))}
                   </span>
-                  <span className="inline-flex items-center gap-1.5 rounded-full bg-white dark:bg-neutral-900 px-2 py-0.5 text-[11px] font-medium text-stone-700 dark:text-neutral-200 ring-1 ring-stone-200 dark:ring-neutral-700">
+                  <span className="inline-flex items-center gap-1.5 rounded-full bg-surface px-2 py-0.5 text-[11px] font-medium text-content-secondary ring-1 ring-stone-200 dark:ring-neutral-700">
                     <span aria-hidden className={`inline-block h-1.5 w-1.5 rounded-full ${dot}`} />
                     {healthLabel}
                   </span>
@@ -382,18 +380,15 @@ export function MemoryTreeStatusPanel({ onToast }: MemoryTreeStatusPanelProps) {
   const checked = !(status?.is_paused ?? false);
 
   const tileClass =
-    'rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800';
-  const labelClass =
-    'text-[11px] uppercase tracking-wide text-stone-500 dark:text-neutral-400 mb-1';
-  const valueClass = 'text-xl font-semibold text-stone-900 dark:text-neutral-100';
-  const skeletonClass = 'h-7 w-16 rounded bg-stone-200 dark:bg-neutral-800 animate-pulse';
+    'rounded-xl border border-line bg-surface-muted p-3 transition-colors hover:bg-surface-hover';
+  const labelClass = 'text-[11px] uppercase tracking-wide text-content-muted mb-1';
+  const valueClass = 'text-xl font-semibold text-content';
+  const skeletonClass = 'h-7 w-16 rounded bg-surface-strong animate-pulse';
 
   return (
     <div className="space-y-3" data-testid="memory-tree-status-panel">
       <div className="flex items-center justify-between">
-        <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
-          {t('memoryTree.status.title')}
-        </h2>
+        <h2 className="text-sm font-semibold text-content">{t('memoryTree.status.title')}</h2>
       </div>
 
       {error && !loading ? (
@@ -463,9 +458,7 @@ export function MemoryTreeStatusPanel({ onToast }: MemoryTreeStatusPanelProps) {
                 </span>
               </div>
               {status.reason ? (
-                <div className="mt-0.5 text-[11px] text-stone-500 dark:text-neutral-400">
-                  {status.reason}
-                </div>
+                <div className="mt-0.5 text-[11px] text-content-muted">{status.reason}</div>
               ) : null}
             </>
           )}
@@ -512,9 +505,7 @@ export function MemoryTreeStatusPanel({ onToast }: MemoryTreeStatusPanelProps) {
           exist; near-0% with chunks present means the wiki is built but has no
           structure (the extraction model is failing). */}
       {!loading && status && status.total_chunks > 0 && status.extraction_coverage != null ? (
-        <div
-          className="text-xs text-stone-500 dark:text-neutral-400"
-          data-testid="memory-tree-extraction-coverage">
+        <div className="text-xs text-content-muted" data-testid="memory-tree-extraction-coverage">
           {t('memoryTree.status.extractionCoverage').replace(
             '{pct}',
             String(Math.round((status.extraction_coverage ?? 0) * 100))
@@ -526,13 +517,13 @@ export function MemoryTreeStatusPanel({ onToast }: MemoryTreeStatusPanelProps) {
 
       {/* Auto-sync toggle row — markup mirrors AIPanel's inline ToggleRow */}
       <div
-        className="flex items-center justify-between gap-3 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2"
+        className="flex items-center justify-between gap-3 rounded-lg border border-line bg-surface px-3 py-2"
         data-testid="memory-tree-status-toggle-row">
         <div className="min-w-0">
-          <div className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+          <div className="text-sm font-medium text-content">
             {t('memoryTree.status.autoSyncLabel')}
           </div>
-          <div className="text-xs text-stone-500 dark:text-neutral-400">
+          <div className="text-xs text-content-muted">
             {t('memoryTree.status.autoSyncDescription')}
           </div>
         </div>
@@ -547,11 +538,11 @@ export function MemoryTreeStatusPanel({ onToast }: MemoryTreeStatusPanelProps) {
           }}
           data-testid="memory-tree-status-toggle"
           className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors disabled:cursor-wait disabled:opacity-60 ${
-            checked ? 'bg-primary-500' : 'bg-stone-300 dark:bg-neutral-700'
+            checked ? 'bg-primary-500' : 'bg-surface-strong'
           }`}>
           <span
             aria-hidden
-            className={`inline-block h-4 w-4 transform rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${
+            className={`inline-block h-4 w-4 transform rounded-full bg-surface shadow transition-transform ${
               checked ? 'translate-x-4' : 'translate-x-0.5'
             }`}
           />
diff --git a/app/src/components/intelligence/MemoryWorkspace.tsx b/app/src/components/intelligence/MemoryWorkspace.tsx
index fb9cb1bb0..b8715ef0e 100644
--- a/app/src/components/intelligence/MemoryWorkspace.tsx
+++ b/app/src/components/intelligence/MemoryWorkspace.tsx
@@ -140,15 +140,15 @@ export function MemoryWorkspace({ onToast }: MemoryWorkspaceProps) {
           {t('workspace.graphLoadFailed')}: {error}
         </div>
       ) : !graph ? (
-        <div className="flex h-[640px] items-center justify-center rounded-lg border border-stone-100 dark:border-neutral-800 bg-stone-50/40 text-sm text-stone-500 dark:text-neutral-400">
+        <div className="flex h-[640px] items-center justify-center rounded-lg border border-line-subtle bg-surface-muted/40 text-sm text-content-muted">
           {t('workspace.loadingGraph')}
         </div>
       ) : (
         <MemoryGraph nodes={graph.nodes} edges={graph.edges} mode={mode} />
       )}
 
-      <div className="rounded-lg border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4">
-        <h3 className="mb-2 text-sm font-medium text-stone-700 dark:text-neutral-200">
+      <div className="rounded-lg border border-line-subtle bg-surface p-4">
+        <h3 className="mb-2 text-sm font-medium text-content-secondary">
           {t('sync.auditTitle', 'Sync History')}
         </h3>
         <SyncAuditPanel />
diff --git a/app/src/components/intelligence/ModelCouncilTab.tsx b/app/src/components/intelligence/ModelCouncilTab.tsx
index 41ffa52d0..3fbceee41 100644
--- a/app/src/components/intelligence/ModelCouncilTab.tsx
+++ b/app/src/components/intelligence/ModelCouncilTab.tsx
@@ -290,17 +290,15 @@ const ModelPickerDialog = ({
       aria-modal="true"
       aria-labelledby="model-council-model-picker-title"
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4">
-      <div className="w-full max-w-md rounded-lg border border-stone-200 bg-white p-4 shadow-xl dark:border-neutral-800 dark:bg-neutral-950">
+      <div className="w-full max-w-md rounded-lg border border-line bg-surface p-4 shadow-xl dark:bg-surface-canvas">
         <div className="flex items-start justify-between gap-3">
           <div>
             <h3
               id="model-council-model-picker-title"
-              className="text-sm font-semibold text-stone-900 dark:text-neutral-50">
+              className="text-sm font-semibold text-content">
               {picker.title}
             </h3>
-            <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
-              {t('modelCouncil.modelPickerHelp')}
-            </p>
+            <p className="mt-1 text-xs text-content-muted">{t('modelCouncil.modelPickerHelp')}</p>
           </div>
           <Button variant="tertiary" size="xs" onClick={onClose}>
             {t('modelCouncil.closeModelPicker')}
@@ -308,7 +306,7 @@ const ModelPickerDialog = ({
         </div>
 
         <div className="mt-4 space-y-2">
-          <p className="text-[11px] font-semibold uppercase text-stone-500 dark:text-neutral-400">
+          <p className="text-[11px] font-semibold uppercase text-content-muted">
             {t('modelCouncil.modelPickerHints')}
           </p>
           <div className="grid grid-cols-2 gap-2">
@@ -324,29 +322,27 @@ const ModelPickerDialog = ({
                 className={`rounded-lg border px-3 py-2 text-left text-sm ${
                   picker.value === hint.value
                     ? 'border-primary-500 bg-primary-50 text-primary-700 dark:bg-primary-500/15 dark:text-primary-200'
-                    : 'border-stone-200 text-stone-700 hover:bg-stone-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-900'
+                    : 'border-line text-content-secondary hover:bg-surface-muted dark:hover:bg-surface'
                 }`}>
                 {t(hint.labelKey)}
-                <span className="block font-mono text-[11px] text-stone-500 dark:text-neutral-400">
-                  {hint.value}
-                </span>
+                <span className="block font-mono text-[11px] text-content-muted">{hint.value}</span>
               </button>
             ))}
           </div>
         </div>
 
-        <div className="mt-4 space-y-3 rounded-lg border border-stone-200 bg-stone-50 p-3 dark:border-neutral-800 dark:bg-neutral-900">
+        <div className="mt-4 space-y-3 rounded-lg border border-line bg-surface-muted p-3">
           <button
             type="button"
             onClick={() => setSelectionMode('custom')}
             aria-pressed={selectionMode === 'custom'}
             className={`w-full rounded-lg border px-3 py-2 text-left text-sm font-semibold ${
               selectionMode === 'custom'
-                ? 'border-primary-500 bg-white text-primary-700 dark:bg-neutral-950 dark:text-primary-200'
-                : 'border-stone-200 bg-white text-stone-700 hover:bg-stone-50 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-200 dark:hover:bg-neutral-800'
+                ? 'border-primary-500 bg-surface text-primary-700 dark:bg-surface-canvas dark:text-primary-200'
+                : 'border-line bg-surface text-content-secondary hover:bg-surface-hover dark:bg-surface-canvas'
             }`}>
             {t('modelCouncil.modelPickerProviderModel')}
-            <span className="block text-[11px] font-normal text-stone-500 dark:text-neutral-400">
+            <span className="block text-[11px] font-normal text-content-muted">
               {t('modelCouncil.mode.custom')}
             </span>
           </button>
@@ -357,7 +353,7 @@ const ModelPickerDialog = ({
               onChange={e => setProvider(e.target.value)}
               aria-label={t('modelCouncil.modelProviderLabel')}
               disabled={selectionMode !== 'custom' || providersLoading || providers.length === 0}
-              className="rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100">
+              className="rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-surface-canvas">
               {providers.map(item => (
                 <option key={item.slug} value={item.slug}>
                   {`${item.slug === 'openhuman' ? t('settings.ai.routing.managed') : item.label} (${item.slug})`}
@@ -369,7 +365,7 @@ const ModelPickerDialog = ({
               onChange={e => setModel(e.target.value)}
               aria-label={t('modelCouncil.modelIdLabel')}
               disabled={selectionMode !== 'custom' || modelsLoading || models.length === 0}
-              className="rounded-lg border border-stone-200 bg-white px-3 py-2 font-mono text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100">
+              className="rounded-lg border border-line bg-surface px-3 py-2 font-mono text-sm text-content focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-surface-canvas">
               {models.map(item => (
                 <option key={item.id} value={item.id}>
                   {item.id}
@@ -378,9 +374,7 @@ const ModelPickerDialog = ({
             </select>
           </div>
           {(providersLoading || modelsLoading) && (
-            <p className="text-[11px] text-stone-500 dark:text-neutral-400">
-              {t('skills.resource.preview.loading')}
-            </p>
+            <p className="text-[11px] text-content-muted">{t('skills.resource.preview.loading')}</p>
           )}
           {(providersError || modelsError) && (
             <p role="alert" className="text-[11px] text-coral-700 dark:text-coral-300">
@@ -1035,10 +1029,8 @@ const ModelCouncilTab = () => {
       <div className="space-y-5">
         <div className="flex flex-wrap items-start justify-between gap-3">
           <div>
-            <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-50">
-              {t('modelCouncil.listTitle')}
-            </h2>
-            <p className="mt-1 max-w-3xl text-sm text-stone-600 dark:text-neutral-300">
+            <h2 className="text-lg font-semibold text-content">{t('modelCouncil.listTitle')}</h2>
+            <p className="mt-1 max-w-3xl text-sm text-content-secondary">
               {t('modelCouncil.listIntro')}
             </p>
           </div>
@@ -1057,11 +1049,11 @@ const ModelCouncilTab = () => {
         )}
 
         {registryLoading ? (
-          <div className="rounded-lg border border-stone-200 bg-white p-4 text-sm text-stone-500 shadow-sm dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400">
+          <div className="rounded-lg border border-line bg-surface p-4 text-sm text-content-muted shadow-sm">
             {t('modelCouncil.loadingCouncils')}
           </div>
         ) : councils.length === 0 ? (
-          <div className="rounded-lg border border-stone-200 bg-white p-4 text-sm text-stone-500 shadow-sm dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400">
+          <div className="rounded-lg border border-line bg-surface p-4 text-sm text-content-muted shadow-sm">
             {t('modelCouncil.noCouncils')}
           </div>
         ) : (
@@ -1069,13 +1061,11 @@ const ModelCouncilTab = () => {
             {councils.map(council => (
               <article
                 key={council.id}
-                className="rounded-lg border border-stone-200 bg-white p-4 shadow-sm transition hover:border-primary-300 hover:shadow-md dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-primary-500/50">
+                className="rounded-lg border border-line bg-surface p-4 shadow-sm transition hover:border-primary-300 hover:shadow-md dark:hover:border-primary-500/50">
                 <div className="flex items-start justify-between gap-3">
                   <div className="min-w-0">
-                    <h3 className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-50">
-                      {council.name}
-                    </h3>
-                    <p className="mt-1 line-clamp-2 text-xs text-stone-500 dark:text-neutral-400">
+                    <h3 className="truncate text-sm font-semibold text-content">{council.name}</h3>
+                    <p className="mt-1 line-clamp-2 text-xs text-content-muted">
                       {council.description || t('modelCouncil.noCouncilDescription')}
                     </p>
                   </div>
@@ -1109,19 +1099,13 @@ const ModelCouncilTab = () => {
                   </div>
                 </div>
                 <dl className="mt-4 grid grid-cols-2 gap-2 text-xs">
-                  <div className="rounded-md bg-stone-50 px-2 py-1.5 dark:bg-neutral-950">
-                    <dt className="text-stone-500 dark:text-neutral-400">
-                      {t('modelCouncil.juryCountLabel')}
-                    </dt>
-                    <dd className="font-mono font-semibold text-stone-800 dark:text-neutral-100">
-                      {council.jury_count}
-                    </dd>
+                  <div className="rounded-md bg-surface-muted px-2 py-1.5">
+                    <dt className="text-content-muted">{t('modelCouncil.juryCountLabel')}</dt>
+                    <dd className="font-mono font-semibold text-content">{council.jury_count}</dd>
                   </div>
-                  <div className="rounded-md bg-stone-50 px-2 py-1.5 dark:bg-neutral-950">
-                    <dt className="text-stone-500 dark:text-neutral-400">
-                      {t('modelCouncil.debateRoundsLabel')}
-                    </dt>
-                    <dd className="font-mono font-semibold text-stone-800 dark:text-neutral-100">
+                  <div className="rounded-md bg-surface-muted px-2 py-1.5">
+                    <dt className="text-content-muted">{t('modelCouncil.debateRoundsLabel')}</dt>
+                    <dd className="font-mono font-semibold text-content">
                       {council.debate_rounds}
                     </dd>
                   </div>
@@ -1153,11 +1137,11 @@ const ModelCouncilTab = () => {
             <Icon name="arrow-left" size={18} />
           </Button>
           <div className="min-w-0">
-            <h2 className="truncate text-lg font-semibold text-stone-900 dark:text-neutral-50">
+            <h2 className="truncate text-lg font-semibold text-content">
               {view === 'edit' ? t('modelCouncil.editCouncil') : councilName}
             </h2>
             {selectedCouncil && view === 'run' && (
-              <p className="truncate text-xs text-stone-500 dark:text-neutral-400">
+              <p className="truncate text-xs text-content-muted">
                 {councilDescription || t('modelCouncil.noCouncilDescription')}
               </p>
             )}
@@ -1200,24 +1184,24 @@ const ModelCouncilTab = () => {
       )}
 
       {view === 'edit' && (
-        <section className="grid gap-3 rounded-lg border border-stone-200 bg-white p-3 shadow-sm dark:border-neutral-800 dark:bg-neutral-900 md:grid-cols-2">
+        <section className="grid gap-3 rounded-lg border border-line bg-surface p-3 shadow-sm md:grid-cols-2">
           <div className="space-y-1.5">
             <label
               htmlFor="model-council-name"
-              className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+              className="text-xs font-medium text-content-secondary">
               {t('modelCouncil.councilNameLabel')}
             </label>
             <input
               id="model-council-name"
               value={councilName}
               onChange={e => setCouncilName(e.target.value)}
-              className="w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-400 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100"
+              className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-400 dark:bg-surface-canvas"
             />
           </div>
           <div className="space-y-1.5">
             <label
               htmlFor="model-council-description"
-              className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+              className="text-xs font-medium text-content-secondary">
               {t('modelCouncil.councilDescriptionLabel')}
             </label>
             <textarea
@@ -1226,7 +1210,7 @@ const ModelCouncilTab = () => {
               onChange={e => setCouncilDescription(e.target.value)}
               placeholder={t('modelCouncil.councilDescriptionPlaceholder')}
               rows={3}
-              className="w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-800 shadow-sm resize-y focus:outline-none focus:ring-2 focus:ring-primary-400 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100"
+              className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content shadow-sm resize-y focus:outline-none focus:ring-2 focus:ring-primary-400 dark:bg-surface-canvas"
             />
           </div>
         </section>
@@ -1236,7 +1220,7 @@ const ModelCouncilTab = () => {
         <section className="space-y-3">
           <label
             htmlFor="model-council-question"
-            className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+            className="text-xs font-medium text-content-secondary">
             {t('modelCouncil.questionLabel')}
           </label>
           <textarea
@@ -1246,18 +1230,18 @@ const ModelCouncilTab = () => {
             rows={4}
             placeholder={t('modelCouncil.questionPlaceholder')}
             aria-label={t('modelCouncil.questionLabel')}
-            className="w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-800 shadow-sm resize-y focus:outline-none focus:ring-2 focus:ring-primary-400 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
+            className="w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content shadow-sm resize-y focus:outline-none focus:ring-2 focus:ring-primary-400"
           />
         </section>
       )}
 
       {view === 'edit' && (
-        <aside className="space-y-3 rounded-lg border border-stone-200 bg-white p-3 shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
+        <aside className="space-y-3 rounded-lg border border-line bg-surface p-3 shadow-sm">
           <div>
-            <p className="text-xs font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+            <p className="text-xs font-semibold uppercase tracking-wide text-content-muted">
               {t('modelCouncil.settingsTitle')}
             </p>
-            <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
+            <p className="mt-1 text-xs text-content-muted">
               {t('modelCouncil.settingsSummary')
                 .replace('{count}', String(juryCount))
                 .replace('{judge}', resolvedJudgeName)}
@@ -1268,10 +1252,10 @@ const ModelCouncilTab = () => {
             <div className="flex items-center justify-between gap-3">
               <label
                 htmlFor="model-council-jury-count"
-                className="text-xs font-medium text-stone-700 dark:text-neutral-200">
+                className="text-xs font-medium text-content-secondary">
                 {t('modelCouncil.juryCountLabel')}
               </label>
-              <output className="rounded-md bg-stone-100 px-2 py-0.5 text-xs font-semibold text-stone-700 dark:bg-neutral-800 dark:text-neutral-200">
+              <output className="rounded-md bg-surface-subtle px-2 py-0.5 text-xs font-semibold text-content-secondary">
                 {juryCount}
               </output>
             </div>
@@ -1295,7 +1279,7 @@ const ModelCouncilTab = () => {
                   className={`rounded-md border px-2 py-1 text-xs font-medium ${
                     juryCount === count
                       ? 'border-primary-500 bg-primary-50 text-primary-700 dark:bg-primary-500/15 dark:text-primary-200'
-                      : 'border-stone-200 text-stone-500 hover:bg-stone-50 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-800'
+                      : 'border-line text-content-muted hover:bg-surface-hover'
                   }`}>
                   {count}
                 </button>
@@ -1307,10 +1291,10 @@ const ModelCouncilTab = () => {
             <div className="flex items-center justify-between gap-3">
               <label
                 htmlFor="model-council-debate-rounds"
-                className="text-xs font-medium text-stone-700 dark:text-neutral-200">
+                className="text-xs font-medium text-content-secondary">
                 {t('modelCouncil.debateRoundsLabel')}
               </label>
-              <output className="rounded-md bg-stone-100 px-2 py-0.5 text-xs font-semibold text-stone-700 dark:bg-neutral-800 dark:text-neutral-200">
+              <output className="rounded-md bg-surface-subtle px-2 py-0.5 text-xs font-semibold text-content-secondary">
                 {debateRounds}
               </output>
             </div>
@@ -1337,13 +1321,13 @@ const ModelCouncilTab = () => {
                   className={`rounded-md border px-2 py-1 text-xs font-medium ${
                     debateRounds === rounds
                       ? 'border-primary-500 bg-primary-50 text-primary-700 dark:bg-primary-500/15 dark:text-primary-200'
-                      : 'border-stone-200 text-stone-500 hover:bg-stone-50 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-800'
+                      : 'border-line text-content-muted hover:bg-surface-hover'
                   }`}>
                   {rounds}
                 </button>
               ))}
             </div>
-            <p className="text-[11px] leading-4 text-stone-500 dark:text-neutral-400">
+            <p className="text-[11px] leading-4 text-content-muted">
               {t('modelCouncil.debateRoundsHelp')}
             </p>
           </div>
@@ -1351,7 +1335,7 @@ const ModelCouncilTab = () => {
           <div className="space-y-2">
             <label
               htmlFor="model-council-judge-mode"
-              className="text-xs font-medium text-stone-700 dark:text-neutral-200">
+              className="text-xs font-medium text-content-secondary">
               {t('modelCouncil.judgeAgentLabel')}
             </label>
             <select
@@ -1362,7 +1346,7 @@ const ModelCouncilTab = () => {
                 setJudgeMode(mode);
                 setJudgeModel(mode === 'default' ? DEFAULT_JUDGE_MODEL : '');
               }}
-              className="w-full rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-primary-400 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100">
+              className="w-full rounded-lg border border-line bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-2 focus:ring-primary-400 dark:bg-surface-canvas">
               <option value="default">{t('modelCouncil.defaultJudge')}</option>
               <option value="profile">{t('modelCouncil.savedProfile')}</option>
               <option value="custom">{t('modelCouncil.customAgent')}</option>
@@ -1376,7 +1360,7 @@ const ModelCouncilTab = () => {
                   setJudgeProfileId(e.target.value);
                   setJudgeModel('');
                 }}
-                className="w-full rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-primary-400 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100">
+                className="w-full rounded-lg border border-line bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-2 focus:ring-primary-400 dark:bg-surface-canvas">
                 <option value="">{t('modelCouncil.chooseProfile')}</option>
                 {profiles.map(profile => (
                   <option key={profile.id} value={profile.id}>
@@ -1393,7 +1377,7 @@ const ModelCouncilTab = () => {
                 onChange={e => setJudgeName(e.target.value)}
                 aria-label={t('modelCouncil.judgeNameLabel')}
                 placeholder={t('modelCouncil.judgeNamePlaceholder')}
-                className="w-full rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-primary-400 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100"
+                className="w-full rounded-lg border border-line bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-2 focus:ring-primary-400 dark:bg-surface-canvas"
               />
             )}
 
@@ -1407,7 +1391,7 @@ const ModelCouncilTab = () => {
                 })
               }
               aria-label={t('modelCouncil.chairLabel')}
-              className="flex w-full items-center justify-between gap-2 rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-left font-mono text-sm text-stone-800 hover:bg-stone-50 focus:outline-none focus:ring-2 focus:ring-primary-400 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:hover:bg-neutral-900">
+              className="flex w-full items-center justify-between gap-2 rounded-lg border border-line bg-surface px-3 py-1.5 text-left font-mono text-sm text-content hover:bg-surface-muted focus:outline-none focus:ring-2 focus:ring-primary-400 dark:bg-surface-canvas dark:hover:bg-surface">
               <span className="truncate">{judgeModel || DEFAULT_JUDGE_MODEL}</span>
               <span className="shrink-0 text-[11px] font-semibold text-primary-600 dark:text-primary-300">
                 {t('modelCouncil.selectModel')}
@@ -1421,17 +1405,13 @@ const ModelCouncilTab = () => {
         <section aria-labelledby="model-council-roster-heading" className="space-y-3">
           <div className="flex flex-wrap items-end justify-between gap-2">
             <div>
-              <h3
-                id="model-council-roster-heading"
-                className="text-sm font-semibold text-stone-800 dark:text-neutral-100">
+              <h3 id="model-council-roster-heading" className="text-sm font-semibold text-content">
                 {t('modelCouncil.rosterHeading')}
               </h3>
-              <p className="text-xs text-stone-500 dark:text-neutral-400">
-                {t('modelCouncil.rosterHelp')}
-              </p>
+              <p className="text-xs text-content-muted">{t('modelCouncil.rosterHelp')}</p>
             </div>
             {profileStatus === 'loading' && (
-              <span className="text-xs text-stone-500 dark:text-neutral-400">
+              <span className="text-xs text-content-muted">
                 {t('modelCouncil.loadingProfiles')}
               </span>
             )}
@@ -1447,14 +1427,14 @@ const ModelCouncilTab = () => {
               return (
                 <article
                   key={seat.id}
-                  className={`rounded-lg border bg-white p-3 shadow-sm transition-colors dark:bg-neutral-900 ${
+                  className={`rounded-lg border bg-surface p-3 shadow-sm transition-colors ${
                     running
                       ? 'border-primary-300 ring-2 ring-primary-100 dark:border-primary-500/50 dark:ring-primary-500/10'
-                      : 'border-stone-200 dark:border-neutral-800'
+                      : 'border-line'
                   }`}>
                   <div className="flex gap-3">
                     <div
-                      className={`h-20 w-20 shrink-0 overflow-hidden rounded-lg bg-stone-100 dark:bg-neutral-800 ${
+                      className={`h-20 w-20 shrink-0 overflow-hidden rounded-lg bg-surface-subtle ${
                         running ? 'animate-pulse' : ''
                       }`}>
                       <RiveMascot
@@ -1466,10 +1446,10 @@ const ModelCouncilTab = () => {
                     </div>
                     <div className="min-w-0 flex-1 space-y-2">
                       <div className="flex items-center justify-between gap-2">
-                        <p className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-50">
+                        <p className="truncate text-sm font-semibold text-content">
                           {resolved.label}
                         </p>
-                        <span className="rounded-md bg-stone-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-stone-500 dark:bg-neutral-800 dark:text-neutral-400">
+                        <span className="rounded-md bg-surface-subtle px-1.5 py-0.5 text-[10px] font-semibold uppercase text-content-muted">
                           {t('modelCouncil.jurorLabel').replace('{n}', String(index + 1))}
                         </span>
                       </div>
@@ -1487,8 +1467,8 @@ const ModelCouncilTab = () => {
                             onClick={() => setSeatMode(seat, mode)}
                             className={`rounded-md px-2 py-1 text-[11px] font-medium ${
                               seat.mode === mode
-                                ? 'bg-primary-500 text-white'
-                                : 'bg-stone-100 text-stone-600 hover:bg-stone-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700'
+                                ? 'bg-primary-500 text-content-inverted'
+                                : 'bg-surface-subtle text-content-secondary hover:bg-surface-strong dark:hover:bg-neutral-700'
                             }`}>
                             {t(`modelCouncil.mode.${mode}`)}
                           </button>
@@ -1508,7 +1488,7 @@ const ModelCouncilTab = () => {
                         onChange={e =>
                           updateSeat(seat.id, { profileId: e.target.value, model: '' })
                         }
-                        className="w-full rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-primary-400 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100">
+                        className="w-full rounded-lg border border-line bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-2 focus:ring-primary-400 dark:bg-surface-canvas">
                         <option value="">{t('modelCouncil.chooseProfile')}</option>
                         {profiles.map(profile => (
                           <option key={profile.id} value={profile.id}>
@@ -1526,7 +1506,7 @@ const ModelCouncilTab = () => {
                           String(index + 1)
                         )}
                         placeholder={t('modelCouncil.memberNamePlaceholder')}
-                        className="w-full rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-primary-400 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100"
+                        className="w-full rounded-lg border border-line bg-surface px-3 py-1.5 text-sm text-content focus:outline-none focus:ring-2 focus:ring-primary-400 dark:bg-surface-canvas"
                       />
                     )}
 
@@ -1540,7 +1520,7 @@ const ModelCouncilTab = () => {
                         })
                       }
                       aria-label={t('modelCouncil.memberAria').replace('{n}', String(index + 1))}
-                      className="flex w-full items-center justify-between gap-2 rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-left font-mono text-sm text-stone-800 hover:bg-stone-50 focus:outline-none focus:ring-2 focus:ring-primary-400 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:hover:bg-neutral-900">
+                      className="flex w-full items-center justify-between gap-2 rounded-lg border border-line bg-surface px-3 py-1.5 text-left font-mono text-sm text-content hover:bg-surface-muted focus:outline-none focus:ring-2 focus:ring-primary-400 dark:bg-surface-canvas dark:hover:bg-surface">
                       <span className="truncate">{seat.model || DEFAULT_MODEL}</span>
                       <span className="shrink-0 text-[11px] font-semibold text-primary-600 dark:text-primary-300">
                         {t('modelCouncil.selectModel')}
@@ -1556,7 +1536,7 @@ const ModelCouncilTab = () => {
                         String(index + 1)
                       )}
                       placeholder={t('modelCouncil.memberBriefPlaceholder')}
-                      className="w-full rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-xs text-stone-700 resize-none focus:outline-none focus:ring-2 focus:ring-primary-400 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-200"
+                      className="w-full rounded-lg border border-line bg-surface px-3 py-1.5 text-xs text-content-secondary resize-none focus:outline-none focus:ring-2 focus:ring-primary-400 dark:bg-surface-canvas"
                     />
                   </div>
                 </article>
@@ -1574,17 +1554,15 @@ const ModelCouncilTab = () => {
             <div>
               <h3
                 id="model-council-deliberation-heading"
-                className="text-sm font-semibold text-stone-900 dark:text-neutral-50">
+                className="text-sm font-semibold text-content">
                 {t('modelCouncil.deliberationHeading')}
               </h3>
-              <p className="text-xs text-stone-600 dark:text-neutral-300">
-                {t('modelCouncil.deliberationHelp')}
-              </p>
+              <p className="text-xs text-content-secondary">{t('modelCouncil.deliberationHelp')}</p>
             </div>
             <span
               role="status"
               aria-live="polite"
-              className="rounded-md bg-white px-2 py-1 text-xs font-medium text-primary-700 shadow-sm dark:bg-neutral-950 dark:text-primary-200">
+              className="rounded-md bg-surface px-2 py-1 text-xs font-medium text-primary-700 shadow-sm dark:bg-surface-canvas dark:text-primary-200">
               {t('modelCouncil.runningHint')}
             </span>
           </div>
@@ -1601,16 +1579,16 @@ const ModelCouncilTab = () => {
               return (
                 <div
                   key={`${seat.label}-${index}`}
-                  className={`rounded-lg border bg-white/90 p-3 shadow-sm dark:bg-neutral-950/80 ${
+                  className={`rounded-lg border bg-surface/90 p-3 shadow-sm dark:bg-surface-canvas/80 ${
                     failed
                       ? 'border-coral-200 dark:border-coral-500/30'
                       : answered
                         ? 'border-sage-200 dark:border-sage-500/30'
-                        : 'border-white/80 dark:border-neutral-800'
+                        : 'border-white/80 dark:border-line'
                   }`}>
                   <div className="flex items-start gap-3">
                     <div
-                      className={`h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-stone-100 dark:bg-neutral-800 ${
+                      className={`h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-surface-subtle ${
                         liveMember?.status === 'pending' || !liveMember ? 'animate-pulse' : ''
                       }`}>
                       <RiveMascot
@@ -1628,9 +1606,7 @@ const ModelCouncilTab = () => {
                     </div>
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center justify-between gap-2">
-                        <p className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-50">
-                          {seat.label}
-                        </p>
+                        <p className="truncate text-sm font-semibold text-content">{seat.label}</p>
                         <span
                           className={`shrink-0 rounded px-1.5 py-0.5 text-[9px] font-semibold uppercase ${
                             failed
@@ -1654,9 +1630,9 @@ const ModelCouncilTab = () => {
                               className={`rounded-md border px-2 py-1.5 ${
                                 turn.error
                                   ? 'border-coral-100 bg-coral-50/70 dark:border-coral-500/20 dark:bg-coral-500/10'
-                                  : 'border-stone-200 bg-stone-50 dark:border-neutral-800 dark:bg-neutral-900'
+                                  : 'border-line bg-surface-muted'
                               }`}>
-                              <p className="text-[10px] font-semibold uppercase text-stone-500 dark:text-neutral-400">
+                              <p className="text-[10px] font-semibold uppercase text-content-muted">
                                 {t('modelCouncil.roundLabel').replace(
                                   '{round}',
                                   String(turn.round)
@@ -1667,14 +1643,14 @@ const ModelCouncilTab = () => {
                                   {turn.error}
                                 </p>
                               ) : (
-                                <div className="mt-0.5 text-stone-600 dark:text-neutral-300 [&_.prose]:text-xs [&_.prose]:leading-5 [&_.prose_p]:my-0">
+                                <div className="mt-0.5 text-content-secondary [&_.prose]:text-xs [&_.prose]:leading-5 [&_.prose_p]:my-0">
                                   <BubbleMarkdown content={turn.response || ''} />
                                 </div>
                               )}
                             </div>
                           ))
                         ) : (
-                          <p className="line-clamp-5 whitespace-pre-wrap text-xs text-stone-600 dark:text-neutral-300">
+                          <p className="line-clamp-5 whitespace-pre-wrap text-xs text-content-secondary">
                             {waitingText}
                           </p>
                         )}
@@ -1690,14 +1666,14 @@ const ModelCouncilTab = () => {
               );
             })}
 
-            <div className="rounded-lg border border-primary-200 bg-white p-3 shadow-sm dark:border-primary-500/30 dark:bg-neutral-950">
+            <div className="rounded-lg border border-primary-200 bg-surface p-3 shadow-sm dark:border-primary-500/30 dark:bg-surface-canvas">
               <div className="flex items-start gap-3">
-                <div className="h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-stone-100 dark:bg-neutral-800">
+                <div className="h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-surface-subtle">
                   <RiveMascot size="100%" face="reading" />
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center justify-between gap-2">
-                    <p className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-50">
+                    <p className="truncate text-sm font-semibold text-content">
                       {resolvedJudgeName}
                     </p>
                     <span className="shrink-0 rounded bg-amber-100 px-1.5 py-0.5 text-[9px] font-semibold uppercase text-amber-700 dark:bg-amber-500/20 dark:text-amber-200">
@@ -1706,7 +1682,7 @@ const ModelCouncilTab = () => {
                         : t('modelCouncil.judgeWaitingBadge')}
                     </span>
                   </div>
-                  <p className="mt-1 text-xs text-stone-600 dark:text-neutral-300">
+                  <p className="mt-1 text-xs text-content-secondary">
                     {judgeSynthesizing
                       ? t('modelCouncil.judgeSynthesizingThought')
                       : t('modelCouncil.judgeWaitingThought')}
@@ -1716,21 +1692,19 @@ const ModelCouncilTab = () => {
             </div>
           </div>
 
-          <div className="rounded-lg border border-stone-200 bg-white p-3 shadow-sm dark:border-neutral-800 dark:bg-neutral-950">
+          <div className="rounded-lg border border-line bg-surface p-3 shadow-sm dark:bg-surface-canvas">
             <div className="flex flex-wrap items-center justify-between gap-2">
               <div>
-                <h4 className="font-mono text-sm font-semibold text-stone-900 dark:text-neutral-50">
+                <h4 className="font-mono text-sm font-semibold text-content">
                   {SHARED_REASONING_FILE}
                 </h4>
-                <p className="text-xs text-stone-500 dark:text-neutral-400">
-                  {t('modelCouncil.liveScratchpadHelp')}
-                </p>
+                <p className="text-xs text-content-muted">{t('modelCouncil.liveScratchpadHelp')}</p>
               </div>
               <span className="rounded bg-primary-100 px-1.5 py-0.5 text-[9px] font-semibold uppercase text-primary-700 dark:bg-primary-500/20 dark:text-primary-200">
                 {t('modelCouncil.liveScratchpadBadge')}
               </span>
             </div>
-            <div className="mt-3 max-h-72 overflow-y-auto rounded-md border border-stone-200 bg-stone-50 px-3 py-2 text-stone-700 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 [&_.prose]:text-xs [&_.prose]:leading-5">
+            <div className="mt-3 max-h-72 overflow-y-auto rounded-md border border-line bg-surface-muted px-3 py-2 text-content-secondary [&_.prose]:text-xs [&_.prose]:leading-5">
               <BubbleMarkdown content={liveScratchpad || sharedReasoning} />
             </div>
           </div>
@@ -1743,10 +1717,7 @@ const ModelCouncilTab = () => {
             {running ? t('modelCouncil.running') : t('modelCouncil.run')}
           </Button>
           {running && (
-            <span
-              role="status"
-              aria-live="polite"
-              className="text-xs text-stone-500 dark:text-neutral-400">
+            <span role="status" aria-live="polite" className="text-xs text-content-muted">
               {t('modelCouncil.runningHint')}
             </span>
           )}
@@ -1761,9 +1732,7 @@ const ModelCouncilTab = () => {
 
       {view === 'run' && result && (
         <section aria-labelledby="model-council-results-heading" className="space-y-3 pt-1">
-          <h3
-            id="model-council-results-heading"
-            className="text-sm font-semibold text-stone-800 dark:text-neutral-100">
+          <h3 id="model-council-results-heading" className="text-sm font-semibold text-content">
             {t('modelCouncil.resultsHeading')}
           </h3>
 
@@ -1771,9 +1740,9 @@ const ModelCouncilTab = () => {
             {result.members.map((member, index) => (
               <div
                 key={`${member.model}-${index}`}
-                className="rounded-lg border border-stone-200 p-3 space-y-1.5 dark:border-neutral-800">
+                className="rounded-lg border border-line p-3 space-y-1.5">
                 <div className="flex items-center justify-between gap-2">
-                  <span className="truncate font-mono text-xs font-medium text-stone-700 dark:text-neutral-200">
+                  <span className="truncate font-mono text-xs font-medium text-content-secondary">
                     {member.model}
                   </span>
                   <span
@@ -1790,7 +1759,7 @@ const ModelCouncilTab = () => {
                 {member.error ? (
                   <p className="text-xs text-coral-600 dark:text-coral-400">{member.error}</p>
                 ) : (
-                  <div className="break-words text-stone-600 dark:text-neutral-300 [&_.prose]:text-xs [&_.prose]:leading-5 [&_.prose_p]:my-0">
+                  <div className="break-words text-content-secondary [&_.prose]:text-xs [&_.prose]:leading-5 [&_.prose_p]:my-0">
                     <BubbleMarkdown content={member.response || ''} />
                   </div>
                 )}
@@ -1800,55 +1769,55 @@ const ModelCouncilTab = () => {
 
           <div className="rounded-lg border border-primary-200 bg-primary-50 p-3 space-y-1 dark:border-primary-500/30 dark:bg-primary-500/10">
             <div className="flex items-center justify-between gap-2">
-              <h4 className="text-xs font-semibold text-stone-800 dark:text-neutral-100">
+              <h4 className="text-xs font-semibold text-content">
                 {t('modelCouncil.synthesisHeading')}
               </h4>
-              <span className="truncate font-mono text-[10px] text-stone-500 dark:text-neutral-400">
+              <span className="truncate font-mono text-[10px] text-content-muted">
                 {t('modelCouncil.synthesisBy').replace('{model}', result.chair_model)}
               </span>
             </div>
-            <div className="break-words text-stone-700 dark:text-neutral-200 [&_.prose]:text-sm [&_.prose]:leading-6">
+            <div className="break-words text-content-secondary [&_.prose]:text-sm [&_.prose]:leading-6">
               <BubbleMarkdown content={result.synthesis} />
             </div>
           </div>
 
           {usageEstimate && (
-            <div className="rounded-lg border border-stone-200 bg-white p-3 shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
+            <div className="rounded-lg border border-line bg-surface p-3 shadow-sm">
               <div className="flex flex-wrap items-center justify-between gap-2">
                 <div>
-                  <h4 className="text-xs font-semibold text-stone-800 dark:text-neutral-100">
+                  <h4 className="text-xs font-semibold text-content">
                     {t('modelCouncil.usageHeading')}
                   </h4>
-                  <p className="text-[11px] text-stone-500 dark:text-neutral-400">
+                  <p className="text-[11px] text-content-muted">
                     {t('modelCouncil.usageEstimated')}
                   </p>
                 </div>
-                <span className="rounded-md bg-stone-100 px-2 py-1 text-xs font-semibold text-stone-700 dark:bg-neutral-800 dark:text-neutral-200">
+                <span className="rounded-md bg-surface-subtle px-2 py-1 text-xs font-semibold text-content-secondary">
                   {t('modelCouncil.usageEstimatedBadge')}
                 </span>
               </div>
               <dl className="mt-3 grid gap-2 sm:grid-cols-3">
-                <div className="rounded-md bg-stone-50 px-2 py-1.5 dark:bg-neutral-950">
-                  <dt className="text-[10px] uppercase text-stone-500 dark:text-neutral-400">
+                <div className="rounded-md bg-surface-muted px-2 py-1.5">
+                  <dt className="text-[10px] uppercase text-content-muted">
                     {t('modelCouncil.usageInputTokens')}
                   </dt>
-                  <dd className="font-mono text-sm font-semibold text-stone-800 dark:text-neutral-100">
+                  <dd className="font-mono text-sm font-semibold text-content">
                     {formatTokenCount(usageEstimate.inputTokens)}
                   </dd>
                 </div>
-                <div className="rounded-md bg-stone-50 px-2 py-1.5 dark:bg-neutral-950">
-                  <dt className="text-[10px] uppercase text-stone-500 dark:text-neutral-400">
+                <div className="rounded-md bg-surface-muted px-2 py-1.5">
+                  <dt className="text-[10px] uppercase text-content-muted">
                     {t('modelCouncil.usageOutputTokens')}
                   </dt>
-                  <dd className="font-mono text-sm font-semibold text-stone-800 dark:text-neutral-100">
+                  <dd className="font-mono text-sm font-semibold text-content">
                     {formatTokenCount(usageEstimate.outputTokens)}
                   </dd>
                 </div>
-                <div className="rounded-md bg-stone-50 px-2 py-1.5 dark:bg-neutral-950">
-                  <dt className="text-[10px] uppercase text-stone-500 dark:text-neutral-400">
+                <div className="rounded-md bg-surface-muted px-2 py-1.5">
+                  <dt className="text-[10px] uppercase text-content-muted">
                     {t('modelCouncil.usageTotalTokens')}
                   </dt>
-                  <dd className="font-mono text-sm font-semibold text-stone-800 dark:text-neutral-100">
+                  <dd className="font-mono text-sm font-semibold text-content">
                     {formatTokenCount(usageEstimate.totalTokens)}
                   </dd>
                 </div>
diff --git a/app/src/components/intelligence/NamespaceOverviewPanel.tsx b/app/src/components/intelligence/NamespaceOverviewPanel.tsx
index ff1dcbf89..1a32585f2 100644
--- a/app/src/components/intelligence/NamespaceOverviewPanel.tsx
+++ b/app/src/components/intelligence/NamespaceOverviewPanel.tsx
@@ -27,7 +27,7 @@ const NamespaceOverviewPanel = ({
   const intro = (
     <div
       role="note"
-      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-stone-700 dark:text-neutral-200">
+      className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-content-secondary">
       <p className="font-medium mb-1">{t('namespaceOverview.title')}</p>
       <p>{t('namespaceOverview.intro')}</p>
     </div>
@@ -46,14 +46,14 @@ const NamespaceOverviewPanel = ({
             {[0, 1, 2].map(i => (
               <div
                 key={i}
-                className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-16"
+                className="animate-pulse rounded-lg border border-line bg-surface-muted h-16"
               />
             ))}
           </div>
           {[0, 1, 2].map(i => (
             <div
               key={i}
-              className="animate-pulse rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 h-6"
+              className="animate-pulse rounded-lg border border-line bg-surface-muted h-6"
             />
           ))}
         </div>
@@ -84,12 +84,10 @@ const NamespaceOverviewPanel = ({
       <div className="space-y-4">
         {intro}
         <div className="py-8 text-center">
-          <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          <h3 className="text-sm font-semibold text-content-secondary">
             {t('namespaceOverview.empty')}
           </h3>
-          <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
-            {t('namespaceOverview.emptyHint')}
-          </p>
+          <p className="mt-1 text-xs text-content-muted">{t('namespaceOverview.emptyHint')}</p>
         </div>
       </div>
     );
@@ -110,15 +108,11 @@ const NamespaceOverviewPanel = ({
           { label: t('namespaceOverview.metricFacts'), value: report.totalFacts },
           { label: t('namespaceOverview.metricEntities'), value: report.totalEntities },
         ].map(tile => (
-          <div
-            key={tile.label}
-            className="rounded-lg border border-stone-200 dark:border-neutral-800 p-3">
-            <div className="text-[10px] uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+          <div key={tile.label} className="rounded-lg border border-line p-3">
+            <div className="text-[10px] uppercase tracking-wider text-content-faint">
               {tile.label}
             </div>
-            <div className="text-lg font-semibold tabular-nums text-stone-900 dark:text-neutral-100">
-              {tile.value}
-            </div>
+            <div className="text-lg font-semibold tabular-nums text-content">{tile.value}</div>
           </div>
         ))}
       </div>
@@ -127,7 +121,7 @@ const NamespaceOverviewPanel = ({
       <section aria-labelledby="namespace-overview-heading" className="space-y-1">
         <h3
           id="namespace-overview-heading"
-          className="text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+          className="text-xs font-semibold uppercase tracking-wider text-content-muted">
           {t('namespaceOverview.heading')}
         </h3>
         <ul className="space-y-1">
@@ -137,21 +131,19 @@ const NamespaceOverviewPanel = ({
               className="flex items-center gap-2 text-[11px] tabular-nums">
               <span
                 className={`w-28 shrink-0 truncate ${
-                  stat.namespace === null
-                    ? 'italic text-stone-400 dark:text-neutral-500'
-                    : 'text-stone-700 dark:text-neutral-200'
+                  stat.namespace === null ? 'italic text-content-faint' : 'text-content-secondary'
                 }`}
                 title={stat.namespace ?? t('namespaceOverview.unnamespaced')}>
                 {stat.namespace ?? t('namespaceOverview.unnamespaced')}
               </span>
-              <div className="flex-1 h-3 rounded bg-stone-100 dark:bg-neutral-800 overflow-hidden">
+              <div className="flex-1 h-3 rounded bg-surface-subtle overflow-hidden">
                 <div
                   className="h-full bg-primary-400/70"
                   style={{ width: `${(stat.factCount / maxFacts) * 100}%` }}
                 />
               </div>
               <span
-                className="w-16 shrink-0 text-right text-stone-500 dark:text-neutral-400"
+                className="w-16 shrink-0 text-right text-content-muted"
                 title={t('namespaceOverview.factsLabel').replace(
                   '{count}',
                   String(stat.factCount)
@@ -159,7 +151,7 @@ const NamespaceOverviewPanel = ({
                 {stat.factCount}
               </span>
               <span
-                className="w-16 shrink-0 text-right text-stone-400 dark:text-neutral-500"
+                className="w-16 shrink-0 text-right text-content-faint"
                 title={t('namespaceOverview.entitiesLabel').replace(
                   '{count}',
                   String(stat.entityCount)
@@ -170,7 +162,7 @@ const NamespaceOverviewPanel = ({
           ))}
         </ul>
         {truncated && (
-          <p className="text-center text-xs text-stone-400 dark:text-neutral-500">
+          <p className="text-center text-xs text-content-faint">
             {t('namespaceOverview.truncated')
               .replace('{shown}', String(rows.length))
               .replace('{total}', String(report.namespaces.length))}
diff --git a/app/src/components/intelligence/ObsidianVaultSection.tsx b/app/src/components/intelligence/ObsidianVaultSection.tsx
index fdecbe766..97347fa9f 100644
--- a/app/src/components/intelligence/ObsidianVaultSection.tsx
+++ b/app/src/components/intelligence/ObsidianVaultSection.tsx
@@ -210,11 +210,11 @@ export function ObsidianVaultSection({ contentRootAbs, onToast }: ObsidianVaultS
           data-testid="obsidian-vault-guidance"
           className="w-full max-w-xl rounded-lg border border-violet-200 bg-violet-50 p-4
                      text-sm dark:border-violet-500/30 dark:bg-violet-500/10">
-          <p className="text-neutral-700 dark:text-neutral-200">{helpText}</p>
+          <p className="text-content-secondary">{helpText}</p>
 
           <code
-            className="mt-2 block break-all rounded bg-white/70 px-2 py-1 font-mono text-xs
-                       text-neutral-600 dark:bg-neutral-900/60 dark:text-neutral-300"
+            className="mt-2 block break-all rounded bg-surface/70 px-2 py-1 font-mono text-xs
+                       text-content-secondary dark:bg-surface/60"
             data-testid="obsidian-vault-path">
             {contentRootAbs}
           </code>
@@ -227,9 +227,9 @@ export function ObsidianVaultSection({ contentRootAbs, onToast }: ObsidianVaultS
               type="button"
               onClick={openAnyway}
               data-testid="obsidian-open-anyway"
-              className="rounded-md border border-violet-300 bg-white px-3 py-1.5 text-xs font-semibold
+              className="rounded-md border border-violet-300 bg-surface px-3 py-1.5 text-xs font-semibold
                          text-violet-700 hover:bg-violet-50 dark:border-violet-500/40
-                         dark:bg-neutral-800 dark:text-violet-300">
+                         dark:bg-surface-muted dark:text-violet-300">
               {t('workspace.openAnyway')}
             </button>
             <Button
@@ -253,7 +253,7 @@ export function ObsidianVaultSection({ contentRootAbs, onToast }: ObsidianVaultS
             <div className="mt-2 space-y-1.5">
               <label
                 htmlFor="obsidian-config-dir"
-                className="block text-xs font-medium text-neutral-600 dark:text-neutral-300">
+                className="block text-xs font-medium text-content-secondary">
                 {t('workspace.obsidianConfigDirLabel')}
               </label>
               <div className="flex flex-wrap items-center gap-2">
@@ -265,9 +265,9 @@ export function ObsidianVaultSection({ contentRootAbs, onToast }: ObsidianVaultS
                   placeholder={t('workspace.obsidianConfigDirPlaceholder')}
                   spellCheck={false}
                   data-testid="obsidian-config-dir-input"
-                  className="flex-1 rounded-md border border-neutral-300 bg-white px-2 py-1 font-mono text-xs
-                             text-neutral-800 focus:outline-none focus:ring-1 focus:ring-violet-300
-                             dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100"
+                  className="flex-1 rounded-md border border-line-strong bg-surface px-2 py-1 font-mono text-xs
+                             text-content focus:outline-none focus:ring-1 focus:ring-violet-300
+                             dark:border-neutral-600 dark:bg-surface dark:text-content"
                 />
                 <button
                   type="button"
@@ -279,9 +279,7 @@ export function ObsidianVaultSection({ contentRootAbs, onToast }: ObsidianVaultS
                   {t('common.save')}
                 </button>
               </div>
-              <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                {t('workspace.obsidianConfigDirHint')}
-              </p>
+              <p className="text-xs text-content-muted">{t('workspace.obsidianConfigDirHint')}</p>
             </div>
           )}
         </div>
diff --git a/app/src/components/intelligence/ScreenIntelligenceDebugPanel.tsx b/app/src/components/intelligence/ScreenIntelligenceDebugPanel.tsx
index f732cccb9..5e3f72054 100644
--- a/app/src/components/intelligence/ScreenIntelligenceDebugPanel.tsx
+++ b/app/src/components/intelligence/ScreenIntelligenceDebugPanel.tsx
@@ -62,18 +62,18 @@ const ScreenIntelligenceDebugPanelContent = ({
         </h3>
         <button
           onClick={handleRefreshStatus}
-          className="rounded-lg border border-stone-700 bg-stone-800/60 px-3 py-1 text-xs text-stone-300 dark:text-neutral-600 transition-colors hover:bg-stone-700/60">
+          className="rounded-lg border border-stone-700 bg-stone-800/60 px-3 py-1 text-xs text-content-faint dark:text-neutral-600 transition-colors hover:bg-stone-700/60">
           {t('common.refresh')}
         </button>
       </div>
 
       {/* Permissions */}
       <div className="rounded-xl border border-stone-700 bg-stone-900/50 p-3">
-        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-content-faint">
           {t('intelligence.screenDebug.permissions')}
         </h4>
         {status?.platform_supported === false ? (
-          <p className="text-xs text-stone-500 dark:text-neutral-400">
+          <p className="text-xs text-content-muted">
             {t('intelligence.screenDebug.platformNotSupported')}
           </p>
         ) : (
@@ -96,16 +96,13 @@ const ScreenIntelligenceDebugPanelContent = ({
 
       {/* Session Status */}
       <div className="rounded-xl border border-stone-700 bg-stone-900/50 p-3">
-        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-content-faint">
           {t('intelligence.screenDebug.session')}
         </h4>
-        <div className="space-y-1 text-xs text-stone-300 dark:text-neutral-600">
+        <div className="space-y-1 text-xs text-content-faint dark:text-neutral-600">
           <div className="flex justify-between">
             <span>{t('intelligence.screenDebug.active')}</span>
-            <span
-              className={
-                session?.active ? 'text-green-400' : 'text-stone-500 dark:text-neutral-400'
-              }>
+            <span className={session?.active ? 'text-green-400' : 'text-content-muted'}>
               {session?.active ? t('common.yes') : t('common.no')}
             </span>
           </div>
@@ -132,7 +129,7 @@ const ScreenIntelligenceDebugPanelContent = ({
 
       {/* Capture Test */}
       <div className="rounded-xl border border-stone-700 bg-stone-900/50 p-3">
-        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-content-faint">
           {t('intelligence.screenDebug.captureTest')}
         </h4>
         <button
@@ -146,7 +143,7 @@ const ScreenIntelligenceDebugPanelContent = ({
 
         {captureTestResult && (
           <div className="space-y-2">
-            <div className="space-y-1 text-xs text-stone-300 dark:text-neutral-600">
+            <div className="space-y-1 text-xs text-content-faint dark:text-neutral-600">
               <div className="flex justify-between">
                 <span>{t('intelligence.screenDebug.status')}</span>
                 <span className={captureTestResult.ok ? 'text-green-400' : 'text-red-400'}>
@@ -211,7 +208,7 @@ const ScreenIntelligenceDebugPanelContent = ({
       {/* Recent Vision Summaries */}
       {recentVisionSummaries.length > 0 && (
         <div className="rounded-xl border border-stone-700 bg-stone-900/50 p-3">
-          <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+          <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-content-faint">
             {t('intelligence.screenDebug.recentVisionSummaries')}
           </h4>
           <div className="space-y-2">
@@ -219,7 +216,7 @@ const ScreenIntelligenceDebugPanelContent = ({
               <div
                 key={summary.id}
                 className="rounded-lg border border-stone-700/50 bg-stone-800/30 p-2 text-xs">
-                <div className="flex justify-between text-stone-400 dark:text-neutral-500">
+                <div className="flex justify-between text-content-faint">
                   <span>{summary.app_name ?? t('intelligence.screenDebug.unknown')}</span>
                   <span>
                     {new Date(summary.captured_at_ms).toLocaleTimeString()} &middot;{' '}
@@ -261,7 +258,7 @@ const PermissionDot = ({ label, value }: { label: string; value?: string }) => {
   return (
     <div className="flex items-center gap-1.5">
       <div className={`h-2 w-2 rounded-full ${color}`} />
-      <span className="text-stone-300 dark:text-neutral-600">{label}</span>
+      <span className="text-content-faint dark:text-neutral-600">{label}</span>
     </div>
   );
 };
diff --git a/app/src/components/intelligence/SourceSettingsPanel.tsx b/app/src/components/intelligence/SourceSettingsPanel.tsx
index 8da349938..06e2cbeaa 100644
--- a/app/src/components/intelligence/SourceSettingsPanel.tsx
+++ b/app/src/components/intelligence/SourceSettingsPanel.tsx
@@ -138,9 +138,9 @@ export function SourceSettingsPanel({
 
   return (
     <div
-      className="mt-2 ml-7 rounded-lg border border-stone-200 bg-stone-50 p-3 dark:border-neutral-700 dark:bg-neutral-800/60"
+      className="mt-2 ml-7 rounded-lg border border-line bg-surface-muted p-3"
       data-testid={`source-settings-panel-${source.id}`}>
-      <p className="mb-2 text-xs font-semibold text-stone-600 dark:text-neutral-300">
+      <p className="mb-2 text-xs font-semibold text-content-secondary">
         {t('memorySources.settings.title')}
       </p>
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
@@ -157,7 +157,7 @@ export function SourceSettingsPanel({
             <div key={field}>
               <label
                 htmlFor={`src-setting-${source.id}-${field}`}
-                className="mb-0.5 flex items-center gap-1.5 text-xs font-medium text-stone-600 dark:text-neutral-400">
+                className="mb-0.5 flex items-center gap-1.5 text-xs font-medium text-content-secondary">
                 {t(FIELD_LABEL_KEYS[field])}
                 {isMaxed && (
                   <span className="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700 dark:bg-amber-500/20 dark:text-amber-300">
@@ -166,7 +166,7 @@ export function SourceSettingsPanel({
                 )}
                 {isUnlimited && (
                   <span
-                    className="inline-flex cursor-help text-stone-400 dark:text-neutral-500"
+                    className="inline-flex cursor-help text-content-faint"
                     title={unlimitedTooltip}
                     aria-label={unlimitedTooltip}>
                     <InfoIcon />
@@ -181,9 +181,9 @@ export function SourceSettingsPanel({
                 value={values[field] ?? ''}
                 onChange={e => handleChange(field, e.target.value)}
                 placeholder={t('memorySources.settings.unlimited')}
-                className="w-full rounded-md border border-stone-200 bg-white px-2.5 py-1.5 text-xs font-mono
-                           text-stone-800 placeholder:text-stone-400
-                           dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-200
+                className="w-full rounded-md border border-line bg-surface px-2.5 py-1.5 text-xs font-mono
+                           text-content placeholder:text-stone-400
+                           dark:border-neutral-600 dark:bg-surface dark:text-neutral-200
                            dark:placeholder:text-neutral-500
                            focus:outline-none focus:ring-2 focus:ring-primary-200"
               />
diff --git a/app/src/components/intelligence/SubconsciousTriggersPanel.tsx b/app/src/components/intelligence/SubconsciousTriggersPanel.tsx
index a0711be7c..32391f034 100644
--- a/app/src/components/intelligence/SubconsciousTriggersPanel.tsx
+++ b/app/src/components/intelligence/SubconsciousTriggersPanel.tsx
@@ -8,8 +8,7 @@ import {
 } from '../../utils/tauriCommands/subconscious';
 import Button from '../ui/Button';
 
-const cardClass =
-  'rounded-lg border border-stone-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900';
+const cardClass = 'rounded-lg border border-line bg-surface p-4';
 
 /**
  * Debug / manage panel for the event-driven subconscious trigger pipeline.
@@ -71,12 +70,8 @@ export default function SubconsciousTriggersPanel() {
     <div className={cardClass} data-testid="subconscious-triggers-panel">
       <div className="mb-3 flex items-center justify-between">
         <div>
-          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
-            {t('subconsciousTriggers.title')}
-          </h3>
-          <p className="text-xs text-stone-500 dark:text-neutral-400">
-            {t('subconsciousTriggers.subtitle')}
-          </p>
+          <h3 className="text-sm font-semibold text-content">{t('subconsciousTriggers.title')}</h3>
+          <p className="text-xs text-content-muted">{t('subconsciousTriggers.subtitle')}</p>
         </div>
         <div className="flex items-center gap-2">
           {status && (
@@ -102,9 +97,7 @@ export default function SubconsciousTriggersPanel() {
       </div>
 
       {loading && !status ? (
-        <p
-          className="text-xs text-stone-500 dark:text-neutral-400"
-          data-testid="subconscious-triggers-loading">
+        <p className="text-xs text-content-muted" data-testid="subconscious-triggers-loading">
           {t('common.loading')}
         </p>
       ) : error ? (
@@ -157,7 +150,7 @@ export default function SubconsciousTriggersPanel() {
 
           {!status.triggers_enabled && (
             <p
-              className="pt-1 text-xs text-stone-500 dark:text-neutral-400"
+              className="pt-1 text-xs text-content-muted"
               data-testid="subconscious-triggers-disabled-hint">
               {t('subconsciousTriggers.disabledHint')}
             </p>
@@ -181,11 +174,11 @@ function StatusRow({ label, value, tone = 'default', mono = false, testid }: Sta
     tone === 'good'
       ? 'text-sage-600 dark:text-sage-400'
       : tone === 'muted'
-        ? 'text-stone-400 dark:text-neutral-500'
-        : 'text-stone-800 dark:text-neutral-200';
+        ? 'text-content-faint'
+        : 'text-content';
   return (
     <div className="flex items-center justify-between gap-3 text-xs" data-testid={testid}>
-      <span className="text-stone-500 dark:text-neutral-400">{label}</span>
+      <span className="text-content-muted">{label}</span>
       <span className={`${toneClass} ${mono ? 'font-mono' : 'font-medium'} truncate`}>{value}</span>
     </div>
   );
diff --git a/app/src/components/intelligence/SyncAuditPanel.tsx b/app/src/components/intelligence/SyncAuditPanel.tsx
index 21a998acd..60a064921 100644
--- a/app/src/components/intelligence/SyncAuditPanel.tsx
+++ b/app/src/components/intelligence/SyncAuditPanel.tsx
@@ -73,15 +73,13 @@ export function SyncAuditPanel() {
 
   if (loading) {
     return (
-      <div className="text-xs text-stone-400 dark:text-neutral-500 py-2">
-        {t('common.loading', 'Loading...')}
-      </div>
+      <div className="text-xs text-content-faint py-2">{t('common.loading', 'Loading...')}</div>
     );
   }
 
   if (entries.length === 0) {
     return (
-      <div className="text-xs text-stone-400 dark:text-neutral-500 py-2">
+      <div className="text-xs text-content-faint py-2">
         {t('sync.noAuditEntries', 'No sync runs recorded yet.')}
       </div>
     );
@@ -93,22 +91,22 @@ export function SyncAuditPanel() {
 
   return (
     <div className="space-y-2">
-      <div className="flex items-center gap-4 text-xs text-stone-500 dark:text-neutral-400">
+      <div className="flex items-center gap-4 text-xs text-content-muted">
         <span>
           {entries.length} {t('sync.runs', 'sync runs')}
         </span>
-        <span className="text-stone-300 dark:text-neutral-600">·</span>
+        <span className="text-content-faint dark:text-neutral-600">·</span>
         <span>
           {formatTokens(totalInput)} in / {formatTokens(totalOutput)} out
         </span>
-        <span className="text-stone-300 dark:text-neutral-600">·</span>
+        <span className="text-content-faint dark:text-neutral-600">·</span>
         <span className="font-medium">
           ${totalCost.toFixed(4)} {t('sync.totalCost', 'total')}
         </span>
       </div>
-      <div className="max-h-48 overflow-y-auto rounded-md border border-stone-100 dark:border-neutral-800">
+      <div className="max-h-48 overflow-y-auto rounded-md border border-line-subtle">
         <table className="w-full text-xs">
-          <thead className="sticky top-0 bg-stone-50 dark:bg-neutral-900 text-stone-500 dark:text-neutral-400">
+          <thead className="sticky top-0 bg-surface-muted text-content-muted">
             <tr>
               <th className="px-3 py-1.5 text-left font-medium">{t('sync.when', 'When')}</th>
               <th className="px-3 py-1.5 text-left font-medium">{t('sync.source', 'Source')}</th>
@@ -125,29 +123,29 @@ export function SyncAuditPanel() {
             {entries.map((e, i) => (
               <tr
                 key={`${e.timestamp}-${i}`}
-                className="hover:bg-stone-50 dark:hover:bg-neutral-800/50">
+                className="hover:bg-surface-muted dark:hover:bg-surface-muted/50">
                 <td
-                  className="px-3 py-1.5 text-stone-600 dark:text-neutral-300 whitespace-nowrap"
+                  className="px-3 py-1.5 text-content-secondary whitespace-nowrap"
                   title={e.timestamp}>
                   {timeAgo(e.timestamp, t)}
                 </td>
                 <td
-                  className="px-3 py-1.5 text-stone-700 dark:text-neutral-200 truncate max-w-[180px]"
+                  className="px-3 py-1.5 text-content-secondary truncate max-w-[180px]"
                   title={e.scope}>
                   {scopeLabel(e.scope)}
                 </td>
-                <td className="px-3 py-1.5 text-right tabular-nums text-stone-600 dark:text-neutral-300">
+                <td className="px-3 py-1.5 text-right tabular-nums text-content-secondary">
                   {e.items_fetched}
                 </td>
                 <td
-                  className="px-3 py-1.5 text-right tabular-nums text-stone-600 dark:text-neutral-300"
+                  className="px-3 py-1.5 text-right tabular-nums text-content-secondary"
                   title={`${e.input_tokens} in / ${e.output_tokens} out`}>
                   {formatTokens(e.input_tokens + e.output_tokens)}
                 </td>
-                <td className="px-3 py-1.5 text-right tabular-nums font-medium text-stone-700 dark:text-neutral-200">
+                <td className="px-3 py-1.5 text-right tabular-nums font-medium text-content-secondary">
                   ${e.estimated_cost_usd.toFixed(4)}
                 </td>
-                <td className="px-3 py-1.5 text-right tabular-nums text-stone-500 dark:text-neutral-400">
+                <td className="px-3 py-1.5 text-right tabular-nums text-content-muted">
                   {formatDuration(e.duration_ms)}
                 </td>
                 <td className="px-3 py-1.5 text-center">
diff --git a/app/src/components/intelligence/SyncBudgetDialog.tsx b/app/src/components/intelligence/SyncBudgetDialog.tsx
index 05870020e..e80ca7ab8 100644
--- a/app/src/components/intelligence/SyncBudgetDialog.tsx
+++ b/app/src/components/intelligence/SyncBudgetDialog.tsx
@@ -47,21 +47,19 @@ export default function SyncBudgetDialog({ source, onClose, onSaved }: SyncBudge
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
       onClick={onClose}>
       <div
-        className="bg-white dark:bg-neutral-900 rounded-xl shadow-xl border border-stone-200 dark:border-neutral-800 w-full max-w-md mx-4 p-5"
+        className="bg-surface rounded-xl shadow-xl border border-line w-full max-w-md mx-4 p-5"
         onClick={e => e.stopPropagation()}>
-        <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100 mb-1">
-          {t('syncBudget.title')}
-        </h3>
-        <p className="text-xs text-stone-500 dark:text-neutral-400 mb-4">{source.label}</p>
+        <h3 className="text-base font-semibold text-content mb-1">{t('syncBudget.title')}</h3>
+        <p className="text-xs text-content-muted mb-4">{source.label}</p>
 
         <div className="flex flex-col gap-4">
           <div>
             <label
               htmlFor="budget-tokens"
-              className="block text-sm font-medium text-stone-700 dark:text-neutral-300">
+              className="block text-sm font-medium text-content-secondary">
               {t('syncBudget.maxTokens')}
             </label>
-            <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5 mb-1">
+            <p className="text-xs text-content-muted mt-0.5 mb-1">
               {t('syncBudget.maxTokensHelp')}
             </p>
             <input
@@ -72,19 +70,17 @@ export default function SyncBudgetDialog({ source, onClose, onSaved }: SyncBudge
               value={maxTokens}
               onChange={e => setMaxTokens(e.target.value)}
               placeholder={t('syncBudget.unlimited')}
-              className="w-full px-3 py-1.5 rounded-md border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-sm font-mono"
+              className="w-full px-3 py-1.5 rounded-md border border-line bg-surface text-sm font-mono"
             />
           </div>
 
           <div>
             <label
               htmlFor="budget-cost"
-              className="block text-sm font-medium text-stone-700 dark:text-neutral-300">
+              className="block text-sm font-medium text-content-secondary">
               {t('syncBudget.maxCost')}
             </label>
-            <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5 mb-1">
-              {t('syncBudget.maxCostHelp')}
-            </p>
+            <p className="text-xs text-content-muted mt-0.5 mb-1">{t('syncBudget.maxCostHelp')}</p>
             <input
               id="budget-cost"
               type="number"
@@ -93,24 +89,24 @@ export default function SyncBudgetDialog({ source, onClose, onSaved }: SyncBudge
               value={maxCost}
               onChange={e => setMaxCost(e.target.value)}
               placeholder={t('syncBudget.unlimited')}
-              className="w-full px-3 py-1.5 rounded-md border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-sm font-mono"
+              className="w-full px-3 py-1.5 rounded-md border border-line bg-surface text-sm font-mono"
             />
           </div>
 
           <div>
             <label
               htmlFor="budget-depth"
-              className="block text-sm font-medium text-stone-700 dark:text-neutral-300">
+              className="block text-sm font-medium text-content-secondary">
               {t('syncBudget.syncDepth')}
             </label>
-            <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5 mb-1">
+            <p className="text-xs text-content-muted mt-0.5 mb-1">
               {t('syncBudget.syncDepthHelp')}
             </p>
             <select
               id="budget-depth"
               value={depthDays}
               onChange={e => setDepthDays(e.target.value)}
-              className="w-full px-3 py-1.5 rounded-md border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-sm">
+              className="w-full px-3 py-1.5 rounded-md border border-line bg-surface text-sm">
               <option value="">{t('syncBudget.allTime')}</option>
               <option value="7">{t('syncBudget.days7')}</option>
               <option value="30">{t('syncBudget.days30')}</option>
diff --git a/app/src/components/intelligence/SyncConfirmDialog.tsx b/app/src/components/intelligence/SyncConfirmDialog.tsx
index e639249fa..045f09068 100644
--- a/app/src/components/intelligence/SyncConfirmDialog.tsx
+++ b/app/src/components/intelligence/SyncConfirmDialog.tsx
@@ -58,30 +58,26 @@ export default function SyncConfirmDialog({
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
       onClick={onCancel}>
       <div
-        className="bg-white dark:bg-neutral-900 rounded-xl shadow-xl border border-stone-200 dark:border-neutral-800 w-full max-w-sm mx-4 p-5"
+        className="bg-surface rounded-xl shadow-xl border border-line w-full max-w-sm mx-4 p-5"
         onClick={e => e.stopPropagation()}>
-        <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100 mb-3">
-          {t('syncConfirm.title')}
-        </h3>
+        <h3 className="text-base font-semibold text-content mb-3">{t('syncConfirm.title')}</h3>
 
         {!estimate && !error && (
-          <p className="text-sm text-stone-500 dark:text-neutral-400">
-            {t('syncConfirm.estimating')}
-          </p>
+          <p className="text-sm text-content-muted">{t('syncConfirm.estimating')}</p>
         )}
 
         {error && <p className="text-sm text-coral-600">{error}</p>}
 
         {estimate && (
           <div className="flex flex-col gap-2">
-            <p className="text-sm text-stone-700 dark:text-neutral-300">
+            <p className="text-sm text-content-secondary">
               {t('syncConfirm.message')
                 .replace('{items}', String(estimate.item_count))
                 .replace('{tokens}', tokenStr)
                 .replace('{cost}', estimate.estimated_cost_usd.toFixed(4))}
             </p>
             {estimate.budget_max_cost_usd != null && (
-              <p className="text-xs text-stone-500 dark:text-neutral-400">
+              <p className="text-xs text-content-muted">
                 {t('syncConfirm.budgetNote').replace(
                   '{max}',
                   estimate.budget_max_cost_usd.toFixed(2)
diff --git a/app/src/components/intelligence/TeamActivityRail.tsx b/app/src/components/intelligence/TeamActivityRail.tsx
index 6571d9697..b332f96df 100644
--- a/app/src/components/intelligence/TeamActivityRail.tsx
+++ b/app/src/components/intelligence/TeamActivityRail.tsx
@@ -61,16 +61,16 @@ export function TeamActivityRail({ messages, members, onSend, sending }: TeamAct
   };
 
   return (
-    <aside className="rounded-lg border border-stone-200 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-900">
+    <aside className="rounded-lg border border-line bg-surface p-3">
       <div className="mb-2 flex items-center justify-between">
-        <h3 className="text-[11px] font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+        <h3 className="text-[11px] font-semibold uppercase tracking-wide text-content-muted">
           {t('intelligence.teams.activity.title')}
         </h3>
-        <span className="text-[10px] text-stone-400 dark:text-neutral-500">{messages.length}</span>
+        <span className="text-[10px] text-content-faint">{messages.length}</span>
       </div>
 
       {messages.length === 0 ? (
-        <p className="py-6 text-center text-[11px] text-stone-400 dark:text-neutral-500">
+        <p className="py-6 text-center text-[11px] text-content-faint">
           {t('intelligence.teams.activity.empty')}
         </p>
       ) : (
@@ -87,12 +87,12 @@ export function TeamActivityRail({ messages, members, onSend, sending }: TeamAct
                   {fromName.charAt(0).toUpperCase()}
                 </span>
                 <div className="min-w-0">
-                  <div className="text-[10px] text-stone-400 dark:text-neutral-500">
-                    <b className="text-stone-600 dark:text-neutral-300">{fromName}</b>
+                  <div className="text-[10px] text-content-faint">
+                    <b className="text-content-secondary">{fromName}</b>
                     {' → '}
                     {nameFor(message.payload.to)}
                   </div>
-                  <p className="break-words text-[11px] leading-snug text-stone-700 dark:text-neutral-200">
+                  <p className="break-words text-[11px] leading-snug text-content-secondary">
                     {message.payload.content}
                   </p>
                 </div>
@@ -103,13 +103,13 @@ export function TeamActivityRail({ messages, members, onSend, sending }: TeamAct
       )}
 
       {onSend && (
-        <div className="mt-3 border-t border-stone-100 pt-2 dark:border-neutral-800">
+        <div className="mt-3 border-t border-line-subtle pt-2">
           <div className="flex items-center gap-1.5">
             <select
               value={recipient}
               onChange={e => setRecipient(e.target.value)}
               aria-label={t('intelligence.teams.composer.recipient')}
-              className="max-w-[40%] flex-none rounded-md border border-stone-200 bg-white px-1.5 py-1 text-[11px] text-stone-700 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200">
+              className="max-w-[40%] flex-none rounded-md border border-line bg-surface px-1.5 py-1 text-[11px] text-content-secondary">
               <option value="">{t('intelligence.teams.composer.toTeam')}</option>
               {members.map(m => (
                 <option key={m.id} value={m.id}>
@@ -129,7 +129,7 @@ export function TeamActivityRail({ messages, members, onSend, sending }: TeamAct
                 }
               }}
               placeholder={t('intelligence.teams.composer.placeholder')}
-              className="min-w-0 flex-1 rounded-md border border-stone-200 px-2 py-1 text-[11px] text-stone-700 placeholder:text-stone-400 disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200"
+              className="min-w-0 flex-1 rounded-md border border-line px-2 py-1 text-[11px] text-content-secondary placeholder:text-stone-400 disabled:opacity-50 dark:bg-surface"
             />
             <button
               type="button"
diff --git a/app/src/components/intelligence/TeamHeader.tsx b/app/src/components/intelligence/TeamHeader.tsx
index 0ed7fba65..19a9442e5 100644
--- a/app/src/components/intelligence/TeamHeader.tsx
+++ b/app/src/components/intelligence/TeamHeader.tsx
@@ -55,13 +55,11 @@ export function TeamHeader({
   const title = team.summary?.trim() || team.leadAgentId;
 
   return (
-    <div className="rounded-lg border border-stone-200 bg-white px-3 py-2.5 dark:border-neutral-800 dark:bg-neutral-900">
+    <div className="rounded-lg border border-line bg-surface px-3 py-2.5">
       <div className="flex flex-wrap items-start justify-between gap-3">
         <div className="min-w-0">
-          <div className="break-words text-sm font-semibold text-stone-800 dark:text-neutral-100">
-            {title}
-          </div>
-          <div className="mt-0.5 text-[11px] text-stone-500 dark:text-neutral-400">
+          <div className="break-words text-sm font-semibold text-content">{title}</div>
+          <div className="mt-0.5 text-[11px] text-content-muted">
             {t('intelligence.teams.header.lead')}{' '}
             <span className="font-mono text-ocean-600 dark:text-ocean-300">{team.leadAgentId}</span>
             {' · '}
@@ -76,7 +74,7 @@ export function TeamHeader({
             <span
               key={member.id}
               title={`${member.agentId ?? member.name} · ${t(MEMBER_STATUS_KEY[member.memberStatus])}`}
-              className="inline-flex items-center gap-1 rounded-md border border-stone-200 bg-stone-50 px-1.5 py-0.5 text-[10px] text-stone-600 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
+              className="inline-flex items-center gap-1 rounded-md border border-line bg-surface-muted px-1.5 py-0.5 text-[10px] text-content-secondary">
               <span
                 className="inline-flex h-3.5 w-3.5 flex-none items-center justify-center rounded-full text-[7px] font-semibold text-white"
                 style={{ backgroundColor: memberColor(member.id) }}>
diff --git a/app/src/components/intelligence/TeamTaskBoard.tsx b/app/src/components/intelligence/TeamTaskBoard.tsx
index e0f24f871..c801d976f 100644
--- a/app/src/components/intelligence/TeamTaskBoard.tsx
+++ b/app/src/components/intelligence/TeamTaskBoard.tsx
@@ -109,18 +109,16 @@ export function TeamTaskBoard({ tasks, members }: TeamTaskBoardProps) {
         return (
           <section
             key={column.status}
-            className={`min-w-0 rounded-lg bg-stone-50 p-2 dark:bg-neutral-800/60 ${accentClass}`}>
+            className={`min-w-0 rounded-lg bg-surface-muted p-2 ${accentClass}`}>
             <div className="mb-2 flex items-center justify-between gap-2">
-              <h5 className="truncate text-[11px] font-medium text-stone-600 dark:text-neutral-300">
+              <h5 className="truncate text-[11px] font-medium text-content-secondary">
                 {t(column.labelKey)}
               </h5>
-              <span className="text-[10px] text-stone-400 dark:text-neutral-500">
-                {cards.length}
-              </span>
+              <span className="text-[10px] text-content-faint">{cards.length}</span>
             </div>
             <div className="space-y-2">
               {cards.length === 0 ? (
-                <p className="py-2 text-center text-[10px] text-stone-400 dark:text-neutral-600">
+                <p className="py-2 text-center text-[10px] text-content-faint dark:text-neutral-600">
                   {t('intelligence.teams.emptyColumn')}
                 </p>
               ) : (
@@ -163,13 +161,11 @@ function TeamTaskCard({
   return (
     <article
       style={borderStyle}
-      className="rounded-lg border border-stone-200 bg-white px-2.5 py-2 shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
-      <p className="break-words text-xs font-medium leading-snug text-stone-800 dark:text-neutral-100">
-        {task.title}
-      </p>
+      className="rounded-lg border border-line bg-surface px-2.5 py-2 shadow-sm">
+      <p className="break-words text-xs font-medium leading-snug text-content">{task.title}</p>
 
       {showClaimer && (
-        <p className="mt-0.5 text-[10px] text-stone-500 dark:text-neutral-400">
+        <p className="mt-0.5 text-[10px] text-content-muted">
           {t('intelligence.teams.pickedUpBy').replace('{name}', claimer.name)}
         </p>
       )}
@@ -187,7 +183,7 @@ function TeamTaskCard({
             <span className="truncate">{owner.name}</span>
           </span>
         ) : (
-          <span className="rounded bg-stone-100 px-1.5 py-0.5 text-[10px] italic text-stone-400 dark:bg-neutral-800 dark:text-neutral-500">
+          <span className="rounded bg-surface-subtle px-1.5 py-0.5 text-[10px] italic text-content-faint">
             {t('intelligence.teams.unclaimed')}
           </span>
         )}
@@ -195,7 +191,7 @@ function TeamTaskCard({
         {unmet > 0 && (
           <span
             title={t('intelligence.teams.depLockTitle').replace('{count}', String(unmet))}
-            className="inline-flex items-center gap-1 rounded bg-stone-100 px-1.5 py-0.5 text-[10px] text-stone-600 dark:bg-neutral-800 dark:text-neutral-300">
+            className="inline-flex items-center gap-1 rounded bg-surface-subtle px-1.5 py-0.5 text-[10px] text-content-secondary">
             <LuLock className="h-2.5 w-2.5" />
             {unmet}
           </span>
@@ -212,7 +208,7 @@ function TeamTaskCard({
       </div>
 
       {task.objective && (
-        <p className="mt-1 break-words text-[11px] leading-snug text-stone-500 dark:text-neutral-400">
+        <p className="mt-1 break-words text-[11px] leading-snug text-content-muted">
           {task.objective}
         </p>
       )}
@@ -224,9 +220,7 @@ function GateBadge({ gateStatus, gateReason }: { gateStatus: string; gateReason?
   const { t } = useT();
   // Defensive mapping: an unseen gate string must render as a neutral chip
   // showing its raw value, never crash or vanish.
-  const style =
-    GATE_STYLE[gateStatus] ??
-    'bg-stone-100 text-stone-600 dark:bg-neutral-800 dark:text-neutral-300';
+  const style = GATE_STYLE[gateStatus] ?? 'bg-surface-subtle text-content-secondary';
   const label = GATE_LABEL_KEY[gateStatus]
     ? t(GATE_LABEL_KEY[gateStatus])
     : t('intelligence.teams.gate.label').replace('{status}', gateStatus);
diff --git a/app/src/components/intelligence/Toast.tsx b/app/src/components/intelligence/Toast.tsx
index 0b5e75588..03e3ce1dc 100644
--- a/app/src/components/intelligence/Toast.tsx
+++ b/app/src/components/intelligence/Toast.tsx
@@ -41,10 +41,10 @@ const TOAST_ICONS = {
 };
 
 const TOAST_STYLES = {
-  success: 'bg-neutral-0 border-sage-500 text-neutral-900',
-  error: 'bg-neutral-0 border-coral-500 text-neutral-900',
-  warning: 'bg-neutral-0 border-amber-500 text-neutral-900',
-  info: 'bg-neutral-0 border-primary-500 text-neutral-900',
+  success: 'bg-neutral-0 border-sage-500 text-content',
+  error: 'bg-neutral-0 border-coral-500 text-content',
+  warning: 'bg-neutral-0 border-amber-500 text-content',
+  info: 'bg-neutral-0 border-primary-500 text-content',
 };
 
 const TOAST_ICON_STYLES = {
@@ -105,7 +105,7 @@ export function Toast({ notification, onRemove }: ToastProps) {
         <div className="flex-1 min-w-0">
           <h4 className="text-sm font-medium">{notification.title}</h4>
           {notification.message && (
-            <p className="text-xs text-neutral-500 mt-1">{notification.message}</p>
+            <p className="text-xs text-content-muted mt-1">{notification.message}</p>
           )}
         </div>
 
@@ -121,7 +121,7 @@ export function Toast({ notification, onRemove }: ToastProps) {
         {/* Close button */}
         <button
           onClick={handleRemove}
-          className="flex-shrink-0 text-neutral-400 hover:text-neutral-600 transition-colors">
+          className="flex-shrink-0 text-content-faint hover:text-content-secondary transition-colors">
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               strokeLinecap="round"
diff --git a/app/src/components/intelligence/UserTaskComposer.tsx b/app/src/components/intelligence/UserTaskComposer.tsx
index c9a159118..1664eb345 100644
--- a/app/src/components/intelligence/UserTaskComposer.tsx
+++ b/app/src/components/intelligence/UserTaskComposer.tsx
@@ -95,23 +95,23 @@ export function UserTaskComposer({ onCreated, onClose }: UserTaskComposerProps)
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 px-4 py-6">
-      <section className="max-h-full w-full max-w-lg overflow-y-auto rounded-lg border border-stone-200 bg-white p-4 shadow-xl dark:border-neutral-800 dark:bg-neutral-900">
+      <section className="max-h-full w-full max-w-lg overflow-y-auto rounded-lg border border-line bg-surface p-4 shadow-xl">
         <div className="mb-3 flex items-start justify-between gap-3">
-          <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-50">
+          <h3 className="text-base font-semibold text-content">
             {t('intelligence.tasks.composer.title')}
           </h3>
           <button
             type="button"
             aria-label={t('common.cancel')}
             onClick={onClose}
-            className="flex h-7 w-7 flex-none items-center justify-center rounded-md text-stone-500 hover:bg-stone-100 hover:text-stone-800 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100">
+            className="flex h-7 w-7 flex-none items-center justify-center rounded-md text-content-muted hover:bg-surface-hover hover:text-content">
             <LuX className="h-4 w-4" />
           </button>
         </div>
 
         <div className="space-y-3 text-sm">
           <label className="block">
-            <span className="mb-1 block text-xs font-semibold text-stone-500 dark:text-neutral-400">
+            <span className="mb-1 block text-xs font-semibold text-content-muted">
               {t('intelligence.tasks.composer.titleLabel')}
             </span>
             <input
@@ -122,19 +122,19 @@ export function UserTaskComposer({ onCreated, onClose }: UserTaskComposerProps)
                 if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) handleSubmit();
               }}
               placeholder={t('intelligence.tasks.composer.titlePlaceholder')}
-              className="w-full rounded-md border border-stone-200 bg-white px-2 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-50"
+              className="w-full rounded-md border border-line bg-surface px-2 py-1.5 text-sm text-content dark:bg-surface-canvas"
             />
           </label>
 
           <div className="grid gap-3 sm:grid-cols-2">
             <label className="block">
-              <span className="mb-1 block text-xs font-semibold text-stone-500 dark:text-neutral-400">
+              <span className="mb-1 block text-xs font-semibold text-content-muted">
                 {t('intelligence.tasks.composer.statusLabel')}
               </span>
               <select
                 value={status}
                 onChange={e => setStatus(e.target.value as TaskBoardCardStatus)}
-                className="w-full rounded-md border border-stone-200 bg-white px-2 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-50">
+                className="w-full rounded-md border border-line bg-surface px-2 py-1.5 text-sm text-content dark:bg-surface-canvas">
                 {STATUS_OPTIONS.map(option => (
                   <option key={option.value} value={option.value}>
                     {t(option.labelKey)}
@@ -144,13 +144,13 @@ export function UserTaskComposer({ onCreated, onClose }: UserTaskComposerProps)
             </label>
 
             <label className="block">
-              <span className="mb-1 block text-xs font-semibold text-stone-500 dark:text-neutral-400">
+              <span className="mb-1 block text-xs font-semibold text-content-muted">
                 {t('intelligence.tasks.composer.attachLabel')}
               </span>
               <select
                 value={attachThreadId}
                 onChange={e => setAttachThreadId(e.target.value)}
-                className="w-full rounded-md border border-stone-200 bg-white px-2 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-50">
+                className="w-full rounded-md border border-line bg-surface px-2 py-1.5 text-sm text-content dark:bg-surface-canvas">
                 <option value="">{t('intelligence.tasks.composer.attachNone')}</option>
                 {attachableThreads.map(thread => (
                   <option key={thread.id} value={thread.id}>
@@ -162,19 +162,19 @@ export function UserTaskComposer({ onCreated, onClose }: UserTaskComposerProps)
           </div>
 
           <label className="block">
-            <span className="mb-1 block text-xs font-semibold text-stone-500 dark:text-neutral-400">
+            <span className="mb-1 block text-xs font-semibold text-content-muted">
               {t('intelligence.tasks.composer.objectiveLabel')}
             </span>
             <input
               value={objective}
               onChange={e => setObjective(e.target.value)}
               placeholder={t('intelligence.tasks.composer.objectivePlaceholder')}
-              className="w-full rounded-md border border-stone-200 bg-white px-2 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-50"
+              className="w-full rounded-md border border-line bg-surface px-2 py-1.5 text-sm text-content dark:bg-surface-canvas"
             />
           </label>
 
           <label className="block">
-            <span className="mb-1 block text-xs font-semibold text-stone-500 dark:text-neutral-400">
+            <span className="mb-1 block text-xs font-semibold text-content-muted">
               {t('intelligence.tasks.composer.notesLabel')}
             </span>
             <textarea
@@ -182,7 +182,7 @@ export function UserTaskComposer({ onCreated, onClose }: UserTaskComposerProps)
               onChange={e => setNotes(e.target.value)}
               rows={3}
               placeholder={t('intelligence.tasks.composer.notesPlaceholder')}
-              className="w-full resize-y rounded-md border border-stone-200 bg-white px-2 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-50"
+              className="w-full resize-y rounded-md border border-line bg-surface px-2 py-1.5 text-sm text-content dark:bg-surface-canvas"
             />
           </label>
 
@@ -192,13 +192,13 @@ export function UserTaskComposer({ onCreated, onClose }: UserTaskComposerProps)
               checked={assignToAgent && !attachThreadId}
               disabled={attachThreadId !== ''}
               onChange={e => setAssignToAgent(e.target.checked)}
-              className="mt-0.5 h-4 w-4 flex-none rounded border-stone-300 text-ocean-600 focus:ring-ocean-500 disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-950"
+              className="mt-0.5 h-4 w-4 flex-none rounded border-line-strong text-ocean-600 focus:ring-ocean-500 disabled:opacity-50 dark:border-neutral-600 dark:bg-surface-canvas"
             />
-            <span className="text-xs text-stone-600 dark:text-neutral-300">
-              <span className="font-semibold text-stone-700 dark:text-neutral-200">
+            <span className="text-xs text-content-secondary">
+              <span className="font-semibold text-content-secondary">
                 {t('intelligence.tasks.composer.assignAgentLabel')}
               </span>
-              <span className="mt-0.5 block text-stone-500 dark:text-neutral-400">
+              <span className="mt-0.5 block text-content-muted">
                 {t('intelligence.tasks.composer.assignAgentHint')}
               </span>
             </span>
diff --git a/app/src/components/intelligence/VaultHealthChecklist.tsx b/app/src/components/intelligence/VaultHealthChecklist.tsx
index 5f0c7ff0b..4877a6d3c 100644
--- a/app/src/components/intelligence/VaultHealthChecklist.tsx
+++ b/app/src/components/intelligence/VaultHealthChecklist.tsx
@@ -135,14 +135,12 @@ export function VaultHealthChecklist({ onToast, title }: VaultHealthChecklistPro
 
   return (
     <div
-      className="rounded-xl border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-4 space-y-3"
+      className="rounded-xl border border-line bg-surface p-4 space-y-3"
       data-testid="vault-health-checklist">
       <div className="flex items-start justify-between gap-2">
         <div>
-          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
-            {resolvedTitle}
-          </h3>
-          <p className="mt-1 text-xs text-stone-600 dark:text-neutral-300">
+          <h3 className="text-sm font-semibold text-content">{resolvedTitle}</h3>
+          <p className="mt-1 text-xs text-content-secondary">
             {t('vaultHealth.workspaceVault')} <code className="font-mono">memory_tree/content</code>
           </p>
         </div>
@@ -160,7 +158,7 @@ export function VaultHealthChecklist({ onToast, title }: VaultHealthChecklistPro
 
       {health?.content_root_abs ? (
         <code
-          className="block break-all rounded-md bg-stone-100 dark:bg-neutral-800 px-2 py-1 text-[11px] text-stone-700 dark:text-neutral-200"
+          className="block break-all rounded-md bg-surface-subtle px-2 py-1 text-[11px] text-content-secondary"
           data-testid="vault-health-path">
           {health.content_root_abs}
         </code>
@@ -179,7 +177,7 @@ export function VaultHealthChecklist({ onToast, title }: VaultHealthChecklistPro
           type="button"
           onClick={openObsidian}
           disabled={!health?.content_root_abs}
-          className="rounded-md border border-violet-300 dark:border-violet-500/40 bg-white dark:bg-neutral-800 px-3 py-1.5 text-xs font-semibold text-violet-700 dark:text-violet-300 disabled:opacity-50"
+          className="rounded-md border border-violet-300 dark:border-violet-500/40 bg-surface px-3 py-1.5 text-xs font-semibold text-violet-700 dark:text-violet-300 disabled:opacity-50"
           data-testid="vault-health-open-obsidian">
           {t('vaultHealth.openInObsidian')}
         </button>
@@ -193,7 +191,7 @@ export function VaultHealthChecklist({ onToast, title }: VaultHealthChecklistPro
       </div>
 
       {loading ? (
-        <div className="h-16 rounded-md bg-stone-100 dark:bg-neutral-800 animate-pulse" />
+        <div className="h-16 rounded-md bg-surface-subtle animate-pulse" />
       ) : error ? (
         <div
           className="rounded-md border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-xs text-coral-700 dark:text-coral-300"
@@ -217,9 +215,7 @@ export function VaultHealthChecklist({ onToast, title }: VaultHealthChecklistPro
               {!item.ok ? <p className="mt-1 leading-relaxed">{item.recovery}</p> : null}
             </div>
           ))}
-          <p
-            className="text-[11px] text-stone-600 dark:text-neutral-300"
-            data-testid="vault-health-last-sync">
+          <p className="text-[11px] text-content-secondary" data-testid="vault-health-last-sync">
             {t('vaultHealth.lastSync')} {formatRelativeTime(health?.last_sync_ms ?? 0, t)}
           </p>
         </div>
diff --git a/app/src/components/intelligence/WhatsAppMemorySection.tsx b/app/src/components/intelligence/WhatsAppMemorySection.tsx
index e98f607ec..79c5a1d2a 100644
--- a/app/src/components/intelligence/WhatsAppMemorySection.tsx
+++ b/app/src/components/intelligence/WhatsAppMemorySection.tsx
@@ -48,15 +48,13 @@ export function WhatsAppMemorySection({ pollIntervalMs = 30000 }: WhatsAppMemory
 
   return (
     <div
-      className="rounded-xl border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3 shadow-sm"
+      className="rounded-xl border border-line-subtle bg-surface px-4 py-3 shadow-sm"
       data-testid="whatsapp-memory-section">
       <div className="flex items-center justify-between gap-3">
         <div className="flex items-center gap-2 min-w-0">
           <WhatsAppIcon />
-          <span className="text-sm font-semibold text-stone-800 dark:text-neutral-100">
-            {t('whatsapp.title')}
-          </span>
-          <span className="text-xs text-stone-500 dark:text-neutral-400">
+          <span className="text-sm font-semibold text-content">{t('whatsapp.title')}</span>
+          <span className="text-xs text-content-muted">
             {chatCount.toLocaleString()}{' '}
             {chatCount !== 1 ? t('whatsapp.chatsSynced') : t('whatsapp.chatSynced')}
             {lastSyncTs !== null && <> · {relativeTime(lastSyncTs, t)}</>}
diff --git a/app/src/components/intelligence/WorkflowRunDetail.tsx b/app/src/components/intelligence/WorkflowRunDetail.tsx
index 8ddc15e6d..6b5909ae5 100644
--- a/app/src/components/intelligence/WorkflowRunDetail.tsx
+++ b/app/src/components/intelligence/WorkflowRunDetail.tsx
@@ -31,16 +31,14 @@ const log = debug('intelligence:workflow-detail');
 
 /** Accent classes per run status (semantic palette from tailwind.config.js). */
 const RUN_STATUS_ACCENT: Record<WorkflowRunStatus, string> = {
-  pending:
-    'border-stone-200 bg-stone-50 text-stone-600 dark:border-neutral-700 dark:bg-neutral-800/60 dark:text-neutral-300',
+  pending: 'border-line bg-surface-muted text-content-secondary',
   running:
     'border-ocean-200 bg-ocean-50 text-ocean-700 dark:border-ocean-500/30 dark:bg-ocean-500/10 dark:text-ocean-300',
   completed:
     'border-sage-200 bg-sage-50 text-sage-700 dark:border-sage-500/30 dark:bg-sage-500/10 dark:text-sage-300',
   failed:
     'border-coral-200 bg-coral-50 text-coral-700 dark:border-coral-500/30 dark:bg-coral-500/10 dark:text-coral-300',
-  cancelled:
-    'border-stone-200 bg-stone-50 text-stone-600 dark:border-neutral-700 dark:bg-neutral-800/60 dark:text-neutral-300',
+  cancelled: 'border-line bg-surface-muted text-content-secondary',
   interrupted:
     'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300',
 };
@@ -63,7 +61,7 @@ const PHASE_STATUS_KEY: Record<WorkflowPhaseStatus, string> = {
 
 /** Glyph per phase status — color comes from the surrounding classes. */
 const PHASE_STATUS_DOT: Record<WorkflowPhaseStatus, string> = {
-  pending: 'bg-stone-300 dark:bg-neutral-600',
+  pending: 'bg-surface-strong',
   running: 'bg-ocean-500 animate-pulse',
   completed: 'bg-sage-500',
   failed: 'bg-coral-500',
@@ -116,9 +114,7 @@ export const WorkflowRunDetail: React.FC<Props> = ({
             )}
             {t(RUN_STATUS_KEY[run.status])}
           </span>
-          <span className="font-mono text-[11px] text-stone-400 dark:text-neutral-500">
-            {run.id}
-          </span>
+          <span className="font-mono text-[11px] text-content-faint">{run.id}</span>
         </div>
 
         <div className="flex items-center gap-2">
@@ -145,7 +141,7 @@ export const WorkflowRunDetail: React.FC<Props> = ({
                 log('resume id=%s', run.id);
                 onResume(run.id);
               }}
-              className="rounded-lg border border-ocean-300 bg-white px-3 py-1.5 text-xs font-medium text-ocean-700 hover:bg-ocean-50 disabled:opacity-50 dark:border-ocean-700 dark:bg-neutral-900 dark:text-ocean-300 dark:hover:bg-ocean-900/40">
+              className="rounded-lg border border-ocean-300 bg-surface px-3 py-1.5 text-xs font-medium text-ocean-700 hover:bg-ocean-50 disabled:opacity-50 dark:border-ocean-700 dark:text-ocean-300 dark:hover:bg-ocean-900/40">
               {t('orchestration.detail.resume')}
             </button>
           )}
@@ -166,7 +162,7 @@ export const WorkflowRunDetail: React.FC<Props> = ({
             <li
               key={name}
               data-testid={`workflow-phase-${name}`}
-              className="rounded-xl border border-stone-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+              className="rounded-xl border border-line bg-surface">
               <button
                 type="button"
                 onClick={() => toggle(name)}
@@ -175,16 +171,16 @@ export const WorkflowRunDetail: React.FC<Props> = ({
                   <span
                     className={`h-2 w-2 flex-none rounded-full ${PHASE_STATUS_DOT[state.status]}`}
                   />
-                  <span className="truncate text-sm font-medium text-stone-800 dark:text-neutral-100">
+                  <span className="truncate text-sm font-medium text-content">
                     {phaseDef?.name ?? name}
                   </span>
                   <span
                     data-testid={`workflow-phase-status-${name}`}
-                    className="rounded-md border border-stone-200 px-1.5 py-0.5 text-[10px] font-medium text-stone-500 dark:border-neutral-700 dark:text-neutral-400">
+                    className="rounded-md border border-line px-1.5 py-0.5 text-[10px] font-medium text-content-muted">
                     {t(PHASE_STATUS_KEY[state.status])}
                   </span>
                 </span>
-                <span className="flex flex-none items-center gap-2 text-[11px] text-stone-400 dark:text-neutral-500">
+                <span className="flex flex-none items-center gap-2 text-[11px] text-content-faint">
                   {hasOutputs && (
                     <span data-testid={`workflow-phase-count-${name}`}>
                       {state.outputs.length} {t('orchestration.detail.agents')}
@@ -195,9 +191,7 @@ export const WorkflowRunDetail: React.FC<Props> = ({
               </button>
 
               {phaseDef?.description && (
-                <p className="px-3 pb-1 text-xs text-stone-500 dark:text-neutral-400">
-                  {phaseDef.description}
-                </p>
+                <p className="px-3 pb-1 text-xs text-content-muted">{phaseDef.description}</p>
               )}
 
               {state.status === 'failed' && state.reason && (
@@ -212,17 +206,17 @@ export const WorkflowRunDetail: React.FC<Props> = ({
                   {state.outputs.map((out, idx) => (
                     <li
                       key={`${out.orchestrationId}-${idx}`}
-                      className="rounded-lg border border-stone-100 bg-stone-50 p-2 dark:border-neutral-800 dark:bg-neutral-800/40">
+                      className="rounded-lg border border-line-subtle bg-surface-muted p-2">
                       <div className="flex flex-wrap items-center gap-1.5">
-                        <span className="text-xs font-medium text-stone-700 dark:text-neutral-200">
+                        <span className="text-xs font-medium text-content-secondary">
                           {out.agentId}
                         </span>
-                        <span className="font-mono text-[10px] text-stone-400 dark:text-neutral-500">
+                        <span className="font-mono text-[10px] text-content-faint">
                           {out.orchestrationId}
                         </span>
                       </div>
                       {out.output && (
-                        <p className="mt-1 whitespace-pre-wrap break-words text-xs leading-snug text-stone-600 dark:text-neutral-300">
+                        <p className="mt-1 whitespace-pre-wrap break-words text-xs leading-snug text-content-secondary">
                           {out.output}
                         </p>
                       )}
@@ -237,9 +231,7 @@ export const WorkflowRunDetail: React.FC<Props> = ({
 
       {/* Child agent refs summary (full run-level list) */}
       {run.childRunIds.length > 0 && (
-        <div
-          className="text-[11px] text-stone-400 dark:text-neutral-500"
-          data-testid="workflow-child-refs">
+        <div className="text-[11px] text-content-faint" data-testid="workflow-child-refs">
           {t('orchestration.detail.childRefs')}: {run.childRunIds.length}
         </div>
       )}
@@ -252,7 +244,7 @@ export const WorkflowRunDetail: React.FC<Props> = ({
           <p className="mb-1 text-xs font-semibold text-sage-800 dark:text-sage-200">
             {t('orchestration.detail.synthesis')}
           </p>
-          <p className="whitespace-pre-wrap break-words text-sm leading-snug text-stone-700 dark:text-neutral-200">
+          <p className="whitespace-pre-wrap break-words text-sm leading-snug text-content-secondary">
             {run.summary}
           </p>
         </div>
diff --git a/app/src/components/intelligence/WorkflowsTab.tsx b/app/src/components/intelligence/WorkflowsTab.tsx
index a21135a01..117bac9ca 100644
--- a/app/src/components/intelligence/WorkflowsTab.tsx
+++ b/app/src/components/intelligence/WorkflowsTab.tsx
@@ -136,20 +136,16 @@ export default function WorkflowsTab({ asSettingsPanel = false }: WorkflowsTabPr
       {loading && workflows.length === 0 ? (
         <div className="space-y-2 animate-pulse" data-testid="workflows-loading">
           {[1, 2, 3].map(i => (
-            <div key={i} className="h-20 rounded-2xl bg-stone-100 dark:bg-neutral-800" />
+            <div key={i} className="h-20 rounded-2xl bg-surface-subtle" />
           ))}
         </div>
       ) : null}
 
       {/* Empty state */}
       {isEmpty ? (
-        <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-10 text-center shadow-soft animate-fade-up">
-          <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
-            {t('workflows.empty.title')}
-          </h2>
-          <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
-            {t('workflows.empty.body')}
-          </p>
+        <div className="rounded-2xl border border-line bg-surface p-10 text-center shadow-soft animate-fade-up">
+          <h2 className="text-sm font-semibold text-content">{t('workflows.empty.title')}</h2>
+          <p className="mt-1 text-xs text-content-muted">{t('workflows.empty.body')}</p>
           <Button
             variant="primary"
             size="md"
@@ -163,7 +159,7 @@ export default function WorkflowsTab({ asSettingsPanel = false }: WorkflowsTabPr
       {/* Workflow list */}
       {workflows.length > 0 ? (
         <div
-          className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 shadow-soft animate-fade-up"
+          className="rounded-2xl border border-line bg-surface p-3 shadow-soft animate-fade-up"
           data-testid="workflows-list">
           <div className="space-y-2">
             {workflows.map(wf => {
@@ -175,12 +171,12 @@ export default function WorkflowsTab({ asSettingsPanel = false }: WorkflowsTabPr
                     ? t('scope.project')
                     : t('scope.legacy');
               const scopeColor = wf.legacy
-                ? 'text-stone-600 dark:text-neutral-300'
+                ? 'text-content-secondary'
                 : wf.scope === 'user'
                   ? 'text-sage-600'
                   : wf.scope === 'project'
                     ? 'text-amber-600'
-                    : 'text-stone-600 dark:text-neutral-300';
+                    : 'text-content-secondary';
               const canUninstall = wf.scope === 'user' && !wf.legacy;
               return (
                 <UnifiedSkillCard
@@ -287,9 +283,7 @@ export default function WorkflowsTab({ asSettingsPanel = false }: WorkflowsTabPr
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between gap-2">
-        <p className="min-w-0 text-xs text-stone-500 dark:text-neutral-400">
-          {t('workflows.subtitle')}
-        </p>
+        <p className="min-w-0 text-xs text-content-muted">{t('workflows.subtitle')}</p>
         <div className="flex flex-shrink-0 items-center gap-2">{newWorkflowButton}</div>
       </div>
       {body}
diff --git a/app/src/components/ios/MobileTabBar.tsx b/app/src/components/ios/MobileTabBar.tsx
index c608ac6b6..b459884d0 100644
--- a/app/src/components/ios/MobileTabBar.tsx
+++ b/app/src/components/ios/MobileTabBar.tsx
@@ -92,7 +92,7 @@ const MobileTabBar = () => {
             type="button"
             onClick={() => navigate(tab.path)}
             className={`flex flex-col items-center justify-center gap-1 flex-1 py-2 transition-colors ${
-              active ? 'text-white' : 'text-neutral-400'
+              active ? 'text-white' : 'text-content-faint'
             }`}
             aria-current={active ? 'page' : undefined}
             aria-label={tab.label}>
diff --git a/app/src/components/keyring/KeyringConsentOverlay.tsx b/app/src/components/keyring/KeyringConsentOverlay.tsx
index 7994aa0c2..9b4c137d2 100644
--- a/app/src/components/keyring/KeyringConsentOverlay.tsx
+++ b/app/src/components/keyring/KeyringConsentOverlay.tsx
@@ -84,10 +84,10 @@ const KeyringConsentOverlay = () => {
           </h2>
         </div>
 
-        <p className="text-sm text-stone-300">{t('keyring.consent.description')}</p>
+        <p className="text-sm text-content-faint">{t('keyring.consent.description')}</p>
 
         {failureReason && (
-          <p className="mt-2 text-xs text-stone-400">
+          <p className="mt-2 text-xs text-content-faint">
             {t('keyring.consent.reasonPrefix')} {failureReason}
           </p>
         )}
@@ -100,8 +100,10 @@ const KeyringConsentOverlay = () => {
         </button>
 
         {showDetails && (
-          <div className="mt-2 rounded-lg bg-stone-800/60 p-3 text-xs text-stone-400 leading-relaxed">
-            <p className="font-medium text-stone-300 mb-1">{t('keyring.consent.tradeoffTitle')}</p>
+          <div className="mt-2 rounded-lg bg-stone-800/60 p-3 text-xs text-content-faint leading-relaxed">
+            <p className="font-medium text-content-faint mb-1">
+              {t('keyring.consent.tradeoffTitle')}
+            </p>
             <p>{t('keyring.consent.tradeoffBody')}</p>
           </div>
         )}
@@ -127,7 +129,7 @@ const KeyringConsentOverlay = () => {
             type="button"
             onClick={handleDecline}
             disabled={isConsenting || isRetrying}
-            className="rounded-lg border border-stone-700 px-4 py-2 text-sm text-stone-400 hover:bg-stone-800 disabled:opacity-60">
+            className="rounded-lg border border-stone-700 px-4 py-2 text-sm text-content-faint hover:bg-stone-800 disabled:opacity-60">
             {t('keyring.consent.declineButton')}
           </button>
         </div>
diff --git a/app/src/components/layout/ChipTabs.tsx b/app/src/components/layout/ChipTabs.tsx
index 02d56e9f7..899a37908 100644
--- a/app/src/components/layout/ChipTabs.tsx
+++ b/app/src/components/layout/ChipTabs.tsx
@@ -53,9 +53,12 @@ export interface ChipTabsProps<T extends string> {
 const DEFAULT_ROW_CLASS = 'flex flex-wrap gap-1.5 px-4 pt-3 pb-3';
 
 const baseChipClass = 'rounded-full px-3 py-1 text-xs font-medium transition-colors';
-const activeChipClass = 'bg-stone-800 text-white dark:bg-neutral-100 dark:text-neutral-900';
+// Inverse pill built from theme tokens: the foreground colour becomes the fill
+// and the surface colour becomes the text, so the selected chip stays
+// high-contrast and on-theme under any palette (light, dark, or custom).
+const activeChipClass = 'bg-content text-surface';
 const inactiveChipClass =
-  'bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 text-stone-600 dark:text-neutral-300 hover:bg-stone-50 dark:hover:bg-neutral-800';
+  'bg-surface border border-line text-content-secondary hover:bg-surface-hover';
 
 /**
  * Standard pill/chip tab bar — the look first shipped on Settings → Account and
diff --git a/app/src/components/layout/PanelHeader.tsx b/app/src/components/layout/PanelHeader.tsx
index 6e4c9a987..297714cc4 100644
--- a/app/src/components/layout/PanelHeader.tsx
+++ b/app/src/components/layout/PanelHeader.tsx
@@ -24,9 +24,9 @@ export interface PanelHeaderProps {
 // Horizontal padding matches the canonical body padding (`p-4`) so the
 // description lines up with the content beneath it — no extra indent.
 export const DEFAULT_PANEL_HEADER_CLASS = 'px-4 pt-4 pb-3';
-// Slightly off the white/neutral-900 body so the fixed header reads as its own
-// band (paired with the body's hairline top border).
-export const DEFAULT_PANEL_HEADER_BG = 'bg-stone-50 dark:bg-neutral-800/40';
+// Slightly off the body surface so the fixed header reads as its own band
+// (paired with the body's hairline top border).
+export const DEFAULT_PANEL_HEADER_BG = 'bg-surface-muted';
 
 /**
  * The fixed header band shared by {@link PanelScaffold} (panel header) and
@@ -56,18 +56,14 @@ export default function PanelHeader({
           <div className="flex min-w-0 items-center gap-2">
             {leading}
             {title != null && (
-              <h2 className="truncate text-base font-semibold text-stone-900 dark:text-neutral-100">
-                {title}
-              </h2>
+              <h2 className="truncate text-base font-semibold text-content">{title}</h2>
             )}
           </div>
           {action != null && <div className="flex-shrink-0">{action}</div>}
         </div>
       )}
 
-      {description != null && (
-        <p className="mt-0.5 text-sm text-stone-500 dark:text-neutral-400">{description}</p>
-      )}
+      {description != null && <p className="mt-0.5 text-sm text-content-muted">{description}</p>}
 
       {children}
     </div>
diff --git a/app/src/components/layout/PanelScaffold.tsx b/app/src/components/layout/PanelScaffold.tsx
index 360216758..cbe1d4558 100644
--- a/app/src/components/layout/PanelScaffold.tsx
+++ b/app/src/components/layout/PanelScaffold.tsx
@@ -40,7 +40,7 @@ export interface PanelScaffoldProps {
 }
 
 const DEFAULT_CONTENT_CLASS = 'p-4 space-y-5';
-const BODY_BORDER_CLASS = 'border-t border-stone-200 dark:border-neutral-800';
+const BODY_BORDER_CLASS = 'border-t border-line';
 
 /**
  * Standard scaffold: a fixed header ({@link PanelHeader}) carrying an optional
diff --git a/app/src/components/layout/TwoPaneNav.tsx b/app/src/components/layout/TwoPaneNav.tsx
index d9d666a27..e37e78327 100644
--- a/app/src/components/layout/TwoPaneNav.tsx
+++ b/app/src/components/layout/TwoPaneNav.tsx
@@ -43,7 +43,7 @@ export default function TwoPaneNav({
           <div key={group.label ?? `__group-${groupIndex}`}>
             {group.label && (
               <div className="px-2 pb-0.5 pt-2.5">
-                <span className="text-[10px] font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-content-muted">
                   {group.label}
                 </span>
               </div>
@@ -60,14 +60,12 @@ export default function TwoPaneNav({
                       onClick={() => onSelect(item.value)}
                       className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors ${
                         active
-                          ? 'bg-stone-100 font-medium text-stone-900 dark:bg-neutral-800 dark:text-neutral-100'
-                          : 'text-stone-600 hover:bg-stone-50 hover:text-stone-900 dark:text-neutral-300 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-100'
+                          ? 'bg-surface-subtle font-medium text-content'
+                          : 'text-content-secondary hover:bg-surface-hover hover:text-content'
                       }`}>
                       <span
                         className={`shrink-0 ${
-                          active
-                            ? 'text-primary-600 dark:text-primary-400'
-                            : 'text-stone-400 dark:text-neutral-500'
+                          active ? 'text-primary-600 dark:text-primary-400' : 'text-content-faint'
                         }`}>
                         {item.icon ?? null}
                       </span>
diff --git a/app/src/components/layout/TwoPanelLayout.tsx b/app/src/components/layout/TwoPanelLayout.tsx
index 37415e9c3..8e2fcb148 100644
--- a/app/src/components/layout/TwoPanelLayout.tsx
+++ b/app/src/components/layout/TwoPanelLayout.tsx
@@ -103,8 +103,7 @@ export interface TwoPanelLayoutProps {
 }
 
 /** Default card look shared by both panes. */
-export const DEFAULT_PANE_CLASS =
-  'bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800';
+export const DEFAULT_PANE_CLASS = 'bg-surface rounded-2xl shadow-soft border border-line';
 
 const DEFAULT_MIN_WIDTH = 180;
 const DEFAULT_MAX_WIDTH = 480;
@@ -279,7 +278,7 @@ export default function TwoPanelLayout({
               seamless
                 ? // Flush hairline seam: 1px visible line, wider invisible hit
                   // area, highlights on hover/focus.
-                  'group relative w-px flex-shrink-0 cursor-col-resize select-none self-stretch bg-stone-200 dark:bg-neutral-800 focus:outline-none'
+                  'group relative w-px flex-shrink-0 cursor-col-resize select-none self-stretch bg-surface-strong focus:outline-none'
                 : `group relative flex flex-shrink-0 cursor-col-resize select-none items-center justify-center self-stretch focus:outline-none ${
                     // Tighter gutter between panes when there's no visible handle.
                     showDividerHandle ? 'mx-1 w-3' : 'mx-0 w-1.5'
@@ -316,7 +315,7 @@ export default function TwoPanelLayout({
           onClick={() => dispatch(setSidebarVisible({ id, visible: true }))}
           title={t('layout.showSidebar')}
           aria-label={t('layout.showSidebar')}
-          className="flex-shrink-0 w-6 self-stretch flex items-center justify-center text-stone-400 dark:text-neutral-500 hover:text-primary-500 hover:bg-stone-50 dark:hover:bg-neutral-800/60 transition-colors">
+          className="flex-shrink-0 w-6 self-stretch flex items-center justify-center text-content-faint hover:text-primary-500 hover:bg-surface-hover transition-colors">
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
           </svg>
diff --git a/app/src/components/layout/shell/AppSidebar.tsx b/app/src/components/layout/shell/AppSidebar.tsx
index 59b84bfd7..c07b6e6ec 100644
--- a/app/src/components/layout/shell/AppSidebar.tsx
+++ b/app/src/components/layout/shell/AppSidebar.tsx
@@ -48,8 +48,8 @@ export default function AppSidebar() {
   };
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-white dark:bg-neutral-900">
-      <div className="flex-shrink-0 border-b border-stone-200/70 dark:border-neutral-800/70">
+    <div className="flex h-full min-h-0 flex-col bg-surface">
+      <div className="flex-shrink-0 border-b border-line/70" data-tauri-drag-region>
         <SidebarHeader />
       </div>
       <div className="flex-shrink-0">
@@ -58,10 +58,10 @@ export default function AppSidebar() {
       {/* Persistent app switcher — sticks across routes so the agent + connected
           apps are always one click away. Selecting one routes to /chat where the
           provider webview / agent chat actually render. */}
-      <div className="flex-shrink-0 border-t border-stone-200/70 dark:border-neutral-800/70">
+      <div className="flex-shrink-0 border-t border-line/70">
         <SidebarAppRail />
       </div>
-      <div className="min-h-0 flex-1 overflow-y-auto border-t border-stone-200/70 dark:border-neutral-800/70">
+      <div className="min-h-0 flex-1 overflow-y-auto border-t border-line/70">
         {/* Flex column so routes that project more than one region (e.g. Chat's
             app rail above its thread list) can order them via Tailwind `order-*`. */}
         <SidebarSlotOutlet className="flex h-full flex-col" />
@@ -75,20 +75,20 @@ export default function AppSidebar() {
         onClick={handleFeedbackClick}
         title={t('nav.feedback')}
         aria-current={feedbackActive ? 'page' : undefined}
-        className={`group flex flex-shrink-0 items-center justify-center gap-2 border-t border-stone-200/70 px-3 py-1 text-[11px] transition-colors cursor-pointer dark:border-neutral-800/70 ${
+        className={`group flex flex-shrink-0 items-center justify-center gap-2 border-t border-line/70 px-3 py-1 text-[11px] transition-colors cursor-pointer dark:border-line/70 ${
           feedbackActive
-            ? 'bg-white text-stone-900 font-medium dark:bg-neutral-800 dark:text-neutral-100'
-            : 'text-stone-500 hover:bg-stone-200/70 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200'
+            ? 'bg-surface text-content font-medium'
+            : 'text-content-muted hover:bg-surface-strong/70 hover:text-content-secondary dark:hover:bg-surface-muted/60'
         }`}>
         <NavIcon id="feedback" className="h-3.5 w-3.5 flex-shrink-0" />
         <span className="min-w-0 truncate">{t('nav.feedback')}</span>
       </button>
       {/* App-wide footer: connectivity status + build/version, pinned to the
           bottom of the sidebar. */}
-      <div className="flex flex-shrink-0 items-center justify-center gap-2 border-t border-stone-200 px-2 py-0.5 dark:border-neutral-800">
+      <div className="flex flex-shrink-0 items-center justify-center gap-2 border-t border-line px-2 py-0.5">
         <ConnectionIndicator />
         &middot;
-        <span className="text-[10px] text-stone-400 dark:text-neutral-500">
+        <span className="text-[10px] text-content-faint">
           {t('settings.betaBuild').replace('{version}', APP_VERSION)}
         </span>
       </div>
diff --git a/app/src/components/layout/shell/CollapsedNavRail.test.tsx b/app/src/components/layout/shell/CollapsedNavRail.test.tsx
index f9281b4c0..fec8daaa5 100644
--- a/app/src/components/layout/shell/CollapsedNavRail.test.tsx
+++ b/app/src/components/layout/shell/CollapsedNavRail.test.tsx
@@ -33,6 +33,8 @@ describe('CollapsedNavRail', () => {
     ]) {
       expect(screen.getByRole('button', { name: key })).toBeInTheDocument();
     }
+    // The wallet shortcut was removed from the rail.
+    expect(screen.queryByRole('button', { name: 'nav.wallet' })).not.toBeInTheDocument();
   });
 
   it('shortcuts button opens the keyboard-shortcuts help directory', () => {
@@ -97,7 +99,7 @@ describe('CollapsedNavRail', () => {
     );
   });
 
-  it('marks Settings active on the wallet sub-page (no separate wallet rail item)', () => {
+  it('marks Settings active on the wallet sub-page (wallet rail removed)', () => {
     renderWithProviders(<CollapsedNavRail />, { initialEntries: ['/settings/wallet-balances'] });
     expect(screen.getByRole('button', { name: 'nav.settings' })).toHaveAttribute(
       'aria-current',
diff --git a/app/src/components/layout/shell/CollapsedNavRail.tsx b/app/src/components/layout/shell/CollapsedNavRail.tsx
index ef74a57fc..d4ae75cce 100644
--- a/app/src/components/layout/shell/CollapsedNavRail.tsx
+++ b/app/src/components/layout/shell/CollapsedNavRail.tsx
@@ -64,8 +64,8 @@ export default function CollapsedNavRail() {
           aria-current={homeActive ? 'page' : undefined}
           className={`${RAIL_BTN} ${
             homeActive
-              ? 'bg-white text-stone-900 shadow-sm dark:bg-neutral-800 dark:text-neutral-100'
-              : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200'
+              ? 'bg-surface text-content shadow-sm'
+              : 'text-content-muted hover:bg-surface-hover hover:text-content-secondary'
           }`}>
           <NavIcon id="home" className="h-5 w-5" />
         </button>
@@ -79,7 +79,7 @@ export default function CollapsedNavRail() {
           onClick={() => registry.runAction('meta.keyboard-shortcuts')}
           aria-label={t('shortcuts.title')}
           data-analytics-id="collapsed-rail-shortcuts"
-          className={`${RAIL_BTN} text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200`}>
+          className={`${RAIL_BTN} text-content-muted hover:bg-surface-hover hover:text-content-secondary`}>
           <NavIcon id="keyboard" className="h-5 w-5" />
         </button>
       </Tooltip>
@@ -98,12 +98,12 @@ export default function CollapsedNavRail() {
               aria-current={active ? 'page' : undefined}
               className={`${RAIL_BTN} ${
                 active
-                  ? 'bg-white text-stone-900 shadow-sm dark:bg-neutral-800 dark:text-neutral-100'
-                  : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200'
+                  ? 'bg-surface text-content shadow-sm'
+                  : 'text-content-muted hover:bg-surface-hover hover:text-content-secondary'
               }`}>
               <NavIcon id={tab.id} className="h-5 w-5" />
               {showBadge && (
-                <span className="absolute -right-0.5 -top-0.5 flex h-[13px] min-w-[13px] items-center justify-center rounded-full bg-coral-500 px-1 text-[9px] font-bold leading-none text-white">
+                <span className="absolute -right-0.5 -top-0.5 flex h-[13px] min-w-[13px] items-center justify-center rounded-full bg-coral-500 px-1 text-[9px] font-bold leading-none text-content-inverted">
                   {unreadCount > 9 ? '9+' : unreadCount}
                 </span>
               )}
@@ -123,8 +123,8 @@ export default function CollapsedNavRail() {
         data-analytics-id="collapsed-rail-settings"
         className={`${RAIL_BTN} ${
           settingsActive
-            ? 'bg-white text-stone-900 shadow-sm dark:bg-neutral-800 dark:text-neutral-100'
-            : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200'
+            ? 'bg-surface text-content shadow-sm'
+            : 'text-content-muted hover:bg-surface-hover hover:text-content-secondary'
         }`}>
         <NavIcon id="settings" className="h-5 w-5" />
       </button>
diff --git a/app/src/components/layout/shell/RootShellLayout.tsx b/app/src/components/layout/shell/RootShellLayout.tsx
index e8d52a433..f0cacc6a6 100644
--- a/app/src/components/layout/shell/RootShellLayout.tsx
+++ b/app/src/components/layout/shell/RootShellLayout.tsx
@@ -168,7 +168,7 @@ export default function RootShellLayout({ sidebar, children }: RootShellLayoutPr
             onPointerDown={onPointerDown}
             onKeyDown={onDividerKeyDown}
             title={t('layout.resizeSidebar')}
-            className="group relative w-px flex-shrink-0 cursor-col-resize select-none self-stretch bg-stone-200 dark:bg-neutral-800 focus:outline-none">
+            className="group relative w-px flex-shrink-0 cursor-col-resize select-none self-stretch bg-surface-strong focus:outline-none">
             <span className="absolute inset-y-0 -left-1 -right-1 z-10" />
             <span className="absolute inset-0 transition-colors group-hover:bg-primary-400 group-focus:bg-primary-500" />
           </div>
@@ -180,7 +180,7 @@ export default function RootShellLayout({ sidebar, children }: RootShellLayoutPr
           native CEF webview glued to the content's bounds, which composites
           above the HTML layer — starts to its right and never covers it. */}
       {!isOpen && (
-        <div className="flex w-14 flex-none flex-col items-center gap-0.5 border-r border-stone-200 bg-white pt-2 dark:border-neutral-800 dark:bg-neutral-900">
+        <div className="flex w-14 flex-none flex-col items-center gap-0.5 border-r border-line bg-surface pt-2">
           <Tooltip label={t('layout.showSidebar')}>
             <button
               type="button"
@@ -188,7 +188,7 @@ export default function RootShellLayout({ sidebar, children }: RootShellLayoutPr
               data-testid="root-shell-reopen"
               data-analytics-id="root-shell-reopen-sidebar"
               aria-label={t('layout.showSidebar')}
-              className="flex h-8 w-8 items-center justify-center rounded-lg text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200">
+              className="flex h-8 w-8 items-center justify-center rounded-lg text-content-muted transition-colors hover:bg-surface-hover hover:text-content-secondary">
               <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
@@ -200,7 +200,7 @@ export default function RootShellLayout({ sidebar, children }: RootShellLayoutPr
             </button>
           </Tooltip>
           {/* Keep the primary nav reachable while collapsed: an icon-only rail. */}
-          <div className="mt-1 w-full border-t border-stone-200/70 pt-1 dark:border-neutral-800/70">
+          <div className="mt-1 w-full border-t border-line/70 pt-1 dark:border-line/70">
             <CollapsedNavRail />
           </div>
         </div>
diff --git a/app/src/components/layout/shell/SidebarAppRail.tsx b/app/src/components/layout/shell/SidebarAppRail.tsx
index 7f612420d..3024308b9 100644
--- a/app/src/components/layout/shell/SidebarAppRail.tsx
+++ b/app/src/components/layout/shell/SidebarAppRail.tsx
@@ -62,13 +62,13 @@ const RailButton = ({
     // tooltip isn't trapped under a later sibling's stacking context.
     className={`group relative flex h-9 w-9 flex-none items-center justify-center rounded-lg transition-all hover:z-50 ${
       active
-        ? 'bg-primary-50 ring-2 ring-primary-500'
-        : 'hover:bg-stone-100 dark:hover:bg-neutral-800/60 hover:scale-105'
+        ? 'bg-primary-500/15 ring-2 ring-primary-500'
+        : 'hover:bg-surface-hover hover:scale-105'
     }`}
     aria-label={tooltip}>
     {children}
     {badge && badge > 0 ? (
-      <span className="absolute -right-0.5 -top-0.5 flex min-w-[16px] items-center justify-center rounded-full bg-coral-500 px-1 text-[9px] font-semibold text-white">
+      <span className="absolute -right-0.5 -top-0.5 flex min-w-[16px] items-center justify-center rounded-full bg-coral-500 px-1 text-[9px] font-semibold text-content-inverted">
         {badge > 99 ? '99+' : badge}
       </span>
     ) : null}
@@ -226,13 +226,13 @@ export default function SidebarAppRail() {
       <div
         data-testid="sidebar-app-rail"
         data-analytics-id="sidebar-app-rail"
-        className="scrollbar-hide flex flex-none items-center gap-1.5 overflow-x-auto overflow-y-hidden border-b border-stone-100 px-2 py-2 dark:border-neutral-800">
+        className="scrollbar-hide flex flex-none items-center gap-1.5 overflow-x-auto overflow-y-hidden border-b border-line-subtle px-2 py-2">
         <RailButton
           active={isAgentSelected}
           onClick={selectAgent}
           tooltip={t('accounts.agent')}
           analyticsId="sidebar-app-rail-agent">
-          <AgentIcon className="h-5 w-5 rounded-md bg-white dark:bg-neutral-200" />
+          <AgentIcon className="h-5 w-5 rounded-md bg-surface dark:bg-neutral-200" />
         </RailButton>
 
         {accounts.map(acct => (
@@ -260,7 +260,7 @@ export default function SidebarAppRail() {
           }}
           data-analytics-id="sidebar-app-rail-add-account"
           data-testid="accounts-add-button"
-          className={`group relative flex h-9 flex-none items-center justify-center gap-1.5 rounded-xl border border-dashed border-stone-300 text-stone-400 transition-colors hover:bg-stone-50 hover:text-stone-600 dark:border-neutral-700 dark:text-neutral-500 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-300 ${
+          className={`group relative flex h-9 flex-none items-center justify-center gap-1.5 rounded-xl border border-dashed border-line-strong text-content-faint transition-colors hover:bg-surface-hover hover:text-content-secondary ${
             showAddLabel ? 'w-auto px-2.5' : 'w-9'
           }`}
           aria-label={t('accounts.addApps')}
@@ -283,14 +283,14 @@ export default function SidebarAppRail() {
 
       {ctxMenu && (
         <div
-          className="fixed z-50 min-w-[140px] rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 py-1 shadow-strong"
+          className="fixed z-50 min-w-[140px] rounded-lg border border-line bg-surface py-1 shadow-strong"
           style={{ left: ctxMenu.x, top: ctxMenu.y }}
           onMouseDown={e => e.stopPropagation()}>
           <button
             type="button"
             data-analytics-id="sidebar-app-rail-disconnect-account"
             onClick={() => void handleLogout(ctxMenu.accountId)}
-            className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-coral-600 hover:bg-stone-100 dark:hover:bg-neutral-800/60">
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-coral-600 hover:bg-surface-hover">
             <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
diff --git a/app/src/components/layout/shell/SidebarHeader.test.tsx b/app/src/components/layout/shell/SidebarHeader.test.tsx
index 505fa962f..2d113f91e 100644
--- a/app/src/components/layout/shell/SidebarHeader.test.tsx
+++ b/app/src/components/layout/shell/SidebarHeader.test.tsx
@@ -27,6 +27,17 @@ describe('SidebarHeader', () => {
     expect(screen.getByRole('button', { name: 'shortcuts.title' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'nav.settings' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'chat.hideSidebar' })).toBeInTheDocument();
+    // The wallet shortcut was removed (replaced by Home, clear of the macOS
+    // window controls).
+    expect(screen.queryByRole('button', { name: 'nav.wallet' })).not.toBeInTheDocument();
+  });
+
+  it('Home button has correct data-analytics-id', () => {
+    renderWithProviders(<SidebarHeader />, { initialEntries: ['/home'] });
+    expect(screen.getByRole('button', { name: 'nav.home' })).toHaveAttribute(
+      'data-analytics-id',
+      'sidebar-header-home'
+    );
   });
 
   it('shortcuts button opens the keyboard-shortcuts help directory', () => {
diff --git a/app/src/components/layout/shell/SidebarHeader.tsx b/app/src/components/layout/shell/SidebarHeader.tsx
index 96c2b7224..a367b0399 100644
--- a/app/src/components/layout/shell/SidebarHeader.tsx
+++ b/app/src/components/layout/shell/SidebarHeader.tsx
@@ -8,11 +8,11 @@ import { useRootSidebar } from './RootShellLayout';
 import { useHomeNav } from './useHomeNav';
 
 const ICON_BTN =
-  'flex h-7 w-7 flex-none items-center justify-center rounded-md text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200';
+  'flex h-7 w-7 flex-none items-center justify-center rounded-md text-content-muted transition-colors hover:bg-surface-hover hover:text-content-secondary';
 
 /**
- * Thin utility header at the top of the root sidebar: jump Home, open the
- * wallet, open Settings, and collapse the sidebar. Language is chosen from
+ * Thin utility header at the top of the root sidebar: jump Home, open keyboard
+ * shortcuts, open Settings, and collapse the sidebar. Language is chosen from
  * Settings, not here.
  */
 export default function SidebarHeader() {
@@ -23,26 +23,30 @@ export default function SidebarHeader() {
   const handleHome = useHomeNav();
 
   return (
-    <div className="flex items-center justify-between gap-1 px-2 py-1.5">
-      <Tooltip label={t('nav.home')}>
-        <button
-          type="button"
-          onClick={handleHome}
-          className={ICON_BTN}
-          data-analytics-id="sidebar-header-home"
-          aria-label={t('nav.home')}>
-          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={1.8}
-              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a2 2 0 01-2-2v-4a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2z"
-            />
-          </svg>
-        </button>
-      </Tooltip>
-
+    // Right-aligned so the macOS traffic lights (top-left, overlay title bar)
+    // sit in the empty left space — the icons stay clear of the window controls
+    // and inline with them (no extra top padding).
+    <div className="flex items-center justify-end gap-1 px-2 py-1.5">
       <div className="flex items-center gap-0.5">
+        {/* Home shortcut (replaces the former wallet shortcut). */}
+        <Tooltip label={t('nav.home')}>
+          <button
+            type="button"
+            onClick={handleHome}
+            className={ICON_BTN}
+            data-analytics-id="sidebar-header-home"
+            aria-label={t('nav.home')}>
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.8}
+                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a2 2 0 01-2-2v-4a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2z"
+              />
+            </svg>
+          </button>
+        </Tooltip>
+
         {/* Keyboard shortcuts — one-click open of the help directory (also ? / ⌘/). */}
         <Tooltip label={t('shortcuts.title')}>
           <button
diff --git a/app/src/components/layout/shell/SidebarNav.test.tsx b/app/src/components/layout/shell/SidebarNav.test.tsx
index ba0eb5c7f..cab802c0f 100644
--- a/app/src/components/layout/shell/SidebarNav.test.tsx
+++ b/app/src/components/layout/shell/SidebarNav.test.tsx
@@ -39,12 +39,13 @@ describe('SidebarNav active matching', () => {
     renderWithProviders(<SidebarNav />, { initialEntries: ['/chat'] });
 
     const active = tabButton('Chat');
-    // Light-theme active state must contrast against the white sidebar.
-    expect(active.className).toContain('bg-primary-50');
+    // Active state uses a themeable primary-accent tint that contrasts against
+    // any sidebar surface (light, dark, or custom themes).
+    expect(active.className).toContain('bg-primary-500/12');
     expect(active.className).not.toContain('bg-white');
 
     // Inactive tabs carry no active fill.
-    expect(tabButton('Human').className).not.toContain('bg-primary-50');
+    expect(tabButton('Human').className).not.toContain('bg-primary-500/12');
   });
 
   it('clears an active provider selection when clicking the already-active nav item', () => {
diff --git a/app/src/components/layout/shell/SidebarNav.tsx b/app/src/components/layout/shell/SidebarNav.tsx
index 3754dc30a..a9e0fcd06 100644
--- a/app/src/components/layout/shell/SidebarNav.tsx
+++ b/app/src/components/layout/shell/SidebarNav.tsx
@@ -73,20 +73,19 @@ export default function SidebarNav() {
             onClick={() => handleClick(tab, active)}
             title={tab.label}
             aria-current={active ? 'page' : undefined}
-            // Light theme: the previous `bg-white` active state matched the
-            // white sidebar background, so the selected tab was nearly
-            // invisible. Use the ocean-brand accent (tinted fill + blue text +
-            // subtle ring) so the current tab clearly stands out. Dark theme
-            // already had enough contrast via `neutral-800`, so it's unchanged.
+            // Active state uses the primary accent as a translucent tint + ring
+            // so it reads against any themed sidebar surface (light, dark, or a
+            // custom theme like Midnight) — accent tokens are themeable, so this
+            // no longer needs a hardcoded `dark:` neutral fill.
             className={`group flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors cursor-pointer ${
               active
-                ? 'bg-primary-50 text-primary-700 ring-1 ring-primary-200 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-0 font-semibold shadow-sm'
-                : 'text-stone-500 dark:text-neutral-400 hover:bg-stone-200/70 dark:hover:bg-neutral-800/60 hover:text-stone-700 dark:hover:text-neutral-200'
+                ? 'bg-primary-500/12 text-primary-600 ring-1 ring-primary-500/25 dark:text-primary-300 font-semibold shadow-sm'
+                : 'text-content-muted hover:bg-surface-hover hover:text-content-secondary'
             }`}>
             <span className="relative inline-flex flex-shrink-0">
               <NavIcon id={tab.id} className="w-4 h-4" />
               {showBadge && (
-                <span className="absolute -top-1 -right-1 min-w-[13px] h-[13px] px-1 rounded-full bg-coral-500 text-[9px] font-bold text-white flex items-center justify-center leading-none">
+                <span className="absolute -top-1 -right-1 min-w-[13px] h-[13px] px-1 rounded-full bg-coral-500 text-[9px] font-bold text-content-inverted flex items-center justify-center leading-none">
                   {unreadCount > 9 ? '9+' : unreadCount}
                 </span>
               )}
diff --git a/app/src/components/mcp-setup/SecretPromptDialog.tsx b/app/src/components/mcp-setup/SecretPromptDialog.tsx
index b8594fe0e..3bd788c59 100644
--- a/app/src/components/mcp-setup/SecretPromptDialog.tsx
+++ b/app/src/components/mcp-setup/SecretPromptDialog.tsx
@@ -90,22 +90,22 @@ export function SecretPromptDialog() {
       aria-modal="true"
       aria-label={t('mcp.setup.secretDialog.title')}>
       <div
-        className="bg-white dark:bg-neutral-900 rounded-2xl max-w-md w-full shadow-large border border-stone-200 dark:border-neutral-800 animate-slide-up"
+        className="bg-surface rounded-2xl max-w-md w-full shadow-large border border-line animate-slide-up"
         onClick={e => e.stopPropagation()}>
         <form onSubmit={handleSubmit}>
           <div className="p-6 pb-4">
-            <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+            <h2 className="text-lg font-semibold text-content">
               {t('mcp.setup.secretDialog.title')}
             </h2>
-            <p className="text-sm text-stone-600 dark:text-neutral-300 mt-2">
+            <p className="text-sm text-content-secondary mt-2">
               {t('mcp.setup.secretDialog.bodyPrefix')}{' '}
-              <code className="px-1.5 py-0.5 rounded bg-stone-100 dark:bg-neutral-800 text-stone-900 dark:text-neutral-100 font-mono text-xs">
+              <code className="px-1.5 py-0.5 rounded bg-surface-subtle text-content font-mono text-xs">
                 {request.keyName}
               </code>
               {t('mcp.setup.secretDialog.bodySuffix')}
             </p>
             {request.prompt && (
-              <p className="text-sm text-stone-700 dark:text-neutral-200 mt-3 whitespace-pre-wrap">
+              <p className="text-sm text-content-secondary mt-3 whitespace-pre-wrap">
                 {request.prompt}
               </p>
             )}
@@ -114,7 +114,7 @@ export function SecretPromptDialog() {
           <div className="px-6 pb-2">
             <label
               htmlFor="mcp-setup-secret-input"
-              className="block text-xs font-medium text-stone-600 dark:text-neutral-400 mb-1">
+              className="block text-xs font-medium text-content-secondary mb-1">
               {t('mcp.setup.secretDialog.inputLabel')}
             </label>
             <div className="flex items-stretch gap-2">
@@ -127,7 +127,7 @@ export function SecretPromptDialog() {
                 value={value}
                 onChange={e => setValue(e.target.value)}
                 placeholder={t('mcp.setup.secretDialog.inputPlaceholder')}
-                className="flex-1 px-3 py-2 rounded-lg border border-stone-300 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800 text-stone-900 dark:text-neutral-100 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
+                className="flex-1 px-3 py-2 rounded-lg border border-line-strong bg-surface-muted text-content font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                 autoFocus
                 disabled={submitting}
               />
@@ -135,11 +135,11 @@ export function SecretPromptDialog() {
                 type="button"
                 onClick={() => setReveal(v => !v)}
                 disabled={submitting}
-                className="px-3 py-2 text-xs font-medium text-stone-600 dark:text-neutral-300 rounded-lg border border-stone-300 dark:border-neutral-700 hover:bg-stone-100 dark:hover:bg-neutral-800">
+                className="px-3 py-2 text-xs font-medium text-content-secondary rounded-lg border border-line-strong hover:bg-surface-hover">
                 {reveal ? t('mcp.setup.secretDialog.hide') : t('mcp.setup.secretDialog.show')}
               </button>
             </div>
-            <p className="text-[11px] text-stone-500 dark:text-neutral-500 mt-2">
+            <p className="text-[11px] text-content-muted dark:text-content-faint mt-2">
               {t('mcp.setup.secretDialog.privacyNote')}
             </p>
             {error && (
@@ -149,18 +149,18 @@ export function SecretPromptDialog() {
             )}
           </div>
 
-          <div className="flex items-center justify-end gap-3 p-6 pt-4 border-t border-stone-200 dark:border-neutral-800">
+          <div className="flex items-center justify-end gap-3 p-6 pt-4 border-t border-line">
             <button
               type="button"
               onClick={handleCancel}
               disabled={submitting}
-              className="px-4 py-2 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:text-stone-900 dark:hover:text-neutral-100 rounded-lg hover:bg-stone-100 dark:hover:bg-neutral-800 disabled:opacity-50">
+              className="px-4 py-2 text-sm font-medium text-content-secondary hover:text-content rounded-lg hover:bg-surface-hover disabled:opacity-50">
               {t('mcp.setup.secretDialog.cancel')}
             </button>
             <button
               type="submit"
               disabled={submitting || value.length === 0}
-              className="px-4 py-2 text-sm font-medium rounded-lg bg-primary-500 hover:bg-primary-600 text-white disabled:opacity-50">
+              className="px-4 py-2 text-sm font-medium rounded-lg bg-primary-500 hover:bg-primary-600 text-content-inverted disabled:opacity-50">
               {submitting
                 ? t('mcp.setup.secretDialog.submitting')
                 : t('mcp.setup.secretDialog.submit')}
diff --git a/app/src/components/notifications/CoreNotificationCard.tsx b/app/src/components/notifications/CoreNotificationCard.tsx
index 176c8aa4d..1ef12194b 100644
--- a/app/src/components/notifications/CoreNotificationCard.tsx
+++ b/app/src/components/notifications/CoreNotificationCard.tsx
@@ -86,8 +86,8 @@ const CoreNotificationCard = ({ notification: n }: Props) => {
 
   return (
     <div
-      className={`w-full p-3 border-b border-stone-100 dark:border-neutral-800 transition-colors duration-150 ${
-        n.read ? 'bg-white dark:bg-neutral-900' : 'bg-primary-50/30'
+      className={`w-full p-3 border-b border-line-subtle transition-colors duration-150 ${
+        n.read ? 'bg-surface' : 'bg-primary-50/30'
       }`}
       data-testid="core-notification-card">
       <div className="flex items-start gap-3">
@@ -101,22 +101,20 @@ const CoreNotificationCard = ({ notification: n }: Props) => {
         <div className="flex-1 min-w-0 text-left">
           {/* Header row: category badge + timestamp */}
           <div className="flex items-center gap-2 mb-1">
-            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium border bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200 border-stone-200 dark:border-neutral-800">
+            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium border bg-surface-subtle text-content-secondary border-line">
               {t(`notifications.category.${n.category}`)}
             </span>
-            <span className="ml-auto text-[11px] text-stone-400 dark:text-neutral-500 flex-shrink-0">
+            <span className="ml-auto text-[11px] text-content-faint flex-shrink-0">
               {relativeTime(n.timestamp)}
             </span>
           </div>
 
           {/* Title */}
-          <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">{n.title}</p>
+          <p className="text-sm font-medium text-content">{n.title}</p>
 
           {/* Body */}
           {n.body && (
-            <p
-              data-testid="core-notification-body"
-              className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
+            <p data-testid="core-notification-body" className="text-xs text-content-muted mt-0.5">
               <NotificationBody body={n.body} />
             </p>
           )}
diff --git a/app/src/components/notifications/NotificationCard.tsx b/app/src/components/notifications/NotificationCard.tsx
index 714fa2229..1b2269eb3 100644
--- a/app/src/components/notifications/NotificationCard.tsx
+++ b/app/src/components/notifications/NotificationCard.tsx
@@ -35,7 +35,7 @@ function providerBadgeClass(provider: string): string {
     case 'linkedin':
       return 'bg-sky-100 text-sky-700 border-sky-200';
     default:
-      return 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200 border-stone-200 dark:border-neutral-800';
+      return 'bg-surface-subtle text-content-secondary border-line';
   }
 }
 
@@ -71,8 +71,8 @@ const NotificationCard = ({ notification: n, onMarkRead, onNavigate, onDismiss }
 
   return (
     <div
-      className={`w-full p-3 border-b border-stone-100 dark:border-neutral-800 hover:bg-stone-50 dark:hover:bg-neutral-800/60 transition-colors duration-150 ${
-        isUnread ? 'bg-primary-50/30' : 'bg-white dark:bg-neutral-900'
+      className={`w-full p-3 border-b border-line-subtle hover:bg-surface-hover transition-colors duration-150 ${
+        isUnread ? 'bg-primary-50/30' : 'bg-surface'
       }`}>
       <div className="flex items-start gap-3">
         {/* Unread dot — reserve space so text stays aligned whether read or unread */}
@@ -125,21 +125,19 @@ const NotificationCard = ({ notification: n, onMarkRead, onNavigate, onDismiss }
               </span>
             )}
 
-            <span className="ml-auto text-[11px] text-stone-400 dark:text-neutral-500 flex-shrink-0">
+            <span className="ml-auto text-[11px] text-content-faint flex-shrink-0">
               {relativeTime(n.received_at)}
             </span>
           </div>
 
           {/* Title */}
-          <p className="text-sm font-medium text-stone-900 dark:text-neutral-100 truncate">
-            {n.title}
-          </p>
+          <p className="text-sm font-medium text-content truncate">{n.title}</p>
 
           {/* Body preview — `<openhuman-link>` tags render as pills */}
           {n.body && (
             <p
               data-testid="notification-card-body"
-              className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
+              className="text-xs text-content-muted mt-0.5 line-clamp-2">
               <NotificationBody body={n.body} />
             </p>
           )}
@@ -150,7 +148,7 @@ const NotificationCard = ({ notification: n, onMarkRead, onNavigate, onDismiss }
             variant="tertiary"
             size="xs"
             onClick={() => onDismiss(n.id)}
-            className="mt-0.5 ml-1 flex-shrink-0 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300"
+            className="mt-0.5 ml-1 flex-shrink-0 text-content-faint hover:text-content-secondary"
             aria-label={t('notifications.card.dismiss')}>
             <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
diff --git a/app/src/components/notifications/NotificationCenter.tsx b/app/src/components/notifications/NotificationCenter.tsx
index 8adbb6c8b..7bf6c34f3 100644
--- a/app/src/components/notifications/NotificationCenter.tsx
+++ b/app/src/components/notifications/NotificationCenter.tsx
@@ -128,13 +128,13 @@ const NotificationCenter = () => {
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-stone-200 dark:border-neutral-800">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-line">
         <div className="flex items-center gap-2">
-          <h2 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+          <h2 className="text-base font-semibold text-content">
             {t('notifications.center.title')}
           </h2>
           {filteredUnreadCount > 0 && (
-            <span className="px-1.5 py-0.5 rounded-full text-[11px] font-semibold bg-primary-500 text-white">
+            <span className="px-1.5 py-0.5 rounded-full text-[11px] font-semibold bg-primary-500 text-content-inverted">
               {filteredUnreadCount}
             </span>
           )}
@@ -154,13 +154,13 @@ const NotificationCenter = () => {
 
       {/* Provider filter pills */}
       {allProviders.length > 1 && (
-        <div className="flex items-center gap-2 px-4 py-2 border-b border-stone-100 dark:border-neutral-800 overflow-x-auto">
+        <div className="flex items-center gap-2 px-4 py-2 border-b border-line-subtle overflow-x-auto">
           <button
             onClick={() => setSelectedProvider(undefined)}
             className={`flex-shrink-0 px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
               selectedProvider === undefined
-                ? 'bg-primary-500 text-white'
-                : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 hover:bg-stone-200 dark:hover:bg-neutral-800/60'
+                ? 'bg-primary-500 text-content-inverted'
+                : 'bg-surface-subtle text-content-secondary hover:bg-surface-strong dark:hover:bg-surface-muted/60'
             }`}>
             {t('notifications.center.filterAll')}
           </button>
@@ -170,8 +170,8 @@ const NotificationCenter = () => {
               onClick={() => setSelectedProvider(p === selectedProvider ? undefined : p)}
               className={`flex-shrink-0 px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
                 selectedProvider === p
-                  ? 'bg-primary-500 text-white'
-                  : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 hover:bg-stone-200 dark:hover:bg-neutral-800/60'
+                  ? 'bg-primary-500 text-content-inverted'
+                  : 'bg-surface-subtle text-content-secondary hover:bg-surface-strong dark:hover:bg-surface-muted/60'
               }`}>
               {p}
             </button>
@@ -192,7 +192,7 @@ const NotificationCenter = () => {
         )}
 
         {loading && (
-          <div className="flex items-center justify-center py-12 text-stone-400 dark:text-neutral-500 text-sm">
+          <div className="flex items-center justify-center py-12 text-content-faint text-sm">
             {t('common.loading')}
           </div>
         )}
@@ -204,7 +204,7 @@ const NotificationCenter = () => {
         )}
 
         {!loading && !error && visibleItems.length === 0 && coreActionItems.length === 0 && (
-          <div className="flex flex-col items-center justify-center py-16 text-stone-400 dark:text-neutral-500">
+          <div className="flex flex-col items-center justify-center py-16 text-content-faint">
             <svg
               className="w-10 h-10 mb-3 opacity-40"
               fill="none"
diff --git a/app/src/components/oauth/providerConfigs.tsx b/app/src/components/oauth/providerConfigs.tsx
index 368ddf331..38a283860 100644
--- a/app/src/components/oauth/providerConfigs.tsx
+++ b/app/src/components/oauth/providerConfigs.tsx
@@ -48,30 +48,30 @@ export const oauthProviderConfigs: OAuthProviderConfig[] = [
     id: 'google',
     name: 'Google',
     icon: GoogleIcon,
-    color: 'bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700',
+    color: 'bg-surface border border-line dark:border-line-strong',
     hoverColor:
-      'hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-800 dark:hover:border-neutral-600',
-    textColor: 'text-gray-900 dark:text-neutral-100',
+      'hover:bg-surface-muted hover:border-line-strong dark:hover:bg-surface-muted dark:hover:border-neutral-600',
+    textColor: 'text-content dark:text-content',
     showOnWelcome: true,
   },
   {
     id: 'github',
     name: 'GitHub',
     icon: GitHubIcon,
-    color: 'bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700',
+    color: 'bg-surface border border-line dark:border-line-strong',
     hoverColor:
-      'hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-800 dark:hover:border-neutral-600',
-    textColor: 'text-gray-900 dark:text-neutral-100',
+      'hover:bg-surface-muted hover:border-line-strong dark:hover:bg-surface-muted dark:hover:border-neutral-600',
+    textColor: 'text-content dark:text-content',
     showOnWelcome: true,
   },
   {
     id: 'twitter',
     name: 'Twitter',
     icon: TwitterIcon,
-    color: 'bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700',
+    color: 'bg-surface border border-line dark:border-line-strong',
     hoverColor:
-      'hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-800 dark:hover:border-neutral-600',
-    textColor: 'text-gray-900 dark:text-neutral-100',
+      'hover:bg-surface-muted hover:border-line-strong dark:hover:bg-surface-muted dark:hover:border-neutral-600',
+    textColor: 'text-content dark:text-content',
     showOnWelcome: true,
   },
   {
diff --git a/app/src/components/rewards/ReferralRewardsSection.tsx b/app/src/components/rewards/ReferralRewardsSection.tsx
index 2ea6ab2cd..9e2c18a46 100644
--- a/app/src/components/rewards/ReferralRewardsSection.tsx
+++ b/app/src/components/rewards/ReferralRewardsSection.tsx
@@ -17,7 +17,7 @@ function statusBadgeClass(status: ReferralRelationshipStatus): string {
     case 'converted':
       return 'bg-sage-100 dark:bg-sage-500/20 text-sage-800 dark:text-sage-200';
     case 'expired':
-      return 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300';
+      return 'bg-surface-subtle text-content-secondary';
     default:
       return 'bg-amber-50 dark:bg-amber-500/10 text-amber-800 dark:text-amber-200';
   }
@@ -164,22 +164,20 @@ const ReferralRewardsSection = () => {
 
   return (
     <div className="space-y-4">
-      <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 space-y-6">
+      <div className="bg-surface rounded-2xl shadow-soft border border-line p-6 space-y-6">
         <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
           <div className="space-y-2">
-            <h2 className="text-2xl font-semibold text-stone-900 dark:text-neutral-100">
+            <h2 className="text-2xl font-semibold text-content">
               {t('rewards.referralSection.title')}
             </h2>
-            <p className="text-sm text-stone-600 dark:text-neutral-300 max-w-xl">
+            <p className="text-sm text-content-secondary max-w-xl">
               {t('rewards.referralSection.subtitle')}
             </p>
           </div>
         </div>
 
         {loading && !stats ? (
-          <p className="text-sm text-stone-500 dark:text-neutral-400">
-            {t('rewards.referralSection.loading')}
-          </p>
+          <p className="text-sm text-content-muted">{t('rewards.referralSection.loading')}</p>
         ) : null}
         {loadError ? (
           <div className="rounded-xl border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-sm text-coral-800 dark:text-coral-200">
@@ -197,35 +195,35 @@ const ReferralRewardsSection = () => {
         {stats ? (
           <>
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-              <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
-                <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+              <div className="rounded-xl border border-line bg-surface-muted p-4">
+                <div className="text-xs font-medium uppercase tracking-wide text-content-faint">
                   {t('rewards.referralSection.yourCode')}
                 </div>
-                <div className="mt-2 font-mono text-lg font-semibold text-stone-900 dark:text-neutral-100 break-all">
+                <div className="mt-2 font-mono text-lg font-semibold text-content break-all">
                   {stats.referralCode || '—'}
                 </div>
               </div>
-              <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
-                <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+              <div className="rounded-xl border border-line bg-surface-muted p-4">
+                <div className="text-xs font-medium uppercase tracking-wide text-content-faint">
                   {t('rewards.referralSection.totalEarned')}
                 </div>
-                <div className="mt-2 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
+                <div className="mt-2 text-2xl font-semibold text-content">
                   {formatUsd(stats.totals.totalRewardUsd)}
                 </div>
               </div>
-              <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
-                <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+              <div className="rounded-xl border border-line bg-surface-muted p-4">
+                <div className="text-xs font-medium uppercase tracking-wide text-content-faint">
                   {t('rewards.referralSection.pendingReferrals')}
                 </div>
-                <div className="mt-2 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
+                <div className="mt-2 text-2xl font-semibold text-content">
                   {stats.totals.pendingCount}
                 </div>
               </div>
-              <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
-                <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+              <div className="rounded-xl border border-line bg-surface-muted p-4">
+                <div className="text-xs font-medium uppercase tracking-wide text-content-faint">
                   {t('rewards.referralSection.completed')}
                 </div>
-                <div className="mt-2 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
+                <div className="mt-2 text-2xl font-semibold text-content">
                   {stats.totals.convertedCount}
                 </div>
               </div>
@@ -243,7 +241,7 @@ const ReferralRewardsSection = () => {
                 type="button"
                 onClick={() => void handleShare()}
                 disabled={!referralCodeToCopy}
-                className="inline-flex items-center justify-center rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3 text-sm font-medium text-stone-700 dark:text-neutral-200 transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 disabled:opacity-50">
+                className="inline-flex items-center justify-center rounded-xl border border-line bg-surface px-4 py-3 text-sm font-medium text-content-secondary transition-colors hover:bg-surface-hover dark:bg-surface-muted/60 dark:hover:bg-surface-muted/60 disabled:opacity-50">
                 {t('rewards.referralSection.share')}
               </button>
               {copyHint ? (
@@ -257,11 +255,11 @@ const ReferralRewardsSection = () => {
       </div>
 
       {stats && stats.canApplyReferral !== false && showApplyForm ? (
-        <div className="rounded-xl shadow-soft border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
-          <h2 className="text-2xl font-semibold text-stone-900 dark:text-neutral-100">
+        <div className="rounded-xl shadow-soft border border-line bg-surface p-4 space-y-3">
+          <h2 className="text-2xl font-semibold text-content">
             {t('rewards.referralSection.haveCode')}
           </h2>
-          <p className="text-xs text-stone-600 dark:text-neutral-300">
+          <p className="text-xs text-content-secondary">
             {t('rewards.referralSection.haveCodeDesc')}
           </p>
           <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
@@ -272,7 +270,7 @@ const ReferralRewardsSection = () => {
               onKeyDown={e => e.key === 'Enter' && void handleApply()}
               placeholder={t('rewards.referralSection.placeholder')}
               disabled={applyLoading}
-              className="flex-1 px-4 py-2.5 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 font-mono text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
+              className="flex-1 px-4 py-2.5 rounded-xl border border-line bg-surface font-mono text-content placeholder:text-stone-400 dark:text-content-faint dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
             />
             <Button
               variant="primary"
@@ -302,19 +300,19 @@ const ReferralRewardsSection = () => {
       ) : null}
 
       {stats ? (
-        <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6">
+        <div className="bg-surface rounded-2xl shadow-soft border border-line p-6">
           <div>
-            <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-2">
+            <h3 className="text-sm font-semibold text-content mb-2">
               {t('rewards.referralSection.activity')}
             </h3>
             {stats.referrals.length === 0 ? (
-              <p className="text-sm text-stone-500 dark:text-neutral-400 rounded-xl border border-dashed border-stone-200 dark:border-neutral-800 px-4 py-6 text-center">
+              <p className="text-sm text-content-muted rounded-xl border border-dashed border-line px-4 py-6 text-center">
                 {t('rewards.referralSection.noReferrals')}
               </p>
             ) : (
-              <div className="overflow-x-auto rounded-xl border border-stone-200 dark:border-neutral-800">
+              <div className="overflow-x-auto rounded-xl border border-line">
                 <table className="min-w-full text-sm text-left">
-                  <thead className="bg-stone-50 dark:bg-neutral-800/60 text-xs uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+                  <thead className="bg-surface-muted text-xs uppercase tracking-wide text-content-muted">
                     <tr>
                       <th className="px-3 py-2 font-medium">
                         {t('rewards.referralSection.colReferredUser')}
@@ -330,12 +328,10 @@ const ReferralRewardsSection = () => {
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-stone-100 dark:divide-neutral-800">
+                  <tbody className="divide-y divide-line-subtle dark:divide-neutral-800">
                     {stats.referrals.map((row, idx) => (
-                      <tr
-                        key={row.id ?? row.referredUserId ?? idx}
-                        className="bg-white dark:bg-neutral-900">
-                        <td className="px-3 py-2 font-mono text-stone-800 dark:text-neutral-100">
+                      <tr key={row.id ?? row.referredUserId ?? idx} className="bg-surface">
+                        <td className="px-3 py-2 font-mono text-content">
                           {row.referredUserMasked || row.referredDisplayName || '—'}
                         </td>
                         <td className="px-3 py-2">
@@ -348,12 +344,12 @@ const ReferralRewardsSection = () => {
                                 : t('rewards.referralSection.statusJoined')}
                           </span>
                         </td>
-                        <td className="px-3 py-2 text-stone-700 dark:text-neutral-200">
+                        <td className="px-3 py-2 text-content-secondary">
                           {row.rewardUsd != null && row.rewardUsd > 0
                             ? formatUsd(row.rewardUsd)
                             : '—'}
                         </td>
-                        <td className="px-3 py-2 text-stone-500 dark:text-neutral-400 text-xs">
+                        <td className="px-3 py-2 text-content-muted text-xs">
                           {row.status === 'converted' && row.convertedAt
                             ? new Date(row.convertedAt).toLocaleString()
                             : row.createdAt
diff --git a/app/src/components/rewards/RewardsCommunityTab.tsx b/app/src/components/rewards/RewardsCommunityTab.tsx
index 538ecad0c..bba6a562a 100644
--- a/app/src/components/rewards/RewardsCommunityTab.tsx
+++ b/app/src/components/rewards/RewardsCommunityTab.tsx
@@ -175,7 +175,7 @@ export default function RewardsCommunityTab({
               <>
                 <div
                   data-testid="rewards-discord-connected"
-                  className="inline-flex items-center justify-center gap-2 rounded-xl bg-white/15 px-4 py-3 text-sm font-semibold text-white">
+                  className="inline-flex items-center justify-center gap-2 rounded-xl bg-surface/15 px-4 py-3 text-sm font-semibold text-white">
                   <svg
                     className="h-4 w-4"
                     viewBox="0 0 24 24"
@@ -196,7 +196,7 @@ export default function RewardsCommunityTab({
                   }}
                   disabled={disconnectState === 'disconnecting'}
                   data-testid="rewards-disconnect-discord"
-                  className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm font-semibold text-white backdrop-blur-sm transition-colors hover:bg-white/15 disabled:cursor-not-allowed disabled:opacity-70">
+                  className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/20 bg-surface/10 px-4 py-3 text-sm font-semibold text-white backdrop-blur-sm transition-colors hover:bg-white/15 disabled:cursor-not-allowed disabled:opacity-70">
                   {disconnectState === 'disconnecting'
                     ? t('rewards.community.disconnectingDiscord')
                     : t('rewards.community.disconnectDiscord')}
@@ -209,7 +209,7 @@ export default function RewardsCommunityTab({
                 }}
                 disabled={connectState === 'connecting'}
                 data-testid="rewards-connect-discord"
-                className="inline-flex items-center justify-center gap-2 rounded-xl bg-white dark:bg-neutral-900 px-4 py-3 text-sm font-semibold text-primary-700 dark:text-primary-300 shadow-lg transition-transform active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70">
+                className="inline-flex items-center justify-center gap-2 rounded-xl bg-surface px-4 py-3 text-sm font-semibold text-primary-700 dark:text-primary-300 shadow-lg transition-transform active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70">
                 <svg
                   className="w-4 h-4"
                   fill="none"
@@ -232,7 +232,7 @@ export default function RewardsCommunityTab({
               onClick={() => {
                 void openUrl(inviteUrl);
               }}
-              className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm font-semibold text-white backdrop-blur-sm transition-colors hover:bg-white/15">
+              className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/20 bg-surface/10 px-4 py-3 text-sm font-semibold text-white backdrop-blur-sm transition-colors hover:bg-white/15">
               <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path d="M20.317 4.369A19.79 19.79 0 0 0 15.885 3c-.191.328-.403.775-.552 1.124a18.27 18.27 0 0 0-5.29 0A11.56 11.56 0 0 0 9.49 3a19.74 19.74 0 0 0-4.433 1.369C2.253 8.51 1.492 12.55 1.872 16.533a19.9 19.9 0 0 0 5.239 2.673c.423-.58.8-1.196 1.123-1.845a12.84 12.84 0 0 1-1.767-.85c.148-.106.292-.217.43-.332c3.408 1.6 7.104 1.6 10.472 0c.14.115.283.226.43.332c-.565.338-1.157.623-1.771.851c.322.648.698 1.264 1.123 1.844a19.84 19.84 0 0 0 5.241-2.673c.446-4.617-.761-8.621-3.787-12.164ZM9.46 14.088c-1.02 0-1.855-.936-1.855-2.084c0-1.148.82-2.084 1.855-2.084c1.044 0 1.87.944 1.855 2.084c0 1.148-.82 2.084-1.855 2.084Zm5.08 0c-1.02 0-1.855-.936-1.855-2.084c0-1.148.82-2.084 1.855-2.084c1.044 0 1.87.944 1.855 2.084c0 1.148-.812 2.084-1.855 2.084Z" />
               </svg>
@@ -256,8 +256,8 @@ export default function RewardsCommunityTab({
             </p>
           ) : null}
         </div>
-        <div className="absolute -right-10 -top-10 h-32 w-32 rounded-full bg-white/10 blur-2xl" />
-        <div className="absolute -bottom-10 -left-8 h-24 w-24 rounded-full bg-white/15 blur-xl" />
+        <div className="absolute -right-10 -top-10 h-32 w-32 rounded-full bg-surface/10 blur-2xl" />
+        <div className="absolute -bottom-10 -left-8 h-24 w-24 rounded-full bg-surface/15 blur-xl" />
       </section>
 
       {error ? (
@@ -274,7 +274,7 @@ export default function RewardsCommunityTab({
               data-testid="rewards-retry"
               onClick={onRetry}
               disabled={isLoading}
-              className="rounded-full border border-amber-300 dark:border-amber-500/40 bg-white dark:bg-neutral-900 px-3 py-1 text-xs font-semibold text-amber-800 dark:text-amber-200 shadow-sm transition-colors hover:bg-amber-100 dark:bg-amber-500/20 disabled:cursor-not-allowed disabled:opacity-60">
+              className="rounded-full border border-amber-300 dark:border-amber-500/40 bg-surface px-3 py-1 text-xs font-semibold text-amber-800 dark:text-amber-200 shadow-sm transition-colors hover:bg-amber-100 dark:bg-amber-500/20 disabled:cursor-not-allowed disabled:opacity-60">
               {isLoading ? t('rewards.community.retrying') : t('rewards.community.tryAgain')}
             </button>
           ) : null}
@@ -282,13 +282,13 @@ export default function RewardsCommunityTab({
       ) : null}
 
       <div className="space-y-4">
-        <section className="rounded-[1.25rem] bg-white dark:bg-neutral-900 p-6 shadow-[0_4px_20px_rgba(25,28,30,0.04)]">
+        <section className="rounded-[1.25rem] bg-surface p-6 shadow-[0_4px_20px_rgba(25,28,30,0.04)]">
           <div className="mb-6 flex items-center justify-between gap-4">
             <div>
-              <h2 className="text-lg font-bold text-stone-900 dark:text-neutral-100">
+              <h2 className="text-lg font-bold text-content">
                 {t('rewards.community.yourProgress')}
               </h2>
-              <p className="text-xs text-stone-500 dark:text-neutral-400">
+              <p className="text-xs text-content-muted">
                 {isLoading
                   ? t('rewards.community.loadingRewards')
                   : t('rewards.community.achievementsUnlocked')
@@ -319,9 +319,7 @@ export default function RewardsCommunityTab({
                   className="text-primary-600 dark:text-primary-300 transition-all duration-300"
                 />
               </svg>
-              <span className="absolute text-sm font-bold text-stone-900 dark:text-neutral-100">
-                {progressPercent}%
-              </span>
+              <span className="absolute text-sm font-bold text-content">{progressPercent}%</span>
             </div>
           </div>
 
@@ -332,7 +330,7 @@ export default function RewardsCommunityTab({
                 className={`flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full border-2 ${
                   role?.unlocked
                     ? 'border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 text-primary-600 dark:text-primary-300'
-                    : 'border-dashed border-stone-300 dark:border-neutral-700 bg-stone-100 dark:bg-neutral-800 text-stone-400 dark:text-neutral-500'
+                    : 'border-dashed border-line-strong bg-surface-subtle text-content-faint'
                 }`}>
                 <svg className="h-6 w-6" viewBox="0 0 24 24" aria-hidden="true">
                   {roleGlyph(index)}
@@ -344,7 +342,7 @@ export default function RewardsCommunityTab({
 
         <section className="space-y-3">
           <div className="flex items-center justify-between">
-            <h2 className="text-lg font-bold text-stone-900 dark:text-neutral-100">
+            <h2 className="text-lg font-bold text-content">
               {t('rewards.community.rolesAndRewards')}
             </h2>
           </div>
@@ -354,10 +352,10 @@ export default function RewardsCommunityTab({
               data-testid="rewards-claim-roles-banner"
               className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-blue-100 dark:border-blue-500/30 bg-blue-50 dark:bg-blue-500/10 px-4 py-3">
               <div className="min-w-0">
-                <p className="text-sm font-bold text-stone-900 dark:text-neutral-100">
+                <p className="text-sm font-bold text-content">
                   {t('rewards.community.roleClaimTitle')}
                 </p>
-                <p className="mt-0.5 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">
+                <p className="mt-0.5 text-xs leading-relaxed text-content-secondary">
                   {t('rewards.community.roleClaimDesc')}
                 </p>
               </div>
@@ -374,8 +372,8 @@ export default function RewardsCommunityTab({
             </div>
           ) : null}
           {isLoading ? (
-            <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-5 shadow-soft">
-              <div className="text-sm text-stone-600 dark:text-neutral-300">
+            <div className="rounded-2xl border border-line bg-surface p-5 shadow-soft">
+              <div className="text-sm text-content-secondary">
                 {t('rewards.community.loadingRewards')}
               </div>
             </div>
@@ -410,7 +408,7 @@ export default function RewardsCommunityTab({
               return (
                 <div
                   key={role.id}
-                  className={`rounded-[1.25rem] bg-white dark:bg-neutral-900 p-5 shadow-sm transition-shadow hover:shadow-md ${
+                  className={`rounded-[1.25rem] bg-surface p-5 shadow-sm transition-shadow hover:shadow-md ${
                     role.unlocked
                       ? 'ring-1 ring-primary-100 dark:ring-primary-500/20'
                       : 'ring-1 ring-black/[0.04] dark:ring-white/[0.06]'
@@ -424,10 +422,8 @@ export default function RewardsCommunityTab({
                         </svg>
                       </div>
                       <div>
-                        <h3 className="text-base font-bold text-stone-900 dark:text-neutral-100">
-                          {role.title}
-                        </h3>
-                        <p className="mt-1 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">
+                        <h3 className="text-base font-bold text-content">{role.title}</h3>
+                        <p className="mt-1 text-xs leading-relaxed text-content-secondary">
                           {role.description}
                         </p>
                       </div>
@@ -464,21 +460,21 @@ export default function RewardsCommunityTab({
               );
             })
           ) : (
-            <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-5 shadow-soft">
-              <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+            <div className="rounded-2xl border border-line bg-surface p-5 shadow-soft">
+              <h2 className="text-lg font-semibold text-content">
                 {t('rewards.community.syncPending')}
               </h2>
-              <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
+              <p className="mt-2 text-sm text-content-secondary">
                 {t('rewards.community.syncPendingDesc')}
               </p>
             </div>
           )}
         </section>
 
-        <section className="rounded-[1.25rem] bg-[#f2f4f6] dark:bg-neutral-800/60 p-4 text-sm text-stone-600 dark:text-neutral-300">
+        <section className="rounded-[1.25rem] bg-[#f2f4f6] dark:bg-surface-muted/60 p-4 text-sm text-content-secondary">
           <div className="flex items-center justify-between gap-3">
             <span>{t('rewards.community.discordServer')}</span>
-            <span className="font-semibold text-stone-900 dark:text-neutral-100">
+            <span className="font-semibold text-content">
               {!snapshot
                 ? t('rewards.community.discordWaiting')
                 : snapshot.discord.membershipStatus === 'member'
@@ -493,9 +489,7 @@ export default function RewardsCommunityTab({
           {discordLinked && discordUsername ? (
             <div className="mt-3 flex items-center justify-between gap-3">
               <span>{t('rewards.community.discordAccount')}</span>
-              <span
-                data-testid="rewards-discord-username"
-                className="font-semibold text-stone-900 dark:text-neutral-100">
+              <span data-testid="rewards-discord-username" className="font-semibold text-content">
                 {discordUsername}
               </span>
             </div>
@@ -503,9 +497,7 @@ export default function RewardsCommunityTab({
           {discordLinked && membershipStatus === 'member' ? (
             <div className="mt-3 flex items-center justify-between gap-3">
               <span>{t('rewards.community.rolesAndRewards')}</span>
-              <span
-                data-testid="rewards-roles-assigned"
-                className="font-semibold text-stone-900 dark:text-neutral-100">
+              <span data-testid="rewards-roles-assigned" className="font-semibold text-content">
                 {t('rewards.community.roleAssignmentCount')
                   .replace('{assigned}', String(assignedRoleCount))
                   .replace('{unlocked}', String(unlocked))}
@@ -514,7 +506,7 @@ export default function RewardsCommunityTab({
           ) : null}
           <div className="mt-3 flex items-center justify-between gap-3">
             <span>{t('rewards.community.currentStreak')}</span>
-            <span className="font-semibold text-stone-900 dark:text-neutral-100">
+            <span className="font-semibold text-content">
               {snapshot
                 ? t('rewards.community.streakDays').replace(
                     '{n}',
@@ -525,7 +517,7 @@ export default function RewardsCommunityTab({
           </div>
           <div className="mt-3 flex items-center justify-between gap-3">
             <span>{t('rewards.community.cumulativeTokens')}</span>
-            <span className="font-semibold text-stone-900 dark:text-neutral-100">
+            <span className="font-semibold text-content">
               {snapshot
                 ? formatNumber(snapshot.metrics.cumulativeTokens)
                 : t('rewards.community.unknown')}
diff --git a/app/src/components/rewards/RewardsCouponSection.tsx b/app/src/components/rewards/RewardsCouponSection.tsx
index 2ff2da5fa..5c9bccd10 100644
--- a/app/src/components/rewards/RewardsCouponSection.tsx
+++ b/app/src/components/rewards/RewardsCouponSection.tsx
@@ -23,7 +23,7 @@ function redemptionStatusClass(coupon: RedeemedCoupon): string {
   if (coupon.fulfilled) return 'bg-sage-100 dark:bg-sage-500/20 text-sage-700 dark:text-sage-300';
   if (coupon.activationType === 'CONDITIONAL')
     return 'bg-amber-50 dark:bg-amber-500/10 text-amber-800 dark:text-amber-200';
-  return 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200';
+  return 'bg-surface-subtle text-content-secondary';
 }
 
 const RewardsCouponSection = () => {
@@ -141,32 +141,26 @@ const RewardsCouponSection = () => {
 
   return (
     <>
-      <section className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 space-y-5">
+      <section className="bg-surface rounded-2xl shadow-soft border border-line p-6 space-y-5">
         <div className="space-y-2">
-          <h2 className="text-2xl font-semibold text-stone-900 dark:text-neutral-100">
-            {t('rewards.coupon.title')}
-          </h2>
-          <p className="max-w-2xl text-sm text-stone-600 dark:text-neutral-300">
-            {t('rewards.coupon.subtitle')}
-          </p>
+          <h2 className="text-2xl font-semibold text-content">{t('rewards.coupon.title')}</h2>
+          <p className="max-w-2xl text-sm text-content-secondary">{t('rewards.coupon.subtitle')}</p>
         </div>
 
         <div className="grid gap-4 sm:grid-cols-2">
-          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
-            <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+          <div className="rounded-xl border border-line bg-surface-muted p-4">
+            <div className="text-xs font-medium uppercase tracking-wide text-content-faint">
               {t('rewards.coupon.promoCredits')}
             </div>
-            <div className="mt-2 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
+            <div className="mt-2 text-2xl font-semibold text-content">
               {creditBalance ? formatUsd(creditBalance.promotionBalanceUsd) : loading ? '…' : '—'}
             </div>
           </div>
-          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
-            <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+          <div className="rounded-xl border border-line bg-surface-muted p-4">
+            <div className="text-xs font-medium uppercase tracking-wide text-content-faint">
               {t('rewards.coupon.redeemedCodes')}
             </div>
-            <div className="mt-2 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
-              {redeemedCoupons.length}
-            </div>
+            <div className="mt-2 text-2xl font-semibold text-content">{redeemedCoupons.length}</div>
           </div>
         </div>
 
@@ -187,7 +181,7 @@ const RewardsCouponSection = () => {
               }}
               placeholder={t('rewards.coupon.placeholder')}
               disabled={submitLoading}
-              className="flex-1 px-4 py-2.5 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 font-mono text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
+              className="flex-1 px-4 py-2.5 rounded-xl border border-line bg-surface font-mono text-content placeholder:text-stone-400 dark:text-content-faint dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
             />
             <Button
               variant="primary"
@@ -221,10 +215,10 @@ const RewardsCouponSection = () => {
           ) : null}
         </div>
       </section>
-      <section className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 space-y-5">
+      <section className="bg-surface rounded-2xl shadow-soft border border-line p-6 space-y-5">
         <div className="space-y-2">
           <div className="flex items-center justify-between gap-3">
-            <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            <h3 className="text-sm font-semibold text-content">
               {t('rewards.coupon.recentRedemptions')}
             </h3>
             <Button
@@ -232,25 +226,23 @@ const RewardsCouponSection = () => {
               size="xs"
               onClick={() => void loadCouponState()}
               disabled={loading}
-              className="text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200">
+              className="text-content-muted hover:text-content-secondary">
               {t('common.refresh')}
             </Button>
           </div>
 
           {loading && redeemedCoupons.length === 0 ? (
-            <p className="text-sm text-stone-500 dark:text-neutral-400">
-              {t('rewards.coupon.loadingHistory')}
-            </p>
+            <p className="text-sm text-content-muted">{t('rewards.coupon.loadingHistory')}</p>
           ) : null}
 
           {redeemedCoupons.length === 0 && !loading && !loadError ? (
-            <p className="text-sm text-stone-500 dark:text-neutral-400 rounded-xl border border-dashed border-stone-200 dark:border-neutral-800 px-4 py-6 text-center">
+            <p className="text-sm text-content-muted rounded-xl border border-dashed border-line px-4 py-6 text-center">
               {t('rewards.coupon.noCodes')}
             </p>
           ) : redeemedCoupons.length > 0 ? (
-            <div className="overflow-x-auto rounded-xl border border-stone-200 dark:border-neutral-800">
+            <div className="overflow-x-auto rounded-xl border border-line">
               <table className="min-w-full text-sm text-left">
-                <thead className="bg-stone-50 dark:bg-neutral-800/60 text-xs uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+                <thead className="bg-surface-muted text-xs uppercase tracking-wide text-content-muted">
                   <tr>
                     <th className="px-3 py-2 font-medium">{t('rewards.coupon.colCode')}</th>
                     <th className="px-3 py-2 font-medium">{t('rewards.coupon.colReward')}</th>
@@ -258,15 +250,13 @@ const RewardsCouponSection = () => {
                     <th className="px-3 py-2 font-medium">{t('rewards.coupon.colRedeemed')}</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-stone-100 dark:divide-neutral-800">
+                <tbody className="divide-y divide-line-subtle dark:divide-neutral-800">
                   {redeemedCoupons.map(coupon => (
                     <tr
                       key={`${coupon.code}-${coupon.redeemedAt ?? coupon.activationType}`}
-                      className="bg-white dark:bg-neutral-900">
-                      <td className="px-3 py-2 font-mono text-stone-800 dark:text-neutral-100">
-                        {coupon.code}
-                      </td>
-                      <td className="px-3 py-2 text-stone-700 dark:text-neutral-200">
+                      className="bg-surface">
+                      <td className="px-3 py-2 font-mono text-content">{coupon.code}</td>
+                      <td className="px-3 py-2 text-content-secondary">
                         {formatUsd(coupon.amountUsd)}
                       </td>
                       <td className="px-3 py-2">
@@ -279,7 +269,7 @@ const RewardsCouponSection = () => {
                               : t('rewards.coupon.statusRedeemed')}
                         </span>
                       </td>
-                      <td className="px-3 py-2 text-xs text-stone-500 dark:text-neutral-400">
+                      <td className="px-3 py-2 text-xs text-content-muted">
                         {formatDateTime(coupon.redeemedAt, t('rewards.coupon.pending'))}
                       </td>
                     </tr>
diff --git a/app/src/components/routines/RoutineCard.tsx b/app/src/components/routines/RoutineCard.tsx
index 20fa00990..dd38427bf 100644
--- a/app/src/components/routines/RoutineCard.tsx
+++ b/app/src/components/routines/RoutineCard.tsx
@@ -24,15 +24,15 @@ const RoutineCard = ({ job, runs, busyKeys, onToggle, onRunNow, onLoadRuns }: Ro
   const typeLabel = job.job_type === 'agent' ? t('routines.typeAgent') : t('routines.typeCommand');
 
   return (
-    <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-stone-200 dark:border-neutral-800 p-4 space-y-3">
+    <div className="bg-surface rounded-2xl border border-line p-4 space-y-3">
       {/* Header: name + type badge + toggle */}
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 truncate">
+            <h3 className="text-sm font-semibold text-content truncate">
               {formatRoutineName(job.name)}
             </h3>
-            <span className="flex-shrink-0 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide rounded-full bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400">
+            <span className="flex-shrink-0 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide rounded-full bg-surface-subtle text-content-muted">
               {typeLabel}
             </span>
           </div>
@@ -50,7 +50,7 @@ const RoutineCard = ({ job, runs, busyKeys, onToggle, onRunNow, onLoadRuns }: Ro
           aria-checked={job.enabled}
           aria-label={t('routines.toggleEnabled')}>
           <span
-            className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white dark:bg-neutral-900 shadow ring-0 transition duration-200 ease-in-out ${
+            className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-surface shadow ring-0 transition duration-200 ease-in-out ${
               job.enabled ? 'translate-x-5' : 'translate-x-0'
             }`}
           />
@@ -60,9 +60,9 @@ const RoutineCard = ({ job, runs, busyKeys, onToggle, onRunNow, onLoadRuns }: Ro
       {/* Schedule + next run + status */}
       <div className="space-y-1.5">
         {/* Schedule */}
-        <div className="flex items-center gap-2 text-xs text-stone-600 dark:text-neutral-300">
+        <div className="flex items-center gap-2 text-xs text-content-secondary">
           <svg
-            className="w-3.5 h-3.5 text-stone-400 dark:text-neutral-500 flex-shrink-0"
+            className="w-3.5 h-3.5 text-content-faint flex-shrink-0"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24">
@@ -78,7 +78,7 @@ const RoutineCard = ({ job, runs, busyKeys, onToggle, onRunNow, onLoadRuns }: Ro
 
         {/* Next run */}
         {job.enabled && (
-          <div className="flex items-center gap-2 text-xs text-stone-500 dark:text-neutral-400">
+          <div className="flex items-center gap-2 text-xs text-content-muted">
             <svg
               className="w-3.5 h-3.5 flex-shrink-0"
               fill="none"
@@ -101,11 +101,7 @@ const RoutineCard = ({ job, runs, busyKeys, onToggle, onRunNow, onLoadRuns }: Ro
         <div className="flex items-center gap-2 text-xs">
           <span
             className={`w-2 h-2 rounded-full flex-shrink-0 ${
-              isSuccess
-                ? 'bg-sage-500'
-                : isError
-                  ? 'bg-coral-500'
-                  : 'bg-stone-300 dark:bg-neutral-600'
+              isSuccess ? 'bg-sage-500' : isError ? 'bg-coral-500' : 'bg-surface-strong'
             }`}
           />
           <span
@@ -114,7 +110,7 @@ const RoutineCard = ({ job, runs, busyKeys, onToggle, onRunNow, onLoadRuns }: Ro
                 ? 'text-sage-700 dark:text-sage-300'
                 : isError
                   ? 'text-coral-600 dark:text-coral-400'
-                  : 'text-stone-400 dark:text-neutral-500'
+                  : 'text-content-faint'
             }>
             {isSuccess
               ? t('routines.lastRunSuccess')
diff --git a/app/src/components/routines/RoutineRunHistory.tsx b/app/src/components/routines/RoutineRunHistory.tsx
index 1ca3f6c7e..0e5d29620 100644
--- a/app/src/components/routines/RoutineRunHistory.tsx
+++ b/app/src/components/routines/RoutineRunHistory.tsx
@@ -28,7 +28,7 @@ const RoutineRunHistory = ({ runs, loading, onLoadRuns }: RoutineRunHistoryProps
         type="button"
         onClick={handleToggle}
         disabled={loading}
-        className="flex items-center gap-1.5 text-xs text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 transition-colors">
+        className="flex items-center gap-1.5 text-xs text-content-muted hover:text-content-secondary transition-colors">
         <svg
           className={`w-3 h-3 transition-transform duration-200 ${expanded ? 'rotate-90' : ''}`}
           fill="none"
@@ -42,9 +42,7 @@ const RoutineRunHistory = ({ runs, loading, onLoadRuns }: RoutineRunHistoryProps
       {expanded && (
         <div className="mt-2 space-y-1.5">
           {runs.length === 0 && !loading && (
-            <div className="text-xs text-stone-400 dark:text-neutral-500 pl-4">
-              {t('routines.noHistory')}
-            </div>
+            <div className="text-xs text-content-faint pl-4">{t('routines.noHistory')}</div>
           )}
           {runs.map(run => {
             const isSuccess = run.status === 'ok' || run.status === 'success';
@@ -59,16 +57,12 @@ const RoutineRunHistory = ({ runs, loading, onLoadRuns }: RoutineRunHistoryProps
                       isSuccess ? 'bg-sage-500' : 'bg-coral-500'
                     }`}
                   />
-                  <span className="text-stone-600 dark:text-neutral-300">
+                  <span className="text-content-secondary">
                     {isSuccess ? t('routines.statusSuccess') : t('routines.statusError')}
                   </span>
-                  <span className="text-stone-400 dark:text-neutral-500">
-                    {formatTimeAgo(run.finished_at)}
-                  </span>
+                  <span className="text-content-faint">{formatTimeAgo(run.finished_at)}</span>
                   {run.duration_ms != null && (
-                    <span className="text-stone-400 dark:text-neutral-500">
-                      ({formatDuration(run.duration_ms)})
-                    </span>
+                    <span className="text-content-faint">({formatDuration(run.duration_ms)})</span>
                   )}
                   {hasOutput && (
                     <button
@@ -80,7 +74,7 @@ const RoutineRunHistory = ({ runs, loading, onLoadRuns }: RoutineRunHistoryProps
                   )}
                 </div>
                 {isOutputExpanded && hasOutput && (
-                  <pre className="mt-1 ml-3.5 p-2 text-[11px] bg-stone-100 dark:bg-neutral-800 rounded-lg text-stone-600 dark:text-neutral-300 overflow-x-auto max-h-40 whitespace-pre-wrap break-words">
+                  <pre className="mt-1 ml-3.5 p-2 text-[11px] bg-surface-subtle rounded-lg text-content-secondary overflow-x-auto max-h-40 whitespace-pre-wrap break-words">
                     {run.output}
                   </pre>
                 )}
diff --git a/app/src/components/settings/LogoutAndClearActions.tsx b/app/src/components/settings/LogoutAndClearActions.tsx
index 4986ee3c8..dd9d1dc78 100644
--- a/app/src/components/settings/LogoutAndClearActions.tsx
+++ b/app/src/components/settings/LogoutAndClearActions.tsx
@@ -101,7 +101,7 @@ const LogoutAndClearActions = () => {
             role="dialog"
             aria-modal="true"
             aria-labelledby={modalTitleId}
-            className="bg-white dark:bg-neutral-900 rounded-2xl max-w-md w-full p-6 border border-stone-200 dark:border-neutral-800">
+            className="bg-surface rounded-2xl max-w-md w-full p-6 border border-line">
             <div className="flex items-center gap-3 mb-4">
               <div className="w-10 h-10 rounded-lg bg-amber-100 dark:bg-amber-500/20 flex items-center justify-center">
                 <svg
@@ -118,16 +118,14 @@ const LogoutAndClearActions = () => {
                 </svg>
               </div>
               <div>
-                <h3
-                  id={modalTitleId}
-                  className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+                <h3 id={modalTitleId} className="text-lg font-semibold text-content">
                   {t('clearData.title')}
                 </h3>
               </div>
             </div>
 
             <div className="mb-6">
-              <div className="text-stone-700 dark:text-neutral-200 text-sm leading-relaxed">
+              <div className="text-content-secondary text-sm leading-relaxed">
                 <p>{t('clearData.warning')}</p>
                 <ul className="list-disc pl-5 mt-2 space-y-1">
                   <li>{t('clearData.bulletSettings')}</li>
@@ -159,7 +157,7 @@ const LogoutAndClearActions = () => {
               <button
                 onClick={handleLogoutAndClearData}
                 disabled={isLoading}
-                className="flex-1 px-4 py-2 rounded-sm bg-amber-600 hover:bg-amber-500 text-white transition-colors disabled:opacity-50 flex items-center justify-center gap-2">
+                className="flex-1 px-4 py-2 rounded-sm bg-amber-600 hover:bg-amber-500 text-content-inverted transition-colors disabled:opacity-50 flex items-center justify-center gap-2">
                 {isLoading && (
                   <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                     <circle
diff --git a/app/src/components/settings/components/MemoryWindowControl.tsx b/app/src/components/settings/components/MemoryWindowControl.tsx
index b9d2729be..5a115c554 100644
--- a/app/src/components/settings/components/MemoryWindowControl.tsx
+++ b/app/src/components/settings/components/MemoryWindowControl.tsx
@@ -154,7 +154,7 @@ const MemoryWindowControl = ({ onError, onSaved }: Props) => {
       data-testid="memory-window-control">
       <div className="flex items-baseline justify-between">
         <div>
-          <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+          <h3 className="text-base font-semibold text-content">
             {t('settings.memoryWindow.title')}
           </h3>
           <p className="text-sm text-muted-foreground">{t('settings.memoryWindow.description')}</p>
diff --git a/app/src/components/settings/components/PageBackButton.tsx b/app/src/components/settings/components/PageBackButton.tsx
index aa5e59955..5e5646cb9 100644
--- a/app/src/components/settings/components/PageBackButton.tsx
+++ b/app/src/components/settings/components/PageBackButton.tsx
@@ -12,7 +12,7 @@ const PageBackButton = ({ label, onClick, trailingContent }: PageBackButtonProps
       <button
         type="button"
         onClick={onClick}
-        className="inline-flex items-center gap-2 rounded-full border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-2 text-sm font-semibold text-stone-700 dark:text-neutral-200 shadow-sm transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800">
+        className="inline-flex items-center gap-2 rounded-full border border-line bg-surface px-4 py-2 text-sm font-semibold text-content-secondary shadow-sm transition-colors hover:bg-surface-hover dark:bg-surface-muted/60 dark:border-line-strong dark:bg-surface dark:text-neutral-200 dark:hover:bg-surface-muted">
         <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
         </svg>
diff --git a/app/src/components/settings/components/SettingsBackButton.tsx b/app/src/components/settings/components/SettingsBackButton.tsx
index c6c75fbd5..ce4a363d4 100644
--- a/app/src/components/settings/components/SettingsBackButton.tsx
+++ b/app/src/components/settings/components/SettingsBackButton.tsx
@@ -51,13 +51,13 @@ const SettingsBackButtonView = ({
   const isTopLevel = pathname.split('/').filter(Boolean).length <= 2;
   const className =
     inTwoPaneShell && isTopLevel
-      ? 'md:hidden w-6 h-6 flex items-center justify-center rounded-full hover:bg-stone-100 dark:bg-neutral-800 dark:hover:bg-neutral-800 transition-colors mr-2'
-      : 'w-6 h-6 flex items-center justify-center rounded-full hover:bg-stone-100 dark:bg-neutral-800 dark:hover:bg-neutral-800 transition-colors mr-2';
+      ? 'md:hidden w-6 h-6 flex items-center justify-center rounded-full hover:bg-surface-hover dark:bg-surface-muted transition-colors mr-2'
+      : 'w-6 h-6 flex items-center justify-center rounded-full hover:bg-surface-hover dark:bg-surface-muted transition-colors mr-2';
 
   return (
     <button onClick={onBack} className={className} aria-label={t('common.back')}>
       <svg
-        className="w-4 h-4 text-stone-500 dark:text-neutral-400"
+        className="w-4 h-4 text-content-muted"
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24">
diff --git a/app/src/components/settings/components/SettingsHeader.tsx b/app/src/components/settings/components/SettingsHeader.tsx
index e8725f0f4..aaeb6b2cc 100644
--- a/app/src/components/settings/components/SettingsHeader.tsx
+++ b/app/src/components/settings/components/SettingsHeader.tsx
@@ -53,9 +53,7 @@ const SettingsHeader = ({
           {showBackButton && <SettingsBackButton onBack={onBack} />}
 
           {/* Title */}
-          <h2 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
-            {title ?? t('nav.settings')}
-          </h2>
+          <h2 className="text-base font-semibold text-content">{title ?? t('nav.settings')}</h2>
         </div>
 
         {action && <div className="flex-shrink-0">{action}</div>}
diff --git a/app/src/components/settings/components/SettingsMenuItem.tsx b/app/src/components/settings/components/SettingsMenuItem.tsx
index ffd02aff2..b824546e8 100644
--- a/app/src/components/settings/components/SettingsMenuItem.tsx
+++ b/app/src/components/settings/components/SettingsMenuItem.tsx
@@ -24,13 +24,9 @@ const SettingsMenuItem = ({
   rightElement,
 }: SettingsMenuItemProps) => {
   // Color variations for dangerous items (like logout/delete)
-  const titleColor = dangerous
-    ? 'text-amber-600 dark:text-amber-300'
-    : 'text-stone-900 dark:text-neutral-100';
-  const iconColor = dangerous
-    ? 'text-amber-600 dark:text-amber-300'
-    : 'text-stone-900 dark:text-neutral-100';
-  const borderColor = 'border-stone-200 dark:border-neutral-800';
+  const titleColor = dangerous ? 'text-amber-600 dark:text-amber-300' : 'text-content';
+  const iconColor = dangerous ? 'text-amber-600 dark:text-amber-300' : 'text-content';
+  const borderColor = 'border-line';
 
   // Border classes for first/last items
   const borderClasses = isLast ? '' : `border-b ${borderColor}`;
@@ -53,7 +49,7 @@ const SettingsMenuItem = ({
         type="button"
         data-testid={testId}
         onClick={onClick}
-        className={`w-full flex items-center justify-between py-3 px-4 bg-stone-50 dark:bg-neutral-900/40 text-stone-900 dark:text-neutral-100 ${borderClasses} hover:bg-stone-100 dark:hover:bg-neutral-800/60 transition-all duration-200 text-left ${roundedClasses} focus:outline-none focus:ring-0 focus:border-inherit`}>
+        className={`w-full flex items-center justify-between py-3 px-4 bg-surface-muted text-content ${borderClasses} hover:bg-surface-hover transition-all duration-200 text-left ${roundedClasses} focus:outline-none focus:ring-0 focus:border-inherit`}>
         {content}
       </button>
     );
@@ -62,7 +58,7 @@ const SettingsMenuItem = ({
   return (
     <div
       data-testid={testId}
-      className={`w-full flex items-center justify-between py-3 px-4 bg-stone-50 dark:bg-neutral-900/40 text-stone-900 dark:text-neutral-100 ${borderClasses} ${roundedClasses}`}>
+      className={`w-full flex items-center justify-between py-3 px-4 bg-surface-muted text-content ${borderClasses} ${roundedClasses}`}>
       {content}
     </div>
   );
diff --git a/app/src/components/settings/controls/SettingsBadge.tsx b/app/src/components/settings/controls/SettingsBadge.tsx
index 6adf56560..abf85a951 100644
--- a/app/src/components/settings/controls/SettingsBadge.tsx
+++ b/app/src/components/settings/controls/SettingsBadge.tsx
@@ -9,8 +9,7 @@ export interface SettingsBadgeProps {
 }
 
 const VARIANTS: Record<SettingsBadgeVariant, string> = {
-  neutral:
-    'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300 border-neutral-200 dark:border-neutral-700',
+  neutral: 'bg-surface-subtle text-content-secondary border-line dark:border-line-strong',
   primary:
     'bg-primary-50 dark:bg-primary-500/10 text-primary-700 dark:text-primary-300 border-primary-200 dark:border-primary-500/30',
   success:
diff --git a/app/src/components/settings/controls/SettingsCheckbox.tsx b/app/src/components/settings/controls/SettingsCheckbox.tsx
index 998626e15..021ac6b14 100644
--- a/app/src/components/settings/controls/SettingsCheckbox.tsx
+++ b/app/src/components/settings/controls/SettingsCheckbox.tsx
@@ -26,8 +26,8 @@ function SettingsCheckbox({
   }, [indeterminate]);
 
   const classes =
-    'h-4 w-4 rounded-sm cursor-pointer border border-neutral-300 dark:border-neutral-600 ' +
-    'bg-white dark:bg-neutral-800 accent-primary-500 ' +
+    'h-4 w-4 rounded-sm cursor-pointer border border-line-strong dark:border-neutral-600 ' +
+    'bg-surface accent-primary-500 ' +
     'transition-colors duration-150 ' +
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 ' +
     'focus-visible:ring-offset-white dark:focus-visible:ring-offset-neutral-900 ' +
diff --git a/app/src/components/settings/controls/SettingsEmptyState.tsx b/app/src/components/settings/controls/SettingsEmptyState.tsx
index f3c40bf86..3b1864bb1 100644
--- a/app/src/components/settings/controls/SettingsEmptyState.tsx
+++ b/app/src/components/settings/controls/SettingsEmptyState.tsx
@@ -4,10 +4,7 @@ export interface SettingsEmptyStateProps {
 }
 
 const SettingsEmptyState = ({ label, className }: SettingsEmptyStateProps) => {
-  const classes = [
-    'px-4 py-4 text-xs text-neutral-400 dark:text-neutral-500 italic',
-    className ?? '',
-  ]
+  const classes = ['px-4 py-4 text-xs text-content-faint italic', className ?? '']
     .filter(Boolean)
     .join(' ');
 
diff --git a/app/src/components/settings/controls/SettingsListItem.tsx b/app/src/components/settings/controls/SettingsListItem.tsx
index 475ff06cc..47f9a4c98 100644
--- a/app/src/components/settings/controls/SettingsListItem.tsx
+++ b/app/src/components/settings/controls/SettingsListItem.tsx
@@ -19,10 +19,7 @@ const SettingsListItem = ({
   mono = false,
   'data-testid': testId,
 }: SettingsListItemProps) => {
-  const labelClass = [
-    'text-xs text-neutral-800 dark:text-neutral-100 truncate',
-    mono ? 'font-mono' : '',
-  ]
+  const labelClass = ['text-xs text-content truncate', mono ? 'font-mono' : '']
     .filter(Boolean)
     .join(' ');
 
diff --git a/app/src/components/settings/controls/SettingsNumberField.tsx b/app/src/components/settings/controls/SettingsNumberField.tsx
index 2d7e0f12a..135a58613 100644
--- a/app/src/components/settings/controls/SettingsNumberField.tsx
+++ b/app/src/components/settings/controls/SettingsNumberField.tsx
@@ -66,12 +66,12 @@ const SettingsNumberField = ({
       {hasMeta && (
         <div className="flex flex-col leading-tight">
           {unit && (
-            <span className="text-xs font-medium text-neutral-600 dark:text-neutral-400">
+            <span className="text-xs font-medium text-content-secondary dark:text-content-muted">
               {unit}
             </span>
           )}
           {hasRange && (
-            <span className="text-[11px] text-neutral-400 dark:text-neutral-500">
+            <span className="text-[11px] text-content-faint">
               {min}&#x2013;{max}
             </span>
           )}
diff --git a/app/src/components/settings/controls/SettingsRow.tsx b/app/src/components/settings/controls/SettingsRow.tsx
index 2b7c2ff94..4d70ca568 100644
--- a/app/src/components/settings/controls/SettingsRow.tsx
+++ b/app/src/components/settings/controls/SettingsRow.tsx
@@ -29,13 +29,11 @@ const SettingsRow = ({
 
   const labelEl =
     label && htmlFor ? (
-      <label
-        htmlFor={htmlFor}
-        className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
+      <label htmlFor={htmlFor} className="text-sm font-medium text-content">
         {label}
       </label>
     ) : label ? (
-      <span className="text-sm font-medium text-neutral-800 dark:text-neutral-100">{label}</span>
+      <span className="text-sm font-medium text-content">{label}</span>
     ) : null;
 
   const labelBlock =
@@ -43,9 +41,7 @@ const SettingsRow = ({
       <div className={stacked ? undefined : 'flex-1 min-w-0'}>
         {labelEl}
         {description && (
-          <p className="mt-0.5 text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed">
-            {description}
-          </p>
+          <p className="mt-0.5 text-xs text-content-muted leading-relaxed">{description}</p>
         )}
       </div>
     ) : null;
diff --git a/app/src/components/settings/controls/SettingsSection.tsx b/app/src/components/settings/controls/SettingsSection.tsx
index 4a96c6d13..65841e4ed 100644
--- a/app/src/components/settings/controls/SettingsSection.tsx
+++ b/app/src/components/settings/controls/SettingsSection.tsx
@@ -8,8 +8,7 @@ export interface SettingsSectionProps {
 }
 
 const SettingsSection = ({ title, description, children, className }: SettingsSectionProps) => {
-  const base =
-    'rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden';
+  const base = 'rounded-xl border border-line bg-surface overflow-hidden';
 
   return (
     <div className={[base, className ?? ''].filter(Boolean).join(' ')}>
@@ -17,17 +16,13 @@ const SettingsSection = ({ title, description, children, className }: SettingsSe
         <div className="px-4 pt-4 pb-0">
           {/* Real heading (h3, one level below SettingsHeader's h2) for a11y
               and so getByRole('heading') keeps resolving section titles. */}
-          <h3 className="text-xs font-semibold tracking-wide text-neutral-500 dark:text-neutral-400">
-            {title}
-          </h3>
+          <h3 className="text-xs font-semibold tracking-wide text-content-muted">{title}</h3>
           {description && (
-            <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed">
-              {description}
-            </p>
+            <p className="mt-1 text-xs text-content-muted leading-relaxed">{description}</p>
           )}
         </div>
       )}
-      <div className="divide-y divide-neutral-100 dark:divide-neutral-800">{children}</div>
+      <div className="divide-y divide-line-subtle dark:divide-neutral-800">{children}</div>
     </div>
   );
 };
diff --git a/app/src/components/settings/controls/SettingsSelect.tsx b/app/src/components/settings/controls/SettingsSelect.tsx
index a78efbcb2..3d1114a48 100644
--- a/app/src/components/settings/controls/SettingsSelect.tsx
+++ b/app/src/components/settings/controls/SettingsSelect.tsx
@@ -16,9 +16,9 @@ const SettingsSelect = forwardRef<HTMLSelectElement, SettingsSelectProps>(
     const sizeClass = inputSize === 'sm' ? 'h-8 pl-2.5' : 'h-9 pl-3';
 
     const classes = [
-      'block border border-neutral-300 dark:border-neutral-700',
-      'bg-white dark:bg-neutral-900',
-      'text-neutral-900 dark:text-neutral-100',
+      'block border border-line-strong',
+      'bg-surface',
+      'text-content',
       'text-sm rounded-lg',
       'focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20',
       'transition-colors duration-150',
diff --git a/app/src/components/settings/controls/SettingsStatusLine.tsx b/app/src/components/settings/controls/SettingsStatusLine.tsx
index 70f086457..ac20ce763 100644
--- a/app/src/components/settings/controls/SettingsStatusLine.tsx
+++ b/app/src/components/settings/controls/SettingsStatusLine.tsx
@@ -22,9 +22,7 @@ const SettingsStatusLine = ({
   if (error) {
     content = <span className="text-coral-600 dark:text-coral-300">{error}</span>;
   } else if (saving) {
-    content = (
-      <span className="text-neutral-500 dark:text-neutral-400 animate-pulse">{savingLabel}</span>
-    );
+    content = <span className="text-content-muted animate-pulse">{savingLabel}</span>;
   } else if (savedNote) {
     content = (
       <span className="text-sage-700 dark:text-sage-300 flex items-center gap-1">
diff --git a/app/src/components/settings/controls/SettingsSwitch.tsx b/app/src/components/settings/controls/SettingsSwitch.tsx
index 578535b09..4e06fc6e7 100644
--- a/app/src/components/settings/controls/SettingsSwitch.tsx
+++ b/app/src/components/settings/controls/SettingsSwitch.tsx
@@ -23,10 +23,10 @@ const SettingsSwitch = ({
     'motion-reduce:transition-none ' +
     'disabled:cursor-not-allowed disabled:opacity-50';
 
-  const trackColor = checked ? 'bg-primary-500' : 'bg-neutral-300 dark:bg-neutral-600';
+  const trackColor = checked ? 'bg-primary-500' : 'bg-surface-strong';
 
   const thumbBase =
-    'pointer-events-none inline-block h-[18px] w-[18px] transform rounded-full bg-white shadow-sm ring-0 ' +
+    'pointer-events-none inline-block h-[18px] w-[18px] transform rounded-full bg-surface shadow-sm ring-0 ' +
     'transition-transform duration-200 ease-in-out motion-reduce:transition-none';
 
   const thumbPosition = checked ? 'translate-x-[16px]' : 'translate-x-0';
diff --git a/app/src/components/settings/controls/SettingsTextArea.tsx b/app/src/components/settings/controls/SettingsTextArea.tsx
index 5413b6d8a..b898a94d7 100644
--- a/app/src/components/settings/controls/SettingsTextArea.tsx
+++ b/app/src/components/settings/controls/SettingsTextArea.tsx
@@ -9,13 +9,13 @@ const SettingsTextArea = forwardRef<HTMLTextAreaElement, SettingsTextAreaProps>(
   ({ invalid = false, className, ...rest }, ref) => {
     const ringClass = invalid
       ? 'border-coral-400 focus:border-coral-500 focus:ring-coral-500/20'
-      : 'border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20';
+      : 'border-line-strong focus:border-primary-500 focus:ring-primary-500/20';
 
     const classes = [
       'block w-full rounded-lg border',
-      'bg-white dark:bg-neutral-900',
-      'text-neutral-900 dark:text-neutral-100',
-      'placeholder-neutral-400 dark:placeholder-neutral-500',
+      'bg-surface',
+      'text-content',
+      'placeholder-content-faint',
       'text-sm px-3 py-2',
       'focus:outline-none focus:ring-2',
       'transition-colors duration-150',
diff --git a/app/src/components/settings/layout/SettingsLayout.tsx b/app/src/components/settings/layout/SettingsLayout.tsx
index dd2bb8820..1fde74e5f 100644
--- a/app/src/components/settings/layout/SettingsLayout.tsx
+++ b/app/src/components/settings/layout/SettingsLayout.tsx
@@ -28,7 +28,7 @@ const SettingsLayout = () => {
           (title, description, sibling sub-nav). The panel is wrapped in a card
           so settings pages get a surface/background instead of sitting flush. */}
       <div className="mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col p-4">
-        <div className="min-h-0 flex-1 overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-soft dark:border-neutral-800 dark:bg-neutral-900">
+        <div className="min-h-0 flex-1 overflow-hidden rounded-2xl border border-line bg-surface shadow-soft">
           <Outlet />
         </div>
       </div>
diff --git a/app/src/components/settings/layout/SettingsSidebar.tsx b/app/src/components/settings/layout/SettingsSidebar.tsx
index d7f55e6a8..b329d50b0 100644
--- a/app/src/components/settings/layout/SettingsSidebar.tsx
+++ b/app/src/components/settings/layout/SettingsSidebar.tsx
@@ -88,7 +88,7 @@ const SettingsSidebar = () => {
             }>
             {section.labelKey && (
               <div className="px-2 pb-0.5 pt-2.5">
-                <span className="text-[10px] font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400">
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-content-muted">
                   {t(section.labelKey)}
                 </span>
               </div>
@@ -102,8 +102,8 @@ const SettingsSidebar = () => {
                     'bg-primary-50 font-medium text-primary-700 dark:bg-primary-500/15 dark:text-primary-200'
                   : highlight
                     ? // Highlighted-but-inactive rows accent the text only (no bg).
-                      'font-medium text-primary-700 hover:bg-stone-50 dark:text-primary-300 dark:hover:bg-neutral-800/60'
-                    : 'text-stone-600 hover:bg-stone-50 hover:text-stone-900 dark:text-neutral-300 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-100';
+                      'font-medium text-primary-700 hover:bg-surface-hover dark:text-primary-300'
+                    : 'text-content-secondary hover:bg-surface-hover hover:text-content';
                 return (
                   <li key={row.id}>
                     <button
@@ -116,7 +116,7 @@ const SettingsSidebar = () => {
                         className={`shrink-0 ${
                           active || highlight
                             ? 'text-primary-600 dark:text-primary-400'
-                            : 'text-stone-400 dark:text-neutral-500'
+                            : 'text-content-faint'
                         }`}>
                         {SETTINGS_NAV_ICONS[row.id] ?? null}
                       </span>
@@ -132,7 +132,7 @@ const SettingsSidebar = () => {
         {isSearching && !hasRows && (
           <p
             data-testid="settings-search-empty"
-            className="px-2 pt-3 text-center text-xs text-stone-400 dark:text-neutral-500">
+            className="px-2 pt-3 text-center text-xs text-content-faint">
             {t('settings.settingsSearch.noResults').replace('{query}', searchQuery.trim())}
           </p>
         )}
diff --git a/app/src/components/settings/layout/settingsNavIcons.tsx b/app/src/components/settings/layout/settingsNavIcons.tsx
index 6b07d0bdf..c27b04144 100644
--- a/app/src/components/settings/layout/settingsNavIcons.tsx
+++ b/app/src/components/settings/layout/settingsNavIcons.tsx
@@ -18,6 +18,11 @@ const stroke = (d: string) => (
 export const SETTINGS_NAV_ICONS: Record<string, ReactNode> = {
   account: icon(stroke('M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z')),
   appearance: icon(stroke('M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z')),
+  theme: icon(
+    stroke(
+      'M4.098 19.902a3.75 3.75 0 005.304 0l6.402-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z'
+    )
+  ),
   notifications: icon(
     stroke(
       'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'
diff --git a/app/src/components/settings/modal/SettingsModalFrame.tsx b/app/src/components/settings/modal/SettingsModalFrame.tsx
index 1d946358f..21947524b 100644
--- a/app/src/components/settings/modal/SettingsModalFrame.tsx
+++ b/app/src/components/settings/modal/SettingsModalFrame.tsx
@@ -61,7 +61,7 @@ export function SettingsModalFrame({ onClose, children, labelledBy }: SettingsMo
           aria-label={t('common.close')}
           data-testid="settings-modal-close"
           onClick={onClose}
-          className="absolute bottom-full right-0 mb-2 h-8 w-8 rounded-full text-stone-500 shadow-md hover:text-stone-700 dark:text-neutral-400 dark:hover:text-neutral-200">
+          className="absolute bottom-full right-0 mb-2 h-8 w-8 rounded-full text-content-muted shadow-md hover:text-content-secondary">
           <CloseIcon className="h-4 w-4" />
         </Button>
         <div
@@ -72,7 +72,7 @@ export function SettingsModalFrame({ onClose, children, labelledBy }: SettingsMo
           aria-label={labelledBy ? undefined : t('nav.settings')}
           tabIndex={-1}
           data-testid="settings-modal-card"
-          className="flex h-full w-full overflow-hidden rounded-2xl bg-white shadow-xl animate-fade-up focus:outline-none dark:bg-neutral-900">
+          className="flex h-full w-full overflow-hidden rounded-2xl bg-surface shadow-xl animate-fade-up focus:outline-none">
           {children}
         </div>
       </div>
diff --git a/app/src/components/settings/modal/SettingsModalLayout.tsx b/app/src/components/settings/modal/SettingsModalLayout.tsx
index 34b8748c5..8cd5d99d7 100644
--- a/app/src/components/settings/modal/SettingsModalLayout.tsx
+++ b/app/src/components/settings/modal/SettingsModalLayout.tsx
@@ -24,7 +24,7 @@ export default function SettingsModalLayout() {
   return (
     <SettingsLayoutProvider value={{ inTwoPaneShell: true }}>
       <div className="flex h-full w-full min-h-0">
-        <div className="h-full w-64 flex-shrink-0 overflow-hidden border-r border-stone-200 dark:border-neutral-800">
+        <div className="h-full w-64 flex-shrink-0 overflow-hidden border-r border-line">
           <SettingsSidebar />
         </div>
         {/* Right column: the routed panel. The sibling sub-nav pill row now
diff --git a/app/src/components/settings/panels/AIPanel.tsx b/app/src/components/settings/panels/AIPanel.tsx
index 0cdef1e68..5b0e6b346 100644
--- a/app/src/components/settings/panels/AIPanel.tsx
+++ b/app/src/components/settings/panels/AIPanel.tsx
@@ -602,10 +602,7 @@ function formatI18n(template: string, vars: Record<string, string | number>): st
 }
 
 function slugTone(slug: string): string {
-  return (
-    BUILTIN_PROVIDER_META[slug]?.tone ??
-    'bg-neutral-100 dark:bg-neutral-800 ring-neutral-300 text-neutral-900 dark:text-neutral-100'
-  );
+  return BUILTIN_PROVIDER_META[slug]?.tone ?? 'bg-surface-subtle ring-neutral-300 text-content';
 }
 
 const ProviderToggleChip = ({
@@ -790,7 +787,7 @@ const ProviderKeyDialog = ({
       aria-modal="true"
       aria-label={formatI18n(t('settings.ai.connectProviderDialog'), { label })}
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4">
-      <div className="relative w-full max-w-md rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-soft">
+      <div className="relative w-full max-w-md rounded-2xl border border-line bg-surface p-6 shadow-soft">
         {platformLinkUrl ? (
           <a
             href={platformLinkUrl}
@@ -811,14 +808,14 @@ const ProviderKeyDialog = ({
           </a>
         ) : null}
         <div className="mb-4" style={platformLinkUrl ? { paddingInlineEnd: '9rem' } : undefined}>
-          <h3 className="text-base font-semibold text-neutral-900 dark:text-neutral-100">{`${t('settings.ai.connectProvider')} ${label}`}</h3>
-          <p className="mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">{helper}</p>
+          <h3 className="text-base font-semibold text-content">{`${t('settings.ai.connectProvider')} ${label}`}</h3>
+          <p className="mt-0.5 text-xs text-content-muted">{helper}</p>
         </div>
 
         <div className="flex flex-col gap-1.5">
           <label
             htmlFor="provider-key-input"
-            className="text-xs font-medium text-neutral-700 dark:text-neutral-200">
+            className="text-xs font-medium text-content-secondary">
             {fieldLabel}
           </label>
           <SettingsTextField
@@ -847,7 +844,7 @@ const ProviderKeyDialog = ({
             <>
               <label
                 htmlFor="provider-key-input-key"
-                className="mt-3 text-xs font-medium text-neutral-700 dark:text-neutral-200">
+                className="mt-3 text-xs font-medium text-content-secondary">
                 {t('settings.ai.apiKeyFieldLabel')}
               </label>
               <SettingsTextField
@@ -874,11 +871,11 @@ const ProviderKeyDialog = ({
         </div>
 
         {oauthAction ? (
-          <div className="mt-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/50 p-3">
-            <div className="text-[11px] font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+          <div className="mt-4 rounded-xl border border-line bg-surface-muted dark:bg-surface-muted/50 p-3">
+            <div className="text-[11px] font-semibold uppercase tracking-wide text-content-muted">
               {t('settings.ai.or')}
             </div>
-            <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+            <p className="mt-1 text-xs text-content-muted">
               {oauthAction.description ?? t('settings.ai.openRouterOauthDescription')}
             </p>
             <Button
@@ -1036,10 +1033,10 @@ const LoopToggle = ({
   busy: boolean;
   onToggle: () => void;
 }) => (
-  <div className="flex items-center justify-between gap-3 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
+  <div className="flex items-center justify-between gap-3 rounded-lg border border-line bg-surface px-3 py-2">
     <div className="min-w-0">
-      <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">{label}</div>
-      <div className="text-xs text-neutral-500 dark:text-neutral-400">{description}</div>
+      <div className="text-sm font-medium text-content">{label}</div>
+      <div className="text-xs text-content-muted">{description}</div>
     </div>
     <SettingsSwitch
       id={`loop-toggle-${label.toLowerCase().replace(/[^a-z0-9]/g, '-')}`}
@@ -1060,32 +1057,22 @@ const MetricTile = ({
   value: string;
   detail?: string;
 }) => (
-  <div className="min-w-0 overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2">
-    <div className="truncate text-[10px] font-semibold uppercase tracking-wide text-neutral-400 dark:text-neutral-500">
+  <div className="min-w-0 overflow-hidden rounded-md bg-surface-muted px-3 py-2">
+    <div className="truncate text-[10px] font-semibold uppercase tracking-wide text-content-faint">
       {label}
     </div>
-    <div className="mt-1 truncate text-sm font-semibold text-neutral-900 dark:text-neutral-100">
-      {value}
-    </div>
-    {detail ? (
-      <div className="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-neutral-400">
-        {detail}
-      </div>
-    ) : null}
+    <div className="mt-1 truncate text-sm font-semibold text-content">{value}</div>
+    {detail ? <div className="mt-0.5 truncate text-[11px] text-content-muted">{detail}</div> : null}
   </div>
 );
 
 const FormulaRow = ({ label, value, detail }: { label: string; value: string; detail: string }) => (
-  <div className="min-w-0 overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
+  <div className="min-w-0 overflow-hidden rounded-md border border-line bg-surface px-3 py-2">
     <div className="flex items-center justify-between gap-3">
-      <span className="min-w-0 truncate text-xs font-medium text-neutral-800 dark:text-neutral-100">
-        {label}
-      </span>
-      <span className="shrink-0 font-mono text-xs text-neutral-600 dark:text-neutral-300">
-        {value}
-      </span>
+      <span className="min-w-0 truncate text-xs font-medium text-content">{label}</span>
+      <span className="shrink-0 font-mono text-xs text-content-secondary">{value}</span>
     </div>
-    <div className="mt-1 truncate text-[11px] text-neutral-500 dark:text-neutral-400">{detail}</div>
+    <div className="mt-1 truncate text-[11px] text-content-muted">{detail}</div>
   </div>
 );
 
@@ -1326,11 +1313,11 @@ export const BackgroundLoopControls = ({
   return (
     <div className="space-y-4">
       {!hideHeader && (
-        <div className="border-b border-neutral-200 dark:border-neutral-800 pb-2">
-          <h2 className="text-base font-semibold text-neutral-900 dark:text-neutral-100">
+        <div className="border-b border-line pb-2">
+          <h2 className="text-base font-semibold text-content">
             {t('settings.ai.backgroundLoops')}
           </h2>
-          <p className="mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
+          <p className="mt-0.5 text-xs text-content-muted">
             {t('settings.ai.backgroundLoopsDesc')}
           </p>
         </div>
@@ -1341,13 +1328,13 @@ export const BackgroundLoopControls = ({
       <section className={`grid gap-3 ${gridCols}`}>
         {showHeartbeat && (
           <div className="space-y-3">
-            <div className="rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-3">
+            <div className="rounded-lg border border-line bg-surface-muted p-3">
               <div className="mb-3 flex items-center justify-between gap-3">
                 <div>
-                  <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+                  <div className="text-sm font-semibold text-content">
                     {t('settings.ai.heartbeatControls')}
                   </div>
-                  <div className="text-xs text-neutral-500 dark:text-neutral-400">
+                  <div className="text-xs text-content-muted">
                     {t('settings.ai.heartbeatControlsDesc')}
                   </div>
                 </div>
@@ -1388,8 +1375,8 @@ export const BackgroundLoopControls = ({
                       void applyHeartbeatPatch({ notify_meetings: !settings.notify_meetings })
                     }
                   />
-                  <div className="grid gap-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 sm:grid-cols-3">
-                    <label className="min-w-0 space-y-1 text-xs font-medium text-neutral-700 dark:text-neutral-200">
+                  <div className="grid gap-2 rounded-lg border border-line bg-surface px-3 py-2 sm:grid-cols-3">
+                    <label className="min-w-0 space-y-1 text-xs font-medium text-content-secondary">
                       <span className="whitespace-nowrap">{t('settings.ai.calendarCap')}</span>
                       <SettingsSelect
                         aria-label={t('settings.ai.calendarCap')}
@@ -1409,7 +1396,7 @@ export const BackgroundLoopControls = ({
                         ))}
                       </SettingsSelect>
                     </label>
-                    <label className="min-w-0 space-y-1 text-xs font-medium text-neutral-700 dark:text-neutral-200">
+                    <label className="min-w-0 space-y-1 text-xs font-medium text-content-secondary">
                       <span className="whitespace-nowrap">{t('settings.ai.meetingLookahead')}</span>
                       <SettingsSelect
                         aria-label={t('settings.ai.meetingLookahead')}
@@ -1429,7 +1416,7 @@ export const BackgroundLoopControls = ({
                         ))}
                       </SettingsSelect>
                     </label>
-                    <label className="min-w-0 space-y-1 text-xs font-medium text-neutral-700 dark:text-neutral-200">
+                    <label className="min-w-0 space-y-1 text-xs font-medium text-content-secondary">
                       <span className="whitespace-nowrap">
                         {t('settings.ai.reminderLookahead')}
                       </span>
@@ -1484,9 +1471,9 @@ export const BackgroundLoopControls = ({
                     }
                   />
 
-                  <div className="flex flex-wrap items-center gap-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
+                  <div className="flex flex-wrap items-center gap-2 rounded-lg border border-line bg-surface px-3 py-2">
                     <label
-                      className="text-xs font-medium text-neutral-700 dark:text-neutral-200"
+                      className="text-xs font-medium text-content-secondary"
                       htmlFor="heartbeat-interval">
                       {t('settings.ai.interval')}
                     </label>
@@ -1526,7 +1513,7 @@ export const BackgroundLoopControls = ({
                   )}
                 </div>
               ) : (
-                <div className="text-xs text-neutral-500 dark:text-neutral-400">
+                <div className="text-xs text-content-muted">
                   {loading
                     ? t('settings.ai.loadingHeartbeatControls')
                     : t('settings.ai.heartbeatControlsUnavailable')}
@@ -1534,28 +1521,26 @@ export const BackgroundLoopControls = ({
               )}
             </div>
 
-            <div className="overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60">
-              <div className="border-b border-neutral-200 dark:border-neutral-800 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-neutral-400 dark:text-neutral-500">
+            <div className="overflow-hidden rounded-lg border border-line bg-surface-muted">
+              <div className="border-b border-line px-3 py-2 text-xs font-semibold uppercase tracking-wide text-content-faint">
                 {t('settings.ai.loopMap')}
               </div>
-              <div className="divide-y divide-neutral-200 dark:divide-neutral-800">
+              <div className="divide-y divide-line dark:divide-neutral-800">
                 {loops.map(loop => (
                   <div key={loop.name} className="grid gap-2 px-3 py-3 md:grid-cols-[150px_1fr]">
                     <div className="min-w-0">
-                      <div className="truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
-                        {loop.name}
-                      </div>
-                      <div className="mt-0.5 flex flex-wrap gap-1 text-[11px] text-neutral-500 dark:text-neutral-400">
+                      <div className="truncate text-sm font-medium text-content">{loop.name}</div>
+                      <div className="mt-0.5 flex flex-wrap gap-1 text-[11px] text-content-muted">
                         <span>{loop.enabled ? t('settings.ai.on') : t('settings.ai.off')}</span>
                         <span>{loop.cadence}</span>
                       </div>
                     </div>
-                    <div className="min-w-0 text-xs text-neutral-600 dark:text-neutral-300">
+                    <div className="min-w-0 text-xs text-content-secondary">
                       <div>{loop.work}</div>
-                      <div className="mt-1 font-mono text-[11px] text-neutral-500 dark:text-neutral-400">
+                      <div className="mt-1 font-mono text-[11px] text-content-muted">
                         {t('settings.ai.routeLabel').replace('{route}', loop.route)}
                       </div>
-                      <div className="mt-1 text-neutral-500 dark:text-neutral-400">{loop.risk}</div>
+                      <div className="mt-1 text-content-muted">{loop.risk}</div>
                     </div>
                   </div>
                 ))}
@@ -1565,13 +1550,13 @@ export const BackgroundLoopControls = ({
         )}
 
         {showLedger && (
-          <div className="rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
+          <div className="rounded-lg border border-line bg-surface p-3">
             <div className="flex items-center justify-between gap-3">
               <div>
-                <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+                <div className="text-sm font-semibold text-content">
                   {t('settings.ai.recentUsageLedger')}
                 </div>
-                <div className="text-xs text-neutral-500 dark:text-neutral-400">
+                <div className="text-xs text-content-muted">
                   {t('settings.ai.recentUsageLedgerDesc')}
                 </div>
               </div>
@@ -1622,8 +1607,8 @@ export const BackgroundLoopControls = ({
               />
             </div>
 
-            <div className="mt-3 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-3">
-              <div className="text-[10px] font-semibold uppercase tracking-wide text-neutral-400 dark:text-neutral-500">
+            <div className="mt-3 rounded-lg border border-line bg-surface-muted p-3">
+              <div className="text-[10px] font-semibold uppercase tracking-wide text-content-faint">
                 {t('settings.ai.budgetMath')}
               </div>
               <div className="mt-2 grid gap-2">
@@ -1685,8 +1670,8 @@ export const BackgroundLoopControls = ({
               </div>
             </div>
 
-            <div className="mt-3 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-3">
-              <div className="text-[10px] font-semibold uppercase tracking-wide text-neutral-400 dark:text-neutral-500">
+            <div className="mt-3 rounded-lg border border-line bg-surface-muted p-3">
+              <div className="text-[10px] font-semibold uppercase tracking-wide text-content-faint">
                 {t('settings.ai.loopCallBudget')}
               </div>
               <div className="mt-2 grid gap-2">
@@ -1737,7 +1722,7 @@ export const BackgroundLoopControls = ({
             </div>
 
             {latestSpend && (
-              <div className="mt-3 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2 text-xs text-neutral-600 dark:text-neutral-300">
+              <div className="mt-3 rounded-md border border-line bg-surface-muted px-3 py-2 text-xs text-content-secondary">
                 {t('settings.ai.latestSpend')
                   .replace('{amount}', formatUsd(spendAmount(latestSpend)))
                   .replace('{time}', new Date(latestSpend.createdAt).toLocaleString())
@@ -1747,7 +1732,7 @@ export const BackgroundLoopControls = ({
 
             <div className="mt-3 space-y-3">
               <div>
-                <div className="text-[10px] font-semibold uppercase tracking-wide text-neutral-400 dark:text-neutral-500">
+                <div className="text-[10px] font-semibold uppercase tracking-wide text-content-faint">
                   {t('settings.ai.topActions')}
                 </div>
                 <div className="mt-1 space-y-1">
@@ -1755,23 +1740,21 @@ export const BackgroundLoopControls = ({
                     actionSummary.map(([action, count, total]) => (
                       <div
                         key={action}
-                        className="flex items-center justify-between gap-2 text-xs text-neutral-600 dark:text-neutral-300">
+                        className="flex items-center justify-between gap-2 text-xs text-content-secondary">
                         <span className="truncate font-mono">{action}</span>
-                        <span className="shrink-0 text-neutral-500 dark:text-neutral-400">
+                        <span className="shrink-0 text-content-muted">
                           {count} / {formatUsd(total)}
                         </span>
                       </div>
                     ))
                   ) : (
-                    <div className="text-xs text-neutral-500 dark:text-neutral-400">
-                      {t('settings.ai.noSpendRows')}
-                    </div>
+                    <div className="text-xs text-content-muted">{t('settings.ai.noSpendRows')}</div>
                   )}
                 </div>
               </div>
 
               <div>
-                <div className="text-[10px] font-semibold uppercase tracking-wide text-neutral-400 dark:text-neutral-500">
+                <div className="text-[10px] font-semibold uppercase tracking-wide text-content-faint">
                   {t('settings.ai.topHours')}
                 </div>
                 <div className="mt-1 space-y-1">
@@ -1779,15 +1762,13 @@ export const BackgroundLoopControls = ({
                     hourSummary.map(([hour, total]) => (
                       <div
                         key={hour}
-                        className="flex items-center justify-between gap-2 text-xs text-neutral-600 dark:text-neutral-300">
+                        className="flex items-center justify-between gap-2 text-xs text-content-secondary">
                         <span>{hour}</span>
-                        <span className="font-mono text-neutral-500 dark:text-neutral-400">
-                          {formatUsd(total)}
-                        </span>
+                        <span className="font-mono text-content-muted">{formatUsd(total)}</span>
                       </div>
                     ))
                   ) : (
-                    <div className="text-xs text-neutral-500 dark:text-neutral-400">
+                    <div className="text-xs text-content-muted">
                       {t('settings.ai.noHourlySpend')}
                     </div>
                   )}
@@ -1837,26 +1818,20 @@ const WorkloadRow = ({
   return (
     <div className="flex items-center justify-between gap-3 py-3 transition-colors">
       <div className="min-w-0 flex-1 space-y-1">
-        <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
-          {t(workload.labelKey)}
-        </div>
-        <div className="text-xs leading-5 text-neutral-500 dark:text-neutral-400">
-          {t(workload.descriptionKey)}
-        </div>
-        <div className="text-[11px] leading-5 text-neutral-500 dark:text-neutral-400">
+        <div className="text-sm font-medium text-content">{t(workload.labelKey)}</div>
+        <div className="text-xs leading-5 text-content-muted">{t(workload.descriptionKey)}</div>
+        <div className="text-[11px] leading-5 text-content-muted">
           {t(WORKLOAD_MODEL_HINT_KEYS[workload.id])}
         </div>
         {resolved ? (
           <div
             className={`font-mono text-[11px] truncate ${
-              isCustom ? 'text-sky-700 dark:text-sky-200' : 'text-neutral-500 dark:text-neutral-400'
+              isCustom ? 'text-sky-700 dark:text-sky-200' : 'text-content-muted'
             }`}>
             {resolved}
           </div>
         ) : (
-          <div className="text-[11px] text-neutral-400 dark:text-neutral-500">
-            {t('settings.ai.workload.noModel')}
-          </div>
+          <div className="text-[11px] text-content-faint">{t('settings.ai.workload.noModel')}</div>
         )}
       </div>
       <Button
@@ -2197,16 +2172,14 @@ const CustomRoutingDialog = ({
         label: t(workload.labelKey),
       })}
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4">
-      <div className="w-full max-w-md rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-soft">
+      <div className="w-full max-w-md rounded-2xl border border-line bg-surface p-6 shadow-soft">
         <div className="flex items-start justify-between gap-3 mb-4">
           <div>
-            <h3 className="text-base font-semibold text-neutral-900 dark:text-neutral-100">
+            <h3 className="text-base font-semibold text-content">
               {t('settings.ai.customRouting')}
             </h3>
-            <p className="mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
-              {t(workload.labelKey)}
-            </p>
-            <p className="mt-2 max-w-md text-xs leading-5 text-neutral-500 dark:text-neutral-400">
+            <p className="mt-0.5 text-xs text-content-muted">{t(workload.labelKey)}</p>
+            <p className="mt-2 max-w-md text-xs leading-5 text-content-muted">
               {t(WORKLOAD_MODEL_HINT_KEYS[workload.id])}
             </p>
           </div>
@@ -2234,7 +2207,7 @@ const CustomRoutingDialog = ({
         ) : (
           <div className="flex flex-col gap-4">
             <div className="flex flex-col gap-1.5">
-              <label className="text-xs font-medium text-neutral-700 dark:text-neutral-200">
+              <label className="text-xs font-medium text-content-secondary">
                 {t('settings.ai.providerLabel')}
               </label>
               <SettingsSelect
@@ -2276,7 +2249,7 @@ const CustomRoutingDialog = ({
             </div>
 
             <div className="flex flex-col gap-1.5">
-              <label className="text-xs font-medium text-neutral-700 dark:text-neutral-200">
+              <label className="text-xs font-medium text-content-secondary">
                 {t('settings.ai.modelLabel')}
               </label>
               {source?.kind === 'local' ? (
@@ -2302,7 +2275,7 @@ const CustomRoutingDialog = ({
                     onChange={e => setModel(e.target.value)}
                     placeholder="sonnet"
                   />
-                  <p className="text-[11px] text-neutral-500 dark:text-neutral-400">
+                  <p className="text-[11px] text-content-muted">
                     A model id the <code>claude</code> CLI accepts — an alias (<code>sonnet</code>,{' '}
                     <code>opus</code>) or full name (<code>claude-sonnet-4-5</code>). Passed
                     verbatim to <code>claude --model</code>; marketing strings like{' '}
@@ -2326,7 +2299,7 @@ const CustomRoutingDialog = ({
                       onClick={() => setModelsKey(k => k + 1)}>
                       {t('common.retry')}
                     </Button>
-                    <span className="text-xs text-neutral-400 dark:text-neutral-500">
+                    <span className="text-xs text-content-faint">
                       {t('settings.ai.enterModelIdManually')}
                     </span>
                   </div>
@@ -2389,7 +2362,7 @@ const CustomRoutingDialog = ({
             {/* Temperature override (optional). When unchecked, the workload
                 inherits the provider/global default temperature. */}
             <div className="flex flex-col gap-1.5">
-              <label className="flex items-center justify-between gap-2 text-xs font-medium text-neutral-700 dark:text-neutral-200">
+              <label className="flex items-center justify-between gap-2 text-xs font-medium text-content-secondary">
                 <span className="inline-flex items-center gap-2">
                   <input
                     type="checkbox"
@@ -2398,12 +2371,12 @@ const CustomRoutingDialog = ({
                       resetTestState();
                       setTemperature(e.target.checked ? 0.7 : null);
                     }}
-                    className="h-3.5 w-3.5 rounded border-neutral-300 dark:border-neutral-700 text-primary-500 focus:ring-primary-500"
+                    className="h-3.5 w-3.5 rounded border-line-strong text-primary-500 focus:ring-primary-500"
                   />
                   {t('settings.ai.temperatureOverride')}
                 </span>
                 {temperature != null && (
-                  <span className="font-mono text-[11px] text-neutral-500 dark:text-neutral-400">
+                  <span className="font-mono text-[11px] text-content-muted">
                     {temperature.toFixed(2)}
                   </span>
                 )}
@@ -2437,11 +2410,11 @@ const CustomRoutingDialog = ({
                         setTemperature(Math.max(0, Math.min(2, v)));
                       }
                     }}
-                    className="w-16 rounded-lg border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs font-mono text-neutral-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                    className="w-16 rounded-lg border border-line-strong bg-surface px-2 py-1 text-xs font-mono text-content focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
                   />
                 </div>
               )}
-              <p className="text-[11px] text-neutral-400 dark:text-neutral-500">
+              <p className="text-[11px] text-content-faint">
                 {t('settings.ai.temperatureOverrideDesc')}
               </p>
             </div>
@@ -2451,19 +2424,17 @@ const CustomRoutingDialog = ({
                 attachments for it. Only shown once a concrete model is chosen. */}
             {registrySlug && model.trim().length > 0 && (
               <div className="flex flex-col gap-1.5">
-                <label className="inline-flex items-center gap-2 text-xs font-medium text-neutral-700 dark:text-neutral-200">
+                <label className="inline-flex items-center gap-2 text-xs font-medium text-content-secondary">
                   <input
                     type="checkbox"
                     checked={visionLocked ? true : vision}
                     onChange={e => setVision(e.target.checked)}
                     disabled={visionLocked}
-                    className="h-3.5 w-3.5 rounded border-neutral-300 dark:border-neutral-700 text-primary-500 focus:ring-primary-500 disabled:opacity-60 disabled:cursor-not-allowed"
+                    className="h-3.5 w-3.5 rounded border-line-strong text-primary-500 focus:ring-primary-500 disabled:opacity-60 disabled:cursor-not-allowed"
                   />
                   {t('settings.ai.modelVision')}
                 </label>
-                <p className="text-[11px] text-neutral-400 dark:text-neutral-500">
-                  {t('settings.ai.modelVisionDesc')}
-                </p>
+                <p className="text-[11px] text-content-faint">{t('settings.ai.modelVisionDesc')}</p>
               </div>
             )}
 
@@ -2500,11 +2471,11 @@ const CustomRoutingDialog = ({
                   )}
                 </div>
                 {testBusy ? (
-                  <div className="mt-2 rounded-md border border-current/15 bg-white/50 px-3 py-2 text-[12px] dark:bg-black/10">
+                  <div className="mt-2 rounded-md border border-current/15 bg-surface/50 px-3 py-2 text-[12px] dark:bg-black/10">
                     {t('settings.ai.waitingForModelResponse')}
                   </div>
                 ) : testError ? (
-                  <div className="mt-2 rounded-md border border-current/15 bg-white/50 px-3 py-2 font-mono text-[11px] whitespace-pre-wrap break-words dark:bg-black/10">
+                  <div className="mt-2 rounded-md border border-current/15 bg-surface/50 px-3 py-2 font-mono text-[11px] whitespace-pre-wrap break-words dark:bg-black/10">
                     {testError}
                   </div>
                 ) : (
@@ -2512,7 +2483,7 @@ const CustomRoutingDialog = ({
                     <div className="text-[11px] font-semibold uppercase tracking-wide text-current/80">
                       {t('settings.ai.response')}
                     </div>
-                    <div className="rounded-md border border-current/15 bg-white/70 px-3 py-3 text-[13px] leading-relaxed text-neutral-900 whitespace-pre-wrap break-words dark:bg-black/10 dark:text-neutral-100">
+                    <div className="rounded-md border border-current/15 bg-surface/70 px-3 py-3 text-[13px] leading-relaxed text-content whitespace-pre-wrap break-words dark:bg-black/10">
                       {testReply}
                     </div>
                   </div>
@@ -2566,17 +2537,17 @@ const SaveBar = ({
   const { t } = useT();
   return (
     <div className="pointer-events-none sticky bottom-3 z-20 flex justify-center px-4">
-      <div className="pointer-events-auto flex w-full items-center gap-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white/95 dark:bg-neutral-900/95 px-3 py-2 shadow-float backdrop-blur-md animate-fade-up">
+      <div className="pointer-events-auto flex w-full items-center gap-2 rounded-lg border border-line bg-surface/95 px-3 py-2 shadow-float backdrop-blur-md animate-fade-up">
         <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-300">
           <LuCircleAlert className="h-3.5 w-3.5" />
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-xs font-medium text-neutral-900 dark:text-neutral-100">
+          <div className="text-xs font-medium text-content">
             {changeCount === 1
               ? t('settings.ai.unsavedChange')
               : `${String(changeCount)} ${t('settings.ai.unsavedChanges')}`}
           </div>
-          <div className="truncate font-mono text-[10px] text-neutral-500 dark:text-neutral-400">
+          <div className="truncate font-mono text-[10px] text-content-muted">
             {diffSummary.slice(0, 2).join(' · ')}
             {diffSummary.length > 2 ? ` · +${diffSummary.length - 2}` : ''}
           </div>
@@ -2751,11 +2722,9 @@ const GlobalOwnModelSelector = ({
   };
 
   return (
-    <div className="space-y-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4">
+    <div className="space-y-4 rounded-xl border border-line bg-surface p-4">
       <div className="space-y-1">
-        <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
-          {t('settings.ai.globalModel.title')}
-        </div>
+        <div className="text-sm font-medium text-content">{t('settings.ai.globalModel.title')}</div>
         <p className="text-xs text-amber-700 dark:text-amber-200">
           {t('settings.ai.globalModel.desc')}
         </p>
@@ -2769,7 +2738,7 @@ const GlobalOwnModelSelector = ({
         <>
           <div className="grid gap-4 md:grid-cols-2">
             <div className="space-y-1.5">
-              <label className="text-xs font-medium text-neutral-700 dark:text-neutral-200">
+              <label className="text-xs font-medium text-content-secondary">
                 {t('settings.ai.globalModel.provider')}
               </label>
               <SettingsSelect
@@ -2812,7 +2781,7 @@ const GlobalOwnModelSelector = ({
             </div>
 
             <div className="space-y-1.5">
-              <label className="text-xs font-medium text-neutral-700 dark:text-neutral-200">
+              <label className="text-xs font-medium text-content-secondary">
                 {t('settings.ai.globalModel.model')}
               </label>
               {source?.kind === 'local' ? (
@@ -2854,23 +2823,23 @@ const GlobalOwnModelSelector = ({
             </div>
           </div>
           {registrySlug && model.trim().length > 0 && (
-            <label className="flex items-start gap-2 text-xs font-medium text-neutral-700 dark:text-neutral-200">
+            <label className="flex items-start gap-2 text-xs font-medium text-content-secondary">
               <input
                 type="checkbox"
                 checked={vision}
                 onChange={e => setVision(e.target.checked)}
-                className="mt-0.5 h-3.5 w-3.5 rounded border-neutral-300 dark:border-neutral-700 text-primary-500 focus:ring-primary-500"
+                className="mt-0.5 h-3.5 w-3.5 rounded border-line-strong text-primary-500 focus:ring-primary-500"
               />
               <span>
                 {t('settings.ai.modelVision')}
-                <span className="block font-normal text-[11px] text-neutral-400 dark:text-neutral-500">
+                <span className="block font-normal text-[11px] text-content-faint">
                   {t('settings.ai.modelVisionDesc')}
                 </span>
               </span>
             </label>
           )}
 
-          <div className="rounded-lg bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2 text-xs text-neutral-500 dark:text-neutral-400">
+          <div className="rounded-lg bg-surface-muted px-3 py-2 text-xs text-content-muted">
             {t('settings.ai.globalModel.appliesToAll')}
           </div>
 
@@ -3179,13 +3148,11 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
             setup). Everything the user needs to wire a model up.
             ═══════════════════════════════════════════════════════════════ */}
         <div className="space-y-4">
-          <div className="border-b border-neutral-200 dark:border-neutral-800 pb-2">
-            <h2 className="text-base font-semibold text-neutral-900 dark:text-neutral-100">
+          <div className="border-b border-line pb-2">
+            <h2 className="text-base font-semibold text-content">
               {t('settings.ai.llmProviders')}
             </h2>
-            <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">
-              {t('settings.ai.llmProvidersDesc')}
-            </p>
+            <p className="text-xs text-content-muted mt-0.5">{t('settings.ai.llmProvidersDesc')}</p>
           </div>
 
           {/* ─── Rejected-key notices ─────────────────────────────────────────
@@ -3202,11 +3169,7 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
 
           {/* ─── Provider chip-toggle list ────────────────────────────────── */}
           <section className="space-y-3">
-            {loading && (
-              <div className="text-xs text-neutral-500 dark:text-neutral-400">
-                {t('common.loading')}
-              </div>
-            )}
+            {loading && <div className="text-xs text-content-muted">{t('common.loading')}</div>}
             {error && (
               <SettingsStatusLine saving={false} error={error} savedNote={null} savingLabel="" />
             )}
@@ -3342,9 +3305,7 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
             {/* #3760: Managed is always-on and can't be turned off; point users
                 who want a local model at the Routing card below instead of
                 letting them fight the (now badge, formerly locked) Managed chip. */}
-            <p className="text-xs text-neutral-500 dark:text-neutral-400">
-              {t('settings.ai.routing.managedHint')}
-            </p>
+            <p className="text-xs text-content-muted">{t('settings.ai.routing.managedHint')}</p>
 
             <div className="flex flex-col gap-2 pt-1">
               {/* Codex — imports the existing Codex CLI login as an OpenAI credential. */}
@@ -3360,7 +3321,7 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
                     ? t('settings.ai.connecting')
                     : t('settings.ai.codexAuthButton', 'Codex 인증')}
                 </Button>
-                <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                <span className="text-xs text-content-muted">
                   {t(
                     'settings.ai.codexAuthHelper',
                     'Uses the existing Codex CLI login from ~/.codex/auth.json.'
@@ -3412,13 +3373,9 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
             per-workload routing.
             ═══════════════════════════════════════════════════════════════ */}
         <div className="space-y-4">
-          <div className="border-b border-neutral-200 dark:border-neutral-800 pb-2">
-            <h2 className="text-base font-semibold text-neutral-900 dark:text-neutral-100">
-              {t('settings.ai.routing')}
-            </h2>
-            <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">
-              {t('settings.ai.routingDesc')}
-            </p>
+          <div className="border-b border-line pb-2">
+            <h2 className="text-base font-semibold text-content">{t('settings.ai.routing')}</h2>
+            <p className="text-xs text-content-muted mt-0.5">{t('settings.ai.routingDesc')}</p>
           </div>
 
           <section className="space-y-3">
@@ -3435,12 +3392,12 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
                 className={`flex h-full min-h-[152px] flex-col rounded-2xl border p-4 text-left transition-colors ${
                   effectiveRoutingMode === 'managed'
                     ? 'border-emerald-300 bg-emerald-50 dark:border-emerald-500/40 dark:bg-emerald-500/10'
-                    : 'border-neutral-200 bg-white hover:bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                    : 'border-line bg-surface hover:bg-surface-hover'
                 }`}>
-                <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+                <div className="text-sm font-semibold text-content">
                   {t('settings.ai.routing.managed')}
                 </div>
-                <p className="mt-2 text-xs leading-5 text-neutral-600 dark:text-neutral-300">
+                <p className="mt-2 text-xs leading-5 text-content-secondary">
                   {t('settings.ai.routing.managedDesc')}
                 </p>
               </button>
@@ -3451,12 +3408,12 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
                 className={`flex h-full min-h-[152px] flex-col rounded-2xl border p-4 text-left transition-colors ${
                   effectiveRoutingMode === 'own'
                     ? 'border-sky-300 bg-sky-50 dark:border-sky-500/40 dark:bg-sky-500/10'
-                    : 'border-neutral-200 bg-white hover:bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                    : 'border-line bg-surface hover:bg-surface-hover'
                 }`}>
-                <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+                <div className="text-sm font-semibold text-content">
                   {t('settings.ai.routing.useYourOwn')}
                 </div>
-                <p className="mt-2 text-xs leading-5 text-neutral-600 dark:text-neutral-300">
+                <p className="mt-2 text-xs leading-5 text-content-secondary">
                   {t('settings.ai.routing.useYourOwnDesc')}
                 </p>
               </button>
@@ -3467,12 +3424,12 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
                 className={`flex h-full min-h-[152px] flex-col rounded-2xl border p-4 text-left transition-colors ${
                   effectiveRoutingMode === 'custom'
                     ? 'border-sky-300 bg-sky-50 dark:border-sky-500/40 dark:bg-sky-500/10'
-                    : 'border-neutral-200 bg-white hover:bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                    : 'border-line bg-surface hover:bg-surface-hover'
                 }`}>
-                <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+                <div className="text-sm font-semibold text-content">
                   {t('settings.ai.routing.advanced')}
                 </div>
-                <p className="mt-2 text-xs leading-5 text-neutral-600 dark:text-neutral-300">
+                <p className="mt-2 text-xs leading-5 text-content-secondary">
                   {t('settings.ai.routing.advancedDesc')}
                 </p>
               </button>
@@ -3519,16 +3476,16 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
                 </div>
 
                 <div className="space-y-3">
-                  <div className="overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3">
-                    <div className="border-b border-neutral-200 dark:border-neutral-800 py-3">
-                      <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+                  <div className="overflow-hidden rounded-lg border border-line bg-surface-muted px-3">
+                    <div className="border-b border-line py-3">
+                      <div className="text-sm font-semibold text-content">
                         {t('settings.ai.routing.chatAndConversations')}
                       </div>
-                      <div className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                      <div className="mt-1 text-xs text-content-muted">
                         {t('settings.ai.routing.chatDesc')}
                       </div>
                     </div>
-                    <div className="divide-y divide-neutral-200 dark:divide-neutral-800">
+                    <div className="divide-y divide-line dark:divide-neutral-800">
                       {chatRows.map(w => (
                         <WorkloadRow
                           key={w.id}
@@ -3541,16 +3498,16 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
                     </div>
                   </div>
 
-                  <div className="overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3">
-                    <div className="border-b border-neutral-200 dark:border-neutral-800 py-3">
-                      <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+                  <div className="overflow-hidden rounded-lg border border-line bg-surface-muted px-3">
+                    <div className="border-b border-line py-3">
+                      <div className="text-sm font-semibold text-content">
                         {t('settings.ai.routing.backgroundTasks')}
                       </div>
-                      <div className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                      <div className="mt-1 text-xs text-content-muted">
                         {t('settings.ai.routing.bgTasksDesc')}
                       </div>
                     </div>
-                    <div className="divide-y divide-neutral-200 dark:divide-neutral-800">
+                    <div className="divide-y divide-line dark:divide-neutral-800">
                       {bgRows.map(w => (
                         <WorkloadRow
                           key={w.id}
@@ -3820,14 +3777,14 @@ const CloudProviderEditor = ({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-neutral-900/30 p-4">
-      <div className="w-full max-w-md rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-float">
-        <div className="border-b border-neutral-200 dark:border-neutral-800 px-4 py-3">
-          <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+      <div className="w-full max-w-md rounded-lg border border-line bg-surface shadow-float">
+        <div className="border-b border-line px-4 py-3">
+          <div className="text-sm font-semibold text-content">
             {initial
               ? formatI18n(t('settings.ai.editProvider'), { label: initial.label })
               : t('settings.ai.addCloudProvider')}
           </div>
-          <div className="mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
+          <div className="mt-0.5 text-xs text-content-muted">
             {t('settings.ai.apiKeysEncrypted')}{' '}
             <span className="font-mono">auth-profiles.json</span>.
           </div>
@@ -3836,7 +3793,7 @@ const CloudProviderEditor = ({
           <div>
             <label
               htmlFor="cloud-provider-name"
-              className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+              className="text-[10px] font-semibold uppercase tracking-wide text-content-muted">
               {t('common.name')}
             </label>
             <SettingsTextField
@@ -3846,9 +3803,9 @@ const CloudProviderEditor = ({
               className="mt-1"
               placeholder={t('settings.ai.providerNamePlaceholder')}
             />
-            <div className="mt-1 text-[11px] text-neutral-500 dark:text-neutral-400">
+            <div className="mt-1 text-[11px] text-content-muted">
               {t('settings.ai.slugLabel')}{' '}
-              <span className="font-mono text-neutral-700 dark:text-neutral-200">
+              <span className="font-mono text-content-secondary">
                 {slug || t('settings.ai.noneDash')}
               </span>
             </div>
@@ -3859,7 +3816,7 @@ const CloudProviderEditor = ({
           <div>
             <label
               htmlFor="cloud-provider-openai-url"
-              className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+              className="text-[10px] font-semibold uppercase tracking-wide text-content-muted">
               {t('settings.ai.openAiUrlLabel')}
             </label>
             <SettingsTextField
@@ -3872,7 +3829,7 @@ const CloudProviderEditor = ({
             />
           </div>
           <div>
-            <label className="flex items-center justify-between text-[10px] font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+            <label className="flex items-center justify-between text-[10px] font-semibold uppercase tracking-wide text-content-muted">
               <span>{t('settings.ai.apiKeyFieldLabel')}</span>
               {hasExistingKey && (
                 <Button
@@ -3904,7 +3861,7 @@ const CloudProviderEditor = ({
           </div>
           {submitError ? <ProviderSetupErrorNotice error={submitError} /> : null}
         </div>
-        <div className="flex items-center justify-end gap-2 border-t border-neutral-200 dark:border-neutral-800 px-4 py-3">
+        <div className="flex items-center justify-end gap-2 border-t border-line px-4 py-3">
           <Button variant="secondary" size="xs" onClick={onClose} disabled={saving}>
             {t('common.cancel')}
           </Button>
diff --git a/app/src/components/settings/panels/AboutPanel.tsx b/app/src/components/settings/panels/AboutPanel.tsx
index a416e0db8..556a7519c 100644
--- a/app/src/components/settings/panels/AboutPanel.tsx
+++ b/app/src/components/settings/panels/AboutPanel.tsx
@@ -70,12 +70,8 @@ const AboutPanel = () => {
       {/* Version */}
       <SettingsSection>
         <div className="px-4 py-4">
-          <div className="text-xs text-neutral-500 dark:text-neutral-400">
-            {t('settings.about.version')}
-          </div>
-          <div className="mt-1 text-lg font-semibold text-neutral-800 dark:text-neutral-100">
-            v{APP_VERSION}
-          </div>
+          <div className="text-xs text-content-muted">{t('settings.about.version')}</div>
+          <div className="mt-1 text-lg font-semibold text-content">v{APP_VERSION}</div>
           {info?.available && info.available_version && (
             <div className="mt-1 text-xs text-primary-500">
               v{info.available_version} {t('settings.about.updateAvailable')}
@@ -101,7 +97,7 @@ const AboutPanel = () => {
           }
         />
         {lastCheckedAt && (
-          <div className="px-4 pb-3 text-[11px] text-neutral-400 dark:text-neutral-500">
+          <div className="px-4 pb-3 text-[11px] text-content-faint">
             {t('settings.about.lastChecked')} {formatRelative(lastCheckedAt, t)}
           </div>
         )}
@@ -112,7 +108,7 @@ const AboutPanel = () => {
         <SettingsRow
           label={t('settings.about.connectionMode')}
           control={
-            <span className="text-xs font-medium text-neutral-800 dark:text-neutral-100">
+            <span className="text-xs font-medium text-content">
               {coreMode.kind === 'local'
                 ? t('settings.about.connectionModeLocal')
                 : coreMode.kind === 'cloud'
@@ -125,14 +121,14 @@ const AboutPanel = () => {
           label={t('settings.about.serverUrl')}
           control={
             <span
-              className="text-xs font-mono text-neutral-800 dark:text-neutral-100 truncate max-w-[200px]"
+              className="text-xs font-mono text-content truncate max-w-[200px]"
               title={rpcUrl ?? undefined}>
               {rpcUrl ?? t('settings.about.serverUrlUnavailable')}
             </span>
           }
         />
         <div className="px-4 pb-3">
-          <p className="text-[11px] text-neutral-500 dark:text-neutral-400 leading-relaxed">
+          <p className="text-[11px] text-content-muted leading-relaxed">
             {coreMode.kind === 'cloud'
               ? t('settings.about.connectionHelperCloud')
               : t('settings.about.connectionHelperLocal')}
@@ -143,10 +139,8 @@ const AboutPanel = () => {
       {/* Releases */}
       <SettingsSection>
         <div className="px-4 py-4 space-y-2">
-          <div className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
-            {t('settings.about.releases')}
-          </div>
-          <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed">
+          <div className="text-sm font-medium text-content">{t('settings.about.releases')}</div>
+          <p className="text-xs text-content-muted leading-relaxed">
             {t('settings.about.releasesDesc')}
           </p>
           <Button
diff --git a/app/src/components/settings/panels/AccountPanel.tsx b/app/src/components/settings/panels/AccountPanel.tsx
index 212ae69ca..8949afccc 100644
--- a/app/src/components/settings/panels/AccountPanel.tsx
+++ b/app/src/components/settings/panels/AccountPanel.tsx
@@ -22,26 +22,18 @@ const AccountPanel = () => {
       testId="account-panel"
       description={t('pages.settings.accountSection.description')}>
       {(name || username) && (
-        <div className="flex items-center gap-3 rounded-2xl border border-stone-200 dark:border-neutral-800 px-4 py-3">
+        <div className="flex items-center gap-3 rounded-2xl border border-line px-4 py-3">
           <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-500/15 text-sm font-semibold text-primary-700 dark:text-primary-300">
             {(name ?? username ?? '?').replace('@', '').slice(0, 1).toUpperCase()}
           </div>
           <div className="min-w-0">
-            {name && (
-              <div className="truncate text-sm font-medium text-stone-900 dark:text-neutral-100">
-                {name}
-              </div>
-            )}
-            {username && (
-              <div className="truncate text-xs text-stone-500 dark:text-neutral-400">
-                {username}
-              </div>
-            )}
+            {name && <div className="truncate text-sm font-medium text-content">{name}</div>}
+            {username && <div className="truncate text-xs text-content-muted">{username}</div>}
           </div>
         </div>
       )}
 
-      <div className="rounded-2xl overflow-hidden border border-stone-200 dark:border-neutral-800">
+      <div className="rounded-2xl overflow-hidden border border-line">
         <LogoutAndClearActions />
       </div>
     </SettingsPanel>
diff --git a/app/src/components/settings/panels/AgentAccessPanel.tsx b/app/src/components/settings/panels/AgentAccessPanel.tsx
index 5a9094ce5..475c35253 100644
--- a/app/src/components/settings/panels/AgentAccessPanel.tsx
+++ b/app/src/components/settings/panels/AgentAccessPanel.tsx
@@ -291,9 +291,7 @@ const AgentAccessPanel = () => {
       )}
 
       {isLoading ? (
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-          {t('settings.agentAccess.loading')}
-        </p>
+        <p className="text-sm text-content-muted">{t('settings.agentAccess.loading')}</p>
       ) : (
         <>
           {/* Workspace confinement + task plan approval */}
@@ -414,7 +412,7 @@ const AgentAccessPanel = () => {
               </ul>
             )}
             {/* Add-folder row */}
-            <div className="flex items-center gap-2 px-4 py-3 border-t border-neutral-100 dark:border-neutral-800">
+            <div className="flex items-center gap-2 px-4 py-3 border-t border-line-subtle">
               <SettingsTextField
                 mono
                 className="flex-1"
diff --git a/app/src/components/settings/panels/AgentActivityPanel.tsx b/app/src/components/settings/panels/AgentActivityPanel.tsx
index 34f39a130..2f8a8c862 100644
--- a/app/src/components/settings/panels/AgentActivityPanel.tsx
+++ b/app/src/components/settings/panels/AgentActivityPanel.tsx
@@ -98,19 +98,15 @@ export default function AgentActivityPanel() {
   }, []);
 
   if (status === 'loading' && !settings) {
-    return (
-      <div className="p-4 text-sm text-neutral-500 dark:text-neutral-400">
-        {t('common.loading')}
-      </div>
-    );
+    return <div className="p-4 text-sm text-content-muted">{t('common.loading')}</div>;
   }
 
   return (
     <SettingsPanel description={t('activityLevel.description')}>
       <div className="flex flex-col gap-4">
         {monthlyCost && monthlyCost.total_cost_usd > 0 && (
-          <div className="px-3 py-2 rounded-md bg-neutral-100 dark:bg-neutral-800 text-sm">
-            <span className="font-medium text-neutral-800 dark:text-neutral-200">
+          <div className="px-3 py-2 rounded-md bg-surface-subtle text-sm">
+            <span className="font-medium text-content">
               {t('activityLevel.currentMonth').replace(
                 '{amount}',
                 monthlyCost.total_cost_usd.toFixed(2)
@@ -134,25 +130,25 @@ export default function AgentActivityPanel() {
                 className={`w-full text-left px-4 py-3 rounded-lg border transition-colors ${
                   isSelected
                     ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
-                    : 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700'
+                    : 'border-line bg-surface hover:border-line-strong dark:hover:border-line-strong'
                 } ${status === 'saving' ? 'opacity-50' : ''}`}>
                 <div className="flex items-center justify-between">
                   <div>
                     <div className="flex items-center gap-2">
-                      <span className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+                      <span className="text-sm font-semibold text-content">
                         {t(`activityLevel.${key as LevelKey}`)}
                       </span>
                       {value === 2 && (
-                        <span className="text-xs px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-400">
+                        <span className="text-xs px-1.5 py-0.5 rounded bg-surface-strong dark:bg-neutral-700 text-content-secondary dark:text-content-muted">
                           {t('activityLevel.default')}
                         </span>
                       )}
                     </div>
-                    <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">
+                    <p className="text-xs text-content-muted mt-0.5">
                       {t(`activityLevel.${key as LevelKey}Desc`)}
                     </p>
                   </div>
-                  <div className="text-xs font-mono text-neutral-500 dark:text-neutral-400 shrink-0 ml-4">
+                  <div className="text-xs font-mono text-content-muted shrink-0 ml-4">
                     {costMin === 0 && costMax === 0
                       ? t('activityLevel.costFree')
                       : t('activityLevel.costRange')
diff --git a/app/src/components/settings/panels/AgentBoxPanel.tsx b/app/src/components/settings/panels/AgentBoxPanel.tsx
index aa6f32a0b..ce52fa6bf 100644
--- a/app/src/components/settings/panels/AgentBoxPanel.tsx
+++ b/app/src/components/settings/panels/AgentBoxPanel.tsx
@@ -30,7 +30,7 @@ type PanelState =
   | { kind: 'error'; message: string };
 
 const ROW =
-  'px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-white dark:bg-sage-900/20';
+  'px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20';
 
 const AgentBoxPanel = () => {
   const { t } = useT();
@@ -64,16 +64,12 @@ const AgentBoxPanel = () => {
 
   const body = useMemo(() => {
     if (state.kind === 'loading') {
-      return (
-        <div className="px-4 py-3 text-sm text-neutral-500 dark:text-neutral-400">
-          {t('common.loading')}
-        </div>
-      );
+      return <div className="px-4 py-3 text-sm text-content-muted">{t('common.loading')}</div>;
     }
     if (state.kind === 'error') {
       return (
         <div className="px-4 py-3">
-          <div className="text-sm font-semibold text-neutral-800 dark:text-neutral-100 mb-1">
+          <div className="text-sm font-semibold text-content mb-1">
             {t('settings.agentbox.unavailable')}
           </div>
           <SettingsStatusLine saving={false} error={state.message} savingLabel="" />
@@ -99,7 +95,7 @@ const AgentBoxPanel = () => {
               className={`text-xs font-mono px-2 py-0.5 rounded-full ${
                 s.mode_enabled
                   ? 'bg-sage-100 text-sage-800 dark:bg-sage-500/20 dark:text-sage-200'
-                  : 'bg-neutral-100 text-neutral-600 dark:bg-neutral-700/40 dark:text-neutral-300'
+                  : 'bg-surface-subtle text-content-secondary dark:bg-neutral-700/40'
               }`}>
               {modeLabel}
             </span>
diff --git a/app/src/components/settings/panels/AgentChatPanel.tsx b/app/src/components/settings/panels/AgentChatPanel.tsx
index 85696de35..8bf42a3a0 100644
--- a/app/src/components/settings/panels/AgentChatPanel.tsx
+++ b/app/src/components/settings/panels/AgentChatPanel.tsx
@@ -84,9 +84,7 @@ const AgentChatPanel = () => {
       <SettingsSection title={t('chat.overrides')} description={t('chat.agentChatDesc')}>
         <div className="px-4 py-3 grid gap-3 md:grid-cols-2">
           <div className="space-y-1">
-            <label
-              htmlFor="agent-chat-model"
-              className="text-xs text-neutral-500 dark:text-neutral-400">
+            <label htmlFor="agent-chat-model" className="text-xs text-content-muted">
               {t('chat.model')}
             </label>
             <SettingsTextField
@@ -98,9 +96,7 @@ const AgentChatPanel = () => {
             />
           </div>
           <div className="space-y-1">
-            <label
-              htmlFor="agent-chat-temperature"
-              className="text-xs text-neutral-500 dark:text-neutral-400">
+            <label htmlFor="agent-chat-temperature" className="text-xs text-content-muted">
               {t('chat.temperature')}
             </label>
             <SettingsTextField
@@ -117,19 +113,19 @@ const AgentChatPanel = () => {
       <SettingsSection title={t('chat.conversation')}>
         <div className="px-4 py-3 space-y-3">
           <SettingsStatusLine saving={false} error={error || null} savingLabel="" />
-          <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-4 space-y-3 min-h-[6rem]">
+          <div className="rounded-xl border border-line bg-surface-muted p-4 space-y-3 min-h-[6rem]">
             {messages.length === 0 ? (
               <SettingsEmptyState label={t('chat.startAgentConversation')} />
             ) : (
               messages.map((message, index) => (
                 <div key={`${message.role}-${index}`} className="space-y-1">
-                  <div className="text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+                  <div className="text-[11px] uppercase tracking-wide text-content-muted">
                     {message.role === 'user' ? t('chat.you') : t('chat.agent')}
                   </div>
                   <div
                     className={`text-sm whitespace-pre-wrap ${
                       message.role === 'user'
-                        ? 'text-neutral-800 dark:text-neutral-100'
+                        ? 'text-content'
                         : 'text-emerald-700 dark:text-emerald-300'
                     }`}>
                     {message.text}
diff --git a/app/src/components/settings/panels/AgentEditorPage.tsx b/app/src/components/settings/panels/AgentEditorPage.tsx
index 7e429ce1d..bd75fd2e2 100644
--- a/app/src/components/settings/panels/AgentEditorPage.tsx
+++ b/app/src/components/settings/panels/AgentEditorPage.tsx
@@ -206,7 +206,7 @@ const AgentEditorPage = () => {
       title={isCreate ? t('settings.agents.newAgent') : name || t('settings.agents.newAgent')}
       description={t('settings.agents.subtitle')}>
       {loading ? (
-        <div className="flex items-center justify-center py-12 text-neutral-400 dark:text-neutral-500">
+        <div className="flex items-center justify-center py-12 text-content-faint">
           <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent" />
           <span className="text-sm">{t('common.loading')}</span>
         </div>
@@ -218,7 +218,7 @@ const AgentEditorPage = () => {
         // Built-in agents can't be edited; they may only be enabled/disabled
         // or reset from the agents list.
         <div className="space-y-3">
-          <div className="rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm text-neutral-600 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-300">
+          <div className="rounded-lg border border-line bg-surface-muted px-4 py-3 text-sm text-content-secondary dark:bg-surface">
             {t('settings.agents.editor.builtInReadonly')}
           </div>
           <Button type="button" variant="secondary" size="sm" onClick={backToList}>
@@ -249,10 +249,8 @@ const AgentEditorPage = () => {
                 label={t('settings.agents.editor.name')}
                 control={
                   <div className="flex items-center gap-2">
-                    <span className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
-                      {name}
-                    </span>
-                    <span className="rounded-full bg-neutral-100 px-2 py-0.5 text-[10px] font-medium text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400">
+                    <span className="text-sm font-semibold text-content">{name}</span>
+                    <span className="rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-medium text-content-muted">
                       {isCustom
                         ? t('settings.agents.sourceCustom')
                         : t('settings.agents.sourceDefault')}
@@ -285,11 +283,7 @@ const AgentEditorPage = () => {
             ) : (
               <SettingsRow
                 label={t('settings.agents.editor.id')}
-                control={
-                  <code className="font-mono text-xs text-neutral-500 dark:text-neutral-400">
-                    {agentId}
-                  </code>
-                }
+                control={<code className="font-mono text-xs text-content-muted">{agentId}</code>}
               />
             )}
           </SettingsSection>
@@ -380,21 +374,21 @@ const AgentEditorPage = () => {
               description={t('settings.agents.editor.toolsHint')}
               stacked
               control={
-                <div className="rounded-md border border-neutral-200 p-2 dark:border-neutral-700">
+                <div className="rounded-md border border-line p-2 dark:border-line-strong">
                   <div className="flex flex-wrap items-center gap-1.5">
                     {allToolsSelected ? (
                       <span className="inline-flex items-center gap-1 rounded-full bg-ocean-50 px-2.5 py-1 text-xs font-medium text-ocean-700 dark:bg-ocean-500/10 dark:text-ocean-200">
                         {t('settings.agents.editor.toolsAllSelected')}
                       </span>
                     ) : toolAllowlist.length === 0 ? (
-                      <span className="px-1 py-1 text-xs text-neutral-400 dark:text-neutral-500">
+                      <span className="px-1 py-1 text-xs text-content-faint">
                         {t('settings.agents.editor.toolsNoneSelected')}
                       </span>
                     ) : (
                       toolAllowlist.map(tool => (
                         <span
                           key={tool}
-                          className="inline-flex items-center gap-1 rounded-full bg-neutral-100 px-2.5 py-1 font-mono text-xs text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200">
+                          className="inline-flex items-center gap-1 rounded-full bg-surface-subtle px-2.5 py-1 font-mono text-xs text-content-secondary">
                           {tool}
                           <button
                             type="button"
@@ -403,7 +397,7 @@ const AgentEditorPage = () => {
                               tool
                             )}
                             onClick={() => setToolAllowlist(prev => prev.filter(x => x !== tool))}
-                            className="rounded-full text-neutral-400 hover:text-coral-600 dark:text-neutral-500 dark:hover:text-coral-300">
+                            className="rounded-full text-content-faint hover:text-coral-600 dark:hover:text-coral-300">
                             <LuX className="h-3 w-3" />
                           </button>
                         </span>
@@ -413,7 +407,7 @@ const AgentEditorPage = () => {
                       type="button"
                       aria-label={t('settings.agents.editor.selectTools')}
                       onClick={() => setToolsOpen(true)}
-                      className="inline-flex items-center gap-1 rounded-full border border-dashed border-neutral-300 px-2.5 py-1 text-xs font-medium text-neutral-600 hover:border-ocean-400 hover:text-ocean-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:border-ocean-500 dark:hover:text-ocean-300">
+                      className="inline-flex items-center gap-1 rounded-full border border-dashed border-line-strong px-2.5 py-1 text-xs font-medium text-content-secondary hover:border-ocean-400 hover:text-ocean-600 dark:hover:border-ocean-500 dark:hover:text-ocean-300">
                       <LuPlus className="h-3 w-3" />
                       {t('settings.agents.editor.selectTools')}
                     </button>
@@ -424,7 +418,7 @@ const AgentEditorPage = () => {
           </SettingsSection>
 
           {!isCreate && !isCustom && (
-            <p className="text-[11px] text-neutral-400 dark:text-neutral-500">
+            <p className="text-[11px] text-content-faint">
               {t('settings.agents.editor.defaultsNote')}
             </p>
           )}
@@ -521,13 +515,13 @@ function ToolsPickerModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 px-4 py-6">
-      <section className="flex max-h-full w-full max-w-lg flex-col overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-900">
-        <div className="flex items-center justify-between border-b border-neutral-200 px-4 py-3 dark:border-neutral-800">
+      <section className="flex max-h-full w-full max-w-lg flex-col overflow-hidden rounded-lg border border-line bg-surface shadow-xl">
+        <div className="flex items-center justify-between border-b border-line px-4 py-3">
           <div>
-            <h3 className="text-base font-semibold text-neutral-900 dark:text-neutral-50">
+            <h3 className="text-base font-semibold text-content">
               {t('settings.agents.editor.toolsModalTitle')}
             </h3>
-            <p className="text-xs text-neutral-400 dark:text-neutral-500">
+            <p className="text-xs text-content-faint">
               {t('settings.agents.editor.toolsSelectedCount').replace(
                 '{count}',
                 String(selectedCount)
@@ -545,9 +539,9 @@ function ToolsPickerModal({
           </Button>
         </div>
 
-        <div className="border-b border-neutral-200 px-4 py-3 dark:border-neutral-800">
+        <div className="border-b border-line px-4 py-3">
           <div className="relative">
-            <LuSearch className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-neutral-400 dark:text-neutral-500" />
+            <LuSearch className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-content-faint" />
             <SettingsTextField
               autoFocus
               value={query}
@@ -564,13 +558,13 @@ function ToolsPickerModal({
             className={`mt-2 flex w-full items-start justify-between gap-2 rounded-md border px-3 py-2 text-left transition-colors ${
               allToolsSelected
                 ? 'border-ocean-400 bg-ocean-50 dark:border-ocean-500/40 dark:bg-ocean-500/10'
-                : 'border-neutral-200 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800'
+                : 'border-line hover:bg-surface-hover dark:border-line-strong'
             }`}>
             <span>
-              <span className="block text-xs font-semibold text-neutral-800 dark:text-neutral-100">
+              <span className="block text-xs font-semibold text-content">
                 {t('settings.agents.editor.toolsAllowAll')}
               </span>
-              <span className="block text-[11px] text-neutral-400 dark:text-neutral-500">
+              <span className="block text-[11px] text-content-faint">
                 {t('settings.agents.editor.toolsAllowAllHint')}
               </span>
             </span>
@@ -580,7 +574,7 @@ function ToolsPickerModal({
 
         <div className="min-h-[8rem] flex-1 overflow-y-auto px-2 py-2">
           {loading ? (
-            <div className="flex items-center justify-center py-10 text-neutral-400 dark:text-neutral-500">
+            <div className="flex items-center justify-center py-10 text-content-faint">
               <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent" />
               <span className="text-sm">{t('settings.agents.editor.toolsLoading')}</span>
             </div>
@@ -589,7 +583,7 @@ function ToolsPickerModal({
               {t('settings.agents.editor.toolsLoadError')}: {error}
             </p>
           ) : filtered.length === 0 ? (
-            <p className="px-2 py-6 text-center text-sm text-neutral-400 dark:text-neutral-500">
+            <p className="px-2 py-6 text-center text-sm text-content-faint">
               {t('settings.agents.editor.toolsEmpty')}
             </p>
           ) : (
@@ -602,13 +596,13 @@ function ToolsPickerModal({
                       type="button"
                       disabled={allToolsSelected}
                       onClick={() => onToggleTool(tool.name)}
-                      className="flex w-full items-start gap-3 rounded-md px-2 py-2 text-left hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-neutral-800">
+                      className="flex w-full items-start gap-3 rounded-md px-2 py-2 text-left hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-50">
                       <Checkbox checked={checked} className="mt-0.5" />
                       <span className="min-w-0">
-                        <span className="block font-mono text-xs font-medium text-neutral-800 dark:text-neutral-100">
+                        <span className="block font-mono text-xs font-medium text-content">
                           {tool.name}
                         </span>
-                        <span className="block break-words text-[11px] leading-snug text-neutral-500 dark:text-neutral-400">
+                        <span className="block break-words text-[11px] leading-snug text-content-muted">
                           {tool.description}
                         </span>
                       </span>
@@ -620,7 +614,7 @@ function ToolsPickerModal({
           )}
         </div>
 
-        <div className="flex justify-end border-t border-neutral-200 px-4 py-3 dark:border-neutral-800">
+        <div className="flex justify-end border-t border-line px-4 py-3">
           <Button type="button" variant="primary" size="sm" onClick={onClose}>
             {t('settings.agents.editor.toolsDone')}
           </Button>
@@ -636,7 +630,7 @@ function Checkbox({ checked, className = '' }: { checked: boolean; className?: s
       className={`flex h-4 w-4 flex-none items-center justify-center rounded border transition-colors ${
         checked
           ? 'border-ocean-600 bg-ocean-600 text-white'
-          : 'border-neutral-300 bg-white dark:border-neutral-600 dark:bg-neutral-950'
+          : 'border-line-strong bg-surface dark:border-neutral-600 dark:bg-surface-canvas'
       } ${className}`}>
       {checked && (
         <svg className="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
diff --git a/app/src/components/settings/panels/AgentsPanel.tsx b/app/src/components/settings/panels/AgentsPanel.tsx
index a37ff749b..0e7fe0084 100644
--- a/app/src/components/settings/panels/AgentsPanel.tsx
+++ b/app/src/components/settings/panels/AgentsPanel.tsx
@@ -109,7 +109,7 @@ const AgentsPanel = () => {
       )}
 
       {loading ? (
-        <div className="flex items-center justify-center py-12 text-neutral-400 dark:text-neutral-500">
+        <div className="flex items-center justify-center py-12 text-content-faint">
           <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent" />
           <span className="text-sm">{t('common.loading')}</span>
         </div>
@@ -120,7 +120,7 @@ const AgentsPanel = () => {
       ) : agents.length === 0 ? (
         <SettingsEmptyState label={t('settings.agents.empty')} />
       ) : (
-        <ul className="divide-y divide-neutral-200 overflow-hidden rounded-xl border border-neutral-200 dark:divide-neutral-800 dark:border-neutral-800">
+        <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line dark:divide-neutral-800">
           {agents.map(agent => (
             <AgentRow
               key={agent.id}
@@ -159,12 +159,10 @@ function AgentRow({
     : t('settings.agents.toolsCount').replace('{count}', String(tools.length));
 
   return (
-    <li className={`bg-white px-4 py-3 dark:bg-neutral-900 ${agent.enabled ? '' : 'opacity-70'}`}>
+    <li className={`bg-surface px-4 py-3 ${agent.enabled ? '' : 'opacity-70'}`}>
       <div className="flex items-center justify-between gap-3">
         <div className="flex min-w-0 flex-wrap items-center gap-2">
-          <h3 className="truncate text-sm font-semibold text-neutral-800 dark:text-neutral-100">
-            {agent.name}
-          </h3>
+          <h3 className="truncate text-sm font-semibold text-content">{agent.name}</h3>
           <SettingsBadge variant={isCustom ? 'primary' : 'neutral'}>
             {isCustom ? t('settings.agents.sourceCustom') : t('settings.agents.sourceDefault')}
           </SettingsBadge>
@@ -179,10 +177,10 @@ function AgentRow({
         />
       </div>
 
-      <p className="mt-1 break-words text-xs leading-snug text-neutral-500 dark:text-neutral-400">
+      <p className="mt-1 break-words text-xs leading-snug text-content-muted">
         {agent.description}
       </p>
-      <div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-neutral-400 dark:text-neutral-500">
+      <div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-content-faint">
         <code className="font-mono">{agent.id}</code>
         {agent.model && (
           <span>
diff --git a/app/src/components/settings/panels/AppearancePanel.tsx b/app/src/components/settings/panels/AppearancePanel.tsx
index 02ee33604..6f35fb8ec 100644
--- a/app/src/components/settings/panels/AppearancePanel.tsx
+++ b/app/src/components/settings/panels/AppearancePanel.tsx
@@ -144,11 +144,11 @@ const AppearancePanel = () => {
     <SettingsPanel description={t('settings.appearance.menuDesc')}>
       {/* ── Theme picker — intentional bespoke tile UI ─────────────── */}
       <div>
-        <h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-400 dark:text-neutral-500 mb-2 px-1">
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-content-faint mb-2 px-1">
           {t('settings.appearance.themeHeading')}
         </h3>
         <div
-          className="bg-white dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 overflow-hidden"
+          className="bg-surface rounded-xl border border-line overflow-hidden"
           role="radiogroup"
           aria-label={t('settings.appearance.themeAria')}>
           {OPTIONS.map((opt, idx) => {
@@ -161,27 +161,19 @@ const AppearancePanel = () => {
                 aria-checked={selected}
                 onClick={() => dispatch(setThemeMode(opt.id))}
                 className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors focus:outline-none focus-visible:bg-primary-50 dark:focus-visible:bg-primary-900/30 ${
-                  idx !== 0 ? 'border-t border-neutral-100 dark:border-neutral-800' : ''
-                } ${
-                  selected
-                    ? 'bg-primary-50 dark:bg-primary-500/10'
-                    : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/60'
-                }`}>
+                  idx !== 0 ? 'border-t border-line-subtle' : ''
+                } ${selected ? 'bg-primary-50 dark:bg-primary-500/10' : 'hover:bg-surface-hover'}`}>
                 <span
                   className={`flex items-center justify-center w-9 h-9 rounded-lg ${
                     selected
-                      ? 'bg-primary-500 text-white'
-                      : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300'
+                      ? 'bg-primary-500 text-content-inverted'
+                      : 'bg-surface-subtle text-content-secondary'
                   }`}>
                   {opt.icon}
                 </span>
                 <span className="flex-1 min-w-0">
-                  <span className="block text-sm font-medium text-neutral-900 dark:text-neutral-100">
-                    {opt.label}
-                  </span>
-                  <span className="block text-xs text-neutral-500 dark:text-neutral-400">
-                    {opt.description}
-                  </span>
+                  <span className="block text-sm font-medium text-content">{opt.label}</span>
+                  <span className="block text-xs text-content-muted">{opt.description}</span>
                 </span>
                 {selected && (
                   <svg
@@ -202,18 +194,18 @@ const AppearancePanel = () => {
             );
           })}
         </div>
-        <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed px-1 mt-2">
+        <p className="text-xs text-content-muted leading-relaxed px-1 mt-2">
           {t('settings.appearance.helperText')}
         </p>
       </div>
 
       {/* ── Font size picker — intentional bespoke tile UI ─────────── */}
       <div>
-        <h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-400 dark:text-neutral-500 mb-2 px-1">
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-content-faint mb-2 px-1">
           {t('settings.appearance.fontSizeHeading')}
         </h3>
         <div
-          className="bg-white dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 overflow-hidden"
+          className="bg-surface rounded-xl border border-line overflow-hidden"
           role="radiogroup"
           aria-label={t('settings.appearance.fontSizeAria')}>
           {FONT_SIZE_OPTIONS.map((opt, idx) => {
@@ -226,29 +218,21 @@ const AppearancePanel = () => {
                 aria-checked={selected}
                 onClick={() => dispatch(setFontSize(opt.id))}
                 className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors focus:outline-none focus-visible:bg-primary-50 dark:focus-visible:bg-primary-900/30 ${
-                  idx !== 0 ? 'border-t border-neutral-100 dark:border-neutral-800' : ''
-                } ${
-                  selected
-                    ? 'bg-primary-50 dark:bg-primary-500/10'
-                    : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/60'
-                }`}>
+                  idx !== 0 ? 'border-t border-line-subtle' : ''
+                } ${selected ? 'bg-primary-50 dark:bg-primary-500/10' : 'hover:bg-surface-hover'}`}>
                 <span
                   className={`flex items-center justify-center w-9 h-9 rounded-lg ${
                     selected
-                      ? 'bg-primary-500 text-white'
-                      : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300'
+                      ? 'bg-primary-500 text-content-inverted'
+                      : 'bg-surface-subtle text-content-secondary'
                   }`}>
                   <span className={`font-semibold leading-none ${opt.glyphClass}`} aria-hidden>
                     A
                   </span>
                 </span>
                 <span className="flex-1 min-w-0">
-                  <span className="block text-sm font-medium text-neutral-900 dark:text-neutral-100">
-                    {opt.label}
-                  </span>
-                  <span className="block text-xs text-neutral-500 dark:text-neutral-400">
-                    {opt.description}
-                  </span>
+                  <span className="block text-sm font-medium text-content">{opt.label}</span>
+                  <span className="block text-xs text-content-muted">{opt.description}</span>
                 </span>
                 {selected && (
                   <svg
@@ -269,7 +253,7 @@ const AppearancePanel = () => {
             );
           })}
         </div>
-        <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed px-1 mt-2">
+        <p className="text-xs text-content-muted leading-relaxed px-1 mt-2">
           {t('settings.appearance.fontSizeHelperText')}
         </p>
       </div>
diff --git a/app/src/components/settings/panels/ApprovalHistoryPanel.tsx b/app/src/components/settings/panels/ApprovalHistoryPanel.tsx
index b001dd267..d49fed3fa 100644
--- a/app/src/components/settings/panels/ApprovalHistoryPanel.tsx
+++ b/app/src/components/settings/panels/ApprovalHistoryPanel.tsx
@@ -89,9 +89,7 @@ const ApprovalHistoryPanel = () => {
     <SettingsPanel testId="approval-history-panel">
       <SettingsSection>
         <div className="px-4 py-3 flex items-center justify-between gap-2">
-          <p className="text-xs text-neutral-500 dark:text-neutral-400">
-            {t('settings.approvalHistory.subtitle')}
-          </p>
+          <p className="text-xs text-content-muted">{t('settings.approvalHistory.subtitle')}</p>
           <Button
             type="button"
             variant="primary"
@@ -105,7 +103,7 @@ const ApprovalHistoryPanel = () => {
 
         {isLoading ? (
           <div
-            className="px-4 py-4 text-sm text-neutral-500 dark:text-neutral-400"
+            className="px-4 py-4 text-sm text-content-muted"
             data-testid="approval-history-loading">
             {t('settings.approvalHistory.loading')}
           </div>
@@ -127,7 +125,7 @@ const ApprovalHistoryPanel = () => {
           </div>
         ) : (
           <ul
-            className="divide-y divide-neutral-100 dark:divide-neutral-800"
+            className="divide-y divide-line-subtle dark:divide-neutral-800"
             data-testid="approval-history-list">
             {entries.map(entry => (
               <li
@@ -135,9 +133,7 @@ const ApprovalHistoryPanel = () => {
                 className="px-4 py-3 space-y-1"
                 data-testid="approval-history-row">
                 <div className="flex items-center justify-between gap-2">
-                  <span className="font-mono text-xs text-neutral-800 dark:text-neutral-100 truncate">
-                    {entry.tool_name}
-                  </span>
+                  <span className="font-mono text-xs text-content truncate">{entry.tool_name}</span>
                   <span
                     data-testid={`approval-history-decision-${entry.decision}`}
                     className="flex-shrink-0">
@@ -146,10 +142,8 @@ const ApprovalHistoryPanel = () => {
                     </SettingsBadge>
                   </span>
                 </div>
-                <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                  {entry.action_summary}
-                </p>
-                <p className="text-[11px] text-neutral-500 dark:text-neutral-400">
+                <p className="text-xs text-content-muted">{entry.action_summary}</p>
+                <p className="text-[11px] text-content-muted">
                   {t('settings.approvalHistory.decidedAt').replace(
                     '{date}',
                     formatDateTime(entry.decided_at)
diff --git a/app/src/components/settings/panels/AutocompleteDebugPanel.tsx b/app/src/components/settings/panels/AutocompleteDebugPanel.tsx
index 7b10d7220..9336c6e39 100644
--- a/app/src/components/settings/panels/AutocompleteDebugPanel.tsx
+++ b/app/src/components/settings/panels/AutocompleteDebugPanel.tsx
@@ -481,7 +481,7 @@ const AutocompleteDebugPanel = () => {
       {/* ------------------------------------------------------------------ */}
       <SettingsSection title={t('settings.autocomplete.appFilter.runtime')}>
         <div className="px-4 py-3 space-y-3">
-          <div className="text-sm text-neutral-800 dark:text-neutral-200 space-y-1">
+          <div className="text-sm text-content space-y-1">
             <div>
               {t('settings.autocomplete.appFilter.platformSupported')}:{' '}
               {status?.platform_supported ? t('common.yes') : t('common.no')}
@@ -557,7 +557,7 @@ const AutocompleteDebugPanel = () => {
       <SettingsSection title={t('settings.autocomplete.appFilter.test')}>
         <div className="px-4 py-3 space-y-3">
           <div className="space-y-1">
-            <div className="text-xs text-neutral-500 dark:text-neutral-400">
+            <div className="text-xs text-content-muted">
               {t('settings.autocomplete.appFilter.contextOverride')}
             </div>
             <SettingsTextArea
@@ -583,7 +583,7 @@ const AutocompleteDebugPanel = () => {
             </Button>
           </div>
           {focusDebug && (
-            <pre className="max-h-48 overflow-auto rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-xs text-neutral-800 dark:text-neutral-200">
+            <pre className="max-h-48 overflow-auto rounded-xl border border-line bg-surface-muted p-2 text-xs text-content">
               {focusDebug}
             </pre>
           )}
@@ -601,7 +601,7 @@ const AutocompleteDebugPanel = () => {
             </Button>
           </div>
           {/* Bespoke log-stream display — kept intact */}
-          <pre className="max-h-56 overflow-auto rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-xs text-neutral-800 dark:text-neutral-200">
+          <pre className="max-h-56 overflow-auto rounded-xl border border-line bg-surface-muted p-2 text-xs text-content">
             {logs.length > 0 ? logs.join('\n') : t('settings.autocomplete.appFilter.noLogs')}
           </pre>
         </div>
@@ -612,8 +612,8 @@ const AutocompleteDebugPanel = () => {
       {/* ------------------------------------------------------------------ */}
       <SettingsSection title={t('autocomplete.advancedSettings')}>
         <div className="px-4 py-3 space-y-3">
-          <label className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2">
-            <span className="text-sm text-neutral-800 dark:text-neutral-200">
+          <label className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2">
+            <span className="text-sm text-content">
               {t('settings.autocomplete.completionStyle.debounce')}
             </span>
             <Input
@@ -628,8 +628,8 @@ const AutocompleteDebugPanel = () => {
               aria-label={t('settings.autocomplete.completionStyle.debounce')}
             />
           </label>
-          <label className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2">
-            <span className="text-sm text-neutral-800 dark:text-neutral-200">
+          <label className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2">
+            <span className="text-sm text-content">
               {t('settings.autocomplete.completionStyle.maxChars')}
             </span>
             <Input
@@ -644,8 +644,8 @@ const AutocompleteDebugPanel = () => {
               aria-label={t('settings.autocomplete.completionStyle.maxChars')}
             />
           </label>
-          <label className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2">
-            <span className="text-sm text-neutral-800 dark:text-neutral-200">
+          <label className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2">
+            <span className="text-sm text-content">
               {t('settings.autocomplete.completionStyle.overlayTtl')}
             </span>
             <Input
@@ -661,7 +661,7 @@ const AutocompleteDebugPanel = () => {
             />
           </label>
           <div className="space-y-1">
-            <div className="text-xs text-neutral-500 dark:text-neutral-400">
+            <div className="text-xs text-content-muted">
               {t('settings.autocomplete.completionStyle.styleInstructions')}
             </div>
             <SettingsTextArea
@@ -672,7 +672,7 @@ const AutocompleteDebugPanel = () => {
             />
           </div>
           <div className="space-y-1">
-            <div className="text-xs text-neutral-500 dark:text-neutral-400">
+            <div className="text-xs text-content-muted">
               {t('settings.autocomplete.completionStyle.styleExamples')}
             </div>
             <SettingsTextArea
@@ -711,7 +711,7 @@ const AutocompleteDebugPanel = () => {
                 : t('settings.autocomplete.completionStyle.clearHistory')}
             </Button>
           </div>
-          <p className="text-xs text-neutral-500 dark:text-neutral-400">
+          <p className="text-xs text-content-muted">
             {isHistoryLoading
               ? t('common.loading')
               : historyEntries.length === 0
@@ -723,27 +723,25 @@ const AutocompleteDebugPanel = () => {
           </p>
           {/* Bespoke history list — kept intact */}
           {historyEntries.length > 0 && (
-            <div className="max-h-48 overflow-y-auto rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 space-y-1">
+            <div className="max-h-48 overflow-y-auto rounded-xl border border-line bg-surface-muted p-2 space-y-1">
               {historyEntries.map((entry, idx) => (
                 <div
                   key={`${String(entry.timestamp_ms)}-${String(idx)}`}
-                  className="flex flex-col gap-0.5 rounded-lg bg-white dark:bg-neutral-900 px-2 py-1.5 text-xs border border-neutral-100 dark:border-neutral-800">
-                  <div className="flex items-center gap-2 text-neutral-500 dark:text-neutral-400">
+                  className="flex flex-col gap-0.5 rounded-lg bg-surface px-2 py-1.5 text-xs border border-line-subtle">
+                  <div className="flex items-center gap-2 text-content-muted">
                     <span className="shrink-0">
                       {new Date(entry.timestamp_ms).toLocaleString()}
                     </span>
                     {entry.app_name && (
-                      <span className="rounded bg-neutral-100 dark:bg-neutral-800 px-1 text-neutral-500 dark:text-neutral-400">
+                      <span className="rounded bg-surface-subtle px-1 text-content-muted">
                         {entry.app_name}
                       </span>
                     )}
                   </div>
-                  <div className="flex items-baseline gap-1 text-neutral-800 dark:text-neutral-200 truncate">
-                    <span className="shrink-0 text-neutral-500 dark:text-neutral-400">…</span>
-                    <span className="truncate text-neutral-500 dark:text-neutral-400">
-                      {entry.context.slice(-40)}
-                    </span>
-                    <span className="shrink-0 text-neutral-500 dark:text-neutral-400">→</span>
+                  <div className="flex items-baseline gap-1 text-content truncate">
+                    <span className="shrink-0 text-content-muted">…</span>
+                    <span className="truncate text-content-muted">{entry.context.slice(-40)}</span>
+                    <span className="shrink-0 text-content-muted">→</span>
                     <span className="font-medium text-primary-500 truncate">
                       {entry.suggestion}
                     </span>
diff --git a/app/src/components/settings/panels/AutocompletePanel.tsx b/app/src/components/settings/panels/AutocompletePanel.tsx
index 1bf7ff2c7..436c44e5a 100644
--- a/app/src/components/settings/panels/AutocompletePanel.tsx
+++ b/app/src/components/settings/panels/AutocompletePanel.tsx
@@ -339,7 +339,7 @@ const AutocompletePanel = () => {
 
       {/* ── Runtime ────────────────────────────────────────────────── */}
       <SettingsSection title={t('autocomplete.runtime')}>
-        <div className="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-300 space-y-1">
+        <div className="px-4 py-3 text-sm text-content-secondary space-y-1">
           <div>
             {t('autocomplete.running')}: {status?.running ? t('common.yes') : t('common.no')}
           </div>
diff --git a/app/src/components/settings/panels/AutonomyPanel.tsx b/app/src/components/settings/panels/AutonomyPanel.tsx
index 0b4de9cdf..50cd57bde 100644
--- a/app/src/components/settings/panels/AutonomyPanel.tsx
+++ b/app/src/components/settings/panels/AutonomyPanel.tsx
@@ -153,9 +153,7 @@ const AutonomyRateLimitSection = () => {
               </p>
             )}
             {isValid && parsed === UNLIMITED && (
-              <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                {t('autonomy.unlimitedNote')}
-              </p>
+              <p className="text-xs text-content-muted">{t('autonomy.unlimitedNote')}</p>
             )}
 
             <SettingsStatusLine
diff --git a/app/src/components/settings/panels/BillingPanel.tsx b/app/src/components/settings/panels/BillingPanel.tsx
index 9f1709f46..2fcf7c6f2 100644
--- a/app/src/components/settings/panels/BillingPanel.tsx
+++ b/app/src/components/settings/panels/BillingPanel.tsx
@@ -12,13 +12,13 @@ const BillingPanel = () => {
   return (
     <SettingsPanel>
       <div>
-        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400">
+        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-content-muted">
           {t('settings.billing.movedToWeb')}
         </p>
-        <h1 className="mt-2 text-2xl font-semibold text-neutral-800 dark:text-neutral-100">
+        <h1 className="mt-2 text-2xl font-semibold text-content">
           {t('settings.billing.openDashboard')}
         </h1>
-        <p className="mt-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300">
+        <p className="mt-2 text-sm leading-6 text-content-secondary">
           {t('settings.billing.movedToWebDesc')}
         </p>
       </div>
diff --git a/app/src/components/settings/panels/CompanionPanel.tsx b/app/src/components/settings/panels/CompanionPanel.tsx
index d608050ab..beb72e66d 100644
--- a/app/src/components/settings/panels/CompanionPanel.tsx
+++ b/app/src/components/settings/panels/CompanionPanel.tsx
@@ -141,7 +141,7 @@ const CompanionPanel = () => {
       {/* Session details */}
       {sessionActive && status && (
         <SettingsSection>
-          <div className="px-4 py-3 text-xs text-neutral-600 dark:text-neutral-300 space-y-1">
+          <div className="px-4 py-3 text-xs text-content-secondary space-y-1">
             <p>
               {t('settings.companion.sessionId')}:{' '}
               <span className="font-mono">{status.session_id?.slice(0, 8)}…</span>
@@ -165,31 +165,23 @@ const CompanionPanel = () => {
           <SettingsRow
             label={t('settings.companion.hotkey')}
             control={
-              <span className="rounded bg-neutral-100 dark:bg-neutral-800 px-2 py-0.5 font-mono text-xs text-neutral-600 dark:text-neutral-300">
+              <span className="rounded bg-surface-subtle px-2 py-0.5 font-mono text-xs text-content-secondary">
                 {config.hotkey}
               </span>
             }
           />
           <SettingsRow
             label={t('settings.companion.activationMode')}
-            control={
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">
-                {config.activation_mode}
-              </span>
-            }
+            control={<span className="text-xs text-content-muted">{config.activation_mode}</span>}
           />
           <SettingsRow
             label={t('settings.companion.sessionTtl')}
-            control={
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">
-                {config.ttl_secs}s
-              </span>
-            }
+            control={<span className="text-xs text-content-muted">{config.ttl_secs}s</span>}
           />
           <SettingsRow
             label={t('settings.companion.screenCapture')}
             control={
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">
+              <span className="text-xs text-content-muted">
                 {config.capture_screen ? t('common.enabled') : t('common.disabled')}
               </span>
             }
@@ -197,7 +189,7 @@ const CompanionPanel = () => {
           <SettingsRow
             label={t('settings.companion.appContext')}
             control={
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">
+              <span className="text-xs text-content-muted">
                 {config.include_app_context ? t('common.enabled') : t('common.disabled')}
               </span>
             }
diff --git a/app/src/components/settings/panels/ComposioPanel.tsx b/app/src/components/settings/panels/ComposioPanel.tsx
index 47631e372..4cd3996f8 100644
--- a/app/src/components/settings/panels/ComposioPanel.tsx
+++ b/app/src/components/settings/panels/ComposioPanel.tsx
@@ -214,9 +214,7 @@ const ComposioPanel = ({ embedded = false, managedAuthEnabled }: ComposioPanelPr
     return (
       <PanelPage contentClassName="" description={composioDescription} leading={composioLeading}>
         <div className={embedded ? '' : 'p-4'}>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
-            {t('settings.composio.loading')}
-          </p>
+          <p className="text-sm text-content-muted">{t('settings.composio.loading')}</p>
         </div>
       </PanelPage>
     );
@@ -229,14 +227,12 @@ const ComposioPanel = ({ embedded = false, managedAuthEnabled }: ComposioPanelPr
       description={composioDescription}
       leading={composioLeading}>
       <div className={embedded ? 'space-y-5' : 'p-4 pt-2 space-y-5'}>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-          {t('settings.composio.intro')}
-        </p>
+        <p className="text-sm text-content-muted">{t('settings.composio.intro')}</p>
 
         {allowManagedAuth ? (
           <SettingsSection>
             <fieldset className="px-4 py-3">
-              <legend className="text-sm font-medium text-neutral-800 dark:text-neutral-100 mb-2">
+              <legend className="text-sm font-medium text-content mb-2">
                 {t('settings.composio.routingMode')}
               </legend>
               <div className="space-y-2">
@@ -251,10 +247,10 @@ const ComposioPanel = ({ embedded = false, managedAuthEnabled }: ComposioPanelPr
                     className="mt-1"
                   />
                   <div className="text-left">
-                    <span className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
+                    <span className="text-sm font-medium text-content">
                       {t('settings.composio.modeManaged')}
                     </span>
-                    <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">
+                    <p className="text-xs text-content-muted mt-0.5">
                       {t('settings.composio.modeManagedDesc')}
                     </p>
                   </div>
@@ -270,10 +266,10 @@ const ComposioPanel = ({ embedded = false, managedAuthEnabled }: ComposioPanelPr
                     className="mt-1"
                   />
                   <div className="text-left">
-                    <span className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
+                    <span className="text-sm font-medium text-content">
                       {t('settings.composio.modeDirect')}
                     </span>
-                    <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">
+                    <p className="text-xs text-content-muted mt-0.5">
                       {t('settings.composio.modeDirectDesc')}
                     </p>
                   </div>
@@ -284,10 +280,10 @@ const ComposioPanel = ({ embedded = false, managedAuthEnabled }: ComposioPanelPr
         ) : (
           <SettingsSection>
             <div className="px-4 py-3 space-y-2">
-              <p className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
+              <p className="text-sm font-medium text-content">
                 {t('settings.composio.modeDirect')}
               </p>
-              <p className="text-xs text-neutral-500 dark:text-neutral-400">
+              <p className="text-xs text-content-muted">
                 {t(
                   'settings.composio.directOnlyDesc',
                   'Managed Composio auth is unavailable here. Enter your own Composio API key or skip this for now.'
diff --git a/app/src/components/settings/panels/ComposioTriagePanel.tsx b/app/src/components/settings/panels/ComposioTriagePanel.tsx
index 367a6df20..a2ede35ba 100644
--- a/app/src/components/settings/panels/ComposioTriagePanel.tsx
+++ b/app/src/components/settings/panels/ComposioTriagePanel.tsx
@@ -82,16 +82,14 @@ const ComposioTriagePanel = () => {
   if (loading) {
     return (
       <SettingsPanel description={t('settings.developerMenu.composio.desc')}>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-          {t('settings.composio.loading')}
-        </p>
+        <p className="text-sm text-content-muted">{t('settings.composio.loading')}</p>
       </SettingsPanel>
     );
   }
 
   return (
     <SettingsPanel description={t('settings.developerMenu.composio.desc')}>
-      <p className="text-sm text-neutral-500 dark:text-neutral-400">
+      <p className="text-sm text-content-muted">
         {t('composio.triageDesc')}{' '}
         <span className="font-mono">OPENHUMAN_TRIGGER_TRIAGE_DISABLED</span>{' '}
         {t('composio.envVarOverrides')}
diff --git a/app/src/components/settings/panels/DesktopAgentPanel.tsx b/app/src/components/settings/panels/DesktopAgentPanel.tsx
index be756865d..b9e0ee9a4 100644
--- a/app/src/components/settings/panels/DesktopAgentPanel.tsx
+++ b/app/src/components/settings/panels/DesktopAgentPanel.tsx
@@ -246,9 +246,7 @@ const DesktopAgentPanel = () => {
         className="rounded-xl border border-amber-300 dark:border-amber-500/40 bg-amber-50 dark:bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300">
         {t('settings.desktopAgent.beta')}
       </div>
-      <p className="text-sm text-neutral-600 dark:text-neutral-300">
-        {t('settings.desktopAgent.description')}
-      </p>
+      <p className="text-sm text-content-secondary">{t('settings.desktopAgent.description')}</p>
 
       <SettingsSection title={t('settings.screenIntel.permissions.title')}>
         {PERMISSIONS.map(({ kind, labelKey }) => {
@@ -264,7 +262,7 @@ const DesktopAgentPanel = () => {
                 <div className="flex items-center gap-2">
                   <SettingsBadge variant={STATE_VARIANT[state]}>{state}</SettingsBadge>
                   {unsupported ? (
-                    <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                    <span className="text-xs text-content-muted">
                       {t('settings.desktopAgent.notRequiredOnOs')}
                     </span>
                   ) : canGrant ? (
@@ -303,9 +301,7 @@ const DesktopAgentPanel = () => {
           }
         />
       </SettingsSection>
-      <p className="text-xs text-neutral-500 dark:text-neutral-400 -mt-2">
-        {t('settings.desktopAgent.seamless.note')}
-      </p>
+      <p className="text-xs text-content-muted -mt-2">{t('settings.desktopAgent.seamless.note')}</p>
 
       <SettingsSection title={t('voice.debug.alwaysOn')}>
         <SettingsRow
@@ -358,7 +354,7 @@ const DesktopAgentPanel = () => {
           {status?.permission_check_process_path ? (
             <p className="opacity-75 text-xs mt-1">
               {t('settings.screenIntel.permissions.macosAppliesPrivacy')}{' '}
-              <span className="font-mono break-all text-stone-600 dark:text-neutral-300">
+              <span className="font-mono break-all text-content-secondary">
                 {status.permission_check_process_path}
               </span>
             </p>
diff --git a/app/src/components/settings/panels/DevWorkflowPanel.tsx b/app/src/components/settings/panels/DevWorkflowPanel.tsx
index 35264cca3..92e8f02fd 100644
--- a/app/src/components/settings/panels/DevWorkflowPanel.tsx
+++ b/app/src/components/settings/panels/DevWorkflowPanel.tsx
@@ -504,13 +504,13 @@ const DevWorkflowPanel = () => {
       description={t('settings.developerMenu.devWorkflow.desc')}>
       <div className="flex flex-col gap-5">
         {/* Description */}
-        <p className="text-sm text-neutral-600 dark:text-neutral-400">
+        <p className="text-sm text-content-secondary dark:text-content-muted">
           {t('settings.developerMenu.devWorkflow.panelDesc')}
         </p>
 
         {/* Active config summary — shown at top regardless of repo loading */}
         {cronLoading && (
-          <div className="text-xs text-neutral-500 dark:text-neutral-400">
+          <div className="text-xs text-content-muted">
             {t('settings.devWorkflow.loadingRepositories')}
           </div>
         )}
@@ -536,7 +536,7 @@ const DevWorkflowPanel = () => {
                     onCheckedChange={() => void handleToggle()}
                     aria-label={t('settings.devWorkflow.enabled')}
                   />
-                  <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                  <span className="text-xs text-content-muted">
                     {existingJob.enabled
                       ? t('settings.devWorkflow.enabled')
                       : t('settings.devWorkflow.paused')}
@@ -545,32 +545,28 @@ const DevWorkflowPanel = () => {
               }
             />
             <dl className="px-4 pb-3 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
-              <dt className="text-neutral-500 dark:text-neutral-400">
+              <dt className="text-content-muted">
                 {t('settings.devWorkflow.activeConfigRepository')}
               </dt>
-              <dd className="font-mono text-neutral-800 dark:text-neutral-100">
+              <dd className="font-mono text-content">
                 {existingJob.name?.replace(/^dev-workflow-/, '') ?? '—'}
               </dd>
-              <dt className="text-neutral-500 dark:text-neutral-400">
+              <dt className="text-content-muted">
                 {t('settings.devWorkflow.activeConfigSchedule')}
               </dt>
-              <dd className="text-neutral-800 dark:text-neutral-100">
+              <dd className="text-content">
                 {SCHEDULE_PRESETS.find(p => p.value === existingJob.expression)
                   ? t(SCHEDULE_PRESETS.find(p => p.value === existingJob.expression)!.labelKey)
                   : existingJob.expression}
               </dd>
-              <dt className="text-neutral-500 dark:text-neutral-400">
-                {t('settings.devWorkflow.nextRun')}
-              </dt>
-              <dd className="text-neutral-800 dark:text-neutral-100">
+              <dt className="text-content-muted">{t('settings.devWorkflow.nextRun')}</dt>
+              <dd className="text-content">
                 {existingJob.next_run ? new Date(existingJob.next_run).toLocaleString() : '—'}
               </dd>
               {existingJob.last_run && (
                 <>
-                  <dt className="text-neutral-500 dark:text-neutral-400">
-                    {t('settings.devWorkflow.lastRun')}
-                  </dt>
-                  <dd className="text-neutral-800 dark:text-neutral-100">
+                  <dt className="text-content-muted">{t('settings.devWorkflow.lastRun')}</dt>
+                  <dd className="text-content">
                     {new Date(existingJob.last_run).toLocaleString()}
                     {existingJob.last_status && (
                       <span
@@ -608,10 +604,10 @@ const DevWorkflowPanel = () => {
 
             {existingJob.last_output && (
               <div className="px-4 pb-4">
-                <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+                <div className="text-xs font-medium text-content-muted mb-1">
                   {t('settings.devWorkflow.lastOutput')}
                 </div>
-                <pre className="px-3 py-2 rounded-md bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-[11px] text-neutral-700 dark:text-neutral-300 font-mono whitespace-pre-wrap break-words max-h-48 overflow-y-auto">
+                <pre className="px-3 py-2 rounded-md bg-surface-subtle border border-line dark:border-line-strong text-[11px] text-content-secondary font-mono whitespace-pre-wrap break-words max-h-48 overflow-y-auto">
                   {existingJob.last_output}
                 </pre>
               </div>
@@ -622,29 +618,29 @@ const DevWorkflowPanel = () => {
                 <button
                   type="button"
                   onClick={() => setHistoryExpanded(!historyExpanded)}
-                  className="text-xs text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors">
+                  className="text-xs text-content-muted hover:text-content-secondary dark:hover:text-neutral-200 transition-colors">
                   {historyExpanded ? '▾' : '▸'} {t('settings.devWorkflow.recentRuns')} (
                   {runHistory.length})
                 </button>
                 {historyExpanded && (
                   <div className="mt-1.5 space-y-1">
                     {runHistory.map(run => (
-                      <div key={run.id} className="rounded bg-white dark:bg-neutral-800">
+                      <div key={run.id} className="rounded bg-surface">
                         <button
                           type="button"
                           onClick={() => setExpandedRunId(expandedRunId === run.id ? null : run.id)}
-                          className="w-full flex items-center justify-between px-2 py-1.5 text-xs hover:bg-neutral-50 dark:hover:bg-neutral-750 rounded transition-colors">
+                          className="w-full flex items-center justify-between px-2 py-1.5 text-xs hover:bg-surface-muted dark:hover:bg-neutral-750 rounded transition-colors">
                           <div className="flex items-center gap-2">
-                            <span className="text-neutral-400">
+                            <span className="text-content-faint">
                               {expandedRunId === run.id ? '▾' : '▸'}
                             </span>
-                            <span className="text-neutral-600 dark:text-neutral-400">
+                            <span className="text-content-secondary dark:text-content-muted">
                               {new Date(run.started_at).toLocaleString()}
                             </span>
                           </div>
                           <div className="flex items-center gap-2">
                             {run.duration_ms != null && (
-                              <span className="text-neutral-500 dark:text-neutral-500">
+                              <span className="text-content-muted dark:text-content-faint">
                                 {(run.duration_ms / 1000).toFixed(1)}s
                               </span>
                             )}
@@ -659,12 +655,12 @@ const DevWorkflowPanel = () => {
                           </div>
                         </button>
                         {expandedRunId === run.id && run.output && (
-                          <pre className="mx-2 mb-2 px-3 py-2 rounded-md bg-neutral-100 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 text-[11px] text-neutral-700 dark:text-neutral-300 font-mono whitespace-pre-wrap break-words max-h-64 overflow-y-auto">
+                          <pre className="mx-2 mb-2 px-3 py-2 rounded-md bg-surface-subtle dark:bg-surface border border-line dark:border-line-strong text-[11px] text-content-secondary font-mono whitespace-pre-wrap break-words max-h-64 overflow-y-auto">
                             {run.output}
                           </pre>
                         )}
                         {expandedRunId === run.id && !run.output && (
-                          <div className="mx-2 mb-2 px-3 py-2 text-[11px] text-neutral-400 dark:text-neutral-500 italic">
+                          <div className="mx-2 mb-2 px-3 py-2 text-[11px] text-content-faint italic">
                             {t('settings.devWorkflow.noOutput')}
                           </div>
                         )}
@@ -711,7 +707,7 @@ const DevWorkflowPanel = () => {
 
             {/* Fork info */}
             {forkLoading && (
-              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+              <div className="text-xs text-content-muted">
                 {t('settings.devWorkflow.detectingForkInfo')}
               </div>
             )}
@@ -730,8 +726,8 @@ const DevWorkflowPanel = () => {
               </div>
             )}
             {selectedRepo && !forkLoading && !forkInfo && (
-              <div className="px-3 py-2 rounded-md bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
-                <div className="text-xs text-neutral-600 dark:text-neutral-400">
+              <div className="px-3 py-2 rounded-md bg-surface-muted border border-line dark:border-line-strong">
+                <div className="text-xs text-content-secondary dark:text-content-muted">
                   {t('settings.devWorkflow.notForkNote')}
                 </div>
               </div>
@@ -763,7 +759,7 @@ const DevWorkflowPanel = () => {
               </SettingsSection>
             )}
             {branchesLoading && (
-              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+              <div className="text-xs text-content-muted">
                 {t('settings.devWorkflow.loadingBranches')}
               </div>
             )}
diff --git a/app/src/components/settings/panels/DeveloperOptionsPanel.tsx b/app/src/components/settings/panels/DeveloperOptionsPanel.tsx
index fda320524..63158c8c4 100644
--- a/app/src/components/settings/panels/DeveloperOptionsPanel.tsx
+++ b/app/src/components/settings/panels/DeveloperOptionsPanel.tsx
@@ -481,7 +481,7 @@ const CoreModeBadge = () => {
     return (
       <div className="px-4 py-3 rounded-xl border border-primary-300 dark:border-primary-500/40 bg-primary-50 dark:bg-primary-500/10">
         <div className="flex items-center gap-2">
-          <span className="px-2 py-0.5 rounded-full bg-primary-600 text-white text-[11px] font-medium">
+          <span className="px-2 py-0.5 rounded-full bg-primary-600 text-content-inverted text-[11px] font-medium">
             {t('devOptions.local')}
           </span>
           <span className="text-sm font-semibold text-primary-900 dark:text-primary-200">
@@ -498,7 +498,7 @@ const CoreModeBadge = () => {
   return (
     <div className="px-4 py-3 rounded-xl border border-sage-300 dark:border-sage-500/40 bg-sage-50 dark:bg-sage-500/10">
       <div className="flex items-center gap-2">
-        <span className="px-2 py-0.5 rounded-full bg-sage-600 text-white text-[11px] font-medium">
+        <span className="px-2 py-0.5 rounded-full bg-sage-600 text-content-inverted text-[11px] font-medium">
           {t('devOptions.cloud')}
         </span>
         <span className="text-sm font-semibold text-sage-900 dark:text-sage-200">
@@ -559,7 +559,7 @@ const SentryTestRow = () => {
         <button
           onClick={onClick}
           disabled={status.kind === 'sending'}
-          className="shrink-0 px-3 py-1.5 rounded-md bg-amber-600 hover:bg-amber-500 text-white text-xs font-medium transition-colors disabled:opacity-60">
+          className="shrink-0 px-3 py-1.5 rounded-md bg-amber-600 hover:bg-amber-500 text-content-inverted text-xs font-medium transition-colors disabled:opacity-60">
           {status.kind === 'sending' ? t('devOptions.sending') : t('devOptions.sendTestEvent')}
         </button>
       </div>
@@ -610,19 +610,13 @@ const LogsFolderRow = () => {
   if (!isTauri()) return null;
 
   return (
-    <div className="px-4 py-3 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60">
+    <div className="px-4 py-3 rounded-xl border border-line bg-surface-muted">
       <div className="flex items-center justify-between gap-3">
         <div className="min-w-0">
-          <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
-            {t('devOptions.appLogs')}
-          </div>
-          <div className="text-xs text-neutral-700 dark:text-neutral-300 mt-0.5">
-            {t('devOptions.appLogsDesc')}
-          </div>
+          <div className="text-sm font-semibold text-content">{t('devOptions.appLogs')}</div>
+          <div className="text-xs text-content-secondary mt-0.5">{t('devOptions.appLogsDesc')}</div>
           {path && (
-            <div className="text-[11px] text-neutral-500 dark:text-neutral-400 mt-1 font-mono truncate">
-              {path}
-            </div>
+            <div className="text-[11px] text-content-muted mt-1 font-mono truncate">{path}</div>
           )}
         </div>
         <button
diff --git a/app/src/components/settings/panels/DevicesPanel.tsx b/app/src/components/settings/panels/DevicesPanel.tsx
index 73378dfe8..106386f72 100644
--- a/app/src/components/settings/panels/DevicesPanel.tsx
+++ b/app/src/components/settings/panels/DevicesPanel.tsx
@@ -101,8 +101,8 @@ function DeviceRow({
   const statusBadge = (
     <div className="flex items-center gap-1.5">
       <PeerDot online={device.peer_online} />
-      <span className="font-mono text-xs text-neutral-400">{truncateId(device.channel_id)}</span>
-      <span className="text-xs text-neutral-400">
+      <span className="font-mono text-xs text-content-faint">{truncateId(device.channel_id)}</span>
+      <span className="text-xs text-content-faint">
         {formatRelativeTime(relativeTime(device.last_seen_at), t)}
       </span>
     </div>
@@ -131,11 +131,11 @@ function ConfirmRevokeDialog({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/30">
-      <div className="bg-white dark:bg-neutral-900 rounded-2xl max-w-sm w-full p-6 border border-neutral-200 dark:border-neutral-800 shadow-large">
-        <h3 className="text-base font-semibold text-neutral-800 dark:text-neutral-100 mb-2">
+      <div className="bg-surface rounded-2xl max-w-sm w-full p-6 border border-line shadow-large">
+        <h3 className="text-base font-semibold text-content mb-2">
           {t('devices.confirmRevokeTitle')}
         </h3>
-        <p className="text-sm text-neutral-600 dark:text-neutral-300 mb-5">
+        <p className="text-sm text-content-secondary mb-5">
           {t('devices.confirmRevokeBody').replace('{label}', device.label)}
         </p>
         <div className="flex gap-3">
@@ -290,13 +290,16 @@ const DevicesPanel = () => {
       <div className="pb-3 flex items-center gap-2">
         {/* Bespoke beta badge — intentional marketing chip */}
         <SettingsBadge variant="warning">{t('devices.betaBadge')}</SettingsBadge>
-        <p className="text-xs text-neutral-500 dark:text-neutral-400">{t('devices.betaText')}</p>
+        <p className="text-xs text-content-muted">{t('devices.betaText')}</p>
       </div>
 
       <div className="pb-5 space-y-3">
         {loading && (
           <div className="flex items-center justify-center py-12">
-            <svg className="w-5 h-5 animate-spin text-neutral-400" fill="none" viewBox="0 0 24 24">
+            <svg
+              className="w-5 h-5 animate-spin text-content-faint"
+              fill="none"
+              viewBox="0 0 24 24">
               <circle
                 className="opacity-25"
                 cx="12"
@@ -334,9 +337,7 @@ const DevicesPanel = () => {
                 </svg>
               </div>
               <SettingsEmptyState label={t('devices.noPaired')} />
-              <p className="text-xs text-neutral-400 dark:text-neutral-500 mb-4 max-w-xs">
-                {t('devices.emptyState')}
-              </p>
+              <p className="text-xs text-content-faint mb-4 max-w-xs">{t('devices.emptyState')}</p>
               <Button type="button" variant="primary" size="sm" onClick={handleOpenPairModal}>
                 {t('devices.pairIphone')}
               </Button>
diff --git a/app/src/components/settings/panels/EmbeddingsPanel.tsx b/app/src/components/settings/panels/EmbeddingsPanel.tsx
index b275bf90f..152bbcfd3 100644
--- a/app/src/components/settings/panels/EmbeddingsPanel.tsx
+++ b/app/src/components/settings/panels/EmbeddingsPanel.tsx
@@ -108,7 +108,7 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
         description={embedded ? undefined : t('pages.settings.ai.embeddingsDesc')}
         leading={embedded ? undefined : <SettingsBackButton onBack={navigateBack} />}>
         <div className={embedded ? '' : 'p-4'}>
-          <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 text-xs text-neutral-500 dark:text-neutral-400">
+          <div className="rounded-xl border border-line bg-surface p-4 text-xs text-content-muted">
             {status.kind === 'loading'
               ? t('common.loading')
               : status.kind === 'error'
@@ -395,7 +395,7 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
       description={embedded ? undefined : t('pages.settings.ai.embeddingsDesc')}
       leading={embedded ? undefined : <SettingsBackButton onBack={navigateBack} />}>
       <div className={embedded ? 'space-y-4' : 'p-4 space-y-4'}>
-        <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed">
+        <p className="text-xs text-content-muted leading-relaxed">
           {t('settings.embeddings.description')}
         </p>
 
@@ -412,17 +412,13 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
                   aria-checked={selected}
                   onClick={() => handleProviderClick(entry)}
                   className={`w-full flex items-start gap-3 px-4 py-3 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 ${
-                    idx !== 0 ? 'border-t border-neutral-100 dark:border-neutral-800' : ''
+                    idx !== 0 ? 'border-t border-line-subtle' : ''
                   } ${
-                    selected
-                      ? 'bg-primary-50 dark:bg-primary-500/10'
-                      : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/60'
+                    selected ? 'bg-primary-50 dark:bg-primary-500/10' : 'hover:bg-surface-hover'
                   }`}>
                   <span className="flex-1 min-w-0">
                     <span className="flex items-center gap-2">
-                      <span className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
-                        {entry.label}
-                      </span>
+                      <span className="text-sm font-medium text-content">{entry.label}</span>
                       {entry.requires_api_key && (
                         <SettingsBadge variant={entry.has_api_key ? 'success' : 'warning'}>
                           {entry.has_api_key
@@ -436,7 +432,7 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
                         </SettingsBadge>
                       )}
                     </span>
-                    <span className="block mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
+                    <span className="block mt-0.5 text-xs text-content-muted">
                       {entry.description}
                     </span>
                   </span>
@@ -586,8 +582,8 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
               setSetupProvider(null);
             }
           }}>
-          <div className="mx-4 max-w-md w-full rounded-2xl bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 p-6 shadow-xl space-y-4">
-            <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+          <div className="mx-4 max-w-md w-full rounded-2xl bg-surface border border-line dark:border-line-strong p-6 shadow-xl space-y-4">
+            <h3 className="text-sm font-semibold text-content">
               {t('settings.embeddings.setupTitle').replace('{provider}', setupProvider.label)}
             </h3>
 
@@ -595,7 +591,7 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
               /* Custom endpoint form */
               <div className="space-y-3">
                 <div>
-                  <label className="block text-[11px] font-medium text-neutral-600 dark:text-neutral-300 mb-1">
+                  <label className="block text-[11px] font-medium text-content-secondary mb-1">
                     {t('settings.embeddings.customEndpoint')}
                   </label>
                   <SettingsTextField
@@ -609,7 +605,7 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
                 </div>
                 <div className="flex gap-2">
                   <div className="flex-1">
-                    <label className="block text-[11px] font-medium text-neutral-600 dark:text-neutral-300 mb-1">
+                    <label className="block text-[11px] font-medium text-content-secondary mb-1">
                       {t('settings.embeddings.customModelPlaceholder')}
                     </label>
                     <SettingsTextField
@@ -621,7 +617,7 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
                     />
                   </div>
                   <div className="w-24">
-                    <label className="block text-[11px] font-medium text-neutral-600 dark:text-neutral-300 mb-1">
+                    <label className="block text-[11px] font-medium text-content-secondary mb-1">
                       {t('settings.embeddings.dimensions')}
                     </label>
                     <SettingsTextField
@@ -634,7 +630,7 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
                   </div>
                 </div>
                 <div>
-                  <label className="block text-[11px] font-medium text-neutral-600 dark:text-neutral-300 mb-1">
+                  <label className="block text-[11px] font-medium text-content-secondary mb-1">
                     {t('settings.embeddings.apiKeyLabel').replace('{provider}', 'API')} (
                     {t('settings.embeddings.optional')})
                   </label>
@@ -650,11 +646,9 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
             ) : (
               /* Standard API key form */
               <div className="space-y-3">
-                <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                  {setupProvider.description}
-                </p>
+                <p className="text-xs text-content-muted">{setupProvider.description}</p>
                 <div>
-                  <label className="block text-[11px] font-medium text-neutral-600 dark:text-neutral-300 mb-1">
+                  <label className="block text-[11px] font-medium text-content-secondary mb-1">
                     {t('settings.embeddings.apiKeyLabel').replace(
                       '{provider}',
                       setupProvider.label
@@ -678,7 +672,7 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
                       {setupShowKey ? t('settings.embeddings.hide') : t('settings.embeddings.show')}
                     </Button>
                   </div>
-                  <p className="mt-1 text-[10px] text-neutral-400 dark:text-neutral-500">
+                  <p className="mt-1 text-[10px] text-content-faint">
                     {t('settings.embeddings.keyStoredEncrypted')}
                   </p>
                 </div>
@@ -771,11 +765,11 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
       {/* ── Confirm wipe dialog ── */}
       {pendingWipe && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-          <div className="mx-4 max-w-sm w-full rounded-2xl bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 p-6 shadow-xl space-y-4">
-            <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+          <div className="mx-4 max-w-sm w-full rounded-2xl bg-surface border border-line dark:border-line-strong p-6 shadow-xl space-y-4">
+            <h3 className="text-sm font-semibold text-content">
               {t('settings.embeddings.wipeTitle')}
             </h3>
-            <p className="text-xs text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            <p className="text-xs text-content-secondary dark:text-content-muted leading-relaxed">
               {t('settings.embeddings.wipeBody')}
             </p>
             <div className="flex justify-end gap-2">
diff --git a/app/src/components/settings/panels/EventLogPanel.tsx b/app/src/components/settings/panels/EventLogPanel.tsx
index b66bdc747..970b6e6cd 100644
--- a/app/src/components/settings/panels/EventLogPanel.tsx
+++ b/app/src/components/settings/panels/EventLogPanel.tsx
@@ -240,12 +240,9 @@ const EventLogPanel = () => {
           disabled={filteredEntries.length === 0}>
           {t('settings.developerMenu.eventLog.download')}
         </Button>
-        <span className="text-xs text-neutral-500 dark:text-neutral-400">
+        <span className="text-xs text-content-muted">
           {filteredEntries.length} {t('settings.developerMenu.eventLog.events')} &middot;{' '}
-          <span
-            className={
-              isLive ? 'text-sage-600 dark:text-sage-300' : 'text-neutral-500 dark:text-neutral-400'
-            }>
+          <span className={isLive ? 'text-sage-600 dark:text-sage-300' : 'text-content-muted'}>
             {isLive
               ? t('settings.developerMenu.eventLog.live')
               : t('settings.developerMenu.eventLog.disconnected')}
@@ -277,7 +274,7 @@ const EventLogPanel = () => {
           onScroll={handleScroll}
           className="max-h-[60vh] overflow-y-auto space-y-1">
           {filteredEntries.length === 0 && (
-            <p className="text-xs text-neutral-500 dark:text-neutral-400 py-4 text-center">
+            <p className="text-xs text-content-muted py-4 text-center">
               {isLive
                 ? t('settings.developerMenu.eventLog.waiting')
                 : t('settings.developerMenu.eventLog.notConnected')}
@@ -286,13 +283,13 @@ const EventLogPanel = () => {
           {filteredEntries.map(entry => {
             const colors = DOMAIN_BADGE_COLORS[entry.domain] || {
               bg: 'bg-neutral-500/20',
-              text: 'text-neutral-400',
+              text: 'text-content-faint',
             };
             return (
               <div
                 key={entry.id}
-                className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2 flex items-start gap-2">
-                <span className="text-[10px] text-neutral-500 dark:text-neutral-400 font-mono shrink-0 pt-0.5">
+                className="rounded-xl border border-line bg-surface-muted px-3 py-2 flex items-start gap-2">
+                <span className="text-[10px] text-content-muted font-mono shrink-0 pt-0.5">
                   {entry.timestamp}
                 </span>
                 <span
@@ -302,13 +299,11 @@ const EventLogPanel = () => {
                     : entry.domain.toUpperCase()}
                 </span>
                 {entry.agent && (
-                  <span className="text-[10px] text-neutral-500 dark:text-neutral-400 shrink-0 font-mono">
+                  <span className="text-[10px] text-content-muted shrink-0 font-mono">
                     {entry.agent}
                   </span>
                 )}
-                <span className="text-xs text-neutral-800 dark:text-neutral-100 truncate">
-                  {entry.event}
-                </span>
+                <span className="text-xs text-content truncate">{entry.event}</span>
               </div>
             );
           })}
diff --git a/app/src/components/settings/panels/LocalModelDebugPanel.tsx b/app/src/components/settings/panels/LocalModelDebugPanel.tsx
index c2b73e4d8..b0a979a06 100644
--- a/app/src/components/settings/panels/LocalModelDebugPanel.tsx
+++ b/app/src/components/settings/panels/LocalModelDebugPanel.tsx
@@ -49,9 +49,9 @@ const statusTone = (state: string): string => {
     case 'degraded':
       return 'text-amber-700 dark:text-amber-300';
     case 'disabled':
-      return 'text-neutral-500 dark:text-neutral-400';
+      return 'text-content-muted';
     default:
-      return 'text-neutral-700 dark:text-neutral-200';
+      return 'text-content-secondary';
   }
 };
 
diff --git a/app/src/components/settings/panels/MascotPanel.tsx b/app/src/components/settings/panels/MascotPanel.tsx
index 5cd608226..17c55416b 100644
--- a/app/src/components/settings/panels/MascotPanel.tsx
+++ b/app/src/components/settings/panels/MascotPanel.tsx
@@ -329,14 +329,12 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
 
       {/* ── Color picker — intentional bespoke swatch grid UI ────── */}
       <div>
-        <h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-400 dark:text-neutral-500 mb-2 px-1">
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-content-faint mb-2 px-1">
           {t('settings.mascot.colorHeading')}
         </h3>
-        <div className="bg-white dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 overflow-hidden">
+        <div className="bg-surface rounded-xl border border-line overflow-hidden">
           {available.length === 0 ? (
-            <p className="p-4 text-sm text-neutral-500 dark:text-neutral-400">
-              {t('settings.mascot.noColorVariants')}
-            </p>
+            <p className="p-4 text-sm text-content-muted">{t('settings.mascot.noColorVariants')}</p>
           ) : (
             <div
               className="grid grid-cols-5 gap-3 p-4"
@@ -356,15 +354,11 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
                     onClick={() => handleSelect(opt.id)}
                     data-testid={`mascot-color-${opt.id}`}
                     className={`flex flex-col items-center gap-2 rounded-lg p-2 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 ${
-                      selected
-                        ? 'bg-neutral-100 dark:bg-neutral-800'
-                        : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/60'
+                      selected ? 'bg-surface-subtle' : 'hover:bg-surface-hover'
                     }`}>
                     <span
                       className={`w-10 h-10 rounded-full border-2 transition-shadow ${
-                        selected
-                          ? 'border-primary-500 shadow-soft'
-                          : 'border-neutral-200 dark:border-neutral-800'
+                        selected ? 'border-primary-500 shadow-soft' : 'border-line'
                       }`}
                       style={
                         opt.id === 'custom'
@@ -374,7 +368,7 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
                           : { backgroundColor: palette.bodyFill }
                       }
                     />
-                    <span className="text-xs text-neutral-700 dark:text-neutral-200">{label}</span>
+                    <span className="text-xs text-content-secondary">{label}</span>
                   </button>
                 );
               })}
@@ -382,18 +376,18 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
           )}
         </div>
         {activeColor === 'custom' && (
-          <div className="mt-3 bg-white dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 p-4 space-y-3">
+          <div className="mt-3 bg-surface rounded-xl border border-line p-4 space-y-3">
             <label className="flex items-center gap-3">
               <input
                 type="color"
                 value={customPrimary}
                 onChange={e => dispatch(setCustomPrimaryColor(e.target.value))}
-                className="w-8 h-8 rounded-md border border-neutral-200 dark:border-neutral-700 cursor-pointer p-0"
+                className="w-8 h-8 rounded-md border border-line dark:border-line-strong cursor-pointer p-0"
               />
-              <span className="text-sm text-neutral-700 dark:text-neutral-200">
+              <span className="text-sm text-content-secondary">
                 {t('settings.mascot.primaryColor')}
               </span>
-              <code className="ml-auto text-[11px] font-mono text-neutral-400 dark:text-neutral-500">
+              <code className="ml-auto text-[11px] font-mono text-content-faint">
                 {customPrimary}
               </code>
             </label>
@@ -402,34 +396,34 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
                 type="color"
                 value={customSecondary}
                 onChange={e => dispatch(setCustomSecondaryColor(e.target.value))}
-                className="w-8 h-8 rounded-md border border-neutral-200 dark:border-neutral-700 cursor-pointer p-0"
+                className="w-8 h-8 rounded-md border border-line dark:border-line-strong cursor-pointer p-0"
               />
-              <span className="text-sm text-neutral-700 dark:text-neutral-200">
+              <span className="text-sm text-content-secondary">
                 {t('settings.mascot.secondaryColor')}
               </span>
-              <code className="ml-auto text-[11px] font-mono text-neutral-400 dark:text-neutral-500">
+              <code className="ml-auto text-[11px] font-mono text-content-faint">
                 {customSecondary}
               </code>
             </label>
           </div>
         )}
-        <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed px-1 mt-2">
+        <p className="text-xs text-content-muted leading-relaxed px-1 mt-2">
           {t('settings.mascot.colorDesc')}
         </p>
       </div>
 
       {/* ── Voice picker section ──────────────────────────────────── */}
       <div>
-        <h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-400 dark:text-neutral-500 mb-2 px-1">
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-content-faint mb-2 px-1">
           {t('settings.mascot.voice.heading')}
         </h3>
-        <div className="bg-white dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 p-4 space-y-4">
+        <div className="bg-surface rounded-xl border border-line p-4 space-y-4">
           {/* Gender radio buttons — intentional bespoke pill UI */}
           <div
             role="radiogroup"
             aria-label={t('settings.mascot.voice.genderHeading')}
             className="space-y-1">
-            <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+            <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
               {t('settings.mascot.voice.genderHeading')}
             </span>
             <div className="flex gap-2 pt-1">
@@ -444,7 +438,7 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
                   className={`px-3 py-1.5 text-xs rounded-md border transition-colors ${
                     voiceGender === g
                       ? 'border-primary-500 bg-primary-50 dark:bg-primary-500/20 text-primary-700 dark:text-primary-200'
-                      : 'border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-200 hover:border-neutral-300 dark:hover:border-neutral-700'
+                      : 'border-line text-content-secondary hover:border-line-strong dark:hover:border-line-strong'
                   }`}>
                   {t(
                     g === 'female'
@@ -457,17 +451,17 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
           </div>
 
           {/* Locale default checkbox — bespoke inline label layout */}
-          <label className="flex items-start gap-2 text-sm text-neutral-700 dark:text-neutral-200 cursor-pointer">
+          <label className="flex items-start gap-2 text-sm text-content-secondary cursor-pointer">
             <input
               type="checkbox"
               data-testid="mascot-voice-locale-default"
               checked={useLocaleDefault}
               onChange={e => onLocaleDefaultToggle(e.target.checked)}
-              className="mt-0.5 h-4 w-4 rounded border-neutral-300 dark:border-neutral-700 text-primary-600 focus:ring-primary-500"
+              className="mt-0.5 h-4 w-4 rounded border-line-strong text-primary-600 focus:ring-primary-500"
             />
             <span className="flex flex-col">
               <span>{t('settings.mascot.voice.useLocaleDefault')}</span>
-              <span className="text-[11px] text-neutral-500 dark:text-neutral-400">
+              <span className="text-[11px] text-content-muted">
                 {t('settings.mascot.voice.useLocaleDefaultDesc')}{' '}
                 <code className="font-mono">{locale}</code> →{' '}
                 <code className="font-mono">{localeDefaultVoiceId}</code>
@@ -477,7 +471,7 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
 
           {/* Preset dropdown — bespoke label + select combo */}
           <label className={`block space-y-1 ${presetPickerDisabled ? 'opacity-50' : ''}`}>
-            <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+            <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
               {t('settings.mascot.voice.presetHeading')}
             </span>
             <select
@@ -486,7 +480,7 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
               disabled={presetPickerDisabled}
               value={isCustomVoice ? '__custom__' : effectiveVoiceId}
               onChange={e => onPresetChange(e.target.value)}
-              className="w-full rounded-md border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-neutral-800 dark:text-neutral-100 focus:outline-none focus:ring-1 focus:ring-primary-400 disabled:cursor-not-allowed">
+              className="w-full rounded-md border border-line bg-surface px-3 py-2 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-400 disabled:cursor-not-allowed">
               {visiblePresets.map(v => (
                 <option key={v.id} value={v.id}>
                   {v.label}
@@ -498,7 +492,7 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
 
           {isCustomVoice && (
             <label className="block space-y-1">
-              <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+              <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
                 {t('settings.mascot.voice.customHeading')}
               </span>
               <div className="flex gap-2">
@@ -520,7 +514,7 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
                   {t('common.save')}
                 </Button>
               </div>
-              <p className="text-[11px] text-neutral-500 dark:text-neutral-400">
+              <p className="text-[11px] text-content-muted">
                 {t('settings.mascot.voice.customDesc')}
               </p>
             </label>
@@ -550,7 +544,7 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
             </Button>
             <span
               data-testid="mascot-voice-current"
-              className="ml-1 text-[11px] text-neutral-500 dark:text-neutral-400 truncate max-w-[18rem]"
+              className="ml-1 text-[11px] text-content-muted truncate max-w-[18rem]"
               title={effectiveVoiceId}>
               {t('settings.mascot.voice.current')}:{' '}
               <code className="font-mono">{effectiveVoiceId}</code>
@@ -565,21 +559,21 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
             </div>
           )}
         </div>
-        <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed px-1 mt-2">
+        <p className="text-xs text-content-muted leading-relaxed px-1 mt-2">
           {t('settings.mascot.voice.desc')}
         </p>
       </div>
 
       {/* ── Character picker — intentional bespoke list UI ────────── */}
       <div>
-        <h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-400 dark:text-neutral-500 mb-2 px-1">
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-content-faint mb-2 px-1">
           {t('settings.mascot.characterHeading')}
         </h3>
 
         {/* Custom GIF input */}
-        <div className="mb-3 bg-white dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 p-4 space-y-3">
+        <div className="mb-3 bg-surface rounded-xl border border-line p-4 space-y-3">
           <label className="block space-y-1">
-            <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+            <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
               {t('settings.mascot.customGifHeading')}
             </span>
             <div className="flex gap-2">
@@ -622,7 +616,7 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
             </p>
           )}
           {customMascotGifUrl && (
-            <div className="flex justify-center rounded-lg border border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-3">
+            <div className="flex justify-center rounded-lg border border-line-subtle bg-surface-muted p-3">
               <div style={{ width: 128, height: 128 }}>
                 <CustomGifMascot src={customMascotGifUrl} />
               </div>
@@ -631,32 +625,28 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
         </div>
 
         {/* Backend mascot library */}
-        <div className="bg-white dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 overflow-hidden">
+        <div className="bg-surface rounded-xl border border-line overflow-hidden">
           {backendListError && (
             <p className="p-4 text-sm text-coral-700 dark:text-coral-300">
               {t('settings.mascot.libraryUnavailable')}: {backendListError}
             </p>
           )}
           {!backendListError && backendList === null && (
-            <p className="p-4 text-sm text-neutral-500 dark:text-neutral-400">
-              {t('settings.mascot.loadingLibrary')}
-            </p>
+            <p className="p-4 text-sm text-content-muted">{t('settings.mascot.loadingLibrary')}</p>
           )}
           {backendList && backendList.length === 0 && !backendListError && (
-            <p className="p-4 text-sm text-neutral-500 dark:text-neutral-400">
-              {t('settings.mascot.noCharacters')}
-            </p>
+            <p className="p-4 text-sm text-content-muted">{t('settings.mascot.noCharacters')}</p>
           )}
           {backendList && backendList.length > 0 && (
-            <ul className="divide-y divide-neutral-100 dark:divide-neutral-800">
+            <ul className="divide-y divide-line-subtle dark:divide-neutral-800">
               <li>
                 <button
                   type="button"
                   onClick={() => handleSelectBackend(null)}
                   aria-pressed={selectedMascotId == null && customMascotGifUrl == null}
-                  className={`flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-neutral-50 dark:hover:bg-neutral-800/60 ${
+                  className={`flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-surface-hover ${
                     selectedMascotId == null && customMascotGifUrl == null
-                      ? 'bg-neutral-50 dark:bg-neutral-800/60 font-medium'
+                      ? 'bg-surface-muted font-medium'
                       : ''
                   }`}>
                   <span>{t('settings.mascot.localDefault')}</span>
@@ -676,12 +666,12 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
                       onClick={() => handleSelectBackend(summary.id)}
                       aria-pressed={active}
                       data-testid={`backend-mascot-${summary.id}`}
-                      className={`flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-neutral-50 dark:hover:bg-neutral-800/60 ${
-                        active ? 'bg-neutral-50 dark:bg-neutral-800/60 font-medium' : ''
+                      className={`flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-surface-hover ${
+                        active ? 'bg-surface-muted font-medium' : ''
                       }`}>
                       <span className="flex flex-col">
                         <span>{summary.name}</span>
-                        <span className="text-[10px] text-neutral-500 dark:text-neutral-400">
+                        <span className="text-[10px] text-content-muted">
                           v{summary.version} · {summary.states.length}{' '}
                           {t('settings.mascot.characterStates')}
                           {summary.hasVisemes ? ` · ${t('settings.mascot.characterVisemes')}` : ''}
@@ -701,8 +691,8 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
         </div>
 
         {visibleActiveDetail && (
-          <div className="mt-3 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-4">
-            <p className="text-[11px] font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400 mb-2">
+          <div className="mt-3 rounded-xl border border-line bg-surface-muted p-4">
+            <p className="text-[11px] font-medium uppercase tracking-wide text-content-muted mb-2">
               {t('settings.mascot.characterPreview')} · {visibleActiveDetail.name}
             </p>
             <div className="flex justify-center">
@@ -717,7 +707,7 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
             {visibleDetailError}
           </p>
         )}
-        <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed px-1 mt-2">
+        <p className="text-xs text-content-muted leading-relaxed px-1 mt-2">
           {t('settings.mascot.characterDesc')}
         </p>
       </div>
diff --git a/app/src/components/settings/panels/McpServerPanel.tsx b/app/src/components/settings/panels/McpServerPanel.tsx
index d44fe11f5..da9b93adf 100644
--- a/app/src/components/settings/panels/McpServerPanel.tsx
+++ b/app/src/components/settings/panels/McpServerPanel.tsx
@@ -177,13 +177,11 @@ const McpServerPanel = ({ embedded = false }: McpServerPanelProps = {}) => {
           title={t('settings.mcpServer.toolsSectionTitle')}
           description={t('settings.mcpServer.toolsSectionDesc')}>
           {MCP_TOOLS.map(tool => (
-            <div
-              key={tool.name}
-              className="flex items-start gap-3 px-4 py-2.5 bg-white dark:bg-neutral-900">
+            <div key={tool.name} className="flex items-start gap-3 px-4 py-2.5 bg-surface">
               <span className="font-mono text-xs text-primary-700 dark:text-primary-400 mt-0.5 shrink-0">
                 {tool.name}
               </span>
-              <span className="text-xs text-neutral-600 dark:text-neutral-400">
+              <span className="text-xs text-content-secondary dark:text-content-muted">
                 {tool.description}
               </span>
             </div>
@@ -218,17 +216,15 @@ const McpServerPanel = ({ embedded = false }: McpServerPanelProps = {}) => {
 
           {/* Config file path */}
           <div className="px-4 mt-3 mb-2 flex items-center gap-2">
-            <span className="text-xs text-neutral-500 dark:text-neutral-400 shrink-0">
+            <span className="text-xs text-content-muted shrink-0">
               {t('settings.mcpServer.configFilePath')}:
             </span>
-            <span className="text-xs font-mono text-neutral-700 dark:text-neutral-300 truncate">
-              {configPath}
-            </span>
+            <span className="text-xs font-mono text-content-secondary truncate">{configPath}</span>
           </div>
 
           {/* JSON snippet */}
-          <div className="mx-4 mb-3 rounded-xl overflow-hidden border border-neutral-200 dark:border-neutral-800">
-            <pre className="bg-neutral-50 dark:bg-neutral-900/60 px-4 py-3 text-xs font-mono text-neutral-800 dark:text-neutral-200 overflow-x-auto whitespace-pre leading-relaxed">
+          <div className="mx-4 mb-3 rounded-xl overflow-hidden border border-line">
+            <pre className="bg-surface-muted dark:bg-surface/60 px-4 py-3 text-xs font-mono text-content overflow-x-auto whitespace-pre leading-relaxed">
               {snippet}
             </pre>
           </div>
diff --git a/app/src/components/settings/panels/MeetingSettingsPanel.tsx b/app/src/components/settings/panels/MeetingSettingsPanel.tsx
index b3a14da76..1c3d27132 100644
--- a/app/src/components/settings/panels/MeetingSettingsPanel.tsx
+++ b/app/src/components/settings/panels/MeetingSettingsPanel.tsx
@@ -143,9 +143,7 @@ const MeetingSettingsPanel = () => {
   if (!isTauri()) {
     return (
       <SettingsPanel description={t('settings.meetings.menuDesc')}>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-          {t('settings.meetings.desktopOnly')}
-        </p>
+        <p className="text-sm text-content-muted">{t('settings.meetings.desktopOnly')}</p>
       </SettingsPanel>
     );
   }
@@ -153,9 +151,7 @@ const MeetingSettingsPanel = () => {
   if (isLoading) {
     return (
       <SettingsPanel description={t('settings.meetings.menuDesc')}>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-          {t('settings.meetings.loading')}
-        </p>
+        <p className="text-sm text-content-muted">{t('settings.meetings.loading')}</p>
       </SettingsPanel>
     );
   }
diff --git a/app/src/components/settings/panels/MemoryDataPanel.tsx b/app/src/components/settings/panels/MemoryDataPanel.tsx
index a3281efd3..90acee146 100644
--- a/app/src/components/settings/panels/MemoryDataPanel.tsx
+++ b/app/src/components/settings/panels/MemoryDataPanel.tsx
@@ -55,32 +55,30 @@ const MemoryDataPanel = ({ embedded = false }: MemoryDataPanelProps = {}) => {
       description={embedded ? undefined : t('devOptions.memoryInspectionDesc')}
       leading={embedded ? undefined : <SettingsBackButton onBack={navigateBack} />}>
       <div className={embedded ? 'space-y-4' : 'p-4 space-y-4'}>
-        <section className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
-          <h3 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
-            {t('memoryData.howItWorks')}
-          </h3>
+        <section className="rounded-xl border border-line bg-surface p-4 space-y-3">
+          <h3 className="text-sm font-semibold text-content">{t('memoryData.howItWorks')}</h3>
           <dl className="space-y-2.5">
             <div>
-              <dt className="text-xs font-semibold text-neutral-800 dark:text-neutral-100">
+              <dt className="text-xs font-semibold text-content">
                 {t('memoryData.workspaceVault')}
               </dt>
-              <dd className="text-xs leading-relaxed text-neutral-500 dark:text-neutral-400">
+              <dd className="text-xs leading-relaxed text-content-muted">
                 {t('memoryData.workspaceVaultDesc')}
               </dd>
             </div>
             <div>
-              <dt className="text-xs font-semibold text-neutral-800 dark:text-neutral-100">
+              <dt className="text-xs font-semibold text-content">
                 {t('memoryData.connectedSources')}
               </dt>
-              <dd className="text-xs leading-relaxed text-neutral-500 dark:text-neutral-400">
+              <dd className="text-xs leading-relaxed text-content-muted">
                 {t('memoryData.connectedSourcesDesc')}
               </dd>
             </div>
             <div>
-              <dt className="text-xs font-semibold text-neutral-800 dark:text-neutral-100">
+              <dt className="text-xs font-semibold text-content">
                 {t('memoryData.internalFiles')}
               </dt>
-              <dd className="text-xs leading-relaxed text-neutral-500 dark:text-neutral-400">
+              <dd className="text-xs leading-relaxed text-content-muted">
                 {t('memoryData.internalFilesDesc')}
               </dd>
             </div>
diff --git a/app/src/components/settings/panels/MemoryDebugPanel.tsx b/app/src/components/settings/panels/MemoryDebugPanel.tsx
index 814a41088..1f7bc33e1 100644
--- a/app/src/components/settings/panels/MemoryDebugPanel.tsx
+++ b/app/src/components/settings/panels/MemoryDebugPanel.tsx
@@ -233,18 +233,16 @@ const MemoryDebugPanel = () => {
                 {documents.map(doc => (
                   <div
                     key={`${doc.namespace}:${doc.documentId}`}
-                    className="flex items-start justify-between gap-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2">
+                    className="flex items-start justify-between gap-2 rounded-lg border border-line bg-surface-muted p-2">
                     <div className="min-w-0">
-                      <div className="text-xs font-medium text-neutral-800 dark:text-neutral-100 break-all">
+                      <div className="text-xs font-medium text-content break-all">
                         {doc.documentId}
                       </div>
-                      <div className="text-[11px] text-neutral-500 dark:text-neutral-400 break-all">
+                      <div className="text-[11px] text-content-muted break-all">
                         {doc.namespace}
                       </div>
                       {doc.title && (
-                        <div className="text-[11px] text-neutral-500 dark:text-neutral-400">
-                          {doc.title}
-                        </div>
+                        <div className="text-[11px] text-content-muted">{doc.title}</div>
                       )}
                     </div>
                     <Button
@@ -260,10 +258,10 @@ const MemoryDebugPanel = () => {
               </div>
             )}
             <details className="text-xs">
-              <summary className="cursor-pointer text-neutral-500 dark:text-neutral-400">
+              <summary className="cursor-pointer text-content-muted">
                 {t('memory.rawResponse')}
               </summary>
-              <pre className="mt-1 max-h-32 overflow-auto rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-950 dark:bg-neutral-50 p-2 text-[11px] text-neutral-100 whitespace-pre-wrap break-words">
+              <pre className="mt-1 max-h-32 overflow-auto rounded-lg border border-line bg-neutral-950 dark:bg-neutral-50 p-2 text-[11px] text-neutral-100 whitespace-pre-wrap break-words">
                 {JSON.stringify(documentsRaw, null, 2)}
               </pre>
             </details>
@@ -289,7 +287,7 @@ const MemoryDebugPanel = () => {
                 {namespaces.map(ns => (
                   <span
                     key={ns}
-                    className="rounded-full bg-neutral-100 dark:bg-neutral-800 px-2 py-0.5 text-[11px] text-neutral-500 dark:text-neutral-400">
+                    className="rounded-full bg-surface-subtle px-2 py-0.5 text-[11px] text-content-muted">
                     {ns}
                   </span>
                 ))}
@@ -326,9 +324,7 @@ const MemoryDebugPanel = () => {
                 aria-label={t('memory.maxChunks')}
                 inputSize="sm"
               />
-              <span className="text-[11px] text-neutral-500 dark:text-neutral-400">
-                {t('memory.maxChunks')}
-              </span>
+              <span className="text-[11px] text-content-muted">{t('memory.maxChunks')}</span>
               <div className="flex-1" />
               <Button
                 type="button"
@@ -362,25 +358,25 @@ const MemoryDebugPanel = () => {
               <div className="space-y-2">
                 {queryResult && (
                   <div>
-                    <div className="text-[11px] font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+                    <div className="text-[11px] font-medium text-content-muted mb-1">
                       {t('memory.queryResult')}
                     </div>
                     <MemoryTextWithEntities
                       text={queryResult.text ?? ''}
                       entities={queryResult.entities}
-                      className="rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-[11px] leading-5 min-h-12 whitespace-pre-wrap"
+                      className="rounded-lg border border-line bg-surface-muted p-2 text-[11px] leading-5 min-h-12 whitespace-pre-wrap"
                     />
                   </div>
                 )}
                 {recallResult && (
                   <div>
-                    <div className="text-[11px] font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+                    <div className="text-[11px] font-medium text-content-muted mb-1">
                       {t('memory.recallResult')}
                     </div>
                     <MemoryTextWithEntities
                       text={recallResult.text ?? ''}
                       entities={recallResult.entities}
-                      className="rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-[11px] leading-5 min-h-12 whitespace-pre-wrap"
+                      className="rounded-lg border border-line bg-surface-muted p-2 text-[11px] leading-5 min-h-12 whitespace-pre-wrap"
                     />
                   </div>
                 )}
diff --git a/app/src/components/settings/panels/MemorySyncPanel.tsx b/app/src/components/settings/panels/MemorySyncPanel.tsx
index 373d7629d..6d20777a3 100644
--- a/app/src/components/settings/panels/MemorySyncPanel.tsx
+++ b/app/src/components/settings/panels/MemorySyncPanel.tsx
@@ -34,12 +34,10 @@ const MemorySyncPanel = () => {
 
   return (
     <SettingsPanel description={t('settings.dataSync.menuDesc')}>
-      <p className="text-sm text-neutral-500 dark:text-neutral-400">
-        {t('settings.dataSync.description')}
-      </p>
+      <p className="text-sm text-content-muted">{t('settings.dataSync.description')}</p>
       <MemorySourcesRegistry onToast={addToast} />
-      <div className="rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4">
-        <h3 className="mb-2 text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+      <div className="rounded-lg border border-line bg-surface p-4">
+        <h3 className="mb-2 text-sm font-semibold text-content">
           {t('sync.auditTitle', 'Sync History')}
         </h3>
         <SyncAuditPanel />
diff --git a/app/src/components/settings/panels/MigrationPanel.tsx b/app/src/components/settings/panels/MigrationPanel.tsx
index 96c97ffe5..675e61634 100644
--- a/app/src/components/settings/panels/MigrationPanel.tsx
+++ b/app/src/components/settings/panels/MigrationPanel.tsx
@@ -134,12 +134,12 @@ const MigrationPanel = ({ embedded = false }: MigrationPanelProps = {}) => {
 
   const body = (
     <>
-      <p className="text-sm text-neutral-600 dark:text-neutral-300">{t('migration.description')}</p>
+      <p className="text-sm text-content-secondary">{t('migration.description')}</p>
 
       <SettingsSection>
         <div className="p-4 space-y-4" data-testid="migration-form">
           <div className="space-y-1">
-            <label className="block text-xs font-medium text-neutral-600 dark:text-neutral-300">
+            <label className="block text-xs font-medium text-content-secondary">
               {t('migration.vendorLabel')}
             </label>
             <SettingsSelect
@@ -155,7 +155,7 @@ const MigrationPanel = ({ embedded = false }: MigrationPanelProps = {}) => {
           </div>
 
           <div className="space-y-1">
-            <label className="block text-xs font-medium text-neutral-600 dark:text-neutral-300">
+            <label className="block text-xs font-medium text-content-secondary">
               {t('migration.sourceLabel')}
             </label>
             <SettingsTextField
@@ -171,9 +171,7 @@ const MigrationPanel = ({ embedded = false }: MigrationPanelProps = {}) => {
               inputSize="sm"
               className="w-full"
             />
-            <p className="text-[11px] text-neutral-500 dark:text-neutral-400">
-              {t('migration.sourceHint')}
-            </p>
+            <p className="text-[11px] text-content-muted">{t('migration.sourceHint')}</p>
           </div>
 
           <div className="flex flex-wrap gap-2">
@@ -193,14 +191,12 @@ const MigrationPanel = ({ embedded = false }: MigrationPanelProps = {}) => {
               data-testid="migration-apply-button"
               onClick={() => void runApply()}
               disabled={!canApply}
-              className="bg-amber-600 hover:bg-amber-700 text-white disabled:bg-amber-600/50">
+              className="bg-amber-600 hover:bg-amber-700 text-content-inverted disabled:bg-amber-600/50">
               {isApplying ? t('migration.applyRunning') : t('migration.applyAction')}
             </Button>
           </div>
 
-          <p className="text-[11px] text-neutral-500 dark:text-neutral-400">
-            {t('migration.applyDisclaimer')}
-          </p>
+          <p className="text-[11px] text-content-muted">{t('migration.applyDisclaimer')}</p>
         </div>
       </SettingsSection>
 
@@ -217,71 +213,43 @@ const MigrationPanel = ({ embedded = false }: MigrationPanelProps = {}) => {
           data-testid={
             appliedReport != null ? 'migration-report-applied' : 'migration-report-preview'
           }
-          className="bg-white dark:bg-neutral-900/40 rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 space-y-3">
-          <h3 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+          className="bg-surface rounded-lg border border-line p-4 space-y-3">
+          <h3 className="text-sm font-semibold text-content">
             {appliedReport != null
               ? t('migration.reportTitleApplied')
               : t('migration.reportTitlePreview')}
           </h3>
           <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1 text-xs">
-            <dt className="text-neutral-500 dark:text-neutral-400">
-              {t('migration.report.source')}
-            </dt>
-            <dd
-              className="text-neutral-800 dark:text-neutral-100 break-all"
-              data-testid="migration-report-source">
+            <dt className="text-content-muted">{t('migration.report.source')}</dt>
+            <dd className="text-content break-all" data-testid="migration-report-source">
               {reportToRender.source_workspace}
             </dd>
-            <dt className="text-neutral-500 dark:text-neutral-400">
-              {t('migration.report.target')}
-            </dt>
-            <dd
-              className="text-neutral-800 dark:text-neutral-100 break-all"
-              data-testid="migration-report-target">
+            <dt className="text-content-muted">{t('migration.report.target')}</dt>
+            <dd className="text-content break-all" data-testid="migration-report-target">
               {reportToRender.target_workspace}
             </dd>
-            <dt className="text-neutral-500 dark:text-neutral-400">
-              {t('migration.report.fromSqlite')}
-            </dt>
-            <dd className="text-neutral-800 dark:text-neutral-100">
-              {reportToRender.stats.from_sqlite}
-            </dd>
-            <dt className="text-neutral-500 dark:text-neutral-400">
-              {t('migration.report.fromMarkdown')}
-            </dt>
-            <dd className="text-neutral-800 dark:text-neutral-100">
-              {reportToRender.stats.from_markdown}
-            </dd>
-            <dt className="text-neutral-500 dark:text-neutral-400">
-              {t('migration.report.imported')}
-            </dt>
-            <dd
-              className="text-neutral-800 dark:text-neutral-100"
-              data-testid="migration-report-imported">
+            <dt className="text-content-muted">{t('migration.report.fromSqlite')}</dt>
+            <dd className="text-content">{reportToRender.stats.from_sqlite}</dd>
+            <dt className="text-content-muted">{t('migration.report.fromMarkdown')}</dt>
+            <dd className="text-content">{reportToRender.stats.from_markdown}</dd>
+            <dt className="text-content-muted">{t('migration.report.imported')}</dt>
+            <dd className="text-content" data-testid="migration-report-imported">
               {reportToRender.stats.imported}
             </dd>
-            <dt className="text-neutral-500 dark:text-neutral-400">
-              {t('migration.report.skippedUnchanged')}
-            </dt>
-            <dd className="text-neutral-800 dark:text-neutral-100">
-              {reportToRender.stats.skipped_unchanged}
-            </dd>
-            <dt className="text-neutral-500 dark:text-neutral-400">
-              {t('migration.report.renamedConflicts')}
-            </dt>
-            <dd className="text-neutral-800 dark:text-neutral-100">
-              {reportToRender.stats.renamed_conflicts}
-            </dd>
+            <dt className="text-content-muted">{t('migration.report.skippedUnchanged')}</dt>
+            <dd className="text-content">{reportToRender.stats.skipped_unchanged}</dd>
+            <dt className="text-content-muted">{t('migration.report.renamedConflicts')}</dt>
+            <dd className="text-content">{reportToRender.stats.renamed_conflicts}</dd>
           </dl>
 
           {reportToRender.warnings.length > 0 && (
             <div className="space-y-1">
-              <p className="text-xs font-medium text-neutral-600 dark:text-neutral-300">
+              <p className="text-xs font-medium text-content-secondary">
                 {t('migration.report.warnings')}
               </p>
               <ul
                 data-testid="migration-report-warnings"
-                className="text-xs text-neutral-700 dark:text-neutral-300 list-disc list-inside space-y-0.5">
+                className="text-xs text-content-secondary list-disc list-inside space-y-0.5">
                 {reportToRender.warnings.map((w, i) => (
                   <li key={i}>{w}</li>
                 ))}
@@ -289,7 +257,7 @@ const MigrationPanel = ({ embedded = false }: MigrationPanelProps = {}) => {
             </div>
           )}
 
-          <p className="text-[11px] text-neutral-500 dark:text-neutral-400">
+          <p className="text-[11px] text-content-muted">
             {appliedReport != null
               ? t('migration.report.appliedHint')
               : t('migration.report.previewHint')}
diff --git a/app/src/components/settings/panels/ModelHealthPanel.tsx b/app/src/components/settings/panels/ModelHealthPanel.tsx
index 853c3b120..91a186d6d 100644
--- a/app/src/components/settings/panels/ModelHealthPanel.tsx
+++ b/app/src/components/settings/panels/ModelHealthPanel.tsx
@@ -194,13 +194,13 @@ const ModelHealthPanel = () => {
             <option value="staging">{t('settings.modelHealth.badge.staging')}</option>
             <option value="vision">{t('settings.modelHealth.badge.vision')}</option>
           </SettingsSelect>
-          <span className="text-neutral-500 dark:text-neutral-400">
+          <span className="text-content-muted">
             {filtered.length} {t('settings.modelHealth.models')}
           </span>
         </div>
 
         {loading ? (
-          <p className="text-xs text-neutral-500 dark:text-neutral-400 py-4 text-center">
+          <p className="text-xs text-content-muted py-4 text-center">
             {t('settings.modelHealth.loading')}
           </p>
         ) : filtered.length === 0 ? (
@@ -209,7 +209,7 @@ const ModelHealthPanel = () => {
           <div className="overflow-x-auto">
             <table className="w-full text-xs">
               <thead>
-                <tr className="border-b border-stone-200 dark:border-neutral-800">
+                <tr className="border-b border-line">
                   <th
                     className="text-left py-2 px-2 cursor-pointer"
                     onClick={() => handleSort('id')}>
@@ -254,15 +254,13 @@ const ModelHealthPanel = () => {
                   return (
                     <tr
                       key={m.id}
-                      className={`border-b border-stone-100 dark:border-neutral-800/50 ${isReplace ? 'bg-red-500/5' : ''}`}>
+                      className={`border-b border-line-subtle dark:border-line/50 ${isReplace ? 'bg-red-500/5' : ''}`}>
                       <td className="py-2 px-2">
-                        <div className="font-semibold text-stone-900 dark:text-neutral-100">
-                          {m.id}
-                        </div>
-                        <div className="text-[10px] text-stone-400">
+                        <div className="font-semibold text-content">{m.id}</div>
+                        <div className="text-[10px] text-content-faint">
                           {m.provider}
                           {m.context_window ? (
-                            <span className="ml-1 font-mono text-stone-400/80">
+                            <span className="ml-1 font-mono text-content-faint/80">
                               · {formatContextWindow(m.context_window)} ctx
                             </span>
                           ) : null}
@@ -322,10 +320,10 @@ const ModelHealthPanel = () => {
               setSelectedCandidate(null);
             }}>
             <div
-              className="bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-700 rounded-xl p-5 max-w-sm w-full mx-4"
+              className="bg-surface border border-line rounded-xl p-5 max-w-sm w-full mx-4"
               onClick={e => e.stopPropagation()}>
               <h3 className="text-sm font-bold mb-2">{t('settings.modelHealth.modal.title')}</h3>
-              <p className="text-xs text-stone-500 dark:text-neutral-400 mb-3">
+              <p className="text-xs text-content-muted mb-3">
                 {swapTarget.id} — {t('settings.modelHealth.modal.hallucRate')}:{' '}
                 {((swapTarget.hallucination_rate ?? 0) * 100).toFixed(1)}%
               </p>
@@ -342,7 +340,7 @@ const ModelHealthPanel = () => {
                       className={`w-full text-left rounded-lg border p-2 flex items-center justify-between cursor-pointer ${isSelected ? 'border-green-500 bg-green-500/15' : 'border-green-500/30 bg-green-500/5'}`}>
                       <span>
                         <span className="block text-xs font-semibold">{c.id}</span>
-                        <span className="block text-[10px] text-stone-400">
+                        <span className="block text-[10px] text-content-faint">
                           {c.hallucination_rate !== null
                             ? (c.hallucination_rate * 100).toFixed(1)
                             : '?'}
diff --git a/app/src/components/settings/panels/NotificationRoutingPanel.tsx b/app/src/components/settings/panels/NotificationRoutingPanel.tsx
index feb516b29..0dc5342cd 100644
--- a/app/src/components/settings/panels/NotificationRoutingPanel.tsx
+++ b/app/src/components/settings/panels/NotificationRoutingPanel.tsx
@@ -111,17 +111,15 @@ const NotificationRoutingPanel = ({ embedded = false }: NotificationRoutingPanel
     <>
       {stats && (
         <SettingsSection title={t('notifications.routing.pipelineStats')}>
-          <div className="grid grid-cols-3 divide-x divide-neutral-100 dark:divide-neutral-800">
+          <div className="grid grid-cols-3 divide-x divide-line-subtle dark:divide-neutral-800">
             {[
               { label: t('notifications.routing.total'), value: stats.total },
               { label: t('notifications.routing.unread'), value: stats.unread },
               { label: t('notifications.routing.unscored'), value: stats.unscored },
             ].map(({ label, value }) => (
               <div key={label} className="px-4 py-3 text-center">
-                <p className="text-lg font-semibold text-neutral-800 dark:text-neutral-100">
-                  {value}
-                </p>
-                <p className="text-xs text-neutral-500 dark:text-neutral-400">{label}</p>
+                <p className="text-lg font-semibold text-content">{value}</p>
+                <p className="text-xs text-content-muted">{label}</p>
               </div>
             ))}
           </div>
@@ -160,7 +158,7 @@ const NotificationRoutingPanel = ({ embedded = false }: NotificationRoutingPanel
           {
             label: t('notifications.routing.level.drop'),
             desc: t('notifications.routing.level.dropDesc'),
-            color: 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300',
+            color: 'bg-surface-subtle text-content-secondary',
           },
           {
             label: t('notifications.routing.level.acknowledge'),
@@ -183,7 +181,7 @@ const NotificationRoutingPanel = ({ embedded = false }: NotificationRoutingPanel
               className={`flex-shrink-0 px-2 py-0.5 rounded text-[11px] font-semibold ${row.color}`}>
               {row.label}
             </span>
-            <span className="text-xs text-neutral-600 dark:text-neutral-300">{row.desc}</span>
+            <span className="text-xs text-content-secondary">{row.desc}</span>
           </div>
         ))}
       </SettingsSection>
@@ -202,13 +200,11 @@ const NotificationRoutingPanel = ({ embedded = false }: NotificationRoutingPanel
           return (
             <div key={provider} className="px-4 py-3 space-y-2">
               <div className="flex items-center justify-between">
-                <p className="text-sm font-medium text-neutral-800 dark:text-neutral-100 capitalize">
-                  {provider}
-                </p>
+                <p className="text-sm font-medium text-content capitalize">{provider}</p>
                 <div className="flex items-center gap-2">
                   <label
                     htmlFor={`notification-enabled-${provider}`}
-                    className="text-xs text-neutral-600 dark:text-neutral-300">
+                    className="text-xs text-content-secondary">
                     {t('common.enabled')}
                   </label>
                   <SettingsCheckbox
@@ -221,7 +217,7 @@ const NotificationRoutingPanel = ({ embedded = false }: NotificationRoutingPanel
                   />
                 </div>
               </div>
-              <label className="flex items-center gap-2 text-xs text-neutral-600 dark:text-neutral-300">
+              <label className="flex items-center gap-2 text-xs text-content-secondary">
                 {t('notifications.routing.threshold')}
                 <input
                   className="flex-1"
@@ -237,7 +233,7 @@ const NotificationRoutingPanel = ({ embedded = false }: NotificationRoutingPanel
                 />
                 <span>{s.importance_threshold.toFixed(2)}</span>
               </label>
-              <label className="text-xs text-neutral-600 dark:text-neutral-300 flex items-center gap-2">
+              <label className="text-xs text-content-secondary flex items-center gap-2">
                 {t('notifications.routing.routeToOrchestrator')}
                 <input
                   type="checkbox"
diff --git a/app/src/components/settings/panels/NotificationsPanel.tsx b/app/src/components/settings/panels/NotificationsPanel.tsx
index 6a765157d..6cc9bf6d3 100644
--- a/app/src/components/settings/panels/NotificationsPanel.tsx
+++ b/app/src/components/settings/panels/NotificationsPanel.tsx
@@ -91,7 +91,7 @@ const NotificationsPanel = ({ embedded = false }: NotificationsPanelProps = {})
           description={t('settings.notifications.suppressAllDesc')}
           control={
             dndLoading ? (
-              <div className="w-[38px] h-[22px] rounded-full bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
+              <div className="w-[38px] h-[22px] rounded-full bg-surface-strong animate-pulse" />
             ) : (
               <SettingsSwitch
                 id="switch-dnd"
@@ -131,7 +131,7 @@ const NotificationsPanel = ({ embedded = false }: NotificationsPanelProps = {})
         })}
       </SettingsSection>
 
-      <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed px-1">
+      <p className="text-xs text-content-muted leading-relaxed px-1">
         {t('settings.notifications.categoryFooter')}
       </p>
     </>
diff --git a/app/src/components/settings/panels/PermissionsPanel.tsx b/app/src/components/settings/panels/PermissionsPanel.tsx
index 83ff9fce6..04ff60fe8 100644
--- a/app/src/components/settings/panels/PermissionsPanel.tsx
+++ b/app/src/components/settings/panels/PermissionsPanel.tsx
@@ -196,17 +196,15 @@ const PermissionsPanel = () => {
         )}
 
         {isLoading ? (
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
-            {t('settings.agentAccess.loading')}
-          </p>
+          <p className="text-sm text-content-muted">{t('settings.agentAccess.loading')}</p>
         ) : (
           <>
             {/* Access mode presets — intentional bespoke card UI; kept as-is. */}
             <section className="space-y-2">
-              <h2 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+              <h2 className="text-sm font-semibold text-content">
                 {t('settings.permissions.accessMode')}
               </h2>
-              <p className="text-xs text-neutral-500 dark:text-neutral-400">
+              <p className="text-xs text-content-muted">
                 {t('settings.permissions.accessModeDesc')}
               </p>
               <div className="grid gap-2">
@@ -219,28 +217,24 @@ const PermissionsPanel = () => {
                     className={`text-left rounded-lg border p-3 transition ${
                       level === p.id
                         ? 'border-primary-500 bg-primary-50 dark:bg-primary-500/10'
-                        : 'border-neutral-200 dark:border-neutral-800 hover:border-primary-300 dark:hover:border-primary-500'
+                        : 'border-line hover:border-primary-300 dark:hover:border-primary-500'
                     }`}>
                     <div className="flex items-center gap-2">
                       <span
                         className={`inline-block w-3 h-3 rounded-full border ${
                           level === p.id
                             ? 'bg-primary-500 border-primary-500'
-                            : 'border-neutral-300 dark:border-neutral-700'
+                            : 'border-line-strong'
                         }`}
                       />
-                      <span className="font-medium text-neutral-800 dark:text-neutral-100">
-                        {p.title}
-                      </span>
+                      <span className="font-medium text-content">{p.title}</span>
                       {p.id === 'supervised' && (
-                        <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                        <span className="text-xs text-content-muted">
                           {t('settings.agentAccess.defaultTag')}
                         </span>
                       )}
                     </div>
-                    <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
-                      {p.description}
-                    </p>
+                    <p className="mt-1 text-xs text-content-muted">{p.description}</p>
                   </button>
                 ))}
                 {level === 'full' && (
@@ -253,16 +247,14 @@ const PermissionsPanel = () => {
 
             {/* Folders the assistant can use */}
             <section className="space-y-2">
-              <h2 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+              <h2 className="text-sm font-semibold text-content">
                 {t('settings.permissions.folders')}
               </h2>
-              <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                {t('settings.permissions.foldersDesc')}
-              </p>
-              <div className="rounded-lg border border-neutral-200 dark:border-neutral-800 px-3 py-2">
+              <p className="text-xs text-content-muted">{t('settings.permissions.foldersDesc')}</p>
+              <div className="rounded-lg border border-line px-3 py-2">
                 <div className="flex items-center gap-2">
                   <span className="inline-block w-2 h-2 rounded-full bg-sage-500" />
-                  <span className="text-xs font-medium text-neutral-800 dark:text-neutral-100">
+                  <span className="text-xs font-medium text-content">
                     {t('settings.agentAccess.actionSandbox')}
                   </span>
                   <span className="text-xs text-sage-600 dark:text-sage-400">
@@ -312,7 +304,7 @@ const PermissionsPanel = () => {
                 ) : (
                   <div className="mt-0.5 flex items-center gap-2">
                     <p
-                      className="text-xs text-neutral-500 dark:text-neutral-400 font-mono"
+                      className="text-xs text-content-muted font-mono"
                       data-testid="permissions-action-dir">
                       {agentPaths?.action_dir ?? '~/OpenHuman/projects'}
                     </p>
@@ -338,7 +330,7 @@ const PermissionsPanel = () => {
                 {actionDirSaved && !actionDirEditing && (
                   <p className="text-xs text-sage-600 dark:text-sage-400">{actionDirSaved}</p>
                 )}
-                <p className="text-xs text-neutral-500 dark:text-neutral-500 mt-0.5">
+                <p className="text-xs text-content-muted dark:text-content-faint mt-0.5">
                   {t('settings.agentAccess.actionSandboxDesc')}
                 </p>
               </div>
diff --git a/app/src/components/settings/panels/PersonaPanel.tsx b/app/src/components/settings/panels/PersonaPanel.tsx
index 5ed3c4dd5..c406bb0ba 100644
--- a/app/src/components/settings/panels/PersonaPanel.tsx
+++ b/app/src/components/settings/panels/PersonaPanel.tsx
@@ -183,7 +183,7 @@ const PersonaPanel = ({ embedded = false }: PersonaPanelProps) => {
           </Button>
         </div>
       </SettingsSection>
-      <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed px-1">
+      <p className="text-xs text-content-muted leading-relaxed px-1">
         {t('settings.persona.identityDesc')}
       </p>
 
@@ -191,7 +191,7 @@ const PersonaPanel = ({ embedded = false }: PersonaPanelProps) => {
       <SettingsSection title={t('settings.persona.soul.heading')}>
         {soulLoading ? (
           <div className="px-4 py-3">
-            <p className="text-sm text-neutral-500 dark:text-neutral-400">{t('common.loading')}</p>
+            <p className="text-sm text-content-muted">{t('common.loading')}</p>
           </div>
         ) : (
           <>
@@ -228,7 +228,7 @@ const PersonaPanel = ({ embedded = false }: PersonaPanelProps) => {
               {soulIsDefault && (
                 <span
                   data-testid="persona-soul-default-badge"
-                  className="text-[11px] text-neutral-500 dark:text-neutral-400">
+                  className="text-[11px] text-content-muted">
                   {t('settings.persona.soul.usingDefault')}
                 </span>
               )}
@@ -243,7 +243,7 @@ const PersonaPanel = ({ embedded = false }: PersonaPanelProps) => {
           </p>
         )}
       </SettingsSection>
-      <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed px-1">
+      <p className="text-xs text-content-muted leading-relaxed px-1">
         {t('settings.persona.soul.desc')}
       </p>
 
@@ -254,7 +254,7 @@ const PersonaPanel = ({ embedded = false }: PersonaPanelProps) => {
             type="button"
             data-testid="persona-open-mascot"
             onClick={() => navigateToSettings('personality#face')}
-            className="flex w-full items-center justify-between text-left text-sm text-neutral-800 dark:text-neutral-200 hover:text-primary-700 dark:hover:text-primary-300">
+            className="flex w-full items-center justify-between text-left text-sm text-content hover:text-primary-700 dark:hover:text-primary-300">
             <span>{t('settings.persona.openMascotSettings')}</span>
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
@@ -262,7 +262,7 @@ const PersonaPanel = ({ embedded = false }: PersonaPanelProps) => {
           </button>
         </div>
       </SettingsSection>
-      <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed px-1">
+      <p className="text-xs text-content-muted leading-relaxed px-1">
         {t('settings.persona.appearanceDesc')}
       </p>
     </>
diff --git a/app/src/components/settings/panels/PrivacyPanel.tsx b/app/src/components/settings/panels/PrivacyPanel.tsx
index 80503ea57..55e74d0d9 100644
--- a/app/src/components/settings/panels/PrivacyPanel.tsx
+++ b/app/src/components/settings/panels/PrivacyPanel.tsx
@@ -105,21 +105,15 @@ const PrivacyPanel = () => {
         {/* What leaves my computer */}
         <SettingsSection title={t('privacy.whatLeavesComputer')}>
           {loadState === 'loading' && (
-            <p className="p-4 text-xs text-neutral-500 dark:text-neutral-400">
-              {t('privacy.loading')}
-            </p>
+            <p className="p-4 text-xs text-content-muted">{t('privacy.loading')}</p>
           )}
           {loadState === 'error' && (
-            <p
-              className="p-4 text-xs text-neutral-500 dark:text-neutral-400"
-              data-testid="privacy-load-error">
+            <p className="p-4 text-xs text-content-muted" data-testid="privacy-load-error">
               {t('privacy.loadError')}
             </p>
           )}
           {loadState === 'ready' && capabilities.length === 0 && (
-            <p className="p-4 text-xs text-neutral-500 dark:text-neutral-400">
-              {t('privacy.noCapabilities')}
-            </p>
+            <p className="p-4 text-xs text-content-muted">{t('privacy.noCapabilities')}</p>
           )}
           {loadState === 'ready' && capabilities.length > 0 && (
             <ul data-testid="privacy-capability-list">
@@ -127,14 +121,12 @@ const PrivacyPanel = () => {
                 <li key={cap.id} className="p-4" data-testid={`privacy-row-${cap.id}`}>
                   <div className="flex items-start justify-between gap-3">
                     <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
-                        {cap.name}
-                      </p>
-                      <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1 leading-relaxed">
+                      <p className="text-sm font-medium text-content">{cap.name}</p>
+                      <p className="text-xs text-content-muted mt-1 leading-relaxed">
                         {cap.description}
                       </p>
                       {cap.privacy.destinations.length > 0 && (
-                        <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
+                        <p className="text-xs text-content-faint mt-1">
                           {t('privacy.sentTo')}: {cap.privacy.destinations.join(', ')}
                         </p>
                       )}
@@ -143,7 +135,7 @@ const PrivacyPanel = () => {
                       <SettingsBadge variant={KIND_BADGE_VARIANT[cap.privacy.data_kind]}>
                         {kindLabel(cap.privacy.data_kind, t)}
                       </SettingsBadge>
-                      <span className="text-[10px] text-neutral-500 dark:text-neutral-400">
+                      <span className="text-[10px] text-content-muted">
                         {cap.privacy.leaves_device
                           ? t('privacy.leavesDevice')
                           : t('privacy.staysLocal')}
@@ -196,10 +188,10 @@ const PrivacyPanel = () => {
         </SettingsSection>
 
         {/* Info Box */}
-        <div className="p-4 bg-neutral-50 dark:bg-neutral-800/60 rounded-xl border border-neutral-200 dark:border-neutral-800">
+        <div className="p-4 bg-surface-muted rounded-xl border border-line">
           <div className="flex items-start space-x-3">
             <svg
-              className="w-5 h-5 text-neutral-400 dark:text-neutral-500 mt-0.5 flex-shrink-0"
+              className="w-5 h-5 text-content-faint mt-0.5 flex-shrink-0"
               fill="currentColor"
               viewBox="0 0 20 20">
               <path
@@ -209,7 +201,7 @@ const PrivacyPanel = () => {
               />
             </svg>
             <div>
-              <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed">
+              <p className="text-xs text-content-muted leading-relaxed">
                 {t('privacy.analyticsDisclaimer')}
               </p>
             </div>
diff --git a/app/src/components/settings/panels/ProfileEditorPage.tsx b/app/src/components/settings/panels/ProfileEditorPage.tsx
index 786a83342..50a6e3761 100644
--- a/app/src/components/settings/panels/ProfileEditorPage.tsx
+++ b/app/src/components/settings/panels/ProfileEditorPage.tsx
@@ -225,11 +225,7 @@ const ProfileEditorPage = () => {
             ) : (
               <SettingsRow
                 label={t('settings.profiles.editor.id')}
-                control={
-                  <code className="font-mono text-xs text-neutral-500 dark:text-neutral-400">
-                    {profileId}
-                  </code>
-                }
+                control={<code className="font-mono text-xs text-content-muted">{profileId}</code>}
               />
             )}
             <SettingsRow
@@ -442,14 +438,12 @@ function AllowlistField({
       stacked
       control={
         <div className="space-y-2">
-          <div className="inline-flex overflow-hidden rounded-md border border-neutral-200 text-xs dark:border-neutral-700">
+          <div className="inline-flex overflow-hidden rounded-md border border-line text-xs dark:border-line-strong">
             <button
               type="button"
               onClick={() => onChange(null)}
               className={`px-3 py-1 font-medium transition-colors ${
-                !restricted
-                  ? 'bg-ocean-500 text-white'
-                  : 'bg-white text-neutral-600 dark:bg-neutral-900 dark:text-neutral-300'
+                !restricted ? 'bg-ocean-500 text-white' : 'bg-surface text-content-secondary'
               }`}>
               {t('settings.profiles.editor.all')}
             </button>
@@ -457,27 +451,25 @@ function AllowlistField({
               type="button"
               onClick={() => onChange(value ?? [])}
               className={`px-3 py-1 font-medium transition-colors ${
-                restricted
-                  ? 'bg-ocean-500 text-white'
-                  : 'bg-white text-neutral-600 dark:bg-neutral-900 dark:text-neutral-300'
+                restricted ? 'bg-ocean-500 text-white' : 'bg-surface text-content-secondary'
               }`}>
               {t('settings.profiles.editor.selected')}
             </button>
           </div>
 
           {restricted && (
-            <div className="rounded-md border border-neutral-200 p-2 dark:border-neutral-700">
+            <div className="rounded-md border border-line p-2 dark:border-line-strong">
               <div className="mb-1.5 flex flex-wrap gap-1.5">
                 {items.map(item => (
                   <span
                     key={item}
-                    className="inline-flex items-center gap-1 rounded-full bg-neutral-100 px-2.5 py-1 font-mono text-xs text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200">
+                    className="inline-flex items-center gap-1 rounded-full bg-surface-subtle px-2.5 py-1 font-mono text-xs text-content-secondary">
                     {item}
                     <button
                       type="button"
                       aria-label={t('settings.profiles.editor.removeAria').replace('{item}', item)}
                       onClick={() => onChange(items.filter(x => x !== item))}
-                      className="rounded-full text-neutral-400 hover:text-coral-600 dark:text-neutral-500 dark:hover:text-coral-300">
+                      className="rounded-full text-content-faint hover:text-coral-600 dark:hover:text-coral-300">
                       <LuX className="h-3 w-3" />
                     </button>
                   </span>
diff --git a/app/src/components/settings/panels/ProfilesPanel.tsx b/app/src/components/settings/panels/ProfilesPanel.tsx
index 87c59107a..30de1b770 100644
--- a/app/src/components/settings/panels/ProfilesPanel.tsx
+++ b/app/src/components/settings/panels/ProfilesPanel.tsx
@@ -78,9 +78,7 @@ const ProfilesPanel = () => {
         </Button>
       }>
       <>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-          {t('settings.profiles.subtitle')}
-        </p>
+        <p className="text-sm text-content-muted">{t('settings.profiles.subtitle')}</p>
 
         {(actionError || error) && (
           <p className="rounded-md border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700 dark:border-coral-500/30 dark:bg-coral-500/10 dark:text-coral-300">
@@ -90,7 +88,7 @@ const ProfilesPanel = () => {
 
         {profiles.length === 0 ? (
           status === 'loading' ? (
-            <div className="flex items-center justify-center py-12 text-neutral-400 dark:text-neutral-500">
+            <div className="flex items-center justify-center py-12 text-content-faint">
               <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent" />
               <span className="text-sm">{t('common.loading')}</span>
             </div>
@@ -99,7 +97,7 @@ const ProfilesPanel = () => {
           )
         ) : (
           <SettingsSection>
-            <ul className="divide-y divide-neutral-100 dark:divide-neutral-800">
+            <ul className="divide-y divide-line-subtle dark:divide-neutral-800">
               {profiles.map(profile => {
                 const isActive = profile.id === activeId;
                 return (
@@ -108,7 +106,7 @@ const ProfilesPanel = () => {
                     className="flex items-center justify-between gap-3 py-3 first:pt-1 last:pb-1">
                     <div className="min-w-0">
                       <div className="flex items-center gap-2">
-                        <span className="truncate text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+                        <span className="truncate text-sm font-semibold text-content">
                           {profile.name}
                         </span>
                         {isActive && (
@@ -116,14 +114,14 @@ const ProfilesPanel = () => {
                             {t('settings.profiles.active')}
                           </span>
                         )}
-                        <span className="rounded-full bg-neutral-100 px-2 py-0.5 text-[10px] font-medium text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400">
+                        <span className="rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-medium text-content-muted">
                           {profile.builtIn
                             ? t('settings.profiles.sourceBuiltIn')
                             : t('settings.profiles.sourceCustom')}
                         </span>
                       </div>
                       {profile.description && (
-                        <p className="mt-0.5 truncate text-xs text-neutral-500 dark:text-neutral-400">
+                        <p className="mt-0.5 truncate text-xs text-content-muted">
                           {profile.description}
                         </p>
                       )}
diff --git a/app/src/components/settings/panels/ProviderSetupErrorNotice.tsx b/app/src/components/settings/panels/ProviderSetupErrorNotice.tsx
index ff83ec4fb..cbb6c2a77 100644
--- a/app/src/components/settings/panels/ProviderSetupErrorNotice.tsx
+++ b/app/src/components/settings/panels/ProviderSetupErrorNotice.tsx
@@ -114,7 +114,7 @@ export const ProviderSetupErrorNotice = ({ error }: { error: string }) => {
           <summary className="cursor-pointer text-[11px] font-medium text-red-700 dark:text-red-200">
             {t('providerSetup.error.technicalDetails')}
           </summary>
-          <pre className="mt-1 max-h-32 max-w-full overflow-auto whitespace-pre-wrap break-words rounded border border-red-200/70 dark:border-red-500/30 bg-white/70 dark:bg-neutral-950/40 p-2 font-mono text-[11px] leading-relaxed text-red-800 dark:text-red-200 [overflow-wrap:anywhere]">
+          <pre className="mt-1 max-h-32 max-w-full overflow-auto whitespace-pre-wrap break-words rounded border border-red-200/70 dark:border-red-500/30 bg-surface/70 p-2 font-mono text-[11px] leading-relaxed text-red-800 dark:text-red-200 [overflow-wrap:anywhere]">
             {details}
           </pre>
         </details>
diff --git a/app/src/components/settings/panels/RecoveryPhrasePanel.tsx b/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
index 4f0f957ce..c331d3775 100644
--- a/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
+++ b/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
@@ -369,9 +369,7 @@ const RecoveryPhrasePanel = () => {
           d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
         />
       </svg>
-      <p className="text-sm text-neutral-500 dark:text-neutral-400">
-        {t('mnemonic.loadingWalletStatus')}
-      </p>
+      <p className="text-sm text-content-muted">{t('mnemonic.loadingWalletStatus')}</p>
     </div>
   );
 
@@ -416,49 +414,47 @@ const RecoveryPhrasePanel = () => {
 
           {/* Wallet metadata */}
           {walletStatus && (
-            <div className="bg-neutral-50 dark:bg-neutral-800/60 rounded-2xl p-4 border border-neutral-200 dark:border-neutral-800 space-y-3">
+            <div className="bg-surface-muted rounded-2xl p-4 border border-line space-y-3">
               {walletStatus.source && (
                 <div className="flex items-center justify-between">
-                  <span className="text-xs text-neutral-500 dark:text-neutral-400">
-                    {t('mnemonic.walletSource')}
-                  </span>
-                  <span className="text-xs font-medium text-neutral-700 dark:text-neutral-200 capitalize">
+                  <span className="text-xs text-content-muted">{t('mnemonic.walletSource')}</span>
+                  <span className="text-xs font-medium text-content-secondary capitalize">
                     {walletStatus.source}
                   </span>
                 </div>
               )}
               {walletStatus.mnemonicWordCount && (
                 <div className="flex items-center justify-between">
-                  <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                  <span className="text-xs text-content-muted">
                     {t('mnemonic.walletWordCount')}
                   </span>
-                  <span className="text-xs font-medium text-neutral-700 dark:text-neutral-200">
+                  <span className="text-xs font-medium text-content-secondary">
                     {walletStatus.mnemonicWordCount} words
                   </span>
                 </div>
               )}
               {walletStatus.updatedAtMs && (
                 <div className="flex items-center justify-between">
-                  <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                  <span className="text-xs text-content-muted">
                     {t('mnemonic.walletLastUpdated')}
                   </span>
-                  <span className="text-xs font-medium text-neutral-700 dark:text-neutral-200">
+                  <span className="text-xs font-medium text-content-secondary">
                     {new Date(walletStatus.updatedAtMs).toLocaleDateString()}
                   </span>
                 </div>
               )}
               {walletStatus.accounts.length > 0 && (
                 <div>
-                  <span className="text-xs text-neutral-500 dark:text-neutral-400 block mb-2">
+                  <span className="text-xs text-content-muted block mb-2">
                     {t('mnemonic.viewAccounts')}
                   </span>
                   <div className="space-y-1.5">
                     {walletStatus.accounts.map(account => (
                       <div key={account.chain} className="flex items-center justify-between gap-2">
-                        <span className="text-xs font-mono font-medium uppercase text-neutral-500 dark:text-neutral-400 w-14 shrink-0">
+                        <span className="text-xs font-mono font-medium uppercase text-content-muted w-14 shrink-0">
                           {account.chain}
                         </span>
-                        <span className="text-xs font-mono text-neutral-700 dark:text-neutral-300 truncate">
+                        <span className="text-xs font-mono text-content-secondary truncate">
                           {account.address}
                         </span>
                       </div>
@@ -489,7 +485,7 @@ const RecoveryPhrasePanel = () => {
                   {t('mnemonic.cannotRecover')}
                 </p>
               </div>
-              <div className="bg-neutral-50 dark:bg-neutral-800/60 rounded-2xl p-4 border border-neutral-200 dark:border-neutral-800 relative">
+              <div className="bg-surface-muted rounded-2xl p-4 border border-line relative">
                 <div
                   className="grid grid-cols-3 gap-2 transition-all duration-300"
                   style={{
@@ -500,8 +496,8 @@ const RecoveryPhrasePanel = () => {
                   {viewMnemonic.split(' ').map((word, index) => (
                     <div
                       key={index}
-                      className="flex items-center gap-2 bg-white dark:bg-neutral-900 rounded-lg px-3 py-2 text-sm border border-neutral-200 dark:border-neutral-800">
-                      <span className="text-neutral-500 dark:text-neutral-400 font-mono text-xs w-5 text-right">
+                      className="flex items-center gap-2 bg-surface rounded-lg px-3 py-2 text-sm border border-line">
+                      <span className="text-content-muted font-mono text-xs w-5 text-right">
                         {index + 1}.
                       </span>
                       <span className="font-mono font-medium">{word}</span>
@@ -515,7 +511,7 @@ const RecoveryPhrasePanel = () => {
                     aria-label={t('mnemonic.revealPhrase')}
                     className="absolute inset-0 flex items-center justify-center cursor-pointer bg-transparent">
                     <svg
-                      className="w-7 h-7 text-neutral-800 dark:text-white transition-opacity duration-200 hover:opacity-70"
+                      className="w-7 h-7 text-content dark:text-white transition-opacity duration-200 hover:opacity-70"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -694,7 +690,7 @@ const RecoveryPhrasePanel = () => {
   const renderGenerateMode = () => (
     <>
       <div className="mb-4 space-y-3">
-        <p className="text-sm text-neutral-600 dark:text-neutral-300 leading-relaxed">
+        <p className="text-sm text-content-secondary leading-relaxed">
           {t('mnemonic.writeDownWords')} {MNEMONIC_GENERATE_WORD_COUNT} {t('mnemonic.wordsInOrder')}
         </p>
         <div className="flex items-start gap-2.5 p-3 rounded-xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30">
@@ -716,7 +712,7 @@ const RecoveryPhrasePanel = () => {
         </div>
       </div>
 
-      <div className="bg-neutral-50 dark:bg-neutral-800/60 rounded-2xl p-4 mb-4 border border-neutral-200 dark:border-neutral-800 relative">
+      <div className="bg-surface-muted rounded-2xl p-4 mb-4 border border-line relative">
         <div
           className="grid grid-cols-3 gap-2 transition-all duration-300"
           style={{
@@ -727,8 +723,8 @@ const RecoveryPhrasePanel = () => {
           {words.map((word, index) => (
             <div
               key={index}
-              className="flex items-center gap-2 bg-white dark:bg-neutral-900 rounded-lg px-3 py-2 text-sm border border-neutral-200 dark:border-neutral-800">
-              <span className="text-neutral-500 dark:text-neutral-400 font-mono text-xs w-5 text-right">
+              className="flex items-center gap-2 bg-surface rounded-lg px-3 py-2 text-sm border border-line">
+              <span className="text-content-muted font-mono text-xs w-5 text-right">
                 {index + 1}.
               </span>
               <span className="font-mono font-medium">{word}</span>
@@ -742,7 +738,7 @@ const RecoveryPhrasePanel = () => {
             aria-label={t('mnemonic.revealPhrase')}
             className="absolute inset-0 flex items-center justify-center cursor-pointer bg-transparent">
             <svg
-              className="w-7 h-7 text-neutral-800 dark:text-white transition-opacity duration-200 hover:opacity-70"
+              className="w-7 h-7 text-content dark:text-white transition-opacity duration-200 hover:opacity-70"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -810,9 +806,7 @@ const RecoveryPhrasePanel = () => {
           checked={confirmed}
           onCheckedChange={setConfirmed}
         />
-        <span className="text-sm text-neutral-700 dark:text-neutral-200">
-          {t('mnemonic.consentSaved')}
-        </span>
+        <span className="text-sm text-content-secondary">{t('mnemonic.consentSaved')}</span>
       </label>
     </>
   );
@@ -820,15 +814,13 @@ const RecoveryPhrasePanel = () => {
   const renderImportMode = () => (
     <>
       <div className="mb-4">
-        <p className="text-sm text-neutral-600 dark:text-neutral-300 leading-relaxed">
+        <p className="text-sm text-content-secondary leading-relaxed">
           {t('mnemonic.enterPhraseToRestore')}
         </p>
       </div>
 
       <div className="flex items-center gap-2 mb-3">
-        <span className="text-xs text-neutral-500 dark:text-neutral-400">
-          {t('mnemonic.words')}:
-        </span>
+        <span className="text-xs text-content-muted">{t('mnemonic.words')}:</span>
         {BIP39_IMPORT_LENGTHS.map(len => (
           <button
             key={len}
@@ -837,18 +829,18 @@ const RecoveryPhrasePanel = () => {
             className={`px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${
               selectedWordCount === len
                 ? 'bg-primary-500/20 border-primary-500/40 text-primary-600 dark:text-primary-300 border'
-                : 'border border-neutral-200 dark:border-neutral-800 text-neutral-500 dark:text-neutral-400 hover:border-neutral-300 dark:border-neutral-700'
+                : 'border border-line text-content-muted hover:border-line-strong dark:border-line-strong'
             }`}>
             {len}
           </button>
         ))}
       </div>
 
-      <div className="bg-neutral-50 dark:bg-neutral-800/60 rounded-2xl p-4 mb-4 border border-neutral-200 dark:border-neutral-800">
+      <div className="bg-surface-muted rounded-2xl p-4 mb-4 border border-line">
         <div className="grid grid-cols-3 gap-2">
           {importWords.map((word, index) => (
             <div key={index} className="flex items-center gap-1.5">
-              <span className="text-neutral-500 dark:text-neutral-400 font-mono text-xs w-5 text-right shrink-0">
+              <span className="text-content-muted font-mono text-xs w-5 text-right shrink-0">
                 {index + 1}.
               </span>
               <input
@@ -862,12 +854,12 @@ const RecoveryPhrasePanel = () => {
                 onKeyDown={e => handleImportKeyDown(index, e)}
                 autoComplete="off"
                 spellCheck={false}
-                className={`w-full font-mono text-sm font-medium px-2 py-1.5 rounded-lg border bg-white dark:bg-neutral-900 text-neutral-800 dark:text-neutral-100 outline-none transition-colors ${
+                className={`w-full font-mono text-sm font-medium px-2 py-1.5 rounded-lg border bg-surface text-content outline-none transition-colors ${
                   importValid === false && word.trim()
                     ? 'border-coral-400 focus:border-coral-300 dark:border-coral-500/40'
                     : importValid === true
                       ? 'border-sage-400 focus:border-sage-300 dark:border-sage-500/40'
-                      : 'border-neutral-200 dark:border-neutral-800 focus:border-primary-400'
+                      : 'border-line focus:border-primary-400'
                 }`}
               />
             </div>
@@ -914,9 +906,7 @@ const RecoveryPhrasePanel = () => {
             </svg>
           </div>
           <p className="text-sm font-medium text-sage-500">{t('mnemonic.phraseSaved')}</p>
-          <p className="text-xs text-neutral-500 dark:text-neutral-400">
-            {t('mnemonic.walletReady')}
-          </p>
+          <p className="text-xs text-content-muted">{t('mnemonic.walletReady')}</p>
         </div>
       ) : (
         <>
diff --git a/app/src/components/settings/panels/SandboxSettingsPanel.tsx b/app/src/components/settings/panels/SandboxSettingsPanel.tsx
index 39006e3a0..19924042b 100644
--- a/app/src/components/settings/panels/SandboxSettingsPanel.tsx
+++ b/app/src/components/settings/panels/SandboxSettingsPanel.tsx
@@ -135,9 +135,7 @@ const SandboxSettingsPanel = () => {
   if (!isTauri()) {
     return (
       <SettingsPanel description={t('settings.sandbox.menuDesc')}>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-          {t('settings.sandbox.desktopOnly')}
-        </p>
+        <p className="text-sm text-content-muted">{t('settings.sandbox.desktopOnly')}</p>
       </SettingsPanel>
     );
   }
@@ -145,9 +143,7 @@ const SandboxSettingsPanel = () => {
   if (isLoading) {
     return (
       <SettingsPanel description={t('settings.sandbox.menuDesc')}>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-          {t('settings.sandbox.loading')}
-        </p>
+        <p className="text-sm text-content-muted">{t('settings.sandbox.loading')}</p>
       </SettingsPanel>
     );
   }
@@ -170,11 +166,7 @@ const SandboxSettingsPanel = () => {
           {detectedBackend && (
             <SettingsRow
               label={t('settings.sandbox.detectedBackend')}
-              control={
-                <span className="text-sm font-mono text-neutral-800 dark:text-neutral-100">
-                  {detectedBackend}
-                </span>
-              }
+              control={<span className="text-sm font-mono text-content">{detectedBackend}</span>}
             />
           )}
         </SettingsSection>
@@ -257,7 +249,7 @@ const SandboxSettingsPanel = () => {
                   aria-label={t('settings.sandbox.memoryLimit')}
                   min={64}
                 />
-                <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                <span className="text-xs text-content-muted">
                   {t('settings.sandbox.memoryUnit')}
                 </span>
               </div>
@@ -284,9 +276,7 @@ const SandboxSettingsPanel = () => {
                   min={0.1}
                   step={0.1}
                 />
-                <span className="text-xs text-neutral-500 dark:text-neutral-400">
-                  {t('settings.sandbox.cpuUnit')}
-                </span>
+                <span className="text-xs text-content-muted">{t('settings.sandbox.cpuUnit')}</span>
               </div>
             }
           />
diff --git a/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx b/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx
index 30db36c04..067cd9744 100644
--- a/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx
+++ b/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx
@@ -31,9 +31,9 @@ const DebugSection = ({
         <button
           type="button"
           onClick={() => setIsOpen(prev => !prev)}
-          className="flex w-full items-center justify-between text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+          className="flex w-full items-center justify-between text-sm font-semibold text-content">
           <span>{t('screenAwareness.debug.debugAndDiagnostics')}</span>
-          <span className="text-xs text-neutral-500 dark:text-neutral-400">
+          <span className="text-xs text-content-muted">
             {isOpen ? t('screenAwareness.debug.collapse') : t('screenAwareness.debug.expand')}
           </span>
         </button>
@@ -120,10 +120,8 @@ const ScreenAwarenessDebugPanel = () => {
         {/* Advanced policy settings */}
         <SettingsSection title={t('screenAwareness.debug.policyTitle')}>
           <div className="px-4 py-3 space-y-3">
-            <label className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2">
-              <span className="text-sm text-neutral-800 dark:text-neutral-200">
-                {t('screenAwareness.debug.baselineFps')}
-              </span>
+            <label className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2">
+              <span className="text-sm text-content">{t('screenAwareness.debug.baselineFps')}</span>
               <Input
                 type="number"
                 inputSize="sm"
@@ -164,7 +162,7 @@ const ScreenAwarenessDebugPanel = () => {
             />
 
             <div className="space-y-1">
-              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+              <div className="text-xs text-content-muted">
                 {t('screenAwareness.debug.allowlist')}
               </div>
               <SettingsTextArea
@@ -176,7 +174,7 @@ const ScreenAwarenessDebugPanel = () => {
             </div>
 
             <div className="space-y-1">
-              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+              <div className="text-xs text-content-muted">
                 {t('screenAwareness.debug.denylist')}
               </div>
               <SettingsTextArea
@@ -201,7 +199,7 @@ const ScreenAwarenessDebugPanel = () => {
 
         {/* Session stats */}
         <SettingsSection title={t('screenAwareness.debug.sessionStats')}>
-          <div className="px-4 py-3 text-sm text-neutral-500 dark:text-neutral-400 space-y-1">
+          <div className="px-4 py-3 text-sm text-content-muted space-y-1">
             <div>
               {t('screenAwareness.debug.framesEphemeral')}: {status?.session.frames_in_memory ?? 0}
             </div>
@@ -246,15 +244,13 @@ const ScreenAwarenessDebugPanel = () => {
                 {recentVisionSummaries.map(summary => (
                   <div
                     key={summary.id}
-                    className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 text-xs">
-                    <div className="text-neutral-500 dark:text-neutral-400">
+                    className="rounded-xl border border-line bg-surface p-3 text-xs">
+                    <div className="text-content-muted">
                       {new Date(summary.captured_at_ms).toLocaleTimeString()} ·{' '}
                       {summary.app_name ?? t('screenAwareness.debug.unknownApp')}
                       {summary.window_title ? ` · ${summary.window_title}` : ''}
                     </div>
-                    <div className="mt-1 text-neutral-800 dark:text-neutral-100">
-                      {summary.actionable_notes}
-                    </div>
+                    <div className="mt-1 text-content">{summary.actionable_notes}</div>
                   </div>
                 ))}
               </div>
diff --git a/app/src/components/settings/panels/ScreenIntelligencePanel.tsx b/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
index c1d37dfc7..6de445eaf 100644
--- a/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
+++ b/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
@@ -132,9 +132,7 @@ const ScreenIntelligencePanel = () => {
         <SettingsSection title={t('settings.features.screenAwareness')}>
           {/* Enabled toggle */}
           <label className="flex items-center justify-between px-4 py-3">
-            <span className="text-sm text-neutral-700 dark:text-neutral-200">
-              {t('common.enabled')}
-            </span>
+            <span className="text-sm text-content-secondary">{t('common.enabled')}</span>
             <input
               type="checkbox"
               checked={enabled}
@@ -170,7 +168,7 @@ const ScreenIntelligencePanel = () => {
 
           {/* Screen monitoring toggle */}
           <label className="flex items-center justify-between px-4 py-3">
-            <span className="text-sm text-neutral-700 dark:text-neutral-200">
+            <span className="text-sm text-content-secondary">
               {t('settings.screenAwareness.screenMonitoring')}
             </span>
             <input
@@ -207,7 +205,7 @@ const ScreenIntelligencePanel = () => {
         {/* Session controls */}
         <SettingsSection title={t('settings.screenAwareness.session')}>
           <div className="px-4 py-3 space-y-3">
-            <div className="text-sm text-neutral-600 dark:text-neutral-300 space-y-1">
+            <div className="text-sm text-content-secondary space-y-1">
               <div>
                 {t('settings.screenAwareness.status')}:{' '}
                 {status?.session.active
diff --git a/app/src/components/settings/panels/SearchPanel.tsx b/app/src/components/settings/panels/SearchPanel.tsx
index c67752846..20701d744 100644
--- a/app/src/components/settings/panels/SearchPanel.tsx
+++ b/app/src/components/settings/panels/SearchPanel.tsx
@@ -232,18 +232,18 @@ const SearchPanel = ({ embedded = false }: { embedded?: boolean }) => {
       description={embedded ? undefined : t('settings.search.menuDesc')}
       leading={embedded ? undefined : <SettingsBackButton onBack={navigateBack} />}>
       <div className={embedded ? 'space-y-4' : 'p-4 space-y-4'}>
-        <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+        <p className="text-xs text-content-muted leading-relaxed">
           {t('settings.search.description')}
         </p>
 
         {isLocalSession && (
-          <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-4 py-3 text-sm text-stone-700 dark:text-neutral-200">
+          <div className="rounded-lg border border-line bg-surface-muted px-4 py-3 text-sm text-content-secondary">
             {t('settings.search.localManagedUnavailable')}
           </div>
         )}
 
         {status.kind === 'loading' && (
-          <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 text-xs text-stone-500 dark:text-neutral-400">
+          <div className="rounded-lg border border-line bg-surface p-4 text-xs text-content-muted">
             {t('common.loading')}
           </div>
         )}
@@ -251,7 +251,7 @@ const SearchPanel = ({ embedded = false }: { embedded?: boolean }) => {
         {settings && (
           <>
             <div
-              className="bg-white dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 overflow-hidden"
+              className="bg-surface rounded-xl border border-line overflow-hidden"
               role="radiogroup"
               aria-label={t('settings.search.engineAria')}>
               {visibleEngines.map((opt, idx) => {
@@ -267,17 +267,13 @@ const SearchPanel = ({ embedded = false }: { embedded?: boolean }) => {
                     aria-checked={selected}
                     onClick={() => void persistEngine(opt.id)}
                     className={`w-full flex items-start gap-3 px-4 py-3 text-left transition-colors focus:outline-none focus-visible:bg-primary-50 dark:focus-visible:bg-primary-900/30 ${
-                      idx !== 0 ? 'border-t border-neutral-100 dark:border-neutral-800' : ''
+                      idx !== 0 ? 'border-t border-line-subtle' : ''
                     } ${
-                      selected
-                        ? 'bg-primary-50 dark:bg-primary-500/10'
-                        : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/60'
+                      selected ? 'bg-primary-50 dark:bg-primary-500/10' : 'hover:bg-surface-hover'
                     }`}>
                     <span className="flex-1 min-w-0">
                       <span className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
-                          {opt.label}
-                        </span>
+                        <span className="text-sm font-medium text-content">{opt.label}</span>
                         {opt.requiresKey && (
                           <span
                             className={`inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-semibold uppercase tracking-wider ${
@@ -291,7 +287,7 @@ const SearchPanel = ({ embedded = false }: { embedded?: boolean }) => {
                           </span>
                         )}
                       </span>
-                      <span className="block mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
+                      <span className="block mt-0.5 text-xs text-content-muted">
                         {opt.description}
                       </span>
                       {blocked && (
@@ -378,16 +374,16 @@ const SearchPanel = ({ embedded = false }: { embedded?: boolean }) => {
             {/* Allowed websites — unified host allowlist shared by web_fetch /
                 curl and (when enabled) the browser tool. Web search is not
                 gated by this list. */}
-            <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 space-y-2">
+            <div className="rounded-xl border border-line bg-surface p-3 space-y-2">
               {/* Section heading, not a form label — use a <p> so screen
                   readers don't announce an orphan <label> with no htmlFor. */}
-              <p className="text-xs font-semibold text-stone-700 dark:text-neutral-200">
+              <p className="text-xs font-semibold text-content-secondary">
                 {t('settings.search.allowedSitesLabel')}
               </p>
               <div
                 role="radiogroup"
                 aria-label={t('settings.search.accessModeAria')}
-                className="flex rounded-lg border border-stone-200 dark:border-neutral-800 overflow-hidden">
+                className="flex rounded-lg border border-line overflow-hidden">
                 {(
                   [
                     ['all', 'settings.search.accessAllowAll'],
@@ -405,18 +401,18 @@ const SearchPanel = ({ embedded = false }: { embedded?: boolean }) => {
                       onClick={() => selectMode(value)}
                       disabled={status.kind === 'saving'}
                       className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors disabled:opacity-50 focus:outline-none focus-visible:bg-primary-50 dark:focus-visible:bg-primary-900/30 ${
-                        idx !== 0 ? 'border-l border-stone-200 dark:border-neutral-800' : ''
+                        idx !== 0 ? 'border-l border-line' : ''
                       } ${
                         selected
-                          ? 'bg-primary-500 text-white'
-                          : 'bg-white dark:bg-neutral-900 text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
+                          ? 'bg-primary-500 text-content-inverted'
+                          : 'bg-surface text-content-secondary hover:bg-surface-hover'
                       }`}>
                       {t(labelKey)}
                     </button>
                   );
                 })}
               </div>
-              <p className="text-[11px] text-stone-500 dark:text-neutral-400 leading-relaxed">
+              <p className="text-[11px] text-content-muted leading-relaxed">
                 {mode === 'all'
                   ? t('settings.search.allowedSitesAllOn')
                   : mode === 'block'
@@ -496,12 +492,12 @@ const KeyEditor = ({
     <div
       role="group"
       aria-labelledby={inputId}
-      className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
+      className="rounded-xl border border-line bg-surface p-3">
       <div className="flex items-center justify-between mb-2">
         <label
           id={inputId}
           htmlFor={`${inputId}-input`}
-          className="text-xs font-semibold text-neutral-800 dark:text-neutral-200">
+          className="text-xs font-semibold text-content">
           {label}
         </label>
         <a
diff --git a/app/src/components/settings/panels/SecurityPanel.tsx b/app/src/components/settings/panels/SecurityPanel.tsx
index 14f9aa706..1b85dfd7e 100644
--- a/app/src/components/settings/panels/SecurityPanel.tsx
+++ b/app/src/components/settings/panels/SecurityPanel.tsx
@@ -62,7 +62,7 @@ const SecurityPanel = () => {
                     `keyring.settings.mode.${keyringStatus.activeMode}` as Parameters<typeof t>[0]
                   )}
                 </SettingsBadge>
-                <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                <span className="text-xs text-content-muted">
                   {t('keyring.settings.backend')}: {keyringStatus.backendName}
                 </span>
               </div>
@@ -77,16 +77,14 @@ const SecurityPanel = () => {
               <div
                 className={`h-2 w-2 rounded-full ${keyringStatus.available ? 'bg-sage-500' : 'bg-amber-500'}`}
               />
-              <span className="text-sm text-neutral-700 dark:text-neutral-200">
+              <span className="text-sm text-content-secondary">
                 {keyringStatus.available
                   ? t('keyring.settings.available')
                   : t('keyring.settings.unavailable')}
               </span>
             </div>
             {keyringStatus.failureReason && (
-              <p className="text-xs text-neutral-500 dark:text-neutral-400 ml-4">
-                {keyringStatus.failureReason}
-              </p>
+              <p className="text-xs text-content-muted ml-4">{keyringStatus.failureReason}</p>
             )}
             <Button
               type="button"
@@ -103,7 +101,7 @@ const SecurityPanel = () => {
         {!keyringStatus.available && (
           <SettingsSection title={t('keyring.settings.consentTitle')}>
             <div className="px-4 py-3 space-y-3">
-              <p className="text-xs text-neutral-500 dark:text-neutral-400">
+              <p className="text-xs text-content-muted">
                 {t('keyring.settings.consentDescription')}
               </p>
               <div className="flex flex-wrap gap-2">
diff --git a/app/src/components/settings/panels/SystemDiagnostics.tsx b/app/src/components/settings/panels/SystemDiagnostics.tsx
index 260f58b29..d66c20616 100644
--- a/app/src/components/settings/panels/SystemDiagnostics.tsx
+++ b/app/src/components/settings/panels/SystemDiagnostics.tsx
@@ -41,19 +41,13 @@ const LogsFolderRow = () => {
   if (!isTauri()) return null;
 
   return (
-    <div className="rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-3 dark:border-neutral-800 dark:bg-neutral-800/60">
+    <div className="rounded-xl border border-line bg-surface-muted px-4 py-3">
       <div className="flex items-center justify-between gap-3">
         <div className="min-w-0">
-          <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
-            {t('devOptions.appLogs')}
-          </div>
-          <div className="mt-0.5 text-xs text-neutral-700 dark:text-neutral-300">
-            {t('devOptions.appLogsDesc')}
-          </div>
+          <div className="text-sm font-semibold text-content">{t('devOptions.appLogs')}</div>
+          <div className="mt-0.5 text-xs text-content-secondary">{t('devOptions.appLogsDesc')}</div>
           {path && (
-            <div className="mt-1 truncate font-mono text-[11px] text-neutral-500 dark:text-neutral-400">
-              {path}
-            </div>
+            <div className="mt-1 truncate font-mono text-[11px] text-content-muted">{path}</div>
           )}
         </div>
         <button
@@ -108,7 +102,7 @@ const SentryTestRow = () => {
         <button
           onClick={onClick}
           disabled={status.kind === 'sending'}
-          className="shrink-0 rounded-md bg-amber-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-amber-500 disabled:opacity-60">
+          className="shrink-0 rounded-md bg-amber-600 px-3 py-1.5 text-xs font-medium text-content-inverted transition-colors hover:bg-amber-500 disabled:opacity-60">
           {status.kind === 'sending' ? t('devOptions.sending') : t('devOptions.sendTestEvent')}
         </button>
       </div>
@@ -143,13 +137,11 @@ const RestartTourRow = () => {
   };
 
   return (
-    <div className="rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-3 dark:border-neutral-800 dark:bg-neutral-800/60">
+    <div className="rounded-xl border border-line bg-surface-muted px-4 py-3">
       <div className="flex items-center justify-between gap-3">
         <div className="min-w-0">
-          <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
-            {t('settings.restartTour')}
-          </div>
-          <div className="mt-0.5 text-xs text-neutral-700 dark:text-neutral-300">
+          <div className="text-sm font-semibold text-content">{t('settings.restartTour')}</div>
+          <div className="mt-0.5 text-xs text-content-secondary">
             {t('settings.restartTourDesc')}
           </div>
         </div>
@@ -170,7 +162,7 @@ const SystemDiagnostics = () => {
 
   return (
     <div>
-      <h3 className="px-1 pb-2 text-sm font-medium text-neutral-800 dark:text-neutral-100">
+      <h3 className="px-1 pb-2 text-sm font-medium text-content">
         {t('devOptions.titleDiagnostics')}
       </h3>
       <div className="flex flex-col gap-3">
diff --git a/app/src/components/settings/panels/TaskSourcesPanel.tsx b/app/src/components/settings/panels/TaskSourcesPanel.tsx
index 19675faaf..eb751791b 100644
--- a/app/src/components/settings/panels/TaskSourcesPanel.tsx
+++ b/app/src/components/settings/panels/TaskSourcesPanel.tsx
@@ -332,12 +332,8 @@ const TaskSourcesPanel = ({ embedded = false }: TaskSourcesPanelProps) => {
   const body = (
     <>
       <div className="space-y-1">
-        <p className="text-xs text-neutral-500 dark:text-neutral-400">
-          {t('settings.taskSources.description')}
-        </p>
-        <p className="text-xs text-neutral-400 dark:text-neutral-500">
-          {t('settings.taskSources.connectHint')}
-        </p>
+        <p className="text-xs text-content-muted">{t('settings.taskSources.description')}</p>
+        <p className="text-xs text-content-faint">{t('settings.taskSources.connectHint')}</p>
       </div>
 
       {status && !status.enabled && (
@@ -463,7 +459,7 @@ const TaskSourcesPanel = ({ embedded = false }: TaskSourcesPanelProps) => {
           }
         />
 
-        <div className="flex gap-2 px-4 py-3 border-t border-neutral-100 dark:border-neutral-800">
+        <div className="flex gap-2 px-4 py-3 border-t border-line-subtle">
           <Button
             type="button"
             variant="primary"
@@ -485,7 +481,7 @@ const TaskSourcesPanel = ({ embedded = false }: TaskSourcesPanelProps) => {
 
       {/* ── Configured sources ───────────────────────────────────── */}
       <SettingsSection title={t('settings.taskSources.configured')}>
-        <div className="px-4 py-3 border-b border-neutral-100 dark:border-neutral-800">
+        <div className="px-4 py-3 border-b border-line-subtle">
           <Button
             type="button"
             variant="secondary"
@@ -500,12 +496,12 @@ const TaskSourcesPanel = ({ embedded = false }: TaskSourcesPanelProps) => {
 
         {loading ? (
           <div className="px-4 py-3">
-            <p className="text-sm text-neutral-400 dark:text-neutral-500">{t('common.loading')}</p>
+            <p className="text-sm text-content-faint">{t('common.loading')}</p>
           </div>
         ) : sources.length === 0 ? (
           <SettingsEmptyState label={t('settings.taskSources.empty')} />
         ) : (
-          <ul className="divide-y divide-neutral-100 dark:divide-neutral-800">
+          <ul className="divide-y divide-line-subtle dark:divide-neutral-800">
             {sources.map(source => (
               <li
                 key={source.id}
@@ -513,16 +509,16 @@ const TaskSourcesPanel = ({ embedded = false }: TaskSourcesPanelProps) => {
                 data-testid={`task-source-${source.id}`}>
                 <div className="flex items-start justify-between gap-2">
                   <div>
-                    <p className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
+                    <p className="text-sm font-medium text-content">
                       {source.name || providerLabel(source.provider, t)}
                     </p>
-                    <p className="text-xs text-neutral-400 dark:text-neutral-500">
+                    <p className="text-xs text-content-faint">
                       {providerLabel(source.provider, t)}
                       {source.target === 'agent_todo_proactive'
                         ? ` · ${t('settings.taskSources.proactive')}`
                         : ''}
                     </p>
-                    <p className="text-xs text-neutral-400 dark:text-neutral-500">
+                    <p className="text-xs text-content-faint">
                       {t('settings.taskSources.lastFetch')}:{' '}
                       {source.lastFetchAt
                         ? new Date(source.lastFetchAt).toLocaleString()
@@ -572,7 +568,7 @@ const TaskSourcesPanel = ({ embedded = false }: TaskSourcesPanelProps) => {
           </ul>
         )}
 
-        <div className="px-4 py-3 border-t border-neutral-100 dark:border-neutral-800">
+        <div className="px-4 py-3 border-t border-line-subtle">
           <Button
             type="button"
             variant="tertiary"
diff --git a/app/src/components/settings/panels/TasksPanel.tsx b/app/src/components/settings/panels/TasksPanel.tsx
index 4e14f3045..37a04ed54 100644
--- a/app/src/components/settings/panels/TasksPanel.tsx
+++ b/app/src/components/settings/panels/TasksPanel.tsx
@@ -17,9 +17,7 @@ const TasksPanel = () => {
   return (
     <SettingsPanel testId="tasks-panel" description={t('settings.developerMenu.tasks.desc')}>
       <>
-        <p className="mb-4 text-xs text-neutral-500 dark:text-neutral-400">
-          {t('memory.tab.tasksDescription')}
-        </p>
+        <p className="mb-4 text-xs text-content-muted">{t('memory.tab.tasksDescription')}</p>
         <IntelligenceTasksTab />
       </>
     </SettingsPanel>
diff --git a/app/src/components/settings/panels/TeamInvitesPanel.tsx b/app/src/components/settings/panels/TeamInvitesPanel.tsx
index 75614734d..9a2ab7174 100644
--- a/app/src/components/settings/panels/TeamInvitesPanel.tsx
+++ b/app/src/components/settings/panels/TeamInvitesPanel.tsx
@@ -170,7 +170,7 @@ const TeamInvitesPanel = () => {
                 return (
                   <li
                     key={invite._id}
-                    className={`px-4 py-3 border-b border-neutral-100 dark:border-neutral-800 last:border-b-0 ${
+                    className={`px-4 py-3 border-b border-line-subtle last:border-b-0 ${
                       isInactive ? 'opacity-60' : ''
                     }`}>
                     <div className="flex items-center justify-between mb-2">
@@ -179,8 +179,8 @@ const TeamInvitesPanel = () => {
                         <code
                           className={`text-sm font-mono px-2 py-1 rounded-lg ${
                             isInactive
-                              ? 'text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800'
-                              : 'text-neutral-800 dark:text-neutral-100 bg-neutral-200 dark:bg-neutral-800'
+                              ? 'text-content-muted bg-surface-subtle'
+                              : 'text-content bg-surface-strong'
                           }`}>
                           {invite.code}
                         </code>
@@ -239,7 +239,7 @@ const TeamInvitesPanel = () => {
                             onClick={() => handleRevoke(invite._id, invite.code)}
                             disabled={revokingId === invite._id}
                             aria-label={t('invites.revokeAria')}
-                            className="text-neutral-500 dark:text-neutral-400 hover:text-coral-400 hover:bg-coral-500/10">
+                            className="text-content-muted hover:text-coral-400 hover:bg-coral-500/10">
                             <svg
                               className="w-4 h-4"
                               fill="none"
@@ -256,7 +256,7 @@ const TeamInvitesPanel = () => {
                         )}
                       </div>
                     </div>
-                    <div className="flex items-center gap-3 text-xs text-neutral-500 dark:text-neutral-400">
+                    <div className="flex items-center gap-3 text-xs text-content-muted">
                       <span>
                         {t('invites.uses')
                           .replace('{current}', String(invite.currentUses))
@@ -285,8 +285,8 @@ const TeamInvitesPanel = () => {
         {/* Revoke Invite Confirmation Modal */}
         {inviteToRevoke && (
           <div className="fixed inset-0 bg-neutral-900/50 flex items-center justify-center z-50 p-4">
-            <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-neutral-200 dark:border-neutral-800">
-              <h3 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100 mb-4">
+            <div className="bg-surface rounded-2xl p-6 w-full max-w-md border border-line">
+              <h3 className="text-sm font-semibold text-content mb-4">
                 {t('invites.revokeTitle')}
               </h3>
 
@@ -297,10 +297,10 @@ const TeamInvitesPanel = () => {
               )}
 
               <div className="space-y-4">
-                <div className="text-sm text-neutral-500 dark:text-neutral-400">
+                <div className="text-sm text-content-muted">
                   <p>
                     {t('invites.revokePromptPrefix')}{' '}
-                    <code className="text-neutral-800 dark:text-neutral-100 bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-xs">
+                    <code className="text-content bg-surface-subtle px-1.5 py-0.5 rounded font-mono text-xs">
                       {inviteToRevoke.code}
                     </code>
                     ?
diff --git a/app/src/components/settings/panels/TeamManagementPanel.tsx b/app/src/components/settings/panels/TeamManagementPanel.tsx
index 9a1593362..7fc1f8760 100644
--- a/app/src/components/settings/panels/TeamManagementPanel.tsx
+++ b/app/src/components/settings/panels/TeamManagementPanel.tsx
@@ -97,7 +97,7 @@ const TeamManagementPanel = () => {
         title={t('team.management')}
         description={t('pages.settings.account.teamDesc')}>
         <div className="flex-1 flex items-center justify-center">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">{t('team.notFound')}</p>
+          <p className="text-sm text-content-muted">{t('team.notFound')}</p>
         </div>
       </SettingsPanel>
     );
@@ -109,7 +109,7 @@ const TeamManagementPanel = () => {
         title={t('team.management')}
         description={t('pages.settings.account.teamDesc')}>
         <div className="flex-1 flex items-center justify-center">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">{t('team.accessDenied')}</p>
+          <p className="text-sm text-content-muted">{t('team.accessDenied')}</p>
         </div>
       </SettingsPanel>
     );
@@ -125,16 +125,14 @@ const TeamManagementPanel = () => {
         {/* Team Info */}
         <SettingsSection>
           <div className="flex items-center gap-3 px-4 py-3">
-            <div className="w-10 h-10 rounded-lg bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center">
-              <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-200">
+            <div className="w-10 h-10 rounded-lg bg-surface-strong flex items-center justify-center">
+              <span className="text-sm font-semibold text-content-secondary">
                 {team.name.charAt(0).toUpperCase()}
               </span>
             </div>
             <div>
-              <h3 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
-                {team.name}
-              </h3>
-              <p className="text-xs text-neutral-500 dark:text-neutral-400">
+              <h3 className="text-sm font-semibold text-content">{team.name}</h3>
+              <p className="text-xs text-content-muted">
                 {t('team.planCreated')
                   .replace('{plan}', team.subscription.plan)
                   .replace('{date}', new Date(team.createdAt).toLocaleDateString())}
@@ -236,10 +234,8 @@ const TeamManagementPanel = () => {
         {/* Edit Team Modal */}
         {isEditModalOpen && (
           <div className="fixed inset-0 bg-neutral-900/40 flex items-center justify-center z-50 p-4">
-            <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-neutral-200 dark:border-neutral-800">
-              <h3 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100 mb-4">
-                {t('team.editSettings')}
-              </h3>
+            <div className="bg-surface rounded-2xl p-6 w-full max-w-md border border-line">
+              <h3 className="text-sm font-semibold text-content mb-4">{t('team.editSettings')}</h3>
 
               {error && (
                 <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
@@ -249,7 +245,7 @@ const TeamManagementPanel = () => {
 
               <div className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-2">
+                  <label className="block text-sm font-medium text-content-secondary mb-2">
                     {t('team.teamName')}
                   </label>
                   <SettingsTextField
@@ -291,10 +287,8 @@ const TeamManagementPanel = () => {
         {/* Delete Team Modal */}
         {isDeleteModalOpen && (
           <div className="fixed inset-0 bg-neutral-900/40 flex items-center justify-center z-50 p-4">
-            <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-neutral-200 dark:border-neutral-800">
-              <h3 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100 mb-4">
-                {t('team.delete')}
-              </h3>
+            <div className="bg-surface rounded-2xl p-6 w-full max-w-md border border-line">
+              <h3 className="text-sm font-semibold text-content mb-4">{t('team.delete')}</h3>
 
               {error && (
                 <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
@@ -303,7 +297,7 @@ const TeamManagementPanel = () => {
               )}
 
               <div className="space-y-4">
-                <div className="text-sm text-neutral-500 dark:text-neutral-400">
+                <div className="text-sm text-content-muted">
                   <p>{t('team.confirmDelete').replace('{name}', teamEntry?.team.name ?? '')}</p>
                   <p className="mt-2 text-coral-400">{t('team.deleteWarning')}</p>
                 </div>
diff --git a/app/src/components/settings/panels/TeamMembersPanel.tsx b/app/src/components/settings/panels/TeamMembersPanel.tsx
index b054fc0bf..38abc485c 100644
--- a/app/src/components/settings/panels/TeamMembersPanel.tsx
+++ b/app/src/components/settings/panels/TeamMembersPanel.tsx
@@ -137,7 +137,7 @@ const TeamMembersPanel = () => {
       )}
 
       {/* Member count */}
-      <p className="text-xs text-neutral-500 dark:text-neutral-400 px-1">
+      <p className="text-xs text-content-muted px-1">
         {t(members.length === 1 ? 'team.memberCount' : 'team.memberCountPlural').replace(
           '{count}',
           String(members.length)
@@ -156,7 +156,7 @@ const TeamMembersPanel = () => {
               {members.map(member => (
                 <li
                   key={member._id}
-                  className="flex items-center justify-between px-4 py-3 border-b border-neutral-100 dark:border-neutral-800 last:border-b-0">
+                  className="flex items-center justify-between px-4 py-3 border-b border-line-subtle last:border-b-0">
                   <div className="flex items-center gap-3 min-w-0">
                     {/* Avatar */}
                     <div className="w-8 h-8 rounded-full bg-neutral-700/60 flex items-center justify-center flex-shrink-0">
@@ -166,17 +166,15 @@ const TeamMembersPanel = () => {
                     </div>
                     <div className="min-w-0">
                       <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-neutral-800 dark:text-neutral-100 truncate">
+                        <span className="text-sm font-medium text-content truncate">
                           {displayName(member)}
                         </span>
                         {isCurrentUser(member) && (
-                          <span className="text-[10px] text-neutral-500 dark:text-neutral-400">
-                            {t('team.you')}
-                          </span>
+                          <span className="text-[10px] text-content-muted">{t('team.you')}</span>
                         )}
                       </div>
                       {member.user.username && (
-                        <p className="text-xs text-neutral-500 dark:text-neutral-400 truncate">
+                        <p className="text-xs text-content-muted truncate">
                           @{member.user.username}
                         </p>
                       )}
@@ -215,7 +213,7 @@ const TeamMembersPanel = () => {
                         onClick={() => handleRemoveMember(member)}
                         disabled={removingId === member._id}
                         aria-label={t('team.removeAria').replace('{name}', displayName(member))}
-                        className="text-neutral-500 dark:text-neutral-400 hover:text-coral-400 hover:bg-coral-500/10">
+                        className="text-content-muted hover:text-coral-400 hover:bg-coral-500/10">
                         <svg
                           className="w-4 h-4"
                           fill="none"
@@ -241,10 +239,8 @@ const TeamMembersPanel = () => {
       {/* Remove Member Confirmation Modal */}
       {memberToRemove && (
         <div className="fixed inset-0 bg-neutral-900/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-neutral-200 dark:border-neutral-800">
-            <h3 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100 mb-4">
-              {t('team.removeTitle')}
-            </h3>
+          <div className="bg-surface rounded-2xl p-6 w-full max-w-md border border-line">
+            <h3 className="text-sm font-semibold text-content mb-4">{t('team.removeTitle')}</h3>
 
             {error && (
               <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
@@ -253,12 +249,10 @@ const TeamMembersPanel = () => {
             )}
 
             <div className="space-y-4">
-              <div className="text-sm text-neutral-500 dark:text-neutral-400">
+              <div className="text-sm text-content-muted">
                 <p>
                   {t('team.removePromptPrefix')}{' '}
-                  <strong className="text-neutral-800 dark:text-neutral-100">
-                    {displayName(memberToRemove)}
-                  </strong>{' '}
+                  <strong className="text-content">{displayName(memberToRemove)}</strong>{' '}
                   {t('team.removePromptSuffix')}
                 </p>
                 <p className="mt-2 text-coral-400">{t('team.removeWarning')}</p>
@@ -293,10 +287,8 @@ const TeamMembersPanel = () => {
       {/* Change Role Confirmation Modal */}
       {roleChangeConfirmation && (
         <div className="fixed inset-0 bg-neutral-900/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-neutral-200 dark:border-neutral-800">
-            <h3 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100 mb-4">
-              {t('team.changeRoleTitle')}
-            </h3>
+          <div className="bg-surface rounded-2xl p-6 w-full max-w-md border border-line">
+            <h3 className="text-sm font-semibold text-content mb-4">{t('team.changeRoleTitle')}</h3>
 
             {error && (
               <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
@@ -305,7 +297,7 @@ const TeamMembersPanel = () => {
             )}
 
             <div className="space-y-4">
-              <div className="text-sm text-neutral-500 dark:text-neutral-400">
+              <div className="text-sm text-content-muted">
                 <p>
                   {t('team.changeRolePrompt')
                     .replace('{name}', displayName(roleChangeConfirmation.member))
diff --git a/app/src/components/settings/panels/TeamPanel.tsx b/app/src/components/settings/panels/TeamPanel.tsx
index f6d128399..2a64bfc7c 100644
--- a/app/src/components/settings/panels/TeamPanel.tsx
+++ b/app/src/components/settings/panels/TeamPanel.tsx
@@ -187,27 +187,23 @@ const TeamPanel = () => {
         className={`flex items-center justify-between p-3 rounded-xl border transition-all ${
           isActive
             ? 'border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10'
-            : 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 hover:bg-neutral-50 dark:hover:bg-neutral-800/60'
+            : 'border-line bg-surface hover:bg-surface-hover'
         }`}>
         <div className="flex items-center gap-3 min-w-0 flex-1">
-          <div className="w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center flex-shrink-0">
-            <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-300">
+          <div className="w-9 h-9 rounded-lg bg-surface-subtle flex items-center justify-center flex-shrink-0">
+            <span className="text-sm font-semibold text-content-secondary">
               {team.name.charAt(0).toUpperCase()}
             </span>
           </div>
           <div className="min-w-0">
             <div className="flex items-center gap-2 flex-wrap">
-              <span className="text-sm font-medium text-neutral-800 dark:text-neutral-100 truncate">
-                {team.name}
-              </span>
+              <span className="text-sm font-medium text-content truncate">{team.name}</span>
               {roleBadge(role, team.createdBy)}
               {planBadge(team.subscription.plan)}
               {isActive && <SettingsBadge variant="success">{t('team.active')}</SettingsBadge>}
             </div>
             {team.isPersonal && (
-              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">
-                {t('team.personalTeam')}
-              </p>
+              <p className="text-xs text-content-muted mt-0.5">{t('team.personalTeam')}</p>
             )}
           </div>
         </div>
@@ -311,10 +307,8 @@ const TeamPanel = () => {
 
       {teamToLeave && (
         <div className="fixed inset-0 bg-neutral-900/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-neutral-200 dark:border-neutral-800">
-            <h3 className="text-sm font-semibold text-neutral-800 dark:text-neutral-100 mb-4">
-              {t('team.leaveTeam')}
-            </h3>
+          <div className="bg-surface rounded-2xl p-6 w-full max-w-md border border-line">
+            <h3 className="text-sm font-semibold text-content mb-4">{t('team.leaveTeam')}</h3>
 
             {error && (
               <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
@@ -323,13 +317,10 @@ const TeamPanel = () => {
             )}
 
             <div className="space-y-4">
-              <div className="text-sm text-neutral-500 dark:text-neutral-400">
+              <div className="text-sm text-content-muted">
                 <p>
                   {t('team.confirmLeave')}{' '}
-                  <strong className="text-neutral-800 dark:text-neutral-100">
-                    {teamToLeave.team.name}
-                  </strong>
-                  ?
+                  <strong className="text-content">{teamToLeave.team.name}</strong>?
                 </p>
                 <p className="mt-2 text-amber-400">{t('team.leaveWarning')}</p>
               </div>
@@ -348,7 +339,7 @@ const TeamPanel = () => {
                   type="button"
                   variant="tertiary"
                   size="md"
-                  className="flex-1 bg-amber-500 hover:bg-amber-600 text-white border-0 dark:bg-amber-500 dark:hover:bg-amber-600"
+                  className="flex-1 bg-amber-500 hover:bg-amber-600 text-content-inverted border-0 dark:bg-amber-500 dark:hover:bg-amber-600"
                   onClick={() => void confirmLeaveTeam()}
                   disabled={isLeaving === teamToLeave.team._id}>
                   {isLeaving === teamToLeave.team._id ? t('team.leaving') : t('team.leaveTeam')}
diff --git a/app/src/components/settings/panels/ThemeStudioPanel.test.tsx b/app/src/components/settings/panels/ThemeStudioPanel.test.tsx
new file mode 100644
index 000000000..c2575db69
--- /dev/null
+++ b/app/src/components/settings/panels/ThemeStudioPanel.test.tsx
@@ -0,0 +1,82 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { renderWithProviders } from '../../../test/test-utils';
+import ThemeStudioPanel from './ThemeStudioPanel';
+
+const themeState = {
+  mode: 'system',
+  tabBarLabels: 'hover',
+  fontSize: 'medium',
+  activeThemeId: 'system',
+  customThemes: [],
+};
+
+describe('<ThemeStudioPanel />', () => {
+  it('renders the family gallery', () => {
+    renderWithProviders(<ThemeStudioPanel />, {
+      preloadedState: { theme: themeState },
+      initialEntries: ['/settings/theme'],
+    });
+    // Theme families (each with a Light/Dark/Auto variant toggle).
+    expect(screen.getByText('Classic')).toBeInTheDocument();
+    expect(screen.getByText('Ocean')).toBeInTheDocument();
+    expect(screen.getByText('Matrix')).toBeInTheDocument();
+    expect(screen.getByText('HAL 9000')).toBeInTheDocument();
+  });
+
+  it('auto-forks a custom theme when a preset colour is edited', () => {
+    const { store } = renderWithProviders(<ThemeStudioPanel />, {
+      preloadedState: { theme: themeState },
+      initialEntries: ['/settings/theme'],
+    });
+
+    expect(store.getState().theme.customThemes).toHaveLength(0);
+    // Editing a colour on a preset transparently forks a custom theme.
+    const colorInput = document.querySelector('input[type="color"]') as HTMLInputElement;
+    expect(colorInput).not.toBeNull();
+    fireEvent.input(colorInput, { target: { value: '#ff0000' } });
+
+    const { customThemes, activeThemeId } = store.getState().theme;
+    expect(customThemes).toHaveLength(1);
+    expect(customThemes[0].builtIn).toBe(false);
+    expect(activeThemeId).toBe(customThemes[0].id);
+  });
+
+  it('keeps colour editing enabled even on a preset (edits auto-fork)', () => {
+    renderWithProviders(<ThemeStudioPanel />, {
+      preloadedState: { theme: themeState },
+      initialEntries: ['/settings/theme'],
+    });
+    // No disabled colour inputs — editing is always available.
+    expect(document.querySelector('input[type="color"]:not([disabled])')).not.toBeNull();
+    expect(document.querySelector('input[type="color"][disabled]')).toBeNull();
+  });
+
+  it('preserves gradient and backdrop settings from imported themes', () => {
+    const { store } = renderWithProviders(<ThemeStudioPanel />, {
+      preloadedState: { theme: themeState },
+      initialEntries: ['/settings/theme'],
+    });
+
+    const imported = {
+      name: 'Imported studio theme',
+      isDark: true,
+      colors: { surface: '1 2 3' },
+      fonts: {},
+      gradient: { canvas: 'linear-gradient(red, blue)' },
+      backdrop: { kind: 'image', imageUrl: 'https://example.com/bg.jpg', dots: false },
+    };
+
+    fireEvent.change(screen.getByLabelText('Import theme'), {
+      target: { value: JSON.stringify(imported) },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Import' }));
+
+    expect(store.getState().theme.customThemes[0]).toMatchObject({
+      name: 'Imported studio theme',
+      gradient: { canvas: 'linear-gradient(red, blue)' },
+      backdrop: { kind: 'image', imageUrl: 'https://example.com/bg.jpg', dots: false },
+    });
+  });
+});
diff --git a/app/src/components/settings/panels/ThemeStudioPanel.tsx b/app/src/components/settings/panels/ThemeStudioPanel.tsx
new file mode 100644
index 000000000..60ab20e59
--- /dev/null
+++ b/app/src/components/settings/panels/ThemeStudioPanel.tsx
@@ -0,0 +1,524 @@
+import { useState } from 'react';
+
+import { useT } from '../../../lib/i18n/I18nContext';
+import { channelLuminance } from '../../../lib/theme/color';
+import { resolveFamilyVariant } from '../../../lib/theme/presets';
+import {
+  ACCENT_FAMILIES,
+  ACCENT_SHADES,
+  COLOR_GROUPS,
+  FONT_CHOICES,
+  FONT_ROLES,
+  fontChoiceForStack,
+  type FontRole,
+} from '../../../lib/theme/tokens';
+import type { BackdropKind, Theme } from '../../../lib/theme/types';
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
+import {
+  deleteCustomTheme,
+  resetActiveTheme,
+  resolveTheme,
+  selectActiveFamilyId,
+  selectActiveThemeId,
+  selectCustomThemes,
+  selectEffectiveTheme,
+  selectThemeFamilies,
+  selectThemeVariant,
+  setActiveFamily,
+  setActiveTheme,
+  setFontRole,
+  setThemeBackdrop,
+  setThemeToken,
+  setThemeVariant,
+  type ThemeVariant,
+  upsertCustomTheme,
+} from '../../../store/themeSlice';
+import { SettingsSection, SettingsSelect } from '../controls';
+import SettingsPanel from '../layout/SettingsPanel';
+import ColorTokenField from './theme/ColorTokenField';
+
+/** Minimal base swatch values used only for preview tiles of built-in themes. */
+const BASE_SWATCH: Record<'light' | 'dark', Record<string, string>> = {
+  light: {
+    'surface-canvas': '245 245 245',
+    surface: '255 255 255',
+    content: '23 23 23',
+    'primary-500': '47 110 244',
+  },
+  dark: {
+    'surface-canvas': '0 0 0',
+    surface: '23 23 23',
+    content: '245 245 245',
+    'primary-500': '47 110 244',
+  },
+};
+
+/** Read the live effective value of a token (override or tokens.css default). */
+function readToken(key: string): string {
+  if (typeof document === 'undefined') return '0 0 0';
+  const v = window.getComputedStyle(document.documentElement).getPropertyValue(`--${key}`).trim();
+  return v || '0 0 0';
+}
+
+function readFontRole(role: FontRole): string {
+  if (typeof document === 'undefined') return '';
+  return window
+    .getComputedStyle(document.documentElement)
+    .getPropertyValue(`--font-${role}`)
+    .trim();
+}
+
+/** "surface-canvas" → "Surface canvas". */
+function humanize(key: string): string {
+  const s = key.replace(/-/g, ' ');
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+function swatchChannels(theme: Theme, key: string): string {
+  return theme.colors[key] ?? BASE_SWATCH[theme.isDark ? 'dark' : 'light'][key] ?? '128 128 128';
+}
+
+function channelsToCss(channels: string): string {
+  return `rgb(${channels.trim().split(/\s+/).join(' ')} / 1)`;
+}
+
+/** Tile background: the theme's canvas gradient if any, else its flat canvas. */
+function tileCanvas(theme: Theme): string {
+  return theme.gradient?.canvas ?? channelsToCss(swatchChannels(theme, 'surface-canvas'));
+}
+
+function importedGradient(parsed: Partial<Theme>): Theme['gradient'] {
+  if (!parsed.gradient || typeof parsed.gradient !== 'object') return undefined;
+  return typeof parsed.gradient.canvas === 'string' ? { canvas: parsed.gradient.canvas } : {};
+}
+
+function importedBackdrop(parsed: Partial<Theme>): Theme['backdrop'] {
+  if (!parsed.backdrop || typeof parsed.backdrop !== 'object') return undefined;
+  const { kind } = parsed.backdrop;
+  if (kind !== 'mesh' && kind !== 'solid' && kind !== 'image') return undefined;
+  return {
+    kind,
+    imageUrl: typeof parsed.backdrop.imageUrl === 'string' ? parsed.backdrop.imageUrl : undefined,
+    dots: typeof parsed.backdrop.dots === 'boolean' ? parsed.backdrop.dots : undefined,
+  };
+}
+
+const ThemeStudioPanel = () => {
+  const { t } = useT();
+  const dispatch = useAppDispatch();
+  const families = selectThemeFamilies();
+  const customThemes = useAppSelector(selectCustomThemes);
+  const activeThemeId = useAppSelector(selectActiveThemeId);
+  const activeFamilyId = useAppSelector(selectActiveFamilyId);
+  const variant = useAppSelector(selectThemeVariant);
+  const effectiveTheme = useAppSelector(selectEffectiveTheme);
+
+  const isActiveCustom = customThemes.some(th => th.id === activeThemeId);
+  // Which variant to render in family preview tiles (Auto → resolved OS variant).
+  const previewVariant: 'light' | 'dark' = variant === 'system' ? resolveTheme('system') : variant;
+
+  const VARIANT_OPTIONS: { id: ThemeVariant; label: string }[] = [
+    { id: 'light', label: t('settings.theme.variantLight', 'Light') },
+    { id: 'dark', label: t('settings.theme.variantDark', 'Dark') },
+    { id: 'system', label: t('settings.theme.variantAuto', 'Auto') },
+  ];
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [importText, setImportText] = useState('');
+  const [importError, setImportError] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  const handleExport = async () => {
+    const active = customThemes.find(th => th.id === activeThemeId) ?? effectiveTheme;
+    const json = JSON.stringify(active, null, 2);
+    try {
+      await navigator.clipboard?.writeText(json);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Clipboard blocked — the textarea below still shows the JSON to copy.
+    }
+  };
+
+  const handleImport = () => {
+    setImportError('');
+    try {
+      const parsed = JSON.parse(importText) as Partial<Theme>;
+      if (!parsed || typeof parsed !== 'object' || typeof parsed.colors !== 'object') {
+        throw new Error('shape');
+      }
+      const theme: Theme = {
+        id: `custom-${Date.now()}`,
+        name: parsed.name
+          ? String(parsed.name)
+          : t('settings.theme.importedName', 'Imported theme'),
+        isDark: Boolean(parsed.isDark),
+        builtIn: false,
+        colors: { ...(parsed.colors as Record<string, string>) },
+        fonts: { ...(parsed.fonts ?? {}) },
+        gradient: importedGradient(parsed),
+        backdrop: importedBackdrop(parsed),
+      };
+      dispatch(upsertCustomTheme(theme));
+      setImportText('');
+    } catch {
+      setImportError(t('settings.theme.importError', 'Could not parse that theme JSON.'));
+    }
+  };
+
+  const activeMeta = customThemes.find(th => th.id === activeThemeId);
+  const exportJson = JSON.stringify(activeMeta ?? effectiveTheme, null, 2);
+
+  // Contrast guard: warn if the editable theme's primary text on its canvas is low-contrast.
+  const contrastRisk =
+    isActiveCustom &&
+    Math.abs(
+      channelLuminance(readToken('content')) - channelLuminance(readToken('surface-canvas'))
+    ) < 0.2;
+
+  return (
+    <SettingsPanel description={t('settings.theme.menuDesc', 'Customize colours and fonts.')}>
+      {/* ── Theme gallery: family tiles + one Light/Dark/Auto toggle ──── */}
+      <div>
+        <div className="mb-2 flex items-center justify-between px-1">
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-content-faint">
+            {t('settings.theme.presetsHeading', 'Themes')}
+          </h3>
+          <div
+            className="inline-flex overflow-hidden rounded-lg border border-line"
+            role="radiogroup"
+            aria-label={t('settings.theme.variantAria', 'Theme variant')}>
+            {VARIANT_OPTIONS.map(opt => {
+              const sel = opt.id === variant;
+              return (
+                <button
+                  key={opt.id}
+                  type="button"
+                  role="radio"
+                  aria-checked={sel}
+                  onClick={() => dispatch(setThemeVariant(opt.id))}
+                  className={`px-2.5 py-1 text-xs font-medium transition-colors ${
+                    sel
+                      ? 'bg-primary-500 text-content-inverted'
+                      : 'text-content-secondary hover:bg-surface-hover'
+                  }`}>
+                  {opt.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+          {families.map(fam => {
+            const preview = resolveFamilyVariant(fam, previewVariant);
+            const selected = !isActiveCustom && fam.id === activeFamilyId;
+            return (
+              <button
+                key={fam.id}
+                type="button"
+                aria-pressed={selected}
+                onClick={() => dispatch(setActiveFamily(fam.id))}
+                className={`flex flex-col gap-2 rounded-xl border p-3 text-left transition-colors ${
+                  selected
+                    ? 'border-primary-500 ring-1 ring-primary-500'
+                    : 'border-line hover:bg-surface-hover'
+                }`}>
+                <span
+                  className="flex h-10 items-center gap-1 rounded-lg px-2"
+                  style={{ background: tileCanvas(preview) }}>
+                  <span
+                    className="h-5 w-5 rounded-full border border-black/10"
+                    style={{ background: channelsToCss(swatchChannels(preview, 'surface')) }}
+                  />
+                  <span
+                    className="h-3 w-8 rounded-full"
+                    style={{ background: channelsToCss(swatchChannels(preview, 'content')) }}
+                  />
+                  <span
+                    className="ml-auto h-4 w-4 rounded-full"
+                    style={{ background: channelsToCss(swatchChannels(preview, 'primary-500')) }}
+                  />
+                </span>
+                <span className="text-sm font-medium text-content truncate">{fam.name}</span>
+              </button>
+            );
+          })}
+          {customThemes.map(th => {
+            const selected = th.id === activeThemeId;
+            return (
+              <button
+                key={th.id}
+                type="button"
+                aria-pressed={selected}
+                onClick={() => dispatch(setActiveTheme(th.id))}
+                className={`flex flex-col gap-2 rounded-xl border p-3 text-left transition-colors ${
+                  selected
+                    ? 'border-primary-500 ring-1 ring-primary-500'
+                    : 'border-line hover:bg-surface-hover'
+                }`}>
+                <span
+                  className="flex h-10 items-center gap-1 rounded-lg px-2"
+                  style={{ background: tileCanvas(th) }}>
+                  <span
+                    className="h-5 w-5 rounded-full border border-black/10"
+                    style={{ background: channelsToCss(swatchChannels(th, 'surface')) }}
+                  />
+                  <span
+                    className="h-3 w-8 rounded-full"
+                    style={{ background: channelsToCss(swatchChannels(th, 'content')) }}
+                  />
+                  <span
+                    className="ml-auto h-4 w-4 rounded-full"
+                    style={{ background: channelsToCss(swatchChannels(th, 'primary-500')) }}
+                  />
+                </span>
+                <span className="flex items-center justify-between gap-1">
+                  <span className="text-sm font-medium text-content truncate">{th.name}</span>
+                  <span className="text-[10px] uppercase tracking-wide text-content-faint">
+                    {t('settings.theme.customBadge', 'Custom')}
+                  </span>
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ── Editing hint (presets auto-fork) / contrast guard ──────── */}
+      {!isActiveCustom && (
+        <p className="px-1 text-xs text-content-muted">
+          {t(
+            'settings.theme.autoForkHint',
+            'Editing a preset automatically saves your changes as a new custom theme.'
+          )}
+        </p>
+      )}
+      {isActiveCustom && contrastRisk && (
+        <div className="rounded-xl border border-amber-200 bg-amber-50 p-3 dark:border-amber-500/30 dark:bg-amber-500/10">
+          <p className="text-xs text-amber-700 dark:text-amber-300">
+            {t(
+              'settings.theme.contrastWarn',
+              'Low contrast between text and background — this theme may be hard to read.'
+            )}
+          </p>
+        </div>
+      )}
+
+      {/* ── Colour editor ──────────────────────────────────────────── */}
+      {COLOR_GROUPS.map(group => (
+        <SettingsSection key={group.id} title={t(group.i18nKey, humanize(group.id))}>
+          <div className="px-1">
+            {group.keys.map(key => (
+              <ColorTokenField
+                key={key}
+                tokenKey={key}
+                label={humanize(key)}
+                value={effectiveTheme.colors[key] ?? readToken(key)}
+                disabled={false}
+                onChange={channels => dispatch(setThemeToken({ key, value: channels }))}
+              />
+            ))}
+          </div>
+        </SettingsSection>
+      ))}
+
+      {/* ── Advanced accent shades ─────────────────────────────────── */}
+      <div>
+        <button
+          type="button"
+          onClick={() => setShowAdvanced(v => !v)}
+          className="text-xs font-medium text-primary-600 hover:underline dark:text-primary-300">
+          {showAdvanced
+            ? t('settings.theme.hideShades', 'Hide all accent shades')
+            : t('settings.theme.showShades', 'Show all accent shades')}
+        </button>
+        {showAdvanced &&
+          ACCENT_FAMILIES.map(fam => (
+            <SettingsSection key={fam} title={humanize(fam)}>
+              <div className="px-1">
+                {ACCENT_SHADES.map(shade => {
+                  const key = `${fam}-${shade}`;
+                  return (
+                    <ColorTokenField
+                      key={key}
+                      tokenKey={key}
+                      label={`${humanize(fam)} ${shade}`}
+                      value={effectiveTheme.colors[key] ?? readToken(key)}
+                      disabled={false}
+                      onChange={channels => dispatch(setThemeToken({ key, value: channels }))}
+                    />
+                  );
+                })}
+              </div>
+            </SettingsSection>
+          ))}
+      </div>
+
+      {/* ── Fonts ──────────────────────────────────────────────────── */}
+      <SettingsSection title={t('settings.theme.fontsHeading', 'Fonts')}>
+        <div className="space-y-2 px-1">
+          {FONT_ROLES.map(role => {
+            const current = fontChoiceForStack(effectiveTheme.fonts[role] ?? readFontRole(role));
+            return (
+              <div key={role} className="flex items-center justify-between gap-3">
+                <span className="text-sm text-content">
+                  {t(`settings.theme.fontRole.${role}`, humanize(role))}
+                </span>
+                <SettingsSelect
+                  inputSize="sm"
+                  value={current?.id ?? '__current__'}
+                  disabled={false}
+                  aria-label={t(`settings.theme.fontRole.${role}`, humanize(role))}
+                  onChange={e => {
+                    const choice = FONT_CHOICES.find(c => c.id === e.target.value);
+                    if (choice) dispatch(setFontRole({ role, stack: choice.stack }));
+                  }}>
+                  {!current && (
+                    <option value="__current__" disabled>
+                      {t('settings.theme.fontCurrent', 'Current')}
+                    </option>
+                  )}
+                  {FONT_CHOICES.map(c => (
+                    <option key={c.id} value={c.id}>
+                      {c.label}
+                    </option>
+                  ))}
+                </SettingsSelect>
+              </div>
+            );
+          })}
+        </div>
+      </SettingsSection>
+
+      {/* ── Backdrop (mesh / solid / image) ────────────────────────── */}
+      <SettingsSection title={t('settings.theme.backdropHeading', 'Background')}>
+        <div className="space-y-2 px-1">
+          <div
+            className="inline-flex overflow-hidden rounded-lg border border-line"
+            role="radiogroup"
+            aria-label={t('settings.theme.backdropHeading', 'Background')}>
+            {(['mesh', 'solid', 'image'] as BackdropKind[]).map(kind => {
+              const current = effectiveTheme.backdrop?.kind ?? 'mesh';
+              const sel = current === kind;
+              return (
+                <button
+                  key={kind}
+                  type="button"
+                  role="radio"
+                  aria-checked={sel}
+                  disabled={false}
+                  onClick={() =>
+                    dispatch(
+                      setThemeBackdrop({ kind, imageUrl: effectiveTheme.backdrop?.imageUrl })
+                    )
+                  }
+                  className={`px-3 py-1.5 text-xs font-medium transition-colors disabled:opacity-50 ${
+                    sel
+                      ? 'bg-primary-500 text-content-inverted'
+                      : 'text-content-secondary hover:bg-surface-hover'
+                  }`}>
+                  {t(`settings.theme.backdrop.${kind}`, kind)}
+                </button>
+              );
+            })}
+          </div>
+          {effectiveTheme.backdrop?.kind === 'image' && (
+            <input
+              type="url"
+              disabled={false}
+              value={effectiveTheme.backdrop?.imageUrl ?? ''}
+              placeholder="https://…/background.jpg"
+              aria-label={t('settings.theme.backdropImageUrl', 'Background image URL')}
+              onChange={e =>
+                dispatch(setThemeBackdrop({ kind: 'image', imageUrl: e.target.value }))
+              }
+              className="w-full rounded-lg border border-line bg-surface px-2 py-1.5 text-xs text-content"
+            />
+          )}
+          <label className="flex items-center gap-2 text-xs text-content-secondary">
+            <input
+              type="checkbox"
+              checked={effectiveTheme.backdrop?.dots !== false}
+              onChange={e => dispatch(setThemeBackdrop({ dots: e.target.checked }))}
+              className="h-3.5 w-3.5 accent-primary-500"
+            />
+            {t('settings.theme.backdropDots', 'Show background dots')}
+          </label>
+          <p className="text-[11px] text-content-faint">
+            {t(
+              'settings.theme.backdropHint',
+              'Mesh shows the animated gradient; Solid uses a flat background; Image paints your own.'
+            )}
+          </p>
+        </div>
+      </SettingsSection>
+
+      {/* ── Actions: reset / delete / export / import ──────────────── */}
+      {isActiveCustom && (
+        <SettingsSection title={t('settings.theme.actions', 'Manage theme')}>
+          <div className="flex flex-wrap gap-2 px-1">
+            <button
+              type="button"
+              onClick={() => dispatch(resetActiveTheme())}
+              className="rounded-lg border border-line px-3 py-1.5 text-sm text-content-secondary hover:bg-surface-hover">
+              {t('settings.theme.reset', 'Reset overrides')}
+            </button>
+            <button
+              type="button"
+              onClick={() => dispatch(deleteCustomTheme(activeThemeId))}
+              className="rounded-lg border border-coral-200 px-3 py-1.5 text-sm text-coral-600 hover:bg-coral-50 dark:border-coral-500/30 dark:text-coral-300 dark:hover:bg-coral-500/10">
+              {t('settings.theme.delete', 'Delete theme')}
+            </button>
+            <button
+              type="button"
+              onClick={handleExport}
+              className="rounded-lg border border-line px-3 py-1.5 text-sm text-content-secondary hover:bg-surface-hover">
+              {copied
+                ? t('settings.theme.copied', 'Copied!')
+                : t('settings.theme.export', 'Copy JSON')}
+            </button>
+          </div>
+          <div className="px-1 pt-2">
+            <textarea
+              readOnly
+              value={exportJson}
+              rows={4}
+              aria-label={t('settings.theme.export', 'Copy JSON')}
+              className="w-full resize-none rounded-lg border border-line bg-surface-muted p-2 font-mono text-[11px] text-content-secondary"
+            />
+          </div>
+        </SettingsSection>
+      )}
+
+      {/* ── Import (always available) ──────────────────────────────── */}
+      <SettingsSection
+        title={t('settings.theme.import', 'Import theme')}
+        description={t(
+          'settings.theme.importHint',
+          'Paste exported theme JSON to add it as a custom theme.'
+        )}>
+        <div className="space-y-2 px-1">
+          <textarea
+            value={importText}
+            onChange={e => setImportText(e.target.value)}
+            rows={4}
+            placeholder='{ "name": "...", "isDark": false, "colors": { ... } }'
+            aria-label={t('settings.theme.import', 'Import theme')}
+            className="w-full resize-none rounded-lg border border-line bg-surface p-2 font-mono text-[11px] text-content"
+          />
+          {importError && (
+            <p className="text-xs text-coral-600 dark:text-coral-300">{importError}</p>
+          )}
+          <button
+            type="button"
+            onClick={handleImport}
+            disabled={!importText.trim()}
+            className="rounded-lg bg-primary-500 px-3 py-1.5 text-sm font-medium text-content-inverted hover:bg-primary-600 disabled:opacity-50">
+            {t('settings.theme.importApply', 'Import')}
+          </button>
+        </div>
+      </SettingsSection>
+    </SettingsPanel>
+  );
+};
+
+export default ThemeStudioPanel;
diff --git a/app/src/components/settings/panels/ToolPolicyDiagnosticsPanel.tsx b/app/src/components/settings/panels/ToolPolicyDiagnosticsPanel.tsx
index b6e7b1e60..baa639299 100644
--- a/app/src/components/settings/panels/ToolPolicyDiagnosticsPanel.tsx
+++ b/app/src/components/settings/panels/ToolPolicyDiagnosticsPanel.tsx
@@ -75,7 +75,7 @@ const ToolPolicyDiagnosticsPanel = () => {
   const body = useMemo(() => {
     if (status.kind === 'loading') {
       return (
-        <div className="px-4 py-3 text-sm text-neutral-500 dark:text-neutral-400">
+        <div className="px-4 py-3 text-sm text-content-muted">
           {t('devOptions.toolPolicyDiagnostics.loading')}
         </div>
       );
@@ -83,7 +83,7 @@ const ToolPolicyDiagnosticsPanel = () => {
     if (status.kind === 'error') {
       return (
         <div className="px-4 py-3">
-          <div className="text-sm font-semibold text-neutral-800 dark:text-neutral-100 mb-1">
+          <div className="text-sm font-semibold text-content mb-1">
             {t('devOptions.toolPolicyDiagnostics.unavailable')}
           </div>
           <SettingsStatusLine saving={false} error={status.message} savingLabel="" />
@@ -133,7 +133,7 @@ const ToolPolicyDiagnosticsPanel = () => {
           </dl>
         </div>
 
-        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-white dark:bg-sage-900/20">
+        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
           <div className="text-sm font-semibold text-sage-900 dark:text-sage-200">
             {t('devOptions.toolPolicyDiagnostics.inventory.title')}
           </div>
@@ -165,7 +165,7 @@ const ToolPolicyDiagnosticsPanel = () => {
           </dl>
         </div>
 
-        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-white dark:bg-sage-900/20">
+        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
           <div className="text-sm font-semibold text-sage-900 dark:text-sage-200">
             {t('devOptions.toolPolicyDiagnostics.mcpAllowlists.title')}
           </div>
@@ -195,7 +195,7 @@ const ToolPolicyDiagnosticsPanel = () => {
           )}
         </div>
 
-        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-white dark:bg-sage-900/20">
+        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
           <div className="text-sm font-semibold text-sage-900 dark:text-sage-200">
             {t('devOptions.toolPolicyDiagnostics.mcpWriteAudit.title')}
           </div>
@@ -211,7 +211,7 @@ const ToolPolicyDiagnosticsPanel = () => {
           )}
         </div>
 
-        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-white dark:bg-sage-900/20">
+        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
           <div className="text-sm font-semibold text-sage-900 dark:text-sage-200">
             {t('devOptions.toolPolicyDiagnostics.recentBlocked.title')}
           </div>
@@ -242,7 +242,7 @@ const ToolPolicyDiagnosticsPanel = () => {
           )}
         </div>
 
-        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-white dark:bg-sage-900/20">
+        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
           <div className="text-sm font-semibold text-sage-900 dark:text-sage-200">
             {t('devOptions.toolPolicyDiagnostics.redactedSurfaces.title')}
           </div>
diff --git a/app/src/components/settings/panels/ToolsPanel.tsx b/app/src/components/settings/panels/ToolsPanel.tsx
index d9fc54c49..9b55bcca2 100644
--- a/app/src/components/settings/panels/ToolsPanel.tsx
+++ b/app/src/components/settings/panels/ToolsPanel.tsx
@@ -97,9 +97,7 @@ const ToolsPanel = ({ embedded = false }: ToolsPanelProps = {}) => {
 
   const body = (
     <>
-      <p className="text-neutral-500 dark:text-neutral-400 text-sm">
-        {t('settings.tools.chooseCapabilities')}
-      </p>
+      <p className="text-content-muted text-sm">{t('settings.tools.chooseCapabilities')}</p>
 
       <div className="max-h-[420px] overflow-y-auto pr-1 space-y-4">
         {TOOL_CATEGORIES.map(category => {
diff --git a/app/src/components/settings/panels/UsagePanel.tsx b/app/src/components/settings/panels/UsagePanel.tsx
index e99afcdb5..8ed1b4241 100644
--- a/app/src/components/settings/panels/UsagePanel.tsx
+++ b/app/src/components/settings/panels/UsagePanel.tsx
@@ -91,7 +91,7 @@ const BackgroundActivityTab = () => {
           cloudProviders={snapshot.cloudProviders}
         />
       ) : !loadError ? (
-        <div className="text-xs text-neutral-500 dark:text-neutral-400">{t('common.loading')}</div>
+        <div className="text-xs text-content-muted">{t('common.loading')}</div>
       ) : null}
     </div>
   );
diff --git a/app/src/components/settings/panels/VoiceDebugPanel.tsx b/app/src/components/settings/panels/VoiceDebugPanel.tsx
index abbc50bd2..f603fc6b8 100644
--- a/app/src/components/settings/panels/VoiceDebugPanel.tsx
+++ b/app/src/components/settings/panels/VoiceDebugPanel.tsx
@@ -130,11 +130,11 @@ const VoiceDebugPanel = () => {
               </div>
 
               <div className="grid grid-cols-2 gap-3 text-sm">
-                <div className="rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-3">
-                  <div className="text-[10px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+                <div className="rounded-md border border-line bg-surface-muted p-3">
+                  <div className="text-[10px] uppercase tracking-wide text-content-muted">
                     {t('voice.debug.server')}
                   </div>
-                  <div className="mt-1 font-medium text-neutral-800 dark:text-neutral-100">
+                  <div className="mt-1 font-medium text-content">
                     {serverStatus
                       ? serverStatus.state
                       : isLoading
@@ -142,11 +142,9 @@ const VoiceDebugPanel = () => {
                         : t('voice.debug.unavailable')}
                   </div>
                 </div>
-                <div className="rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-3">
-                  <div className="text-[10px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-                    STT
-                  </div>
-                  <div className="mt-1 font-medium text-neutral-800 dark:text-neutral-100">
+                <div className="rounded-md border border-line bg-surface-muted p-3">
+                  <div className="text-[10px] uppercase tracking-wide text-content-muted">STT</div>
+                  <div className="mt-1 font-medium text-content">
                     {voiceStatus?.stt_available
                       ? t('voice.debug.ready')
                       : t('voice.debug.notReady')}
@@ -155,7 +153,7 @@ const VoiceDebugPanel = () => {
               </div>
 
               {serverStatus && (
-                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs text-neutral-500 dark:text-neutral-400">
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs text-content-muted">
                   <div>
                     {t('voice.debug.hotkey')}:{' '}
                     {serverStatus.hotkey || t('voice.debug.notAvailable')}
diff --git a/app/src/components/settings/panels/VoicePanel.tsx b/app/src/components/settings/panels/VoicePanel.tsx
index a73600c7d..34c44160f 100644
--- a/app/src/components/settings/panels/VoicePanel.tsx
+++ b/app/src/components/settings/panels/VoicePanel.tsx
@@ -493,7 +493,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
     }
     if (status?.state === 'installing') return 'text-amber-600 dark:text-amber-300';
     if (ready) return 'text-emerald-600 dark:text-emerald-300';
-    return 'text-neutral-500 dark:text-neutral-400';
+    return 'text-content-muted';
   };
 
   const handleInstallWhisper = async () => {
@@ -580,7 +580,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                   className="relative inline-flex h-4 w-7 shrink-0 items-center rounded-full bg-emerald-500 disabled:cursor-not-allowed">
                   <span
                     aria-hidden
-                    className="inline-block h-3 w-3 transform rounded-full bg-white shadow translate-x-3.5"
+                    className="inline-block h-3 w-3 transform rounded-full bg-surface shadow translate-x-3.5"
                   />
                 </button>
               </div>
@@ -621,10 +621,10 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                           setPendingKeyValue('');
                         }
                       }}
-                      className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${enabled ? 'bg-primary-500' : 'bg-neutral-300 dark:bg-neutral-600'}`}>
+                      className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${enabled ? 'bg-primary-500' : 'bg-surface-strong'}`}>
                       <span
                         aria-hidden
-                        className={`inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform ${enabled ? 'translate-x-3.5' : 'translate-x-0.5'}`}
+                        className={`inline-block h-3 w-3 transform rounded-full bg-surface shadow transition-transform ${enabled ? 'translate-x-3.5' : 'translate-x-0.5'}`}
                       />
                     </button>
                   </div>
@@ -660,10 +660,10 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                           setPendingKeyValue('');
                         }
                       }}
-                      className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${enabled ? 'bg-primary-500' : 'bg-neutral-300 dark:bg-neutral-600'}`}>
+                      className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${enabled ? 'bg-primary-500' : 'bg-surface-strong'}`}>
                       <span
                         aria-hidden
-                        className={`inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform ${enabled ? 'translate-x-3.5' : 'translate-x-0.5'}`}
+                        className={`inline-block h-3 w-3 transform rounded-full bg-surface shadow transition-transform ${enabled ? 'translate-x-3.5' : 'translate-x-0.5'}`}
                       />
                     </button>
                   </div>
@@ -719,10 +719,10 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                           setPendingKeyValue('');
                         }
                       }}
-                      className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${enabled ? 'bg-primary-500' : 'bg-neutral-300 dark:bg-neutral-600'}`}>
+                      className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${enabled ? 'bg-primary-500' : 'bg-surface-strong'}`}>
                       <span
                         aria-hidden
-                        className={`inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform ${enabled ? 'translate-x-3.5' : 'translate-x-0.5'}`}
+                        className={`inline-block h-3 w-3 transform rounded-full bg-surface shadow transition-transform ${enabled ? 'translate-x-3.5' : 'translate-x-0.5'}`}
                       />
                     </button>
                   </div>
@@ -744,18 +744,18 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
               }
             }}
             data-testid="voice-provider-key-modal">
-            <div className="w-full max-w-md rounded-2xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 shadow-xl p-6 space-y-4">
+            <div className="w-full max-w-md rounded-2xl border border-line dark:border-line-strong bg-surface shadow-xl p-6 space-y-4">
               {pendingKeySlug === 'whisper' || pendingKeySlug === 'piper' ? (
                 /* ── Local provider modal (Whisper / Piper) ──────────── */
                 <>
                   <div>
-                    <h3 className="text-base font-semibold text-neutral-800 dark:text-neutral-100">
+                    <h3 className="text-base font-semibold text-content">
                       {t('voice.modal.title')}{' '}
                       {pendingKeySlug === 'whisper'
                         ? t('voice.providers.chip.whisper')
                         : t('voice.providers.chip.piper')}
                     </h3>
-                    <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
+                    <p className="text-xs text-content-muted mt-1">
                       {pendingKeySlug === 'whisper'
                         ? t('voice.modal.whisperDesc')
                         : t('voice.modal.piperDesc')}
@@ -764,7 +764,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
 
                   {pendingKeySlug === 'whisper' && (
                     <label className="block space-y-1">
-                      <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+                      <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
                         {t('voice.providers.whisperModel')}
                       </span>
                       <SettingsSelect
@@ -784,7 +784,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
 
                   {pendingKeySlug === 'piper' && (
                     <label className="block space-y-1">
-                      <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+                      <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
                         {t('voice.providers.piperVoice')}
                       </span>
                       <SettingsSelect
@@ -876,17 +876,15 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                 /* ── External provider modal (API key) ───────────────── */
                 <>
                   <div>
-                    <h3 className="text-base font-semibold text-neutral-800 dark:text-neutral-100">
+                    <h3 className="text-base font-semibold text-content">
                       {t('voice.modal.title')}{' '}
                       {BUILTIN_VOICE_PROVIDER_META[pendingKeySlug]?.label ?? pendingKeySlug}
                     </h3>
-                    <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
-                      {t('voice.modal.desc')}
-                    </p>
+                    <p className="text-xs text-content-muted mt-1">{t('voice.modal.desc')}</p>
                   </div>
 
                   <label className="block space-y-1">
-                    <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+                    <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
                       {t('voice.providers.chip.apiKeyLabel')}
                     </span>
                     <SettingsTextField
@@ -993,7 +991,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                 {/* STT routing */}
                 <div className="space-y-2">
                   <label className="block space-y-1">
-                    <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+                    <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
                       {t('voice.providers.sttProvider')}
                     </span>
                     <SettingsSelect
@@ -1057,7 +1055,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                   {/* Whisper model picker — shown when Whisper is selected */}
                   {sttProvider === 'whisper' && (
                     <label className="block space-y-1">
-                      <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+                      <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
                         {t('voice.providers.whisperModel')}
                       </span>
                       <SettingsSelect
@@ -1086,7 +1084,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                 {/* TTS routing */}
                 <div className="space-y-2">
                   <label className="block space-y-1">
-                    <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+                    <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
                       {t('voice.providers.ttsProvider')}
                     </span>
                     <SettingsSelect
@@ -1156,7 +1154,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                   {/* Piper voice picker — shown when Piper is selected */}
                   {ttsProvider === 'piper' && (
                     <label className="block space-y-1">
-                      <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+                      <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
                         {t('voice.providers.piperVoice')}
                       </span>
                       <SettingsSelect
@@ -1208,7 +1206,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                           className="mt-1 w-full"
                         />
                       )}
-                      <p className="text-[11px] text-neutral-500 dark:text-neutral-400 mt-0.5">
+                      <p className="text-[11px] text-content-muted mt-0.5">
                         {t('voice.providers.piperVoicesDesc')}
                       </p>
                     </label>
@@ -1217,7 +1215,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                   {/* ElevenLabs voice picker — shown when ElevenLabs is selected for TTS */}
                   {ttsProvider === 'elevenlabs' && (
                     <label className="block space-y-1">
-                      <span className="text-xs font-medium text-neutral-500 dark:text-neutral-300">
+                      <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
                         {t('voice.routing.elevenlabsVoice')}
                       </span>
                       <SettingsSelect
@@ -1251,7 +1249,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                           className="mt-1 w-full"
                         />
                       )}
-                      <p className="text-[11px] text-neutral-500 dark:text-neutral-400 mt-0.5">
+                      <p className="text-[11px] text-content-muted mt-0.5">
                         {t('voice.routing.elevenlabsVoiceDesc')}
                       </p>
                     </label>
@@ -1260,7 +1258,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
               </div>
             }
           />
-          <div className="flex justify-end px-4 py-3 border-t border-neutral-100 dark:border-neutral-800">
+          <div className="flex justify-end px-4 py-3 border-t border-line-subtle">
             <Button
               type="button"
               variant="primary"
@@ -1290,7 +1288,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                 stacked
                 label={t('voice.providers.mascotVoice')}
                 control={
-                  <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                  <p className="text-xs text-content-muted">
                     {t('voice.providers.mascotVoiceDescPrefix')}{' '}
                     <button
                       type="button"
diff --git a/app/src/components/settings/panels/WalletBalancesPanel.tsx b/app/src/components/settings/panels/WalletBalancesPanel.tsx
index 9fc27550c..e2408ddb9 100644
--- a/app/src/components/settings/panels/WalletBalancesPanel.tsx
+++ b/app/src/components/settings/panels/WalletBalancesPanel.tsx
@@ -35,8 +35,7 @@ const CHAIN_BADGE_CLASS: Record<string, string> = {
 };
 
 const badgeClassFor = (chain: WalletChain): string =>
-  CHAIN_BADGE_CLASS[chain] ??
-  'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300';
+  CHAIN_BADGE_CLASS[chain] ?? 'bg-surface-subtle text-content-secondary';
 
 // The rows rendered as placeholders before the wallet is set up, mirroring the
 // configured layout (one EVM row per displayed network + BTC/Solana/Tron) so
@@ -115,7 +114,7 @@ const BalanceRow = ({ balance, onSend, onReceive }: BalanceRowProps) => {
 
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <span className="text-xs font-medium text-neutral-700 dark:text-neutral-200 truncate">
+            <span className="text-xs font-medium text-content-secondary truncate">
               {networkLabel}
             </span>
             {balance.providerStatus !== 'ready' && (
@@ -126,7 +125,7 @@ const BalanceRow = ({ balance, onSend, onReceive }: BalanceRowProps) => {
           </div>
           {/* Address + copy button */}
           <div className="flex items-center gap-1.5 min-w-0">
-            <span className="font-mono text-[11px] text-neutral-500 dark:text-neutral-400 truncate">
+            <span className="font-mono text-[11px] text-content-muted truncate">
               {truncateAddress(balance.address)}
             </span>
             <Button
@@ -136,7 +135,7 @@ const BalanceRow = ({ balance, onSend, onReceive }: BalanceRowProps) => {
               size="sm"
               onClick={() => void handleCopyAddress()}
               aria-label={t('walletBalances.copyAddress')}
-              className="shrink-0 text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300">
+              className="shrink-0 text-content-faint hover:text-content-secondary dark:hover:text-content-secondary">
               {copied ? (
                 <svg
                   className="w-3.5 h-3.5 text-sage-500"
@@ -168,12 +167,10 @@ const BalanceRow = ({ balance, onSend, onReceive }: BalanceRowProps) => {
         <div className="text-right shrink-0">
           <span
             title={t('walletBalances.rawBalance').replace('{raw}', balance.raw)}
-            className="text-sm font-medium text-neutral-800 dark:text-neutral-100 font-mono">
+            className="text-sm font-medium text-content font-mono">
             {balance.formatted}
           </span>
-          <span className="ml-1 text-xs text-neutral-500 dark:text-neutral-400">
-            {balance.assetSymbol}
-          </span>
+          <span className="ml-1 text-xs text-content-muted">{balance.assetSymbol}</span>
         </div>
       </div>
 
@@ -227,20 +224,18 @@ const ChainPlaceholderRow = ({
         {balanceBadge({ chain, evmNetwork })}
       </span>
       <div className="min-w-0">
-        <span className="block text-xs font-medium text-neutral-400 dark:text-neutral-500 truncate">
+        <span className="block text-xs font-medium text-content-faint truncate">
           {balanceNetworkLabel({ chain, evmNetwork })}
         </span>
-        <span className="font-mono text-[11px] text-neutral-400 dark:text-neutral-500 truncate">
+        <span className="font-mono text-[11px] text-content-faint truncate">
           {t('walletBalances.notSetUp')}
         </span>
       </div>
       <div className="flex-1" />
       <div className="text-right shrink-0">
         {/* Em dash placeholder — punctuation, not translatable copy. */}
-        <span className="text-sm font-medium text-neutral-400 dark:text-neutral-500 font-mono">
-          —
-        </span>
-        <span className="ml-1 text-xs text-neutral-400 dark:text-neutral-500">{symbol}</span>
+        <span className="text-sm font-medium text-content-faint font-mono">—</span>
+        <span className="ml-1 text-xs text-content-faint">{symbol}</span>
       </div>
     </div>
   );
@@ -311,7 +306,7 @@ const WalletBalancesPanel = () => {
   const renderContent = () => {
     if (loading) {
       return (
-        <div className="flex items-center justify-center gap-2 py-10 text-neutral-500 dark:text-neutral-400">
+        <div className="flex items-center justify-center gap-2 py-10 text-content-muted">
           <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
             <circle
               className="opacity-25"
@@ -401,7 +396,7 @@ const WalletBalancesPanel = () => {
               </div>
             </div>
           </div>
-          <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
+          <div className="divide-y divide-line-subtle dark:divide-neutral-800">
             {PLACEHOLDER_ROWS.map(row => (
               <ChainPlaceholderRow
                 key={`${row.chain}-${row.evmNetwork ?? 'native'}`}
@@ -418,9 +413,9 @@ const WalletBalancesPanel = () => {
     if (balances !== null && balances.length === 0) {
       return (
         <div className="px-4 py-8 text-center">
-          <div className="w-12 h-12 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center mx-auto mb-3">
+          <div className="w-12 h-12 rounded-full bg-surface-subtle flex items-center justify-center mx-auto mb-3">
             <svg
-              className="w-6 h-6 text-neutral-400 dark:text-neutral-500"
+              className="w-6 h-6 text-content-faint"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -439,7 +434,7 @@ const WalletBalancesPanel = () => {
 
     if (balances && balances.length > 0) {
       return (
-        <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
+        <div className="divide-y divide-line-subtle dark:divide-neutral-800">
           {balances.map(balance => (
             <BalanceRow
               key={balanceKey(balance)}
diff --git a/app/src/components/settings/panels/WebhooksDebugPanel.tsx b/app/src/components/settings/panels/WebhooksDebugPanel.tsx
index 05523fb49..43b059573 100644
--- a/app/src/components/settings/panels/WebhooksDebugPanel.tsx
+++ b/app/src/components/settings/panels/WebhooksDebugPanel.tsx
@@ -181,13 +181,10 @@ const WebhooksDebugPanel = () => {
           disabled={clearing || logs.length === 0}>
           {clearing ? t('webhooks.clearing') : t('webhooks.clearLogs')}
         </Button>
-        <span className="text-xs text-neutral-500 dark:text-neutral-400">
+        <span className="text-xs text-content-muted">
           {registrations.length} {t('webhooks.registered')} &middot; {logs.length}{' '}
           {t('webhooks.captured')} &middot;{' '}
-          <span
-            className={
-              isLive ? 'text-sage-600 dark:text-sage-300' : 'text-neutral-500 dark:text-neutral-400'
-            }>
+          <span className={isLive ? 'text-sage-600 dark:text-sage-300' : 'text-content-muted'}>
             {isLive ? t('webhooks.live') : t('webhooks.disconnected')}
           </span>
         </span>
@@ -196,11 +193,9 @@ const WebhooksDebugPanel = () => {
       <SettingsStatusLine saving={false} error={error} savingLabel="" />
 
       {lastEvent && (
-        <div className="text-xs text-neutral-500 dark:text-neutral-400">
+        <div className="text-xs text-content-muted">
           {t('webhooks.lastEvent')}:{' '}
-          <span className="font-medium text-neutral-800 dark:text-neutral-200">
-            {lastEvent.event_type}
-          </span>{' '}
+          <span className="font-medium text-content">{lastEvent.event_type}</span>{' '}
           {t('webhooks.at')} {formatDateTime(lastEvent.timestamp)}
         </div>
       )}
@@ -215,9 +210,9 @@ const WebhooksDebugPanel = () => {
               {registrations.map(registration => (
                 <div
                   key={registration.tunnel_uuid}
-                  className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-3">
+                  className="rounded-xl border border-line bg-surface-muted p-3">
                   <div className="flex flex-wrap items-center justify-between gap-2">
-                    <span className="text-xs font-semibold text-neutral-800 dark:text-neutral-100">
+                    <span className="text-xs font-semibold text-content">
                       {registration.tunnel_name || registration.tunnel_uuid}
                     </span>
                     <div className="flex gap-1">
@@ -225,7 +220,7 @@ const WebhooksDebugPanel = () => {
                       <SettingsBadge variant="neutral">{registration.skill_id}</SettingsBadge>
                     </div>
                   </div>
-                  <div className="mt-1 text-[11px] text-neutral-500 dark:text-neutral-400 font-mono break-all">
+                  <div className="mt-1 text-[11px] text-content-muted font-mono break-all">
                     {backendUrl
                       ? tunnelsApi.ingressUrl(backendUrl, registration.tunnel_uuid)
                       : t('webhooks.resolvingBackendUrl')}
@@ -252,17 +247,17 @@ const WebhooksDebugPanel = () => {
                   className={`w-full rounded-xl border p-3 text-left transition-colors ${
                     selectedLog?.correlation_id === entry.correlation_id
                       ? 'border-primary-300 dark:border-primary-500/40 bg-primary-50 dark:bg-primary-500/10'
-                      : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 hover:bg-neutral-100 dark:hover:bg-neutral-800'
+                      : 'border-line bg-surface-muted hover:bg-surface-hover'
                   }`}>
                   <div className="flex items-center justify-between gap-2">
-                    <span className="text-xs font-semibold text-neutral-800 dark:text-neutral-100">
+                    <span className="text-xs font-semibold text-content">
                       {entry.method} {entry.path}
                     </span>
-                    <span className="text-[10px] text-neutral-500 dark:text-neutral-400">
+                    <span className="text-[10px] text-content-muted">
                       {entry.status_code ?? '...'}
                     </span>
                   </div>
-                  <div className="mt-1 text-[11px] text-neutral-500 dark:text-neutral-400">
+                  <div className="mt-1 text-[11px] text-content-muted">
                     {entry.tunnel_name}{' '}
                     {entry.skill_id ? `· ${entry.skill_id}` : `· ${t('webhooks.unrouted')}`} ·{' '}
                     {formatDateTime(entry.updated_at)}
@@ -271,12 +266,12 @@ const WebhooksDebugPanel = () => {
               ))}
 
               {selectedLog && (
-                <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-3 space-y-3">
+                <div className="rounded-xl border border-line bg-surface-muted p-3 space-y-3">
                   <div>
-                    <div className="text-xs font-semibold text-neutral-800 dark:text-neutral-100">
+                    <div className="text-xs font-semibold text-content">
                       {selectedLog.method} {selectedLog.path}
                     </div>
-                    <div className="text-[10px] text-neutral-500 dark:text-neutral-400 font-mono">
+                    <div className="text-[10px] text-content-muted font-mono">
                       {selectedLog.correlation_id}
                     </div>
                   </div>
@@ -338,10 +333,10 @@ const WebhooksDebugPanel = () => {
 function PayloadBlock({ title, value }: { title: string; value: string }) {
   return (
     <details className="text-xs">
-      <summary className="cursor-pointer font-semibold text-stone-500 dark:text-neutral-400 uppercase tracking-wide text-[10px]">
+      <summary className="cursor-pointer font-semibold text-content-muted uppercase tracking-wide text-[10px]">
         {title}
       </summary>
-      <pre className="mt-1 max-h-40 overflow-auto rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-950 dark:bg-neutral-50 p-2 text-[11px] text-stone-100 whitespace-pre-wrap break-words">
+      <pre className="mt-1 max-h-40 overflow-auto rounded-lg border border-line bg-stone-950 dark:bg-neutral-50 p-2 text-[11px] text-stone-100 whitespace-pre-wrap break-words">
         {value}
       </pre>
     </details>
diff --git a/app/src/components/settings/panels/__tests__/RecoveryPhrasePanel.test.tsx b/app/src/components/settings/panels/__tests__/RecoveryPhrasePanel.test.tsx
index 275d084ee..801689ec1 100644
--- a/app/src/components/settings/panels/__tests__/RecoveryPhrasePanel.test.tsx
+++ b/app/src/components/settings/panels/__tests__/RecoveryPhrasePanel.test.tsx
@@ -119,11 +119,11 @@ describe('RecoveryPhrasePanel — trust-surface polish', () => {
     expect(screen.getByText(/Enter your recovery phrase below/i)).toBeTruthy();
   });
 
-  it('uses palette token text-neutral-700 on the confirm-checkbox label (not opacity)', async () => {
+  it('uses the semantic text-content-secondary token on the confirm-checkbox label (not opacity)', async () => {
     const { container } = renderWithProviders(<RecoveryPhrasePanel />);
     await waitFor(() => screen.getByText(/consent to using it for local wallet setup/i));
     const label = screen.getByText(/consent to using it for local wallet setup/i);
-    expect(label.className).toContain('text-neutral-700');
+    expect(label.className).toContain('text-content-secondary');
     expect(label.className).not.toContain('opacity-80');
     expect(container).toBeTruthy();
   });
diff --git a/app/src/components/settings/panels/ai/ClaudeCodeStatusCard.tsx b/app/src/components/settings/panels/ai/ClaudeCodeStatusCard.tsx
index 2114790b7..20f336ad3 100644
--- a/app/src/components/settings/panels/ai/ClaudeCodeStatusCard.tsx
+++ b/app/src/components/settings/panels/ai/ClaudeCodeStatusCard.tsx
@@ -91,7 +91,7 @@ export function ClaudeCodeConnect({
         leadingIcon={<LuKeyRound className="h-3.5 w-3.5" />}>
         {t('settings.ai.claudeCode.button')}
       </Button>
-      <span className="text-xs text-stone-500 dark:text-neutral-400">
+      <span className="text-xs text-content-muted">
         <InlineSummary connected={connected} auth={shownAuth} loading={authLoading} />
       </span>
 
@@ -265,14 +265,14 @@ function ClaudeCodeModal({
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4"
       onClick={onClose}>
       <div
-        className="w-full max-w-md rounded-2xl border border-stone-200 bg-white p-6 shadow-soft dark:border-neutral-800 dark:bg-neutral-900"
+        className="w-full max-w-md rounded-2xl border border-line bg-surface p-6 shadow-soft"
         onClick={e => e.stopPropagation()}>
         <div className="mb-4 flex items-start justify-between gap-3">
           <div>
-            <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+            <h3 className="text-base font-semibold text-content">
               {t('settings.ai.claudeCode.modalTitle')}
             </h3>
-            <p className="mt-1 max-w-sm text-xs leading-5 text-stone-500 dark:text-neutral-400">
+            <p className="mt-1 max-w-sm text-xs leading-5 text-content-muted">
               {t('settings.ai.claudeCode.modalDescription')}
             </p>
           </div>
@@ -287,16 +287,12 @@ function ClaudeCodeModal({
         </div>
 
         {/* Connection */}
-        <div className="flex items-center justify-between gap-3 rounded-lg border border-stone-200 px-3 py-2 dark:border-neutral-800">
+        <div className="flex items-center justify-between gap-3 rounded-lg border border-line px-3 py-2">
           <div className="text-xs">
-            <div className="font-medium text-stone-900 dark:text-neutral-100">
-              {t('settings.ai.claudeCode.connection')}
-            </div>
+            <div className="font-medium text-content">{t('settings.ai.claudeCode.connection')}</div>
             <div
               className={
-                connected
-                  ? 'text-emerald-600 dark:text-emerald-400'
-                  : 'text-stone-500 dark:text-neutral-400'
+                connected ? 'text-emerald-600 dark:text-emerald-400' : 'text-content-muted'
               }>
               {connected
                 ? t('settings.ai.claudeCode.enabled')
@@ -326,9 +322,9 @@ function ClaudeCodeModal({
         </div>
 
         {/* Authentication */}
-        <div className="mt-3 rounded-lg border border-stone-200 px-3 py-2 dark:border-neutral-800">
+        <div className="mt-3 rounded-lg border border-line px-3 py-2">
           <div className="mb-1.5 flex items-center justify-between">
-            <span className="text-xs font-medium text-stone-900 dark:text-neutral-100">
+            <span className="text-xs font-medium text-content">
               {t('settings.ai.claudeCode.authentication')}
             </span>
             <Button
@@ -354,7 +350,7 @@ function ClaudeCodeModal({
                   ? t('settings.ai.claudeCode.signIn')
                   : t('settings.ai.claudeCode.reconnect')}
             </Button>
-            <p className="mt-1.5 text-[11px] text-stone-500 dark:text-neutral-400">
+            <p className="mt-1.5 text-[11px] text-content-muted">
               {t('settings.ai.claudeCode.loginHint')}
             </p>
             {launchError && (
@@ -366,13 +362,13 @@ function ClaudeCodeModal({
         </div>
 
         {/* Permissions — full access vs. the default acceptEdits posture. */}
-        <div className="mt-3 rounded-lg border border-stone-200 px-3 py-2 dark:border-neutral-800">
+        <div className="mt-3 rounded-lg border border-line px-3 py-2">
           <div className="flex items-center justify-between gap-3">
             <div className="min-w-0">
-              <div className="text-xs font-medium text-stone-900 dark:text-neutral-100">
+              <div className="text-xs font-medium text-content">
                 {t('settings.ai.claudeCode.fullAccess')}
               </div>
-              <p className="mt-0.5 text-[11px] leading-4 text-stone-500 dark:text-neutral-400">
+              <p className="mt-0.5 text-[11px] leading-4 text-content-muted">
                 {fullAccess
                   ? t('settings.ai.claudeCode.fullAccessOn')
                   : t('settings.ai.claudeCode.fullAccessOff')}
@@ -386,18 +382,16 @@ function ClaudeCodeModal({
               disabled={fullAccess === null || savingAccess}
               onClick={() => void toggleFullAccess(!fullAccess)}
               className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors disabled:cursor-wait disabled:opacity-50 ${
-                fullAccess
-                  ? 'bg-emerald-500 dark:bg-emerald-500'
-                  : 'bg-stone-300 dark:bg-neutral-700'
+                fullAccess ? 'bg-emerald-500 dark:bg-emerald-500' : 'bg-surface-strong'
               }`}>
               <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${
+                className={`inline-block h-4 w-4 transform rounded-full bg-surface shadow transition-transform ${
                   fullAccess ? 'translate-x-4' : 'translate-x-0.5'
                 }`}
               />
             </button>
           </div>
-          <p className="mt-1.5 text-[11px] leading-4 text-stone-400 dark:text-neutral-500">
+          <p className="mt-1.5 text-[11px] leading-4 text-content-faint">
             {isMac()
               ? t('settings.ai.claudeCode.sandboxNoteMac')
               : t('settings.ai.claudeCode.sandboxNoteOther')}
@@ -419,7 +413,7 @@ function AuthDetail({ auth, loading }: { auth: ClaudeCodeAuthStatus | null; load
   const { t } = useT();
   if (!auth) {
     return (
-      <p className="text-xs text-neutral-500 dark:text-neutral-400">
+      <p className="text-xs text-content-muted">
         {loading
           ? t('settings.ai.claudeCode.checkingSignIn')
           : t('settings.ai.claudeCode.enableToCheck')}
diff --git a/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx b/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx
index 8f86b3c2b..9d4800042 100644
--- a/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx
+++ b/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx
@@ -40,11 +40,11 @@ const AppFilterSection = ({
   const { t } = useT();
   return (
     <>
-      <section className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
-        <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+      <section className="rounded-2xl border border-line bg-surface p-4 space-y-3">
+        <h3 className="text-sm font-semibold text-content">
           {t('settings.autocomplete.appFilter.runtime')}
         </h3>
-        <div className="text-sm text-neutral-800 dark:text-neutral-200 space-y-1">
+        <div className="text-sm text-content space-y-1">
           <div>
             {t('settings.autocomplete.appFilter.platformSupported')}:{' '}
             {status?.platform_supported ? t('common.yes') : t('common.no')}
@@ -106,19 +106,19 @@ const AppFilterSection = ({
         </div>
       </section>
 
-      <section className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
-        <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+      <section className="rounded-2xl border border-line bg-surface p-4 space-y-3">
+        <h3 className="text-sm font-semibold text-content">
           {t('settings.autocomplete.appFilter.test')}
         </h3>
         <div className="space-y-1">
-          <div className="text-xs text-neutral-600 dark:text-neutral-300">
+          <div className="text-xs text-content-secondary">
             {t('settings.autocomplete.appFilter.contextOverride')}
           </div>
           <textarea
             value={contextOverride}
             onChange={event => onSetContextOverride(event.target.value)}
             rows={3}
-            className="w-full rounded border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-xs text-neutral-800 dark:text-neutral-200"
+            className="w-full rounded border border-line bg-surface-muted p-2 text-xs text-content"
           />
         </div>
         <div className="flex gap-2">
@@ -139,22 +139,22 @@ const AppFilterSection = ({
           </button>
         </div>
         {focusDebug && (
-          <pre className="max-h-48 overflow-auto rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-xs text-neutral-800 dark:text-neutral-200">
+          <pre className="max-h-48 overflow-auto rounded-xl border border-line bg-surface-muted p-2 text-xs text-content">
             {focusDebug}
           </pre>
         )}
       </section>
 
-      <section className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+      <section className="rounded-2xl border border-line bg-surface p-4 space-y-3">
         <div className="flex items-center justify-between">
-          <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+          <h3 className="text-sm font-semibold text-content">
             {t('settings.autocomplete.appFilter.liveLogs')}
           </h3>
           <Button variant="secondary" size="sm" onClick={onClearLogs}>
             {t('common.clear')}
           </Button>
         </div>
-        <pre className="max-h-56 overflow-auto rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-xs text-neutral-800 dark:text-neutral-200">
+        <pre className="max-h-56 overflow-auto rounded-xl border border-line bg-surface-muted p-2 text-xs text-content">
           {logs.length > 0 ? logs.join('\n') : t('settings.autocomplete.appFilter.noLogs')}
         </pre>
       </section>
diff --git a/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx b/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx
index 2eef3c85b..09952c060 100644
--- a/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx
+++ b/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx
@@ -58,12 +58,10 @@ const CompletionStyleSection = ({
   const { t } = useT();
   return (
     <>
-      <section className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
-        <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
-          {t('autocomplete.settings')}
-        </h3>
-        <label className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2">
-          <span className="text-sm text-neutral-800 dark:text-neutral-200">
+      <section className="rounded-2xl border border-line bg-surface p-4 space-y-3">
+        <h3 className="text-sm font-semibold text-content">{t('autocomplete.settings')}</h3>
+        <label className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2">
+          <span className="text-sm text-content">
             {t('settings.autocomplete.completionStyle.enabled')}
           </span>
           <input
@@ -72,18 +70,16 @@ const CompletionStyleSection = ({
             onChange={event => onSetEnabled(event.target.checked)}
           />
         </label>
-        <label className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2">
-          <span className="text-sm text-neutral-800 dark:text-neutral-200">
-            {t('autocomplete.acceptWithTab')}
-          </span>
+        <label className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2">
+          <span className="text-sm text-content">{t('autocomplete.acceptWithTab')}</span>
           <input
             type="checkbox"
             checked={acceptWithTab}
             onChange={event => onSetAcceptWithTab(event.target.checked)}
           />
         </label>
-        <label className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2">
-          <span className="text-sm text-neutral-800 dark:text-neutral-200">
+        <label className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2">
+          <span className="text-sm text-content">
             {t('settings.autocomplete.completionStyle.debounce')}
           </span>
           <input
@@ -93,11 +89,11 @@ const CompletionStyleSection = ({
             step={10}
             value={debounceMs}
             onChange={event => onSetDebounceMs(event.target.value)}
-            className="w-28 rounded border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-neutral-800 dark:text-neutral-200"
+            className="w-28 rounded border border-line-strong bg-surface px-2 py-1 text-xs text-content"
           />
         </label>
-        <label className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2">
-          <span className="text-sm text-neutral-800 dark:text-neutral-200">
+        <label className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2">
+          <span className="text-sm text-content">
             {t('settings.autocomplete.completionStyle.maxChars')}
           </span>
           <input
@@ -107,11 +103,11 @@ const CompletionStyleSection = ({
             step={8}
             value={maxChars}
             onChange={event => onSetMaxChars(event.target.value)}
-            className="w-28 rounded border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-neutral-800 dark:text-neutral-200"
+            className="w-28 rounded border border-line-strong bg-surface px-2 py-1 text-xs text-content"
           />
         </label>
-        <label className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2">
-          <span className="text-sm text-neutral-800 dark:text-neutral-200">
+        <label className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2">
+          <span className="text-sm text-content">
             {t('settings.autocomplete.completionStyle.overlayTtl')}
           </span>
           <input
@@ -121,17 +117,15 @@ const CompletionStyleSection = ({
             step={100}
             value={overlayTtlMs}
             onChange={event => onSetOverlayTtlMs(event.target.value)}
-            className="w-28 rounded border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-neutral-800 dark:text-neutral-200"
+            className="w-28 rounded border border-line-strong bg-surface px-2 py-1 text-xs text-content"
           />
         </label>
-        <label className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-3 py-2">
-          <span className="text-sm text-neutral-800 dark:text-neutral-200">
-            {t('autocomplete.stylePreset')}
-          </span>
+        <label className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2">
+          <span className="text-sm text-content">{t('autocomplete.stylePreset')}</span>
           <select
             value={stylePreset}
             onChange={event => onSetStylePreset(event.target.value)}
-            className="rounded border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-neutral-800 dark:text-neutral-200">
+            className="rounded border border-line-strong bg-surface px-2 py-1 text-xs text-content">
             <option value="balanced">{t('autocomplete.style.balanced')}</option>
             <option value="concise">{t('autocomplete.style.concise')}</option>
             <option value="formal">{t('autocomplete.style.formal')}</option>
@@ -140,36 +134,34 @@ const CompletionStyleSection = ({
           </select>
         </label>
         <div className="space-y-1">
-          <div className="text-xs text-neutral-600 dark:text-neutral-300">
+          <div className="text-xs text-content-secondary">
             {t('settings.autocomplete.completionStyle.styleInstructions')}
           </div>
           <textarea
             value={styleInstructions}
             onChange={event => onSetStyleInstructions(event.target.value)}
             rows={3}
-            className="w-full rounded border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-xs text-neutral-800 dark:text-neutral-200"
+            className="w-full rounded border border-line bg-surface-muted p-2 text-xs text-content"
           />
         </div>
         <div className="space-y-1">
-          <div className="text-xs text-neutral-600 dark:text-neutral-300">
+          <div className="text-xs text-content-secondary">
             {t('settings.autocomplete.completionStyle.styleExamples')}
           </div>
           <textarea
             value={styleExamplesText}
             onChange={event => onSetStyleExamplesText(event.target.value)}
             rows={3}
-            className="w-full rounded border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-xs text-neutral-800 dark:text-neutral-200"
+            className="w-full rounded border border-line bg-surface-muted p-2 text-xs text-content"
           />
         </div>
         <div className="space-y-1">
-          <div className="text-xs text-neutral-600 dark:text-neutral-300">
-            {t('autocomplete.disabledApps')}
-          </div>
+          <div className="text-xs text-content-secondary">{t('autocomplete.disabledApps')}</div>
           <textarea
             value={disabledAppsText}
             onChange={event => onSetDisabledAppsText(event.target.value)}
             rows={3}
-            className="w-full rounded border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-xs text-neutral-800 dark:text-neutral-200"
+            className="w-full rounded border border-line bg-surface-muted p-2 text-xs text-content"
           />
         </div>
         <Button variant="primary" size="sm" onClick={onSaveConfig} disabled={isSaving}>
@@ -177,9 +169,9 @@ const CompletionStyleSection = ({
         </Button>
       </section>
 
-      <section className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+      <section className="rounded-2xl border border-line bg-surface p-4 space-y-3">
         <div className="flex items-center justify-between">
-          <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+          <h3 className="text-sm font-semibold text-content">
             {t('settings.autocomplete.completionStyle.personalizationHistory')}
           </h3>
           <Button
@@ -193,7 +185,7 @@ const CompletionStyleSection = ({
               : t('settings.autocomplete.completionStyle.clearHistory')}
           </Button>
         </div>
-        <p className="text-xs text-neutral-500 dark:text-neutral-400">
+        <p className="text-xs text-content-muted">
           {isHistoryLoading
             ? t('common.loading')
             : historyEntries.length === 0
@@ -204,25 +196,23 @@ const CompletionStyleSection = ({
                 ).replace('{count}', String(historyEntries.length))}
         </p>
         {historyEntries.length > 0 && (
-          <div className="max-h-48 overflow-y-auto rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 space-y-1">
+          <div className="max-h-48 overflow-y-auto rounded-xl border border-line bg-surface-muted p-2 space-y-1">
             {historyEntries.map((entry, idx) => (
               <div
                 key={`${String(entry.timestamp_ms)}-${String(idx)}`}
-                className="flex flex-col gap-0.5 rounded-lg bg-white dark:bg-neutral-900 px-2 py-1.5 text-xs border border-neutral-100 dark:border-neutral-800">
-                <div className="flex items-center gap-2 text-neutral-500 dark:text-neutral-400">
+                className="flex flex-col gap-0.5 rounded-lg bg-surface px-2 py-1.5 text-xs border border-line-subtle">
+                <div className="flex items-center gap-2 text-content-muted">
                   <span className="shrink-0">{new Date(entry.timestamp_ms).toLocaleString()}</span>
                   {entry.app_name && (
-                    <span className="rounded bg-neutral-100 dark:bg-neutral-800 px-1 text-neutral-600 dark:text-neutral-300">
+                    <span className="rounded bg-surface-subtle px-1 text-content-secondary">
                       {entry.app_name}
                     </span>
                   )}
                 </div>
-                <div className="flex items-baseline gap-1 text-neutral-800 dark:text-neutral-200 truncate">
-                  <span className="shrink-0 text-neutral-400 dark:text-neutral-500">…</span>
-                  <span className="truncate text-neutral-500 dark:text-neutral-400">
-                    {entry.context.slice(-40)}
-                  </span>
-                  <span className="shrink-0 text-neutral-400 dark:text-neutral-500">→</span>
+                <div className="flex items-baseline gap-1 text-content truncate">
+                  <span className="shrink-0 text-content-faint">…</span>
+                  <span className="truncate text-content-muted">{entry.context.slice(-40)}</span>
+                  <span className="shrink-0 text-content-faint">→</span>
                   <span className="font-medium text-primary-500 truncate">{entry.suggestion}</span>
                 </div>
               </div>
diff --git a/app/src/components/settings/panels/billing/AutoRechargeSection.tsx b/app/src/components/settings/panels/billing/AutoRechargeSection.tsx
index d42706f48..aad3f6c38 100644
--- a/app/src/components/settings/panels/billing/AutoRechargeSection.tsx
+++ b/app/src/components/settings/panels/billing/AutoRechargeSection.tsx
@@ -74,14 +74,14 @@ const AutoRechargeSection = ({
 }: AutoRechargeSectionProps) => {
   const { t } = useT();
   return (
-    <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden">
+    <div className="rounded-2xl border border-line bg-surface overflow-hidden">
       {/* Header row */}
       <div className="flex items-center justify-between p-3">
         <div>
-          <p className="text-md font-semibold text-neutral-800 dark:text-neutral-100">
+          <p className="text-md font-semibold text-content">
             {t('settings.billing.autoRecharge.title')}
           </p>
-          <p className="text-[11px] text-neutral-400 dark:text-neutral-500 mt-0.5">
+          <p className="text-[11px] text-content-faint mt-0.5">
             {t('settings.billing.autoRecharge.subtitle')}
           </p>
         </div>
@@ -119,7 +119,7 @@ const AutoRechargeSection = ({
 
       {/* Settings — only shown when enabled */}
       {!arLoading && arSettings?.enabled && (
-        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 pt-3 pb-2 space-y-3">
+        <div className="border-t border-line px-3 pt-3 pb-2 space-y-3">
           {/* Status row */}
           <div className="flex items-center gap-3 flex-wrap">
             {arSettings.inFlight && (
@@ -143,14 +143,14 @@ const AutoRechargeSection = ({
               </span>
             )}
             {arSettings.spentThisWeekUsd > 0 && (
-              <span className="text-[10px] text-neutral-400 dark:text-neutral-500">
+              <span className="text-[10px] text-content-faint">
                 {t('settings.billing.autoRecharge.spentThisWeek')
                   .replace('{spent}', arSettings.spentThisWeekUsd.toFixed(2))
                   .replace('{limit}', String(arSettings.weeklyLimitUsd))}
               </span>
             )}
             {arSettings.lastRechargeAt && (
-              <span className="text-[10px] text-neutral-500 dark:text-neutral-400">
+              <span className="text-[10px] text-content-muted">
                 {t('settings.billing.autoRecharge.expires').replace(
                   '{date}',
                   new Date(arSettings.lastRechargeAt).toLocaleDateString('en-US', {
@@ -185,7 +185,7 @@ const AutoRechargeSection = ({
 
           {/* Trigger threshold — bespoke pill-button selector, keep layout */}
           <div>
-            <p className="text-[11px] text-neutral-400 dark:text-neutral-500 mb-1.5">
+            <p className="text-[11px] text-content-faint mb-1.5">
               {t('settings.billing.autoRecharge.rechargeWhen')}
             </p>
             <div className="flex gap-1.5 flex-wrap">
@@ -197,7 +197,7 @@ const AutoRechargeSection = ({
                   className={`px-2.5 py-1 text-xs rounded-lg border transition-colors ${
                     arThreshold === v
                       ? 'bg-primary-500/20 text-primary-400 border-primary-500/40'
-                      : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-800 hover:text-neutral-700 dark:hover:text-neutral-200'
+                      : 'bg-surface-subtle text-content-muted border-line hover:text-content-secondary dark:hover:text-neutral-200'
                   }`}>
                   ${v}
                 </button>
@@ -207,7 +207,7 @@ const AutoRechargeSection = ({
 
           {/* Recharge amount — bespoke pill-button selector, keep layout */}
           <div>
-            <p className="text-[11px] text-neutral-400 dark:text-neutral-500 mb-1.5">
+            <p className="text-[11px] text-content-faint mb-1.5">
               {t('settings.billing.autoRecharge.addAmount')}
             </p>
             <div className="flex gap-1.5 flex-wrap">
@@ -219,7 +219,7 @@ const AutoRechargeSection = ({
                   className={`px-2.5 py-1 text-xs rounded-lg border transition-colors ${
                     arAmount === v
                       ? 'bg-primary-500/20 text-primary-400 border-primary-500/40'
-                      : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-800 hover:text-neutral-700 dark:hover:text-neutral-200'
+                      : 'bg-surface-subtle text-content-muted border-line hover:text-content-secondary dark:hover:text-neutral-200'
                   }`}>
                   ${v}
                 </button>
@@ -229,7 +229,7 @@ const AutoRechargeSection = ({
 
           {/* Weekly limit — bespoke pill-button selector, keep layout */}
           <div>
-            <p className="text-[11px] text-neutral-400 dark:text-neutral-500 mb-1.5">
+            <p className="text-[11px] text-content-faint mb-1.5">
               {t('settings.billing.autoRecharge.weeklyLimit')}
             </p>
             <div className="flex gap-1.5 flex-wrap">
@@ -241,7 +241,7 @@ const AutoRechargeSection = ({
                   className={`px-2.5 py-1 text-xs rounded-lg border transition-colors ${
                     arWeeklyLimit === v
                       ? 'bg-primary-500/20 text-primary-400 border-primary-500/40'
-                      : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-800 hover:text-neutral-700 dark:hover:text-neutral-200'
+                      : 'bg-surface-subtle text-content-muted border-line hover:text-content-secondary dark:hover:text-neutral-200'
                   }`}>
                   ${v}
                 </button>
@@ -274,9 +274,9 @@ const AutoRechargeSection = ({
       )}
 
       {/* Payment methods */}
-      <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-2.5">
+      <div className="border-t border-line px-3 py-2.5">
         <div className="flex items-center justify-between mb-2">
-          <p className="text-[11px] font-medium text-neutral-600 dark:text-neutral-300">
+          <p className="text-[11px] font-medium text-content-secondary">
             {t('settings.billing.autoRecharge.paymentMethods')}
           </p>
           <Button
@@ -294,14 +294,14 @@ const AutoRechargeSection = ({
             {[0, 1].map(i => (
               <div
                 key={i}
-                className="h-9 rounded-lg bg-neutral-200/60 dark:bg-neutral-700/30 animate-pulse"
+                className="h-9 rounded-lg bg-surface-strong/60 dark:bg-neutral-700/30 animate-pulse"
               />
             ))}
           </div>
         ) : cards.length === 0 ? (
-          <div className="flex items-center gap-2 rounded-lg bg-neutral-50 dark:bg-neutral-800/60 border border-neutral-200 dark:border-neutral-800 p-2.5">
+          <div className="flex items-center gap-2 rounded-lg bg-surface-muted border border-line p-2.5">
             <svg
-              className="w-4 h-4 text-neutral-500 dark:text-neutral-400 flex-shrink-0"
+              className="w-4 h-4 text-content-muted flex-shrink-0"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24">
@@ -312,7 +312,7 @@ const AutoRechargeSection = ({
                 d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
               />
             </svg>
-            <p className="text-[11px] text-neutral-500 dark:text-neutral-400">
+            <p className="text-[11px] text-content-muted">
               {t('settings.billing.autoRecharge.noCards')}
             </p>
           </div>
@@ -326,10 +326,10 @@ const AutoRechargeSection = ({
               return (
                 <div
                   key={card.id}
-                  className="flex items-center gap-2 rounded-lg bg-neutral-50 dark:bg-neutral-800/60 border border-neutral-200 dark:border-neutral-800 px-2.5 py-2">
+                  className="flex items-center gap-2 rounded-lg bg-surface-muted border border-line px-2.5 py-2">
                   {/* Card icon */}
                   <svg
-                    className="w-4 h-4 text-neutral-400 dark:text-neutral-500 flex-shrink-0"
+                    className="w-4 h-4 text-content-faint flex-shrink-0"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">
@@ -344,7 +344,7 @@ const AutoRechargeSection = ({
                   {/* Card info */}
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-1.5 flex-wrap">
-                      <span className="text-xs text-neutral-800 dark:text-neutral-100 font-medium">
+                      <span className="text-xs text-content font-medium">
                         {cardBrandLabel(card.brand)} ••••{card.last4}
                       </span>
                       {card.isDefault && (
@@ -353,7 +353,7 @@ const AutoRechargeSection = ({
                         </span>
                       )}
                     </div>
-                    <p className="text-[10px] text-neutral-500 dark:text-neutral-400 mt-0.5">
+                    <p className="text-[10px] text-content-muted mt-0.5">
                       {t('settings.billing.autoRecharge.expires').replace(
                         '{date}',
                         `${String(card.expMonth).padStart(2, '0')}/${String(card.expYear).slice(-2)}`
@@ -400,7 +400,7 @@ const AutoRechargeSection = ({
                         size="xs"
                         onClick={() => setConfirmDeleteId(card.id)}
                         disabled={isDeleting || !!settingDefaultId}
-                        className="text-neutral-500 dark:text-neutral-400 hover:text-coral-600 dark:hover:text-coral-400">
+                        className="text-content-muted hover:text-coral-600 dark:hover:text-coral-400">
                         {t('common.remove')}
                       </Button>
                     )}
diff --git a/app/src/components/settings/panels/billing/BillingHistoryTab.tsx b/app/src/components/settings/panels/billing/BillingHistoryTab.tsx
index 90c9aa491..3e57c5cd9 100644
--- a/app/src/components/settings/panels/billing/BillingHistoryTab.tsx
+++ b/app/src/components/settings/panels/billing/BillingHistoryTab.tsx
@@ -16,13 +16,11 @@ export default function BillingHistoryTab({
   const { t } = useT();
   return (
     <section className="space-y-4">
-      <div className="flex flex-col gap-2 rounded-2xl bg-white dark:bg-neutral-900 p-4 border border-stone-200 dark:border-neutral-800">
-        <h3 className="font-headline text-2xl font-bold tracking-tight text-stone-950 dark:text-neutral-50">
+      <div className="flex flex-col gap-2 rounded-2xl bg-surface p-4 border border-line">
+        <h3 className="font-headline text-2xl font-bold tracking-tight text-stone-950 dark:text-content">
           {t('settings.billing.history.title')}
         </h3>
-        <p className="mt-1 text-sm text-stone-500 dark:text-neutral-400">
-          {t('settings.billing.history.desc')}
-        </p>
+        <p className="mt-1 text-sm text-content-muted">{t('settings.billing.history.desc')}</p>
         <div className="flex items-center justify-between gap-3">
           {hasActive && (
             <Button
@@ -35,9 +33,9 @@ export default function BillingHistoryTab({
           )}
         </div>
       </div>
-      <div className="overflow-hidden rounded-[28px] bg-white dark:bg-neutral-900 shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-stone-950/5">
+      <div className="overflow-hidden rounded-[28px] bg-surface shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-stone-950/5">
         {transactionRows.length > 0 ? (
-          <div className="divide-y divide-stone-100 dark:divide-neutral-800">
+          <div className="divide-y divide-line-subtle dark:divide-neutral-800">
             {transactionRows.map(transaction => {
               const isEarn = transaction.type === 'EARN';
               return (
@@ -45,10 +43,10 @@ export default function BillingHistoryTab({
                   key={transaction.id}
                   className="grid gap-3 px-5 py-4 text-sm sm:grid-cols-[1.3fr_0.8fr_0.7fr_0.8fr] sm:items-center">
                   <div>
-                    <p className="font-semibold text-stone-950 dark:text-neutral-50">
+                    <p className="font-semibold text-stone-950 dark:text-content">
                       {transaction.action}
                     </p>
-                    <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
+                    <p className="mt-1 text-xs text-content-muted">
                       {new Date(transaction.createdAt).toLocaleDateString(undefined, {
                         month: 'short',
                         day: 'numeric',
@@ -56,13 +54,13 @@ export default function BillingHistoryTab({
                       })}
                     </p>
                   </div>
-                  <div className="text-stone-500 dark:text-neutral-400">{transaction.type}</div>
+                  <div className="text-content-muted">{transaction.type}</div>
                   <div
-                    className={`font-semibold ${isEarn ? 'text-sage-600 dark:text-sage-300' : 'text-stone-950 dark:text-neutral-50'}`}>
+                    className={`font-semibold ${isEarn ? 'text-sage-600 dark:text-sage-300' : 'text-stone-950 dark:text-content'}`}>
                     {isEarn ? '+' : '-'}${Math.abs(transaction.amountUsd).toFixed(2)}
                   </div>
                   <div className="sm:text-right">
-                    <span className="rounded-full bg-stone-100 dark:bg-neutral-800 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-stone-500 dark:text-neutral-400">
+                    <span className="rounded-full bg-surface-subtle px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-content-muted">
                       {t('settings.billing.history.posted')}
                     </span>
                   </div>
@@ -71,7 +69,7 @@ export default function BillingHistoryTab({
             })}
           </div>
         ) : (
-          <div className="px-5 py-8 text-sm text-stone-500 dark:text-neutral-400">
+          <div className="px-5 py-8 text-sm text-content-muted">
             {t('settings.billing.history.empty')}
           </div>
         )}
diff --git a/app/src/components/settings/panels/billing/InferenceBudget.tsx b/app/src/components/settings/panels/billing/InferenceBudget.tsx
index fdd7056c1..77af24378 100644
--- a/app/src/components/settings/panels/billing/InferenceBudget.tsx
+++ b/app/src/components/settings/panels/billing/InferenceBudget.tsx
@@ -29,16 +29,16 @@ const InferenceBudget = ({ teamUsage, isLoadingCredits }: InferenceBudgetProps)
   const { t } = useT();
 
   return (
-    <div className="rounded-2xl border border-stone-200 bg-white p-3 space-y-3">
+    <div className="rounded-2xl border border-line bg-surface p-3 space-y-3">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold text-stone-900">
+        <h3 className="text-sm font-semibold text-content">
           {t('settings.billing.inferenceBudget.title')}
         </h3>
         {isLoadingCredits && (
-          <span className="text-[10px] text-stone-500">{t('common.loading')}</span>
+          <span className="text-[10px] text-content-muted">{t('common.loading')}</span>
         )}
         {teamUsage && !isLoadingCredits && (
-          <span className="text-xs text-stone-400">
+          <span className="text-xs text-content-faint">
             {teamUsage.cycleBudgetUsd > 0
               ? t('settings.billing.inferenceBudget.remainingSummary')
                   .replace('{remaining}', fmtUsd(teamUsage.remainingUsd))
@@ -52,7 +52,7 @@ const InferenceBudget = ({ teamUsage, isLoadingCredits }: InferenceBudgetProps)
         <>
           {teamUsage.cycleBudgetUsd > 0 ? (
             <>
-              <div className="h-1.5 bg-stone-200 rounded-full overflow-hidden">
+              <div className="h-1.5 bg-surface-strong rounded-full overflow-hidden">
                 <div
                   className={`h-full rounded-full transition-all duration-300 ${
                     teamUsage.remainingUsd <= 0
@@ -70,13 +70,13 @@ const InferenceBudget = ({ teamUsage, isLoadingCredits }: InferenceBudgetProps)
                 />
               </div>
               <div className="flex items-center justify-between">
-                <span className="text-[11px] text-stone-500">
+                <span className="text-[11px] text-content-muted">
                   {t('settings.billing.inferenceBudget.spentThisCycle').replace(
                     '{amount}',
                     fmtUsd(teamUsage.cycleSpentUsd)
                   )}
                 </span>
-                <span className="text-[11px] text-stone-500">
+                <span className="text-[11px] text-content-muted">
                   {t('settings.billing.inferenceBudget.cycleEndsOn').replace(
                     '{date}',
                     formatCycleEnds(
@@ -93,8 +93,8 @@ const InferenceBudget = ({ teamUsage, isLoadingCredits }: InferenceBudgetProps)
               )}
             </>
           ) : (
-            <div className="rounded-xl border border-stone-200 bg-stone-50 px-3 py-2.5">
-              <p className="text-[11px] text-stone-600">
+            <div className="rounded-xl border border-line bg-surface-muted px-3 py-2.5">
+              <p className="text-[11px] text-content-secondary">
                 {t('settings.billing.inferenceBudget.noRecurringWeeklyDesc')}
               </p>
             </div>
@@ -126,9 +126,9 @@ const InferenceBudget = ({ teamUsage, isLoadingCredits }: InferenceBudgetProps)
           </div>
         </>
       ) : isLoadingCredits ? (
-        <div className="h-1.5 w-full rounded-full bg-stone-200 animate-pulse" />
+        <div className="h-1.5 w-full rounded-full bg-surface-strong animate-pulse" />
       ) : (
-        <p className="text-xs text-stone-500">
+        <p className="text-xs text-content-muted">
           {t('settings.billing.inferenceBudget.unableToLoad')}
         </p>
       )}
@@ -152,20 +152,22 @@ const UsageBreakdown = ({
   const { t } = useT();
 
   return (
-    <div className="rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
+    <div className="rounded-xl border border-line bg-surface-muted px-3 py-2">
       <div className="flex items-center justify-between mb-1.5">
-        <span className="text-[10px] font-semibold uppercase tracking-wide text-stone-400">
+        <span className="text-[10px] font-semibold uppercase tracking-wide text-content-faint">
           {t('settings.billing.inferenceBudget.cycleSpend')}
         </span>
-        <span className="text-[11px] text-stone-600">
+        <span className="text-[11px] text-content-secondary">
           {t('settings.billing.inferenceBudget.totalAmount').replace('{amount}', fmtUsd(totalUsd))}
         </span>
       </div>
       <div className="grid grid-cols-2 gap-2 text-[11px]">
         <div>
-          <div className="text-stone-500">{t('settings.billing.inferenceBudget.inference')}</div>
-          <div className="text-stone-900 font-medium">{fmtUsd(inferenceUsd)}</div>
-          <div className="text-stone-400">
+          <div className="text-content-muted">
+            {t('settings.billing.inferenceBudget.inference')}
+          </div>
+          <div className="text-content font-medium">{fmtUsd(inferenceUsd)}</div>
+          <div className="text-content-faint">
             {t('settings.billing.inferenceBudget.calls').replace(
               '{count}',
               inferenceCalls.toLocaleString()
@@ -173,9 +175,11 @@ const UsageBreakdown = ({
           </div>
         </div>
         <div>
-          <div className="text-stone-500">{t('settings.billing.inferenceBudget.integrations')}</div>
-          <div className="text-stone-900 font-medium">{fmtUsd(integrationsUsd)}</div>
-          <div className="text-stone-400">
+          <div className="text-content-muted">
+            {t('settings.billing.inferenceBudget.integrations')}
+          </div>
+          <div className="text-content font-medium">{fmtUsd(integrationsUsd)}</div>
+          <div className="text-content-faint">
             {t('settings.billing.inferenceBudget.calls').replace(
               '{count}',
               integrationCalls.toLocaleString()
@@ -195,8 +199,8 @@ const DailyChart = ({ points }: { points: TeamUsageDailyPoint[] }) => {
   }
   const max = points.reduce((m, p) => Math.max(m, p.totalUsd), 0) || 1;
   return (
-    <div className="rounded-xl border border-stone-200 bg-white px-3 py-2">
-      <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 mb-2">
+    <div className="rounded-xl border border-line bg-surface px-3 py-2">
+      <div className="text-[10px] font-semibold uppercase tracking-wide text-content-faint mb-2">
         {t('settings.billing.inferenceBudget.dailySpend')}
       </div>
       <div className="flex items-end gap-1 h-16">
@@ -216,7 +220,7 @@ const DailyChart = ({ points }: { points: TeamUsageDailyPoint[] }) => {
           );
         })}
       </div>
-      <div className="flex items-center gap-3 mt-1.5 text-[10px] text-stone-500">
+      <div className="flex items-center gap-3 mt-1.5 text-[10px] text-content-muted">
         <span className="flex items-center gap-1">
           <span className="w-2 h-2 bg-primary-400 inline-block" />{' '}
           {t('settings.billing.inferenceBudget.inference')}
@@ -234,12 +238,12 @@ const TopModels = ({ rows }: { rows: TeamUsageModelRow[] }) => {
   const { t } = useT();
 
   return (
-    <div className="rounded-xl border border-stone-200 bg-white px-3 py-2">
-      <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 mb-1.5">
+    <div className="rounded-xl border border-line bg-surface px-3 py-2">
+      <div className="text-[10px] font-semibold uppercase tracking-wide text-content-faint mb-1.5">
         {t('settings.billing.inferenceBudget.topModels')}
       </div>
       {rows.length === 0 ? (
-        <p className="text-[11px] text-stone-500">
+        <p className="text-[11px] text-content-muted">
           {t('settings.billing.inferenceBudget.noInferenceUsage')}
         </p>
       ) : (
@@ -248,8 +252,8 @@ const TopModels = ({ rows }: { rows: TeamUsageModelRow[] }) => {
             <li
               key={`${r.provider}::${r.model}::${i}`}
               className="flex items-center justify-between text-[11px]">
-              <span className="text-stone-700 truncate mr-2">{r.model || r.provider}</span>
-              <span className="text-stone-500 flex-shrink-0">
+              <span className="text-content-secondary truncate mr-2">{r.model || r.provider}</span>
+              <span className="text-content-muted flex-shrink-0">
                 {fmtUsd(r.spentUsd)} · {r.calls.toLocaleString()}
               </span>
             </li>
@@ -264,12 +268,12 @@ const TopIntegrations = ({ rows }: { rows: TeamUsageIntegrationRow[] }) => {
   const { t } = useT();
 
   return (
-    <div className="rounded-xl border border-stone-200 bg-white px-3 py-2">
-      <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 mb-1.5">
+    <div className="rounded-xl border border-line bg-surface px-3 py-2">
+      <div className="text-[10px] font-semibold uppercase tracking-wide text-content-faint mb-1.5">
         {t('settings.billing.inferenceBudget.topIntegrations')}
       </div>
       {rows.length === 0 ? (
-        <p className="text-[11px] text-stone-500">
+        <p className="text-[11px] text-content-muted">
           {t('settings.billing.inferenceBudget.noIntegrationUsage')}
         </p>
       ) : (
@@ -278,11 +282,11 @@ const TopIntegrations = ({ rows }: { rows: TeamUsageIntegrationRow[] }) => {
             <li
               key={`${r.provider}::${r.action}::${i}`}
               className="flex items-center justify-between text-[11px]">
-              <span className="text-stone-700 truncate mr-2">
+              <span className="text-content-secondary truncate mr-2">
                 {r.provider}
                 {r.action ? ` · ${r.action}` : ''}
               </span>
-              <span className="text-stone-500 flex-shrink-0">
+              <span className="text-content-muted flex-shrink-0">
                 {fmtUsd(r.spentUsd)} · {r.calls.toLocaleString()}
               </span>
             </li>
diff --git a/app/src/components/settings/panels/billing/PayAsYouGoCard.tsx b/app/src/components/settings/panels/billing/PayAsYouGoCard.tsx
index 225b87471..e3e6002ae 100644
--- a/app/src/components/settings/panels/billing/PayAsYouGoCard.tsx
+++ b/app/src/components/settings/panels/billing/PayAsYouGoCard.tsx
@@ -33,36 +33,36 @@ const PayAsYouGoCard = ({
 
   return (
     <>
-      <div className="rounded-lg bg-white dark:bg-neutral-900 p-6 shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-neutral-950/5">
-        <h3 className="font-headline text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50">
+      <div className="rounded-lg bg-surface p-6 shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-neutral-950/5">
+        <h3 className="font-headline text-xl font-bold tracking-tight text-content">
           {t('settings.billing.payAsYouGo.creditBalanceTitle')}
         </h3>
-        <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+        <p className="mt-1 text-sm text-content-muted">
           {t('settings.billing.payAsYouGo.creditBalanceDesc')}
         </p>
         {creditBalance ? (
           <div className="grid mt-4 gap-3 sm:grid-cols-3">
             <div>
-              <p className="text-sm font-semibold text-neutral-400 dark:text-neutral-500">
+              <p className="text-sm font-semibold text-content-faint">
                 {t('settings.billing.payAsYouGo.available')}
               </p>
-              <p className="mt-2 text-2xl font-bold tracking-tight text-neutral-600 dark:text-neutral-300">
+              <p className="mt-2 text-2xl font-bold tracking-tight text-content-secondary">
                 ${availableCredits.toFixed(2)}
               </p>
             </div>
             <div>
-              <p className="text-sm font-semibold text-neutral-400 dark:text-neutral-500">
+              <p className="text-sm font-semibold text-content-faint">
                 {t('settings.billing.payAsYouGo.promotionalCredits')}
               </p>
-              <p className="mt-2 text-xl font-bold tracking-tight text-neutral-600 dark:text-neutral-300">
+              <p className="mt-2 text-xl font-bold tracking-tight text-content-secondary">
                 ${promoCredits.toFixed(2)}
               </p>
             </div>
             <div>
-              <p className="text-sm font-semibold text-neutral-400 dark:text-neutral-500">
+              <p className="text-sm font-semibold text-content-faint">
                 {t('settings.billing.payAsYouGo.topUpBalance')}
               </p>
-              <p className="mt-2 text-xl font-bold tracking-tight text-neutral-600 dark:text-neutral-300">
+              <p className="mt-2 text-xl font-bold tracking-tight text-content-secondary">
                 ${teamTopupCredits.toFixed(2)}
               </p>
             </div>
@@ -70,23 +70,20 @@ const PayAsYouGoCard = ({
         ) : isLoadingCredits ? (
           <div className="mt-5 grid gap-3 sm:grid-cols-3">
             {[0, 1, 2].map(index => (
-              <div
-                key={index}
-                className="h-24 rounded-2xl bg-neutral-100 dark:bg-neutral-800 animate-pulse"
-              />
+              <div key={index} className="h-24 rounded-2xl bg-surface-subtle animate-pulse" />
             ))}
           </div>
         ) : (
-          <p className="mt-5 text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="mt-5 text-sm text-content-muted">
             {t('settings.billing.payAsYouGo.unableToLoad')}
           </p>
         )}
       </div>
-      <div className="rounded-lg bg-white dark:bg-neutral-900 p-6 shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-neutral-950/5">
-        <h3 className="font-headline text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50">
+      <div className="rounded-lg bg-surface p-6 shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-neutral-950/5">
+        <h3 className="font-headline text-xl font-bold tracking-tight text-content">
           {t('settings.billing.payAsYouGo.chooseTopUpTitle')}
         </h3>
-        <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+        <p className="mt-1 text-sm text-content-muted">
           {t('settings.billing.payAsYouGo.chooseTopUpDesc')}
         </p>
 
@@ -100,23 +97,23 @@ const PayAsYouGoCard = ({
               <div className="text-2xl font-bold tracking-tight text-primary-600 dark:text-primary-300">
                 {isToppingUp ? t('settings.billing.payAsYouGo.opening') : `$${amount.toFixed(2)}`}
               </div>
-              <div className="mt-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500">
+              <div className="mt-1 text-[11px] font-semibold text-content-faint">
                 {t('settings.billing.payAsYouGo.topUpCredits')}
               </div>
             </button>
           ))}
         </div>
 
-        <div className="mt-4 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-4">
+        <div className="mt-4 rounded-2xl border border-line bg-surface-muted p-4">
           <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto]">
             <div>
               <label
                 htmlFor="billing-custom-top-up"
-                className="text-[11px] font-semibold uppercase tracking-[0.24em] text-neutral-400 dark:text-neutral-500">
+                className="text-[11px] font-semibold uppercase tracking-[0.24em] text-content-faint">
                 {t('settings.billing.payAsYouGo.customAmount')}
               </label>
               <div className="mt-2 flex items-center">
-                <span className="pl-3 text-sm font-semibold text-neutral-500 dark:text-neutral-400 pointer-events-none">
+                <span className="pl-3 text-sm font-semibold text-content-muted pointer-events-none">
                   $
                 </span>
                 <SettingsTextField
@@ -134,7 +131,7 @@ const PayAsYouGoCard = ({
                   className="-ml-1 flex-1"
                 />
               </div>
-              <p className="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
+              <p className="mt-2 text-xs text-content-muted">
                 {t('settings.billing.payAsYouGo.chooseTopUpDesc')}
               </p>
             </div>
diff --git a/app/src/components/settings/panels/billing/SubscriptionPlans.tsx b/app/src/components/settings/panels/billing/SubscriptionPlans.tsx
index dfe2983bf..c4f1f1011 100644
--- a/app/src/components/settings/panels/billing/SubscriptionPlans.tsx
+++ b/app/src/components/settings/panels/billing/SubscriptionPlans.tsx
@@ -30,20 +30,20 @@ const SubscriptionPlans = ({
   const { t } = useT();
   return (
     <>
-      <div className="flex flex-col gap-2 rounded-2xl bg-white dark:bg-neutral-900 p-4 border border-neutral-200 dark:border-neutral-800">
-        <h3 className="font-headline text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50">
+      <div className="flex flex-col gap-2 rounded-2xl bg-surface p-4 border border-line">
+        <h3 className="font-headline text-2xl font-bold tracking-tight text-content">
           {t('settings.billing.subscription.chooseTitle')}
         </h3>
-        <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+        <p className="mt-1 text-sm text-content-muted">
           {t('settings.billing.subscription.chooseSubtitle')}
         </p>
 
         <div className="flex items-center justify-between mt-4">
           <div>
-            <p className="text-sm font-semibold text-neutral-900 dark:text-neutral-50">
+            <p className="text-sm font-semibold text-content">
               {t('settings.billing.subscription.cryptoQuestion')}
             </p>
-            <p className="mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
+            <p className="mt-0.5 text-xs text-content-muted">
               {t('settings.billing.subscription.cryptoDesc')}
             </p>
           </div>
@@ -57,7 +57,7 @@ const SubscriptionPlans = ({
 
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-          <div className="mx-auto inline-flex w-fit rounded-full bg-white dark:bg-neutral-900 p-1 shadow-sm ring-1 ring-neutral-950/5 lg:mx-0">
+          <div className="mx-auto inline-flex w-fit rounded-full bg-surface p-1 shadow-sm ring-1 ring-neutral-950/5 lg:mx-0">
             <button
               onClick={() => {
                 if (paymentMethod !== 'crypto') setBillingInterval('monthly');
@@ -65,8 +65,8 @@ const SubscriptionPlans = ({
               disabled={paymentMethod === 'crypto'}
               className={`rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
                 billingInterval === 'monthly'
-                  ? 'bg-primary-600 text-white'
-                  : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-100 dark:text-neutral-100'
+                  ? 'bg-primary-600 text-content-inverted'
+                  : 'text-content-muted hover:text-content dark:hover:text-content dark:text-content'
               } ${paymentMethod === 'crypto' ? 'cursor-not-allowed opacity-40' : ''}`}>
               {t('settings.billing.subscription.monthly')}
             </button>
@@ -74,8 +74,8 @@ const SubscriptionPlans = ({
               onClick={() => setBillingInterval('annual')}
               className={`rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
                 billingInterval === 'annual'
-                  ? 'bg-primary-600 text-white'
-                  : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-100 dark:text-neutral-100'
+                  ? 'bg-primary-600 text-content-inverted'
+                  : 'text-content-muted hover:text-content dark:hover:text-content dark:text-content'
               }`}>
               {t('settings.billing.subscription.annual')}
             </button>
@@ -130,17 +130,17 @@ const SubscriptionPlans = ({
                   isPopular
                     ? 'bg-primary-50 dark:bg-primary-500/10 ring-2 ring-primary-500 shadow-sm'
                     : isCurrent
-                      ? 'bg-white dark:bg-neutral-900 ring-1 ring-primary-200 shadow-sm'
-                      : 'bg-white dark:bg-neutral-900 ring-1 ring-neutral-950/5 shadow-sm'
+                      ? 'bg-surface ring-1 ring-primary-200 shadow-sm'
+                      : 'bg-surface ring-1 ring-neutral-950/5 shadow-sm'
                 }`}>
                 <div className="flex items-start gap-4">
                   <div
                     className={`flex h-12 w-12 min-h-12 min-w-12 flex-shrink-0 items-center justify-center rounded-full ${
                       plan.recommended
-                        ? 'bg-primary-600 text-white'
+                        ? 'bg-primary-600 text-content-inverted'
                         : isCurrent
                           ? 'bg-primary-100 dark:bg-primary-500/20 text-primary-700 dark:text-primary-300'
-                          : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-200'
+                          : 'bg-surface-subtle text-content-secondary'
                     }`}>
                     {plan.tier === 'PRO' ? (
                       <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
@@ -177,11 +177,11 @@ const SubscriptionPlans = ({
 
                   <div>
                     <div className="flex flex-wrap items-center gap-2">
-                      <h4 className="font-headline text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50">
+                      <h4 className="font-headline text-xl font-bold tracking-tight text-content">
                         {plan.name}
                       </h4>
                       {isPopular && (
-                        <span className="rounded-full bg-primary-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.24em] text-white">
+                        <span className="rounded-full bg-primary-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.24em] text-content-inverted">
                           {t('settings.billing.subscription.popular')}
                         </span>
                       )}
@@ -195,7 +195,7 @@ const SubscriptionPlans = ({
                       {plan.features.slice(0, 4).map(feature => (
                         <span
                           key={feature.text}
-                          className="rounded-full bg-neutral-100/50 border border-primary-200 dark:border-primary-500/30 px-3 py-1 text-xs font-medium text-neutral-600 dark:text-neutral-300">
+                          className="rounded-full bg-surface-subtle/50 border border-primary-200 dark:border-primary-500/30 px-3 py-1 text-xs font-medium text-content-secondary">
                           {feature.text}
                         </span>
                       ))}
@@ -205,16 +205,16 @@ const SubscriptionPlans = ({
 
                 <div className="flex items-end justify-between gap-2 sm:min-w-[148px] sm:flex-col sm:items-end">
                   <div className="text-right">
-                    <p className="text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50">
+                    <p className="text-2xl font-bold tracking-tight text-content">
                       {displayPrice(plan, billingInterval)}
                       {plan.tier !== 'FREE' && (
-                        <span className="text-sm font-medium text-neutral-400 dark:text-neutral-500">
+                        <span className="text-sm font-medium text-content-faint">
                           {t('settings.billing.subscription.perMonth')}
                         </span>
                       )}
                     </p>
                     {plan.tier !== 'FREE' && billingInterval === 'annual' && (
-                      <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                      <p className="mt-1 text-xs text-content-muted">
                         {t('settings.billing.subscription.billedAnnually').replace(
                           '{price}',
                           String(plan.annualPrice)
@@ -229,7 +229,7 @@ const SubscriptionPlans = ({
                   </div>
 
                   {isCurrent ? (
-                    <div className="rounded-full bg-primary-600 px-4 py-2 text-xs font-semibold text-white">
+                    <div className="rounded-full bg-primary-600 px-4 py-2 text-xs font-semibold text-content-inverted">
                       {t('settings.billing.subscription.currentPlan')}
                     </div>
                   ) : isUpgrade ? (
@@ -238,8 +238,8 @@ const SubscriptionPlans = ({
                       disabled={isPurchasing}
                       className={`rounded-full px-4 py-2 text-xs font-semibold transition-colors ${
                         isPurchasing
-                          ? 'cursor-not-allowed bg-neutral-200 dark:bg-neutral-800 text-neutral-400 dark:text-neutral-500'
-                          : 'bg-neutral-900 dark:bg-neutral-50 text-white hover:bg-primary-600'
+                          ? 'cursor-not-allowed bg-surface-strong text-content-faint'
+                          : 'bg-neutral-900 dark:bg-neutral-50 text-content-inverted hover:bg-primary-600'
                       }`}>
                       {isThisPurchasing
                         ? t('settings.billing.subscription.waiting')
diff --git a/app/src/components/settings/panels/cron/CoreJobList.tsx b/app/src/components/settings/panels/cron/CoreJobList.tsx
index 8adc3fafb..ef32627fb 100644
--- a/app/src/components/settings/panels/cron/CoreJobList.tsx
+++ b/app/src/components/settings/panels/cron/CoreJobList.tsx
@@ -49,26 +49,18 @@ const CoreJobList = ({
     coreBusyKey === `core-remove:${jobId}` ? t('settings.cron.jobs.removing') : t('common.remove');
 
   return (
-    <section className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
-      <div className="p-4 border-b border-stone-200 dark:border-neutral-800">
-        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
-          {t('settings.cron.jobs.title')}
-        </h3>
-        <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
-          {t('settings.cron.jobs.desc')}
-        </p>
+    <section className="rounded-xl border border-line bg-surface">
+      <div className="p-4 border-b border-line">
+        <h3 className="text-sm font-semibold text-content">{t('settings.cron.jobs.title')}</h3>
+        <p className="text-xs text-content-muted mt-1">{t('settings.cron.jobs.desc')}</p>
       </div>
 
       {loading && (
-        <div className="p-4 text-sm text-stone-400 dark:text-neutral-500">
-          {t('settings.cron.jobs.loading')}
-        </div>
+        <div className="p-4 text-sm text-content-faint">{t('settings.cron.jobs.loading')}</div>
       )}
 
       {!loading && coreJobs.length === 0 && (
-        <div className="p-4 text-sm text-stone-400 dark:text-neutral-500">
-          {t('settings.cron.jobs.empty')}
-        </div>
+        <div className="p-4 text-sm text-content-faint">{t('settings.cron.jobs.empty')}</div>
       )}
 
       {!loading &&
@@ -78,28 +70,26 @@ const CoreJobList = ({
             <div
               key={job.id}
               data-testid={`cron-job-row-${job.id}`}
-              className={`p-4 ${index === 0 ? '' : 'border-t border-stone-200 dark:border-neutral-800'} space-y-3`}>
+              className={`p-4 ${index === 0 ? '' : 'border-t border-line'} space-y-3`}>
               <div className="flex items-start justify-between gap-3">
                 <div>
-                  <div className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
-                    {job.name || job.id}
-                  </div>
-                  <div className="text-[11px] text-stone-400 dark:text-neutral-500">{job.id}</div>
+                  <div className="text-sm font-semibold text-content">{job.name || job.id}</div>
+                  <div className="text-[11px] text-content-faint">{job.id}</div>
                 </div>
                 <span
                   className={`px-2 py-1 text-[11px] font-semibold uppercase border rounded-full ${
                     job.enabled
                       ? 'bg-sage-50 dark:bg-sage-500/10 text-sage-700 dark:text-sage-300 border-sage-200 dark:border-sage-500/30'
-                      : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 border-stone-200 dark:border-neutral-800'
+                      : 'bg-surface-subtle text-content-secondary border-line'
                   }`}>
                   {job.enabled ? t('common.enabled') : t('settings.cron.jobs.paused')}
                 </span>
               </div>
 
-              <div className="text-xs text-stone-600 dark:text-neutral-300 space-y-1">
+              <div className="text-xs text-content-secondary space-y-1">
                 <div>
                   {t('settings.cron.jobs.schedule')}{' '}
-                  <span className="font-medium text-stone-700 dark:text-neutral-200">
+                  <span className="font-medium text-content-secondary">
                     {job.schedule.kind === 'cron'
                       ? job.schedule.expr
                       : job.schedule.kind === 'every'
@@ -109,16 +99,14 @@ const CoreJobList = ({
                 </div>
                 <div>
                   {t('settings.cron.jobs.nextRun')}{' '}
-                  <span className="font-medium text-stone-700 dark:text-neutral-200">
+                  <span className="font-medium text-content-secondary">
                     {new Date(job.next_run).toLocaleString()}
                   </span>
                 </div>
                 {job.last_status && (
                   <div>
                     {t('settings.cron.jobs.lastStatus')}{' '}
-                    <span className="font-medium text-stone-700 dark:text-neutral-200">
-                      {job.last_status}
-                    </span>
+                    <span className="font-medium text-content-secondary">{job.last_status}</span>
                   </div>
                 )}
               </div>
@@ -181,16 +169,14 @@ const CoreJobList = ({
               {runs.length > 0 && (
                 <div
                   data-testid={`cron-job-runs-${job.id}`}
-                  className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 space-y-1">
-                  <div className="text-[11px] uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+                  className="rounded-lg border border-line bg-surface-muted p-3 space-y-1">
+                  <div className="text-[11px] uppercase tracking-wide text-content-faint">
                     {t('settings.cron.jobs.recentRuns')}
                   </div>
                   {runs.map(run => (
-                    <div key={run.id} className="text-xs text-stone-600 dark:text-neutral-300">
-                      <span className="font-medium text-stone-700 dark:text-neutral-200">
-                        {run.status}
-                      </span>{' '}
-                      at {new Date(run.finished_at).toLocaleString()}
+                    <div key={run.id} className="text-xs text-content-secondary">
+                      <span className="font-medium text-content-secondary">{run.status}</span> at{' '}
+                      {new Date(run.finished_at).toLocaleString()}
                     </div>
                   ))}
                 </div>
diff --git a/app/src/components/settings/panels/cron/CronJobFormModal.tsx b/app/src/components/settings/panels/cron/CronJobFormModal.tsx
index b8fad8e92..278088b16 100644
--- a/app/src/components/settings/panels/cron/CronJobFormModal.tsx
+++ b/app/src/components/settings/panels/cron/CronJobFormModal.tsx
@@ -291,10 +291,10 @@ const CronJobFormModal = ({
       />
 
       {/* Card */}
-      <div className="relative z-10 w-full max-w-lg bg-white dark:bg-neutral-900 rounded-2xl shadow-xl border border-stone-200 dark:border-neutral-800 flex flex-col max-h-[90vh] overflow-hidden">
+      <div className="relative z-10 w-full max-w-lg bg-surface rounded-2xl shadow-xl border border-line flex flex-col max-h-[90vh] overflow-hidden">
         {/* Header */}
-        <div className="px-6 py-4 border-b border-stone-200 dark:border-neutral-800 flex items-center justify-between">
-          <h2 className="text-base font-semibold text-stone-900 dark:text-neutral-100">{title}</h2>
+        <div className="px-6 py-4 border-b border-line flex items-center justify-between">
+          <h2 className="text-base font-semibold text-content">{title}</h2>
           <Button
             type="button"
             variant="tertiary"
@@ -303,7 +303,7 @@ const CronJobFormModal = ({
             aria-label={t('settings.cron.jobs.formCancel')}
             data-testid="cron-form-cancel"
             onClick={onClose}
-            className="text-xl leading-none text-stone-400 hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300">
+            className="text-xl leading-none text-content-faint hover:text-content-secondary">
             &times;
           </Button>
         </div>
@@ -312,7 +312,7 @@ const CronJobFormModal = ({
         <div className="overflow-y-auto px-6 py-4 flex flex-col gap-4">
           {/* Name */}
           <div>
-            <label className="block text-xs font-medium text-stone-700 dark:text-neutral-300 mb-1">
+            <label className="block text-xs font-medium text-content-secondary mb-1">
               {t('settings.cron.jobs.formName')}
             </label>
             <input
@@ -322,17 +322,17 @@ const CronJobFormModal = ({
               onChange={e => setName(e.target.value)}
               placeholder={t('settings.cron.jobs.formNamePlaceholder')}
               disabled={saving}
-              className="w-full rounded-md border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
+              className="w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
             />
           </div>
 
           {/* Job type */}
           <div>
-            <div className="text-xs font-medium text-stone-700 dark:text-neutral-300 mb-1.5">
+            <div className="text-xs font-medium text-content-secondary mb-1.5">
               {t('settings.cron.jobs.formJobType')}
             </div>
             <div className="flex gap-4">
-              <label className="flex items-center gap-2 text-sm text-stone-700 dark:text-neutral-300 cursor-pointer">
+              <label className="flex items-center gap-2 text-sm text-content-secondary cursor-pointer">
                 <input
                   data-testid="cron-form-job-type-agent"
                   type="radio"
@@ -345,7 +345,7 @@ const CronJobFormModal = ({
                 />
                 {t('settings.cron.jobs.formJobTypeAgent')}
               </label>
-              <label className="flex items-center gap-2 text-sm text-stone-700 dark:text-neutral-300 cursor-pointer">
+              <label className="flex items-center gap-2 text-sm text-content-secondary cursor-pointer">
                 <input
                   data-testid="cron-form-job-type-shell"
                   type="radio"
@@ -363,11 +363,11 @@ const CronJobFormModal = ({
 
           {/* Schedule type */}
           <div>
-            <div className="text-xs font-medium text-stone-700 dark:text-neutral-300 mb-1.5">
+            <div className="text-xs font-medium text-content-secondary mb-1.5">
               {t('settings.cron.jobs.formScheduleType')}
             </div>
             <div className="flex gap-4">
-              <label className="flex items-center gap-2 text-sm text-stone-700 dark:text-neutral-300 cursor-pointer">
+              <label className="flex items-center gap-2 text-sm text-content-secondary cursor-pointer">
                 <input
                   data-testid="cron-form-schedule-cron"
                   type="radio"
@@ -380,7 +380,7 @@ const CronJobFormModal = ({
                 />
                 {t('settings.cron.jobs.formScheduleCron')}
               </label>
-              <label className="flex items-center gap-2 text-sm text-stone-700 dark:text-neutral-300 cursor-pointer">
+              <label className="flex items-center gap-2 text-sm text-content-secondary cursor-pointer">
                 <input
                   data-testid="cron-form-schedule-at"
                   type="radio"
@@ -393,7 +393,7 @@ const CronJobFormModal = ({
                 />
                 {t('settings.cron.jobs.formScheduleAt')}
               </label>
-              <label className="flex items-center gap-2 text-sm text-stone-700 dark:text-neutral-300 cursor-pointer">
+              <label className="flex items-center gap-2 text-sm text-content-secondary cursor-pointer">
                 <input
                   data-testid="cron-form-schedule-every"
                   type="radio"
@@ -414,7 +414,7 @@ const CronJobFormModal = ({
             <div className="flex flex-col gap-2">
               {/* Preset dropdown */}
               <div>
-                <label className="block text-xs font-medium text-stone-700 dark:text-neutral-300 mb-1">
+                <label className="block text-xs font-medium text-content-secondary mb-1">
                   {t('settings.cron.jobs.formCronPreset')}
                 </label>
                 <select
@@ -430,7 +430,7 @@ const CronJobFormModal = ({
                     }
                   }}
                   disabled={saving}
-                  className="w-full rounded-md border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50">
+                  className="w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-content focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50">
                   <option value="">{t('settings.cron.jobs.custom')}</option>
                   {SCHEDULE_PRESETS.map(p => (
                     <option key={p.value} value={p.value}>
@@ -443,7 +443,7 @@ const CronJobFormModal = ({
               {/* Custom expression — shown when no preset selected or user typed */}
               {(!SCHEDULE_PRESET_VALUES.has(cronPreset) || cronCustom) && (
                 <div>
-                  <label className="block text-xs font-medium text-stone-700 dark:text-neutral-300 mb-1">
+                  <label className="block text-xs font-medium text-content-secondary mb-1">
                     {t('settings.cron.jobs.formCronCustom')}
                   </label>
                   <input
@@ -462,16 +462,14 @@ const CronJobFormModal = ({
                     }}
                     placeholder={t('settings.cron.jobs.formCronCustomPlaceholder')}
                     disabled={saving}
-                    className="w-full rounded-md border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm font-mono text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
+                    className="w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm font-mono text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
                   />
                 </div>
               )}
 
               {/* Live preview */}
               {cronExpr && (
-                <p
-                  data-testid="cron-form-cron-preview"
-                  className="text-xs text-stone-500 dark:text-neutral-400">
+                <p data-testid="cron-form-cron-preview" className="text-xs text-content-muted">
                   {t('settings.cron.jobs.formCronPreview').replace(
                     '{preview}',
                     cronToHuman(cronExpr)
@@ -484,7 +482,7 @@ const CronJobFormModal = ({
           {/* At */}
           {scheduleKind === 'at' && (
             <div>
-              <label className="block text-xs font-medium text-stone-700 dark:text-neutral-300 mb-1">
+              <label className="block text-xs font-medium text-content-secondary mb-1">
                 {t('settings.cron.jobs.formAtLabel')}
               </label>
               <input
@@ -493,7 +491,7 @@ const CronJobFormModal = ({
                 value={atValue}
                 onChange={e => setAtValue(e.target.value)}
                 disabled={saving}
-                className="w-full rounded-md border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
+                className="w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-content focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
               />
             </div>
           )}
@@ -501,7 +499,7 @@ const CronJobFormModal = ({
           {/* Every */}
           {scheduleKind === 'every' && (
             <div>
-              <label className="block text-xs font-medium text-stone-700 dark:text-neutral-300 mb-1">
+              <label className="block text-xs font-medium text-content-secondary mb-1">
                 {t('settings.cron.jobs.formEveryLabel')}
               </label>
               <input
@@ -512,7 +510,7 @@ const CronJobFormModal = ({
                 onChange={e => setEveryMs(e.target.value)}
                 disabled={saving}
                 placeholder={t('settings.cron.jobs.formEveryPlaceholder')}
-                className="w-full rounded-md border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
+                className="w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
               />
             </div>
           )}
@@ -520,7 +518,7 @@ const CronJobFormModal = ({
           {/* Prompt (agent only) */}
           {jobType === 'agent' && (
             <div>
-              <label className="block text-xs font-medium text-stone-700 dark:text-neutral-300 mb-1">
+              <label className="block text-xs font-medium text-content-secondary mb-1">
                 {t('settings.cron.jobs.formPrompt')}
                 <span className="text-coral-500 ml-0.5">*</span>
               </label>
@@ -531,7 +529,7 @@ const CronJobFormModal = ({
                 placeholder={t('settings.cron.jobs.formPromptPlaceholder')}
                 rows={4}
                 disabled={saving}
-                className="w-full rounded-md border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 resize-y"
+                className="w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 resize-y"
               />
             </div>
           )}
@@ -539,7 +537,7 @@ const CronJobFormModal = ({
           {/* Command (shell only) */}
           {jobType === 'shell' && (
             <div>
-              <label className="block text-xs font-medium text-stone-700 dark:text-neutral-300 mb-1">
+              <label className="block text-xs font-medium text-content-secondary mb-1">
                 {t('settings.cron.jobs.formCommand')}
                 <span className="text-coral-500 ml-0.5">*</span>
               </label>
@@ -550,7 +548,7 @@ const CronJobFormModal = ({
                 onChange={e => setCommand(e.target.value)}
                 placeholder={t('settings.cron.jobs.formCommandPlaceholder')}
                 disabled={saving}
-                className="w-full rounded-md border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm font-mono text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
+                className="w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm font-mono text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
               />
             </div>
           )}
@@ -558,7 +556,7 @@ const CronJobFormModal = ({
           {/* Session target (agent only) */}
           {jobType === 'agent' && (
             <div>
-              <label className="block text-xs font-medium text-stone-700 dark:text-neutral-300 mb-1">
+              <label className="block text-xs font-medium text-content-secondary mb-1">
                 {t('settings.cron.jobs.formSessionTarget')}
               </label>
               <select
@@ -566,7 +564,7 @@ const CronJobFormModal = ({
                 value={sessionTarget}
                 onChange={e => setSessionTarget(e.target.value as SessionTarget)}
                 disabled={saving}
-                className="w-full rounded-md border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50">
+                className="w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-content focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50">
                 <option value="isolated">{t('settings.cron.jobs.formSessionIsolated')}</option>
                 <option value="main">{t('settings.cron.jobs.formSessionMain')}</option>
               </select>
@@ -576,7 +574,7 @@ const CronJobFormModal = ({
           {/* Delivery mode (agent only) */}
           {jobType === 'agent' && (
             <div>
-              <label className="block text-xs font-medium text-stone-700 dark:text-neutral-300 mb-1">
+              <label className="block text-xs font-medium text-content-secondary mb-1">
                 {t('settings.cron.jobs.formDelivery')}
               </label>
               <select
@@ -584,7 +582,7 @@ const CronJobFormModal = ({
                 value={delivery}
                 onChange={e => setDelivery(e.target.value as DeliveryMode)}
                 disabled={saving}
-                className="w-full rounded-md border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50">
+                className="w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-content focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50">
                 <option value="proactive">{t('settings.cron.jobs.formDeliveryProactive')}</option>
                 <option value="none">{t('settings.cron.jobs.formDeliveryNone')}</option>
               </select>
@@ -592,7 +590,7 @@ const CronJobFormModal = ({
           )}
 
           {/* Delete after run */}
-          <label className="flex items-center gap-2 text-sm text-stone-700 dark:text-neutral-300 cursor-pointer select-none">
+          <label className="flex items-center gap-2 text-sm text-content-secondary cursor-pointer select-none">
             <input
               data-testid="cron-form-delete-after-run"
               type="checkbox"
@@ -615,7 +613,7 @@ const CronJobFormModal = ({
         </div>
 
         {/* Footer */}
-        <div className="px-6 py-4 border-t border-stone-200 dark:border-neutral-800 flex items-center justify-end gap-3">
+        <div className="px-6 py-4 border-t border-line flex items-center justify-end gap-3">
           <Button
             type="button"
             variant="secondary"
diff --git a/app/src/components/settings/panels/devices/PairPhoneModal.tsx b/app/src/components/settings/panels/devices/PairPhoneModal.tsx
index 75bb4cfc3..b9a1a4aac 100644
--- a/app/src/components/settings/panels/devices/PairPhoneModal.tsx
+++ b/app/src/components/settings/panels/devices/PairPhoneModal.tsx
@@ -184,12 +184,10 @@ const PairPhoneModal = ({ onClose, onPaired }: PairPhoneModalProps) => {
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/30">
-      <div className="bg-white dark:bg-neutral-900 rounded-2xl max-w-sm w-full border border-neutral-200 dark:border-neutral-800 shadow-large overflow-hidden">
+      <div className="bg-surface rounded-2xl max-w-sm w-full border border-line shadow-large overflow-hidden">
         {/* Header — keep modal structure intact */}
-        <div className="flex items-center justify-between px-5 pt-5 pb-3 border-b border-neutral-100 dark:border-neutral-800">
-          <h3 className="text-base font-semibold text-neutral-800 dark:text-neutral-100">
-            {t('devices.pairModal.title')}
-          </h3>
+        <div className="flex items-center justify-between px-5 pt-5 pb-3 border-b border-line-subtle">
+          <h3 className="text-base font-semibold text-content">{t('devices.pairModal.title')}</h3>
           <Button
             type="button"
             variant="tertiary"
@@ -198,7 +196,7 @@ const PairPhoneModal = ({ onClose, onPaired }: PairPhoneModalProps) => {
             aria-label={t('common.close')}
             className="w-6 h-6 rounded-full p-0">
             <svg
-              className="w-4 h-4 text-neutral-500"
+              className="w-4 h-4 text-content-muted"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24">
@@ -279,9 +277,7 @@ function LoadingBody() {
           d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
         />
       </svg>
-      <p className="text-sm text-neutral-500 dark:text-neutral-400">
-        {t('devices.pairModal.loading')}
-      </p>
+      <p className="text-sm text-content-muted">{t('devices.pairModal.loading')}</p>
     </div>
   );
 }
@@ -303,16 +299,16 @@ function QrBody({
 
   return (
     <div className="flex flex-col items-center gap-4">
-      <p className="text-sm text-neutral-600 dark:text-neutral-300 text-center">
+      <p className="text-sm text-content-secondary text-center">
         {t('devices.pairModal.instructions')}
       </p>
 
       {/* QR code */}
-      <div className="p-3 bg-white dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 shadow-sm">
+      <div className="p-3 bg-surface rounded-xl border border-line shadow-sm">
         <QRCodeSVG value={qrUrl} size={200} level="M" bgColor="#ffffff" fgColor="#1c1917" />
       </div>
 
-      <p className="text-xs text-neutral-400 dark:text-neutral-500">
+      <p className="text-xs text-content-faint">
         {t(
           minutesLeft === 1 ? 'devices.pairModal.expiresIn' : 'devices.pairModal.expiresInPlural'
         ).replace('{count}', String(minutesLeft))}
@@ -331,19 +327,19 @@ function QrBody({
       {showDetails && (
         <div className="w-full space-y-2">
           <div>
-            <p className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+            <p className="text-xs font-medium text-content-muted mb-1">
               {t('devices.pairModal.channelId')}
             </p>
-            <p className="text-xs font-mono text-neutral-700 dark:text-neutral-200 bg-neutral-50 dark:bg-neutral-800 rounded px-2 py-1 break-all select-all">
+            <p className="text-xs font-mono text-content-secondary bg-surface-muted rounded px-2 py-1 break-all select-all">
               {session.channel_id}
             </p>
           </div>
           <div>
-            <p className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+            <p className="text-xs font-medium text-content-muted mb-1">
               {t('devices.pairModal.pairingUrl')}
             </p>
             <div className="relative">
-              <p className="text-xs font-mono text-neutral-700 dark:text-neutral-200 bg-neutral-50 dark:bg-neutral-800 rounded px-2 py-1 break-all select-all pr-16">
+              <p className="text-xs font-mono text-content-secondary bg-surface-muted rounded px-2 py-1 break-all select-all pr-16">
                 {qrUrl}
               </p>
               <Button
@@ -353,7 +349,7 @@ function QrBody({
                 onClick={() => {
                   void navigator.clipboard.writeText(qrUrl);
                 }}
-                className="absolute top-1 right-1 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700">
+                className="absolute top-1 right-1 bg-surface border border-line dark:border-line-strong">
                 {t('devices.pairModal.copyUrl')}
               </Button>
             </div>
@@ -382,12 +378,10 @@ function ExpiredBody({ onRegenerate }: { onRegenerate: () => void }) {
           />
         </svg>
       </div>
-      <p className="text-sm font-medium text-neutral-700 dark:text-neutral-200">
+      <p className="text-sm font-medium text-content-secondary">
         {t('devices.pairModal.expiredTitle')}
       </p>
-      <p className="text-xs text-neutral-500 dark:text-neutral-400 text-center">
-        {t('devices.pairModal.expiredBody')}
-      </p>
+      <p className="text-xs text-content-muted text-center">{t('devices.pairModal.expiredBody')}</p>
       <Button type="button" variant="primary" size="md" onClick={onRegenerate}>
         {t('devices.pairModal.generateNewCode')}
       </Button>
@@ -409,17 +403,13 @@ function SuccessBody({ label, channelId }: { label: string; channelId: string })
         </svg>
       </div>
       <div className="text-center">
-        <p className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
-          {t('devices.pairModal.successTitle')}
-        </p>
-        <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">{label}</p>
-        <p className="text-xs font-mono text-neutral-400 dark:text-neutral-500 mt-0.5">
+        <p className="text-sm font-medium text-content">{t('devices.pairModal.successTitle')}</p>
+        <p className="text-xs text-content-muted mt-1">{label}</p>
+        <p className="text-xs font-mono text-content-faint mt-0.5">
           {channelId.slice(0, 8)}…{channelId.slice(-6)}
         </p>
       </div>
-      <p className="text-xs text-neutral-400 dark:text-neutral-500">
-        {t('devices.pairModal.autoClose')}
-      </p>
+      <p className="text-xs text-content-faint">{t('devices.pairModal.autoClose')}</p>
     </div>
   );
 }
@@ -442,12 +432,10 @@ function ErrorBody({ message, onRetry }: { message: string; onRetry: () => void
           />
         </svg>
       </div>
-      <p className="text-sm font-medium text-neutral-700 dark:text-neutral-200">
+      <p className="text-sm font-medium text-content-secondary">
         {t('devices.pairModal.errorTitle')}
       </p>
-      <p className="text-xs text-neutral-500 dark:text-neutral-400 text-center break-all">
-        {message}
-      </p>
+      <p className="text-xs text-content-muted text-center break-all">{message}</p>
       <Button type="button" variant="primary" size="md" onClick={onRetry}>
         {t('common.retry')}
       </Button>
diff --git a/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx b/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx
index fe06d7f85..a14869c28 100644
--- a/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx
+++ b/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx
@@ -78,12 +78,12 @@ const DeviceCapabilitySection = ({
 
   return (
     <section className="space-y-3">
-      <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+      <h3 className="text-sm font-semibold text-content">
         {t('settings.localModel.deviceCapability.modelTier')}
       </h3>
 
       {presetsLoading && !presetsData && (
-        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 text-sm text-stone-500 dark:text-neutral-400 animate-pulse">
+        <div className="bg-surface-muted rounded-lg border border-line p-4 text-sm text-content-muted animate-pulse">
           {t('settings.localModel.deviceCapability.loadingDeviceInfo')}
         </div>
       )}
@@ -94,22 +94,22 @@ const DeviceCapabilitySection = ({
       )}
 
       {presetsData?.device && (
-        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-3">
+        <div className="bg-surface-muted rounded-lg border border-line p-3">
           <div className="grid grid-cols-3 gap-3 text-xs">
             <div>
-              <div className="text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
+              <div className="text-content-muted uppercase tracking-wide">
                 {t('settings.localModel.deviceCapability.ram')}
               </div>
-              <div className="text-stone-800 dark:text-neutral-100 mt-0.5 font-medium">
+              <div className="text-content mt-0.5 font-medium">
                 {formatRamGb(presetsData.device.total_ram_bytes)}
               </div>
             </div>
             <div>
-              <div className="text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
+              <div className="text-content-muted uppercase tracking-wide">
                 {t('settings.localModel.deviceCapability.cpu')}
               </div>
               <div
-                className="text-stone-800 dark:text-neutral-100 mt-0.5 font-medium truncate"
+                className="text-content mt-0.5 font-medium truncate"
                 title={presetsData.device.cpu_brand}>
                 {t('settings.localModel.deviceCapability.cores').replace(
                   '{count}',
@@ -118,11 +118,11 @@ const DeviceCapabilitySection = ({
               </div>
             </div>
             <div>
-              <div className="text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
+              <div className="text-content-muted uppercase tracking-wide">
                 {t('settings.localModel.deviceCapability.gpu')}
               </div>
               <div
-                className="text-stone-800 dark:text-neutral-100 mt-0.5 font-medium truncate"
+                className="text-content mt-0.5 font-medium truncate"
                 title={presetsData.device.gpu_description ?? undefined}>
                 {presetsData.device.has_gpu
                   ? (presetsData.device.gpu_description ??
@@ -228,11 +228,11 @@ const DeviceCapabilitySection = ({
             className={`w-full text-left rounded-lg border p-3 transition-colors ${
               isDisabledActive
                 ? 'border-primary-400 bg-primary-50 dark:bg-primary-500/10'
-                : 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800'
+                : 'border-line bg-surface-muted hover:bg-surface-hover dark:bg-surface-muted'
             } ${applying !== null ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}`}>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <span className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                <span className="text-sm font-semibold text-content">
                   {t('settings.localModel.deviceCapability.disabled')}
                 </span>
                 {isDisabledActive && (
@@ -246,9 +246,9 @@ const DeviceCapabilitySection = ({
                   </span>
                 )}
               </div>
-              <span className="text-xs text-stone-500 dark:text-neutral-400">0 GB</span>
+              <span className="text-xs text-content-muted">0 GB</span>
             </div>
-            <div className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
+            <div className="text-xs text-content-muted mt-1">
               {t('settings.localModel.deviceCapability.disabledDesc')}
             </div>
           </button>
@@ -269,26 +269,24 @@ const DeviceCapabilitySection = ({
                 className={`w-full text-left rounded-lg border p-3 transition-colors ${
                   isCurrent
                     ? 'border-primary-400 bg-primary-50 dark:bg-primary-500/10'
-                    : 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800'
+                    : 'border-line bg-surface-muted hover:bg-surface-hover dark:bg-surface-muted'
                 } ${
                   locked
-                    ? 'opacity-50 cursor-not-allowed hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60'
+                    ? 'opacity-50 cursor-not-allowed hover:bg-surface-hover dark:bg-surface-muted/60'
                     : applying !== null && !isApplying
                       ? 'opacity-60 cursor-not-allowed'
                       : 'cursor-pointer'
                 }`}>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
-                      {preset.label}
-                    </span>
+                    <span className="text-sm font-semibold text-content">{preset.label}</span>
                     {isCurrent && (
                       <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-primary-50 dark:bg-primary-500/10 text-primary-600 dark:text-primary-300 uppercase tracking-wide">
                         {t('settings.localModel.deviceCapability.active')}
                       </span>
                     )}
                     {isApplying && (
-                      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
+                      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-surface-subtle text-content-muted uppercase tracking-wide">
                         {t('settings.localModel.deviceCapability.applying')}
                       </span>
                     )}
@@ -298,14 +296,12 @@ const DeviceCapabilitySection = ({
                       </span>
                     )}
                   </div>
-                  <span className="text-xs text-stone-500 dark:text-neutral-400">
+                  <span className="text-xs text-content-muted">
                     ~{Number(preset.approx_download_gb).toFixed(1)} GB
                   </span>
                 </div>
-                <div className="text-xs text-stone-400 dark:text-neutral-500 mt-1">
-                  {preset.description}
-                </div>
-                <div className="text-[10px] text-stone-500 dark:text-neutral-400 mt-1">
+                <div className="text-xs text-content-faint mt-1">{preset.description}</div>
+                <div className="text-[10px] text-content-muted mt-1">
                   {t('settings.localModel.deviceCapability.presetDetails')
                     .replace('{chatModel}', preset.chat_model_id)
                     .replace(
diff --git a/app/src/components/settings/panels/local-model/ModelDownloadSection.tsx b/app/src/components/settings/panels/local-model/ModelDownloadSection.tsx
index f5d31dff0..0852e15d2 100644
--- a/app/src/components/settings/panels/local-model/ModelDownloadSection.tsx
+++ b/app/src/components/settings/panels/local-model/ModelDownloadSection.tsx
@@ -122,30 +122,26 @@ const ModelDownloadSection = ({
     <>
       <SettingsSection title={t('settings.localModel.download.capabilityAssets')}>
         <div className="px-4 py-3 space-y-3">
-          <div className="text-xs text-neutral-500 dark:text-neutral-400">
+          <div className="text-xs text-content-muted">
             {t('settings.localModel.download.quantizationPref')} {assets?.quantization ?? 'q4'}
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
             {capabilityCards.map(([labelKey, key, item]) => (
-              <div
-                key={key}
-                className="rounded-md border border-neutral-200 dark:border-neutral-800 p-2">
-                <div className="text-neutral-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
+              <div key={key} className="rounded-md border border-line p-2">
+                <div className="text-content-muted text-xs uppercase tracking-wide">
                   {t(labelKey)}
                 </div>
-                <div className="text-neutral-800 dark:text-neutral-100 mt-1 break-all">
+                <div className="text-content mt-1 break-all">
                   {item?.id ?? t('settings.localModel.download.notAvailable')}
                 </div>
                 <div className={`text-xs mt-1 ${statusTone(item?.state ?? 'idle')}`}>
                   {statusLabel(item?.state ?? 'idle')}
                 </div>
                 {item?.path && (
-                  <div className="text-[10px] text-neutral-500 dark:text-neutral-400 mt-1 break-all">
-                    {item.path}
-                  </div>
+                  <div className="text-[10px] text-content-muted mt-1 break-all">{item.path}</div>
                 )}
                 {item?.provider === 'ollama' || item?.provider === 'lm_studio' ? (
-                  <div className="mt-2 text-[10px] text-neutral-500 dark:text-neutral-400">
+                  <div className="mt-2 text-[10px] text-content-muted">
                     {t('settings.localModel.download.manageExternal')}
                   </div>
                 ) : (
@@ -177,7 +173,7 @@ const ModelDownloadSection = ({
             aria-label={t('settings.localModel.download.testSummarization')}
           />
           <div className="flex items-center justify-between">
-            <div className="text-xs text-neutral-500 dark:text-neutral-400">
+            <div className="text-xs text-content-muted">
               {t('settings.localModel.download.summaryHelper')}
             </div>
             <Button
@@ -192,7 +188,7 @@ const ModelDownloadSection = ({
             </Button>
           </div>
           {summaryOutput && (
-            <pre className="whitespace-pre-wrap rounded-md bg-neutral-50 dark:bg-neutral-800/60 border border-neutral-200 dark:border-neutral-800 p-3 text-xs text-neutral-700 dark:text-neutral-200">
+            <pre className="whitespace-pre-wrap rounded-md bg-surface-muted border border-line p-3 text-xs text-content-secondary">
               {summaryOutput}
             </pre>
           )}
@@ -209,12 +205,12 @@ const ModelDownloadSection = ({
             aria-label={t('settings.localModel.download.testCustomPrompt')}
           />
           <div className="flex flex-wrap items-center justify-between gap-2">
-            <label className="flex items-center gap-2 text-xs text-neutral-700 dark:text-neutral-200">
+            <label className="flex items-center gap-2 text-xs text-content-secondary">
               <input
                 type="checkbox"
                 checked={promptNoThink}
                 onChange={e => onSetPromptNoThink(e.target.checked)}
-                className="h-3.5 w-3.5 rounded border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-primary-500 focus:ring-primary-500"
+                className="h-3.5 w-3.5 rounded border-line-strong bg-surface text-primary-500 focus:ring-primary-500"
               />
               {t('settings.localModel.download.noThinkMode')}
             </label>
@@ -237,7 +233,7 @@ const ModelDownloadSection = ({
           )}
           {promptError && <SettingsStatusLine saving={false} error={promptError} savingLabel="" />}
           {promptOutput && (
-            <pre className="whitespace-pre-wrap rounded-md bg-neutral-50 dark:bg-neutral-800/60 border border-neutral-200 dark:border-neutral-800 p-3 text-xs text-neutral-700 dark:text-neutral-200 max-h-64 overflow-auto">
+            <pre className="whitespace-pre-wrap rounded-md bg-surface-muted border border-line p-3 text-xs text-content-secondary max-h-64 overflow-auto">
               {promptOutput}
             </pre>
           )}
@@ -276,7 +272,7 @@ const ModelDownloadSection = ({
               : t('settings.localModel.download.runVisionTest')}
           </Button>
           {visionOutput && (
-            <pre className="whitespace-pre-wrap rounded-md bg-neutral-50 dark:bg-neutral-800/60 border border-neutral-200 dark:border-neutral-800 p-3 text-xs text-neutral-700 dark:text-neutral-200">
+            <pre className="whitespace-pre-wrap rounded-md bg-surface-muted border border-line p-3 text-xs text-content-secondary">
               {visionOutput}
             </pre>
           )}
@@ -303,7 +299,7 @@ const ModelDownloadSection = ({
               : t('settings.localModel.download.runEmbeddingTest')}
           </Button>
           {embeddingOutput && (
-            <div className="rounded-md bg-neutral-50 dark:bg-neutral-800/60 border border-neutral-200 dark:border-neutral-800 p-3 text-xs text-neutral-700 dark:text-neutral-200 space-y-1">
+            <div className="rounded-md bg-surface-muted border border-line p-3 text-xs text-content-secondary space-y-1">
               <div>
                 {t('settings.localModel.download.embeddingModel').replace(
                   '{modelId}',
@@ -346,7 +342,7 @@ const ModelDownloadSection = ({
               : t('settings.localModel.download.runTranscriptionTest')}
           </Button>
           {transcribeOutput && (
-            <div className="rounded-md bg-neutral-50 dark:bg-neutral-800/60 border border-neutral-200 dark:border-neutral-800 p-3 text-xs text-neutral-700 dark:text-neutral-200 space-y-2">
+            <div className="rounded-md bg-surface-muted border border-line p-3 text-xs text-content-secondary space-y-2">
               <div>
                 {t('settings.localModel.download.embeddingModel').replace(
                   '{modelId}',
@@ -354,7 +350,7 @@ const ModelDownloadSection = ({
                 )}
               </div>
               <div>
-                <span className="text-neutral-500 dark:text-neutral-400">
+                <span className="text-content-muted">
                   {t('settings.localModel.download.transcript')}
                 </span>
                 <pre className="whitespace-pre-wrap mt-1">{transcribeOutput.text}</pre>
@@ -390,7 +386,7 @@ const ModelDownloadSection = ({
               : t('settings.localModel.download.runTtsTest')}
           </Button>
           {ttsOutput && (
-            <div className="rounded-md bg-neutral-50 dark:bg-neutral-800/60 border border-neutral-200 dark:border-neutral-800 p-3 text-xs text-neutral-700 dark:text-neutral-200 space-y-1">
+            <div className="rounded-md bg-surface-muted border border-line p-3 text-xs text-content-secondary space-y-1">
               <div>
                 {t('settings.localModel.download.ttsVoice').replace(
                   '{voiceId}',
diff --git a/app/src/components/settings/panels/local-model/ModelStatusSection.tsx b/app/src/components/settings/panels/local-model/ModelStatusSection.tsx
index e93f282fe..600ddee1a 100644
--- a/app/src/components/settings/panels/local-model/ModelStatusSection.tsx
+++ b/app/src/components/settings/panels/local-model/ModelStatusSection.tsx
@@ -54,7 +54,7 @@ const ContextEligibilityBadge = ({
   }
   return (
     <span
-      className="shrink-0 rounded-full bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-[10px] font-medium text-neutral-600 dark:text-neutral-300"
+      className="shrink-0 rounded-full bg-surface-strong dark:bg-neutral-700 px-2 py-0.5 text-[10px] font-medium text-content-secondary"
       title={t('settings.localModel.status.contextUnknownTitle').replace(
         '{required}',
         fmt(eligibility.required)
@@ -244,9 +244,7 @@ const ModelStatusSection = ({
                 {urlValidation.error ?? t('localModel.ollamaServer.validationError')}
               </p>
             )}
-            <p className="text-xs text-neutral-500 dark:text-neutral-400">
-              {t('localModel.ollamaServer.helperText')}
-            </p>
+            <p className="text-xs text-content-muted">{t('localModel.ollamaServer.helperText')}</p>
           </div>
 
           {connectionTestResult !== null && (
@@ -302,7 +300,7 @@ const ModelStatusSection = ({
             </Button>
           </div>
           <div className="flex items-center justify-between text-sm">
-            <span className="text-neutral-500 dark:text-neutral-400">{t('settings.ai.state')}</span>
+            <span className="text-content-muted">{t('settings.ai.state')}</span>
             <span className={`font-medium ${statusTone(status?.state ?? 'idle')}`}>
               {status
                 ? statusLabel(downloads?.state ?? status.state)
@@ -310,7 +308,7 @@ const ModelStatusSection = ({
             </span>
           </div>
 
-          <div className="h-2 rounded-full bg-neutral-200 dark:bg-neutral-800 overflow-hidden">
+          <div className="h-2 rounded-full bg-surface-strong overflow-hidden">
             <div
               className={`h-full bg-gradient-to-r from-blue-500 to-cyan-400 transition-all duration-500 ${
                 isIndeterminateDownload ? 'animate-pulse' : ''
@@ -319,7 +317,7 @@ const ModelStatusSection = ({
             />
           </div>
 
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-content-muted">
             <span>
               {t('settings.localModel.status.progress')}{' '}
               {isInstalling
@@ -328,9 +326,7 @@ const ModelStatusSection = ({
                   ? t('settings.localModel.status.downloadingUnknown')
                   : `${Math.round(progress * 100)}%`}
             </span>
-            {downloadedText && (
-              <span className="text-neutral-700 dark:text-neutral-300">{downloadedText}</span>
-            )}
+            {downloadedText && <span className="text-content-secondary">{downloadedText}</span>}
             {speedText && (
               <span className="text-primary-600 dark:text-primary-300">{speedText}</span>
             )}
@@ -342,48 +338,46 @@ const ModelStatusSection = ({
           </div>
 
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
-            <div className="rounded-md border border-neutral-200 dark:border-neutral-800 p-2">
-              <div className="text-neutral-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
+            <div className="rounded-md border border-line p-2">
+              <div className="text-content-muted text-xs uppercase tracking-wide">
                 {t('settings.localModel.status.provider')}
               </div>
-              <div className="text-neutral-800 dark:text-neutral-100 mt-1">
+              <div className="text-content mt-1">
                 {status?.provider ?? t('settings.localModel.status.notAvailable')}
               </div>
             </div>
-            <div className="rounded-md border border-neutral-200 dark:border-neutral-800 p-2">
-              <div className="text-neutral-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
+            <div className="rounded-md border border-line p-2">
+              <div className="text-content-muted text-xs uppercase tracking-wide">
                 {t('settings.localModel.status.model')}
               </div>
-              <div className="text-neutral-800 dark:text-neutral-100 mt-1">
+              <div className="text-content mt-1">
                 {status?.model_id ?? t('settings.localModel.status.notAvailable')}
               </div>
             </div>
           </div>
 
           <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
-            <div className="rounded-md border border-neutral-200 dark:border-neutral-800 p-2">
-              <div className="text-neutral-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
+            <div className="rounded-md border border-line p-2">
+              <div className="text-content-muted text-xs uppercase tracking-wide">
                 {t('settings.localModel.status.backend')}
               </div>
-              <div className="text-neutral-800 dark:text-neutral-100 mt-1">
-                {status?.active_backend ?? 'cpu'}
-              </div>
+              <div className="text-content mt-1">{status?.active_backend ?? 'cpu'}</div>
             </div>
-            <div className="rounded-md border border-neutral-200 dark:border-neutral-800 p-2">
-              <div className="text-neutral-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
+            <div className="rounded-md border border-line p-2">
+              <div className="text-content-muted text-xs uppercase tracking-wide">
                 {t('settings.localModel.status.lastLatency')}
               </div>
-              <div className="text-neutral-800 dark:text-neutral-100 mt-1">
+              <div className="text-content mt-1">
                 {typeof status?.last_latency_ms === 'number'
                   ? `${status.last_latency_ms} ms`
                   : t('settings.localModel.status.notAvailable')}
               </div>
             </div>
-            <div className="rounded-md border border-neutral-200 dark:border-neutral-800 p-2">
-              <div className="text-neutral-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
+            <div className="rounded-md border border-line p-2">
+              <div className="text-content-muted text-xs uppercase tracking-wide">
                 {t('settings.localModel.status.generationTps')}
               </div>
-              <div className="text-neutral-800 dark:text-neutral-100 mt-1">
+              <div className="text-content mt-1">
                 {typeof status?.gen_toks_per_sec === 'number'
                   ? `${status.gen_toks_per_sec.toFixed(1)} tok/s`
                   : t('settings.localModel.status.notAvailable')}
@@ -392,7 +386,7 @@ const ModelStatusSection = ({
           </div>
 
           {status?.model_path && (
-            <div className="text-xs text-neutral-500 dark:text-neutral-400 break-all">
+            <div className="text-xs text-content-muted break-all">
               {t('settings.localModel.status.artifact')} {status.model_path}
             </div>
           )}
@@ -424,7 +418,7 @@ const ModelStatusSection = ({
                   {status.error_detail}
                 </pre>
               )}
-              <p className="text-xs text-neutral-500 dark:text-neutral-400">
+              <p className="text-xs text-content-muted">
                 {t('settings.localModel.status.installManuallyFrom')}{' '}
                 <a
                   href="https://ollama.com"
@@ -455,7 +449,7 @@ const ModelStatusSection = ({
             </Button>
           </div>
           {!diagnostics && !diagnosticsError && (
-            <p className="text-xs text-neutral-500 dark:text-neutral-400">
+            <p className="text-xs text-content-muted">
               {t('settings.localModel.status.diagnosticsHint')}
             </p>
           )}
@@ -490,8 +484,8 @@ const ModelStatusSection = ({
               </div>
 
               <div className="grid grid-cols-2 gap-2 text-xs">
-                <div className="rounded-md border border-neutral-200 dark:border-neutral-800 p-2">
-                  <div className="text-neutral-500 dark:text-neutral-400 uppercase tracking-wide text-[10px]">
+                <div className="rounded-md border border-line p-2">
+                  <div className="text-content-muted uppercase tracking-wide text-[10px]">
                     {t('settings.localModel.status.server')}
                   </div>
                   <div
@@ -502,18 +496,18 @@ const ModelStatusSection = ({
                   </div>
                   {diagnostics.ollama_base_url && (
                     <div
-                      className="mt-0.5 text-neutral-500 dark:text-neutral-400 truncate text-[10px]"
+                      className="mt-0.5 text-content-muted truncate text-[10px]"
                       title={diagnostics.ollama_base_url}>
                       {diagnostics.ollama_base_url}
                     </div>
                   )}
                 </div>
-                <div className="rounded-md border border-neutral-200 dark:border-neutral-800 p-2">
-                  <div className="text-neutral-500 dark:text-neutral-400 uppercase tracking-wide text-[10px]">
+                <div className="rounded-md border border-line p-2">
+                  <div className="text-content-muted uppercase tracking-wide text-[10px]">
                     {t('settings.localModel.status.binary')}
                   </div>
                   <div
-                    className="mt-1 text-neutral-700 dark:text-neutral-300 truncate"
+                    className="mt-1 text-content-secondary truncate"
                     title={
                       diagnostics.ollama_binary_path ??
                       (diagnostics.ollama_running
@@ -531,7 +525,7 @@ const ModelStatusSection = ({
 
               {diagnostics.installed_models.length > 0 && (
                 <div>
-                  <div className="text-neutral-500 dark:text-neutral-400 uppercase tracking-wide text-[10px] mb-1">
+                  <div className="text-content-muted uppercase tracking-wide text-[10px] mb-1">
                     {t('settings.localModel.status.installedModels')} (
                     {diagnostics.installed_models.length})
                   </div>
@@ -544,20 +538,18 @@ const ModelStatusSection = ({
                           className={`flex items-center justify-between gap-2 rounded border px-2 py-1.5 text-xs ${
                             rejected
                               ? 'border-red-300 dark:border-red-500/40 bg-red-50 dark:bg-red-500/10'
-                              : 'border-neutral-200 dark:border-neutral-800'
+                              : 'border-line'
                           }`}>
                           <span
                             className={`min-w-0 truncate font-medium ${
-                              rejected
-                                ? 'text-red-700 dark:text-red-300'
-                                : 'text-neutral-800 dark:text-neutral-100'
+                              rejected ? 'text-red-700 dark:text-red-300' : 'text-content'
                             }`}
                             title={m.name}>
                             {m.name}
                           </span>
                           <span className="flex shrink-0 items-center gap-2">
                             <ContextEligibilityBadge eligibility={m.eligibility} />
-                            <span className="text-neutral-500 dark:text-neutral-400">
+                            <span className="text-content-muted">
                               {typeof m.size === 'number' ? formatBytes(m.size) : ''}
                             </span>
                           </span>
@@ -569,7 +561,7 @@ const ModelStatusSection = ({
               )}
 
               <div>
-                <div className="text-neutral-500 dark:text-neutral-400 uppercase tracking-wide text-[10px] mb-1">
+                <div className="text-content-muted uppercase tracking-wide text-[10px] mb-1">
                   {t('settings.localModel.status.expectedModels')}
                 </div>
                 <div className="space-y-1 text-xs">
@@ -582,7 +574,7 @@ const ModelStatusSection = ({
                       }>
                       {diagnostics.expected.chat_found ? '✓' : '✗'}
                     </span>
-                    <span className="text-neutral-800 dark:text-neutral-200">
+                    <span className="text-content">
                       {t('settings.localModel.status.expectedChat').replace(
                         '{model}',
                         diagnostics.expected.chat_model
@@ -598,7 +590,7 @@ const ModelStatusSection = ({
                       }>
                       {diagnostics.expected.embedding_found ? '✓' : '✗'}
                     </span>
-                    <span className="text-neutral-800 dark:text-neutral-200">
+                    <span className="text-content">
                       {t('settings.localModel.status.expectedEmbedding').replace(
                         '{model}',
                         diagnostics.expected.embedding_model
@@ -614,7 +606,7 @@ const ModelStatusSection = ({
                       }>
                       {diagnostics.expected.vision_found ? '✓' : '–'}
                     </span>
-                    <span className="text-neutral-800 dark:text-neutral-200">
+                    <span className="text-content">
                       {t('settings.localModel.status.expectedVision').replace(
                         '{model}',
                         diagnostics.expected.vision_model
@@ -640,7 +632,7 @@ const ModelStatusSection = ({
                 </div>
               )}
 
-              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+              <div className="text-xs text-content-muted">
                 {t('settings.localModel.status.manageOllamaExternal')}
               </div>
             </>
diff --git a/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx b/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx
index 67ed98cf6..aa88ba773 100644
--- a/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx
+++ b/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx
@@ -12,11 +12,11 @@ const PermissionBadge = ({ label, value }: PermissionsBadgeProps) => {
       ? 'bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-300 border-green-200 dark:border-green-500/30'
       : value === 'denied'
         ? 'bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-300 border-red-200 dark:border-red-500/30'
-        : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 border-stone-200 dark:border-neutral-800';
+        : 'bg-surface-subtle text-content-secondary border-line';
 
   return (
-    <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
-      <span className="text-sm text-stone-700 dark:text-neutral-200">{label}</span>
+    <div className="flex items-center justify-between rounded-xl border border-line bg-surface p-3">
+      <span className="text-sm text-content-secondary">{label}</span>
       <span className={`rounded-md border px-2 py-1 text-xs uppercase tracking-wide ${colorClass}`}>
         {value}
       </span>
@@ -56,7 +56,7 @@ const PermissionsSection = ({
   const { t } = useT();
   return (
     <section className="space-y-3">
-      <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+      <h3 className="text-sm font-semibold text-content">
         {t('settings.screenIntel.permissions.title')}
       </h3>
       <PermissionBadge
@@ -78,7 +78,7 @@ const PermissionsSection = ({
           {permissionCheckProcessPath ? (
             <p className="opacity-75 text-xs">
               {t('settings.screenIntel.permissions.macosAppliesPrivacy')}{' '}
-              <span className="font-mono break-all text-stone-600 dark:text-neutral-300">
+              <span className="font-mono break-all text-content-secondary">
                 {permissionCheckProcessPath}
               </span>
             </p>
@@ -134,7 +134,7 @@ const PermissionsSection = ({
           type="button"
           onClick={() => void refreshStatus()}
           disabled={isLoading || isRestartingCore}
-          className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2 text-sm text-stone-700 dark:text-neutral-200 disabled:opacity-50">
+          className="rounded-lg border border-line bg-surface-muted px-3 py-2 text-sm text-content-secondary disabled:opacity-50">
           {isLoading
             ? t('settings.screenIntel.permissions.refreshing')
             : t('settings.screenIntel.permissions.refreshStatus')}
diff --git a/app/src/components/settings/panels/theme/ColorTokenField.tsx b/app/src/components/settings/panels/theme/ColorTokenField.tsx
new file mode 100644
index 000000000..63d83f613
--- /dev/null
+++ b/app/src/components/settings/panels/theme/ColorTokenField.tsx
@@ -0,0 +1,48 @@
+import { useId } from 'react';
+
+import { channelsToHex, hexToChannels } from '../../../../lib/theme/color';
+
+export interface ColorTokenFieldProps {
+  /** Token key without `--` (e.g. `surface-canvas`). */
+  tokenKey: string;
+  /** Human label for the swatch row. */
+  label: string;
+  /** Current value as a `"R G B"` channel triple (effective or override). */
+  value: string;
+  /** Whether this field is editable (false when a built-in theme is active). */
+  disabled?: boolean;
+  /** Called with the new `"R G B"` channel triple. */
+  onChange: (channels: string) => void;
+}
+
+/**
+ * A single editable colour token row: a native colour swatch + read-only hex
+ * label. Converts between the stored channel format and the hex the native
+ * `<input type="color">` speaks.
+ */
+const ColorTokenField = ({ tokenKey, label, value, disabled, onChange }: ColorTokenFieldProps) => {
+  const id = useId();
+  const hex = channelsToHex(value);
+
+  return (
+    <div className="flex items-center justify-between gap-3 py-1.5">
+      <label htmlFor={id} className="flex flex-col min-w-0">
+        <span className="text-sm text-content truncate">{label}</span>
+        <span className="text-[11px] font-mono text-content-faint">
+          --{tokenKey} · {hex}
+        </span>
+      </label>
+      <input
+        id={id}
+        type="color"
+        value={hex}
+        disabled={disabled}
+        onChange={e => onChange(hexToChannels(e.target.value))}
+        aria-label={label}
+        className="h-8 w-12 shrink-0 cursor-pointer rounded-md border border-line bg-surface disabled:cursor-not-allowed disabled:opacity-50"
+      />
+    </div>
+  );
+};
+
+export default ColorTokenField;
diff --git a/app/src/components/settings/panels/wallet/ReceiveModal.tsx b/app/src/components/settings/panels/wallet/ReceiveModal.tsx
index bbbc3c495..2b57abec6 100644
--- a/app/src/components/settings/panels/wallet/ReceiveModal.tsx
+++ b/app/src/components/settings/panels/wallet/ReceiveModal.tsx
@@ -49,10 +49,10 @@ const ReceiveModal = ({ balance, onClose }: ReceiveModalProps) => {
       title={t('walletBalances.receive')}
       subtitle={networkLabel}>
       <div className="flex flex-col items-center gap-4">
-        <p className="text-xs text-stone-500 dark:text-neutral-400 text-center leading-relaxed">
+        <p className="text-xs text-content-muted text-center leading-relaxed">
           {t('walletReceive.scanHint')}
         </p>
-        <div className="rounded-xl bg-white p-3 border border-stone-200" data-testid="receive-qr">
+        <div className="rounded-xl bg-surface p-3 border border-line" data-testid="receive-qr">
           <QRCodeSVG
             value={balance.address}
             size={180}
@@ -62,12 +62,12 @@ const ReceiveModal = ({ balance, onClose }: ReceiveModalProps) => {
           />
         </div>
         <div className="w-full">
-          <span className="block text-[11px] font-medium text-stone-500 dark:text-neutral-400 mb-1">
+          <span className="block text-[11px] font-medium text-content-muted mb-1">
             {t('walletReceive.addressLabel').replace('{network}', networkLabel)}
           </span>
-          <div className="flex items-center gap-2 rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+          <div className="flex items-center gap-2 rounded-xl border border-line bg-surface-muted px-3 py-2">
             <span
-              className="font-mono text-xs text-stone-700 dark:text-neutral-200 break-all"
+              className="font-mono text-xs text-content-secondary break-all"
               data-testid="receive-address">
               {balance.address}
             </span>
diff --git a/app/src/components/settings/panels/wallet/SendCryptoModal.tsx b/app/src/components/settings/panels/wallet/SendCryptoModal.tsx
index 692d96425..869710108 100644
--- a/app/src/components/settings/panels/wallet/SendCryptoModal.tsx
+++ b/app/src/components/settings/panels/wallet/SendCryptoModal.tsx
@@ -116,7 +116,7 @@ const SendCryptoModal = ({ balance, onClose, onSuccess }: SendCryptoModalProps)
   }, [onSuccess, onClose]);
 
   const fieldClass =
-    'w-full rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500';
+    'w-full rounded-lg border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder-content-faint focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500';
 
   return (
     <ModalShell
@@ -134,16 +134,14 @@ const SendCryptoModal = ({ balance, onClose, onSuccess }: SendCryptoModalProps)
 
       {step === 'form' && (
         <div className="flex flex-col gap-3">
-          <div className="flex items-center justify-between rounded-lg bg-stone-50 dark:bg-neutral-800/60 px-3 py-2 text-xs">
-            <span className="text-stone-500 dark:text-neutral-400">
-              {t('walletSend.available')}
-            </span>
-            <span className="font-mono font-medium text-stone-800 dark:text-neutral-100">
+          <div className="flex items-center justify-between rounded-lg bg-surface-muted px-3 py-2 text-xs">
+            <span className="text-content-muted">{t('walletSend.available')}</span>
+            <span className="font-mono font-medium text-content">
               {balance.formatted} {balance.assetSymbol}
             </span>
           </div>
           <label className="flex flex-col gap-1">
-            <span className="text-xs font-medium text-stone-700 dark:text-neutral-200">
+            <span className="text-xs font-medium text-content-secondary">
               {t('walletSend.recipient')}
             </span>
             <input
@@ -158,7 +156,7 @@ const SendCryptoModal = ({ balance, onClose, onSuccess }: SendCryptoModalProps)
             />
           </label>
           <label className="flex flex-col gap-1">
-            <span className="text-xs font-medium text-stone-700 dark:text-neutral-200">
+            <span className="text-xs font-medium text-content-secondary">
               {t('walletSend.amount')}
             </span>
             <div className="relative">
@@ -171,7 +169,7 @@ const SendCryptoModal = ({ balance, onClose, onSuccess }: SendCryptoModalProps)
                 className={`${fieldClass} pr-16 font-mono`}
                 data-testid="send-amount"
               />
-              <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs font-medium text-stone-400 dark:text-neutral-500">
+              <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs font-medium text-content-faint">
                 {balance.assetSymbol}
               </span>
             </div>
@@ -189,33 +187,29 @@ const SendCryptoModal = ({ balance, onClose, onSuccess }: SendCryptoModalProps)
 
       {step === 'review' && prepared && (
         <div className="flex flex-col gap-3">
-          <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+          <p className="text-xs text-content-muted leading-relaxed">
             {t('walletSend.confirmHint')}
           </p>
-          <dl className="rounded-xl border border-stone-200 dark:border-neutral-800 divide-y divide-stone-100 dark:divide-neutral-800 text-xs">
+          <dl className="rounded-xl border border-line divide-y divide-line-subtle dark:divide-neutral-800 text-xs">
             <div className="flex items-center justify-between px-3 py-2">
-              <dt className="text-stone-500 dark:text-neutral-400">{t('walletSend.amount')}</dt>
-              <dd className="font-mono font-medium text-stone-800 dark:text-neutral-100">
+              <dt className="text-content-muted">{t('walletSend.amount')}</dt>
+              <dd className="font-mono font-medium text-content">
                 {prepared.amountFormatted} {prepared.assetSymbol}
               </dd>
             </div>
             <div className="flex items-center justify-between px-3 py-2">
-              <dt className="text-stone-500 dark:text-neutral-400">{t('walletSend.recipient')}</dt>
-              <dd className="font-mono text-stone-800 dark:text-neutral-100">
-                {truncate(prepared.toAddress)}
-              </dd>
+              <dt className="text-content-muted">{t('walletSend.recipient')}</dt>
+              <dd className="font-mono text-content">{truncate(prepared.toAddress)}</dd>
             </div>
             <div className="flex items-center justify-between px-3 py-2">
-              <dt className="text-stone-500 dark:text-neutral-400">
-                {t('walletSend.estimatedFee')}
-              </dt>
-              <dd className="font-mono text-stone-800 dark:text-neutral-100" data-testid="send-fee">
+              <dt className="text-content-muted">{t('walletSend.estimatedFee')}</dt>
+              <dd className="font-mono text-content" data-testid="send-fee">
                 {feeFormatted} {balance.assetSymbol}
               </dd>
             </div>
           </dl>
           {prepared.notes.length > 0 && (
-            <ul className="list-disc pl-4 text-[11px] text-stone-500 dark:text-neutral-400 space-y-0.5">
+            <ul className="list-disc pl-4 text-[11px] text-content-muted space-y-0.5">
               {prepared.notes.map((note, i) => (
                 <li key={i}>{note}</li>
               ))}
@@ -246,7 +240,7 @@ const SendCryptoModal = ({ balance, onClose, onSuccess }: SendCryptoModalProps)
       )}
 
       {step === 'sending' && (
-        <div className="flex flex-col items-center gap-3 py-8 text-stone-500 dark:text-neutral-400">
+        <div className="flex flex-col items-center gap-3 py-8 text-content-muted">
           <svg className="w-6 h-6 animate-spin" fill="none" viewBox="0 0 24 24">
             <circle
               className="opacity-25"
@@ -278,15 +272,13 @@ const SendCryptoModal = ({ balance, onClose, onSuccess }: SendCryptoModalProps)
               <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
             </svg>
           </div>
-          <p className="text-sm font-medium text-stone-800 dark:text-neutral-100">
-            {t('walletSend.sent')}
-          </p>
-          <div className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
-            <span className="block text-[11px] text-stone-500 dark:text-neutral-400 mb-0.5">
+          <p className="text-sm font-medium text-content">{t('walletSend.sent')}</p>
+          <div className="w-full rounded-xl border border-line bg-surface-muted px-3 py-2">
+            <span className="block text-[11px] text-content-muted mb-0.5">
               {t('walletSend.txHash')}
             </span>
             <span
-              className="font-mono text-xs text-stone-700 dark:text-neutral-200 break-all"
+              className="font-mono text-xs text-content-secondary break-all"
               data-testid="send-tx-hash">
               {result.transactionHash}
             </span>
diff --git a/app/src/components/settings/search/SettingsSearchBar.tsx b/app/src/components/settings/search/SettingsSearchBar.tsx
index 142deabd8..d3ffea4c7 100644
--- a/app/src/components/settings/search/SettingsSearchBar.tsx
+++ b/app/src/components/settings/search/SettingsSearchBar.tsx
@@ -37,7 +37,7 @@ const SettingsSearchBar = ({ value, onValueChange }: SettingsSearchBarProps) =>
 
   return (
     <div data-testid="settings-search" className="relative shrink-0">
-      <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-stone-400 dark:text-neutral-500">
+      <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-content-faint">
         <SearchIcon />
       </span>
       <input
@@ -56,7 +56,7 @@ const SettingsSearchBar = ({ value, onValueChange }: SettingsSearchBarProps) =>
         }}
         placeholder={t('settings.settingsSearch.placeholder')}
         data-testid="settings-search-input"
-        className="w-full border-0 border-b border-stone-200 bg-transparent py-2.5 pl-10 pr-10 text-sm text-stone-900 placeholder:text-stone-400 focus:border-primary-400 focus:outline-none focus:ring-0 dark:border-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+        className="w-full border-0 border-b border-line bg-transparent py-2.5 pl-10 pr-10 text-sm text-content placeholder:text-stone-400 focus:border-primary-400 focus:outline-none focus:ring-0 dark:placeholder:text-neutral-500"
       />
       {value && (
         <button
@@ -67,7 +67,7 @@ const SettingsSearchBar = ({ value, onValueChange }: SettingsSearchBarProps) =>
           }}
           aria-label={t('settings.settingsSearch.clear')}
           data-testid="settings-search-clear"
-          className="absolute inset-y-0 right-2 flex items-center px-1.5 text-stone-400 hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300">
+          className="absolute inset-y-0 right-2 flex items-center px-1.5 text-content-faint hover:text-content-secondary">
           <ClearIcon />
         </button>
       )}
diff --git a/app/src/components/settings/settingsRouteElements.tsx b/app/src/components/settings/settingsRouteElements.tsx
index 38fcf573a..641bb6a51 100644
--- a/app/src/components/settings/settingsRouteElements.tsx
+++ b/app/src/components/settings/settingsRouteElements.tsx
@@ -48,6 +48,7 @@ import TeamInvitesPanel from './panels/TeamInvitesPanel';
 import TeamManagementPanel from './panels/TeamManagementPanel';
 import TeamMembersPanel from './panels/TeamMembersPanel';
 import TeamPanel from './panels/TeamPanel';
+import ThemeStudioPanel from './panels/ThemeStudioPanel';
 import TokenUsagePanel from './panels/TokenUsagePanel';
 import ToolPolicyDiagnosticsPanel from './panels/ToolPolicyDiagnosticsPanel';
 import ToolsPanel from './panels/ToolsPanel';
@@ -114,6 +115,7 @@ export function settingsRouteElements(): ReactNode {
       <Route path="security" element={wrapSettingsPage(<SecurityPanel />)} />
       <Route path="migration" element={wrapSettingsPage(<MigrationPanel />)} />
       <Route path="appearance" element={wrapSettingsPage(<AppearancePanel />)} />
+      <Route path="theme" element={wrapSettingsPage(<ThemeStudioPanel />)} />
       <Route path="notifications" element={wrapSettingsPage(<NotificationsTabbedPanel />)} />
       {/* Real device-pairing panel (replaces the old "Coming Soon" stub). */}
       <Route path="devices" element={wrapSettingsPage(<DevicesPanel />)} />
diff --git a/app/src/components/settings/settingsRouteRegistry.ts b/app/src/components/settings/settingsRouteRegistry.ts
index 6ee756653..c3e5e4793 100644
--- a/app/src/components/settings/settingsRouteRegistry.ts
+++ b/app/src/components/settings/settingsRouteRegistry.ts
@@ -169,6 +169,29 @@ export const SETTINGS_ROUTE_REGISTRY: SettingsRegistryEntry[] = [
     navGroup: 'general',
     navOrder: 1,
   },
+  {
+    // Theme Studio — full colour + font customization on top of the simple
+    // light/dark toggle in Appearance.
+    id: 'theme',
+    titleKey: 'settings.theme.title',
+    descriptionKey: 'settings.theme.menuDesc',
+    section: 'home',
+    searchKeywords: [
+      'theme',
+      'color',
+      'colour',
+      'font',
+      'palette',
+      'customize',
+      'customise',
+      'appearance',
+      'surface',
+      'background',
+      'accent',
+    ],
+    navGroup: 'general',
+    navOrder: 2,
+  },
   {
     // devices: real pairing panel (the old "Coming Soon" stub was removed).
     id: 'devices',
diff --git a/app/src/components/skills/AutocompleteSetupModal.tsx b/app/src/components/skills/AutocompleteSetupModal.tsx
index ee41a4a86..f570bb90f 100644
--- a/app/src/components/skills/AutocompleteSetupModal.tsx
+++ b/app/src/components/skills/AutocompleteSetupModal.tsx
@@ -88,7 +88,7 @@ export default function AutocompleteSetupModal({ onClose }: Props) {
       {/* ─── Enable step ─── */}
       {step === 'enable' && (
         <div className="space-y-4">
-          <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+          <p className="text-xs text-content-muted leading-relaxed">
             {t('skills.setup.autocomplete.description')}
           </p>
 
diff --git a/app/src/components/skills/CreateSkillModal.tsx b/app/src/components/skills/CreateSkillModal.tsx
index 95d20f4dc..14b7fad25 100644
--- a/app/src/components/skills/CreateSkillModal.tsx
+++ b/app/src/components/skills/CreateSkillModal.tsx
@@ -90,16 +90,16 @@ export default function CreateSkillModal({ onClose, onCreated, editing }: Props)
         role="dialog"
         aria-modal="true"
         aria-labelledby="create-skill-title"
-        className="relative w-full max-w-[520px] rounded-2xl bg-white dark:bg-neutral-900 shadow-2xl animate-fade-in">
+        className="relative w-full max-w-[520px] rounded-2xl bg-surface shadow-2xl animate-fade-in">
         {/* Header */}
-        <div className="flex items-start justify-between gap-3 border-b border-stone-100 dark:border-neutral-800 px-5 py-4">
+        <div className="flex items-start justify-between gap-3 border-b border-line-subtle px-5 py-4">
           <div className="min-w-0 flex-1">
             <h2
               id="create-skill-title"
-              className="text-base font-semibold text-stone-900 dark:text-neutral-100 font-sans">
+              className="text-base font-semibold text-content font-sans">
               {editing ? t('common.edit') : t('workflows.create.title')}
             </h2>
-            <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+            <p className="mt-0.5 text-xs text-content-muted">
               {t('workflows.create.subtitle')}
             </p>
           </div>
@@ -115,7 +115,7 @@ export default function CreateSkillModal({ onClose, onCreated, editing }: Props)
             }}
             disabled={submitting}
             aria-label={t('common.close')}
-            className="h-8 w-8 flex-shrink-0 text-stone-400 dark:text-neutral-500">
+            className="h-8 w-8 flex-shrink-0 text-content-faint">
             <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
@@ -139,7 +139,7 @@ export default function CreateSkillModal({ onClose, onCreated, editing }: Props)
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 border-t border-stone-100 dark:border-neutral-800 px-5 py-3">
+        <div className="flex items-center justify-end gap-2 border-t border-line-subtle px-5 py-3">
           <Button variant="tertiary" onClick={onClose} disabled={submitting}>
             {t('common.cancel')}
           </Button>
diff --git a/app/src/components/skills/CreateWorkflowForm.tsx b/app/src/components/skills/CreateWorkflowForm.tsx
index 855fe74f9..275b9aef1 100644
--- a/app/src/components/skills/CreateWorkflowForm.tsx
+++ b/app/src/components/skills/CreateWorkflowForm.tsx
@@ -310,7 +310,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
         <div>
           <label
             htmlFor="create-skill-name"
-            className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
+            className="block text-xs font-medium text-content-secondary">
             {t('skills.create.name')}
             <span className="text-coral-500"> *</span>
           </label>
@@ -323,16 +323,16 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
             required
             readOnly={isEdit}
             maxLength={128}
-            className={`mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30 ${
+            className={`mt-1 w-full rounded-lg border border-line px-3 py-2 text-sm text-content shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30 ${
               isEdit
-                ? 'cursor-not-allowed bg-stone-50 dark:bg-neutral-800'
-                : 'bg-white dark:bg-neutral-900'
+                ? 'cursor-not-allowed bg-surface-muted'
+                : 'bg-surface'
             }`}
             placeholder={t('skills.create.namePlaceholder')}
           />
-          <p className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">
+          <p className="mt-1 text-[11px] text-content-muted">
             {t('skills.create.slugLabel')}{' '}
-            <code className="rounded bg-stone-100 dark:bg-neutral-800 px-1 py-[1px] font-mono text-stone-700 dark:text-neutral-200">
+            <code className="rounded bg-surface-subtle px-1 py-[1px] font-mono text-content-secondary">
               {slug || '—'}
             </code>
           </p>
@@ -342,7 +342,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
         <div>
           <label
             htmlFor="create-skill-description"
-            className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
+            className="block text-xs font-medium text-content-secondary">
             {t('skills.create.description')}
             <span className="text-coral-500"> *</span>
           </label>
@@ -353,7 +353,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
             required
             rows={3}
             maxLength={500}
-            className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+            className="mt-1 w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
             placeholder={t('skills.create.descriptionPlaceholder')}
           />
         </div>
@@ -364,9 +364,9 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
         <div>
           <label
             htmlFor="create-skill-when-to-use"
-            className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
+            className="block text-xs font-medium text-content-secondary">
             {t('skills.create.whenToUse')}
-            <span className="ml-1 font-normal text-stone-400 dark:text-neutral-500">
+            <span className="ml-1 font-normal text-content-faint">
               {t('skills.create.optional')}
             </span>
           </label>
@@ -376,10 +376,10 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
             onChange={e => setWhenToUse(e.target.value)}
             rows={2}
             maxLength={500}
-            className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+            className="mt-1 w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
             placeholder={t('skills.create.whenToUsePlaceholder')}
           />
-          <p className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">
+          <p className="mt-1 text-[11px] text-content-muted">
             {t('skills.create.whenToUseHelp')}
           </p>
         </div>
@@ -393,9 +393,9 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
             never receives a malformed [[inputs]] entry. */}
         <div>
           <div className="flex items-baseline justify-between">
-            <label className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
+            <label className="block text-xs font-medium text-content-secondary">
               {t('skills.create.inputs.heading')}
-              <span className="ml-1 font-normal text-stone-400 dark:text-neutral-500">
+              <span className="ml-1 font-normal text-content-faint">
                 {t('skills.create.optional')}
               </span>
             </label>
@@ -408,7 +408,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
               + {t('skills.create.inputs.add')}
             </Button>
           </div>
-          <p className="mt-0.5 text-[11px] text-stone-500 dark:text-neutral-400">
+          <p className="mt-0.5 text-[11px] text-content-muted">
             {t('skills.create.inputs.help')}
           </p>
           {inputs.length > 0 && (
@@ -424,7 +424,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
                   <div
                     key={row.localId}
                     data-testid={`create-skill-input-row-${row.localId}`}
-                    className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-950/40 p-3">
+                    className="rounded-lg border border-line bg-surface-muted dark:bg-surface-canvas/40 p-3">
                     <div className="grid grid-cols-1 gap-2 sm:grid-cols-[1fr_1fr_auto]">
                       <div>
                         <input
@@ -434,7 +434,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
                           maxLength={64}
                           placeholder={t('skills.create.inputs.row.namePlaceholder')}
                           aria-label={t('skills.create.inputs.row.name')}
-                          className={`w-full rounded-md border bg-white dark:bg-neutral-900 px-2 py-1.5 text-xs text-stone-900 dark:text-neutral-100 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500/30 ${showNameErr ? 'border-coral-400' : 'border-stone-200 dark:border-neutral-800 focus:border-primary-500'}`}
+                          className={`w-full rounded-md border bg-surface px-2 py-1.5 text-xs text-content shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500/30 ${showNameErr ? 'border-coral-400' : 'border-line focus:border-primary-500'}`}
                         />
                         {showNameErr && (
                           <p className="mt-0.5 text-[10px] text-coral-600">
@@ -450,7 +450,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
                           maxLength={256}
                           placeholder={t('skills.create.inputs.row.descriptionPlaceholder')}
                           aria-label={t('skills.create.inputs.row.description')}
-                          className={`w-full rounded-md border bg-white dark:bg-neutral-900 px-2 py-1.5 text-xs text-stone-900 dark:text-neutral-100 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500/30 ${showDescErr ? 'border-coral-400' : 'border-stone-200 dark:border-neutral-800 focus:border-primary-500'}`}
+                          className={`w-full rounded-md border bg-surface px-2 py-1.5 text-xs text-content shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500/30 ${showDescErr ? 'border-coral-400' : 'border-line focus:border-primary-500'}`}
                         />
                         {showDescErr && (
                           <p className="mt-0.5 text-[10px] text-coral-600">
@@ -472,7 +472,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
                     </div>
                     <div className="mt-2 flex items-center gap-3 text-[11px]">
                       <label className="flex items-center gap-1">
-                        <span className="text-stone-500 dark:text-neutral-400">
+                        <span className="text-content-muted">
                           {t('skills.create.inputs.row.type')}:
                         </span>
                         <select
@@ -481,7 +481,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
                             updateRow(row.localId, { type: e.target.value as InputRow['type'] })
                           }
                           aria-label={t('skills.create.inputs.row.type')}
-                          className="rounded border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-1 py-0.5 text-[11px] text-stone-900 dark:text-neutral-100">
+                          className="rounded border border-line bg-surface px-1 py-0.5 text-[11px] text-content">
                           <option value="string">{t('skills.create.inputs.type.string')}</option>
                           <option value="integer">{t('skills.create.inputs.type.integer')}</option>
                           <option value="boolean">{t('skills.create.inputs.type.boolean')}</option>
@@ -494,7 +494,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
                           onChange={e => updateRow(row.localId, { required: e.target.checked })}
                           className="h-3 w-3 accent-primary-500"
                         />
-                        <span className="text-stone-500 dark:text-neutral-400">
+                        <span className="text-content-muted">
                           {t('skills.create.inputs.row.required')}
                         </span>
                       </label>
diff --git a/app/src/components/skills/InstallSkillDialog.tsx b/app/src/components/skills/InstallSkillDialog.tsx
index 3313b350e..f05fede2d 100644
--- a/app/src/components/skills/InstallSkillDialog.tsx
+++ b/app/src/components/skills/InstallSkillDialog.tsx
@@ -249,17 +249,17 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
         role="dialog"
         aria-modal="true"
         aria-labelledby="install-skill-title"
-        className="relative w-full max-w-[560px] animate-fade-in rounded-2xl bg-white dark:bg-neutral-900 shadow-2xl">
+        className="relative w-full max-w-[560px] animate-fade-in rounded-2xl bg-surface shadow-2xl">
         <form onSubmit={handleSubmit}>
           {/* Header */}
-          <div className="flex items-start justify-between gap-3 border-b border-stone-100 dark:border-neutral-800 px-5 py-4">
+          <div className="flex items-start justify-between gap-3 border-b border-line-subtle px-5 py-4">
             <div className="min-w-0 flex-1">
               <h2
                 id="install-skill-title"
-                className="font-sans text-base font-semibold text-stone-900 dark:text-neutral-100">
+                className="font-sans text-base font-semibold text-content">
                 {t('skills.install.title')}
               </h2>
-              <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+              <p className="mt-0.5 text-xs text-content-muted">
                 {t('skills.install.subtitlePrefix')} <code className="font-mono">SKILL.md</code>{' '}
                 {t('skills.install.subtitleMiddle')}{' '}
                 <code className="font-mono">.openhuman/skills/</code>.{' '}
@@ -278,7 +278,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
               }}
               disabled={submitting}
               aria-label={t('common.close')}
-              className="h-8 w-8 flex-shrink-0 text-stone-400 dark:text-neutral-500">
+              className="h-8 w-8 flex-shrink-0 text-content-faint">
               <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
@@ -296,7 +296,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
             <div>
               <label
                 htmlFor="install-skill-url"
-                className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
+                className="block text-xs font-medium text-content-secondary">
                 {t('skills.install.urlLabel')}
                 <span className="text-coral-500"> *</span>
               </label>
@@ -311,7 +311,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                 disabled={submitting || result !== null}
                 required
                 maxLength={2048}
-                className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 font-mono text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:bg-stone-50 dark:disabled:bg-neutral-800/60 disabled:text-stone-500 dark:text-neutral-400"
+                className="mt-1 w-full rounded-lg border border-line bg-surface px-3 py-2 font-mono text-sm text-content shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:bg-surface-muted dark:disabled:bg-surface-muted/60 disabled:text-content-muted dark:text-content-muted"
                 placeholder={t('skills.install.urlPlaceholder')}
               />
               {url.trim() && !urlValid ? (
@@ -320,7 +320,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                   {t('skills.install.urlInvalidSuffix')}
                 </p>
               ) : (
-                <p className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">
+                <p className="mt-1 text-[11px] text-content-muted">
                   {t('skills.install.urlHelpPrefix')} <code className="font-mono">.md</code>{' '}
                   {t('skills.install.urlHelpMiddle')}{' '}
                   <code className="font-mono">github.com/…/blob/…</code>{' '}
@@ -334,9 +334,9 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
             <div>
               <label
                 htmlFor="install-skill-timeout"
-                className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
+                className="block text-xs font-medium text-content-secondary">
                 {t('skills.install.timeoutLabel')}
-                <span className="ml-1 font-normal text-stone-400 dark:text-neutral-500">
+                <span className="ml-1 font-normal text-content-faint">
                   {t('skills.install.timeoutHint')}
                 </span>
               </label>
@@ -349,7 +349,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                 value={timeoutSecs}
                 onChange={e => setTimeoutSecs(e.target.value)}
                 disabled={submitting || result !== null}
-                className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:bg-stone-50 dark:disabled:bg-neutral-800/60 disabled:text-stone-500 dark:text-neutral-400"
+                className="mt-1 w-full rounded-lg border border-line bg-surface px-3 py-2 text-sm text-content shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:bg-surface-muted dark:disabled:bg-surface-muted/60 disabled:text-content-muted dark:text-content-muted"
                 placeholder={t('skills.install.timeoutPlaceholder')}
               />
               {!timeoutValid ? (
@@ -357,7 +357,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                   {t('skills.install.timeoutInvalid')}
                 </p>
               ) : (
-                <p className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">
+                <p className="mt-1 text-[11px] text-content-muted">
                   {t('skills.install.timeoutHelp')}
                 </p>
               )}
@@ -409,7 +409,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                     <summary className="cursor-pointer font-semibold">
                       {t('skills.install.fetchLog')}
                     </summary>
-                    <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-sage-100 bg-white dark:bg-neutral-900 p-2 font-mono text-[11px] text-stone-800 dark:text-neutral-100">
+                    <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-sage-100 bg-surface p-2 font-mono text-[11px] text-content">
                       {result.stdout}
                     </pre>
                   </details>
@@ -419,7 +419,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                     <summary className="cursor-pointer font-semibold">
                       {t('skills.install.parseWarnings')}
                     </summary>
-                    <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-sage-100 bg-white dark:bg-neutral-900 p-2 font-mono text-[11px] text-stone-800 dark:text-neutral-100">
+                    <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-sage-100 bg-surface p-2 font-mono text-[11px] text-content">
                       {result.stderr}
                     </pre>
                   </details>
@@ -442,7 +442,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                         <summary className="cursor-pointer font-semibold">
                           {t('skills.install.rawError')}
                         </summary>
-                        <pre className="mt-1 whitespace-pre-wrap rounded border border-coral-200 bg-white dark:bg-neutral-900 p-2 font-mono text-[11px] text-stone-800 dark:text-neutral-100">
+                        <pre className="mt-1 whitespace-pre-wrap rounded border border-coral-200 bg-surface p-2 font-mono text-[11px] text-content">
                           {error}
                         </pre>
                       </details>
@@ -454,7 +454,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
           </div>
 
           {/* Footer */}
-          <div className="flex items-center justify-end gap-2 border-t border-stone-100 dark:border-neutral-800 px-5 py-3">
+          <div className="flex items-center justify-end gap-2 border-t border-line-subtle px-5 py-3">
             <Button variant="tertiary" onClick={onClose} disabled={submitting}>
               {result ? t('common.finish') : t('common.cancel')}
             </Button>
diff --git a/app/src/components/skills/MeetingBotsCard.tsx b/app/src/components/skills/MeetingBotsCard.tsx
index 77669db1c..9f20fcbf0 100644
--- a/app/src/components/skills/MeetingBotsCard.tsx
+++ b/app/src/components/skills/MeetingBotsCard.tsx
@@ -173,17 +173,17 @@ function ActiveMeetingView({ onToast }: Props) {
           <RiveMascot face={face} />
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+          <div className="text-sm font-semibold text-content">
             {t('skills.meetingBots.liveTitle')}
           </div>
-          <div className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">{statusText}</div>
+          <div className="mt-0.5 text-xs text-content-muted">{statusText}</div>
           {meetingCode && (
-            <div className="mt-1 truncate font-mono text-[11px] text-stone-600 dark:text-neutral-400">
+            <div className="mt-1 truncate font-mono text-[11px] text-content-secondary">
               {meetingCode}
             </div>
           )}
           {lastReply?.reply && (
-            <div className="mt-1.5 text-xs text-stone-600 dark:text-neutral-300 line-clamp-2 italic">
+            <div className="mt-1.5 text-xs text-content-secondary line-clamp-2 italic">
               &ldquo;{lastReply.reply}&rdquo;
             </div>
           )}
@@ -297,19 +297,19 @@ function MeetingBotsInline({ onToast, hasSubmittedRef }: MeetingBotsInlineProps)
   };
 
   return (
-    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 shadow-soft animate-fade-up">
+    <div className="rounded-2xl border border-line bg-surface p-4 shadow-soft animate-fade-up">
       <div className="mb-4">
-        <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+        <h2 className="text-sm font-semibold text-content">
           {t('skills.meetingBots.modalTitle')}
         </h2>
-        <p className="mt-1 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">
+        <p className="mt-1 text-xs leading-relaxed text-content-secondary">
           {t('skills.meetingBots.modalDesc')}
         </p>
       </div>
 
       <form onSubmit={handleSubmit} className="space-y-3">
         <label className="block">
-          <span className="text-[10px] font-medium uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+          <span className="text-[10px] font-medium uppercase tracking-wide text-content-muted">
             {t('skills.meetingBots.meetingLink')}
           </span>
           <input
@@ -321,13 +321,13 @@ function MeetingBotsInline({ onToast, hasSubmittedRef }: MeetingBotsInlineProps)
             onChange={e => setMeetUrl(e.target.value)}
             placeholder={t('skills.meetingBots.platformHints.gmeet')}
             disabled={submitting}
-            className="mt-1 w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-stone-50 dark:disabled:bg-neutral-800/60"
+            className="mt-1 w-full rounded-xl border border-line bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-surface-muted dark:disabled:bg-surface-muted/60"
             required
           />
         </label>
 
         <label className="block">
-          <span className="text-[10px] font-medium uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+          <span className="text-[10px] font-medium uppercase tracking-wide text-content-muted">
             {t('skills.meetingBots.respondToParticipant')}
           </span>
           <input
@@ -339,26 +339,26 @@ function MeetingBotsInline({ onToast, hasSubmittedRef }: MeetingBotsInlineProps)
             placeholder={t('skills.meetingBots.respondToParticipantHint')}
             disabled={submitting}
             required
-            className="mt-1 w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-stone-50 dark:disabled:bg-neutral-800/60"
+            className="mt-1 w-full rounded-xl border border-line bg-surface px-3 py-2 text-sm text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-surface-muted dark:disabled:bg-surface-muted/60"
           />
-          <p className="mt-1 text-[10px] text-stone-400 dark:text-neutral-500">
+          <p className="mt-1 text-[10px] text-content-faint">
             {t('skills.meetingBots.respondToParticipantDesc')}
           </p>
         </label>
 
-        <label className="flex items-start gap-3 rounded-xl border border-stone-200 dark:border-neutral-800 px-3 py-2.5">
+        <label className="flex items-start gap-3 rounded-xl border border-line px-3 py-2.5">
           <input
             type="checkbox"
             checked={!listenOnly}
             onChange={e => setListenOnly(!e.target.checked)}
             disabled={submitting}
-            className="mt-0.5 h-4 w-4 shrink-0 rounded border-stone-300 text-primary-500 focus:ring-2 focus:ring-primary-100 disabled:cursor-not-allowed"
+            className="mt-0.5 h-4 w-4 shrink-0 rounded border-line-strong text-primary-500 focus:ring-2 focus:ring-primary-100 disabled:cursor-not-allowed"
           />
           <span className="min-w-0">
-            <span className="block text-sm font-medium text-stone-800 dark:text-neutral-100">
+            <span className="block text-sm font-medium text-content">
               {t('skills.meetingBots.activeMode')}
             </span>
-            <span className="mt-0.5 block text-[10px] leading-relaxed text-stone-400 dark:text-neutral-500">
+            <span className="mt-0.5 block text-[10px] leading-relaxed text-content-faint">
               {t('skills.meetingBots.activeModeDesc')}
             </span>
           </span>
diff --git a/app/src/components/skills/RecentCallsSection.tsx b/app/src/components/skills/RecentCallsSection.tsx
index b04e30932..0a47fb5b5 100644
--- a/app/src/components/skills/RecentCallsSection.tsx
+++ b/app/src/components/skills/RecentCallsSection.tsx
@@ -33,12 +33,12 @@ export function RecentCallsSection({
   return (
     <section
       aria-label={t('skills.meetingBots.recentCallsAriaLabel')}
-      className="mt-4 border-t border-stone-200 dark:border-neutral-800 pt-4">
+      className="mt-4 border-t border-line pt-4">
       <div className="flex items-baseline justify-between">
-        <h3 className="text-[11px] font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+        <h3 className="text-[11px] font-semibold uppercase tracking-wide text-content-muted">
           {t('skills.meetingBots.recentCallsHeading')}
           {rows && rows.length > 0 && (
-            <span className="ml-1 text-stone-400 dark:text-neutral-500 normal-case font-normal">
+            <span className="ml-1 text-content-faint normal-case font-normal">
               ({rows.length})
             </span>
           )}
@@ -48,11 +48,11 @@ export function RecentCallsSection({
       {error && <p className="mt-2 text-[11px] text-coral-600 dark:text-coral-400">{error}</p>}
 
       {rows === null ? (
-        <p className="mt-2 text-[11px] text-stone-400 dark:text-neutral-500">
+        <p className="mt-2 text-[11px] text-content-faint">
           {t('skills.meetingBots.recentCallsLoading')}
         </p>
       ) : rows.length === 0 ? (
-        <p className="mt-2 text-[11px] text-stone-400 dark:text-neutral-500">
+        <p className="mt-2 text-[11px] text-content-faint">
           {t('skills.meetingBots.recentCallsEmpty')}
         </p>
       ) : (
@@ -129,24 +129,24 @@ function RecentCallRow({ call }: { call: MeetCallRecord }) {
   }, [status, detail, loadDetail]);
 
   return (
-    <li className="rounded-lg text-[11px] text-stone-700 dark:text-neutral-300">
+    <li className="rounded-lg text-[11px] text-content-secondary">
       <button
         type="button"
         onClick={toggle}
         aria-expanded={expanded}
-        className="w-full rounded-lg px-2 py-1.5 text-left hover:bg-stone-50 dark:hover:bg-neutral-800/40">
+        className="w-full rounded-lg px-2 py-1.5 text-left hover:bg-surface-muted dark:hover:bg-surface-muted/40">
         <div className="flex items-center justify-between gap-2">
           <span className="flex min-w-0 items-center gap-1">
             <Chevron expanded={expanded} />
-            <span className="truncate font-mono text-stone-800 dark:text-neutral-200">
+            <span className="truncate font-mono text-content">
               {meetingCode}
             </span>
           </span>
-          <span className="shrink-0 text-stone-400 dark:text-neutral-500">
+          <span className="shrink-0 text-content-faint">
             {formatRelativeTime(call.started_at_ms)}
           </span>
         </div>
-        <div className="mt-0.5 flex items-center gap-3 pl-4 text-[10px] text-stone-500 dark:text-neutral-400">
+        <div className="mt-0.5 flex items-center gap-3 pl-4 text-[10px] text-content-muted">
           <span>
             {t(
               call.turn_count === 1
@@ -164,7 +164,7 @@ function RecentCallRow({ call }: { call: MeetCallRecord }) {
           )}
         </div>
         {participants.length > 0 && (
-          <div className="mt-0.5 truncate pl-4 text-[10px] text-stone-500 dark:text-neutral-400">
+          <div className="mt-0.5 truncate pl-4 text-[10px] text-content-muted">
             {t('skills.meetingBots.recentCallParticipants').replace(
               '{names}',
               participants.join(', ')
@@ -195,7 +195,7 @@ function RecentCallDetailBody({
 
   if (status === 'idle' || status === 'loading') {
     return (
-      <p className="text-[10px] text-stone-400 dark:text-neutral-500">
+      <p className="text-[10px] text-content-faint">
         {t('skills.meetingBots.callDetailLoading')}
       </p>
     );
@@ -221,7 +221,7 @@ function RecentCallDetailBody({
 
   if (!hasSummary && transcript.length === 0) {
     return (
-      <p className="text-[10px] text-stone-400 dark:text-neutral-500">
+      <p className="text-[10px] text-content-faint">
         {t('skills.meetingBots.callDetailEmpty')}
       </p>
     );
@@ -241,14 +241,14 @@ function CallSummary({ summary }: { summary: MeetCallSummary }) {
     <div className="space-y-1.5">
       <SectionLabel>{t('skills.meetingBots.callSummaryHeading')}</SectionLabel>
       {summary.headline.trim() && (
-        <p className="text-[11px] text-stone-700 dark:text-neutral-300">{summary.headline}</p>
+        <p className="text-[11px] text-content-secondary">{summary.headline}</p>
       )}
       {summary.key_points.length > 0 && (
         <div>
-          <p className="text-[10px] font-medium text-stone-500 dark:text-neutral-400">
+          <p className="text-[10px] font-medium text-content-muted">
             {t('skills.meetingBots.callKeyPointsHeading')}
           </p>
-          <ul className="mt-0.5 list-disc space-y-0.5 pl-4 text-[10px] text-stone-600 dark:text-neutral-400">
+          <ul className="mt-0.5 list-disc space-y-0.5 pl-4 text-[10px] text-content-secondary">
             {summary.key_points.map((point, i) => (
               <li key={i}>{point}</li>
             ))}
@@ -257,10 +257,10 @@ function CallSummary({ summary }: { summary: MeetCallSummary }) {
       )}
       {summary.action_items.length > 0 && (
         <div>
-          <p className="text-[10px] font-medium text-stone-500 dark:text-neutral-400">
+          <p className="text-[10px] font-medium text-content-muted">
             {t('skills.meetingBots.callActionItemsHeading')}
           </p>
-          <ul className="mt-0.5 space-y-0.5 text-[10px] text-stone-600 dark:text-neutral-400">
+          <ul className="mt-0.5 space-y-0.5 text-[10px] text-content-secondary">
             {summary.action_items.map((item, i) => {
               const meta = [
                 item.assignee?.trim() || undefined,
@@ -272,7 +272,7 @@ function CallSummary({ summary }: { summary: MeetCallSummary }) {
                   <span>
                     {item.description}
                     {meta.length > 0 && (
-                      <span className="text-stone-400 dark:text-neutral-500">
+                      <span className="text-content-faint">
                         {' '}
                         ({meta.join(' · ')})
                       </span>
@@ -293,14 +293,14 @@ function CallTranscript({ lines }: { lines: MeetCallTranscriptLine[] }) {
   return (
     <div className="space-y-1">
       <SectionLabel>{t('skills.meetingBots.callTranscriptHeading')}</SectionLabel>
-      <div className="max-h-48 space-y-0.5 overflow-y-auto rounded-md bg-stone-50 p-2 dark:bg-neutral-800/40">
+      <div className="max-h-48 space-y-0.5 overflow-y-auto rounded-md bg-surface-muted p-2">
         {lines.map((line, i) => (
           <p
             key={i}
             className={
               line.role === 'assistant'
                 ? 'text-[10px] text-ocean-700 dark:text-ocean-300'
-                : 'text-[10px] text-stone-600 dark:text-neutral-400'
+                : 'text-[10px] text-content-secondary'
             }>
             {line.content}
           </p>
@@ -312,7 +312,7 @@ function CallTranscript({ lines }: { lines: MeetCallTranscriptLine[] }) {
 
 function SectionLabel({ children }: { children: React.ReactNode }) {
   return (
-    <p className="text-[10px] font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+    <p className="text-[10px] font-semibold uppercase tracking-wide text-content-muted">
       {children}
     </p>
   );
@@ -323,7 +323,7 @@ function Chevron({ expanded }: { expanded: boolean }) {
     <svg
       aria-hidden="true"
       viewBox="0 0 16 16"
-      className={`h-3 w-3 shrink-0 text-stone-400 transition-transform dark:text-neutral-500 ${
+      className={`h-3 w-3 shrink-0 text-content-faint transition-transform ${
         expanded ? 'rotate-90' : ''
       }`}
       fill="none"
diff --git a/app/src/components/skills/ScheduledCronCard.tsx b/app/src/components/skills/ScheduledCronCard.tsx
index 78c064c2f..c3e8c6014 100644
--- a/app/src/components/skills/ScheduledCronCard.tsx
+++ b/app/src/components/skills/ScheduledCronCard.tsx
@@ -107,7 +107,7 @@ export default function ScheduledCronCard({
   const containerClass = `rounded-2xl border shadow-soft transition-colors ${
     isActive
       ? 'border-sage-200 dark:border-sage-500/30 bg-gradient-to-br from-sage-50 via-white to-sage-100 dark:from-sage-500/10 dark:via-neutral-900 dark:to-sage-500/5'
-      : 'border-stone-200 dark:border-neutral-800 bg-gradient-to-br from-white via-stone-50 to-stone-100/60 dark:from-neutral-900 dark:via-neutral-900 dark:to-neutral-800/80'
+      : 'border-line bg-gradient-to-br from-white via-stone-50 to-stone-100/60 dark:from-neutral-900 dark:via-neutral-900 dark:to-neutral-800/80'
   }`;
 
   const headingRow = (
@@ -123,24 +123,24 @@ export default function ScheduledCronCard({
         <span
           data-testid={`${rootId}-title`}
           className={`font-mono text-sm font-semibold truncate ${
-            isActive ? 'text-sage-900 dark:text-sage-100' : 'text-stone-700 dark:text-neutral-200'
+            isActive ? 'text-sage-900 dark:text-sage-100' : 'text-content-secondary'
           }`}>
           {heading}
         </span>
         {badgeCount && badgeCount > 1 ? (
           <span
             data-testid={`${rootId}-count-badge`}
-            className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-stone-200 dark:bg-neutral-700 text-stone-700 dark:text-neutral-300 shrink-0">
+            className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-surface-strong text-content-secondary shrink-0">
             ×{badgeCount}
           </span>
         ) : null}
       </div>
       <div
         data-testid={`${rootId}-schedule`}
-        className="mt-0.5 text-xs text-stone-600 dark:text-neutral-400">
+        className="mt-0.5 text-xs text-content-secondary">
         {formatSchedule(job)}
       </div>
-      <div className="mt-1 text-[11px] text-stone-500 dark:text-neutral-500">
+      <div className="mt-1 text-[11px] text-content-muted dark:text-content-faint">
         {job.last_run && (
           <span>
             {t('skills.dashboard.lastRun')}: {new Date(job.last_run).toLocaleString()}
@@ -181,15 +181,15 @@ export default function ScheduledCronCard({
         disabled={busy}
         onClick={() => onToggle(!job.enabled)}
         className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors disabled:opacity-50 ${
-          job.enabled ? 'bg-sage-500' : 'bg-neutral-300 dark:bg-neutral-600'
+          job.enabled ? 'bg-sage-500' : 'bg-surface-strong'
         }`}>
         <span
-          className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform mt-0.5 ${
+          className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-surface shadow-sm transition-transform mt-0.5 ${
             job.enabled ? 'translate-x-4' : 'translate-x-0.5'
           }`}
         />
       </button>
-      <span className="text-[10px] text-stone-500 dark:text-neutral-400 min-w-[44px]">
+      <span className="text-[10px] text-content-muted min-w-[44px]">
         {job.enabled ? t('common.enabled') : t('common.disabled')}
       </span>
     </span>
@@ -228,7 +228,7 @@ export default function ScheduledCronCard({
           onClick();
         }
       }}
-      className="w-full text-left px-4 py-3 flex items-center justify-between gap-3 cursor-pointer rounded-2xl transition-colors hover:bg-stone-100/80 dark:hover:bg-neutral-800/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40">
+      className="w-full text-left px-4 py-3 flex items-center justify-between gap-3 cursor-pointer rounded-2xl transition-colors hover:bg-surface-subtle/80 dark:hover:bg-surface-muted/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40">
       {headingRow}
       {rightCluster}
     </div>
diff --git a/app/src/components/skills/ScreenIntelligenceSetupModal.tsx b/app/src/components/skills/ScreenIntelligenceSetupModal.tsx
index 0207a0312..ae6b04b01 100644
--- a/app/src/components/skills/ScreenIntelligenceSetupModal.tsx
+++ b/app/src/components/skills/ScreenIntelligenceSetupModal.tsx
@@ -50,23 +50,23 @@ const PermissionRow = ({
     ? 'bg-sage-50 text-sage-700 border-sage-200'
     : value === 'denied'
       ? 'bg-coral-50 text-coral-700 border-coral-200'
-      : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 border-stone-200 dark:border-neutral-800';
+      : 'bg-surface-subtle text-content-secondary border-line';
 
   return (
-    <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2.5">
+    <div className="flex items-center justify-between rounded-xl border border-line bg-surface px-3 py-2.5">
       <div className="flex items-center gap-2">
         {granted ? (
           <CheckIcon className="w-4 h-4 text-sage-500" />
         ) : (
           <svg
-            className="w-4 h-4 text-stone-400 dark:text-neutral-500"
+            className="w-4 h-4 text-content-faint"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24">
             <circle cx="12" cy="12" r="10" strokeWidth={2} />
           </svg>
         )}
-        <span className="text-sm text-stone-700 dark:text-neutral-200">{label}</span>
+        <span className="text-sm text-content-secondary">{label}</span>
       </div>
       {granted ? (
         <span
@@ -170,7 +170,7 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
           </svg>
         }>
         <div className="space-y-4 py-2">
-          <p className="text-sm text-stone-600 dark:text-neutral-300 leading-relaxed">
+          <p className="text-sm text-content-secondary leading-relaxed">
             {t('skills.setup.screenIntel.macosOnly')}
           </p>
           <Button variant="secondary" size="lg" onClick={onClose} className="w-full">
@@ -206,7 +206,7 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
       {/* ─── Step 1: Permissions ─── */}
       {step === 'permissions' && (
         <div className="space-y-3">
-          <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+          <p className="text-xs text-content-muted leading-relaxed">
             {t('skills.setup.screenIntel.permissionsDesc')}
           </p>
 
@@ -237,7 +237,7 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
               {status?.permission_check_process_path && (
                 <p className="mt-1 opacity-75 text-[10px]">
                   {t('skills.setup.screenIntel.permissionPathLabel')}{' '}
-                  <span className="font-mono break-all text-stone-600 dark:text-neutral-300">
+                  <span className="font-mono break-all text-content-secondary">
                     {status.permission_check_process_path}
                   </span>
                 </p>
@@ -281,7 +281,7 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
             {t('skills.setup.screenIntel.allGranted')}
           </SetupNotice>
 
-          <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+          <p className="text-xs text-content-muted leading-relaxed">
             {t('skills.setup.screenIntel.enableDesc')}
           </p>
 
diff --git a/app/src/components/skills/SkillCard.tsx b/app/src/components/skills/SkillCard.tsx
index ba92dbe74..10275f101 100644
--- a/app/src/components/skills/SkillCard.tsx
+++ b/app/src/components/skills/SkillCard.tsx
@@ -71,37 +71,37 @@ export function UnifiedSkillCard({
   return (
     <div
       data-testid={testId}
-      className="flex items-center gap-3 rounded-xl border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60">
-      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center text-stone-600 dark:text-neutral-300">
+      className="flex items-center gap-3 rounded-xl border border-line-subtle bg-surface p-3 transition-colors hover:bg-surface-hover">
+      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center text-content-secondary">
         {icon}
       </div>
 
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <span className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-100">
+          <span className="truncate text-sm font-semibold text-content">
             {title}
           </span>
           {statusDot && <div className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${statusDot}`} />}
           {statusLabel && (
             <span
-              className={`flex-shrink-0 text-xs ${statusColor ?? 'text-stone-400 dark:text-neutral-500'}`}>
+              className={`flex-shrink-0 text-xs ${statusColor ?? 'text-content-faint'}`}>
               {statusLabel}
             </span>
           )}
         </div>
         {description && (
-          <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">
+          <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-content-secondary">
             {description}
           </p>
         )}
         {syncSummaryText && !syncProgress?.active && (
-          <p className="mt-1 truncate text-[11px] text-stone-500 dark:text-neutral-400">
+          <p className="mt-1 truncate text-[11px] text-content-muted">
             {syncSummaryText}
           </p>
         )}
         {syncProgress?.active && (
           <div className="mt-1.5">
-            <div className="h-1.5 w-full overflow-hidden rounded-full bg-stone-100 dark:bg-neutral-800">
+            <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-subtle">
               {syncProgress.percent != null ? (
                 <div
                   className="h-full rounded-full bg-primary-400 transition-all duration-300"
@@ -115,7 +115,7 @@ export function UnifiedSkillCard({
               <p className="mt-1 truncate text-[11px] text-primary-600">{syncProgress.message}</p>
             )}
             {syncProgress.metricsText && (
-              <p className="mt-0.5 truncate text-[11px] text-stone-500 dark:text-neutral-400">
+              <p className="mt-0.5 truncate text-[11px] text-content-muted">
                 {syncProgress.metricsText}
               </p>
             )}
@@ -136,7 +136,7 @@ export function UnifiedSkillCard({
               }}
               title={t('skills.card.moreActions')}
               aria-label={t('skills.card.moreActions')}
-              className="h-7 w-7 text-stone-400 dark:text-neutral-500">
+              className="h-7 w-7 text-content-faint">
               <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24">
                 <circle cx="5" cy="12" r="2" />
                 <circle cx="12" cy="12" r="2" />
@@ -144,7 +144,7 @@ export function UnifiedSkillCard({
               </svg>
             </Button>
             {menuOpen && (
-              <div className="absolute right-0 top-8 z-10 w-36 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 py-1 shadow-md">
+              <div className="absolute right-0 top-8 z-10 w-36 rounded-xl border border-line bg-surface py-1 shadow-md">
                 {secondaryActions.map(action => (
                   <button
                     key={action.label}
@@ -156,7 +156,7 @@ export function UnifiedSkillCard({
                       setMenuOpen(false);
                       action.onClick();
                     }}
-                    className="flex w-full items-center gap-2 px-3 py-2 text-xs text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-40">
+                    className="flex w-full items-center gap-2 px-3 py-2 text-xs text-content-secondary hover:bg-surface-hover disabled:opacity-40">
                     {action.icon}
                     {action.label}
                   </button>
diff --git a/app/src/components/skills/SkillCategoryFilter.tsx b/app/src/components/skills/SkillCategoryFilter.tsx
index 70c8e34c0..06604e6eb 100644
--- a/app/src/components/skills/SkillCategoryFilter.tsx
+++ b/app/src/components/skills/SkillCategoryFilter.tsx
@@ -25,14 +25,14 @@ const SkillCategoryFilter = ({ categories, selected, onChange }: SkillCategoryFi
                 className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${
                   active
                     ? skillCategoryChipClassName(category)
-                    : 'bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400'
+                    : 'bg-surface-subtle text-content-muted'
                 }`}>
                 <SkillCategoryIcon
                   category={category}
                   className={
                     active
                       ? skillCategoryIconClassName(category)
-                      : 'text-stone-500 dark:text-neutral-400'
+                      : 'text-content-muted'
                   }
                 />
               </span>
diff --git a/app/src/components/skills/SkillResourceTree.tsx b/app/src/components/skills/SkillResourceTree.tsx
index d79b29afc..a126ab3ba 100644
--- a/app/src/components/skills/SkillResourceTree.tsx
+++ b/app/src/components/skills/SkillResourceTree.tsx
@@ -89,7 +89,7 @@ export default function SkillResourceTree({ resources, selectedPath, onSelect }:
 
   if (groups.length === 0) {
     return (
-      <p className="text-xs text-stone-400 dark:text-neutral-500 italic">
+      <p className="text-xs text-content-faint italic">
         {t('skills.resource.tree.empty')}
       </p>
     );
@@ -100,16 +100,16 @@ export default function SkillResourceTree({ resources, selectedPath, onSelect }:
       {groups.map(group => (
         <div
           key={group.key}
-          className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 overflow-hidden">
-          <div className="flex items-center justify-between border-b border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5">
-            <h4 className="text-[11px] font-semibold uppercase tracking-wide text-stone-600 dark:text-neutral-300">
+          className="rounded-xl border border-line bg-surface-muted overflow-hidden">
+          <div className="flex items-center justify-between border-b border-line bg-surface-muted px-3 py-1.5">
+            <h4 className="text-[11px] font-semibold uppercase tracking-wide text-content-secondary">
               {t(GROUP_LABEL_KEYS[group.key] ?? group.key)}
             </h4>
-            <span className="text-[10px] text-stone-400 dark:text-neutral-500 font-mono">
+            <span className="text-[10px] text-content-faint font-mono">
               {group.items.length}
             </span>
           </div>
-          <ul className="divide-y divide-stone-100 dark:divide-neutral-800">
+          <ul className="divide-y divide-line-subtle dark:divide-neutral-800">
             {group.items.map(path => {
               const isSelected = selectedPath === path;
               return (
@@ -123,7 +123,7 @@ export default function SkillResourceTree({ resources, selectedPath, onSelect }:
                     className={`w-full truncate px-3 py-2 text-left text-[11px] font-mono transition-colors focus:outline-none focus:ring-1 focus:ring-inset focus:ring-primary-500 ${
                       isSelected
                         ? 'bg-primary-50 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300'
-                        : 'text-stone-700 dark:text-neutral-200 hover:bg-white dark:hover:bg-neutral-800/60'
+                        : 'text-content-secondary hover:bg-white dark:hover:bg-surface-muted/60'
                     }`}
                     title={path}>
                     {path}
diff --git a/app/src/components/skills/SkillSearchBar.tsx b/app/src/components/skills/SkillSearchBar.tsx
index b4af2cd7a..1b08d2b35 100644
--- a/app/src/components/skills/SkillSearchBar.tsx
+++ b/app/src/components/skills/SkillSearchBar.tsx
@@ -13,7 +13,7 @@ export default function SkillSearchBar({ value, onChange, placeholder }: SkillSe
     <div className="relative">
       <div className="pointer-events-none absolute inset-y-0 left-3 flex items-center">
         <svg
-          className="h-4 w-4 text-stone-400 dark:text-neutral-500"
+          className="h-4 w-4 text-content-faint"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24">
@@ -30,13 +30,13 @@ export default function SkillSearchBar({ value, onChange, placeholder }: SkillSe
         value={value}
         onChange={e => onChange(e.target.value)}
         placeholder={effectivePlaceholder}
-        className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 py-2 pl-9 pr-9 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 focus:border-primary-300 focus:outline-none focus:ring-1 focus:ring-primary-200"
+        className="w-full rounded-xl border border-line bg-surface py-2 pl-9 pr-9 text-sm text-content placeholder-content-faint focus:border-primary-300 focus:outline-none focus:ring-1 focus:ring-primary-200"
       />
       {value && (
         <button
           type="button"
           onClick={() => onChange('')}
-          className="absolute inset-y-0 right-3 flex items-center text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:text-neutral-300">
+          className="absolute inset-y-0 right-3 flex items-center text-content-faint hover:text-content-secondary dark:text-content-secondary">
           <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               strokeLinecap="round"
diff --git a/app/src/components/skills/SkillSetupPrimitives.tsx b/app/src/components/skills/SkillSetupPrimitives.tsx
index bb589dfe8..3b45a43a9 100644
--- a/app/src/components/skills/SkillSetupPrimitives.tsx
+++ b/app/src/components/skills/SkillSetupPrimitives.tsx
@@ -59,9 +59,9 @@ interface SetupSettingRowProps {
 
 export function SetupSettingRow({ label, value, mono = false }: SetupSettingRowProps) {
   return (
-    <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5">
-      <span className="text-sm text-stone-700 dark:text-neutral-200">{label}</span>
-      <span className={`text-xs text-stone-500 dark:text-neutral-400 ${mono ? 'font-mono' : ''}`}>
+    <div className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2.5">
+      <span className="text-sm text-content-secondary">{label}</span>
+      <span className={`text-xs text-content-muted ${mono ? 'font-mono' : ''}`}>
         {value}
       </span>
     </div>
@@ -92,8 +92,8 @@ export function SetupSuccess({
       </div>
 
       <div>
-        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">{title}</h3>
-        <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+        <h3 className="text-sm font-semibold text-content">{title}</h3>
+        <p className="mt-1 text-xs text-content-muted leading-relaxed">
           {description}
         </p>
       </div>
@@ -108,7 +108,7 @@ export function SetupSuccess({
         <button
           type="button"
           onClick={onFinish}
-          className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-4 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
+          className="w-full rounded-xl border border-line bg-surface-muted px-4 py-2.5 text-sm font-medium text-content-secondary hover:bg-surface-hover dark:bg-surface-muted transition-colors">
           {finishLabel}
         </button>
       </div>
diff --git a/app/src/components/skills/SkillsExplorerTab.tsx b/app/src/components/skills/SkillsExplorerTab.tsx
index 2b15d68a6..19b898c5a 100644
--- a/app/src/components/skills/SkillsExplorerTab.tsx
+++ b/app/src/components/skills/SkillsExplorerTab.tsx
@@ -86,7 +86,7 @@ function SourceBadge({ source }: { source: string }) {
   };
   const colors =
     SOURCE_COLORS[source] ??
-    'bg-stone-50 text-stone-600 border-stone-200 dark:bg-neutral-800 dark:text-neutral-300 dark:border-neutral-700';
+    'bg-surface-muted text-content-secondary border-line';
   return (
     <span
       className={`inline-flex items-center rounded-full border px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider ${colors}`}>
@@ -127,7 +127,7 @@ function SkillFormatBadge({ format }: { format: string }) {
   const entry = FORMAT_MAP[lower] ?? {
     label: format || 'Skill',
     colors:
-      'bg-stone-50 text-stone-600 border-stone-200 dark:bg-neutral-800 dark:text-neutral-300 dark:border-neutral-700',
+      'bg-surface-muted text-content-secondary border-line',
   };
   return (
     <span
@@ -146,7 +146,7 @@ function SkillScopeBadge({ scope }: { scope: string }) {
         ? t('skills.explorer.scopeProject')
         : t('skills.explorer.scopeLegacy');
   return (
-    <span className="inline-flex items-center rounded-full border border-stone-200 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800 px-1.5 py-0.5 text-[9px] font-medium text-stone-500 dark:text-neutral-400">
+    <span className="inline-flex items-center rounded-full border border-line bg-surface-muted px-1.5 py-0.5 text-[9px] font-medium text-content-muted">
       {label}
     </span>
   );
@@ -175,12 +175,12 @@ function SkillTile({ skill, onUninstall, onClick }: SkillTileProps) {
           onClick();
         }
       }}
-      className="group flex flex-col justify-between rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 transition-colors cursor-pointer hover:bg-stone-50 dark:hover:bg-neutral-800/60">
+      className="group flex flex-col justify-between rounded-2xl border border-line bg-surface p-3 transition-colors cursor-pointer hover:bg-surface-hover">
       <div className="min-w-0">
         <div className="flex items-start justify-between gap-2">
-          <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-stone-100 dark:bg-neutral-800">
+          <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-surface-subtle">
             <svg
-              className="h-5 w-5 text-stone-500 dark:text-neutral-400"
+              className="h-5 w-5 text-content-muted"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -198,10 +198,10 @@ function SkillTile({ skill, onUninstall, onClick }: SkillTileProps) {
           </div>
         </div>
 
-        <h3 className="mt-2 line-clamp-1 text-sm font-semibold text-stone-900 dark:text-neutral-100">
+        <h3 className="mt-2 line-clamp-1 text-sm font-semibold text-content">
           {skill.name}
         </h3>
-        <p className="mt-0.5 line-clamp-2 text-[11px] leading-relaxed text-stone-500 dark:text-neutral-400">
+        <p className="mt-0.5 line-clamp-2 text-[11px] leading-relaxed text-content-muted">
           {skill.description || t('skills.explorer.noDescription')}
         </p>
 
@@ -210,12 +210,12 @@ function SkillTile({ skill, onUninstall, onClick }: SkillTileProps) {
             {skill.tags.slice(0, 3).map(tag => (
               <span
                 key={tag}
-                className="rounded-full bg-stone-100 dark:bg-neutral-800 px-1.5 py-0.5 text-[9px] font-medium text-stone-500 dark:text-neutral-400">
+                className="rounded-full bg-surface-subtle px-1.5 py-0.5 text-[9px] font-medium text-content-muted">
                 {tag}
               </span>
             ))}
             {skill.tags.length > 3 && (
-              <span className="rounded-full bg-stone-100 dark:bg-neutral-800 px-1.5 py-0.5 text-[9px] font-medium text-stone-400 dark:text-neutral-500">
+              <span className="rounded-full bg-surface-subtle px-1.5 py-0.5 text-[9px] font-medium text-content-faint">
                 +{skill.tags.length - 3}
               </span>
             )}
@@ -225,7 +225,7 @@ function SkillTile({ skill, onUninstall, onClick }: SkillTileProps) {
 
       <div className="mt-3 flex items-center justify-between gap-2">
         {skill.version && (
-          <span className="text-[10px] font-mono text-stone-400 dark:text-neutral-500">
+          <span className="text-[10px] font-mono text-content-faint">
             v{skill.version}
           </span>
         )}
@@ -283,11 +283,11 @@ function CatalogTile({ entry, installed, installing, onInstall, onClick }: Catal
       className={`group flex flex-col justify-between rounded-2xl border p-3 transition-colors cursor-pointer ${
         installed
           ? 'border-sage-300 bg-sage-50/60 dark:border-sage-500/30 dark:bg-sage-500/10'
-          : 'border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
+          : 'border-line bg-surface hover:bg-surface-hover'
       }`}>
       <div className="min-w-0">
         <div className="flex items-start justify-between gap-2">
-          <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-stone-100 dark:bg-neutral-800">
+          <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-surface-subtle">
             <svg
               className="h-5 w-5 text-primary-500"
               fill="none"
@@ -306,10 +306,10 @@ function CatalogTile({ entry, installed, installing, onInstall, onClick }: Catal
           </div>
         </div>
 
-        <h3 className="mt-2 line-clamp-1 text-sm font-semibold text-stone-900 dark:text-neutral-100">
+        <h3 className="mt-2 line-clamp-1 text-sm font-semibold text-content">
           {entry.name}
         </h3>
-        <p className="mt-0.5 line-clamp-2 text-[11px] leading-relaxed text-stone-500 dark:text-neutral-400">
+        <p className="mt-0.5 line-clamp-2 text-[11px] leading-relaxed text-content-muted">
           {entry.description}
         </p>
 
@@ -318,7 +318,7 @@ function CatalogTile({ entry, installed, installing, onInstall, onClick }: Catal
             {entry.tags.slice(0, 3).map(tag => (
               <span
                 key={tag}
-                className="rounded-full bg-stone-100 dark:bg-neutral-800 px-1.5 py-0.5 text-[9px] font-medium text-stone-500 dark:text-neutral-400">
+                className="rounded-full bg-surface-subtle px-1.5 py-0.5 text-[9px] font-medium text-content-muted">
                 {tag}
               </span>
             ))}
@@ -329,12 +329,12 @@ function CatalogTile({ entry, installed, installing, onInstall, onClick }: Catal
       <div className="mt-3 flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           {entry.version && (
-            <span className="text-[10px] font-mono text-stone-400 dark:text-neutral-500">
+            <span className="text-[10px] font-mono text-content-faint">
               v{entry.version}
             </span>
           )}
           {entry.author && (
-            <span className="text-[10px] text-stone-400 dark:text-neutral-500">{entry.author}</span>
+            <span className="text-[10px] text-content-faint">{entry.author}</span>
           )}
         </div>
         {installed ? (
@@ -392,12 +392,12 @@ function SkillDetailDialog({
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
       onClick={onClose}>
       <div
-        className="mx-4 w-full max-w-lg rounded-2xl border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 shadow-xl"
+        className="mx-4 w-full max-w-lg rounded-2xl border border-line bg-surface shadow-xl"
         onClick={e => e.stopPropagation()}>
-        <div className="flex items-start justify-between gap-3 border-b border-stone-100 dark:border-neutral-800 p-5">
+        <div className="flex items-start justify-between gap-3 border-b border-line-subtle p-5">
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2">
-              <h2 className="text-base font-semibold text-stone-900 dark:text-neutral-100 truncate">
+              <h2 className="text-base font-semibold text-content truncate">
                 {name}
               </h2>
               {installed && (
@@ -409,7 +409,7 @@ function SkillDetailDialog({
             <div className="mt-1.5 flex items-center gap-1.5">
               {source && <SourceBadge source={source} />}
               {category && (
-                <span className="inline-flex items-center rounded-full border border-stone-200 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800 px-1.5 py-0.5 text-[9px] font-medium text-stone-500 dark:text-neutral-400">
+                <span className="inline-flex items-center rounded-full border border-line bg-surface-muted px-1.5 py-0.5 text-[9px] font-medium text-content-muted">
                   {category}
                 </span>
               )}
@@ -421,7 +421,7 @@ function SkillDetailDialog({
             size="sm"
             aria-label={t('common.close')}
             onClick={onClose}
-            className="flex-shrink-0 text-stone-400 dark:text-neutral-500">
+            className="flex-shrink-0 text-content-faint">
             <svg
               className="h-5 w-5"
               fill="none"
@@ -436,10 +436,10 @@ function SkillDetailDialog({
         <div className="p-5 space-y-4">
           {description && (
             <div>
-              <h3 className="text-[11px] font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500 mb-1">
+              <h3 className="text-[11px] font-semibold uppercase tracking-wider text-content-faint mb-1">
                 {t('skills.detail.description')}
               </h3>
-              <p className="text-sm text-stone-700 dark:text-neutral-300 leading-relaxed whitespace-pre-wrap">
+              <p className="text-sm text-content-secondary leading-relaxed whitespace-pre-wrap">
                 {description}
               </p>
             </div>
@@ -448,40 +448,40 @@ function SkillDetailDialog({
           <div className="flex flex-wrap gap-x-6 gap-y-2">
             {version && (
               <div>
-                <span className="text-[10px] font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-content-faint">
                   {t('skills.detail.version')}
                 </span>
-                <p className="text-xs font-mono text-stone-700 dark:text-neutral-300">{version}</p>
+                <p className="text-xs font-mono text-content-secondary">{version}</p>
               </div>
             )}
             {author && (
               <div>
-                <span className="text-[10px] font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-content-faint">
                   {t('skills.detail.author')}
                 </span>
-                <p className="text-xs text-stone-700 dark:text-neutral-300">{author}</p>
+                <p className="text-xs text-content-secondary">{author}</p>
               </div>
             )}
             {license && (
               <div>
-                <span className="text-[10px] font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500">
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-content-faint">
                   {t('skills.detail.license')}
                 </span>
-                <p className="text-xs text-stone-700 dark:text-neutral-300">{license}</p>
+                <p className="text-xs text-content-secondary">{license}</p>
               </div>
             )}
           </div>
 
           {tags.length > 0 && (
             <div>
-              <h3 className="text-[11px] font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500 mb-1.5">
+              <h3 className="text-[11px] font-semibold uppercase tracking-wider text-content-faint mb-1.5">
                 {t('skills.detail.tags')}
               </h3>
               <div className="flex flex-wrap gap-1.5">
                 {tags.map(tag => (
                   <span
                     key={tag}
-                    className="rounded-full bg-stone-100 dark:bg-neutral-800 px-2 py-0.5 text-[10px] font-medium text-stone-600 dark:text-neutral-400">
+                    className="rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-medium text-content-secondary">
                     {tag}
                   </span>
                 ))}
@@ -491,10 +491,10 @@ function SkillDetailDialog({
 
           {downloadUrl && (
             <div>
-              <h3 className="text-[11px] font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500 mb-1">
+              <h3 className="text-[11px] font-semibold uppercase tracking-wider text-content-faint mb-1">
                 {t('skills.detail.source')}
               </h3>
-              <p className="text-[11px] font-mono text-stone-400 dark:text-neutral-500 break-all">
+              <p className="text-[11px] font-mono text-content-faint break-all">
                 {downloadUrl}
               </p>
             </div>
@@ -502,7 +502,7 @@ function SkillDetailDialog({
         </div>
 
         {!installed && onInstall && (
-          <div className="border-t border-stone-100 dark:border-neutral-800 p-4 flex justify-end">
+          <div className="border-t border-line-subtle p-4 flex justify-end">
             <Button variant="secondary" size="sm" disabled={installing} onClick={onInstall}>
               {installing ? t('skills.explorer.installing') : t('skills.explorer.install')}
             </Button>
@@ -726,14 +726,14 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
   const error = view === 'installed' ? skillsError : catalogError;
 
   return (
-    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 shadow-soft animate-fade-up">
+    <div className="rounded-2xl border border-line bg-surface p-3 shadow-soft animate-fade-up">
       <div className="px-1 pb-3 pt-1">
         <div className="flex items-center justify-between gap-2">
           <div className="min-w-0">
-            <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            <h2 className="text-sm font-semibold text-content">
               {t('skills.explorer.title')}
             </h2>
-            <p className="mt-0.5 text-[11px] leading-relaxed text-stone-500 dark:text-neutral-400">
+            <p className="mt-0.5 text-[11px] leading-relaxed text-content-muted">
               {t('skills.explorer.subtitle')}
             </p>
           </div>
@@ -802,7 +802,7 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
                 className={`rounded-full border px-2.5 py-1 text-[10px] font-medium transition-colors ${
                   active
                     ? 'border-primary-300 dark:border-primary-500/50 bg-primary-100 dark:bg-primary-500/20 text-primary-700 dark:text-primary-300'
-                    : 'border-stone-200 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300'
+                    : 'border-line bg-surface-muted text-content-faint hover:text-content-secondary'
                 }`}>
                 {src}
               </button>
@@ -815,7 +815,7 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
       <div className="flex gap-2 px-1 pb-3">
         <div className="relative flex-1">
           <svg
-            className="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-stone-400 dark:text-neutral-500"
+            className="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-content-faint"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -832,7 +832,7 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
             value={searchQuery}
             onChange={e => setSearchQuery(e.target.value)}
             placeholder={t('skills.explorer.searchPlaceholder')}
-            className="w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 py-2 pl-9 pr-3 text-xs text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+            className="w-full rounded-lg border border-line bg-surface py-2 pl-9 pr-3 text-xs text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
           />
         </div>
         {view === 'registry' && (
@@ -844,7 +844,7 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
             disabled={catalogLoading}
             title={t('skills.explorer.refreshRegistry')}
             aria-label={t('skills.explorer.refreshRegistry')}
-            className="flex-shrink-0 text-stone-500 dark:text-neutral-400 shadow-sm">
+            className="flex-shrink-0 text-content-muted shadow-sm">
             <svg
               className={`h-4 w-4 ${catalogLoading ? 'animate-spin' : ''}`}
               fill="none"
@@ -864,7 +864,7 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
       {/* Loading */}
       {loading && (
         <div className="flex items-center justify-center py-12">
-          <span className="h-5 w-5 animate-spin rounded-full border-2 border-stone-200 dark:border-neutral-700 border-t-primary-500" />
+          <span className="h-5 w-5 animate-spin rounded-full border-2 border-line border-t-primary-500" />
         </div>
       )}
 
@@ -915,7 +915,7 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
           )}
 
           {skills.length > 0 && sortedSkills.length === 0 && (
-            <p className="px-1 py-8 text-center text-xs text-stone-400 dark:text-neutral-500">
+            <p className="px-1 py-8 text-center text-xs text-content-faint">
               {t('skills.noResults')}
             </p>
           )}
@@ -983,7 +983,7 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
                 ))}
               </div>
               {catalogTotal > displayedCatalog.length && (
-                <p className="mt-3 px-1 text-center text-[11px] text-stone-400 dark:text-neutral-500">
+                <p className="mt-3 px-1 text-center text-[11px] text-content-faint">
                   {t('skills.explorer.showingOf')
                     .replace('{shown}', String(displayedCatalog.length))
                     .replace('{total}', catalogTotal.toLocaleString()) ||
diff --git a/app/src/components/skills/SmartIssuePicker.tsx b/app/src/components/skills/SmartIssuePicker.tsx
index fd1c33351..2f3703b2c 100644
--- a/app/src/components/skills/SmartIssuePicker.tsx
+++ b/app/src/components/skills/SmartIssuePicker.tsx
@@ -243,7 +243,7 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
       <div>
         <label
           htmlFor="smart-issue-picker-repo"
-          className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
+          className="block text-sm font-medium text-content-secondary dark:text-stone-300 mb-1">
           {t('settings.devWorkflow.githubRepository')}
         </label>
         {reposError && (
@@ -256,7 +256,7 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
           value={values.repo ?? ''}
           onChange={e => void onRepoSelect(e.target.value)}
           disabled={reposLoading}
-          className="w-full rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100">
+          className="w-full rounded border border-line-strong dark:border-stone-600 bg-surface px-3 py-2 text-sm text-content dark:text-stone-100">
           <option value="">
             {reposLoading
               ? t('settings.devWorkflow.loadingRepositories')
@@ -271,7 +271,7 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
       </div>
 
       {forkLoading && (
-        <div className="text-xs text-stone-500 dark:text-stone-400">
+        <div className="text-xs text-content-muted dark:text-stone-400">
           {t('settings.devWorkflow.detectingForkInfo')}
         </div>
       )}
@@ -293,7 +293,7 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
         <div>
           <label
             htmlFor="smart-issue-picker-branch"
-            className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
+            className="block text-sm font-medium text-content-secondary dark:text-stone-300 mb-1">
             {t('settings.devWorkflow.targetBranch')}
           </label>
           <select
@@ -301,7 +301,7 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
             value={values.target_branch ?? ''}
             onChange={e => onPatchInputs({ target_branch: e.target.value })}
             disabled={branchesLoading}
-            className="w-full rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100">
+            className="w-full rounded border border-line-strong dark:border-stone-600 bg-surface px-3 py-2 text-sm text-content dark:text-stone-100">
             {branches.map(b => (
               <option key={b.name} value={b.name}>
                 {b.name}
diff --git a/app/src/components/skills/UninstallSkillConfirmDialog.tsx b/app/src/components/skills/UninstallSkillConfirmDialog.tsx
index 869b9f300..eb302b826 100644
--- a/app/src/components/skills/UninstallSkillConfirmDialog.tsx
+++ b/app/src/components/skills/UninstallSkillConfirmDialog.tsx
@@ -105,17 +105,17 @@ export default function UninstallSkillConfirmDialog({ skill, onClose, onUninstal
       onMouseDown={e => {
         if (e.target === e.currentTarget && !submitting) onClose();
       }}>
-      <div className="w-[420px] max-w-[90vw] rounded-2xl bg-white dark:bg-neutral-900 p-5 shadow-2xl">
+      <div className="w-[420px] max-w-[90vw] rounded-2xl bg-surface p-5 shadow-2xl">
         <h2
           id="uninstall-skill-title"
-          className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+          className="text-base font-semibold text-content">
           {t('common.delete')} {skill.name}?
         </h2>
-        <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
+        <p className="mt-2 text-sm text-content-secondary">
           {t('skills.uninstall.description')}
         </p>
         {skill.location && (
-          <p className="mt-3 break-all rounded-lg bg-stone-50 dark:bg-neutral-800/60 px-3 py-2 font-mono text-[11px] text-stone-600 dark:text-neutral-300">
+          <p className="mt-3 break-all rounded-lg bg-surface-muted px-3 py-2 font-mono text-[11px] text-content-secondary">
             {skill.location.replace(/\/(WORKFLOW|SKILL)\.md$/i, '')}
           </p>
         )}
diff --git a/app/src/components/skills/VoiceSetupModal.tsx b/app/src/components/skills/VoiceSetupModal.tsx
index a434c40cc..af02d796d 100644
--- a/app/src/components/skills/VoiceSetupModal.tsx
+++ b/app/src/components/skills/VoiceSetupModal.tsx
@@ -100,7 +100,7 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
             </div>
           </SetupNotice>
 
-          <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+          <p className="text-xs text-content-muted leading-relaxed">
             {t('skills.setup.voice.sttReturnHint')}
           </p>
 
@@ -122,7 +122,7 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
             {t('skills.setup.voice.sttReady')}
           </SetupNotice>
 
-          <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+          <p className="text-xs text-content-muted leading-relaxed">
             {t('skills.setup.voice.enableDesc')}
           </p>
 
diff --git a/app/src/components/skills/WorkflowRunnerBody.tsx b/app/src/components/skills/WorkflowRunnerBody.tsx
index 8611d1bc6..bd92a0cb7 100644
--- a/app/src/components/skills/WorkflowRunnerBody.tsx
+++ b/app/src/components/skills/WorkflowRunnerBody.tsx
@@ -946,13 +946,13 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
     const commonLabel = (
       <label
         htmlFor={id}
-        className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
+        className="block text-sm font-medium text-content-secondary dark:text-stone-300 mb-1">
         {inp.name}
         {requiredMark}
       </label>
     );
     const desc = inp.description ? (
-      <p className="text-xs text-stone-500 dark:text-stone-400 mt-1">{inp.description}</p>
+      <p className="text-xs text-content-muted dark:text-stone-400 mt-1">{inp.description}</p>
     ) : null;
 
     // Rich picker: repo-shaped input → Composio github_repo picker.
@@ -988,7 +988,7 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
         <div key={inp.name}>
           <label
             htmlFor={id}
-            className="flex items-center gap-2 text-sm font-medium text-stone-700 dark:text-stone-300">
+            className="flex items-center gap-2 text-sm font-medium text-content-secondary dark:text-stone-300">
             <input
               id={id}
               type="checkbox"
@@ -1015,7 +1015,7 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
             value={typeof value === 'number' ? value : (value as string)}
             onChange={e => onChange(e.target.value)}
             placeholder={inp.required ? t('settings.skillsRunner.placeholder.required') : ''}
-            className="w-full rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100"
+            className="w-full rounded border border-line-strong dark:border-stone-600 bg-surface px-3 py-2 text-sm text-content dark:text-stone-100"
           />
           {desc}
         </div>
@@ -1032,7 +1032,7 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
           value={value as string}
           onChange={e => onChange(e.target.value)}
           placeholder={inp.required ? t('settings.skillsRunner.placeholder.required') : ''}
-          className="w-full rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100"
+          className="w-full rounded border border-line-strong dark:border-stone-600 bg-surface px-3 py-2 text-sm text-content dark:text-stone-100"
         />
         {desc}
       </div>
@@ -1042,7 +1042,7 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
   // ── Render ─────────────────────────────────────────────────────────
   return (
     <div className={className ?? 'space-y-6'}>
-      <div className="text-sm text-stone-600 dark:text-stone-400">
+      <div className="text-sm text-content-secondary dark:text-stone-400">
         {headerText ?? t('settings.developerMenu.skillsRunner.panelDesc')}
       </div>
 
@@ -1054,7 +1054,7 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
           <div className="flex items-center gap-2">
             <h2
               data-testid="skills-runner-skill-locked"
-              className="min-w-0 truncate text-lg font-semibold text-stone-900 dark:text-stone-100">
+              className="min-w-0 truncate text-lg font-semibold text-content dark:text-stone-100">
               {selectedWorkflow?.name || selectedSkillId}
             </h2>
           </div>
@@ -1062,7 +1062,7 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
           <>
             <label
               htmlFor="skills-runner-skill"
-              className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
+              className="block text-sm font-medium text-content-secondary dark:text-stone-300 mb-1">
               {t('settings.skillsRunner.skill')}
             </label>
             <select
@@ -1070,7 +1070,7 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
               value={selectedSkillId}
               onChange={e => setSelectedSkillId(e.target.value)}
               disabled={skillsLoading || skillsError !== null}
-              className="w-full rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100">
+              className="w-full rounded border border-line-strong dark:border-stone-600 bg-surface px-3 py-2 text-sm text-content dark:text-stone-100">
               <option value="">
                 {skillsLoading
                   ? t('settings.skillsRunner.loadingSkills')
@@ -1095,7 +1095,7 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
       {selectedSkillId && (
         <>
           {descLoading && (
-            <div className="text-sm text-stone-500 dark:text-stone-400">
+            <div className="text-sm text-content-muted dark:text-stone-400">
               {t('settings.skillsRunner.loadingDescription')}
             </div>
           )}
@@ -1111,15 +1111,15 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                     save a recurring schedule that snapshots them. */}
               <div
                 id="workflow-schedule"
-                className="space-y-4 rounded-2xl border border-stone-200/90 dark:border-stone-700/80 bg-gradient-to-br from-stone-50 via-white to-stone-100 dark:from-stone-900 dark:via-stone-900 dark:to-stone-800/80 px-4 py-4 shadow-soft">
-                <div className="rounded border border-stone-200 dark:border-stone-700 bg-white/70 dark:bg-stone-900/60 p-3">
-                  <p className="text-sm text-stone-700 dark:text-stone-300 whitespace-pre-wrap">
+                className="space-y-4 rounded-2xl border border-line/90 dark:border-stone-700/80 bg-gradient-to-br from-stone-50 via-white to-stone-100 dark:from-stone-900 dark:via-stone-900 dark:to-stone-800/80 px-4 py-4 shadow-soft">
+                <div className="rounded border border-line dark:border-stone-700 bg-surface/70 dark:bg-stone-900/60 p-3">
+                  <p className="text-sm text-content-secondary dark:text-stone-300 whitespace-pre-wrap">
                     {description.when_to_use}
                   </p>
                 </div>
 
                 {description.inputs.length === 0 ? (
-                  <p className="text-sm italic text-stone-500 dark:text-stone-400">
+                  <p className="text-sm italic text-content-muted dark:text-stone-400">
                     {t('settings.skillsRunner.noInputs')}
                   </p>
                 ) : (
@@ -1243,22 +1243,22 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                 </div>
 
                 {/* Same inputs, second action: run it on a schedule. */}
-                <div className="border-t border-stone-200/70 dark:border-stone-700/70 pt-3">
-                  <h3 className="mb-2 text-sm font-semibold text-stone-800 dark:text-stone-200">
+                <div className="border-t border-line/70 dark:border-stone-700/70 pt-3">
+                  <h3 className="mb-2 text-sm font-semibold text-content dark:text-stone-200">
                     {t('settings.skillsRunner.schedule.heading')}
                   </h3>
                   <div className="flex flex-col sm:flex-row sm:items-end gap-2">
                     <div className="flex-1">
                       <label
                         htmlFor="skills-runner-schedule"
-                        className="block text-xs font-semibold uppercase tracking-wide text-stone-600 dark:text-stone-300 mb-1.5">
+                        className="block text-xs font-semibold uppercase tracking-wide text-content-secondary dark:text-stone-300 mb-1.5">
                         {t('settings.skillsRunner.schedule.frequency')}
                       </label>
                       <select
                         id="skills-runner-schedule"
                         value={schedule}
                         onChange={e => setSchedule(e.target.value)}
-                        className="w-full rounded-xl border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500/40 focus:border-primary-500">
+                        className="w-full rounded-xl border border-line-strong dark:border-stone-600 bg-surface px-3 py-2 text-sm text-content dark:text-stone-100 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500/40 focus:border-primary-500">
                         {SCHEDULE_PRESETS.map(p => (
                           <option key={p.value} value={p.value}>
                             {t(p.labelKey)}
@@ -1291,19 +1291,19 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
               </div>
 
               {/* Second box — saved schedules for this workflow. */}
-              <div className="space-y-2 rounded-2xl border border-stone-200/90 dark:border-stone-700/80 bg-white dark:bg-stone-900 px-4 py-4 shadow-soft">
+              <div className="space-y-2 rounded-2xl border border-line/90 dark:border-stone-700/80 bg-surface dark:bg-stone-900 px-4 py-4 shadow-soft">
                 {/* Existing scheduled jobs for this skill */}
                 {scheduledJobsLoading ? (
-                  <p className="mt-3 text-xs text-stone-500 dark:text-stone-400">
+                  <p className="mt-3 text-xs text-content-muted dark:text-stone-400">
                     {t('settings.skillsRunner.schedule.loadingJobs')}
                   </p>
                 ) : scheduledJobs.length === 0 ? (
-                  <p className="mt-3 text-xs italic text-stone-500 dark:text-stone-400">
+                  <p className="mt-3 text-xs italic text-content-muted dark:text-stone-400">
                     {t('settings.skillsRunner.schedule.noJobs')}
                   </p>
                 ) : (
-                  <div className="mt-3 space-y-2 rounded-2xl border border-stone-200/80 dark:border-stone-800 bg-stone-50/70 dark:bg-stone-900/40 p-2.5">
-                    <div className="text-xs font-semibold uppercase tracking-wide text-stone-600 dark:text-stone-400 px-1">
+                  <div className="mt-3 space-y-2 rounded-2xl border border-line/80 dark:border-stone-800 bg-surface-muted/70 dark:bg-stone-900/40 p-2.5">
+                    <div className="text-xs font-semibold uppercase tracking-wide text-content-secondary dark:text-stone-400 px-1">
                       {t('settings.skillsRunner.schedule.existing')}
                     </div>
                     {/* Per-skill saved-schedule list — uses the shared
@@ -1355,19 +1355,19 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                           <div data-testid={`scheduled-job-${job.id}-inputs`} className="px-4 pt-2">
                             {jobInputs.length > 0 ? (
                               <div className="flex flex-wrap items-center gap-1">
-                                <span className="text-[10px] font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400">
+                                <span className="text-[10px] font-semibold uppercase tracking-wide text-content-muted dark:text-stone-400">
                                   {t('settings.skillsRunner.schedule.inputsLabel')}
                                 </span>
                                 {jobInputs.map(inp => (
                                   <span
                                     key={inp.key}
-                                    className="rounded bg-stone-100 dark:bg-stone-800 px-1.5 py-0.5 font-mono text-[10px] text-stone-700 dark:text-stone-300">
+                                    className="rounded bg-surface-subtle dark:bg-stone-800 px-1.5 py-0.5 font-mono text-[10px] text-content-secondary dark:text-stone-300">
                                     {inp.key}: {inp.value}
                                   </span>
                                 ))}
                               </div>
                             ) : (
-                              <span className="text-[10px] italic text-stone-400 dark:text-stone-500">
+                              <span className="text-[10px] italic text-content-faint dark:text-stone-500">
                                 {t('settings.skillsRunner.schedule.inputsNone')}
                               </span>
                             )}
@@ -1377,13 +1377,13 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                                 a disclosure toggle reveals up to 5 runs
                                 each with status badge + duration; click
                                 a run to expand its captured output. */}
-                          <div className="px-4 pb-3 border-t border-stone-100 dark:border-stone-800">
+                          <div className="px-4 pb-3 border-t border-line-subtle dark:border-stone-800">
                             <button
                               type="button"
                               onClick={() => toggleJobHistory(job.id)}
                               aria-expanded={Boolean(hist?.expanded)}
                               data-testid={`history-toggle-${job.id}`}
-                              className="mt-2 text-[11px] text-stone-600 dark:text-stone-400 hover:underline">
+                              className="mt-2 text-[11px] text-content-secondary dark:text-stone-400 hover:underline">
                               {hist?.expanded ? '▾' : '▸'}{' '}
                               {t('settings.skillsRunner.schedule.history')}
                               {hist?.runs?.length ? ` (${hist.runs.length})` : ''}
@@ -1391,11 +1391,11 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                             {hist?.expanded && (
                               <div className="mt-1.5 space-y-1">
                                 {hist.loading && hist.runs.length === 0 ? (
-                                  <p className="text-[11px] text-stone-500 dark:text-stone-400">
+                                  <p className="text-[11px] text-content-muted dark:text-stone-400">
                                     {t('settings.skillsRunner.schedule.historyLoading')}
                                   </p>
                                 ) : hist.runs.length === 0 ? (
-                                  <p className="text-[11px] italic text-stone-500 dark:text-stone-400">
+                                  <p className="text-[11px] italic text-content-muted dark:text-stone-400">
                                     {t('settings.skillsRunner.schedule.historyEmpty')}
                                   </p>
                                 ) : (
@@ -1408,24 +1408,24 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                                     return (
                                       <div
                                         key={r.id}
-                                        className="rounded bg-white dark:bg-stone-800">
+                                        className="rounded bg-surface">
                                         <button
                                           type="button"
                                           onClick={() => toggleHistoryRun(job.id, r.id)}
                                           aria-expanded={open}
                                           data-testid={`history-run-${job.id}-${r.id}`}
-                                          className="w-full flex items-center justify-between px-2 py-1.5 hover:bg-stone-50 dark:hover:bg-stone-700 rounded">
+                                          className="w-full flex items-center justify-between px-2 py-1.5 hover:bg-surface-muted dark:hover:bg-stone-700 rounded">
                                           <div className="flex items-center gap-2">
-                                            <span className="text-stone-400">
+                                            <span className="text-content-faint">
                                               {open ? '▾' : '▸'}
                                             </span>
-                                            <span className="text-stone-600 dark:text-stone-400">
+                                            <span className="text-content-secondary dark:text-stone-400">
                                               {new Date(r.started_at).toLocaleString()}
                                             </span>
                                           </div>
                                           <div className="flex items-center gap-2">
                                             {r.duration_ms != null && (
-                                              <span className="text-stone-500">
+                                              <span className="text-content-muted">
                                                 {(r.duration_ms / 1000).toFixed(1)}s
                                               </span>
                                             )}
@@ -1436,12 +1436,12 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                                           </div>
                                         </button>
                                         {open && r.output && (
-                                          <pre className="mx-2 mb-2 px-3 py-2 rounded-md bg-stone-100 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 text-[11px] text-stone-700 dark:text-stone-300 font-mono whitespace-pre-wrap break-words max-h-64 overflow-y-auto">
+                                          <pre className="mx-2 mb-2 px-3 py-2 rounded-md bg-surface-subtle dark:bg-stone-900 border border-line dark:border-stone-700 text-[11px] text-content-secondary dark:text-stone-300 font-mono whitespace-pre-wrap break-words max-h-64 overflow-y-auto">
                                             {r.output}
                                           </pre>
                                         )}
                                         {open && !r.output && (
-                                          <div className="mx-2 mb-2 px-3 py-2 text-[11px] italic text-stone-400 dark:text-stone-500">
+                                          <div className="mx-2 mb-2 px-3 py-2 text-[11px] italic text-content-faint dark:text-stone-500">
                                             {t('settings.skillsRunner.schedule.historyNoOutput')}
                                           </div>
                                         )}
@@ -1464,9 +1464,9 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
       )}
 
       {/* Recent runs (cross-skill if no skill picked; otherwise scoped) */}
-      <div className="pt-4 border-t border-stone-200 dark:border-stone-700 space-y-2">
+      <div className="pt-4 border-t border-line dark:border-stone-700 space-y-2">
         <div className="flex items-center justify-between">
-          <h3 className="text-sm font-semibold text-stone-700 dark:text-stone-300">
+          <h3 className="text-sm font-semibold text-content-secondary dark:text-stone-300">
             {selectedSkillId
               ? t('settings.skillsRunner.recentRuns.headingForSkill')
               : t('settings.skillsRunner.recentRuns.headingAll')}
@@ -1475,16 +1475,16 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
             variant="tertiary"
             size="xs"
             onClick={() => setRecentRunsRefreshNonce(n => n + 1)}
-            className="px-0 text-stone-600 hover:bg-transparent hover:underline dark:text-stone-400">
+            className="px-0 text-content-secondary hover:bg-transparent hover:underline dark:text-stone-400">
             {t('settings.skillsRunner.recentRuns.refresh')}
           </Button>
         </div>
         {recentRunsLoading ? (
-          <p className="text-xs text-stone-500 dark:text-stone-400">
+          <p className="text-xs text-content-muted dark:text-stone-400">
             {t('settings.skillsRunner.recentRuns.loading')}
           </p>
         ) : recentRuns.length === 0 ? (
-          <p className="text-xs italic text-stone-500 dark:text-stone-400">
+          <p className="text-xs italic text-content-muted dark:text-stone-400">
             {t('settings.skillsRunner.recentRuns.empty')}
           </p>
         ) : (
@@ -1505,29 +1505,29 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
               return (
                 <div
                   key={r.run_id}
-                  className="rounded border border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900 text-xs overflow-hidden">
+                  className="rounded border border-line dark:border-stone-700 bg-surface-muted dark:bg-stone-900 text-xs overflow-hidden">
                   <button
                     type="button"
                     onClick={() => toggleExpand(r.run_id)}
-                    className="w-full text-left px-3 py-2 hover:bg-stone-100 dark:hover:bg-stone-800 focus:outline-none focus:bg-stone-100 dark:focus:bg-stone-800"
+                    className="w-full text-left px-3 py-2 hover:bg-surface-subtle dark:hover:bg-stone-800 focus:outline-none focus:bg-surface-subtle dark:focus:bg-stone-800"
                     aria-expanded={expanded}>
                     <div className="flex items-center gap-2 mb-1">
-                      <span className="text-stone-500 dark:text-stone-400">
+                      <span className="text-content-muted dark:text-stone-400">
                         {expanded ? '▾' : '▸'}
                       </span>
                       <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${badgeClass}`}>
                         {r.status}
                       </span>
-                      <span className="font-mono text-stone-700 dark:text-stone-300">
+                      <span className="font-mono text-content-secondary dark:text-stone-300">
                         {r.run_id.slice(0, 8)}
                       </span>
-                      <span className="text-stone-600 dark:text-stone-400">{r.workflow_id}</span>
-                      <span className="text-stone-500 dark:text-stone-400 ml-auto">{dur}</span>
+                      <span className="text-content-secondary dark:text-stone-400">{r.workflow_id}</span>
+                      <span className="text-content-muted dark:text-stone-400 ml-auto">{dur}</span>
                     </div>
-                    <div className="text-stone-500 dark:text-stone-400 truncate pl-5">
+                    <div className="text-content-muted dark:text-stone-400 truncate pl-5">
                       {r.started}
                     </div>
-                    <div className="text-stone-400 dark:text-stone-500 font-mono text-[10px] truncate pl-5">
+                    <div className="text-content-faint dark:text-stone-500 font-mono text-[10px] truncate pl-5">
                       {r.log_path}
                     </div>
                   </button>
@@ -1547,16 +1547,16 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                   )}
 
                   {expanded && (
-                    <div className="border-t border-stone-200 dark:border-stone-700 bg-white dark:bg-stone-950">
+                    <div className="border-t border-line dark:border-stone-700 bg-surface dark:bg-stone-950">
                       {/* Live indicator while tailing */}
                       {!v?.complete && (
-                        <div className="px-3 py-1.5 text-[10px] text-stone-500 dark:text-stone-400 border-b border-stone-100 dark:border-stone-800 flex items-center gap-2">
+                        <div className="px-3 py-1.5 text-[10px] text-content-muted dark:text-stone-400 border-b border-line-subtle dark:border-stone-800 flex items-center gap-2">
                           <span className="inline-block h-1.5 w-1.5 rounded-full bg-blue-500 animate-pulse" />
                           <span>
                             {t('settings.skillsRunner.viewer.tailing')}
                             {v?.loading ? ` · ${t('settings.skillsRunner.viewer.fetching')}` : ''}
                           </span>
-                          <span className="ml-auto text-stone-400 dark:text-stone-500">
+                          <span className="ml-auto text-content-faint dark:text-stone-500">
                             {v?.offset ?? 0} B
                           </span>
                         </div>
@@ -1566,7 +1566,7 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                           {t('settings.skillsRunner.viewer.error')} {v.error}
                         </div>
                       )}
-                      <pre className="px-3 py-2 m-0 max-h-96 overflow-auto font-mono text-[11px] leading-snug whitespace-pre-wrap break-words text-stone-800 dark:text-stone-200">
+                      <pre className="px-3 py-2 m-0 max-h-96 overflow-auto font-mono text-[11px] leading-snug whitespace-pre-wrap break-words text-content dark:text-stone-200">
                         {v?.content ??
                           (v?.loading ? t('settings.skillsRunner.viewer.loading') : '')}
                       </pre>
diff --git a/app/src/components/skills/inputs/BranchPicker.tsx b/app/src/components/skills/inputs/BranchPicker.tsx
index 869864527..14f7ae42e 100644
--- a/app/src/components/skills/inputs/BranchPicker.tsx
+++ b/app/src/components/skills/inputs/BranchPicker.tsx
@@ -113,7 +113,7 @@ const BranchPicker = ({ value, onChange, repo, id, placeholder, disabled }: Bran
   }, [loadBranches]);
 
   const selectClass =
-    'w-full rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100';
+    'w-full rounded border border-line-strong dark:border-stone-600 bg-surface px-3 py-2 text-sm text-content dark:text-stone-100';
 
   return (
     <div>
diff --git a/app/src/components/skills/inputs/RepoPicker.tsx b/app/src/components/skills/inputs/RepoPicker.tsx
index f98667644..8045ea649 100644
--- a/app/src/components/skills/inputs/RepoPicker.tsx
+++ b/app/src/components/skills/inputs/RepoPicker.tsx
@@ -111,7 +111,7 @@ const RepoPicker = ({ value, onChange, id, placeholder, disabled }: RepoPickerPr
   // Common <select> classes — match the plain inputs in WorkflowRunnerBody
   // so the picker visually blends with the surrounding form.
   const selectClass =
-    'w-full rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100';
+    'w-full rounded border border-line-strong dark:border-stone-600 bg-surface px-3 py-2 text-sm text-content dark:text-stone-100';
 
   return (
     <div>
diff --git a/app/src/components/skills/skillIcons.tsx b/app/src/components/skills/skillIcons.tsx
index 00e72b270..3660cfac1 100644
--- a/app/src/components/skills/skillIcons.tsx
+++ b/app/src/components/skills/skillIcons.tsx
@@ -73,8 +73,8 @@ export function getChannelIcons(
       <SkillIconBadge
         icon={FaGlobe}
         label={t('skills.channelIcon.web')}
-        bgClassName="bg-stone-100 dark:bg-neutral-800"
-        iconClassName="text-stone-600 dark:text-neutral-300"
+        bgClassName="bg-surface-subtle"
+        iconClassName="text-content-secondary"
       />
     ),
     imessage: (
@@ -89,7 +89,7 @@ export function getChannelIcons(
       <span
         role="img"
         aria-label={t('skills.channelIcon.yuanbao')}
-        className="flex h-8 w-8 items-center justify-center rounded-xl shadow-sm ring-1 ring-black/5 bg-white">
+        className="flex h-8 w-8 items-center justify-center rounded-xl shadow-sm ring-1 ring-black/5 bg-surface">
         <YuanbaoIcon className="h-[18px] w-[18px]" />
       </span>
     ),
@@ -102,9 +102,9 @@ const CATEGORY_META: Record<
 > = {
   All: {
     icon: LuBlocks,
-    chipClassName: 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300',
-    iconClassName: 'text-stone-500 dark:text-neutral-400',
-    headingClassName: 'text-stone-500 dark:text-neutral-400',
+    chipClassName: 'bg-surface-subtle text-content-secondary',
+    iconClassName: 'text-content-muted',
+    headingClassName: 'text-content-muted',
   },
   'Built-in': {
     icon: LuSparkles,
@@ -150,9 +150,9 @@ const CATEGORY_META: Record<
   },
   Other: {
     icon: LuBlocks,
-    chipClassName: 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200',
-    iconClassName: 'text-stone-500 dark:text-neutral-400',
-    headingClassName: 'text-stone-500 dark:text-neutral-400',
+    chipClassName: 'bg-surface-subtle text-content-secondary',
+    iconClassName: 'text-content-muted',
+    headingClassName: 'text-content-muted',
   },
 };
 
diff --git a/app/src/components/ui/Button.test.tsx b/app/src/components/ui/Button.test.tsx
index 01b9b0523..d7c28c6f8 100644
--- a/app/src/components/ui/Button.test.tsx
+++ b/app/src/components/ui/Button.test.tsx
@@ -17,15 +17,16 @@ describe('Button', () => {
   it('applies secondary variant classes', () => {
     render(<Button variant="secondary">Cancel</Button>);
     const btn = screen.getByRole('button', { name: 'Cancel' });
-    expect(btn.className).toMatch(/border-neutral-300/);
-    expect(btn.className).toMatch(/bg-neutral-0/);
+    // Migrated to semantic surface/line tokens (themeable).
+    expect(btn.className).toMatch(/border-line-strong/);
+    expect(btn.className).toMatch(/bg-surface/);
   });
 
   it('applies tertiary variant classes', () => {
     render(<Button variant="tertiary">Skip</Button>);
     const btn = screen.getByRole('button', { name: 'Skip' });
     expect(btn.className).toMatch(/bg-transparent/);
-    expect(btn.className).toMatch(/text-neutral-700/);
+    expect(btn.className).toMatch(/text-content-secondary/);
   });
 
   it('renders a filled coral button for primary + tone="danger"', () => {
@@ -36,7 +37,7 @@ describe('Button', () => {
     );
     const btn = screen.getByRole('button', { name: 'Delete' });
     expect(btn.className).toMatch(/bg-coral-500/);
-    expect(btn.className).toMatch(/text-white/);
+    expect(btn.className).toMatch(/text-content-inverted/);
   });
 
   it('renders a coral outline for secondary + tone="danger"', () => {
diff --git a/app/src/components/ui/Button.tsx b/app/src/components/ui/Button.tsx
index d27ad8579..5c56145e9 100644
--- a/app/src/components/ui/Button.tsx
+++ b/app/src/components/ui/Button.tsx
@@ -37,24 +37,22 @@ const BASE =
 const VARIANTS: Record<ButtonVariant, Record<ButtonTone, string>> = {
   primary: {
     default:
-      'bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700 focus-visible:ring-primary-500/25 ' +
-      'dark:bg-primary-500 dark:hover:bg-primary-400 dark:active:bg-primary-600',
+      'bg-primary-500 text-content-inverted hover:bg-primary-600 active:bg-primary-700 focus-visible:ring-primary-500/25 ' +
+      'dark:hover:bg-primary-400 dark:active:bg-primary-600',
     danger:
-      'bg-coral-500 text-white hover:bg-coral-600 active:bg-coral-700 focus-visible:ring-coral-500/25 ' +
-      'dark:bg-coral-500 dark:hover:bg-coral-400 dark:active:bg-coral-600',
+      'bg-coral-500 text-content-inverted hover:bg-coral-600 active:bg-coral-700 focus-visible:ring-coral-500/25 ' +
+      'dark:hover:bg-coral-400 dark:active:bg-coral-600',
   },
   secondary: {
     default:
-      'bg-neutral-0 text-neutral-900 border border-neutral-300 hover:bg-neutral-50 focus-visible:ring-primary-500/25 ' +
-      'dark:bg-neutral-900 dark:text-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-800',
+      'bg-surface text-content border border-line-strong hover:bg-surface-hover focus-visible:ring-primary-500/25',
     danger:
       'bg-transparent text-coral-600 border border-coral-300/50 hover:bg-coral-50 focus-visible:ring-coral-500/25 ' +
       'dark:text-coral-400 dark:border-coral-500/40 dark:hover:bg-coral-500/10',
   },
   tertiary: {
     default:
-      'bg-transparent text-neutral-700 hover:bg-neutral-100 focus-visible:ring-primary-500/25 ' +
-      'dark:text-neutral-200 dark:hover:bg-neutral-800',
+      'bg-transparent text-content-secondary hover:bg-surface-hover focus-visible:ring-primary-500/25',
     danger:
       'bg-transparent text-coral-600 hover:bg-coral-50 focus-visible:ring-coral-500/25 ' +
       'dark:text-coral-400 dark:hover:bg-coral-500/10',
diff --git a/app/src/components/ui/Card.tsx b/app/src/components/ui/Card.tsx
index a0b0a318d..35f802e8a 100644
--- a/app/src/components/ui/Card.tsx
+++ b/app/src/components/ui/Card.tsx
@@ -10,24 +10,17 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const VARIANTS: Record<CardVariant, string> = {
-  surface: 'bg-white border border-neutral-200 dark:bg-neutral-900 dark:border-neutral-800',
-  elevated:
-    'bg-white border border-neutral-200 shadow-soft ' +
-    'dark:bg-neutral-900 dark:border-neutral-800 dark:shadow-none',
-  outlined: 'bg-transparent border border-neutral-200 dark:border-neutral-800',
-  subtle: 'bg-neutral-50 border border-neutral-100 dark:bg-neutral-900/50 dark:border-neutral-800',
+  surface: 'bg-surface border border-line',
+  elevated: 'bg-surface border border-line shadow-soft dark:shadow-none',
+  outlined: 'bg-transparent border border-line',
+  subtle: 'bg-surface-muted border border-line-subtle',
 };
 
 const PADDINGS: Record<CardPadding, string> = { none: '', sm: 'p-3', md: 'p-4', lg: 'p-6' };
 
 const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   const { variant = 'surface', padding = 'md', className, children, ...rest } = props;
-  const classes = [
-    'rounded-xl text-neutral-900 dark:text-neutral-100',
-    VARIANTS[variant],
-    PADDINGS[padding],
-    className ?? '',
-  ]
+  const classes = ['rounded-xl text-content', VARIANTS[variant], PADDINGS[padding], className ?? '']
     .filter(Boolean)
     .join(' ');
   return (
diff --git a/app/src/components/ui/Input.tsx b/app/src/components/ui/Input.tsx
index a1d49a8c9..0a45c07c4 100644
--- a/app/src/components/ui/Input.tsx
+++ b/app/src/components/ui/Input.tsx
@@ -17,12 +17,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const { inputSize = 'md', invalid, className, ...rest } = props;
   const ring = invalid
     ? 'border-coral-400 focus:border-coral-500 focus:ring-coral-500/20 dark:border-coral-500/60'
-    : 'border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20 dark:border-neutral-700 dark:focus:border-primary-400';
+    : 'border-line-strong focus:border-primary-500 focus:ring-primary-500/20 dark:focus:border-primary-400';
   const classes = [
-    'w-full border bg-white text-neutral-900 placeholder-neutral-400',
+    'w-full border bg-surface text-content placeholder-content-faint',
     'transition-colors duration-150 focus:outline-none focus:ring-2',
-    'disabled:opacity-50 disabled:bg-neutral-50',
-    'dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder-neutral-500 dark:disabled:bg-neutral-800',
+    'disabled:opacity-50 disabled:bg-surface-muted',
     SIZES[inputSize],
     ring,
     className ?? '',
diff --git a/app/src/components/ui/LoadingState.tsx b/app/src/components/ui/LoadingState.tsx
index 2373aa810..9efe26d20 100644
--- a/app/src/components/ui/LoadingState.tsx
+++ b/app/src/components/ui/LoadingState.tsx
@@ -35,10 +35,8 @@ interface CenteredLoadingStateProps {
 export function CenteredLoadingState({ label, className }: CenteredLoadingStateProps) {
   return (
     <div className={`flex items-center justify-center py-8 ${className ?? ''}`}>
-      <Spinner className="w-5 h-5 text-stone-500 dark:text-neutral-400" />
-      {label ? (
-        <span className="ml-3 text-sm text-stone-500 dark:text-neutral-400">{label}</span>
-      ) : null}
+      <Spinner className="w-5 h-5 text-content-muted" />
+      {label ? <span className="ml-3 text-sm text-content-muted">{label}</span> : null}
     </div>
   );
 }
diff --git a/app/src/components/ui/ModalShell.tsx b/app/src/components/ui/ModalShell.tsx
index 500284e57..ddfba8252 100644
--- a/app/src/components/ui/ModalShell.tsx
+++ b/app/src/components/ui/ModalShell.tsx
@@ -52,9 +52,9 @@ export function ModalShell({
         aria-modal="true"
         aria-labelledby={labelledBy ?? titleId}
         tabIndex={-1}
-        className={`w-full ${maxWidthClassName} mx-4 rounded-2xl bg-white dark:bg-neutral-900 shadow-xl overflow-hidden animate-fade-up focus:outline-none`}
+        className={`w-full ${maxWidthClassName} mx-4 rounded-2xl bg-surface shadow-xl overflow-hidden animate-fade-up focus:outline-none`}
         onClick={event => event.stopPropagation()}>
-        <div className="flex items-center justify-between border-b border-stone-100 dark:border-neutral-800 px-5 py-4">
+        <div className="flex items-center justify-between border-b border-line-subtle px-5 py-4">
           <div className="flex min-w-0 items-center gap-3">
             {icon ? (
               <div className="w-9 h-9 rounded-xl bg-primary-50 flex items-center justify-center text-primary-600 flex-shrink-0">
@@ -62,14 +62,10 @@ export function ModalShell({
               </div>
             ) : null}
             <div className="min-w-0">
-              <h2
-                id={titleId}
-                className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+              <h2 id={titleId} className="text-sm font-semibold text-content">
                 {title}
               </h2>
-              {subtitle ? (
-                <p className="text-xs text-stone-500 dark:text-neutral-400">{subtitle}</p>
-              ) : null}
+              {subtitle ? <p className="text-xs text-content-muted">{subtitle}</p> : null}
             </div>
           </div>
           <Button
diff --git a/app/src/components/upsell/UpsellBanner.tsx b/app/src/components/upsell/UpsellBanner.tsx
index c9163f4ae..4bd145939 100644
--- a/app/src/components/upsell/UpsellBanner.tsx
+++ b/app/src/components/upsell/UpsellBanner.tsx
@@ -24,14 +24,14 @@ const VARIANT_STYLES = {
     icon: 'text-amber-400',
     title: 'text-amber-700 dark:text-amber-300',
     text: 'text-amber-600 dark:text-amber-300',
-    cta: 'bg-amber-500 hover:bg-amber-400 text-white',
+    cta: 'bg-amber-500 hover:bg-amber-400 text-content-inverted',
   },
   upgrade: {
     container: 'bg-amber-50 dark:bg-amber-500/15 border-amber-200 dark:border-amber-800',
     icon: 'text-amber-400',
     title: 'text-amber-700 dark:text-amber-300',
     text: 'text-amber-600 dark:text-amber-300',
-    cta: 'bg-amber-500 hover:bg-amber-400 text-white',
+    cta: 'bg-amber-500 hover:bg-amber-400 text-content-inverted',
   },
 };
 
@@ -80,7 +80,7 @@ export default function UpsellBanner({
         {dismissible && onDismiss && (
           <button
             onClick={onDismiss}
-            className="p-1 rounded text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 transition-colors"
+            className="p-1 rounded text-content-faint hover:text-content-secondary transition-colors"
             aria-label={t('common.dismiss')}>
             <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
diff --git a/app/src/components/userErrors/UserErrorCenter.tsx b/app/src/components/userErrors/UserErrorCenter.tsx
index 9532eeae8..91e74e53b 100644
--- a/app/src/components/userErrors/UserErrorCenter.tsx
+++ b/app/src/components/userErrors/UserErrorCenter.tsx
@@ -68,9 +68,9 @@ export function UserErrorCenter() {
           role="dialog"
           aria-label={t('userErrors.title')}
           data-testid="user-error-panel"
-          className="w-80 max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-amber-300 bg-white shadow-lg dark:border-amber-700 dark:bg-neutral-900">
+          className="w-80 max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-amber-300 bg-surface shadow-lg dark:border-amber-700">
           <div className="flex items-center justify-between border-b border-amber-200 px-3 py-2 dark:border-amber-800">
-            <span className="text-sm font-semibold text-ink dark:text-neutral-100">
+            <span className="text-sm font-semibold text-ink dark:text-content">
               {t('userErrors.title')}
             </span>
             <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-900 dark:bg-amber-900 dark:text-amber-100">
@@ -78,16 +78,16 @@ export function UserErrorCenter() {
             </span>
           </div>
 
-          <ul className="max-h-96 divide-y divide-neutral-100 overflow-auto dark:divide-neutral-800">
+          <ul className="max-h-96 divide-y divide-line-subtle overflow-auto dark:divide-neutral-800">
             {active.map(entry => (
               <li key={entry.id} className="px-3 py-2.5" data-testid="user-error-item">
-                <p className="text-sm font-semibold text-ink dark:text-neutral-100">
+                <p className="text-sm font-semibold text-ink dark:text-content">
                   {t(entry.titleKey)}
                 </p>
-                <p className="mt-0.5 text-xs text-ink-soft dark:text-neutral-300">
+                <p className="mt-0.5 text-xs text-ink-soft dark:text-content-secondary">
                   {t(entry.bodyKey)}
                 </p>
-                <p className="mt-1 text-[11px] text-neutral-500 dark:text-neutral-400">
+                <p className="mt-1 text-[11px] text-content-muted">
                   {t(`userErrors.scope.${entry.scope}`, entry.scope)}
                   {' · '}
                   {new Date(entry.lastSeenAt).toLocaleTimeString()}
@@ -107,7 +107,7 @@ export function UserErrorCenter() {
                     type="button"
                     data-testid="user-error-dismiss"
                     onClick={() => dispatch(dismissUserError({ id: entry.id }))}
-                    className="rounded-md px-2.5 py-1 text-xs font-medium text-ink-soft hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800">
+                    className="rounded-md px-2.5 py-1 text-xs font-medium text-ink-soft hover:bg-surface-hover dark:text-content-secondary">
                     {t('userErrors.dismiss')}
                   </button>
                 </div>
@@ -122,7 +122,7 @@ export function UserErrorCenter() {
         data-testid="user-error-trigger"
         aria-label={t('userErrors.title')}
         onClick={() => setOpen(o => !o)}
-        className="relative flex h-11 w-11 items-center justify-center rounded-full border border-amber-300 bg-white text-lg shadow-md hover:bg-amber-50 dark:border-amber-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
+        className="relative flex h-11 w-11 items-center justify-center rounded-full border border-amber-300 bg-surface text-lg shadow-md hover:bg-amber-50 dark:border-amber-700 dark:hover:bg-surface-muted">
         <span aria-hidden>⚠️</span>
         <span
           data-testid="user-error-badge"
diff --git a/app/src/components/walkthrough/WalkthroughTooltip.tsx b/app/src/components/walkthrough/WalkthroughTooltip.tsx
index 51139aab6..bf5e9ff5e 100644
--- a/app/src/components/walkthrough/WalkthroughTooltip.tsx
+++ b/app/src/components/walkthrough/WalkthroughTooltip.tsx
@@ -33,9 +33,9 @@ const WalkthroughTooltip = ({
       className="w-80 font-sans animate-in fade-in slide-in-from-bottom-2 duration-300"
       style={{ animation: 'tooltipEnter 0.3s ease-out' }}>
       {/* Frosted card */}
-      <div className="bg-white/95 dark:bg-neutral-900/95 backdrop-blur-md rounded-2xl shadow-xl border border-stone-200/60 dark:border-neutral-800 overflow-hidden">
+      <div className="bg-surface/95 backdrop-blur-md rounded-2xl shadow-xl border border-line/60 dark:border-line overflow-hidden">
         {/* Progress bar — thin, smooth fill */}
-        <div className="h-1 bg-stone-100 dark:bg-neutral-800">
+        <div className="h-1 bg-surface-subtle">
           <div
             className="h-full bg-gradient-to-r from-[#2F6EF4] to-[#5B9BF3] transition-all duration-500 ease-out rounded-r-full"
             style={{ width: `${progress}%` }}
@@ -50,11 +50,11 @@ const WalkthroughTooltip = ({
             </span>
             <div className="flex-1 min-w-0">
               {step.title && (
-                <h3 className="text-[15px] font-semibold text-stone-900 dark:text-neutral-100 leading-snug">
+                <h3 className="text-[15px] font-semibold text-content leading-snug">
                   {step.title}
                 </h3>
               )}
-              <span className="text-[11px] text-stone-400 dark:text-neutral-500 tabular-nums">
+              <span className="text-[11px] text-content-faint tabular-nums">
                 {t('walkthrough.tooltip.stepCounter')
                   .replace('{n}', String(index + 1))
                   .replace('{total}', String(size))}
@@ -63,7 +63,7 @@ const WalkthroughTooltip = ({
           </div>
 
           {/* Body */}
-          <div className="text-[13px] text-stone-600 dark:text-neutral-300 leading-relaxed mb-5">
+          <div className="text-[13px] text-content-secondary leading-relaxed mb-5">
             {step.content}
           </div>
 
@@ -73,7 +73,7 @@ const WalkthroughTooltip = ({
             {!isLastStep && (
               <button
                 {...skipProps}
-                className="text-[11px] text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 transition-colors px-2 py-1.5 rounded-lg hover:bg-stone-100 dark:hover:bg-neutral-800/60">
+                className="text-[11px] text-content-faint hover:text-content-secondary transition-colors px-2 py-1.5 rounded-lg hover:bg-surface-hover">
                 {t('walkthrough.tooltip.skip')}
               </button>
             )}
@@ -84,7 +84,7 @@ const WalkthroughTooltip = ({
             {index > 0 && (
               <button
                 {...backProps}
-                className="text-[12px] text-stone-500 dark:text-neutral-400 hover:text-stone-800 dark:hover:text-neutral-100 border border-stone-200 dark:border-neutral-800 hover:border-stone-300 dark:hover:border-neutral-700 transition-all px-4 py-2 rounded-xl hover:shadow-sm">
+                className="text-[12px] text-content-muted hover:text-content border border-line hover:border-line-strong dark:hover:border-line-strong transition-all px-4 py-2 rounded-xl hover:shadow-sm">
                 {t('common.back')}
               </button>
             )}
diff --git a/app/src/components/webhooks/ComposeioTriggerHistory.tsx b/app/src/components/webhooks/ComposeioTriggerHistory.tsx
index b7118dec7..e9b1a3446 100644
--- a/app/src/components/webhooks/ComposeioTriggerHistory.tsx
+++ b/app/src/components/webhooks/ComposeioTriggerHistory.tsx
@@ -31,10 +31,10 @@ export default function ComposeioTriggerHistory({ entries }: ComposeioTriggerHis
   if (entries.length === 0) {
     return (
       <div className="space-y-3">
-        <h3 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+        <h3 className="text-lg font-semibold text-content">
           {t('webhooks.composioHistory.title')}
         </h3>
-        <p className="rounded-xl border border-dashed border-stone-200 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800/60 px-4 py-6 text-center text-sm text-stone-500 dark:text-neutral-400">
+        <p className="rounded-xl border border-dashed border-line bg-surface-muted px-4 py-6 text-center text-sm text-content-muted">
           {t('webhooks.composioHistory.empty')}
         </p>
       </div>
@@ -43,17 +43,15 @@ export default function ComposeioTriggerHistory({ entries }: ComposeioTriggerHis
 
   return (
     <div className="space-y-3">
-      <h3 className="text-lg font-semibold text-stone-900">
+      <h3 className="text-lg font-semibold text-content">
         {t('webhooks.composioHistory.title')}{' '}
-        <span className="text-sm font-normal text-stone-400 dark:text-neutral-500">
-          ({entries.length})
-        </span>
+        <span className="text-sm font-normal text-content-faint">({entries.length})</span>
       </h3>
       <div className="space-y-3">
         {entries.map(entry => (
           <article
             key={`${entry.metadata_uuid}-${entry.received_at_ms}`}
-            className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-stone-50/60 dark:bg-neutral-800/60 p-4">
+            className="rounded-2xl border border-line bg-surface-muted/60 dark:bg-surface-muted/60 p-4">
             <div className="flex flex-wrap items-center gap-2">
               <span className="rounded-full bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-700">
                 {entry.toolkit}
@@ -61,20 +59,20 @@ export default function ComposeioTriggerHistory({ entries }: ComposeioTriggerHis
               <span className="rounded-full bg-sage-50 px-2.5 py-1 text-xs font-medium text-sage-700">
                 {formatTriggerLabel(entry.trigger)}
               </span>
-              <span className="text-xs text-stone-500 dark:text-neutral-400">
+              <span className="text-xs text-content-muted">
                 {formatTimestamp(entry.received_at_ms)}
               </span>
             </div>
 
-            <dl className="mt-3 grid gap-2 text-sm text-stone-700 dark:text-neutral-200 md:grid-cols-2">
+            <dl className="mt-3 grid gap-2 text-sm text-content-secondary md:grid-cols-2">
               <div>
-                <dt className="text-xs uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+                <dt className="text-xs uppercase tracking-wide text-content-faint">
                   {t('webhooks.composioHistory.metadataId')}
                 </dt>
                 <dd className="font-mono text-xs break-all">{entry.metadata_id}</dd>
               </div>
               <div>
-                <dt className="text-xs uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+                <dt className="text-xs uppercase tracking-wide text-content-faint">
                   {t('webhooks.composioHistory.metadataUuid')}
                 </dt>
                 <dd className="font-mono text-xs break-all">{entry.metadata_uuid}</dd>
@@ -82,7 +80,7 @@ export default function ComposeioTriggerHistory({ entries }: ComposeioTriggerHis
             </dl>
 
             <div className="mt-3">
-              <div className="mb-2 text-xs uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+              <div className="mb-2 text-xs uppercase tracking-wide text-content-faint">
                 {t('webhooks.composioHistory.payload')}
               </div>
               <pre className="max-h-64 overflow-auto rounded-xl bg-stone-900 px-3 py-3 text-xs text-stone-100">
diff --git a/app/src/components/webhooks/TunnelList.tsx b/app/src/components/webhooks/TunnelList.tsx
index e08302609..728fa9eb4 100644
--- a/app/src/components/webhooks/TunnelList.tsx
+++ b/app/src/components/webhooks/TunnelList.tsx
@@ -63,7 +63,7 @@ export default function TunnelList({
     <div className="space-y-4">
       {/* Header */}
       <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold text-stone-900">{t('webhooks.tunnels.title')}</h3>
+        <h3 className="text-lg font-semibold text-content">{t('webhooks.tunnels.title')}</h3>
         <div className="flex gap-2">
           <Button variant="tertiary" size="sm" onClick={onRefresh} disabled={loading}>
             {loading ? t('common.loading') : t('common.refresh')}
@@ -76,13 +76,13 @@ export default function TunnelList({
 
       {/* Create form */}
       {showCreate && (
-        <div className="p-4 rounded-xl border border-stone-200 bg-white space-y-3">
+        <div className="p-4 rounded-xl border border-line bg-surface space-y-3">
           <input
             type="text"
             placeholder={t('webhooks.tunnels.namePlaceholder')}
             value={newName}
             onChange={e => setNewName(e.target.value)}
-            className="w-full px-3 py-2 text-sm border border-stone-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:border-primary-500"
+            className="w-full px-3 py-2 text-sm border border-line rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:border-primary-500"
             autoFocus
           />
           <input
@@ -90,7 +90,7 @@ export default function TunnelList({
             placeholder={t('webhooks.tunnels.descriptionPlaceholder')}
             value={newDesc}
             onChange={e => setNewDesc(e.target.value)}
-            className="w-full px-3 py-2 text-sm border border-stone-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:border-primary-500"
+            className="w-full px-3 py-2 text-sm border border-line rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:border-primary-500"
           />
           <div className="flex gap-2 justify-end">
             <Button variant="tertiary" size="sm" onClick={() => setShowCreate(false)}>
@@ -124,7 +124,7 @@ export default function TunnelList({
 
       {/* Tunnel list */}
       {tunnels.length === 0 && !loading && (
-        <p className="text-sm text-stone-500 text-center py-8">{t('webhooks.tunnels.empty')}</p>
+        <p className="text-sm text-content-muted text-center py-8">{t('webhooks.tunnels.empty')}</p>
       )}
 
       <div className="space-y-2">
@@ -214,14 +214,16 @@ function TunnelCard({
   };
 
   return (
-    <div className="p-4 rounded-xl border border-stone-200 bg-white hover:border-stone-300 transition-colors">
+    <div className="p-4 rounded-xl border border-line bg-surface hover:border-line-strong transition-colors">
       <div className="flex items-start justify-between">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 flex-wrap">
-            <h4 className="text-sm font-medium text-stone-900 truncate">{tunnel.name}</h4>
+            <h4 className="text-sm font-medium text-content truncate">{tunnel.name}</h4>
             <span
               className={`inline-flex items-center px-1.5 py-0.5 text-xs rounded-full ${
-                tunnel.isActive ? 'bg-sage-100 text-sage-700' : 'bg-stone-100 text-stone-500'
+                tunnel.isActive
+                  ? 'bg-sage-100 text-sage-700'
+                  : 'bg-surface-subtle text-content-muted'
               }`}>
               {tunnel.isActive ? t('webhooks.tunnels.active') : t('webhooks.tunnels.inactive')}
             </span>
@@ -237,10 +239,10 @@ function TunnelCard({
             )}
           </div>
           {tunnel.description && (
-            <p className="mt-1 text-xs text-stone-500">{tunnel.description}</p>
+            <p className="mt-1 text-xs text-content-muted">{tunnel.description}</p>
           )}
           <div className="mt-2 flex items-center gap-2">
-            <code className="text-xs text-stone-500 bg-stone-50 px-2 py-1 rounded font-mono truncate max-w-[400px]">
+            <code className="text-xs text-content-muted bg-surface-muted px-2 py-1 rounded font-mono truncate max-w-[400px]">
               {webhookUrl || 'Resolving backend URL…'}
             </code>
             <Button
diff --git a/app/src/components/webhooks/WebhookActivity.tsx b/app/src/components/webhooks/WebhookActivity.tsx
index fa941dec0..488380dac 100644
--- a/app/src/components/webhooks/WebhookActivity.tsx
+++ b/app/src/components/webhooks/WebhookActivity.tsx
@@ -14,11 +14,11 @@ const METHOD_COLORS: Record<string, string> = {
 };
 
 function statusColor(code: number | null): string {
-  if (code === null) return 'text-stone-400';
+  if (code === null) return 'text-content-faint';
   if (code >= 200 && code < 300) return 'text-sage-600';
   if (code >= 400 && code < 500) return 'text-amber-600';
   if (code >= 500) return 'text-coral-600';
-  return 'text-stone-600';
+  return 'text-content-secondary';
 }
 
 function formatTime(ts: number): string {
@@ -34,33 +34,35 @@ export default function WebhookActivity({ activity }: WebhookActivityProps) {
   if (activity.length === 0) {
     return (
       <div className="space-y-3">
-        <h3 className="text-lg font-semibold text-stone-900">{t('webhooks.activity.title')}</h3>
-        <p className="text-sm text-stone-500 text-center py-6">{t('webhooks.activity.empty')}</p>
+        <h3 className="text-lg font-semibold text-content">{t('webhooks.activity.title')}</h3>
+        <p className="text-sm text-content-muted text-center py-6">
+          {t('webhooks.activity.empty')}
+        </p>
       </div>
     );
   }
 
   return (
     <div className="space-y-3">
-      <h3 className="text-lg font-semibold text-stone-900">
+      <h3 className="text-lg font-semibold text-content">
         {t('webhooks.activity.title')}{' '}
-        <span className="text-sm font-normal text-stone-400">({activity.length})</span>
+        <span className="text-sm font-normal text-content-faint">({activity.length})</span>
       </h3>
       <div className="space-y-1">
         {activity.map(entry => (
           <div
             key={entry.correlation_id}
-            className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-stone-50 transition-colors text-sm">
-            <span className="text-xs text-stone-400 font-mono w-20 shrink-0">
+            className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-surface-muted transition-colors text-sm">
+            <span className="text-xs text-content-faint font-mono w-20 shrink-0">
               {formatTime(entry.timestamp)}
             </span>
             <span
               className={`text-xs font-mono font-medium px-1.5 py-0.5 rounded w-14 text-center shrink-0 ${
-                METHOD_COLORS[entry.method] || 'text-stone-600 bg-stone-50'
+                METHOD_COLORS[entry.method] || 'text-content-secondary bg-surface-muted'
               }`}>
               {entry.method}
             </span>
-            <span className="text-stone-700 truncate flex-1 font-mono text-xs">
+            <span className="text-content-secondary truncate flex-1 font-mono text-xs">
               {entry.path || '/'}
             </span>
             <span
@@ -72,7 +74,7 @@ export default function WebhookActivity({ activity }: WebhookActivityProps) {
                 {entry.skill_id}
               </span>
             )}
-            <span className="text-xs text-stone-400 truncate max-w-[120px]">
+            <span className="text-xs text-content-faint truncate max-w-[120px]">
               {entry.tunnel_name}
             </span>
           </div>
diff --git a/app/src/components/worktree/WorktreeActions.tsx b/app/src/components/worktree/WorktreeActions.tsx
index b51328bb3..fbb939545 100644
--- a/app/src/components/worktree/WorktreeActions.tsx
+++ b/app/src/components/worktree/WorktreeActions.tsx
@@ -32,8 +32,7 @@ export interface WorktreeActionsProps {
 
 const btnBase =
   'rounded-md border px-2 py-0.5 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50';
-const btnNeutral =
-  'border-stone-200 text-stone-600 hover:bg-stone-50 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800';
+const btnNeutral = 'border-line text-content-secondary hover:bg-surface-hover';
 const btnDanger =
   'border-coral-200 text-coral-600 hover:bg-coral-50 dark:border-coral-500/40 dark:text-coral-300 dark:hover:bg-coral-500/10';
 
@@ -176,7 +175,7 @@ export default function WorktreeActions({
 
       {diffOpen ? (
         <pre
-          className="max-h-48 overflow-auto rounded-md border border-stone-200 bg-stone-50 p-2 font-mono text-[10px] leading-snug text-stone-700 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-300"
+          className="max-h-48 overflow-auto rounded-md border border-line bg-surface-muted p-2 font-mono text-[10px] leading-snug text-content-secondary"
           data-testid="worktree-diff-output">
           {diffLoading
             ? t('worktree.diffLoading')
diff --git a/app/src/features/human/HumanPage.tsx b/app/src/features/human/HumanPage.tsx
index 23241c0b8..4672fc443 100644
--- a/app/src/features/human/HumanPage.tsx
+++ b/app/src/features/human/HumanPage.tsx
@@ -41,7 +41,7 @@ const HumanPage = () => {
   );
 
   return (
-    <div className="absolute inset-0 bg-stone-100 dark:bg-neutral-950 overflow-hidden">
+    <div className="absolute inset-0 bg-surface-subtle dark:bg-surface-canvas overflow-hidden">
       <div
         className="pointer-events-none absolute inset-0"
         style={{
@@ -66,7 +66,7 @@ const HumanPage = () => {
         </div>
       </div>
 
-      <label className="absolute top-4 left-4 z-10 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm border border-stone-300 dark:border-neutral-700 text-xs text-stone-700 dark:text-neutral-200 shadow-soft cursor-pointer select-none">
+      <label className="absolute top-4 left-4 z-10 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-surface/80 backdrop-blur-sm border border-line-strong text-xs text-content-secondary shadow-soft cursor-pointer select-none">
         <input
           type="checkbox"
           checked={speakReplies}
@@ -79,7 +79,7 @@ const HumanPage = () => {
       {/* Chat panel — kept on the right (the Human page is intentionally the
           one surface that leaves the root sidebar's dynamic region empty). */}
       <div className="absolute right-4 top-4 bottom-4 z-10 flex items-center">
-        <aside className="w-[420px] h-[min(760px,100%)] rounded-2xl border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 shadow-soft flex flex-col overflow-hidden">
+        <aside className="w-[420px] h-[min(760px,100%)] rounded-2xl border border-line-strong bg-surface shadow-soft flex flex-col overflow-hidden">
           {/* Right-rail chat, but its thread list is surfaced in the (otherwise
               empty) root sidebar so the Human page shows the user's threads. */}
           <Conversations variant="sidebar" composer="mic-cloud" projectThreadList />
diff --git a/app/src/features/human/MicComposer.tsx b/app/src/features/human/MicComposer.tsx
index c68036018..eabee519c 100644
--- a/app/src/features/human/MicComposer.tsx
+++ b/app/src/features/human/MicComposer.tsx
@@ -731,7 +731,7 @@ export function MicComposer({
                 setDeviceMenuOpen(open => !open);
               }}
               disabled={state !== 'idle'}
-              className="w-8 h-8 flex items-center justify-center rounded-full border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 hover:border-stone-300 dark:hover:border-neutral-600 transition-colors shadow-soft disabled:opacity-40 disabled:cursor-not-allowed">
+              className="w-8 h-8 flex items-center justify-center rounded-full border border-line bg-surface text-content-muted hover:text-content-secondary hover:border-line-strong dark:hover:border-neutral-600 transition-colors shadow-soft disabled:opacity-40 disabled:cursor-not-allowed">
               <svg
                 className="w-4 h-4"
                 fill="none"
@@ -771,7 +771,7 @@ export function MicComposer({
                       transform: 'translateX(-50%)',
                       zIndex: 99999,
                     }}
-                    className="w-64 rounded-xl border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 shadow-soft py-1">
+                    className="w-64 rounded-xl border border-line bg-surface shadow-soft py-1">
                     {devices.map(d => {
                       const selected = d.deviceId === selectedDeviceId;
                       return (
@@ -786,8 +786,8 @@ export function MicComposer({
                           }}
                           className={`w-full flex items-center gap-2 px-3 py-2 text-left text-xs transition-colors ${
                             selected
-                              ? 'bg-primary-50 dark:bg-primary-900/20 text-stone-900 dark:text-neutral-100'
-                              : 'text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800'
+                              ? 'bg-primary-50 dark:bg-primary-900/20 text-content'
+                              : 'text-content-secondary hover:bg-surface-hover'
                           }`}>
                           <span className="flex-1 min-w-0 truncate">{d.label}</span>
                           {selected && (
@@ -821,7 +821,7 @@ export function MicComposer({
             title={t('chat.switchToText')}
             onClick={onSwitchToText}
             disabled={state !== 'idle'}
-            className="w-8 h-8 flex items-center justify-center rounded-full border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 hover:border-stone-300 dark:hover:border-neutral-600 transition-colors shadow-soft disabled:opacity-40 disabled:cursor-not-allowed">
+            className="w-8 h-8 flex items-center justify-center rounded-full border border-line bg-surface text-content-muted hover:text-content-secondary hover:border-line-strong dark:hover:border-neutral-600 transition-colors shadow-soft disabled:opacity-40 disabled:cursor-not-allowed">
             <svg
               className="w-4 h-4"
               fill="none"
@@ -838,7 +838,7 @@ export function MicComposer({
             </svg>
           </button>
         )}
-        <span className="text-xs text-stone-500 dark:text-neutral-400 select-none">{label}</span>
+        <span className="text-xs text-content-muted select-none">{label}</span>
       </div>
     </div>
   );
diff --git a/app/src/features/human/SubMascotLayer.tsx b/app/src/features/human/SubMascotLayer.tsx
index 7b7e69c95..52e153d9f 100644
--- a/app/src/features/human/SubMascotLayer.tsx
+++ b/app/src/features/human/SubMascotLayer.tsx
@@ -165,7 +165,7 @@ export const SubMascotLayer: FC<SubMascotLayerProps> = ({ entries }) => {
               </div>
             </div>
             <div
-              className="mt-1 max-w-[88px] rounded-md border border-white/70 bg-white/85 px-1.5 py-0.5 text-center text-[9px] leading-tight text-stone-600 shadow-soft backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/85 dark:text-neutral-200"
+              className="mt-1 max-w-[88px] rounded-md border border-white/70 bg-surface/85 px-1.5 py-0.5 text-center text-[9px] leading-tight text-content-secondary shadow-soft backdrop-blur dark:border-line-strong dark:bg-surface/85 dark:text-neutral-200"
               data-testid="sub-mascot-bubble"
               title={`${model.label} — ${model.activity}`}>
               <div className="truncate font-medium">{model.label}</div>
diff --git a/app/src/features/privacy/WhatLeavesLink.tsx b/app/src/features/privacy/WhatLeavesLink.tsx
index cd076bb4e..e4ed66a83 100644
--- a/app/src/features/privacy/WhatLeavesLink.tsx
+++ b/app/src/features/privacy/WhatLeavesLink.tsx
@@ -18,7 +18,7 @@ const WhatLeavesLink = ({ label, className }: WhatLeavesLinkProps) => {
   const resolvedLabel = label ?? t('privacy.whatLeaves.link.label');
   const [open, setOpen] = useState(false);
   const base =
-    'text-sm text-neutral-500 underline underline-offset-2 hover:text-neutral-700 ' +
+    'text-sm text-content-muted underline underline-offset-2 hover:text-content-secondary ' +
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/25 ' +
     'focus-visible:ring-offset-2 rounded-sm';
   return (
diff --git a/app/src/features/privacy/WhatLeavesMyComputerSheet.tsx b/app/src/features/privacy/WhatLeavesMyComputerSheet.tsx
index bd70a7153..e6762faae 100644
--- a/app/src/features/privacy/WhatLeavesMyComputerSheet.tsx
+++ b/app/src/features/privacy/WhatLeavesMyComputerSheet.tsx
@@ -42,29 +42,27 @@ const WhatLeavesMyComputerSheet = ({ open, onClose }: WhatLeavesMyComputerSheetP
         role="dialog"
         aria-modal="true"
         aria-labelledby="what-leaves-title"
-        className="relative w-full max-w-lg bg-neutral-0 rounded-2xl shadow-large border border-neutral-200 p-6 animate-fade-up outline-none">
+        className="relative w-full max-w-lg bg-neutral-0 rounded-2xl shadow-large border border-line p-6 animate-fade-up outline-none">
         <div className="flex items-start justify-between gap-4 mb-4">
           <div>
-            <h2
-              id="what-leaves-title"
-              className="font-display text-2xl text-neutral-900 leading-tight">
+            <h2 id="what-leaves-title" className="font-title text-2xl text-content leading-tight">
               {WHAT_LEAVES_HEADLINE}
             </h2>
           </div>
         </div>
-        <p className="text-sm text-neutral-600 mb-5 max-w-md">{WHAT_LEAVES_SUBHEAD}</p>
+        <p className="text-sm text-content-secondary mb-5 max-w-md">{WHAT_LEAVES_SUBHEAD}</p>
 
         <ul className="space-y-3 mb-6">
           {WHAT_LEAVES_ITEMS.map(item => (
-            <li key={item.id} className="rounded-xl border border-neutral-200 bg-neutral-50 p-4">
-              <p className="text-sm font-medium text-neutral-900">{item.title}</p>
-              <p className="text-sm text-neutral-600 mt-1 leading-relaxed">{item.body}</p>
+            <li key={item.id} className="rounded-xl border border-line bg-surface-muted p-4">
+              <p className="text-sm font-medium text-content">{item.title}</p>
+              <p className="text-sm text-content-secondary mt-1 leading-relaxed">{item.body}</p>
             </li>
           ))}
         </ul>
 
         <div className="flex items-center justify-between gap-3">
-          <p className="text-xs text-neutral-500">{t('privacy.description')}</p>
+          <p className="text-xs text-content-muted">{t('privacy.description')}</p>
           <Button variant="primary" size="md" onClick={onClose}>
             {t('common.ok')}
           </Button>
diff --git a/app/src/features/skills/skillCardStatus.ts b/app/src/features/skills/skillCardStatus.ts
index ea9a15053..944062321 100644
--- a/app/src/features/skills/skillCardStatus.ts
+++ b/app/src/features/skills/skillCardStatus.ts
@@ -14,7 +14,7 @@ export function offlineStatus(label = 'Offline', ctaLabel = 'Enable'): SkillCard
     connectionStatus: 'offline',
     statusDot: 'bg-stone-400',
     statusLabel: label,
-    statusColor: 'text-stone-500',
+    statusColor: 'text-content-muted',
     ctaLabel,
     ctaVariant: 'sage',
   };
@@ -73,7 +73,7 @@ export function enabledStatus(): SkillCardStatusDescriptor {
     connectionStatus: 'disconnected',
     statusDot: 'bg-stone-400',
     statusLabel: 'Enabled',
-    statusColor: 'text-stone-400',
+    statusColor: 'text-content-faint',
     ctaLabel: 'Manage',
     ctaVariant: 'primary',
   };
diff --git a/app/src/index.css b/app/src/index.css
index c7f2a89e4..7c08a7f5d 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -2,6 +2,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap');
 
+/* Canonical theme tokens (colour + font-role CSS variables). Must precede the
+   Tailwind layers so the var-backed utility colours resolve. */
+@import './styles/tokens.css';
+
 /* Tailwind CSS imports */
 @tailwind base;
 @tailwind components;
@@ -11,16 +15,8 @@
 @layer base {
   /* Set default font and improve text rendering */
   html {
-    font-family:
-      'Inter',
-      -apple-system,
-      BlinkMacSystemFont,
-      'SF Pro Display',
-      'SF Pro Text',
-      system-ui,
-      'Segoe UI',
-      Roboto,
-      sans-serif;
+    /* Body font role — themeable via styles/tokens.css (--font-body) */
+    font-family: var(--font-body);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
@@ -31,7 +27,9 @@
     @apply font-sans;
     line-height: 1.6;
 
-    background: var(--color-background);
+    /* Themes may supply a decorative `--app-gradient`; fall back to the flat
+       canvas colour when they don't. */
+    background: var(--app-gradient, var(--color-background));
     color: var(--color-text-primary);
     position: absolute;
     top: 0;
@@ -113,8 +111,9 @@
   h4,
   h5,
   h6 {
-    @apply font-sans font-semibold;
-    @apply text-stone-900;
+    /* Heading font role + semantic text colour (themeable). */
+    @apply font-heading font-semibold;
+    @apply text-content;
     line-height: 1.2;
   }
 
@@ -164,7 +163,7 @@
   /* Button variants for consistent interaction design */
   .btn-primary {
     @apply bg-primary-500 hover:bg-primary-600 active:bg-primary-700;
-    @apply text-white font-medium;
+    @apply text-content-inverted font-medium;
     @apply px-4 py-2 rounded-lg;
     @apply transition-all duration-200 ease-in-out;
     @apply shadow-soft hover:shadow-medium;
@@ -173,16 +172,16 @@
   }
 
   .btn-secondary {
-    @apply bg-stone-900 hover:bg-stone-800 active:bg-stone-700;
-    @apply text-white font-medium;
-    @apply px-4 py-2 rounded-lg border border-stone-300;
+    @apply bg-surface hover:bg-surface-hover active:bg-surface-strong;
+    @apply text-content font-medium;
+    @apply px-4 py-2 rounded-lg border border-line-strong;
     @apply transition-all duration-200 ease-in-out;
     @apply focus:outline-none;
   }
 
   .btn-success {
     @apply bg-sage-500 hover:bg-sage-600 active:bg-sage-700;
-    @apply text-white font-medium;
+    @apply text-content-inverted font-medium;
     @apply px-4 py-2 rounded-lg;
     @apply transition-all duration-200 ease-in-out;
     @apply shadow-soft hover:shadow-medium;
@@ -191,7 +190,7 @@
 
   .btn-danger {
     @apply bg-coral-500 hover:bg-coral-600 active:bg-coral-700;
-    @apply text-white font-medium;
+    @apply text-content-inverted font-medium;
     @apply px-4 py-2 rounded-lg;
     @apply transition-all duration-200 ease-in-out;
     @apply shadow-soft hover:shadow-medium;
@@ -200,8 +199,8 @@
 
   /* Card components for content organization */
   .card {
-    @apply bg-white rounded-xl shadow-soft border border-stone-200;
-    @apply p-6 text-stone-900;
+    @apply bg-surface rounded-xl shadow-soft border border-line;
+    @apply p-6 text-content;
     @apply transition-shadow duration-200;
   }
 
@@ -211,24 +210,22 @@
 
   .app-dotted-canvas {
     background-color: transparent;
-    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.3) 1px, transparent 1px);
-    background-size: 18px 18px;
-    background-position: 0 0;
-  }
-
-  :root.dark .app-dotted-canvas {
+    /* Dots follow the theme's content colour at low alpha (dark dots on light
+       themes, light dots on dark themes, accent-tinted on custom themes). */
     background-image: radial-gradient(
       circle at center,
-      rgba(255, 255, 255, 0.08) 1px,
+      rgb(var(--content) / 0.1) 1px,
       transparent 1px
     );
+    background-size: 18px 18px;
+    background-position: 0 0;
   }
 
   /* Input components with consistent styling */
   .input-primary {
     @apply w-full px-4 py-3 rounded-lg;
-    @apply border border-stone-200 focus:border-primary-500;
-    @apply bg-white text-stone-900 placeholder-stone-400;
+    @apply border border-line focus:border-primary-500;
+    @apply bg-surface text-content placeholder-content-faint;
     @apply transition-colors duration-200;
     @apply focus:outline-none;
   }
@@ -241,7 +238,7 @@
 
   .status-offline {
     @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
-    @apply bg-stone-100 text-stone-600;
+    @apply bg-surface-subtle text-content-secondary;
   }
 
   .status-warning {
@@ -252,12 +249,12 @@
   /* Navigation styles */
   .nav-item {
     @apply flex items-center px-4 py-2 text-sm font-medium rounded-lg;
-    @apply text-stone-600 hover:text-stone-900 hover:bg-stone-100;
+    @apply text-content-secondary hover:text-content hover:bg-surface-hover;
     @apply transition-colors duration-150;
   }
 
   .nav-item-active {
-    @apply nav-item bg-stone-100 text-stone-900;
+    @apply nav-item bg-surface-subtle text-content;
   }
 
   /* Message/chat specific styles */
@@ -271,12 +268,12 @@
   }
 
   .message-received {
-    @apply message-bubble bg-stone-200/80 text-stone-900;
+    @apply message-bubble bg-surface-strong text-content;
   }
 
   /* Loading states */
   .loading-pulse {
-    @apply animate-pulse bg-stone-100 rounded;
+    @apply animate-pulse bg-surface-subtle rounded;
   }
 
   /* Crypto price styling */
@@ -293,62 +290,20 @@
   }
 
   /* ============================================
-     Dark-mode overrides for @apply'd component classes
+     Dark-mode overrides for @apply'd component classes.
+     Most classes are now token-driven (semantic surface/content/line) and flip
+     automatically, so only the tinted status badges — which keep a light accent
+     tint in light mode — still need an explicit dark override.
      ============================================ */
-  :root.dark .card,
-  :root.dark .card-hover {
-    background-color: theme('colors.neutral.900');
-    border-color: theme('colors.neutral.800');
-    color: theme('colors.neutral.100');
-  }
-
-  :root.dark .input-primary {
-    background-color: theme('colors.neutral.900');
-    border-color: theme('colors.neutral.700');
-    color: theme('colors.neutral.100');
-  }
-
-  :root.dark .input-primary::placeholder {
-    color: theme('colors.neutral.500');
-  }
-
   :root.dark .status-online {
     background-color: rgba(52, 199, 89, 0.15);
     color: theme('colors.sage.300');
   }
 
-  :root.dark .status-offline {
-    background-color: theme('colors.neutral.800');
-    color: theme('colors.neutral.300');
-  }
-
   :root.dark .status-warning {
     background-color: rgba(232, 167, 40, 0.15);
     color: theme('colors.amber.300');
   }
-
-  :root.dark .nav-item {
-    color: theme('colors.neutral.400');
-  }
-
-  :root.dark .nav-item:hover {
-    color: theme('colors.neutral.100');
-    background-color: theme('colors.neutral.800');
-  }
-
-  :root.dark .nav-item-active {
-    background-color: theme('colors.neutral.800');
-    color: theme('colors.neutral.100');
-  }
-
-  :root.dark .message-received {
-    background-color: theme('colors.neutral.800');
-    color: theme('colors.neutral.100');
-  }
-
-  :root.dark .loading-pulse {
-    background-color: theme('colors.neutral.800');
-  }
 }
 
 /* Utility layer - Custom utilities */
@@ -393,14 +348,14 @@
   /* Glass effect for light theme */
   .glass {
     backdrop-filter: blur(12px);
-    background: rgba(255, 255, 255, 0.8);
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    /* Themeable: surface tint + line border follow the active theme. */
+    background: rgb(var(--surface) / 0.8);
+    border: 1px solid rgb(var(--line) / 0.6);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   }
 
   :root.dark .glass {
-    background: rgba(23, 23, 23, 0.7);
-    border-color: rgba(255, 255, 255, 0.08);
+    /* Only the shadow needs a darker variant; colours come from the tokens. */
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   }
 
@@ -517,27 +472,31 @@
   color-scheme: light;
 }
 
-/* Command palette + help overlay — scoped tokens. */
+/*
+ * Command palette + help overlay tokens — now thin aliases over the canonical
+ * theme tokens in styles/tokens.css, so the palette themes along with the rest
+ * of the app. Only the shadow (not a colour token) stays literal.
+ */
 :root {
-  --cmd-accent: #2f6ef4;
-  --cmd-surface: #ffffff;
-  --cmd-surface-elevated: #f5f5f5;
-  --cmd-foreground: #171717;
-  --cmd-foreground-muted: #737373;
-  --cmd-border: #e5e5e5;
+  --cmd-accent: rgb(var(--primary-500));
+  --cmd-surface: rgb(var(--surface));
+  --cmd-surface-elevated: rgb(var(--surface-subtle));
+  --cmd-foreground: rgb(var(--content));
+  --cmd-foreground-muted: rgb(var(--content-muted));
+  --cmd-border: rgb(var(--line));
   --cmd-ring: var(--cmd-accent);
-  --cmd-overlay: rgba(0, 0, 0, 0.5);
+  --cmd-overlay: rgb(var(--surface-overlay) / 0.5);
   --cmd-shadow-palette: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
 :root.dark {
-  --cmd-accent: #60a5fa;
-  --cmd-surface: #171717;
-  --cmd-surface-elevated: #262626;
-  --cmd-foreground: #fafafa;
-  --cmd-foreground-muted: #a3a3a3;
-  --cmd-border: #404040;
-  --cmd-overlay: rgba(0, 0, 0, 0.7);
+  --cmd-accent: rgb(var(--primary-400));
+  --cmd-surface: rgb(var(--surface));
+  --cmd-surface-elevated: rgb(var(--surface-muted));
+  --cmd-foreground: rgb(var(--content));
+  --cmd-foreground-muted: rgb(var(--content-muted));
+  --cmd-border: rgb(var(--line-strong));
+  --cmd-overlay: rgb(var(--surface-overlay) / 0.7);
   --cmd-shadow-palette: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.25);
 }
 
diff --git a/app/src/lib/channels/definitions.ts b/app/src/lib/channels/definitions.ts
index 0d58670e2..3de1c8a97 100644
--- a/app/src/lib/channels/definitions.ts
+++ b/app/src/lib/channels/definitions.ts
@@ -10,7 +10,7 @@ export const STATUS_STYLES: Record<ChannelConnectionStatus, { label: string; cla
     },
     disconnected: {
       label: 'Disconnected',
-      className: 'bg-stone-100 text-stone-500 border-stone-200',
+      className: 'bg-surface-subtle text-content-muted border-line',
     },
     error: { label: 'Error', className: 'bg-coral-500/10 text-coral-700 border-coral-500/30' },
   };
diff --git a/app/src/lib/i18n/ar.ts b/app/src/lib/i18n/ar.ts
index 42d34231b..d98c92e65 100644
--- a/app/src/lib/i18n/ar.ts
+++ b/app/src/lib/i18n/ar.ts
@@ -4636,6 +4636,52 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'تمت الموافقة مرة واحدة',
   'settings.approvalHistory.decision.approveAlways': 'مسموح دائمًا',
   'settings.approvalHistory.decision.deny': 'مرفوض',
+  'settings.theme.variantLight': 'فاتح',
+  'settings.theme.variantDark': 'داكن',
+  'settings.theme.variantAuto': 'تلقائي',
+  'settings.theme.variantAria': 'نمط السمة',
+  'settings.theme.backdropHeading': 'الخلفية',
+  'settings.theme.backdrop.mesh': 'شبكة',
+  'settings.theme.backdrop.solid': 'لون موحّد',
+  'settings.theme.backdrop.image': 'صورة',
+  'settings.theme.backdropImageUrl': 'رابط صورة الخلفية',
+  'settings.theme.backdropDots': 'إظهار نقاط الخلفية',
+  'settings.theme.backdropHint':
+    'تعرض الشبكة التدرّج المتحرك؛ ويستخدم اللون الموحّد خلفية ثابتة؛ وترسم الصورة خلفيتك الخاصة.',
+  'settings.theme.autoForkHint': 'تعديل سمة جاهزة يحفظ تغييراتك تلقائيًا كسمة مخصّصة جديدة.',
+  'settings.theme.title': 'استوديو السمات',
+  'settings.theme.menuDesc': 'خصّص الألوان والخطوط بالكامل، أو اختر سمة جاهزة.',
+  'settings.theme.presetsHeading': 'السمات',
+  'settings.theme.builtInBadge': 'جاهزة',
+  'settings.theme.customBadge': 'مخصّصة',
+  'settings.theme.customizeHint':
+    'السمات الجاهزة للقراءة فقط. انسخ هذه السمة لتعديل ألوانها وخطوطها.',
+  'settings.theme.duplicate': 'نسخ وتخصيص',
+  'settings.theme.copyName': '{name} (مخصّصة)',
+  'settings.theme.importedName': 'سمة مستوردة',
+  'settings.theme.contrastWarn': 'تباين منخفض بين النص والخلفية — قد يصعب قراءة هذه السمة.',
+  'settings.theme.group.surfaces': 'الأسطح',
+  'settings.theme.group.text': 'النص',
+  'settings.theme.group.borders': 'الحدود',
+  'settings.theme.group.accents': 'ألوان التمييز',
+  'settings.theme.showShades': 'إظهار جميع درجات التمييز',
+  'settings.theme.hideShades': 'إخفاء جميع درجات التمييز',
+  'settings.theme.fontsHeading': 'الخطوط',
+  'settings.theme.fontRole.title': 'العنوان',
+  'settings.theme.fontRole.heading': 'العنوان الفرعي',
+  'settings.theme.fontRole.body': 'المتن',
+  'settings.theme.fontRole.mono': 'خط أحادي المسافة',
+  'settings.theme.fontRole.serif': 'خط مذيّل',
+  'settings.theme.fontCurrent': 'الحالي',
+  'settings.theme.actions': 'إدارة السمة',
+  'settings.theme.reset': 'إعادة تعيين التجاوزات',
+  'settings.theme.delete': 'حذف السمة',
+  'settings.theme.export': 'نسخ JSON',
+  'settings.theme.copied': 'تم النسخ!',
+  'settings.theme.import': 'استيراد سمة',
+  'settings.theme.importHint': 'الصق JSON الخاص بسمة مُصدَّرة لإضافتها كسمة مخصّصة.',
+  'settings.theme.importApply': 'استيراد',
+  'settings.theme.importError': 'تعذّر تحليل JSON لهذه السمة.',
   'settings.appearance.title': 'المظهر',
   'settings.appearance.themeHeading': 'الموضوع',
   'settings.appearance.themeAria': 'الموضوع',
diff --git a/app/src/lib/i18n/bn.ts b/app/src/lib/i18n/bn.ts
index a06f882db..a4ab5ef54 100644
--- a/app/src/lib/i18n/bn.ts
+++ b/app/src/lib/i18n/bn.ts
@@ -4730,6 +4730,55 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'একবার অনুমোদিত',
   'settings.approvalHistory.decision.approveAlways': 'সর্বদা অনুমোদিত',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.variantLight': 'হালকা',
+  'settings.theme.variantDark': 'গাঢ়',
+  'settings.theme.variantAuto': 'স্বয়ংক্রিয়',
+  'settings.theme.variantAria': 'থিম ভ্যারিয়েন্ট',
+  'settings.theme.backdropHeading': 'পটভূমি',
+  'settings.theme.backdrop.mesh': 'মেশ',
+  'settings.theme.backdrop.solid': 'একরঙা',
+  'settings.theme.backdrop.image': 'ছবি',
+  'settings.theme.backdropImageUrl': 'পটভূমির ছবির URL',
+  'settings.theme.backdropDots': 'পটভূমির বিন্দু দেখান',
+  'settings.theme.backdropHint':
+    'মেশ অ্যানিমেটেড গ্রেডিয়েন্ট দেখায়; একরঙা একটি সমতল পটভূমি ব্যবহার করে; ছবি আপনার নিজের পটভূমি আঁকে।',
+  'settings.theme.autoForkHint':
+    'কোনো প্রিসেট সম্পাদনা করলে আপনার পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে একটি নতুন কাস্টম থিম হিসেবে সংরক্ষিত হয়।',
+  'settings.theme.title': 'থিম স্টুডিও',
+  'settings.theme.menuDesc':
+    'রং এবং ফন্ট সম্পূর্ণরূপে কাস্টমাইজ করুন, অথবা একটি প্রিসেট থিম বেছে নিন।',
+  'settings.theme.presetsHeading': 'থিম',
+  'settings.theme.builtInBadge': 'প্রিসেট',
+  'settings.theme.customBadge': 'কাস্টম',
+  'settings.theme.customizeHint':
+    'অন্তর্নির্মিত প্রিসেটগুলো শুধুমাত্র পড়ার জন্য। এই থিমের রং এবং ফন্ট সম্পাদনা করতে এটি অনুলিপি করুন।',
+  'settings.theme.duplicate': 'অনুলিপি ও কাস্টমাইজ করুন',
+  'settings.theme.copyName': '{name} (কাস্টম)',
+  'settings.theme.importedName': 'আমদানিকৃত থিম',
+  'settings.theme.contrastWarn':
+    'টেক্সট এবং পটভূমির মধ্যে কম বৈসাদৃশ্য — এই থিমটি পড়া কঠিন হতে পারে।',
+  'settings.theme.group.surfaces': 'পৃষ্ঠতল',
+  'settings.theme.group.text': 'টেক্সট',
+  'settings.theme.group.borders': 'সীমানা',
+  'settings.theme.group.accents': 'অ্যাকসেন্ট রং',
+  'settings.theme.showShades': 'সব অ্যাকসেন্ট শেড দেখান',
+  'settings.theme.hideShades': 'সব অ্যাকসেন্ট শেড লুকান',
+  'settings.theme.fontsHeading': 'ফন্ট',
+  'settings.theme.fontRole.title': 'শিরোনাম',
+  'settings.theme.fontRole.heading': 'হেডিং',
+  'settings.theme.fontRole.body': 'মূল লেখা',
+  'settings.theme.fontRole.mono': 'মনোস্পেস',
+  'settings.theme.fontRole.serif': 'সেরিফ',
+  'settings.theme.fontCurrent': 'বর্তমান',
+  'settings.theme.actions': 'থিম পরিচালনা করুন',
+  'settings.theme.reset': 'ওভাররাইড রিসেট করুন',
+  'settings.theme.delete': 'থিম মুছুন',
+  'settings.theme.export': 'JSON কপি করুন',
+  'settings.theme.copied': 'কপি হয়েছে!',
+  'settings.theme.import': 'থিম আমদানি করুন',
+  'settings.theme.importHint': 'কাস্টম থিম হিসেবে যোগ করতে রপ্তানিকৃত থিম JSON পেস্ট করুন।',
+  'settings.theme.importApply': 'আমদানি করুন',
+  'settings.theme.importError': 'সেই থিম JSON পার্স করা যায়নি।',
   'settings.appearance.title': 'উপস্থিতি',
   'settings.appearance.themeHeading': 'থিম',
   'settings.appearance.themeAria': 'থিম',
diff --git a/app/src/lib/i18n/de.ts b/app/src/lib/i18n/de.ts
index c1e2376c8..b4e673e99 100644
--- a/app/src/lib/i18n/de.ts
+++ b/app/src/lib/i18n/de.ts
@@ -4849,6 +4849,56 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'Einmal genehmigt',
   'settings.approvalHistory.decision.approveAlways': 'Immer erlaubt',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.variantLight': 'Hell',
+  'settings.theme.variantDark': 'Dunkel',
+  'settings.theme.variantAuto': 'Automatisch',
+  'settings.theme.variantAria': 'Theme-Variante',
+  'settings.theme.backdropHeading': 'Hintergrund',
+  'settings.theme.backdrop.mesh': 'Netz',
+  'settings.theme.backdrop.solid': 'Einfarbig',
+  'settings.theme.backdrop.image': 'Bild',
+  'settings.theme.backdropImageUrl': 'URL des Hintergrundbilds',
+  'settings.theme.backdropDots': 'Hintergrundpunkte anzeigen',
+  'settings.theme.backdropHint':
+    'Netz zeigt den animierten Farbverlauf; Einfarbig nutzt einen flachen Hintergrund; Bild verwendet dein eigenes.',
+  'settings.theme.autoForkHint':
+    'Beim Bearbeiten einer Vorlage werden deine Änderungen automatisch als neues benutzerdefiniertes Theme gespeichert.',
+  'settings.theme.title': 'Theme-Studio',
+  'settings.theme.menuDesc':
+    'Passe Farben und Schriftarten vollständig an oder wähle ein voreingestelltes Theme.',
+  'settings.theme.presetsHeading': 'Themes',
+  'settings.theme.builtInBadge': 'Voreinstellung',
+  'settings.theme.customBadge': 'Benutzerdefiniert',
+  'settings.theme.customizeHint':
+    'Integrierte Voreinstellungen sind schreibgeschützt. Dupliziere dieses Theme, um seine Farben und Schriftarten zu bearbeiten.',
+  'settings.theme.duplicate': 'Duplizieren & anpassen',
+  'settings.theme.copyName': '{name} (benutzerdefiniert)',
+  'settings.theme.importedName': 'Importiertes Theme',
+  'settings.theme.contrastWarn':
+    'Geringer Kontrast zwischen Text und Hintergrund — dieses Theme ist möglicherweise schwer zu lesen.',
+  'settings.theme.group.surfaces': 'Oberflächen',
+  'settings.theme.group.text': 'Text',
+  'settings.theme.group.borders': 'Ränder',
+  'settings.theme.group.accents': 'Akzentfarben',
+  'settings.theme.showShades': 'Alle Akzenttöne anzeigen',
+  'settings.theme.hideShades': 'Alle Akzenttöne ausblenden',
+  'settings.theme.fontsHeading': 'Schriftarten',
+  'settings.theme.fontRole.title': 'Titel',
+  'settings.theme.fontRole.heading': 'Überschrift',
+  'settings.theme.fontRole.body': 'Fließtext',
+  'settings.theme.fontRole.mono': 'Monospace',
+  'settings.theme.fontRole.serif': 'Serif',
+  'settings.theme.fontCurrent': 'Aktuell',
+  'settings.theme.actions': 'Theme verwalten',
+  'settings.theme.reset': 'Überschreibungen zurücksetzen',
+  'settings.theme.delete': 'Theme löschen',
+  'settings.theme.export': 'JSON kopieren',
+  'settings.theme.copied': 'Kopiert!',
+  'settings.theme.import': 'Theme importieren',
+  'settings.theme.importHint':
+    'Füge exportiertes Theme-JSON ein, um es als benutzerdefiniertes Theme hinzuzufügen.',
+  'settings.theme.importApply': 'Importieren',
+  'settings.theme.importError': 'Dieses Theme-JSON konnte nicht verarbeitet werden.',
   'settings.appearance.title': 'Aussehen',
   'settings.appearance.themeHeading': 'Thema',
   'settings.appearance.themeAria': 'Thema',
diff --git a/app/src/lib/i18n/en.ts b/app/src/lib/i18n/en.ts
index d8fdedaa9..c3d046150 100644
--- a/app/src/lib/i18n/en.ts
+++ b/app/src/lib/i18n/en.ts
@@ -5367,6 +5367,54 @@ const en: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'Approved once',
   'settings.approvalHistory.decision.approveAlways': 'Always allowed',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.title': 'Theme Studio',
+  'settings.theme.menuDesc': 'Fully customize colours and fonts, or pick a preset theme.',
+  'settings.theme.presetsHeading': 'Themes',
+  'settings.theme.variantLight': 'Light',
+  'settings.theme.variantDark': 'Dark',
+  'settings.theme.variantAuto': 'Auto',
+  'settings.theme.variantAria': 'Theme variant',
+  'settings.theme.backdropHeading': 'Background',
+  'settings.theme.backdrop.mesh': 'Mesh',
+  'settings.theme.backdrop.solid': 'Solid',
+  'settings.theme.backdrop.image': 'Image',
+  'settings.theme.backdropImageUrl': 'Background image URL',
+  'settings.theme.backdropDots': 'Show background dots',
+  'settings.theme.backdropHint':
+    'Mesh shows the animated gradient; Solid uses a flat background; Image paints your own.',
+  'settings.theme.builtInBadge': 'Preset',
+  'settings.theme.customBadge': 'Custom',
+  'settings.theme.customizeHint':
+    'Built-in presets are read-only. Duplicate this theme to edit its colours and fonts.',
+  'settings.theme.autoForkHint':
+    'Editing a preset automatically saves your changes as a new custom theme.',
+  'settings.theme.duplicate': 'Duplicate & customize',
+  'settings.theme.copyName': '{name} (custom)',
+  'settings.theme.importedName': 'Imported theme',
+  'settings.theme.contrastWarn':
+    'Low contrast between text and background — this theme may be hard to read.',
+  'settings.theme.group.surfaces': 'Surfaces',
+  'settings.theme.group.text': 'Text',
+  'settings.theme.group.borders': 'Borders',
+  'settings.theme.group.accents': 'Accent colours',
+  'settings.theme.showShades': 'Show all accent shades',
+  'settings.theme.hideShades': 'Hide all accent shades',
+  'settings.theme.fontsHeading': 'Fonts',
+  'settings.theme.fontRole.title': 'Title',
+  'settings.theme.fontRole.heading': 'Heading',
+  'settings.theme.fontRole.body': 'Body',
+  'settings.theme.fontRole.mono': 'Monospace',
+  'settings.theme.fontRole.serif': 'Serif',
+  'settings.theme.fontCurrent': 'Current',
+  'settings.theme.actions': 'Manage theme',
+  'settings.theme.reset': 'Reset overrides',
+  'settings.theme.delete': 'Delete theme',
+  'settings.theme.export': 'Copy JSON',
+  'settings.theme.copied': 'Copied!',
+  'settings.theme.import': 'Import theme',
+  'settings.theme.importHint': 'Paste exported theme JSON to add it as a custom theme.',
+  'settings.theme.importApply': 'Import',
+  'settings.theme.importError': 'Could not parse that theme JSON.',
   'settings.appearance.title': 'Appearance',
   'settings.appearance.themeHeading': 'Theme',
   'settings.appearance.themeAria': 'Theme',
diff --git a/app/src/lib/i18n/es.ts b/app/src/lib/i18n/es.ts
index f7816a75e..d3cac50b3 100644
--- a/app/src/lib/i18n/es.ts
+++ b/app/src/lib/i18n/es.ts
@@ -4816,6 +4816,56 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'Aprobado una vez',
   'settings.approvalHistory.decision.approveAlways': 'Siempre permitido',
   'settings.approvalHistory.decision.deny': 'Denegado',
+  'settings.theme.variantLight': 'Claro',
+  'settings.theme.variantDark': 'Oscuro',
+  'settings.theme.variantAuto': 'Automático',
+  'settings.theme.variantAria': 'Variante del tema',
+  'settings.theme.backdropHeading': 'Fondo',
+  'settings.theme.backdrop.mesh': 'Malla',
+  'settings.theme.backdrop.solid': 'Sólido',
+  'settings.theme.backdrop.image': 'Imagen',
+  'settings.theme.backdropImageUrl': 'URL de la imagen de fondo',
+  'settings.theme.backdropDots': 'Mostrar puntos de fondo',
+  'settings.theme.backdropHint':
+    'La malla muestra el degradado animado; Sólido usa un fondo plano; Imagen pinta el tuyo propio.',
+  'settings.theme.autoForkHint':
+    'Editar un preajuste guarda automáticamente tus cambios como un nuevo tema personalizado.',
+  'settings.theme.title': 'Estudio de temas',
+  'settings.theme.menuDesc':
+    'Personaliza por completo los colores y las fuentes, o elige un tema predefinido.',
+  'settings.theme.presetsHeading': 'Temas',
+  'settings.theme.builtInBadge': 'Predefinido',
+  'settings.theme.customBadge': 'Personalizado',
+  'settings.theme.customizeHint':
+    'Los temas predefinidos son de solo lectura. Duplica este tema para editar sus colores y fuentes.',
+  'settings.theme.duplicate': 'Duplicar y personalizar',
+  'settings.theme.copyName': '{name} (personalizado)',
+  'settings.theme.importedName': 'Tema importado',
+  'settings.theme.contrastWarn':
+    'Bajo contraste entre el texto y el fondo — este tema puede resultar difícil de leer.',
+  'settings.theme.group.surfaces': 'Superficies',
+  'settings.theme.group.text': 'Texto',
+  'settings.theme.group.borders': 'Bordes',
+  'settings.theme.group.accents': 'Colores de acento',
+  'settings.theme.showShades': 'Mostrar todos los tonos de acento',
+  'settings.theme.hideShades': 'Ocultar todos los tonos de acento',
+  'settings.theme.fontsHeading': 'Fuentes',
+  'settings.theme.fontRole.title': 'Título',
+  'settings.theme.fontRole.heading': 'Encabezado',
+  'settings.theme.fontRole.body': 'Cuerpo',
+  'settings.theme.fontRole.mono': 'Monoespaciada',
+  'settings.theme.fontRole.serif': 'Con serifa',
+  'settings.theme.fontCurrent': 'Actual',
+  'settings.theme.actions': 'Gestionar tema',
+  'settings.theme.reset': 'Restablecer ajustes',
+  'settings.theme.delete': 'Eliminar tema',
+  'settings.theme.export': 'Copiar JSON',
+  'settings.theme.copied': '¡Copiado!',
+  'settings.theme.import': 'Importar tema',
+  'settings.theme.importHint':
+    'Pega el JSON de un tema exportado para añadirlo como tema personalizado.',
+  'settings.theme.importApply': 'Importar',
+  'settings.theme.importError': 'No se pudo analizar ese JSON de tema.',
   'settings.appearance.title': 'Apariencia',
   'settings.appearance.themeHeading': 'Tema',
   'settings.appearance.themeAria': 'Tema',
diff --git a/app/src/lib/i18n/fr.ts b/app/src/lib/i18n/fr.ts
index a2bda42d7..ae63137aa 100644
--- a/app/src/lib/i18n/fr.ts
+++ b/app/src/lib/i18n/fr.ts
@@ -4835,6 +4835,56 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'Approuvé une fois',
   'settings.approvalHistory.decision.approveAlways': 'Toujours autorisé',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.variantLight': 'Clair',
+  'settings.theme.variantDark': 'Sombre',
+  'settings.theme.variantAuto': 'Automatique',
+  'settings.theme.variantAria': 'Variante de thème',
+  'settings.theme.backdropHeading': 'Arrière-plan',
+  'settings.theme.backdrop.mesh': 'Maillage',
+  'settings.theme.backdrop.solid': 'Uni',
+  'settings.theme.backdrop.image': 'Image',
+  'settings.theme.backdropImageUrl': "URL de l'image d'arrière-plan",
+  'settings.theme.backdropDots': "Afficher les points d'arrière-plan",
+  'settings.theme.backdropHint':
+    'Le maillage affiche le dégradé animé ; Uni utilise un fond plat ; Image affiche le vôtre.',
+  'settings.theme.autoForkHint':
+    'Modifier un préréglage enregistre automatiquement vos changements comme un nouveau thème personnalisé.',
+  'settings.theme.title': 'Studio de thèmes',
+  'settings.theme.menuDesc':
+    'Personnalisez entièrement les couleurs et les polices, ou choisissez un thème prédéfini.',
+  'settings.theme.presetsHeading': 'Thèmes',
+  'settings.theme.builtInBadge': 'Prédéfini',
+  'settings.theme.customBadge': 'Personnalisé',
+  'settings.theme.customizeHint':
+    'Les thèmes prédéfinis sont en lecture seule. Dupliquez ce thème pour modifier ses couleurs et ses polices.',
+  'settings.theme.duplicate': 'Dupliquer et personnaliser',
+  'settings.theme.copyName': '{name} (personnalisé)',
+  'settings.theme.importedName': 'Thème importé',
+  'settings.theme.contrastWarn':
+    "Contraste faible entre le texte et l'arrière-plan — ce thème peut être difficile à lire.",
+  'settings.theme.group.surfaces': 'Surfaces',
+  'settings.theme.group.text': 'Texte',
+  'settings.theme.group.borders': 'Bordures',
+  'settings.theme.group.accents': "Couleurs d'accentuation",
+  'settings.theme.showShades': "Afficher toutes les nuances d'accentuation",
+  'settings.theme.hideShades': "Masquer toutes les nuances d'accentuation",
+  'settings.theme.fontsHeading': 'Polices',
+  'settings.theme.fontRole.title': 'Titre',
+  'settings.theme.fontRole.heading': 'En-tête',
+  'settings.theme.fontRole.body': 'Corps de texte',
+  'settings.theme.fontRole.mono': 'Largeur fixe',
+  'settings.theme.fontRole.serif': 'Serif',
+  'settings.theme.fontCurrent': 'Actuelle',
+  'settings.theme.actions': 'Gérer le thème',
+  'settings.theme.reset': 'Réinitialiser les remplacements',
+  'settings.theme.delete': 'Supprimer le thème',
+  'settings.theme.export': 'Copier le JSON',
+  'settings.theme.copied': 'Copié !',
+  'settings.theme.import': 'Importer un thème',
+  'settings.theme.importHint':
+    "Collez le JSON de thème exporté pour l'ajouter comme thème personnalisé.",
+  'settings.theme.importApply': 'Importer',
+  'settings.theme.importError': "Impossible d'analyser ce JSON de thème.",
   'settings.appearance.title': 'Apparence',
   'settings.appearance.themeHeading': 'Thème',
   'settings.appearance.themeAria': 'Thème',
diff --git a/app/src/lib/i18n/hi.ts b/app/src/lib/i18n/hi.ts
index d9e7dfb83..8740dbac5 100644
--- a/app/src/lib/i18n/hi.ts
+++ b/app/src/lib/i18n/hi.ts
@@ -4734,6 +4734,55 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'एक बार स्वीकृत',
   'settings.approvalHistory.decision.approveAlways': 'हमेशा अनुमति',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.variantLight': 'हल्का',
+  'settings.theme.variantDark': 'गहरा',
+  'settings.theme.variantAuto': 'स्वचालित',
+  'settings.theme.variantAria': 'थीम वैरिएंट',
+  'settings.theme.backdropHeading': 'पृष्ठभूमि',
+  'settings.theme.backdrop.mesh': 'मेश',
+  'settings.theme.backdrop.solid': 'ठोस',
+  'settings.theme.backdrop.image': 'छवि',
+  'settings.theme.backdropImageUrl': 'पृष्ठभूमि छवि URL',
+  'settings.theme.backdropDots': 'पृष्ठभूमि बिंदु दिखाएं',
+  'settings.theme.backdropHint':
+    'मेश एनिमेटेड ग्रेडिएंट दिखाता है; ठोस एक सपाट पृष्ठभूमि का उपयोग करता है; छवि आपकी अपनी पृष्ठभूमि बनाती है।',
+  'settings.theme.autoForkHint':
+    'किसी प्रीसेट को संपादित करने पर आपके बदलाव स्वचालित रूप से एक नई कस्टम थीम के रूप में सहेजे जाते हैं।',
+  'settings.theme.title': 'थीम स्टूडियो',
+  'settings.theme.menuDesc': 'रंगों और फ़ॉन्ट को पूरी तरह अनुकूलित करें, या कोई प्रीसेट थीम चुनें।',
+  'settings.theme.presetsHeading': 'थीम',
+  'settings.theme.builtInBadge': 'प्रीसेट',
+  'settings.theme.customBadge': 'कस्टम',
+  'settings.theme.customizeHint':
+    'अंतर्निहित प्रीसेट केवल पढ़ने के लिए हैं। इसके रंग और फ़ॉन्ट संपादित करने के लिए इस थीम की प्रतिलिपि बनाएँ।',
+  'settings.theme.duplicate': 'प्रतिलिपि बनाएँ और अनुकूलित करें',
+  'settings.theme.copyName': '{name} (कस्टम)',
+  'settings.theme.importedName': 'आयातित थीम',
+  'settings.theme.contrastWarn':
+    'पाठ और पृष्ठभूमि के बीच कम कंट्रास्ट — इस थीम को पढ़ना कठिन हो सकता है।',
+  'settings.theme.group.surfaces': 'सतहें',
+  'settings.theme.group.text': 'पाठ',
+  'settings.theme.group.borders': 'किनारे',
+  'settings.theme.group.accents': 'एक्सेंट रंग',
+  'settings.theme.showShades': 'सभी एक्सेंट शेड दिखाएँ',
+  'settings.theme.hideShades': 'सभी एक्सेंट शेड छिपाएँ',
+  'settings.theme.fontsHeading': 'फ़ॉन्ट',
+  'settings.theme.fontRole.title': 'शीर्षक',
+  'settings.theme.fontRole.heading': 'मथालेख',
+  'settings.theme.fontRole.body': 'मुख्य पाठ',
+  'settings.theme.fontRole.mono': 'मोनोस्पेस',
+  'settings.theme.fontRole.serif': 'सेरिफ़',
+  'settings.theme.fontCurrent': 'वर्तमान',
+  'settings.theme.actions': 'थीम प्रबंधित करें',
+  'settings.theme.reset': 'ओवरराइड रीसेट करें',
+  'settings.theme.delete': 'थीम हटाएँ',
+  'settings.theme.export': 'JSON कॉपी करें',
+  'settings.theme.copied': 'कॉपी हो गया!',
+  'settings.theme.import': 'थीम आयात करें',
+  'settings.theme.importHint':
+    'इसे कस्टम थीम के रूप में जोड़ने के लिए निर्यात की गई थीम JSON पेस्ट करें।',
+  'settings.theme.importApply': 'आयात करें',
+  'settings.theme.importError': 'उस थीम JSON को पार्स नहीं किया जा सका।',
   'settings.appearance.title': 'दिखावट',
   'settings.appearance.themeHeading': 'थीम',
   'settings.appearance.themeAria': 'थीम',
diff --git a/app/src/lib/i18n/id.ts b/app/src/lib/i18n/id.ts
index ca38f3870..d3dad2c49 100644
--- a/app/src/lib/i18n/id.ts
+++ b/app/src/lib/i18n/id.ts
@@ -4745,6 +4745,55 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'Disetujui sekali',
   'settings.approvalHistory.decision.approveAlways': 'Selalu diizinkan',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.variantLight': 'Terang',
+  'settings.theme.variantDark': 'Gelap',
+  'settings.theme.variantAuto': 'Otomatis',
+  'settings.theme.variantAria': 'Varian tema',
+  'settings.theme.backdropHeading': 'Latar belakang',
+  'settings.theme.backdrop.mesh': 'Jaring',
+  'settings.theme.backdrop.solid': 'Solid',
+  'settings.theme.backdrop.image': 'Gambar',
+  'settings.theme.backdropImageUrl': 'URL gambar latar belakang',
+  'settings.theme.backdropDots': 'Tampilkan titik latar belakang',
+  'settings.theme.backdropHint':
+    'Jaring menampilkan gradien beranimasi; Solid menggunakan latar belakang polos; Gambar menampilkan milik Anda sendiri.',
+  'settings.theme.autoForkHint':
+    'Mengedit preset secara otomatis menyimpan perubahan Anda sebagai tema kustom baru.',
+  'settings.theme.title': 'Studio Tema',
+  'settings.theme.menuDesc': 'Sesuaikan warna dan font sepenuhnya, atau pilih tema bawaan.',
+  'settings.theme.presetsHeading': 'Tema',
+  'settings.theme.builtInBadge': 'Bawaan',
+  'settings.theme.customBadge': 'Khusus',
+  'settings.theme.customizeHint':
+    'Tema bawaan hanya dapat dibaca. Duplikasi tema ini untuk mengubah warna dan fontnya.',
+  'settings.theme.duplicate': 'Duplikasi & sesuaikan',
+  'settings.theme.copyName': '{name} (khusus)',
+  'settings.theme.importedName': 'Tema yang diimpor',
+  'settings.theme.contrastWarn':
+    'Kontras rendah antara teks dan latar belakang — tema ini mungkin sulit dibaca.',
+  'settings.theme.group.surfaces': 'Permukaan',
+  'settings.theme.group.text': 'Teks',
+  'settings.theme.group.borders': 'Batas',
+  'settings.theme.group.accents': 'Warna aksen',
+  'settings.theme.showShades': 'Tampilkan semua corak aksen',
+  'settings.theme.hideShades': 'Sembunyikan semua corak aksen',
+  'settings.theme.fontsHeading': 'Font',
+  'settings.theme.fontRole.title': 'Judul',
+  'settings.theme.fontRole.heading': 'Tajuk',
+  'settings.theme.fontRole.body': 'Isi',
+  'settings.theme.fontRole.mono': 'Monospasi',
+  'settings.theme.fontRole.serif': 'Serif',
+  'settings.theme.fontCurrent': 'Saat ini',
+  'settings.theme.actions': 'Kelola tema',
+  'settings.theme.reset': 'Setel ulang penggantian',
+  'settings.theme.delete': 'Hapus tema',
+  'settings.theme.export': 'Salin JSON',
+  'settings.theme.copied': 'Tersalin!',
+  'settings.theme.import': 'Impor tema',
+  'settings.theme.importHint':
+    'Tempel JSON tema yang diekspor untuk menambahkannya sebagai tema khusus.',
+  'settings.theme.importApply': 'Impor',
+  'settings.theme.importError': 'Tidak dapat mengurai JSON tema tersebut.',
   'settings.appearance.title': 'Tampilan',
   'settings.appearance.themeHeading': 'Tema',
   'settings.appearance.themeAria': 'Tema',
diff --git a/app/src/lib/i18n/it.ts b/app/src/lib/i18n/it.ts
index ba884275f..82d9579e2 100644
--- a/app/src/lib/i18n/it.ts
+++ b/app/src/lib/i18n/it.ts
@@ -4807,6 +4807,56 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'Approvato una volta',
   'settings.approvalHistory.decision.approveAlways': 'Sempre consentito',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.variantLight': 'Chiaro',
+  'settings.theme.variantDark': 'Scuro',
+  'settings.theme.variantAuto': 'Automatico',
+  'settings.theme.variantAria': 'Variante del tema',
+  'settings.theme.backdropHeading': 'Sfondo',
+  'settings.theme.backdrop.mesh': 'Reticolo',
+  'settings.theme.backdrop.solid': 'Tinta unita',
+  'settings.theme.backdrop.image': 'Immagine',
+  'settings.theme.backdropImageUrl': "URL dell'immagine di sfondo",
+  'settings.theme.backdropDots': 'Mostra punti di sfondo',
+  'settings.theme.backdropHint':
+    'Il reticolo mostra il gradiente animato; Tinta unita usa uno sfondo piatto; Immagine usa la tua.',
+  'settings.theme.autoForkHint':
+    'Modificando un preset le tue modifiche vengono salvate automaticamente come nuovo tema personalizzato.',
+  'settings.theme.title': 'Studio Temi',
+  'settings.theme.menuDesc':
+    'Personalizza completamente colori e caratteri, oppure scegli un tema predefinito.',
+  'settings.theme.presetsHeading': 'Temi',
+  'settings.theme.builtInBadge': 'Predefinito',
+  'settings.theme.customBadge': 'Personalizzato',
+  'settings.theme.customizeHint':
+    'I temi predefiniti sono di sola lettura. Duplica questo tema per modificarne colori e caratteri.',
+  'settings.theme.duplicate': 'Duplica e personalizza',
+  'settings.theme.copyName': '{name} (personalizzato)',
+  'settings.theme.importedName': 'Tema importato',
+  'settings.theme.contrastWarn':
+    'Contrasto ridotto tra testo e sfondo — questo tema potrebbe risultare difficile da leggere.',
+  'settings.theme.group.surfaces': 'Superfici',
+  'settings.theme.group.text': 'Testo',
+  'settings.theme.group.borders': 'Bordi',
+  'settings.theme.group.accents': "Colori d'accento",
+  'settings.theme.showShades': "Mostra tutte le tonalità d'accento",
+  'settings.theme.hideShades': "Nascondi tutte le tonalità d'accento",
+  'settings.theme.fontsHeading': 'Caratteri',
+  'settings.theme.fontRole.title': 'Titolo',
+  'settings.theme.fontRole.heading': 'Intestazione',
+  'settings.theme.fontRole.body': 'Corpo',
+  'settings.theme.fontRole.mono': 'Monospazio',
+  'settings.theme.fontRole.serif': 'Con grazie',
+  'settings.theme.fontCurrent': 'Attuale',
+  'settings.theme.actions': 'Gestisci tema',
+  'settings.theme.reset': 'Reimposta personalizzazioni',
+  'settings.theme.delete': 'Elimina tema',
+  'settings.theme.export': 'Copia JSON',
+  'settings.theme.copied': 'Copiato!',
+  'settings.theme.import': 'Importa tema',
+  'settings.theme.importHint':
+    'Incolla il JSON di un tema esportato per aggiungerlo come tema personalizzato.',
+  'settings.theme.importApply': 'Importa',
+  'settings.theme.importError': 'Impossibile analizzare quel JSON del tema.',
   'settings.appearance.title': 'Aspetto',
   'settings.appearance.themeHeading': 'Tema',
   'settings.appearance.themeAria': 'Tema',
diff --git a/app/src/lib/i18n/ko.ts b/app/src/lib/i18n/ko.ts
index f7cb7f661..f8b3700b6 100644
--- a/app/src/lib/i18n/ko.ts
+++ b/app/src/lib/i18n/ko.ts
@@ -4684,6 +4684,54 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': '1회 승인',
   'settings.approvalHistory.decision.approveAlways': '항상 허용',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.variantLight': '밝게',
+  'settings.theme.variantDark': '어둡게',
+  'settings.theme.variantAuto': '자동',
+  'settings.theme.variantAria': '테마 변형',
+  'settings.theme.backdropHeading': '배경',
+  'settings.theme.backdrop.mesh': '메시',
+  'settings.theme.backdrop.solid': '단색',
+  'settings.theme.backdrop.image': '이미지',
+  'settings.theme.backdropImageUrl': '배경 이미지 URL',
+  'settings.theme.backdropDots': '배경 점 표시',
+  'settings.theme.backdropHint':
+    '메시는 애니메이션 그라데이션을 표시하고, 단색은 평면 배경을 사용하며, 이미지는 직접 지정한 배경을 사용합니다.',
+  'settings.theme.autoForkHint':
+    '프리셋을 편집하면 변경 사항이 자동으로 새 사용자 지정 테마로 저장됩니다.',
+  'settings.theme.title': '테마 스튜디오',
+  'settings.theme.menuDesc': '색상과 글꼴을 완전히 사용자 지정하거나 사전 설정 테마를 선택하세요.',
+  'settings.theme.presetsHeading': '테마',
+  'settings.theme.builtInBadge': '사전 설정',
+  'settings.theme.customBadge': '사용자 지정',
+  'settings.theme.customizeHint':
+    '기본 제공 사전 설정은 읽기 전용입니다. 색상과 글꼴을 편집하려면 이 테마를 복제하세요.',
+  'settings.theme.duplicate': '복제 후 사용자 지정',
+  'settings.theme.copyName': '{name} (사용자 지정)',
+  'settings.theme.importedName': '가져온 테마',
+  'settings.theme.contrastWarn':
+    '텍스트와 배경 사이의 대비가 낮습니다 — 이 테마는 읽기 어려울 수 있습니다.',
+  'settings.theme.group.surfaces': '표면',
+  'settings.theme.group.text': '텍스트',
+  'settings.theme.group.borders': '테두리',
+  'settings.theme.group.accents': '강조 색상',
+  'settings.theme.showShades': '모든 강조 음영 표시',
+  'settings.theme.hideShades': '모든 강조 음영 숨기기',
+  'settings.theme.fontsHeading': '글꼴',
+  'settings.theme.fontRole.title': '제목',
+  'settings.theme.fontRole.heading': '헤딩',
+  'settings.theme.fontRole.body': '본문',
+  'settings.theme.fontRole.mono': '고정폭',
+  'settings.theme.fontRole.serif': '세리프',
+  'settings.theme.fontCurrent': '현재',
+  'settings.theme.actions': '테마 관리',
+  'settings.theme.reset': '재정의 초기화',
+  'settings.theme.delete': '테마 삭제',
+  'settings.theme.export': 'JSON 복사',
+  'settings.theme.copied': '복사됨!',
+  'settings.theme.import': '테마 가져오기',
+  'settings.theme.importHint': '내보낸 테마 JSON을 붙여넣어 사용자 지정 테마로 추가하세요.',
+  'settings.theme.importApply': '가져오기',
+  'settings.theme.importError': '해당 테마 JSON을 구문 분석할 수 없습니다.',
   'settings.appearance.title': '외관',
   'settings.appearance.themeHeading': '테마',
   'settings.appearance.themeAria': '테마',
diff --git a/app/src/lib/i18n/pl.ts b/app/src/lib/i18n/pl.ts
index 0faf451e2..3a117cd32 100644
--- a/app/src/lib/i18n/pl.ts
+++ b/app/src/lib/i18n/pl.ts
@@ -4800,6 +4800,54 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'Zatwierdzone raz',
   'settings.approvalHistory.decision.approveAlways': 'Zawsze dozwolone',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.variantLight': 'Jasny',
+  'settings.theme.variantDark': 'Ciemny',
+  'settings.theme.variantAuto': 'Automatyczny',
+  'settings.theme.variantAria': 'Wariant motywu',
+  'settings.theme.backdropHeading': 'Tło',
+  'settings.theme.backdrop.mesh': 'Siatka',
+  'settings.theme.backdrop.solid': 'Jednolity',
+  'settings.theme.backdrop.image': 'Obraz',
+  'settings.theme.backdropImageUrl': 'URL obrazu tła',
+  'settings.theme.backdropDots': 'Pokaż kropki tła',
+  'settings.theme.backdropHint':
+    'Siatka pokazuje animowany gradient; Jednolity używa płaskiego tła; Obraz wyświetla Twój własny.',
+  'settings.theme.autoForkHint':
+    'Edycja gotowego motywu automatycznie zapisuje zmiany jako nowy motyw niestandardowy.',
+  'settings.theme.title': 'Studio motywów',
+  'settings.theme.menuDesc': 'W pełni dostosuj kolory i czcionki lub wybierz gotowy motyw.',
+  'settings.theme.presetsHeading': 'Motywy',
+  'settings.theme.builtInBadge': 'Gotowy',
+  'settings.theme.customBadge': 'Własny',
+  'settings.theme.customizeHint':
+    'Wbudowane motywy są tylko do odczytu. Zduplikuj ten motyw, aby edytować jego kolory i czcionki.',
+  'settings.theme.duplicate': 'Zduplikuj i dostosuj',
+  'settings.theme.copyName': '{name} (własny)',
+  'settings.theme.importedName': 'Zaimportowany motyw',
+  'settings.theme.contrastWarn':
+    'Niski kontrast między tekstem a tłem — ten motyw może być trudny do odczytania.',
+  'settings.theme.group.surfaces': 'Powierzchnie',
+  'settings.theme.group.text': 'Tekst',
+  'settings.theme.group.borders': 'Obramowania',
+  'settings.theme.group.accents': 'Kolory akcentów',
+  'settings.theme.showShades': 'Pokaż wszystkie odcienie akcentów',
+  'settings.theme.hideShades': 'Ukryj wszystkie odcienie akcentów',
+  'settings.theme.fontsHeading': 'Czcionki',
+  'settings.theme.fontRole.title': 'Tytuł',
+  'settings.theme.fontRole.heading': 'Nagłówek',
+  'settings.theme.fontRole.body': 'Tekst podstawowy',
+  'settings.theme.fontRole.mono': 'Czcionka o stałej szerokości',
+  'settings.theme.fontRole.serif': 'Szeryfowa',
+  'settings.theme.fontCurrent': 'Bieżąca',
+  'settings.theme.actions': 'Zarządzaj motywem',
+  'settings.theme.reset': 'Zresetuj zmiany',
+  'settings.theme.delete': 'Usuń motyw',
+  'settings.theme.export': 'Kopiuj JSON',
+  'settings.theme.copied': 'Skopiowano!',
+  'settings.theme.import': 'Importuj motyw',
+  'settings.theme.importHint': 'Wklej wyeksportowany JSON motywu, aby dodać go jako własny motyw.',
+  'settings.theme.importApply': 'Importuj',
+  'settings.theme.importError': 'Nie udało się przetworzyć tego JSON motywu.',
   'settings.appearance.title': 'Wygląd',
   'settings.appearance.themeHeading': 'Motyw',
   'settings.appearance.themeAria': 'Motyw',
diff --git a/app/src/lib/i18n/pt.ts b/app/src/lib/i18n/pt.ts
index 5ff33dd42..ffe6ad0a6 100644
--- a/app/src/lib/i18n/pt.ts
+++ b/app/src/lib/i18n/pt.ts
@@ -4809,6 +4809,56 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'Aprovado uma vez',
   'settings.approvalHistory.decision.approveAlways': 'Sempre permitido',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.variantLight': 'Claro',
+  'settings.theme.variantDark': 'Escuro',
+  'settings.theme.variantAuto': 'Automático',
+  'settings.theme.variantAria': 'Variante do tema',
+  'settings.theme.backdropHeading': 'Fundo',
+  'settings.theme.backdrop.mesh': 'Malha',
+  'settings.theme.backdrop.solid': 'Sólido',
+  'settings.theme.backdrop.image': 'Imagem',
+  'settings.theme.backdropImageUrl': 'URL da imagem de fundo',
+  'settings.theme.backdropDots': 'Mostrar pontos de fundo',
+  'settings.theme.backdropHint':
+    'A malha mostra o gradiente animado; Sólido usa um fundo plano; Imagem exibe o seu próprio.',
+  'settings.theme.autoForkHint':
+    'Editar uma predefinição salva automaticamente suas alterações como um novo tema personalizado.',
+  'settings.theme.title': 'Estúdio de Temas',
+  'settings.theme.menuDesc':
+    'Personalize totalmente as cores e fontes, ou escolha um tema predefinido.',
+  'settings.theme.presetsHeading': 'Temas',
+  'settings.theme.builtInBadge': 'Predefinido',
+  'settings.theme.customBadge': 'Personalizado',
+  'settings.theme.customizeHint':
+    'As predefinições integradas são somente leitura. Duplique este tema para editar as suas cores e fontes.',
+  'settings.theme.duplicate': 'Duplicar e personalizar',
+  'settings.theme.copyName': '{name} (personalizado)',
+  'settings.theme.importedName': 'Tema importado',
+  'settings.theme.contrastWarn':
+    'Baixo contraste entre o texto e o fundo — este tema pode ser difícil de ler.',
+  'settings.theme.group.surfaces': 'Superfícies',
+  'settings.theme.group.text': 'Texto',
+  'settings.theme.group.borders': 'Bordas',
+  'settings.theme.group.accents': 'Cores de destaque',
+  'settings.theme.showShades': 'Mostrar todos os tons de destaque',
+  'settings.theme.hideShades': 'Ocultar todos os tons de destaque',
+  'settings.theme.fontsHeading': 'Fontes',
+  'settings.theme.fontRole.title': 'Título',
+  'settings.theme.fontRole.heading': 'Cabeçalho',
+  'settings.theme.fontRole.body': 'Corpo',
+  'settings.theme.fontRole.mono': 'Monoespaçada',
+  'settings.theme.fontRole.serif': 'Serifada',
+  'settings.theme.fontCurrent': 'Atual',
+  'settings.theme.actions': 'Gerir tema',
+  'settings.theme.reset': 'Repor substituições',
+  'settings.theme.delete': 'Eliminar tema',
+  'settings.theme.export': 'Copiar JSON',
+  'settings.theme.copied': 'Copiado!',
+  'settings.theme.import': 'Importar tema',
+  'settings.theme.importHint':
+    'Cole o JSON do tema exportado para adicioná-lo como um tema personalizado.',
+  'settings.theme.importApply': 'Importar',
+  'settings.theme.importError': 'Não foi possível analisar esse JSON de tema.',
   'settings.appearance.title': 'Aparência',
   'settings.appearance.themeHeading': 'Tema',
   'settings.appearance.themeAria': 'Tema',
diff --git a/app/src/lib/i18n/ru.ts b/app/src/lib/i18n/ru.ts
index 30081a0ee..6f15e1bf4 100644
--- a/app/src/lib/i18n/ru.ts
+++ b/app/src/lib/i18n/ru.ts
@@ -4772,6 +4772,55 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': 'Одобрено однократно',
   'settings.approvalHistory.decision.approveAlways': 'Всегда разрешено',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.variantLight': 'Светлая',
+  'settings.theme.variantDark': 'Тёмная',
+  'settings.theme.variantAuto': 'Авто',
+  'settings.theme.variantAria': 'Вариант темы',
+  'settings.theme.backdropHeading': 'Фон',
+  'settings.theme.backdrop.mesh': 'Сетка',
+  'settings.theme.backdrop.solid': 'Сплошной',
+  'settings.theme.backdrop.image': 'Изображение',
+  'settings.theme.backdropImageUrl': 'URL фонового изображения',
+  'settings.theme.backdropDots': 'Показывать точки фона',
+  'settings.theme.backdropHint':
+    'Сетка показывает анимированный градиент; Сплошной использует ровный фон; Изображение задаёт ваш собственный.',
+  'settings.theme.autoForkHint':
+    'При редактировании пресета изменения автоматически сохраняются как новая пользовательская тема.',
+  'settings.theme.title': 'Студия тем',
+  'settings.theme.menuDesc': 'Полностью настройте цвета и шрифты или выберите готовую тему.',
+  'settings.theme.presetsHeading': 'Темы',
+  'settings.theme.builtInBadge': 'Готовая',
+  'settings.theme.customBadge': 'Своя',
+  'settings.theme.customizeHint':
+    'Встроенные готовые темы доступны только для чтения. Создайте копию этой темы, чтобы изменить её цвета и шрифты.',
+  'settings.theme.duplicate': 'Дублировать и настроить',
+  'settings.theme.copyName': '{name} (своя)',
+  'settings.theme.importedName': 'Импортированная тема',
+  'settings.theme.contrastWarn':
+    'Низкая контрастность между текстом и фоном — эту тему может быть трудно читать.',
+  'settings.theme.group.surfaces': 'Поверхности',
+  'settings.theme.group.text': 'Текст',
+  'settings.theme.group.borders': 'Границы',
+  'settings.theme.group.accents': 'Акцентные цвета',
+  'settings.theme.showShades': 'Показать все оттенки акцента',
+  'settings.theme.hideShades': 'Скрыть все оттенки акцента',
+  'settings.theme.fontsHeading': 'Шрифты',
+  'settings.theme.fontRole.title': 'Заголовок',
+  'settings.theme.fontRole.heading': 'Подзаголовок',
+  'settings.theme.fontRole.body': 'Основной текст',
+  'settings.theme.fontRole.mono': 'Моноширинный',
+  'settings.theme.fontRole.serif': 'С засечками',
+  'settings.theme.fontCurrent': 'Текущий',
+  'settings.theme.actions': 'Управление темой',
+  'settings.theme.reset': 'Сбросить переопределения',
+  'settings.theme.delete': 'Удалить тему',
+  'settings.theme.export': 'Копировать JSON',
+  'settings.theme.copied': 'Скопировано!',
+  'settings.theme.import': 'Импортировать тему',
+  'settings.theme.importHint':
+    'Вставьте экспортированный JSON темы, чтобы добавить её как свою тему.',
+  'settings.theme.importApply': 'Импортировать',
+  'settings.theme.importError': 'Не удалось разобрать этот JSON темы.',
   'settings.appearance.title': 'Внешний вид',
   'settings.appearance.themeHeading': 'Тема',
   'settings.appearance.themeAria': 'Тема',
diff --git a/app/src/lib/i18n/zh-CN.ts b/app/src/lib/i18n/zh-CN.ts
index cd6a1ea4d..48c785003 100644
--- a/app/src/lib/i18n/zh-CN.ts
+++ b/app/src/lib/i18n/zh-CN.ts
@@ -4500,6 +4500,50 @@ const messages: TranslationMap = {
   'settings.approvalHistory.decision.approveOnce': '批准一次',
   'settings.approvalHistory.decision.approveAlways': '始终允许',
   'settings.approvalHistory.decision.deny': 'Denied',
+  'settings.theme.variantLight': '浅色',
+  'settings.theme.variantDark': '深色',
+  'settings.theme.variantAuto': '自动',
+  'settings.theme.variantAria': '主题变体',
+  'settings.theme.backdropHeading': '背景',
+  'settings.theme.backdrop.mesh': '网格',
+  'settings.theme.backdrop.solid': '纯色',
+  'settings.theme.backdrop.image': '图片',
+  'settings.theme.backdropImageUrl': '背景图片 URL',
+  'settings.theme.backdropDots': '显示背景圆点',
+  'settings.theme.backdropHint': '网格显示动态渐变；纯色使用平面背景；图片使用你自己的背景。',
+  'settings.theme.autoForkHint': '编辑预设主题会自动将更改保存为新的自定义主题。',
+  'settings.theme.title': '主题工作室',
+  'settings.theme.menuDesc': '完全自定义颜色和字体，或选择预设主题。',
+  'settings.theme.presetsHeading': '主题',
+  'settings.theme.builtInBadge': '预设',
+  'settings.theme.customBadge': '自定义',
+  'settings.theme.customizeHint': '内置预设为只读。复制此主题以编辑其颜色和字体。',
+  'settings.theme.duplicate': '复制并自定义',
+  'settings.theme.copyName': '{name}（自定义）',
+  'settings.theme.importedName': '已导入的主题',
+  'settings.theme.contrastWarn': '文字与背景之间对比度过低——此主题可能难以阅读。',
+  'settings.theme.group.surfaces': '表面',
+  'settings.theme.group.text': '文字',
+  'settings.theme.group.borders': '边框',
+  'settings.theme.group.accents': '强调色',
+  'settings.theme.showShades': '显示所有强调色色调',
+  'settings.theme.hideShades': '隐藏所有强调色色调',
+  'settings.theme.fontsHeading': '字体',
+  'settings.theme.fontRole.title': '标题',
+  'settings.theme.fontRole.heading': '小标题',
+  'settings.theme.fontRole.body': '正文',
+  'settings.theme.fontRole.mono': '等宽字体',
+  'settings.theme.fontRole.serif': '衬线字体',
+  'settings.theme.fontCurrent': '当前',
+  'settings.theme.actions': '管理主题',
+  'settings.theme.reset': '重置覆盖',
+  'settings.theme.delete': '删除主题',
+  'settings.theme.export': '复制 JSON',
+  'settings.theme.copied': '已复制！',
+  'settings.theme.import': '导入主题',
+  'settings.theme.importHint': '粘贴导出的主题 JSON 以将其添加为自定义主题。',
+  'settings.theme.importApply': '导入',
+  'settings.theme.importError': '无法解析该主题 JSON。',
   'settings.appearance.title': '外观',
   'settings.appearance.themeHeading': '主题',
   'settings.appearance.themeAria': '主题',
diff --git a/app/src/lib/theme/color.test.ts b/app/src/lib/theme/color.test.ts
new file mode 100644
index 000000000..d52419542
--- /dev/null
+++ b/app/src/lib/theme/color.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+
+import { channelLuminance, channelsToHex, hexToChannels, isChannelTriple } from './color';
+
+describe('theme colour helpers', () => {
+  it('converts channel triples to hex', () => {
+    expect(channelsToHex('47 110 244')).toBe('#2f6ef4');
+    expect(channelsToHex('255 255 255')).toBe('#ffffff');
+    expect(channelsToHex('0 0 0')).toBe('#000000');
+  });
+
+  it('converts hex to channel triples (3- and 6-digit)', () => {
+    expect(hexToChannels('#2f6ef4')).toBe('47 110 244');
+    expect(hexToChannels('2f6ef4')).toBe('47 110 244');
+    expect(hexToChannels('#fff')).toBe('255 255 255');
+  });
+
+  it('round-trips hex → channels → hex', () => {
+    for (const hex of ['#34c759', '#e8a728', '#ef4444', '#171717']) {
+      expect(channelsToHex(hexToChannels(hex))).toBe(hex);
+    }
+  });
+
+  it('degrades gracefully on malformed input', () => {
+    expect(channelsToHex('not a colour')).toBe('#000000');
+    expect(hexToChannels('zzz')).toBe('0 0 0');
+  });
+
+  it('validates channel triples', () => {
+    expect(isChannelTriple('47 110 244')).toBe(true);
+    expect(isChannelTriple('300 0 0')).toBe(false); // out of range
+    expect(isChannelTriple('1 2')).toBe(false); // too few
+    expect(isChannelTriple('#fff')).toBe(false);
+  });
+
+  it('computes luminance with white brighter than black', () => {
+    expect(channelLuminance('255 255 255')).toBeGreaterThan(channelLuminance('0 0 0'));
+    expect(channelLuminance('0 0 0')).toBeCloseTo(0, 5);
+    expect(channelLuminance('255 255 255')).toBeCloseTo(1, 5);
+  });
+});
diff --git a/app/src/lib/theme/color.ts b/app/src/lib/theme/color.ts
new file mode 100644
index 000000000..8a1f04db7
--- /dev/null
+++ b/app/src/lib/theme/color.ts
@@ -0,0 +1,65 @@
+/**
+ * Colour conversion helpers for the theme system.
+ *
+ * Theme tokens are stored as space-separated RGB **channel** triples
+ * (e.g. `"47 110 244"`) so Tailwind's `rgb(var(--token) / <alpha-value>)`
+ * wiring keeps opacity modifiers working. The Theme Studio's native colour
+ * inputs speak hex, so we convert at the UI boundary.
+ */
+
+/** Clamp to a 0–255 integer. */
+function byte(n: number): number {
+  if (Number.isNaN(n)) return 0;
+  return Math.max(0, Math.min(255, Math.round(n)));
+}
+
+/** `"47 110 244"` → `"#2f6ef4"`. Returns `#000000` for malformed input. */
+export function channelsToHex(channels: string): string {
+  const parts = channels
+    .trim()
+    .split(/\s+/)
+    .map(p => Number(p));
+  if (parts.length < 3) return '#000000';
+  const [r, g, b] = parts;
+  const hex = (v: number) => byte(v).toString(16).padStart(2, '0');
+  return `#${hex(r)}${hex(g)}${hex(b)}`;
+}
+
+/** `"#2f6ef4"` (or `"#2f6"`) → `"47 110 244"`. Returns `"0 0 0"` if unparseable. */
+export function hexToChannels(hex: string): string {
+  let h = hex.trim().replace(/^#/, '');
+  if (h.length === 3) {
+    h = h
+      .split('')
+      .map(c => c + c)
+      .join('');
+  }
+  if (!/^[0-9a-fA-F]{6}$/.test(h)) return '0 0 0';
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return `${r} ${g} ${b}`;
+}
+
+/** True when a string looks like a valid `"R G B"` channel triple. */
+export function isChannelTriple(value: string): boolean {
+  const parts = value.trim().split(/\s+/);
+  return (
+    parts.length === 3 &&
+    parts.every(p => /^\d{1,3}$/.test(p) && Number(p) >= 0 && Number(p) <= 255)
+  );
+}
+
+/**
+ * Relative luminance (WCAG) of a channel triple, 0 (black) … 1 (white).
+ * Used to warn when a custom theme risks unreadable contrast.
+ */
+export function channelLuminance(channels: string): number {
+  const parts = channels
+    .trim()
+    .split(/\s+/)
+    .map(p => Number(p) / 255);
+  if (parts.length < 3) return 0;
+  const lin = parts.map(c => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+}
diff --git a/app/src/lib/theme/presets.ts b/app/src/lib/theme/presets.ts
new file mode 100644
index 000000000..0a5b21acd
--- /dev/null
+++ b/app/src/lib/theme/presets.ts
@@ -0,0 +1,323 @@
+import type { Theme, ThemeFamily } from './types';
+
+/**
+ * Built-in theme presets, grouped into families. Each family exposes a Light
+ * and/or Dark variant; the Theme Studio picks the family and a Light/Dark/Auto
+ * variant. `classic.light` / `classic.dark` carry no overrides — they rely on
+ * the tokens.css defaults so they always match the historical palette.
+ *
+ * Variant ids are stable (`light`, `dark`, `ocean`, `ocean-dark`, …) so existing
+ * persisted selections keep resolving.
+ */
+
+export const LIGHT_THEME_ID = 'light';
+export const DARK_THEME_ID = 'dark';
+
+const MONO_STACK = `'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', Courier, monospace`;
+const SERIF_STACK = `'Newsreader', Georgia, Cambria, 'Times New Roman', Times, serif`;
+
+// Full primary ramps (50…950) for accent-recoloured themes. Components use many
+// shades via `dark:text-primary-300` etc., so a theme that only overrode 500-700
+// would leave the others showing the default blue. Override the whole ramp.
+const GREEN_RAMP: Record<string, string> = {
+  'primary-50': '230 255 240',
+  'primary-100': '198 250 218',
+  'primary-200': '150 240 185',
+  'primary-300': '90 226 146',
+  'primary-400': '30 212 110',
+  'primary-500': '0 230 90',
+  'primary-600': '0 196 76',
+  'primary-700': '0 164 64',
+  'primary-800': '0 122 50',
+  'primary-900': '0 92 40',
+  'primary-950': '0 52 23',
+};
+const RED_RAMP: Record<string, string> = {
+  'primary-50': '254 235 235',
+  'primary-100': '252 214 214',
+  'primary-200': '248 178 178',
+  'primary-300': '240 130 130',
+  'primary-400': '233 84 84',
+  'primary-500': '230 40 40',
+  'primary-600': '200 30 30',
+  'primary-700': '170 24 24',
+  'primary-800': '140 20 20',
+  'primary-900': '112 18 18',
+  'primary-950': '70 10 10',
+};
+const BROWN_RAMP: Record<string, string> = {
+  'primary-50': '246 236 222',
+  'primary-100': '238 222 200',
+  'primary-200': '226 198 160',
+  'primary-300': '210 170 118',
+  'primary-400': '194 144 86',
+  'primary-500': '180 120 60',
+  'primary-600': '156 100 46',
+  'primary-700': '130 82 38',
+  'primary-800': '104 64 30',
+  'primary-900': '82 50 24',
+  'primary-950': '48 30 15',
+};
+
+// ── Classic ────────────────────────────────────────────────────────────────
+const CLASSIC_LIGHT: Theme = {
+  id: LIGHT_THEME_ID,
+  name: 'Light',
+  isDark: false,
+  builtIn: true,
+  colors: {},
+  fonts: {},
+};
+const CLASSIC_DARK: Theme = {
+  id: DARK_THEME_ID,
+  name: 'Dark',
+  isDark: true,
+  builtIn: true,
+  colors: {},
+  fonts: {},
+};
+
+// ── Ocean ──────────────────────────────────────────────────────────────────
+const OCEAN_LIGHT: Theme = {
+  id: 'ocean',
+  name: 'Ocean Light',
+  isDark: false,
+  builtIn: true,
+  colors: {
+    'surface-canvas': '233 242 252',
+    surface: '255 255 255',
+    'surface-muted': '224 236 248',
+    'surface-subtle': '230 240 250',
+    'surface-hover': '214 230 248',
+    line: '203 222 242',
+    'line-subtle': '224 236 248',
+    content: '15 36 56',
+    'content-secondary': '45 70 96',
+    'primary-500': '74 131 221',
+    'primary-600': '53 110 200',
+    'primary-700': '40 92 176',
+  },
+  gradient: { canvas: 'linear-gradient(180deg, rgb(235 244 253), rgb(214 230 248))' },
+  fonts: {},
+};
+const OCEAN_DARK: Theme = {
+  id: 'ocean-dark',
+  name: 'Ocean Dark',
+  isDark: true,
+  builtIn: true,
+  colors: {
+    'surface-canvas': '7 12 24',
+    surface: '22 30 52',
+    'surface-muted': '30 40 66',
+    'surface-subtle': '27 36 60',
+    'surface-strong': '40 52 84',
+    'surface-hover': '40 52 84',
+    'surface-overlay': '0 0 0',
+    line: '48 62 98',
+    'line-strong': '70 88 130',
+    'line-subtle': '36 48 76',
+    content: '224 232 244',
+    'content-secondary': '182 196 220',
+    'content-muted': '140 156 188',
+    'content-faint': '104 118 150',
+    'primary-500': '96 165 250',
+    'primary-600': '59 130 246',
+  },
+  gradient: { canvas: 'radial-gradient(circle at 30% 0%, rgb(20 34 64), rgb(7 12 24) 60%)' },
+  fonts: {},
+};
+
+// ── Sepia ──────────────────────────────────────────────────────────────────
+const SEPIA_LIGHT: Theme = {
+  id: 'sepia',
+  name: 'Sepia Light',
+  isDark: false,
+  builtIn: true,
+  colors: {
+    'surface-canvas': '244 236 222',
+    surface: '250 244 233',
+    'surface-muted': '238 228 210',
+    'surface-subtle': '240 231 215',
+    'surface-strong': '232 220 198',
+    'surface-hover': '232 220 198',
+    line: '222 209 186',
+    'line-strong': '206 190 162',
+    'line-subtle': '234 224 206',
+    content: '60 50 38',
+    'content-secondary': '90 76 58',
+    'content-muted': '120 104 82',
+    'content-faint': '160 144 120',
+    ...BROWN_RAMP,
+  },
+  fonts: { body: SERIF_STACK, heading: SERIF_STACK },
+};
+const SEPIA_DARK: Theme = {
+  id: 'sepia-dark',
+  name: 'Sepia Dark',
+  isDark: true,
+  builtIn: true,
+  colors: {
+    'surface-canvas': '26 22 17',
+    surface: '40 34 26',
+    'surface-muted': '48 41 31',
+    'surface-subtle': '44 37 28',
+    'surface-strong': '58 49 37',
+    'surface-hover': '56 47 35',
+    'surface-overlay': '0 0 0',
+    line: '64 54 41',
+    'line-strong': '90 76 58',
+    'line-subtle': '48 40 30',
+    content: '236 228 214',
+    'content-secondary': '198 184 162',
+    'content-muted': '156 142 120',
+    'content-faint': '120 106 86',
+    ...BROWN_RAMP,
+    'primary-500': '200 150 90',
+    'primary-600': '176 126 70',
+  },
+  fonts: { body: SERIF_STACK, heading: SERIF_STACK },
+};
+
+// ── Matrix (terminal green) ─────────────────────────────────────────────────
+const MATRIX_DARK: Theme = {
+  id: 'matrix',
+  name: 'Matrix',
+  isDark: true,
+  builtIn: true,
+  colors: {
+    'surface-canvas': '2 8 4',
+    surface: '6 18 10',
+    'surface-muted': '10 26 14',
+    'surface-subtle': '8 22 12',
+    'surface-strong': '14 36 20',
+    'surface-hover': '16 42 24',
+    'surface-overlay': '0 0 0',
+    line: '22 64 34',
+    'line-strong': '36 104 54',
+    'line-subtle': '14 44 24',
+    content: '134 255 168',
+    'content-secondary': '78 210 122',
+    'content-muted': '58 158 92',
+    'content-faint': '44 112 68',
+    'content-inverted': '2 8 4',
+    ...GREEN_RAMP,
+  },
+  gradient: { canvas: 'radial-gradient(circle at 50% 0%, rgb(6 32 16), rgb(2 8 4) 68%)' },
+  fonts: { body: MONO_STACK, heading: MONO_STACK },
+};
+const MATRIX_LIGHT: Theme = {
+  id: 'matrix-light',
+  name: 'Matrix Light',
+  isDark: false,
+  builtIn: true,
+  colors: {
+    'surface-canvas': '234 245 237',
+    surface: '246 252 248',
+    'surface-muted': '224 240 229',
+    'surface-subtle': '230 244 234',
+    'surface-hover': '214 236 222',
+    line: '198 226 206',
+    'line-strong': '170 206 180',
+    'line-subtle': '224 240 229',
+    content: '10 60 28',
+    'content-secondary': '30 92 50',
+    'content-muted': '60 122 80',
+    'content-faint': '110 160 124',
+    ...GREEN_RAMP,
+    'primary-500': '0 160 60',
+    'primary-600': '0 132 50',
+  },
+  fonts: { body: MONO_STACK, heading: MONO_STACK },
+};
+
+// ── HAL 9000 (red eye) ──────────────────────────────────────────────────────
+const HAL_DARK: Theme = {
+  id: 'hal9000',
+  name: 'HAL 9000',
+  isDark: true,
+  builtIn: true,
+  colors: {
+    'surface-canvas': '8 4 4',
+    surface: '20 12 12',
+    'surface-muted': '28 16 16',
+    'surface-subtle': '24 14 14',
+    'surface-strong': '38 20 20',
+    'surface-hover': '40 22 22',
+    'surface-overlay': '0 0 0',
+    line: '60 28 28',
+    'line-strong': '96 40 40',
+    'line-subtle': '40 20 20',
+    content: '240 224 224',
+    'content-secondary': '210 180 180',
+    'content-muted': '170 130 130',
+    'content-faint': '130 96 96',
+    ...RED_RAMP,
+  },
+  gradient: { canvas: 'radial-gradient(circle at 50% 16%, rgb(84 10 10), rgb(8 4 4) 56%)' },
+  fonts: {},
+};
+const HAL_LIGHT: Theme = {
+  id: 'hal9000-light',
+  name: 'HAL 9000 Light',
+  isDark: false,
+  builtIn: true,
+  colors: {
+    'surface-canvas': '245 238 238',
+    surface: '252 247 247',
+    'surface-muted': '240 228 228',
+    'surface-subtle': '244 234 234',
+    'surface-hover': '236 222 222',
+    line: '226 200 200',
+    'line-strong': '206 174 174',
+    'line-subtle': '240 228 228',
+    content: '60 24 24',
+    'content-secondary': '100 50 50',
+    'content-muted': '140 90 90',
+    'content-faint': '170 130 130',
+    ...RED_RAMP,
+    'primary-500': '210 40 40',
+    'primary-600': '180 30 30',
+  },
+  fonts: {},
+};
+
+export const THEME_FAMILIES: ThemeFamily[] = [
+  {
+    id: 'classic',
+    name: 'Classic',
+    defaultVariant: 'light',
+    light: CLASSIC_LIGHT,
+    dark: CLASSIC_DARK,
+  },
+  { id: 'ocean', name: 'Ocean', defaultVariant: 'light', light: OCEAN_LIGHT, dark: OCEAN_DARK },
+  { id: 'sepia', name: 'Sepia', defaultVariant: 'light', light: SEPIA_LIGHT, dark: SEPIA_DARK },
+  { id: 'matrix', name: 'Matrix', defaultVariant: 'dark', light: MATRIX_LIGHT, dark: MATRIX_DARK },
+  { id: 'hal9000', name: 'HAL 9000', defaultVariant: 'dark', light: HAL_LIGHT, dark: HAL_DARK },
+];
+
+/** Flat list of every concrete variant — for id lookup and back-compat. */
+export const PRESET_THEMES: Theme[] = THEME_FAMILIES.flatMap(f =>
+  [f.light, f.dark].filter((t): t is Theme => Boolean(t))
+);
+
+export function findPreset(id: string): Theme | undefined {
+  return PRESET_THEMES.find(t => t.id === id);
+}
+
+export function findFamily(id: string): ThemeFamily | undefined {
+  return THEME_FAMILIES.find(f => f.id === id);
+}
+
+/** The family that owns a given variant theme id (e.g. `ocean-dark` → ocean). */
+export function familyForThemeId(id: string): ThemeFamily | undefined {
+  return THEME_FAMILIES.find(f => f.light?.id === id || f.dark?.id === id);
+}
+
+/**
+ * Resolve a family + desired variant to a concrete Theme. Falls back to the
+ * family's available variant when the requested one is missing.
+ */
+export function resolveFamilyVariant(family: ThemeFamily, variant: 'light' | 'dark'): Theme {
+  const chosen = variant === 'dark' ? family.dark : family.light;
+  return chosen ?? family.dark ?? family.light ?? CLASSIC_LIGHT;
+}
diff --git a/app/src/lib/theme/tokens.ts b/app/src/lib/theme/tokens.ts
new file mode 100644
index 000000000..ebb0d5c9c
--- /dev/null
+++ b/app/src/lib/theme/tokens.ts
@@ -0,0 +1,113 @@
+/**
+ * Theme token registry — the canonical list of themeable CSS variables that the
+ * Theme Studio exposes and that {@link Theme} objects may override.
+ *
+ * Values live in `app/src/styles/tokens.css` (the Light `:root` / Dark
+ * `:root.dark` defaults). A theme only carries the subset of tokens it changes;
+ * ThemeProvider writes those as inline `--<key>` vars on <html>, and anything a
+ * theme does not specify falls through to the tokens.css defaults. This keeps a
+ * single source of truth for the base palette — we never duplicate every value
+ * in TypeScript.
+ */
+
+/** Surface (background) token keys, without the leading `--`. */
+export const SURFACE_KEYS = [
+  'surface',
+  'surface-canvas',
+  'surface-muted',
+  'surface-subtle',
+  'surface-strong',
+  'surface-hover',
+  'surface-overlay',
+] as const;
+
+/** Text token keys. */
+export const CONTENT_KEYS = [
+  'content',
+  'content-secondary',
+  'content-muted',
+  'content-faint',
+  'content-inverted',
+] as const;
+
+/** Border token keys. */
+export const LINE_KEYS = ['line', 'line-strong', 'line-subtle'] as const;
+
+/** Accent palette family names. Each expands to shades 50…950. */
+export const ACCENT_FAMILIES = ['primary', 'sage', 'amber', 'coral'] as const;
+
+/** Tailwind accent shade steps. */
+export const ACCENT_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const;
+
+/** All accent token keys, e.g. `primary-500`. */
+export const ACCENT_KEYS = ACCENT_FAMILIES.flatMap(fam =>
+  ACCENT_SHADES.map(shade => `${fam}-${shade}` as const)
+);
+
+/** The `-500` base key of each accent family (what the editor shows by default). */
+export const ACCENT_BASE_KEYS = ACCENT_FAMILIES.map(fam => `${fam}-500`);
+
+/** Every colour token key the theme system knows about. */
+export const ALL_COLOR_KEYS: string[] = [
+  ...SURFACE_KEYS,
+  ...CONTENT_KEYS,
+  ...LINE_KEYS,
+  ...ACCENT_KEYS,
+];
+
+export type ColorTokenKey = string;
+
+/** Font role keys, mapped to the `--font-<role>` vars. */
+export const FONT_ROLES = ['title', 'heading', 'body', 'mono', 'serif'] as const;
+export type FontRole = (typeof FONT_ROLES)[number];
+
+/**
+ * UI grouping for the Theme Studio colour editor. `i18nKey` resolves the group
+ * heading; `keys` are the tokens shown in that group. Accent shades beyond the
+ * base `-500` are surfaced via the per-family advanced expander, not listed here.
+ */
+export interface ColorGroup {
+  id: string;
+  i18nKey: string;
+  keys: string[];
+}
+
+export const COLOR_GROUPS: ColorGroup[] = [
+  { id: 'surfaces', i18nKey: 'settings.theme.group.surfaces', keys: [...SURFACE_KEYS] },
+  { id: 'text', i18nKey: 'settings.theme.group.text', keys: [...CONTENT_KEYS] },
+  { id: 'borders', i18nKey: 'settings.theme.group.borders', keys: [...LINE_KEYS] },
+  { id: 'accents', i18nKey: 'settings.theme.group.accents', keys: ACCENT_BASE_KEYS },
+];
+
+/** Curated font choices offered per role in the Theme Studio. */
+export interface FontChoice {
+  /** Stable id stored in the theme. */
+  id: string;
+  /** Human label (not translated — font names are proper nouns). */
+  label: string;
+  /** The CSS font-family stack written to the `--font-<role>` var. */
+  stack: string;
+}
+
+const SANS_FALLBACK = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif`;
+const SERIF_FALLBACK = `Georgia, Cambria, 'Times New Roman', Times, serif`;
+const MONO_FALLBACK = `'SF Mono', Consolas, 'Liberation Mono', Courier, monospace`;
+
+export const FONT_CHOICES: FontChoice[] = [
+  { id: 'inter', label: 'Inter', stack: `'Inter', ${SANS_FALLBACK}` },
+  {
+    id: 'cabinet',
+    label: 'Cabinet Grotesk',
+    stack: `'Cabinet Grotesk', 'Inter', ${SANS_FALLBACK}`,
+  },
+  { id: 'system', label: 'System UI', stack: `system-ui, ${SANS_FALLBACK}` },
+  { id: 'newsreader', label: 'Newsreader (serif)', stack: `'Newsreader', ${SERIF_FALLBACK}` },
+  { id: 'georgia', label: 'Georgia (serif)', stack: SERIF_FALLBACK },
+  { id: 'jetbrains', label: 'JetBrains Mono', stack: `'JetBrains Mono', ${MONO_FALLBACK}` },
+];
+
+/** Find a {@link FontChoice} whose stack matches a stored value (best-effort). */
+export function fontChoiceForStack(stack: string | undefined): FontChoice | undefined {
+  if (!stack) return undefined;
+  return FONT_CHOICES.find(c => c.stack === stack);
+}
diff --git a/app/src/lib/theme/types.ts b/app/src/lib/theme/types.ts
new file mode 100644
index 000000000..202b20b19
--- /dev/null
+++ b/app/src/lib/theme/types.ts
@@ -0,0 +1,62 @@
+import type { FontRole } from './tokens';
+
+/**
+ * A theme is a (partial) set of overrides for the canonical tokens in
+ * `styles/tokens.css`. Anything omitted falls through to the tokens.css
+ * Light/Dark defaults — so the built-in "Light" and "Dark" presets carry empty
+ * override maps and simply lean on `isDark`.
+ */
+export interface Theme {
+  /** Stable id (preset id or generated id for custom themes). */
+  id: string;
+  /** Display name. */
+  name: string;
+  /** Whether to apply the `.dark` class (selects the tokens.css dark base and
+   *  keeps any remaining `dark:` utilities aligned). */
+  isDark: boolean;
+  /** Built-in presets cannot be edited in place — editing duplicates them. */
+  builtIn: boolean;
+  /**
+   * For custom themes forked from a preset: the source preset variant id (e.g.
+   * `ocean`, `matrix`). Lets "Reset overrides" restore the preset's base palette
+   * rather than the generic Light/Dark defaults.
+   */
+  basedOn?: string;
+  /** Colour token overrides, keyed by var name (no `--`) → `"R G B"` channels. */
+  colors: Record<string, string>;
+  /** Font role overrides → CSS font-family stack. */
+  fonts: Partial<Record<FontRole, string>>;
+  /**
+   * Optional decorative gradients. `canvas` is a full CSS `background` value
+   * applied to the app background (behind all surfaces); omit for a flat
+   * canvas. Applied via the `--app-gradient` variable by ThemeProvider.
+   */
+  gradient?: { canvas?: string };
+  /**
+   * App backdrop layer. `mesh` (default) renders the animated WebGL mesh
+   * gradient; `solid` shows just the flat/gradient canvas; `image` paints
+   * `imageUrl` (cover). Controlled in the Theme Studio.
+   */
+  backdrop?: {
+    kind: 'mesh' | 'solid' | 'image';
+    imageUrl?: string;
+    /** Show the dotted-canvas overlay (default true when omitted). */
+    dots?: boolean;
+  };
+}
+
+export type BackdropKind = 'mesh' | 'solid' | 'image';
+
+/**
+ * A theme family groups light and dark variants under one name so the picker can
+ * offer "Ocean" with a Light/Dark/Auto choice rather than two separate entries.
+ * At least one of `light`/`dark` must be present.
+ */
+export interface ThemeFamily {
+  id: string;
+  name: string;
+  /** Which variant to use when the user picks "Auto" and no OS hint applies. */
+  defaultVariant: 'light' | 'dark';
+  light?: Theme;
+  dark?: Theme;
+}
diff --git a/app/src/notch/NotchApp.tsx b/app/src/notch/NotchApp.tsx
index 3cfcd8935..0ebb42bf8 100644
--- a/app/src/notch/NotchApp.tsx
+++ b/app/src/notch/NotchApp.tsx
@@ -65,7 +65,7 @@ function WaveformBars() {
       {[0, 1, 2, 3, 4].map(i => (
         <span
           key={i}
-          className="w-[3px] rounded-full bg-white/90"
+          className="w-[3px] rounded-full bg-surface/90"
           style={{
             height: `${10 + (i % 3) * 4}px`,
             animation: `notch-bar 0.9s ease-in-out infinite`,
@@ -85,7 +85,7 @@ function SpinnerDots() {
       {[0, 1, 2].map(i => (
         <span
           key={i}
-          className="h-[5px] w-[5px] rounded-full bg-white/80"
+          className="h-[5px] w-[5px] rounded-full bg-surface/80"
           style={{
             animation: `notch-dot 1.2s ease-in-out infinite`,
             animationDelay: `${i * 0.2}s`,
diff --git a/app/src/pages/Accounts.tsx b/app/src/pages/Accounts.tsx
index 4f37298c9..ccd0b0d50 100644
--- a/app/src/pages/Accounts.tsx
+++ b/app/src/pages/Accounts.tsx
@@ -74,7 +74,7 @@ const FaceModePanel = () => {
 
   return (
     <aside
-      className="flex min-w-0 flex-1 flex-col items-center justify-center gap-4 bg-stone-50 dark:bg-neutral-900/60 rounded-2xl border border-stone-200/70 dark:border-neutral-800/70 my-3 mr-0 py-4 px-3 overflow-hidden"
+      className="flex min-w-0 flex-1 flex-col items-center justify-center gap-4 bg-surface-muted dark:bg-surface/60 rounded-2xl border border-line/70 dark:border-line/70 my-3 mr-0 py-4 px-3 overflow-hidden"
       data-testid="face-mode-panel">
       {/* Mascot stage — the dominant element of the "Talk to Tiny" surface */}
       <div className="relative w-full max-w-[460px] aspect-square">
@@ -91,7 +91,7 @@ const FaceModePanel = () => {
       </div>
 
       {/* TTS / speak-replies toggle */}
-      <label className="inline-flex cursor-pointer select-none items-center gap-2 rounded-full border border-stone-300 dark:border-neutral-700 bg-white/80 dark:bg-neutral-900/80 px-3 py-1.5 text-xs text-stone-700 dark:text-neutral-200 shadow-soft backdrop-blur-sm">
+      <label className="inline-flex cursor-pointer select-none items-center gap-2 rounded-full border border-line-strong bg-surface/80 px-3 py-1.5 text-xs text-content-secondary shadow-soft backdrop-blur-sm">
         <input
           type="checkbox"
           checked={speakReplies}
@@ -162,7 +162,7 @@ const Accounts = () => {
       {isAgentSelected && faceMode ? (
         <main className="flex min-w-0 flex-1 flex-row gap-3">
           <div className="flex min-h-0 w-[360px] flex-none flex-col">
-            <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-stone-200/70 dark:border-neutral-800/70 my-3 mr-0">
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-line/70 dark:border-line/70 my-3 mr-0">
               <Conversations variant="sidebar" />
             </div>
           </div>
diff --git a/app/src/pages/Activity.tsx b/app/src/pages/Activity.tsx
index 0c3faab42..44fe49e93 100644
--- a/app/src/pages/Activity.tsx
+++ b/app/src/pages/Activity.tsx
@@ -114,7 +114,7 @@ export default function Activity() {
               <span className="inline-flex items-center gap-1.5">
                 <span>{tab.label}</span>
                 {tab.comingSoon && (
-                  <span className="rounded-full border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-1.5 py-0.5 text-[10px] text-stone-500 dark:text-neutral-400">
+                  <span className="rounded-full border border-line bg-surface-muted px-1.5 py-0.5 text-[10px] text-content-muted">
                     {t('misc.beta')}
                   </span>
                 )}
@@ -131,21 +131,19 @@ export default function Activity() {
         {activeTab === 'alerts' ? (
           <Notifications />
         ) : (
-          <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6">
+          <div className="bg-surface rounded-2xl shadow-soft border border-line p-6">
             <div>
               {/* Header — reflects the active tab so the panel title matches
                   what's shown below it, rather than a static "Activity". */}
               <div className="flex items-center justify-between mb-6">
                 <div className="min-w-0">
                   <h1
-                    className="text-xl font-bold text-stone-900 dark:text-neutral-100"
+                    className="text-xl font-bold text-content"
                     data-walkthrough="intelligence-header">
                     {activeTabDef?.label ?? t('nav.activity')}
                   </h1>
                   {activeTabDef?.description && (
-                    <p className="mt-1 text-sm text-stone-500 dark:text-neutral-400">
-                      {activeTabDef.description}
-                    </p>
+                    <p className="mt-1 text-sm text-content-muted">{activeTabDef.description}</p>
                   )}
                 </div>
               </div>
diff --git a/app/src/pages/Brain.tsx b/app/src/pages/Brain.tsx
index c3022987b..8bc80b05f 100644
--- a/app/src/pages/Brain.tsx
+++ b/app/src/pages/Brain.tsx
@@ -138,8 +138,7 @@ export default function Brain() {
     };
   }, [mode, refreshKey]);
 
-  const cardClass =
-    'rounded-lg border border-stone-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900';
+  const cardClass = 'rounded-lg border border-line bg-surface p-4';
 
   return (
     <div className="h-full">
@@ -225,11 +224,7 @@ export default function Brain() {
                 ],
               },
             ]}
-            header={
-              <p className="min-w-0 text-[11px] text-stone-500 dark:text-neutral-400">
-                {t('brain.subtitle')}
-              </p>
-            }
+            header={<p className="min-w-0 text-[11px] text-content-muted">{t('brain.subtitle')}</p>}
           />
         </div>
       </SidebarContent>
@@ -243,7 +238,7 @@ export default function Brain() {
           // card surface (the bespoke graph/sources/etc. tabs keep their own
           // scaffold below and stay flush).
           <div className="h-full p-4">
-            <div className="h-full overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-soft dark:border-neutral-800 dark:bg-neutral-900">
+            <div className="h-full overflow-hidden rounded-2xl border border-line bg-surface shadow-soft">
               <SettingsLayoutProvider value={{ inTwoPaneShell: true }}>
                 {/* Distinct tab query key so the embedded Intelligence panel's
                     internal tab switches don't overwrite Brain's own
diff --git a/app/src/pages/Channels.tsx b/app/src/pages/Channels.tsx
index dad37d068..2b54cf0aa 100644
--- a/app/src/pages/Channels.tsx
+++ b/app/src/pages/Channels.tsx
@@ -21,7 +21,7 @@ const Channels = () => {
         )}
 
         {loading ? (
-          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 text-sm text-stone-400 dark:text-neutral-500">
+          <div className="rounded-xl border border-line bg-surface p-6 text-sm text-content-faint">
             {t('common.loading')}
           </div>
         ) : (
diff --git a/app/src/pages/Conversations.tsx b/app/src/pages/Conversations.tsx
index 9e3b7bcb0..f2547bd88 100644
--- a/app/src/pages/Conversations.tsx
+++ b/app/src/pages/Conversations.tsx
@@ -1676,7 +1676,7 @@ const Conversations = ({
             onClick={openWholeRunSource}
             data-testid="view-process-source"
             className="flex items-center gap-1.5 px-1 py-1 text-left">
-            <span className="text-[13px] font-medium text-stone-500 dark:text-neutral-400">
+            <span className="text-[13px] font-medium text-content-muted">
               {t('conversations.agentTaskInsights.title')}
             </span>
             <span className="text-[13px] font-medium text-primary-600 dark:text-primary-300">
@@ -1757,8 +1757,8 @@ const Conversations = ({
     // Card background / rounded corners come from TwoPanelLayout's pane styling.
     <div className="h-full flex flex-col">
       {/* Thread search — flush full-width input, mirrors the settings search. */}
-      <div className="relative border-b border-stone-100 dark:border-neutral-800">
-        <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-stone-400 dark:text-neutral-500">
+      <div className="relative border-b border-line-subtle">
+        <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-content-faint">
           <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               strokeLinecap="round"
@@ -1781,7 +1781,7 @@ const Conversations = ({
           placeholder={t('chat.searchThreads')}
           aria-label={t('chat.searchThreads')}
           data-testid="chat-thread-search-input"
-          className="w-full border-0 bg-transparent py-2.5 pl-10 pr-10 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-0 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="w-full border-0 bg-transparent py-2.5 pl-10 pr-10 text-sm text-content placeholder:text-stone-400 focus:outline-none focus:ring-0 dark:placeholder:text-neutral-500"
         />
         {threadSearch && (
           <button
@@ -1789,7 +1789,7 @@ const Conversations = ({
             onClick={() => setThreadSearch('')}
             aria-label={t('settings.settingsSearch.clear')}
             data-testid="chat-thread-search-clear"
-            className="absolute inset-y-0 right-2 flex items-center px-1 text-stone-400 hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300">
+            className="absolute inset-y-0 right-2 flex items-center px-1 text-content-faint hover:text-content-secondary">
             <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
@@ -1809,25 +1809,23 @@ const Conversations = ({
         data-analytics-id="chat-sidebar-new-thread"
         onClick={() => void handleCreateNewThread()}
         title={t('chat.newThreadShortcut')}
-        className="group w-full cursor-pointer border-b border-stone-100/60 opacity-50 px-3 py-2 transition-colors hover:bg-stone-50 dark:border-neutral-800/60 dark:hover:bg-neutral-800/60">
+        className="group w-full cursor-pointer border-b border-line-subtle/60 opacity-50 px-3 py-2 transition-colors hover:bg-surface-hover dark:border-line/60">
         <div className="flex items-center justify-center gap-1.5">
           <svg
-            className="h-3.5 w-3.5 flex-shrink-0 text-stone-500 dark:text-neutral-400"
+            className="h-3.5 w-3.5 flex-shrink-0 text-content-muted"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
           </svg>
-          <span className="truncate text-xs text-stone-700 dark:text-neutral-200">
+          <span className="truncate text-xs text-content-secondary">
             {t('chat.newConversation')}
           </span>
         </div>
       </button>
       <div className="flex-1 overflow-y-auto">
         {visibleThreads.length === 0 ? (
-          <p className="px-4 py-6 text-xs text-stone-400 dark:text-neutral-500 text-center">
-            {t('chat.noThreads')}
-          </p>
+          <p className="px-4 py-6 text-xs text-content-faint text-center">{t('chat.noThreads')}</p>
         ) : (
           visibleThreads.map(thread => (
             <div
@@ -1854,10 +1852,10 @@ const Conversations = ({
                   }
                 }
               }}
-              className={`w-full text-left px-3 py-1.5 border-b border-stone-100/60 dark:border-neutral-800/60 transition-colors group cursor-pointer ${
+              className={`w-full text-left px-3 py-1.5 border-b border-line-subtle/60 dark:border-line/60 transition-colors group cursor-pointer ${
                 selectedThreadId === thread.id
                   ? 'bg-primary-50 dark:bg-primary-900/30 border-l-2 border-l-primary-500'
-                  : 'hover:bg-stone-50 dark:hover:bg-neutral-800/60'
+                  : 'hover:bg-surface-hover'
               }`}>
               <div className="flex items-center justify-between">
                 {editingThreadId === thread.id ? (
@@ -1890,7 +1888,7 @@ const Conversations = ({
                     }}
                     aria-label={t('chat.editThreadTitle')}
                     data-testid={`thread-title-input-${thread.id}`}
-                    className="h-5 min-w-0 flex-1 border-b border-primary-400 bg-transparent py-0 text-xs font-medium leading-none text-stone-700 outline-none dark:text-neutral-200"
+                    className="h-5 min-w-0 flex-1 border-b border-primary-400 bg-transparent py-0 text-xs font-medium leading-none text-content-secondary outline-none"
                     autoFocus
                   />
                 ) : (
@@ -1898,7 +1896,7 @@ const Conversations = ({
                     className={`text-xs truncate flex-1 ${
                       selectedThreadId === thread.id
                         ? 'font-medium text-primary-700 dark:text-primary-200'
-                        : 'text-stone-700 dark:text-neutral-200'
+                        : 'text-content-secondary'
                     }`}>
                     {resolveThreadDisplayTitle(thread.id)}
                   </p>
@@ -1912,7 +1910,7 @@ const Conversations = ({
                   }}
                   aria-label={t('chat.editThreadTitle')}
                   title={t('chat.editThreadTitle')}
-                  className="ml-2 p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-stone-200 dark:bg-neutral-800 dark:hover:bg-neutral-800 text-stone-400 dark:text-neutral-500 hover:text-primary-500 transition-all flex-shrink-0">
+                  className="ml-2 p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-surface-strong dark:bg-surface-muted dark:hover:bg-surface-muted text-content-faint hover:text-primary-500 transition-all flex-shrink-0">
                   <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
                       strokeLinecap="round"
@@ -1946,7 +1944,7 @@ const Conversations = ({
                       onCancel: () => {},
                     });
                   }}
-                  className="ml-2 p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-stone-200 dark:bg-neutral-800 dark:hover:bg-neutral-800 text-stone-400 dark:text-neutral-500 hover:text-coral-500 transition-all flex-shrink-0"
+                  className="ml-2 p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-surface-strong dark:bg-surface-muted dark:hover:bg-surface-muted text-content-faint hover:text-coral-500 transition-all flex-shrink-0"
                   title={t('chat.deleteThread')}>
                   <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -1959,11 +1957,11 @@ const Conversations = ({
                 </button>
               </div>
               {/* <div className="flex items-center gap-2 mt-0.5">
-                    <span className="text-[10px] text-stone-400 dark:text-neutral-500">
+                    <span className="text-[10px] text-content-faint">
                       {formatRelativeTime(thread.lastMessageAt)}
                     </span>
                     {thread.messageCount > 0 && (
-                      <span className="text-[10px] text-stone-400 dark:text-neutral-500">
+                      <span className="text-[10px] text-content-faint">
                         {thread.messageCount} msg{thread.messageCount !== 1 ? 's' : ''}
                       </span>
                     )}
@@ -1981,7 +1979,7 @@ const Conversations = ({
       className={
         isSidebar
           ? // Embedded variant keeps its own flush styling (no TwoPanelLayout).
-            'flex-1 flex flex-col min-w-0 bg-white dark:bg-neutral-900 border-l border-stone-200 dark:border-neutral-800 overflow-hidden'
+            'flex-1 flex flex-col min-w-0 bg-surface border-l border-line overflow-hidden'
           : // Page variant: flush over the shell background. `relative` anchors
             // the absolutely-positioned floating composer.
             'relative flex-1 flex flex-col min-w-0'
@@ -1998,7 +1996,7 @@ const Conversations = ({
             {Array.from({ length: 4 }).map((_, i) => (
               <div key={i} className={`flex ${i % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
                 <div
-                  className={`h-12 rounded-2xl animate-pulse bg-stone-100 dark:bg-neutral-800 ${
+                  className={`h-12 rounded-2xl animate-pulse bg-surface-subtle ${
                     i % 2 === 0 ? 'w-2/3' : 'w-1/2'
                   }`}
                 />
@@ -2019,12 +2017,8 @@ const Conversations = ({
                 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
               />
             </svg>
-            <p className="text-sm text-stone-400 dark:text-neutral-500 mb-1">
-              {t('chat.failedToLoadMessages')}
-            </p>
-            <p className="text-xs text-stone-600 dark:text-neutral-300 mb-3 text-center">
-              {messagesError}
-            </p>
+            <p className="text-sm text-content-faint mb-1">{t('chat.failedToLoadMessages')}</p>
+            <p className="text-xs text-content-secondary mb-3 text-center">{messagesError}</p>
             <button
               type="button"
               data-analytics-id="chat-messages-reload"
@@ -2118,7 +2112,7 @@ const Conversations = ({
                                         </button>
                                       ))}
                                       {pickerOpen ? (
-                                        <div className="flex items-center gap-0.5 rounded-full bg-white px-1 py-0.5 shadow-sm ring-1 ring-stone-200 dark:bg-neutral-900 dark:ring-neutral-700">
+                                        <div className="flex items-center gap-0.5 rounded-full bg-surface px-1 py-0.5 shadow-sm ring-1 ring-stone-200 dark:ring-neutral-700">
                                           {['👍', '❤️', '😂', '🔥', '👀', '🎯'].map(emoji => (
                                             <button
                                               key={emoji}
@@ -2145,7 +2139,7 @@ const Conversations = ({
                                             type="button"
                                             data-analytics-id="chat-message-reaction-close"
                                             onClick={() => setReactionPickerMsgId(null)}
-                                            className="ml-0.5 px-0.5 text-xs text-stone-600 hover:text-stone-400 dark:text-neutral-300 dark:hover:text-neutral-500">
+                                            className="ml-0.5 px-0.5 text-xs text-content-secondary hover:text-content-faint dark:hover:text-content-faint">
                                             ✕
                                           </button>
                                         </div>
@@ -2154,7 +2148,7 @@ const Conversations = ({
                                           type="button"
                                           data-analytics-id="chat-message-reaction-open"
                                           onClick={() => setReactionPickerMsgId(msg.id)}
-                                          className="flex h-[18px] items-center rounded-full bg-white px-1.5 text-xs leading-none text-stone-500 opacity-0 shadow-sm ring-1 ring-stone-200 transition-opacity hover:bg-stone-100 hover:text-stone-700 group-hover/msg:opacity-100 dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
+                                          className="flex h-[18px] items-center rounded-full bg-surface px-1.5 text-xs leading-none text-content-muted opacity-0 shadow-sm ring-1 ring-stone-200 transition-opacity hover:bg-surface-hover hover:text-content-secondary group-hover/msg:opacity-100 dark:ring-neutral-700"
                                           title={t('chat.addReaction')}
                                           aria-label={t('chat.addReaction')}>
                                           +
@@ -2180,7 +2174,7 @@ const Conversations = ({
                               return <CitationChips citations={citations} />;
                             })()}
                             {latestVisibleMessage?.id === msg.id && (
-                              <p className="px-1 text-[10px] text-stone-400 dark:text-neutral-500">
+                              <p className="px-1 text-[10px] text-content-faint">
                                 {formatRelativeTime(msg.createdAt)}
                               </p>
                             )}
@@ -2225,9 +2219,9 @@ const Conversations = ({
                                       {fileNames.map((name, i) => (
                                         <div
                                           key={i}
-                                          className="flex items-center gap-2 rounded-lg border border-stone-200 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800 px-2.5 py-1.5 text-xs text-stone-700 dark:text-neutral-300 max-w-[220px]">
+                                          className="flex items-center gap-2 rounded-lg border border-line bg-surface-muted px-2.5 py-1.5 text-xs text-content-secondary max-w-[220px]">
                                           <svg
-                                            className="w-4 h-4 flex-shrink-0 text-stone-500 dark:text-neutral-400"
+                                            className="w-4 h-4 flex-shrink-0 text-content-muted"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24">
@@ -2250,7 +2244,7 @@ const Conversations = ({
                                     </div>
                                   )}
                                   {(displayText || showTime) && (
-                                    <div className="rounded-2xl px-4 py-2.5 bg-primary-500 text-white rounded-br-md break-words overflow-hidden">
+                                    <div className="rounded-2xl px-4 py-2.5 bg-primary-500 text-content-inverted rounded-br-md break-words overflow-hidden">
                                       {displayText && (
                                         <BubbleMarkdown content={displayText} tone="user" />
                                       )}
@@ -2277,7 +2271,7 @@ const Conversations = ({
                               : msg.sender === 'user'
                                 ? '-left-8'
                                 : '-right-8'
-                          } p-1 rounded-md opacity-0 group-hover/msg:opacity-100 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 transition-all`}
+                          } p-1 rounded-md opacity-0 group-hover/msg:opacity-100 hover:bg-surface-hover dark:bg-surface-muted dark:hover:bg-surface-muted text-content-faint hover:text-content-secondary transition-all`}
                           title={t('chat.copyResponse')}>
                           {copiedMessageId === msg.id ? (
                             <svg
@@ -2324,11 +2318,11 @@ const Conversations = ({
                 (selectedStreamingAssistant?.thinking.length ?? 0) > 0
               ) && (
                 <div className="flex justify-start">
-                  <div className="bg-stone-200/80 dark:bg-neutral-800 rounded-2xl rounded-bl-md px-4 py-3">
+                  <div className="bg-surface-strong/80 dark:bg-surface-muted rounded-2xl rounded-bl-md px-4 py-3">
                     <div className="flex items-center gap-1">
-                      <span className="w-1.5 h-1.5 rounded-full bg-stone-50 dark:bg-neutral-800/600 animate-bounce [animation-delay:0ms]" />
-                      <span className="w-1.5 h-1.5 rounded-full bg-stone-50 dark:bg-neutral-800/600 animate-bounce [animation-delay:150ms]" />
-                      <span className="w-1.5 h-1.5 rounded-full bg-stone-50 dark:bg-neutral-800/600 animate-bounce [animation-delay:300ms]" />
+                      <span className="w-1.5 h-1.5 rounded-full bg-surface-muted dark:bg-surface-muted/600 animate-bounce [animation-delay:0ms]" />
+                      <span className="w-1.5 h-1.5 rounded-full bg-surface-muted dark:bg-surface-muted/600 animate-bounce [animation-delay:150ms]" />
+                      <span className="w-1.5 h-1.5 rounded-full bg-surface-muted dark:bg-surface-muted/600 animate-bounce [animation-delay:300ms]" />
                     </div>
                   </div>
                 </div>
@@ -2344,23 +2338,23 @@ const Conversations = ({
                 <div className="flex justify-start">
                   <div className="relative w-fit max-w-[75%]">
                     {selectedStreamingAssistant.thinking.length > 0 && (
-                      <details className="mb-1.5 bg-stone-100 dark:bg-neutral-800 rounded-lg px-3 py-1.5 text-xs text-stone-600 dark:text-neutral-300 open:bg-stone-100 dark:bg-neutral-800 dark:open:bg-neutral-800">
+                      <details className="mb-1.5 bg-surface-subtle rounded-lg px-3 py-1.5 text-xs text-content-secondary open:bg-stone-100 dark:bg-surface-muted dark:open:bg-neutral-800">
                         <summary className="cursor-pointer select-none flex items-center gap-1.5">
                           <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse" />
                           <span>{t('chat.thinking')}</span>
                         </summary>
-                        <pre className="whitespace-pre-wrap break-words mt-1.5 font-sans text-[11px] text-stone-500 dark:text-neutral-400">
+                        <pre className="whitespace-pre-wrap break-words mt-1.5 font-sans text-[11px] text-content-muted">
                           {selectedStreamingAssistant.thinking.slice(-STREAMING_PREVIEW_CHARS)}
                         </pre>
                       </details>
                     )}
                     {selectedStreamingAssistant.content.length > 0 &&
                       (selectedThreadToolTimeline.length === 0 || hideAgentInsights) && (
-                        <div className="rounded-2xl rounded-bl-md px-3 py-1.5 bg-stone-200/80 dark:bg-neutral-800 text-stone-900 dark:text-neutral-100">
-                          <p className="text-xs text-stone-700 dark:text-neutral-200 font-mono whitespace-pre-wrap break-words leading-snug">
+                        <div className="rounded-2xl rounded-bl-md px-3 py-1.5 bg-surface-strong/80 dark:bg-surface-muted text-content">
+                          <p className="text-xs text-content-secondary font-mono whitespace-pre-wrap break-words leading-snug">
                             {selectedStreamingAssistant.content.length >
                               STREAMING_PREVIEW_CHARS && (
-                              <span className="text-stone-400 dark:text-neutral-500">…</span>
+                              <span className="text-content-faint">…</span>
                             )}
                             {selectedStreamingAssistant.content.slice(-STREAMING_PREVIEW_CHARS)}
                             <span className="inline-block w-1 h-3 ml-0.5 align-middle bg-primary-400 animate-pulse" />
@@ -2383,10 +2377,10 @@ const Conversations = ({
                         <span>{t('chat.parallelBranchLabel')}</span>
                       </div>
                       {branch.content.length > 0 && (
-                        <div className="rounded-2xl rounded-bl-md px-3 py-1.5 bg-stone-200/80 dark:bg-neutral-800 text-stone-900 dark:text-neutral-100 border-l-2 border-primary-400/60">
-                          <p className="text-xs text-stone-700 dark:text-neutral-200 font-mono whitespace-pre-wrap break-words leading-snug">
+                        <div className="rounded-2xl rounded-bl-md px-3 py-1.5 bg-surface-strong/80 dark:bg-surface-muted text-content border-l-2 border-primary-400/60">
+                          <p className="text-xs text-content-secondary font-mono whitespace-pre-wrap break-words leading-snug">
                             {branch.content.length > STREAMING_PREVIEW_CHARS && (
-                              <span className="text-stone-400 dark:text-neutral-500">…</span>
+                              <span className="text-content-faint">…</span>
                             )}
                             {branch.content.slice(-STREAMING_PREVIEW_CHARS)}
                             <span className="inline-block w-1 h-3 ml-0.5 align-middle bg-primary-400 animate-pulse" />
@@ -2406,7 +2400,7 @@ const Conversations = ({
             {selectedInferenceStatus &&
               (selectedInferenceStatus.phase === 'thinking' ||
                 selectedThreadToolTimeline.length === 0) && (
-                <div className="flex items-center gap-2 px-1 py-1.5 text-xs text-stone-500 dark:text-neutral-400">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-xs text-content-muted">
                   <span className="inline-block w-2 h-2 rounded-full bg-primary-400 animate-pulse" />
                   <span>
                     {selectedInferenceStatus.phase === 'thinking' &&
@@ -2456,7 +2450,7 @@ const Conversations = ({
           <ChatNewWindowHero />
         ) : (
           <div className="flex-1 flex items-center justify-center h-full">
-            <p className="text-sm text-stone-600 dark:text-neutral-300">{t('chat.noMessages')}</p>
+            <p className="text-sm text-content-secondary">{t('chat.noMessages')}</p>
           </div>
         )}
       </div>
@@ -2543,7 +2537,7 @@ const Conversations = ({
                   onClick={() => {
                     void handleUseOpenRouterFree();
                   }}
-                  className="px-3 py-1.5 rounded-lg border border-coral-300 bg-white text-coral-700 hover:bg-coral-100 disabled:cursor-wait disabled:opacity-70 text-xs font-medium transition-colors">
+                  className="px-3 py-1.5 rounded-lg border border-coral-300 bg-surface text-coral-700 hover:bg-coral-100 disabled:cursor-wait disabled:opacity-70 text-xs font-medium transition-colors">
                   {openRouterStatus === 'saving'
                     ? t('openrouterFree.saving')
                     : t('openrouterFree.cta')}
@@ -2554,7 +2548,7 @@ const Conversations = ({
                   onClick={() => {
                     void openUrl(BILLING_DASHBOARD_URL);
                   }}
-                  className="px-3 py-1.5 rounded-lg bg-coral-500 hover:bg-coral-400 text-white text-xs font-medium transition-colors">
+                  className="px-3 py-1.5 rounded-lg bg-coral-500 hover:bg-coral-400 text-content-inverted text-xs font-medium transition-colors">
                   {t('chat.topUp')}
                 </button>
               </div>
@@ -2578,7 +2572,7 @@ const Conversations = ({
               type="button"
               data-analytics-id="chat-send-advisory-dismiss"
               onClick={() => setSendAdvisory(null)}
-              className="text-xs text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200 transition-colors ml-2">
+              className="text-xs text-content-muted hover:text-content-secondary dark:text-neutral-200 dark:hover:text-neutral-200 transition-colors ml-2">
               {t('common.dismiss')}
             </button>
           </div>
@@ -2593,7 +2587,7 @@ const Conversations = ({
               type="button"
               data-analytics-id="chat-attach-error-dismiss"
               onClick={() => setAttachError(null)}
-              className="text-xs text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 transition-colors ml-2">
+              className="text-xs text-content-muted hover:text-content-secondary transition-colors ml-2">
               {t('common.dismiss')}
             </button>
           </div>
@@ -2627,7 +2621,7 @@ const Conversations = ({
                 type="button"
                 data-analytics-id="chat-send-error-dismiss"
                 onClick={() => setSendError(null)}
-                className="text-xs text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200 transition-colors">
+                className="text-xs text-content-muted hover:text-content-secondary dark:text-neutral-200 dark:hover:text-neutral-200 transition-colors">
                 {t('common.dismiss')}
               </button>
             </div>
@@ -2754,7 +2748,7 @@ const Conversations = ({
               type="button"
               data-analytics-id="chat-cancel-generation"
               onClick={handleStopGeneration}
-              className="text-xs text-stone-500 transition-colors hover:text-stone-700 dark:text-neutral-400 dark:hover:text-neutral-200">
+              className="text-xs text-content-muted transition-colors hover:text-content-secondary">
               {t('common.cancel')}
             </button>
           </div>
@@ -2821,7 +2815,7 @@ const Conversations = ({
               data-analytics-id="chat-voice-switch-to-text"
               onClick={() => setInputMode('text')}
               disabled={isRecording || isTranscribing}
-              className="w-10 h-10 flex items-center justify-center rounded-full border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200 hover:border-stone-300 dark:hover:border-neutral-700 transition-colors disabled:opacity-40"
+              className="w-10 h-10 flex items-center justify-center rounded-full border border-line bg-surface text-content-muted hover:text-content-secondary dark:text-neutral-200 dark:hover:text-neutral-200 hover:border-line-strong dark:hover:border-line-strong transition-colors disabled:opacity-40"
               title={t('chat.switchToText')}>
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
@@ -2841,8 +2835,8 @@ const Conversations = ({
               disabled={!rustChat || isSending || isTranscribing || !canUseMicrophoneApi}
               className={`px-4 py-2.5 rounded-xl text-sm font-medium transition-colors ${
                 isRecording
-                  ? 'bg-coral-500 hover:bg-coral-400 text-white'
-                  : 'bg-primary-600 hover:bg-primary-500 text-white'
+                  ? 'bg-coral-500 hover:bg-coral-400 text-content-inverted'
+                  : 'bg-primary-600 hover:bg-primary-500 text-content-inverted'
               } disabled:opacity-40 disabled:cursor-not-allowed`}>
               {isTranscribing
                 ? t('chat.transcribing')
@@ -2850,7 +2844,7 @@ const Conversations = ({
                   ? t('chat.stopAndSend')
                   : t('chat.startTalking')}
             </button>
-            <p className="text-xs text-stone-400 dark:text-neutral-500 truncate">
+            <p className="text-xs text-content-faint truncate">
               {voiceStatus ??
                 (isPlayingReply && replyMode === 'voice'
                   ? t('chat.playingVoiceReply')
@@ -2894,7 +2888,7 @@ const Conversations = ({
           {!isSidebar && (
             <div className="flex flex-shrink-0 items-center gap-2">
               <div
-                className="flex h-7 items-center rounded-full border border-stone-200 bg-stone-100 p-0.5 dark:border-neutral-700 dark:bg-neutral-800"
+                className="flex h-7 items-center rounded-full border border-line bg-surface-subtle p-0.5"
                 role="radiogroup"
                 aria-label={t('chat.agentProfile.label')}>
                 <button
@@ -2905,8 +2899,8 @@ const Conversations = ({
                   onClick={() => void handleSelectAgentProfile('default')}
                   className={`rounded-full px-2.5 py-0.5 text-xs font-medium transition-all ${
                     selectedAgentProfileId === 'default'
-                      ? 'bg-white text-stone-800 shadow-sm dark:bg-neutral-600 dark:text-neutral-100'
-                      : 'text-stone-500 hover:text-stone-700 dark:text-neutral-400 dark:hover:text-neutral-200'
+                      ? 'bg-surface text-content shadow-sm'
+                      : 'text-content-muted hover:text-content-secondary'
                   }`}>
                   {t('chat.agentProfile.quick')}
                 </button>
@@ -2918,8 +2912,8 @@ const Conversations = ({
                   onClick={() => void handleSelectAgentProfile('reasoning')}
                   className={`rounded-full px-2.5 py-0.5 text-xs font-medium transition-all ${
                     selectedAgentProfileId === 'reasoning'
-                      ? 'bg-white text-stone-800 shadow-sm dark:bg-neutral-600 dark:text-neutral-100'
-                      : 'text-stone-500 hover:text-stone-700 dark:text-neutral-400 dark:hover:text-neutral-200'
+                      ? 'bg-surface text-content shadow-sm'
+                      : 'text-content-muted hover:text-content-secondary'
                   }`}>
                   {t('chat.agentProfile.reasoning')}
                 </button>
@@ -2945,7 +2939,7 @@ const Conversations = ({
                         )
                       : t('conversations.backgroundTasks.title')
                   }
-                  className="relative flex h-7 w-7 items-center justify-center rounded-lg text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200">
+                  className="relative flex h-7 w-7 items-center justify-center rounded-lg text-content-muted transition-colors hover:bg-surface-hover hover:text-content-secondary">
                   <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
                       strokeLinecap="round"
@@ -2955,7 +2949,7 @@ const Conversations = ({
                     />
                   </svg>
                   {runningBackgroundCount > 0 ? (
-                    <span className="absolute -right-0.5 -top-0.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-0.5 text-[9px] font-semibold leading-none text-white">
+                    <span className="absolute -right-0.5 -top-0.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-0.5 text-[9px] font-semibold leading-none text-content-inverted">
                       {runningBackgroundCount}
                     </span>
                   ) : memorySyncActive ? (
@@ -2981,7 +2975,7 @@ const Conversations = ({
       className={
         isSidebar
           ? 'h-full relative z-10 flex overflow-hidden'
-          : 'h-full relative z-10 flex justify-center overflow-hidden bg-white/70 dark:bg-black/40'
+          : 'h-full relative z-10 flex justify-center overflow-hidden bg-surface/70 dark:bg-black/40'
       }>
       {isSidebar ? (
         <>
diff --git a/app/src/pages/Feedback.tsx b/app/src/pages/Feedback.tsx
index b3aa90821..e839bef8b 100644
--- a/app/src/pages/Feedback.tsx
+++ b/app/src/pages/Feedback.tsx
@@ -141,16 +141,16 @@ const Feedback = () => {
 
         <section className="space-y-4">
           <div className="flex flex-wrap items-center justify-between gap-3 px-1">
-            <h2 className="flex items-center gap-2 font-display text-base font-semibold text-neutral-900 dark:text-neutral-100">
+            <h2 className="flex items-center gap-2 font-title text-base font-semibold text-content">
               {t('feedback.board')}
               {total > 0 && (
-                <span className="rounded-full bg-neutral-100 px-2 py-0.5 text-xs font-medium tabular-nums text-neutral-500 dark:bg-white/10 dark:text-neutral-400">
+                <span className="rounded-full bg-surface-subtle px-2 py-0.5 text-xs font-medium tabular-nums text-content-muted dark:bg-white/10">
                   {total}
                 </span>
               )}
             </h2>
 
-            <div className="inline-flex rounded-xl border border-neutral-200 bg-neutral-50 p-0.5 dark:border-neutral-700 dark:bg-white/[0.03]">
+            <div className="inline-flex rounded-xl border border-line bg-surface-muted p-0.5 dark:border-line-strong dark:bg-white/[0.03]">
               {SORTS.map(option => (
                 <button
                   key={option}
@@ -159,8 +159,8 @@ const Feedback = () => {
                   aria-pressed={sort === option}
                   className={`rounded-lg px-3 py-1 text-xs font-medium transition-all ${
                     sort === option
-                      ? 'bg-white text-neutral-900 shadow-sm dark:bg-neutral-700 dark:text-neutral-100'
-                      : 'text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                      ? 'bg-surface text-content shadow-sm'
+                      : 'text-content-muted hover:text-content-secondary dark:hover:text-content-secondary'
                   }`}>
                   {t(SORT_LABEL_KEYS[option])}
                 </button>
@@ -203,7 +203,7 @@ const Feedback = () => {
               {Array.from({ length: 4 }).map((_, i) => (
                 <div
                   key={i}
-                  className="h-28 animate-pulse rounded-2xl border border-neutral-200 bg-neutral-100 dark:border-neutral-800 dark:bg-white/5"
+                  className="h-28 animate-pulse rounded-2xl border border-line bg-surface-subtle dark:bg-white/5"
                 />
               ))}
             </div>
@@ -220,10 +220,10 @@ const Feedback = () => {
               ))}
             </div>
           ) : loadError ? null : (
-            <div className="rounded-2xl border border-dashed border-neutral-200 py-12 text-center dark:border-neutral-800">
-              <div className="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-full bg-neutral-100 dark:bg-white/5">
+            <div className="rounded-2xl border border-dashed border-line py-12 text-center">
+              <div className="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-full bg-surface-subtle dark:bg-white/5">
                 <svg
-                  className="h-5 w-5 text-neutral-400"
+                  className="h-5 w-5 text-content-faint"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24">
@@ -235,9 +235,7 @@ const Feedback = () => {
                   />
                 </svg>
               </div>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                {t('feedback.empty')}
-              </p>
+              <p className="text-sm text-content-muted">{t('feedback.empty')}</p>
             </div>
           )}
 
diff --git a/app/src/pages/Home.tsx b/app/src/pages/Home.tsx
index 8e3ce4db2..70f2ac592 100644
--- a/app/src/pages/Home.tsx
+++ b/app/src/pages/Home.tsx
@@ -132,7 +132,7 @@ const Home = () => {
   return (
     <div className="min-h-full flex flex-col items-center justify-center p-4">
       {/* Welcome title */}
-      <h1 className="min-h-[3.5rem] text-32l font-bold text-stone-900 dark:text-neutral-100 text-center">
+      <h1 className="min-h-[3.5rem] text-32l font-bold text-content text-center">
         {typedWelcome}
         <span aria-hidden="true" className="ml-0.5 inline-block text-primary-500 animate-pulse">
           |
@@ -168,15 +168,13 @@ const Home = () => {
         {/* Main card — data-walkthrough target for step 1 */}
         <div
           data-walkthrough="home-card"
-          className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 animate-fade-up">
+          className="bg-surface rounded-2xl shadow-soft border border-line p-6 animate-fade-up">
           {/* Header row: version centered, theme toggle right-aligned.
               The empty left spacer matches the toggle's width so the version
               stays visually centered. */}
           <div className="flex items-center justify-between mb-4">
             <div className="w-9" aria-hidden="true" />
-            <span className="text-xs text-center text-stone-400 dark:text-neutral-500">
-              v{APP_VERSION}
-            </span>
+            <span className="text-xs text-center text-content-faint">v{APP_VERSION}</span>
             <Button
               iconOnly
               variant="tertiary"
@@ -224,7 +222,7 @@ const Home = () => {
           {/* Description — copy mirrors the active blocking state so the
               user never sees a "connected" message while the pill shows a
               failure. (#1527) */}
-          <p className="text-sm text-stone-500 dark:text-neutral-400 text-center mb-6 leading-relaxed">
+          <p className="text-sm text-content-muted text-center mb-6 leading-relaxed">
             {statusCopy}
           </p>
 
@@ -236,7 +234,7 @@ const Home = () => {
               <button
                 onClick={handleRestartCore}
                 disabled={isRestartingCore}
-                className="w-full py-3 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 text-white font-medium rounded-xl transition-colors duration-200">
+                className="w-full py-3 bg-amber-500 hover:bg-amber-600 disabled:opacity-50 text-content-inverted font-medium rounded-xl transition-colors duration-200">
                 {isRestartingCore ? t('home.restartingCore') : t('home.restartCore')}
               </button>
               {restartError && (
@@ -260,20 +258,20 @@ const Home = () => {
         <DiscordBanner />
 
         {/* Next steps — compact directory of where to go next */}
-        {/* <div className="mt-3 bg-white rounded-2xl shadow-soft border border-stone-200 p-4">
-          <div className="text-[11px] uppercase tracking-wide text-stone-400 mb-2">Next steps</div>
-          <div className="divide-y divide-stone-100">
+        {/* <div className="mt-3 bg-surface rounded-2xl shadow-soft border border-line p-4">
+          <div className="text-[11px] uppercase tracking-wide text-content-faint mb-2">Next steps</div>
+          <div className="divide-y divide-line-subtle">
             <button
               onClick={() => navigate('/connections')}
-              className="w-full flex items-center justify-between py-2.5 text-left hover:bg-stone-50 rounded-md px-2 -mx-2 transition-colors">
+              className="w-full flex items-center justify-between py-2.5 text-left hover:bg-surface-muted rounded-md px-2 -mx-2 transition-colors">
               <div>
-                <div className="text-sm font-medium text-stone-900">Connect your services</div>
-                <div className="text-xs text-stone-500">
+                <div className="text-sm font-medium text-content">Connect your services</div>
+                <div className="text-xs text-content-muted">
                   Give your assistant access to Gmail, Calendar, and more.
                 </div>
               </div>
               <svg
-                className="w-4 h-4 text-stone-400"
+                className="w-4 h-4 text-content-faint"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
@@ -287,15 +285,15 @@ const Home = () => {
             </button>
             <button
               onClick={() => navigate('/rewards')}
-              className="w-full flex items-center justify-between py-2.5 text-left hover:bg-stone-50 rounded-md px-2 -mx-2 transition-colors">
+              className="w-full flex items-center justify-between py-2.5 text-left hover:bg-surface-muted rounded-md px-2 -mx-2 transition-colors">
               <div>
-                <div className="text-sm font-medium text-stone-900">Earn rewards</div>
-                <div className="text-xs text-stone-500">
+                <div className="text-sm font-medium text-content">Earn rewards</div>
+                <div className="text-xs text-content-muted">
                   Unlock credits by using OpenHuman and completing milestones.
                 </div>
               </div>
               <svg
-                className="w-4 h-4 text-stone-400"
+                className="w-4 h-4 text-content-faint"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
@@ -309,15 +307,15 @@ const Home = () => {
             </button>
             <button
               onClick={() => navigate('/invites')}
-              className="w-full flex items-center justify-between py-2.5 text-left hover:bg-stone-50 rounded-md px-2 -mx-2 transition-colors">
+              className="w-full flex items-center justify-between py-2.5 text-left hover:bg-surface-muted rounded-md px-2 -mx-2 transition-colors">
               <div>
-                <div className="text-sm font-medium text-stone-900">Invite a friend</div>
-                <div className="text-xs text-stone-500">
+                <div className="text-sm font-medium text-content">Invite a friend</div>
+                <div className="text-xs text-content-muted">
                   Share an invite — both of you get credits.
                 </div>
               </div>
               <svg
-                className="w-4 h-4 text-stone-400"
+                className="w-4 h-4 text-content-faint"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
diff --git a/app/src/pages/Intelligence.tsx b/app/src/pages/Intelligence.tsx
index fc5a4f6b5..b73afc52b 100644
--- a/app/src/pages/Intelligence.tsx
+++ b/app/src/pages/Intelligence.tsx
@@ -217,7 +217,7 @@ export default function Intelligence({ tabParamKey = 'tab' }: IntelligenceProps
               <span className="inline-flex items-center gap-1.5">
                 <span>{tab.label}</span>
                 {tab.comingSoon && (
-                  <span className="rounded-full border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-1.5 py-0.5 text-[10px] text-neutral-500 dark:text-neutral-400">
+                  <span className="rounded-full border border-line bg-surface-muted px-1.5 py-0.5 text-[10px] text-content-muted">
                     {t('misc.beta')}
                   </span>
                 )}
@@ -229,7 +229,7 @@ export default function Intelligence({ tabParamKey = 'tab' }: IntelligenceProps
           className="flex flex-wrap gap-2 pb-1"
         />
 
-        <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-neutral-200 dark:border-neutral-800 p-6">
+        <div className="bg-surface rounded-2xl shadow-soft border border-line p-6">
           <div>
             {/* Sub-heading — reflects the active tab (e.g. "Agent Tasks") so
                 the panel body title matches what's shown below it, rather than
@@ -237,14 +237,12 @@ export default function Intelligence({ tabParamKey = 'tab' }: IntelligenceProps
             <div className="flex items-center justify-between mb-6">
               <div className="min-w-0">
                 <h2
-                  className="text-xl font-bold text-neutral-800 dark:text-neutral-100"
+                  className="text-xl font-bold text-content"
                   data-walkthrough="intelligence-header">
                   {activeTabDef?.label ?? t('memory.title')}
                 </h2>
                 {activeTabDef?.description && (
-                  <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
-                    {activeTabDef.description}
-                  </p>
+                  <p className="mt-1 text-sm text-content-muted">{activeTabDef.description}</p>
                 )}
                 {/* Header count badge was sourced from `stats.total` which
                     in turn came from the legacy actionable-items pipeline
diff --git a/app/src/pages/Invites.tsx b/app/src/pages/Invites.tsx
index 0297cc4b6..fa4d750a3 100644
--- a/app/src/pages/Invites.tsx
+++ b/app/src/pages/Invites.tsx
@@ -28,18 +28,18 @@ const CodeRow = ({ invite }: { invite: InviteCode }) => {
     : claimedUser?.firstName || 'Someone';
 
   return (
-    <div className="flex items-center justify-between py-3 px-4 rounded-xl bg-white/5 hover:bg-white/[0.07] transition-colors">
+    <div className="flex items-center justify-between py-3 px-4 rounded-xl bg-surface/5 hover:bg-white/[0.07] transition-colors">
       <div className="flex-1 min-w-0">
         <span className="font-mono text-sm tracking-wider">{invite.code}</span>
         {claimed && (
-          <p className="text-xs text-stone-500 mt-0.5">
+          <p className="text-xs text-content-muted mt-0.5">
             {t('rewards.credits')} {displayName}
           </p>
         )}
       </div>
       <div className="flex items-center gap-2 ml-3">
         {claimed ? (
-          <span className="text-xs px-2 py-1 rounded-full bg-stone-700/50 text-stone-400">
+          <span className="text-xs px-2 py-1 rounded-full bg-stone-700/50 text-content-faint">
             {t('common.disabled')}
           </span>
         ) : (
@@ -164,7 +164,7 @@ const Invites = () => {
           <div className="space-y-4">
             {/* Redeem Section — shown only if user hasn't redeemed yet */}
             {!hasBeenInvited && (
-              <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 animate-fade-up">
+              <div className="bg-surface rounded-2xl shadow-soft border border-line p-6 animate-fade-up">
                 <h2 className="text-lg font-bold mb-1">{t('rewards.referralCode')}</h2>
                 <p className="text-xs opacity-70 mb-4">{t('rewards.share')}</p>
                 <div className="flex gap-2">
@@ -174,7 +174,7 @@ const Invites = () => {
                     onChange={e => setRedeemInput(e.target.value.toUpperCase())}
                     onKeyDown={e => e.key === 'Enter' && handleRedeem()}
                     placeholder={t('common.search')}
-                    className="flex-1 px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl font-mono text-sm tracking-wider placeholder:text-stone-500 placeholder:tracking-normal placeholder:font-sans focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500/50 transition-all"
+                    className="flex-1 px-4 py-2.5 bg-surface/5 border border-white/10 rounded-xl font-mono text-sm tracking-wider placeholder:text-stone-500 placeholder:tracking-normal placeholder:font-sans focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500/50 transition-all"
                     disabled={redeemStatus === 'loading'}
                   />
                   <Button
@@ -195,7 +195,7 @@ const Invites = () => {
             )}
 
             {/* Your Invite Codes */}
-            <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 animate-fade-up">
+            <div className="bg-surface rounded-2xl shadow-soft border border-line p-6 animate-fade-up">
               <div className="mb-4">
                 <h2 className="text-lg font-bold mb-1">{t('rewards.referralCode')}</h2>
                 <p className="text-xs opacity-70">{t('rewards.share')}</p>
@@ -206,7 +206,7 @@ const Invites = () => {
               {isLoading ? (
                 <div className="space-y-3">
                   {Array.from({ length: 5 }).map((_, i) => (
-                    <div key={i} className="h-12 bg-white/5 rounded-xl animate-pulse" />
+                    <div key={i} className="h-12 bg-surface/5 rounded-xl animate-pulse" />
                   ))}
                 </div>
               ) : codes.length > 0 ? (
@@ -216,7 +216,7 @@ const Invites = () => {
                   ))}
                 </div>
               ) : (
-                <p className="text-sm text-stone-500 dark:text-neutral-400 text-center py-6">
+                <p className="text-sm text-content-muted text-center py-6">
                   {t('invites.noInvites')}
                 </p>
               )}
diff --git a/app/src/pages/Notifications.tsx b/app/src/pages/Notifications.tsx
index 5a6b53b54..6297ad23c 100644
--- a/app/src/pages/Notifications.tsx
+++ b/app/src/pages/Notifications.tsx
@@ -105,20 +105,18 @@ const Notifications = () => {
       {/* Integration notifications — from connected accounts, scored by local AI */}
       <div
         data-testid="integration-notifications-section"
-        className="max-w-2xl mx-auto bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 overflow-hidden min-h-[200px]">
+        className="max-w-2xl mx-auto bg-surface rounded-2xl shadow-soft border border-line overflow-hidden min-h-[200px]">
         <NotificationCenter />
       </div>
 
       {/* Core-bridge notifications — system events */}
       <div
         data-testid="system-events-section"
-        className="max-w-2xl mx-auto bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 overflow-hidden">
-        <div className="flex items-center justify-between border-b border-stone-100 dark:border-neutral-800 px-4 py-3">
+        className="max-w-2xl mx-auto bg-surface rounded-2xl shadow-soft border border-line overflow-hidden">
+        <div className="flex items-center justify-between border-b border-line-subtle px-4 py-3">
           <div>
-            <h1 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
-              {t('alerts.title')}
-            </h1>
-            <p className="text-xs text-stone-500 dark:text-neutral-400">
+            <h1 className="text-lg font-semibold text-content">{t('alerts.title')}</h1>
+            <p className="text-xs text-content-muted">
               {unread > 0 ? `${unread} ${t('alerts.unread')}` : t('alerts.empty')}
             </p>
           </div>
@@ -143,7 +141,7 @@ const Notifications = () => {
         {presentCategories.length > 0 && (
           <div
             data-testid="notification-category-filter"
-            className="flex flex-wrap items-center gap-2 border-b border-stone-100 dark:border-neutral-800 px-4 py-2">
+            className="flex flex-wrap items-center gap-2 border-b border-line-subtle px-4 py-2">
             <button
               type="button"
               data-testid="notif-filter-chip-all"
@@ -151,8 +149,8 @@ const Notifications = () => {
               onClick={() => setSelectedCategory('all')}
               className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
                 activeCategory === 'all'
-                  ? 'bg-primary-500 text-white'
-                  : 'bg-stone-100 text-stone-600 hover:bg-stone-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700'
+                  ? 'bg-primary-500 text-content-inverted'
+                  : 'bg-surface-subtle text-content-secondary hover:bg-surface-strong dark:hover:bg-neutral-700'
               }`}>
               {t('notifications.filterAll')}
             </button>
@@ -165,8 +163,8 @@ const Notifications = () => {
                 onClick={() => setSelectedCategory(category)}
                 className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
                   activeCategory === category
-                    ? 'bg-primary-500 text-white'
-                    : 'bg-stone-100 text-stone-600 hover:bg-stone-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700'
+                    ? 'bg-primary-500 text-content-inverted'
+                    : 'bg-surface-subtle text-content-secondary hover:bg-surface-strong dark:hover:bg-neutral-700'
                 }`}>
                 {categoryLabel(category)}
               </button>
@@ -175,11 +173,11 @@ const Notifications = () => {
         )}
 
         {filteredItems.length === 0 ? (
-          <div className="px-6 py-16 text-center text-sm text-stone-500 dark:text-neutral-400">
+          <div className="px-6 py-16 text-center text-sm text-content-muted">
             {activeCategory === 'all' ? t('alerts.empty') : t('notifications.filterEmpty')}
           </div>
         ) : (
-          <ul className="divide-y divide-stone-100 dark:divide-neutral-800">
+          <ul className="divide-y divide-line-subtle dark:divide-neutral-800">
             {filteredItems.map(item => (
               <li key={item.id} data-testid="notification-item">
                 {/* `role="button"` instead of a real `<button>` — the row body
@@ -200,10 +198,8 @@ const Notifications = () => {
                       handleClick(item);
                     }
                   }}
-                  className={`w-full text-left px-4 py-3 hover:bg-stone-50 dark:hover:bg-neutral-800/60 transition-colors ${
-                    item.read
-                      ? 'bg-white dark:bg-neutral-900'
-                      : 'bg-primary-50/30 dark:bg-primary-900/20'
+                  className={`w-full text-left px-4 py-3 hover:bg-surface-hover transition-colors ${
+                    item.read ? 'bg-surface' : 'bg-primary-50/30 dark:bg-primary-900/20'
                   }`}>
                   <div className="flex items-start justify-between gap-3">
                     <div className="min-w-0 flex-1">
@@ -214,20 +210,20 @@ const Notifications = () => {
                             aria-label={t('alerts.unread')}
                           />
                         )}
-                        <span className="text-xs uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+                        <span className="text-xs uppercase tracking-wide text-content-faint">
                           {categoryLabel(item.category)}
                         </span>
                       </div>
-                      <p className="mt-1 text-sm font-semibold text-stone-900 dark:text-neutral-100 truncate">
+                      <p className="mt-1 text-sm font-semibold text-content truncate">
                         {item.title}
                       </p>
                       <p
                         data-testid="notification-item-body"
-                        className="mt-0.5 text-sm text-stone-600 dark:text-neutral-300 line-clamp-2">
+                        className="mt-0.5 text-sm text-content-secondary line-clamp-2">
                         <NotificationBody body={item.body} />
                       </p>
                     </div>
-                    <span className="text-[11px] text-stone-400 dark:text-neutral-500 whitespace-nowrap">
+                    <span className="text-[11px] text-content-faint whitespace-nowrap">
                       {formatTime(item.timestamp, t)}
                     </span>
                   </div>
diff --git a/app/src/pages/Routines.tsx b/app/src/pages/Routines.tsx
index bca3fa7fd..5fd98f718 100644
--- a/app/src/pages/Routines.tsx
+++ b/app/src/pages/Routines.tsx
@@ -179,10 +179,8 @@ const Routines = () => {
             </svg>
           </Button>
           <div>
-            <h1 className="text-lg font-bold text-stone-900 dark:text-neutral-100">
-              {t('routines.title')}
-            </h1>
-            <p className="text-xs text-stone-500 dark:text-neutral-400">{t('routines.subtitle')}</p>
+            <h1 className="text-lg font-bold text-content">{t('routines.title')}</h1>
+            <p className="text-xs text-content-muted">{t('routines.subtitle')}</p>
           </div>
         </div>
 
@@ -196,15 +194,13 @@ const Routines = () => {
         {/* Loading */}
         {loading && (
           <div className="flex justify-center py-12">
-            <div className="text-sm text-stone-400 dark:text-neutral-500">
-              {t('routines.loading')}
-            </div>
+            <div className="text-sm text-content-faint">{t('routines.loading')}</div>
           </div>
         )}
 
         {/* Empty state */}
         {!loading && jobs.length === 0 && !error && (
-          <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-stone-200 dark:border-neutral-800 p-6 text-center space-y-3">
+          <div className="bg-surface rounded-2xl border border-line p-6 text-center space-y-3">
             <div className="mx-auto w-12 h-12 rounded-full bg-primary-50 dark:bg-primary-500/10 flex items-center justify-center">
               <svg
                 className="w-6 h-6 text-primary-500"
@@ -220,12 +216,8 @@ const Routines = () => {
               </svg>
             </div>
             <div>
-              <p className="text-sm font-medium text-stone-700 dark:text-neutral-200">
-                {t('routines.empty')}
-              </p>
-              <p className="text-xs text-stone-400 dark:text-neutral-500 mt-1">
-                {t('routines.emptyHint')}
-              </p>
+              <p className="text-sm font-medium text-content-secondary">{t('routines.empty')}</p>
+              <p className="text-xs text-content-faint mt-1">{t('routines.emptyHint')}</p>
             </div>
           </div>
         )}
diff --git a/app/src/pages/Skills.tsx b/app/src/pages/Skills.tsx
index e057cc8e3..f64ad49bf 100644
--- a/app/src/pages/Skills.tsx
+++ b/app/src/pages/Skills.tsx
@@ -82,7 +82,7 @@ function channelStatusColor(status: ChannelConnectionStatus): string {
     case 'error':
       return 'text-coral-600 dark:text-coral-300';
     default:
-      return 'text-stone-400 dark:text-neutral-500';
+      return 'text-content-faint';
   }
 }
 
@@ -119,7 +119,7 @@ function composioStatusColor(connection: ComposioConnection | undefined): string
     case 'error':
       return 'text-coral-600 dark:text-coral-300';
     default:
-      return 'text-stone-400 dark:text-neutral-500';
+      return 'text-content-faint';
   }
 }
 
@@ -211,7 +211,7 @@ function ComposioConnectorTile({
               ? 'border-amber-200 bg-amber-50/40 hover:bg-amber-50/70 dark:border-amber-500/30 dark:bg-amber-500/10 dark:hover:bg-amber-500/15'
               : isExpired || isError
                 ? 'border-coral-200 bg-coral-50/30 hover:bg-coral-50/50 dark:border-coral-500/30 dark:bg-coral-500/10 dark:hover:bg-coral-500/15'
-                : 'border-stone-200 bg-white hover:bg-stone-50 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800/60'
+                : 'border-line bg-surface hover:bg-surface-hover'
       }`}>
       {isPreview && (
         <span
@@ -228,11 +228,11 @@ function ComposioConnectorTile({
           {activeConnectionCount}
         </span>
       )}
-      <div className="relative flex h-12 w-12 flex-shrink-0 items-center justify-center text-stone-700 dark:text-neutral-200 [&_img]:max-h-10 [&_img]:max-w-10 [&_svg]:h-8 [&_svg]:w-8">
+      <div className="relative flex h-12 w-12 flex-shrink-0 items-center justify-center text-content-secondary [&_img]:max-h-10 [&_img]:max-w-10 [&_svg]:h-8 [&_svg]:w-8">
         {meta.icon}
       </div>
       <div className="flex w-full min-w-0 flex-col items-center justify-start gap-0.5">
-        <span className="line-clamp-2 text-[11px] font-semibold leading-tight text-stone-900 dark:text-neutral-100">
+        <span className="line-clamp-2 text-[11px] font-semibold leading-tight text-content">
           {meta.name}
         </span>
         <span
@@ -302,7 +302,7 @@ function ChannelTile({
             ? 'border-amber-200 bg-amber-50/40 dark:border-amber-500/30 dark:bg-amber-500/10'
             : isError
               ? 'border-coral-200 bg-coral-50/30 dark:border-coral-500/30 dark:bg-coral-500/10'
-              : 'border-stone-200 bg-white dark:border-neutral-800 dark:bg-neutral-900'
+              : 'border-line bg-surface'
       } ${
         // The default channel keeps its connection-status colour but gains a
         // primary ring so "which one is the default" reads at a glance without
@@ -318,11 +318,11 @@ function ChannelTile({
         title={`${def.display_name} — ${def.description}`}
         aria-label={`${def.display_name}, ${statusLabel}. ${ctaLabel}.`}
         className="flex w-full items-center gap-3 rounded-xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40">
-        <div className="relative flex h-10 w-10 flex-shrink-0 items-center justify-center text-stone-700 dark:text-neutral-200 [&>span]:h-10 [&>span]:w-10 [&>span]:rounded-2xl [&_svg]:h-6 [&_svg]:w-6">
+        <div className="relative flex h-10 w-10 flex-shrink-0 items-center justify-center text-content-secondary [&>span]:h-10 [&>span]:w-10 [&>span]:rounded-2xl [&_svg]:h-6 [&_svg]:w-6">
           {icon}
         </div>
         <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-          <span className="line-clamp-2 text-xs font-semibold leading-tight text-stone-900 dark:text-neutral-100">
+          <span className="line-clamp-2 text-xs font-semibold leading-tight text-content">
             {def.display_name}
           </span>
           <span className={`line-clamp-1 text-[11px] font-medium ${channelStatusColor(status)}`}>
@@ -352,7 +352,7 @@ function ChannelTile({
               data-testid={setDefaultTestId}
               onClick={onSetDefault}
               disabled={setDefaultBusy}
-              className="inline-flex items-center justify-center rounded-lg border border-stone-200 bg-white/70 px-2.5 py-1 text-[11px] font-medium text-stone-500 transition-colors hover:border-primary-300 hover:text-primary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900/60 dark:text-neutral-400 dark:hover:border-primary-500/40 dark:hover:text-primary-300">
+              className="inline-flex items-center justify-center rounded-lg border border-line bg-surface/70 px-2.5 py-1 text-[11px] font-medium text-content-muted transition-colors hover:border-primary-300 hover:text-primary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-surface/60 dark:hover:border-primary-500/40 dark:hover:text-primary-300">
               {t('channels.setAsDefault')}
             </button>
           )}
@@ -796,10 +796,10 @@ export default function Skills() {
   const renderGroup = ({ category, items }: { category: SkillCategory; items: SkillItem[] }) => (
     <div
       key={category}
-      className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 shadow-soft animate-fade-up">
+      className="rounded-2xl border border-line bg-surface p-3 shadow-soft animate-fade-up">
       <div className="px-1 pb-3 pt-1">
-        <h2 className="flex items-center gap-2 text-sm font-semibold text-stone-900 dark:text-neutral-100">
-          <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-stone-100 dark:bg-neutral-800">
+        <h2 className="flex items-center gap-2 text-sm font-semibold text-content">
+          <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-surface-subtle">
             <SkillCategoryIcon
               category={category}
               className={skillCategoryHeadingClassName(category)}
@@ -1018,7 +1018,7 @@ export default function Skills() {
           // them a card surface (the integrations/skills grids below already
           // have their own card layouts, so they stay flush).
           <div className="h-full p-4">
-            <div className="h-full overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-soft dark:border-neutral-800 dark:bg-neutral-900">
+            <div className="h-full overflow-hidden rounded-2xl border border-line bg-surface shadow-soft">
               <SettingsLayoutProvider value={{ inTwoPaneShell: true }}>
                 {activeTab === 'llm' && <AIPanel />}
                 {activeTab === 'voice' && <VoicePanel />}
@@ -1033,10 +1033,10 @@ export default function Skills() {
             <div className="mx-auto w-full max-w-3xl space-y-4">
               {/* <div className="flex items-center justify-between gap-2">
               <div className="min-w-0">
-                <h1 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+                <h1 className="text-base font-semibold text-content">
                   Skills
                 </h1>
-                <p className="text-xs text-stone-500 dark:text-neutral-400">
+                <p className="text-xs text-content-muted">
                   Scaffold a new <code className="font-mono">SKILL.md</code> or install a published
                   package.
                 </p>
@@ -1045,13 +1045,13 @@ export default function Skills() {
                 <button
                   type="button"
                   onClick={() => setInstallDialogOpen(true)}
-                  className="rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-xs font-medium text-stone-700 dark:text-neutral-200 shadow-soft transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
+                  className="rounded-lg border border-line bg-surface px-3 py-2 text-xs font-medium text-content-secondary shadow-soft transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
                   Install from URL
                 </button>
                 <button
                   type="button"
                   onClick={() => setCreateModalOpen(true)}
-                  className="rounded-lg bg-primary-500 px-3 py-2 text-xs font-semibold text-white shadow-soft transition-colors hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
+                  className="rounded-lg bg-primary-500 px-3 py-2 text-xs font-semibold text-content-inverted shadow-soft transition-colors hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
                   New skill
                 </button>
               </div>
@@ -1069,7 +1069,7 @@ export default function Skills() {
                     <button
                       type="button"
                       onClick={() => void refreshComposio()}
-                      className="flex-shrink-0 rounded-lg border border-amber-300 dark:border-amber-500/40 bg-white dark:bg-neutral-900 px-3 py-1.5 text-[11px] font-medium text-amber-800 dark:text-amber-300 transition-colors hover:bg-amber-100 dark:hover:bg-amber-500/10">
+                      className="flex-shrink-0 rounded-lg border border-amber-300 dark:border-amber-500/40 bg-surface px-3 py-1.5 text-[11px] font-medium text-amber-800 dark:text-amber-300 transition-colors hover:bg-amber-100 dark:hover:bg-amber-500/10">
                       {t('common.retry')}
                     </button>
                   </div>
@@ -1079,12 +1079,12 @@ export default function Skills() {
               {
                 <>
                   {activeTab === 'channels' && channelsGroup && (
-                    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 shadow-soft animate-fade-up">
+                    <div className="rounded-2xl border border-line bg-surface p-3 shadow-soft animate-fade-up">
                       <div className="px-1 pb-3 pt-1">
                         <h2
-                          className="flex items-center gap-2 text-sm font-semibold text-stone-900 dark:text-neutral-100"
+                          className="flex items-center gap-2 text-sm font-semibold text-content"
                           data-walkthrough="skills-channels">
-                          <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-stone-100 dark:bg-neutral-800">
+                          <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-surface-subtle">
                             <SkillCategoryIcon
                               category="Channels"
                               className={skillCategoryHeadingClassName('Channels')}
@@ -1092,7 +1092,7 @@ export default function Skills() {
                           </span>
                           {t('skills.channels')}
                         </h2>
-                        <p className="mt-0.5 text-[11px] leading-relaxed text-stone-500 dark:text-neutral-400">
+                        <p className="mt-0.5 text-[11px] leading-relaxed text-content-muted">
                           {t('channels.defaultMessaging')}
                         </p>
                       </div>
@@ -1150,10 +1150,10 @@ export default function Skills() {
 
                   {activeTab === 'composio' && (
                     <div
-                      className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 shadow-soft animate-fade-up"
+                      className="rounded-2xl border border-line bg-surface p-3 shadow-soft animate-fade-up"
                       data-walkthrough="skills-grid"
                       data-testid="composio-integrations-card">
-                      <p className="px-1 pb-3 text-xs leading-relaxed text-stone-500 dark:text-neutral-400">
+                      <p className="px-1 pb-3 text-xs leading-relaxed text-content-muted">
                         {t('skills.integrationsSubtitle')}
                       </p>
                       {showLocalComposioApiKeyBanner && (
@@ -1194,7 +1194,7 @@ export default function Skills() {
                                 key={i}
                                 data-testid="composio-skeleton-tile"
                                 aria-hidden="true"
-                                className="animate-pulse rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-100 dark:bg-neutral-800/60"
+                                className="animate-pulse rounded-xl border border-line bg-surface-subtle"
                               />
                             ))}
                           </div>
@@ -1234,7 +1234,7 @@ export default function Skills() {
                             })}
                           </div>
                         ) : (
-                          <p className="px-1 py-4 text-center text-xs text-stone-400 dark:text-neutral-500">
+                          <p className="px-1 py-4 text-center text-xs text-content-faint">
                             {t('skills.noResults')}
                           </p>
                         ))}
@@ -1253,7 +1253,7 @@ export default function Skills() {
                   {activeTab === 'mcp' && (
                     <div className="space-y-3 animate-fade-up">
                       <BetaBanner />
-                      <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 shadow-soft">
+                      <div className="rounded-2xl border border-line bg-surface p-4 shadow-soft">
                         <McpServersTab />
                       </div>
                     </div>
diff --git a/app/src/pages/Webhooks.tsx b/app/src/pages/Webhooks.tsx
index de1157e67..d57e4a85c 100644
--- a/app/src/pages/Webhooks.tsx
+++ b/app/src/pages/Webhooks.tsx
@@ -40,10 +40,8 @@ export default function Webhooks({ embedded = false }: WebhooksProps) {
         )}
         <div className="h-full flex items-center justify-center p-4 pt-6">
           <div className="flex flex-col items-center gap-3">
-            <div className="h-8 w-8 animate-spin rounded-full border-2 border-neutral-300 dark:border-neutral-700 border-t-primary-500" />
-            <span className="text-sm text-neutral-500 dark:text-neutral-400">
-              {t('common.loading')}
-            </span>
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-line-strong border-t-primary-500" />
+            <span className="text-sm text-content-muted">{t('common.loading')}</span>
           </div>
         </div>
       </div>
@@ -55,9 +53,7 @@ export default function Webhooks({ embedded = false }: WebhooksProps) {
       {/* Bespoke connection status badge — keep intentional visual */}
       <span
         className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full ${
-          coreConnected
-            ? 'bg-sage-100 text-sage-700'
-            : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400'
+          coreConnected ? 'bg-sage-100 text-sage-700' : 'bg-surface-subtle text-content-muted'
         }`}>
         <span
           className={`w-1.5 h-1.5 rounded-full ${
@@ -92,18 +88,18 @@ export default function Webhooks({ embedded = false }: WebhooksProps) {
         <SettingsSection title={t('skills.search')} description={t('misc.rehydrating')}>
           <div className="px-4 py-3 space-y-2">
             <div>
-              <div className="text-xs uppercase tracking-wide text-neutral-400 dark:text-neutral-500">
+              <div className="text-xs uppercase tracking-wide text-content-faint">
                 {t('webhooks.archiveDirectory')}
               </div>
-              <div className="font-mono text-xs break-all text-neutral-800 dark:text-neutral-100">
+              <div className="font-mono text-xs break-all text-content">
                 {archiveDir ?? t('common.loading')}
               </div>
             </div>
             <div>
-              <div className="text-xs uppercase tracking-wide text-neutral-400 dark:text-neutral-500">
+              <div className="text-xs uppercase tracking-wide text-content-faint">
                 {t('webhooks.todayFile')}
               </div>
-              <div className="font-mono text-xs break-all text-neutral-800 dark:text-neutral-100">
+              <div className="font-mono text-xs break-all text-content">
                 {currentDayFile ?? t('common.loading')}
               </div>
             </div>
diff --git a/app/src/pages/Welcome.tsx b/app/src/pages/Welcome.tsx
index cf80909cb..e7a56e25c 100644
--- a/app/src/pages/Welcome.tsx
+++ b/app/src/pages/Welcome.tsx
@@ -84,7 +84,7 @@ const Welcome = () => {
   return (
     <div className="min-h-full flex flex-col items-center justify-center p-4">
       <div className="max-w-md w-full">
-        <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-8 animate-fade-up">
+        <div className="bg-surface rounded-2xl shadow-soft border border-line p-8 animate-fade-up">
           <div className="flex items-center justify-between mb-4">
             <div className="w-9" aria-hidden="true" />
             <div className="w-9" aria-hidden="true" />
@@ -134,11 +134,9 @@ const Welcome = () => {
             />
           </div>
 
-          <h1 className="text-2xl font-bold text-stone-900 dark:text-neutral-100 text-center mb-2">
-            {t('welcome.title')}
-          </h1>
+          <h1 className="text-2xl font-bold text-content text-center mb-2">{t('welcome.title')}</h1>
 
-          <p className="text-sm text-stone-500 dark:text-neutral-400 text-center mb-6 leading-relaxed">
+          <p className="text-sm text-content-muted text-center mb-6 leading-relaxed">
             {t('welcome.subtitle')}
           </p>
 
@@ -182,10 +180,8 @@ const Welcome = () => {
               aria-live="polite"
               aria-atomic="true"
               className="mb-5 flex flex-col items-center justify-center gap-3 py-2">
-              <div className="h-6 w-6 animate-spin rounded-full border-2 border-stone-300 dark:border-neutral-700 border-t-primary-500" />
-              <p className="text-sm font-medium text-stone-700 dark:text-neutral-200">
-                {t('welcome.signingIn')}
-              </p>
+              <div className="h-6 w-6 animate-spin rounded-full border-2 border-line-strong border-t-primary-500" />
+              <p className="text-sm font-medium text-content-secondary">{t('welcome.signingIn')}</p>
             </div>
           ) : (
             <>
@@ -201,7 +197,7 @@ const Welcome = () => {
                     />
                   ))}
               </div>
-              <p className="mt-5 text-center text-[11px] leading-5 text-stone-500 dark:text-neutral-500">
+              <p className="mt-5 text-center text-[11px] leading-5 text-content-muted dark:text-content-faint">
                 {t('welcome.termsIntro')}{' '}
                 <a
                   href={TERMS_OF_USE_URL}
@@ -211,7 +207,7 @@ const Welcome = () => {
                     event.preventDefault();
                     void openUrl(TERMS_OF_USE_URL);
                   }}
-                  className="font-medium text-stone-700 underline underline-offset-2 hover:text-stone-900 dark:text-neutral-300 dark:hover:text-neutral-100">
+                  className="font-medium text-content-secondary underline underline-offset-2 hover:text-content">
                   {t('welcome.termsOfUse')}
                 </a>{' '}
                 {t('welcome.termsJoiner')}{' '}
@@ -223,7 +219,7 @@ const Welcome = () => {
                     event.preventDefault();
                     void openUrl(PRIVACY_POLICY_URL);
                   }}
-                  className="font-medium text-stone-700 underline underline-offset-2 hover:text-stone-900 dark:text-neutral-300 dark:hover:text-neutral-100">
+                  className="font-medium text-content-secondary underline underline-offset-2 hover:text-content">
                   {t('welcome.privacyPolicy')}
                 </a>
                 {t('welcome.termsOutro')}
diff --git a/app/src/pages/WorkflowNew.tsx b/app/src/pages/WorkflowNew.tsx
index 28dedec9a..4ec543a51 100644
--- a/app/src/pages/WorkflowNew.tsx
+++ b/app/src/pages/WorkflowNew.tsx
@@ -59,12 +59,8 @@ export default function WorkflowNew() {
               header rather than inside the form element. */}
           <div className="flex items-center justify-between gap-2">
             <div className="min-w-0">
-              <h1 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
-                {t('skills.new.title')}
-              </h1>
-              <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
-                {t('skills.create.subtitle')}
-              </p>
+              <h1 className="text-base font-semibold text-content">{t('skills.new.title')}</h1>
+              <p className="mt-0.5 text-xs text-content-muted">{t('skills.create.subtitle')}</p>
             </div>
             <div className="flex items-center gap-2 shrink-0">
               <Button
@@ -86,7 +82,7 @@ export default function WorkflowNew() {
           </div>
 
           {/* Form */}
-          <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-soft">
+          <div className="rounded-2xl border border-line bg-surface p-6 shadow-soft">
             <CreateWorkflowForm
               formId={PAGE_FORM_ID}
               onCreated={handleCreated}
diff --git a/app/src/pages/WorkflowsRun.tsx b/app/src/pages/WorkflowsRun.tsx
index 4ba47decd..6d7a32afe 100644
--- a/app/src/pages/WorkflowsRun.tsx
+++ b/app/src/pages/WorkflowsRun.tsx
@@ -45,12 +45,10 @@ export default function WorkflowsRun() {
               aria-label={t('common.back')}>
               <span aria-hidden="true">←</span> {t('common.back')}
             </Button>
-            <h1 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
-              {t('skills.run.title')}
-            </h1>
+            <h1 className="text-base font-semibold text-content">{t('skills.run.title')}</h1>
           </div>
 
-          <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-soft animate-fade-up">
+          <div className="rounded-2xl border border-line bg-surface p-6 shadow-soft animate-fade-up">
             <WorkflowRunnerBody />
           </div>
         </div>
diff --git a/app/src/pages/conversations/components/AgentMessageBubble.tsx b/app/src/pages/conversations/components/AgentMessageBubble.tsx
index 1c3c045fd..c530021da 100644
--- a/app/src/pages/conversations/components/AgentMessageBubble.tsx
+++ b/app/src/pages/conversations/components/AgentMessageBubble.tsx
@@ -113,7 +113,7 @@ export function TableCellMarkdown({ content }: { content: string }) {
   const hasMath = hasLatexContent(content);
   const rendered = hasMath ? normalizeLatexDelimiters(content) : content;
   return (
-    <div className="prose prose-sm dark:prose-invert max-w-none text-sm text-stone-700 dark:text-neutral-200 prose-p:my-0 prose-ul:my-0 prose-ol:my-0 prose-li:my-0 prose-code:text-xs prose-code:text-primary-700 dark:prose-code:text-primary-300 prose-a:text-primary-500 prose-strong:text-stone-900 dark:prose-strong:text-neutral-100 prose-headings:text-sm prose-headings:font-semibold [&_li::marker]:text-stone-700 dark:[&_li::marker]:text-neutral-300 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:pl-0 [&_ol]:pl-0 [&_ul]:list-inside [&_ol]:list-inside [&_li]:pl-0 [&_li_p]:inline [&_li_p]:m-0">
+    <div className="prose prose-sm dark:prose-invert max-w-none text-sm text-content-secondary prose-p:my-0 prose-ul:my-0 prose-ol:my-0 prose-li:my-0 prose-code:text-xs prose-code:text-primary-700 dark:prose-code:text-primary-300 prose-a:text-primary-500 prose-strong:text-stone-900 dark:prose-strong:text-neutral-100 prose-headings:text-sm prose-headings:font-semibold [&_li::marker]:text-stone-700 dark:[&_li::marker]:text-neutral-300 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:pl-0 [&_ol]:pl-0 [&_ul]:list-inside [&_ol]:list-inside [&_li]:pl-0 [&_li_p]:inline [&_li_p]:m-0">
       <Markdown
         urlTransform={transformMarkdownUrl}
         components={{ a: MarkdownAnchor }}
@@ -135,13 +135,13 @@ function AgentMarkdownTable({
   return (
     <div className={className}>
       <div className="overflow-x-auto">
-        <table className="w-max min-w-full border-collapse text-left text-sm text-stone-800 dark:text-neutral-100">
-          <thead className="bg-stone-100 dark:bg-neutral-800/90">
+        <table className="w-max min-w-full border-collapse text-left text-sm text-content">
+          <thead className="bg-surface-subtle dark:bg-surface-muted/90">
             <tr>
               {table.headers.map(header => (
                 <th
                   key={header}
-                  className="max-w-[25vw] border-b border-stone-200 dark:border-neutral-800 px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.08em] text-stone-500 dark:text-neutral-400">
+                  className="max-w-[25vw] border-b border-line px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.08em] text-content-muted">
                   {header}
                 </th>
               ))}
@@ -155,7 +155,7 @@ function AgentMarkdownTable({
                 {row.map((cell, cellIndex) => (
                   <td
                     key={`${rowIndex}:${cellIndex}:${cell}`}
-                    className="max-w-[25vw] border-t border-stone-200 dark:border-neutral-800 px-4 py-3 align-top text-sm text-stone-700 dark:text-neutral-200">
+                    className="max-w-[25vw] border-t border-line px-4 py-3 align-top text-sm text-content-secondary">
                     <TableCellMarkdown content={cell} />
                   </td>
                 ))}
@@ -192,7 +192,7 @@ export function AgentMessageBubble({
     return (
       <AgentMarkdownTable
         table={table}
-        className={`w-full max-w-full overflow-hidden border border-stone-200 dark:border-neutral-800 bg-white/90 dark:bg-neutral-900/90 shadow-sm ${bubbleChrome}`}
+        className={`w-full max-w-full overflow-hidden border border-line bg-surface/90 shadow-sm ${bubbleChrome}`}
       />
     );
   }
@@ -201,7 +201,7 @@ export function AgentMessageBubble({
     <>
       {textContent && (
         <div
-          className={`bg-stone-200 dark:bg-neutral-800/80 px-4 py-2.5 text-stone-900 dark:text-neutral-100 ${bubbleChrome}`}>
+          className={`bg-surface-strong dark:bg-surface-muted/80 px-4 py-2.5 text-content ${bubbleChrome}`}>
           <BubbleMarkdown content={textContent} />
         </div>
       )}
@@ -233,9 +233,7 @@ export function AgentMessageText({ content }: { content: string }) {
   const table = parseMarkdownTable(textContent);
 
   return (
-    <div
-      className="w-full min-w-0 px-1 py-1 text-stone-900 dark:text-neutral-100"
-      data-testid="agent-message-text">
+    <div className="w-full min-w-0 px-1 py-1 text-content" data-testid="agent-message-text">
       {table ? (
         <AgentMarkdownTable table={table} className="w-full max-w-full overflow-hidden" />
       ) : (
diff --git a/app/src/pages/conversations/components/AgentProcessSourcePanel.tsx b/app/src/pages/conversations/components/AgentProcessSourcePanel.tsx
index 475fd19bd..8c6b3cd00 100644
--- a/app/src/pages/conversations/components/AgentProcessSourcePanel.tsx
+++ b/app/src/pages/conversations/components/AgentProcessSourcePanel.tsx
@@ -41,13 +41,13 @@ function AgentSourceRow({ source }: { source: AgentSource }) {
         href={source.url}
         target="_blank"
         rel="noreferrer noopener"
-        className="flex items-center justify-between gap-3 rounded-md px-1.5 py-1 text-[11px] hover:bg-stone-50 dark:hover:bg-neutral-800/60"
+        className="flex items-center justify-between gap-3 rounded-md px-1.5 py-1 text-[11px] hover:bg-surface-hover"
         data-testid="agent-source-row">
         <span className="flex min-w-0 items-center gap-1.5">
-          <GlobeIcon className="shrink-0 text-stone-400 dark:text-neutral-500" />
-          <span className="truncate text-stone-700 dark:text-neutral-200">{source.title}</span>
+          <GlobeIcon className="shrink-0 text-content-faint" />
+          <span className="truncate text-content-secondary">{source.title}</span>
         </span>
-        <span className="shrink-0 truncate text-stone-400 dark:text-neutral-500">{source.url}</span>
+        <span className="shrink-0 truncate text-content-faint">{source.url}</span>
       </a>
     </li>
   );
@@ -118,13 +118,13 @@ export function AgentProcessSourcePanel({
         className="absolute inset-0 bg-stone-900/30 dark:bg-black/50"
         onClick={onClose}
       />
-      <aside className="relative flex h-full w-full max-w-[600px] flex-col bg-white shadow-xl dark:bg-neutral-900">
+      <aside className="relative flex h-full w-full max-w-[600px] flex-col bg-surface shadow-xl">
         {/* Header */}
-        <header className="flex items-center gap-2.5 border-b border-stone-200 px-4 py-3 dark:border-neutral-800">
+        <header className="flex items-center gap-2.5 border-b border-line px-4 py-3">
           <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-50 text-primary-500 dark:bg-primary-500/15">
             <AgentSparkIcon />
           </span>
-          <span className="min-w-0 flex-1 truncate font-semibold text-stone-800 dark:text-neutral-100">
+          <span className="min-w-0 flex-1 truncate font-semibold text-content">
             {scopedEntry
               ? formatTimelineEntry(scopedEntry).title
               : t('conversations.agentTaskInsights.processSourceTitle')}
@@ -143,7 +143,7 @@ export function AgentProcessSourcePanel({
         {/* Body — the full agent timeline, then the visited sources. */}
         <div className="flex-1 space-y-5 overflow-y-auto px-4 py-4">
           <section>
-            <h3 className="mb-2 text-[10px] font-semibold tracking-wide text-stone-400 uppercase dark:text-neutral-500">
+            <h3 className="mb-2 text-[10px] font-semibold tracking-wide text-content-faint uppercase">
               {t('conversations.agentTaskInsights.stepsHeading')}
             </h3>
             {scopedEntry ? (
@@ -151,11 +151,11 @@ export function AgentProcessSourcePanel({
               scopedEntry.subagent ? (
                 <SubagentActivityBlock subagent={scopedEntry.subagent} />
               ) : scopedDetail ? (
-                <pre className="max-h-[60vh] overflow-y-auto rounded-lg bg-stone-50 px-3 py-2 text-[12px] whitespace-pre-wrap break-words text-stone-600 dark:bg-neutral-800/60 dark:text-neutral-300">
+                <pre className="max-h-[60vh] overflow-y-auto rounded-lg bg-surface-muted px-3 py-2 text-[12px] whitespace-pre-wrap break-words text-content-secondary">
                   {scopedDetail}
                 </pre>
               ) : (
-                <p className="text-xs text-stone-400 italic dark:text-neutral-500">
+                <p className="text-xs text-content-faint italic">
                   {t('conversations.agentTaskInsights.noSteps')}
                 </p>
               )
@@ -167,7 +167,7 @@ export function AgentProcessSourcePanel({
               // which already nests each sub-agent's full activity inline.
               <ToolTimelineBlock entries={entries} expandAllRows />
             ) : (
-              <p className="text-xs text-stone-400 italic dark:text-neutral-500">
+              <p className="text-xs text-content-faint italic">
                 {t('conversations.agentTaskInsights.noSteps')}
               </p>
             )}
@@ -179,13 +179,13 @@ export function AgentProcessSourcePanel({
               fallback above already expands it. */}
           {!scopedEntry && transcript.length > 0 && subagentEntries.length > 0 ? (
             <section>
-              <h3 className="mb-2 text-[10px] font-semibold tracking-wide text-stone-400 uppercase dark:text-neutral-500">
+              <h3 className="mb-2 text-[10px] font-semibold tracking-wide text-content-faint uppercase">
                 {t('conversations.agentTaskInsights.subagentsHeading')}
               </h3>
               <div className="space-y-3">
                 {subagentEntries.map(entry => (
                   <div key={entry.id} data-testid="agent-source-subagent">
-                    <p className="text-[12px] font-medium text-stone-700 dark:text-neutral-200">
+                    <p className="text-[12px] font-medium text-content-secondary">
                       {formatTimelineEntry(entry).title}
                     </p>
                     <SubagentActivityBlock subagent={entry.subagent!} />
@@ -197,7 +197,7 @@ export function AgentProcessSourcePanel({
 
           {sources.length > 0 ? (
             <section>
-              <h3 className="mb-2 text-[10px] font-semibold tracking-wide text-stone-400 uppercase dark:text-neutral-500">
+              <h3 className="mb-2 text-[10px] font-semibold tracking-wide text-content-faint uppercase">
                 {t('conversations.agentTaskInsights.sourcesHeading')}
               </h3>
               <ul className="space-y-0.5">
diff --git a/app/src/pages/conversations/components/AgentTimelineRail.tsx b/app/src/pages/conversations/components/AgentTimelineRail.tsx
index 389fb7f3a..282f2f98e 100644
--- a/app/src/pages/conversations/components/AgentTimelineRail.tsx
+++ b/app/src/pages/conversations/components/AgentTimelineRail.tsx
@@ -38,17 +38,17 @@ export function agentNameTone(status: ToolTimelineEntryStatus | undefined): stri
   switch (status) {
     case 'success':
       // Done — full-strength foreground ("full white" in the dark mockup).
-      return 'text-stone-700 dark:text-neutral-100';
+      return 'text-content-secondary dark:text-content';
     case 'error':
       return 'text-coral-600 dark:text-coral-300';
     case 'awaiting_user':
       return 'animate-pulse text-amber-600 dark:text-amber-300';
     case 'cancelled':
       // Cancelled — terminal, so muted but NOT pulsing (it isn't in progress).
-      return 'text-stone-400 dark:text-neutral-500';
+      return 'text-content-faint';
     default:
       // running / unknown — in progress: muted + blinking.
-      return 'animate-pulse text-stone-400 dark:text-neutral-500';
+      return 'animate-pulse text-content-faint';
   }
 }
 
@@ -85,19 +85,17 @@ export function AgentTimelineRail({
         {!isFirst ? (
           <span
             aria-hidden
-            className="absolute top-0 left-1/2 h-[9px] w-px -translate-x-1/2 bg-stone-200 dark:bg-neutral-800"
+            className="absolute top-0 left-1/2 h-[9px] w-px -translate-x-1/2 bg-surface-strong"
           />
         ) : null}
         {!isLast ? (
           <span
             aria-hidden
-            className="absolute top-[9px] bottom-0 left-1/2 w-px -translate-x-1/2 bg-stone-200 dark:bg-neutral-800"
+            className="absolute top-[9px] bottom-0 left-1/2 w-px -translate-x-1/2 bg-surface-strong"
           />
         ) : null}
-        <span className="relative z-10 mt-0.5 flex h-3 w-3 items-center justify-center bg-[#f6f6f6] dark:bg-neutral-950">
-          {icon ?? (
-            <AgentSparkIcon className={iconClassName ?? 'text-stone-400 dark:text-neutral-500'} />
-          )}
+        <span className="relative z-10 mt-0.5 flex h-3 w-3 items-center justify-center bg-[#f6f6f6] dark:bg-surface-canvas">
+          {icon ?? <AgentSparkIcon className={iconClassName ?? 'text-content-faint'} />}
         </span>
       </div>
       <div className="min-w-0 flex-1 pb-2">{children}</div>
diff --git a/app/src/pages/conversations/components/BackgroundActivityRows.tsx b/app/src/pages/conversations/components/BackgroundActivityRows.tsx
index 4f150f606..8e2c02581 100644
--- a/app/src/pages/conversations/components/BackgroundActivityRows.tsx
+++ b/app/src/pages/conversations/components/BackgroundActivityRows.tsx
@@ -8,12 +8,10 @@ import { formatRelativeTime, formatResetTime } from '../utils/format';
 export function SectionHeader({ title, hint }: { title: string; hint?: string }) {
   return (
     <div className="flex items-center justify-between px-2.5 pb-1 pt-3">
-      <span className="text-[11px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+      <span className="text-[11px] font-semibold uppercase tracking-wide text-content-faint">
         {title}
       </span>
-      {hint ? (
-        <span className="text-[11px] text-stone-400 dark:text-neutral-500">{hint}</span>
-      ) : null}
+      {hint ? <span className="text-[11px] text-content-faint">{hint}</span> : null}
     </div>
   );
 }
@@ -62,7 +60,7 @@ export function CronJobRow({ job }: { job: CoreCronJob }) {
       ? 'bg-red-500'
       : job.last_status === 'ok'
         ? 'bg-sage-500'
-        : 'bg-stone-300 dark:bg-neutral-600';
+        : 'bg-surface-strong';
 
   const lastLabel = job.last_run
     ? t('conversations.backgroundTasks.cronLast').replace(
@@ -80,11 +78,9 @@ export function CronJobRow({ job }: { job: CoreCronJob }) {
       <Dot className={lastDot} />
       <div className="min-w-0 flex-1">
         <div className="flex items-center justify-between gap-2">
-          <span className="truncate text-sm font-medium text-stone-800 dark:text-neutral-100">
-            {name}
-          </span>
+          <span className="truncate text-sm font-medium text-content">{name}</span>
           {job.enabled ? (
-            <span className="shrink-0 text-[11px] text-stone-400 dark:text-neutral-500">
+            <span className="shrink-0 text-[11px] text-content-faint">
               {job.next_run
                 ? t('conversations.backgroundTasks.cronNext').replace(
                     '{time}',
@@ -93,17 +89,15 @@ export function CronJobRow({ job }: { job: CoreCronJob }) {
                 : ''}
             </span>
           ) : (
-            <span className="shrink-0 text-[11px] font-medium text-stone-500 dark:text-neutral-400">
+            <span className="shrink-0 text-[11px] font-medium text-content-muted">
               {t('conversations.backgroundTasks.cronPaused')}
             </span>
           )}
         </div>
-        <span className="mt-0.5 block truncate text-[12px] text-stone-500 dark:text-neutral-400">
+        <span className="mt-0.5 block truncate text-[12px] text-content-muted">
           {scheduleLabel(job.schedule, t)}
         </span>
-        <span className="mt-0.5 block text-[11px] text-stone-400 dark:text-neutral-500">
-          {lastLabel}
-        </span>
+        <span className="mt-0.5 block text-[11px] text-content-faint">{lastLabel}</span>
       </div>
     </div>
   );
@@ -118,9 +112,9 @@ export function SubconsciousRow({ summary }: { summary: SubconsciousSummary }) {
   let pill: string;
   let pillClass: string;
   if (off) {
-    dot = 'bg-stone-300 dark:bg-neutral-600';
+    dot = 'bg-surface-strong';
     pill = t('conversations.backgroundTasks.subOff');
-    pillClass = 'text-stone-400 dark:text-neutral-500';
+    pillClass = 'text-content-faint';
   } else if (summary.working) {
     dot = 'bg-amber-500 animate-pulse';
     pill = t('conversations.backgroundTasks.subWorking');
@@ -155,14 +149,12 @@ export function SubconsciousRow({ summary }: { summary: SubconsciousSummary }) {
       <Dot className={dot} />
       <div className="min-w-0 flex-1">
         <div className="flex items-center justify-between gap-2">
-          <span className="truncate text-sm font-medium text-stone-800 dark:text-neutral-100">
+          <span className="truncate text-sm font-medium text-content">
             {t('conversations.backgroundTasks.sectionSubconscious')}
           </span>
           <span className={`shrink-0 text-[11px] font-medium ${pillClass}`}>{pill}</span>
         </div>
-        <span className="mt-0.5 block text-[11px] text-stone-400 dark:text-neutral-500">
-          {meta.join(' · ')}
-        </span>
+        <span className="mt-0.5 block text-[11px] text-content-faint">{meta.join(' · ')}</span>
       </div>
     </div>
   );
@@ -194,9 +186,9 @@ function providerFreshnessLabel(
     };
   }
   return {
-    dot: 'bg-stone-300 dark:bg-neutral-600',
+    dot: 'bg-surface-strong',
     label: t('conversations.backgroundTasks.memProviderIdle'),
-    pillClass: 'text-stone-400 dark:text-neutral-500',
+    pillClass: 'text-content-faint',
   };
 }
 
@@ -207,7 +199,7 @@ export function MemorySection({ memory }: { memory: MemorySyncSummary }) {
 
   if (!hasActivity) {
     return (
-      <div className="px-2.5 py-2 text-[12px] text-stone-400 dark:text-neutral-500">
+      <div className="px-2.5 py-2 text-[12px] text-content-faint">
         {t('conversations.backgroundTasks.memUpToDate')}
       </div>
     );
@@ -221,7 +213,7 @@ export function MemorySection({ memory }: { memory: MemorySyncSummary }) {
           className="mb-1 flex items-start gap-2.5 rounded-lg px-2.5 py-2">
           <Dot className="bg-amber-500 animate-pulse" />
           <div className="min-w-0 flex-1">
-            <span className="block truncate text-sm font-medium text-stone-800 dark:text-neutral-100">
+            <span className="block truncate text-sm font-medium text-content">
               {memory.currentTitle
                 ? t('conversations.backgroundTasks.memIngesting').replace(
                     '{title}',
@@ -230,7 +222,7 @@ export function MemorySection({ memory }: { memory: MemorySyncSummary }) {
                 : t('conversations.backgroundTasks.memIngestingUntitled')}
             </span>
             {memory.queueDepth > 0 ? (
-              <span className="mt-0.5 block text-[11px] text-stone-400 dark:text-neutral-500">
+              <span className="mt-0.5 block text-[11px] text-content-faint">
                 {t('conversations.backgroundTasks.memQueued').replace(
                   '{count}',
                   String(memory.queueDepth)
@@ -258,15 +250,13 @@ export function MemorySection({ memory }: { memory: MemorySyncSummary }) {
             <Dot className={f.dot} />
             <div className="min-w-0 flex-1">
               <div className="flex items-center justify-between gap-2">
-                <span className="truncate text-sm font-medium capitalize text-stone-800 dark:text-neutral-100">
+                <span className="truncate text-sm font-medium capitalize text-content">
                   {row.provider}
                 </span>
                 <span className={`shrink-0 text-[11px] font-medium ${f.pillClass}`}>{f.label}</span>
               </div>
               {backlog ? (
-                <span className="mt-0.5 block text-[11px] text-stone-400 dark:text-neutral-500">
-                  {backlog}
-                </span>
+                <span className="mt-0.5 block text-[11px] text-content-faint">{backlog}</span>
               ) : null}
             </div>
           </div>
diff --git a/app/src/pages/conversations/components/BackgroundProcessesPanel.tsx b/app/src/pages/conversations/components/BackgroundProcessesPanel.tsx
index e870c72ca..7f9a84bea 100644
--- a/app/src/pages/conversations/components/BackgroundProcessesPanel.tsx
+++ b/app/src/pages/conversations/components/BackgroundProcessesPanel.tsx
@@ -97,7 +97,7 @@ function statusStyle(status: ToolTimelineEntryStatus): {
       return {
         dot: 'bg-stone-400 dark:bg-neutral-500',
         labelKey: 'conversations.backgroundTasks.statusCancelled',
-        pill: 'text-stone-600 dark:text-neutral-300',
+        pill: 'text-content-secondary',
       };
     default:
       return {
@@ -154,13 +154,13 @@ export function BackgroundProcessesPanel({
   return (
     <div className="fixed inset-0 z-50 flex justify-end" data-testid="background-processes-panel">
       <div className="absolute inset-0 bg-stone-900/30 dark:bg-black/50" onClick={onClose} />
-      <aside className="relative flex h-full w-full max-w-sm flex-col bg-white dark:bg-neutral-900 shadow-xl">
-        <header className="flex items-center justify-between border-b border-stone-100 px-4 py-3 dark:border-neutral-800">
+      <aside className="relative flex h-full w-full max-w-sm flex-col bg-surface shadow-xl">
+        <header className="flex items-center justify-between border-b border-line-subtle px-4 py-3">
           <div className="flex flex-col">
-            <h2 className="text-sm font-semibold text-stone-800 dark:text-neutral-100">
+            <h2 className="text-sm font-semibold text-content">
               {t('conversations.backgroundTasks.title')}
             </h2>
-            <span className="text-[11px] text-stone-400 dark:text-neutral-500">
+            <span className="text-[11px] text-content-faint">
               {runningLabel} · {totalLabel}
             </span>
           </div>
@@ -185,7 +185,7 @@ export function BackgroundProcessesPanel({
           {/* Section 1 — detached sub-agents spawned in this chat. */}
           <SectionHeader title={t('conversations.backgroundTasks.sectionThisChat')} />
           {processes.length === 0 ? (
-            <div className="px-2.5 py-2 text-[12px] text-stone-400 dark:text-neutral-500">
+            <div className="px-2.5 py-2 text-[12px] text-content-faint">
               {t('conversations.backgroundTasks.empty')}
             </div>
           ) : (
@@ -202,23 +202,21 @@ export function BackgroundProcessesPanel({
                   type="button"
                   data-testid="background-process-row"
                   onClick={() => onOpenProcess(p.taskId)}
-                  className="mb-1 flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left hover:bg-stone-100 dark:hover:bg-neutral-800">
+                  className="mb-1 flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left hover:bg-surface-hover">
                   <span className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${s.dot}`} />
                   <span className="min-w-0 flex-1">
                     <span className="flex items-center justify-between gap-2">
-                      <span className="truncate text-sm font-medium text-stone-800 dark:text-neutral-100">
-                        {p.name}
-                      </span>
+                      <span className="truncate text-sm font-medium text-content">{p.name}</span>
                       <span className={`shrink-0 text-[11px] font-medium ${s.pill}`}>
                         {t(s.labelKey)}
                       </span>
                     </span>
                     {p.goal ? (
-                      <span className="mt-0.5 line-clamp-2 block text-[12px] text-stone-500 dark:text-neutral-400">
+                      <span className="mt-0.5 line-clamp-2 block text-[12px] text-content-muted">
                         {p.goal}
                       </span>
                     ) : null}
-                    <span className="mt-0.5 block text-[11px] text-stone-400 dark:text-neutral-500">
+                    <span className="mt-0.5 block text-[11px] text-content-faint">
                       {toolCallLabel}
                       {typeof p.iterations === 'number'
                         ? ` · ${t('conversations.backgroundTasks.steps').replace('{count}', String(p.iterations))}`
@@ -234,7 +232,7 @@ export function BackgroundProcessesPanel({
           {/* Section 2 — scheduled (cron) jobs, global, view-only. */}
           <SectionHeader title={t('conversations.backgroundTasks.sectionScheduled')} />
           {activity.cronJobs.length === 0 ? (
-            <div className="px-2.5 py-2 text-[12px] text-stone-400 dark:text-neutral-500">
+            <div className="px-2.5 py-2 text-[12px] text-content-faint">
               {t('conversations.backgroundTasks.cronEmpty')}
             </div>
           ) : (
diff --git a/app/src/pages/conversations/components/CitationChips.tsx b/app/src/pages/conversations/components/CitationChips.tsx
index a69045fbb..b2b1f511b 100644
--- a/app/src/pages/conversations/components/CitationChips.tsx
+++ b/app/src/pages/conversations/components/CitationChips.tsx
@@ -23,13 +23,13 @@ export function CitationChips({ citations }: { citations: MessageCitation[] }) {
         return (
           <details key={citation.id} className="group">
             <summary
-              className="list-none cursor-pointer rounded-full border border-stone-300 dark:border-neutral-700 bg-stone-100 dark:bg-neutral-800 px-2 py-0.5 text-[10px] text-stone-600 dark:text-neutral-300 hover:bg-stone-200 dark:hover:bg-neutral-700"
+              className="list-none cursor-pointer rounded-full border border-line-strong bg-surface-subtle px-2 py-0.5 text-[10px] text-content-secondary hover:bg-surface-strong dark:hover:bg-neutral-700"
               aria-label={title}
               title={title}>
               {citation.namespace ?? citation.key}
               {scoreLabel}
             </summary>
-            <div className="mt-1 max-w-md rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1 text-[11px] text-stone-600 dark:text-neutral-300 shadow-sm">
+            <div className="mt-1 max-w-md rounded-md border border-line bg-surface px-2 py-1 text-[11px] text-content-secondary shadow-sm">
               {citation.snippet}
             </div>
           </details>
diff --git a/app/src/pages/conversations/components/LimitPill.tsx b/app/src/pages/conversations/components/LimitPill.tsx
index 3c06ebdcd..30054110f 100644
--- a/app/src/pages/conversations/components/LimitPill.tsx
+++ b/app/src/pages/conversations/components/LimitPill.tsx
@@ -3,16 +3,14 @@ export function LimitPill({ label, usedPct }: { label: string; usedPct: number }
     usedPct >= 1 ? 'bg-coral-500' : usedPct >= 0.8 ? 'bg-amber-500' : 'bg-primary-500';
   return (
     <div className="flex items-center gap-1">
-      <span className="text-[9px] text-stone-400 dark:text-neutral-500 font-medium uppercase">
-        {label}
-      </span>
-      <div className="w-8 h-1.5 rounded-full bg-stone-200 dark:bg-neutral-800 overflow-hidden">
+      <span className="text-[9px] text-content-faint font-medium uppercase">{label}</span>
+      <div className="w-8 h-1.5 rounded-full bg-surface-strong overflow-hidden">
         <div
           className={`h-full rounded-full transition-all duration-300 ${barColor}`}
           style={{ width: `${Math.min(100, usedPct * 100)}%` }}
         />
       </div>
-      <span className="text-[9px] text-stone-500 dark:text-neutral-400 tabular-nums">
+      <span className="text-[9px] text-content-muted tabular-nums">
         {Math.round(usedPct * 100)}%
       </span>
     </div>
diff --git a/app/src/pages/conversations/components/PlanReviewCard.tsx b/app/src/pages/conversations/components/PlanReviewCard.tsx
index 6df310a52..8013ef27d 100644
--- a/app/src/pages/conversations/components/PlanReviewCard.tsx
+++ b/app/src/pages/conversations/components/PlanReviewCard.tsx
@@ -84,7 +84,7 @@ export const PlanReviewCard: React.FC<Props> = ({ threadId, review }) => {
           </p>
 
           {review.steps.length > 0 && (
-            <ol className="mt-2 max-h-56 list-decimal overflow-y-auto pl-6 text-stone-700 dark:text-neutral-200">
+            <ol className="mt-2 max-h-56 list-decimal overflow-y-auto pl-6 text-content-secondary">
               {review.steps.map((step, i) => (
                 <li key={i} className="break-words">
                   {step}
@@ -138,7 +138,7 @@ export const PlanReviewCard: React.FC<Props> = ({ threadId, review }) => {
               rows={2}
               disabled={deciding !== null}
               placeholder={t('conversations.planReview.feedbackPlaceholder')}
-              className="w-full resize-y rounded-lg border border-ocean-200 bg-white px-2.5 py-1.5 text-sm text-ink shadow-inner outline-none focus:border-ocean-400 disabled:opacity-50 dark:border-ocean-800 dark:bg-neutral-950 dark:text-neutral-100"
+              className="w-full resize-y rounded-lg border border-ocean-200 bg-surface px-2.5 py-1.5 text-sm text-ink shadow-inner outline-none focus:border-ocean-400 disabled:opacity-50 dark:border-ocean-800 dark:bg-surface-canvas dark:text-content"
             />
             <div className="mt-1.5 flex justify-end">
               <Button
diff --git a/app/src/pages/conversations/components/ProcessingTranscriptView.tsx b/app/src/pages/conversations/components/ProcessingTranscriptView.tsx
index 088ecb44d..5180c8303 100644
--- a/app/src/pages/conversations/components/ProcessingTranscriptView.tsx
+++ b/app/src/pages/conversations/components/ProcessingTranscriptView.tsx
@@ -41,7 +41,7 @@ export function ProcessingTranscriptView({
             <p
               key={block.key}
               data-testid="processing-narration"
-              className="text-[13px] leading-relaxed break-words whitespace-pre-wrap text-stone-700 dark:text-neutral-200">
+              className="text-[13px] leading-relaxed break-words whitespace-pre-wrap text-content-secondary">
               {block.text}
             </p>
           );
@@ -63,19 +63,19 @@ function ThinkingBlock({ text }: { text: string }) {
   return (
     <details
       data-testid="processing-thinking"
-      className="group/think rounded-lg bg-stone-50 px-3 py-2 dark:bg-neutral-800/60">
+      className="group/think rounded-lg bg-surface-muted px-3 py-2">
       <summary className="flex cursor-pointer list-none items-center gap-1.5 select-none marker:hidden">
         <span aria-hidden className="text-[10px] leading-none">
           💭
         </span>
-        <span className="text-[11px] font-semibold tracking-wide text-stone-500 uppercase dark:text-neutral-400">
+        <span className="text-[11px] font-semibold tracking-wide text-content-muted uppercase">
           {t('conversations.subagent.thinking')}
         </span>
-        <span className="text-[9px] text-stone-300 transition-transform group-open/think:rotate-90 dark:text-neutral-600">
+        <span className="text-[9px] text-content-faint transition-transform group-open/think:rotate-90 dark:text-neutral-600">
           ▶
         </span>
       </summary>
-      <p className="mt-1 text-[12px] leading-relaxed break-words whitespace-pre-wrap text-stone-600 dark:text-neutral-300">
+      <p className="mt-1 text-[12px] leading-relaxed break-words whitespace-pre-wrap text-content-secondary">
         {clean}
       </p>
     </details>
@@ -90,21 +90,19 @@ function ToolGroupBlock({ summary, entries }: { summary: string; entries: ToolTi
   return (
     <details open className="group/group" data-testid="processing-tool-group">
       <summary className="flex cursor-pointer list-none items-center gap-1.5 select-none marker:hidden">
-        <span className="text-[12px] font-medium text-stone-600 dark:text-neutral-300">
-          {summary}
-        </span>
-        <span className="text-[9px] text-stone-300 transition-transform group-open/group:rotate-90 dark:text-neutral-600">
+        <span className="text-[12px] font-medium text-content-secondary">{summary}</span>
+        <span className="text-[9px] text-content-faint transition-transform group-open/group:rotate-90 dark:text-neutral-600">
           ▶
         </span>
       </summary>
-      <ul className="mt-1 ml-1 space-y-1 border-l border-stone-200 pl-3 dark:border-neutral-700">
+      <ul className="mt-1 ml-1 space-y-1 border-l border-line pl-3">
         {entries.map(entry => (
           <ToolRow key={entry.id} entry={entry} />
         ))}
         {allSettled ? (
           <li className="flex items-center gap-1.5 pt-0.5">
             <StatusGlyph status={anyError ? 'error' : 'success'} />
-            <span className="text-[11px] text-stone-400 dark:text-neutral-500">
+            <span className="text-[11px] text-content-faint">
               {t('conversations.agentTaskInsights.done')}
             </span>
           </li>
@@ -119,13 +117,13 @@ function ToolRow({ entry }: { entry: ToolTimelineEntry }) {
   const { title, detail } = formatTimelineEntry(entry);
   return (
     <li className="flex items-start gap-1.5" data-testid="processing-tool-row">
-      <span className="mt-0.5 shrink-0 text-stone-400 dark:text-neutral-500">
+      <span className="mt-0.5 shrink-0 text-content-faint">
         <CategoryIcon category={categorizeTool(entry.name)} />
       </span>
-      <span className="min-w-0 text-[12px] text-stone-700 dark:text-neutral-200">
+      <span className="min-w-0 text-[12px] text-content-secondary">
         {title}
         {detail ? (
-          <span className="ml-1 rounded bg-stone-100 px-1 py-px font-mono text-[10px] text-stone-500 dark:bg-neutral-800 dark:text-neutral-400">
+          <span className="ml-1 rounded bg-surface-subtle px-1 py-px font-mono text-[10px] text-content-muted">
             {detail}
           </span>
         ) : null}
diff --git a/app/src/pages/conversations/components/SubagentDrawer.tsx b/app/src/pages/conversations/components/SubagentDrawer.tsx
index f5364b3a4..698311e7e 100644
--- a/app/src/pages/conversations/components/SubagentDrawer.tsx
+++ b/app/src/pages/conversations/components/SubagentDrawer.tsx
@@ -76,7 +76,7 @@ function statusTone(status: ToolTimelineEntryStatus | undefined): {
   if (status === 'cancelled') {
     return {
       dot: 'bg-stone-400 dark:bg-neutral-500',
-      pill: 'bg-stone-100 dark:bg-neutral-700/40 text-stone-600 dark:text-neutral-300',
+      pill: 'bg-surface-subtle dark:bg-neutral-700/40 text-content-secondary',
       label: 'statusCancelled',
     };
   }
@@ -233,20 +233,18 @@ export function SubagentDrawer({
         className="absolute inset-0 bg-stone-900/30 dark:bg-black/50"
         onClick={onClose}
       />
-      <aside className="relative flex h-full w-full max-w-md flex-col bg-white dark:bg-neutral-900 shadow-xl">
+      <aside className="relative flex h-full w-full max-w-md flex-col bg-surface shadow-xl">
         {/* Header */}
-        <header className="flex items-center gap-2.5 border-b border-stone-200 dark:border-neutral-800 px-4 py-3">
+        <header className="flex items-center gap-2.5 border-b border-line px-4 py-3">
           <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-50 dark:bg-primary-500/15 text-base">
             🤖
           </span>
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2">
-              <span className="truncate font-semibold text-stone-800 dark:text-neutral-100">
-                {subagent.agentId}
-              </span>
+              <span className="truncate font-semibold text-content">{subagent.agentId}</span>
               <span className={`h-2 w-2 shrink-0 rounded-full ${tone.dot}`} />
             </div>
-            <div className="flex flex-wrap items-center gap-1.5 text-[11px] text-stone-500 dark:text-neutral-400">
+            <div className="flex flex-wrap items-center gap-1.5 text-[11px] text-content-muted">
               <span className={`rounded-full px-1.5 py-0.5 ${tone.pill}`}>
                 {t(`conversations.subagent.${tone.label}`)}
               </span>
@@ -306,7 +304,7 @@ export function SubagentDrawer({
           {/* Parent → sub-agent: the delegation prompt (the "input"). */}
           {promptText ? (
             <div className="flex justify-end" data-testid="subagent-parent-prompt">
-              <div className="max-w-[85%] rounded-2xl rounded-br-md bg-primary-500 px-3 py-2 text-sm text-white">
+              <div className="max-w-[85%] rounded-2xl rounded-br-md bg-primary-500 px-3 py-2 text-sm text-content-inverted">
                 <div className="mb-0.5 text-[10px] font-semibold uppercase tracking-wide text-white/70">
                   {t('conversations.subagent.parent')}
                 </div>
@@ -316,13 +314,13 @@ export function SubagentDrawer({
           ) : null}
 
           {/* Sub-agent side: avatar label + its turns. */}
-          <div className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+          <div className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wide text-content-faint">
             <span>🤖</span>
             {subagent.agentId}
           </div>
 
           {transcript.length === 0 ? (
-            <p className="text-xs italic text-stone-400 dark:text-neutral-500">
+            <p className="text-xs italic text-content-faint">
               {isRunning
                 ? t('conversations.subagent.working')
                 : t('conversations.subagent.noOutputYet')}
@@ -336,11 +334,11 @@ export function SubagentDrawer({
                 const turnDivider = showTurn ? (
                   <li
                     aria-hidden
-                    className="flex items-center gap-2 pt-1 text-[10px] font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500"
+                    className="flex items-center gap-2 pt-1 text-[10px] font-medium uppercase tracking-wide text-content-faint"
                     data-testid="subagent-turn-divider">
-                    <span className="h-px flex-1 bg-stone-200 dark:bg-neutral-800" />
+                    <span className="h-px flex-1 bg-surface-strong" />
                     {t('conversations.toolTimeline.turn')} {item.iteration}
-                    <span className="h-px flex-1 bg-stone-200 dark:bg-neutral-800" />
+                    <span className="h-px flex-1 bg-surface-strong" />
                   </li>
                 ) : null;
 
@@ -348,13 +346,13 @@ export function SubagentDrawer({
                   return (
                     <ItemWrapper key={`th-${idx}`} divider={turnDivider}>
                       <div
-                        className="rounded-lg bg-stone-50 dark:bg-neutral-800/60 px-3 py-2"
+                        className="rounded-lg bg-surface-muted px-3 py-2"
                         data-testid="subagent-transcript-thinking">
-                        <div className="mb-1 flex items-center gap-1.5 text-[11px] font-semibold text-stone-500 dark:text-neutral-400">
+                        <div className="mb-1 flex items-center gap-1.5 text-[11px] font-semibold text-content-muted">
                           <span className="inline-block h-1.5 w-1.5 rounded-full bg-primary-400" />
                           {t('conversations.subagent.thinking')}
                         </div>
-                        <pre className="whitespace-pre-wrap break-words font-sans text-[12px] leading-relaxed text-stone-600 dark:text-neutral-300">
+                        <pre className="whitespace-pre-wrap break-words font-sans text-[12px] leading-relaxed text-content-secondary">
                           {stripToolCallEnvelopes(item.text).trim()}
                         </pre>
                       </div>
@@ -435,7 +433,7 @@ function ToolCallRow({ item }: { item: SubagentToolItem }) {
       : item.status === 'success'
         ? 'text-sage-700 dark:text-sage-300'
         : item.status === 'cancelled'
-          ? 'text-stone-600 dark:text-neutral-300'
+          ? 'text-content-secondary'
           : item.status === 'awaiting_user'
             ? 'text-amber-700 dark:text-amber-300'
             : 'text-coral-700 dark:text-coral-300';
@@ -455,14 +453,13 @@ function ToolCallRow({ item }: { item: SubagentToolItem }) {
   const expandable = argsText != null || hasOutput;
 
   const detailPre =
-    'max-h-60 overflow-auto whitespace-pre-wrap break-words rounded bg-white px-2 py-1.5 ' +
-    'font-mono text-[11px] leading-relaxed text-stone-600 dark:bg-neutral-900 dark:text-neutral-300';
-  const detailLabel =
-    'mb-1 text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500';
+    'max-h-60 overflow-auto whitespace-pre-wrap break-words rounded bg-surface px-2 py-1.5 ' +
+    'font-mono text-[11px] leading-relaxed text-content-secondary dark:bg-surface';
+  const detailLabel = 'mb-1 text-[10px] font-semibold uppercase tracking-wide text-content-faint';
 
   return (
     <div
-      className="rounded-md border border-stone-200 bg-stone-50 text-xs dark:border-neutral-800 dark:bg-neutral-800/60"
+      className="rounded-md border border-line bg-surface-muted text-xs"
       data-testid="subagent-drawer-tool-call">
       <button
         type="button"
@@ -472,23 +469,19 @@ function ToolCallRow({ item }: { item: SubagentToolItem }) {
         data-testid="subagent-tool-call-toggle"
         className="flex w-full items-center gap-2 px-2.5 py-1.5 text-left disabled:cursor-default">
         {expandable ? (
-          <span className="shrink-0 text-[9px] text-stone-400 dark:text-neutral-500">
-            {expanded ? '▾' : '▸'}
-          </span>
+          <span className="shrink-0 text-[9px] text-content-faint">{expanded ? '▾' : '▸'}</span>
         ) : (
           <span className="w-[9px] shrink-0" aria-hidden />
         )}
         <span className={callTone}>🔧</span>
-        <span className="font-mono text-stone-700 dark:text-neutral-200">{item.toolName}</span>
+        <span className="font-mono text-content-secondary">{item.toolName}</span>
         <span className={`ml-auto ${callTone}`}>{statusLabel}</span>
         {item.elapsedMs != null && item.status !== 'running' ? (
-          <span className="text-[10px] text-stone-400 dark:text-neutral-500">
-            {formatElapsed(item.elapsedMs)}
-          </span>
+          <span className="text-[10px] text-content-faint">{formatElapsed(item.elapsedMs)}</span>
         ) : null}
       </button>
       {expandable && expanded ? (
-        <div className="space-y-2 border-t border-stone-200 px-2.5 py-2 dark:border-neutral-800">
+        <div className="space-y-2 border-t border-line px-2.5 py-2">
           {argsText != null ? (
             <div data-testid="subagent-tool-call-input">
               <div className={detailLabel}>{t('conversations.subagent.input')}</div>
diff --git a/app/src/pages/conversations/components/TaskKanbanBoard.tsx b/app/src/pages/conversations/components/TaskKanbanBoard.tsx
index 2d8871bb9..a90fcacd4 100644
--- a/app/src/pages/conversations/components/TaskKanbanBoard.tsx
+++ b/app/src/pages/conversations/components/TaskKanbanBoard.tsx
@@ -199,7 +199,7 @@ export function TaskKanbanBoard({
     <div className="py-3">
       {!hideHeader && (
         <div className="mb-2 flex items-center justify-between gap-3">
-          <h4 className="text-xs font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+          <h4 className="text-xs font-semibold uppercase tracking-wide text-content-muted">
             {t(headerTitleKey)}
           </h4>
           <div className="flex items-center gap-2">
@@ -208,14 +208,12 @@ export function TaskKanbanBoard({
                 type="button"
                 aria-expanded={sourceControlsOpen}
                 onClick={() => setSourceControlsOpen(open => !open)}
-                className="inline-flex items-center gap-1 rounded-md border border-stone-200 px-2 py-1 text-[10px] font-medium text-stone-600 hover:bg-stone-50 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
+                className="inline-flex items-center gap-1 rounded-md border border-line px-2 py-1 text-[10px] font-medium text-content-secondary hover:bg-surface-hover">
                 <LuDatabase className="h-3 w-3" />
                 {t('conversations.taskKanban.sourcesButton')}
               </button>
             )}
-            <span className="text-[10px] text-stone-400 dark:text-neutral-500">
-              {board.cards.length}
-            </span>
+            <span className="text-[10px] text-content-faint">{board.cards.length}</span>
           </div>
         </div>
       )}
@@ -231,19 +229,17 @@ export function TaskKanbanBoard({
           return (
             <section
               key={column.status}
-              className={`min-w-0 rounded-lg bg-stone-50 dark:bg-neutral-800/60 p-2 ${accentClass} ${
+              className={`min-w-0 rounded-lg bg-surface-muted p-2 ${accentClass} ${
                 isDragTarget ? 'ring-2 ring-ocean-400 bg-ocean-50/30 dark:bg-ocean-500/5' : ''
               }`}
               onDragOver={canMoveCards ? e => handleDragOver(e, column.status) : undefined}
               onDragLeave={canMoveCards ? handleDragLeave : undefined}
               onDrop={canMoveCards ? e => handleDrop(e, column.status) : undefined}>
               <div className="mb-2 flex items-center justify-between gap-2">
-                <h5 className="truncate text-[11px] font-medium text-stone-600 dark:text-neutral-300">
+                <h5 className="truncate text-[11px] font-medium text-content-secondary">
                   {t(column.labelKey)}
                 </h5>
-                <span className="text-[10px] text-stone-400 dark:text-neutral-500">
-                  {cards.length}
-                </span>
+                <span className="text-[10px] text-content-faint">{cards.length}</span>
               </div>
               {/* "Needs your input" banner at top of Blocked column */}
               {isBlockedColumn && cards.length > 0 && (
@@ -253,7 +249,7 @@ export function TaskKanbanBoard({
               )}
               <div className="space-y-2">
                 {cards.length === 0 ? (
-                  <p className="py-2 text-center text-[10px] text-stone-400 dark:text-neutral-600">
+                  <p className="py-2 text-center text-[10px] text-content-faint dark:text-neutral-600">
                     {t('conversations.taskKanban.emptyColumn')}
                   </p>
                 ) : (
@@ -330,11 +326,11 @@ function TaskBoardArticle({
     <article
       draggable={isDraggable}
       onDragStart={isDraggable ? handleDragStart : undefined}
-      className={`rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2.5 py-2 shadow-sm transition-opacity ${
+      className={`rounded-lg border border-line bg-surface px-2.5 py-2 shadow-sm transition-opacity ${
         mutating ? 'opacity-50' : 'opacity-100'
       } ${isDraggable ? 'cursor-grab active:cursor-grabbing' : ''}`}>
       <div className="flex items-start gap-2">
-        <p className="min-w-0 flex-1 break-words text-xs font-medium leading-snug text-stone-800 dark:text-neutral-100">
+        <p className="min-w-0 flex-1 break-words text-xs font-medium leading-snug text-content">
           {card.title}
         </p>
         {card.sessionThreadId && onViewSession ? (
@@ -361,7 +357,7 @@ function TaskBoardArticle({
               title={t('chat.approval.deny')}
               disabled={disabled}
               onClick={() => onDecidePlan(card, false)}
-              className="rounded-md border border-stone-200 px-1.5 py-0.5 text-[10px] font-medium text-stone-600 transition-colors hover:bg-stone-100 disabled:opacity-40 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800">
+              className="rounded-md border border-line px-1.5 py-0.5 text-[10px] font-medium text-content-secondary transition-colors hover:bg-surface-hover disabled:opacity-40">
               {t('chat.approval.deny')}
             </button>
           </div>
@@ -385,7 +381,7 @@ function TaskBoardArticle({
               aria-label={t('conversations.taskKanban.moveLeft')}
               disabled={disabled || columnStatus === 'todo'}
               onClick={() => onMove(card, -1)}
-              className="flex h-7 w-7 items-center justify-center rounded-md text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 disabled:opacity-25">
+              className="flex h-7 w-7 items-center justify-center rounded-md text-content-faint transition-colors hover:bg-surface-hover dark:bg-surface-muted hover:text-content-secondary dark:text-neutral-200 disabled:opacity-25">
               <LuArrowLeft className="h-4 w-4" />
             </button>
             <button
@@ -394,7 +390,7 @@ function TaskBoardArticle({
               aria-label={t('conversations.taskKanban.moveRight')}
               disabled={disabled || columnStatus === 'done'}
               onClick={() => onMove(card, 1)}
-              className="flex h-7 w-7 items-center justify-center rounded-md text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 disabled:opacity-25">
+              className="flex h-7 w-7 items-center justify-center rounded-md text-content-faint transition-colors hover:bg-surface-hover dark:bg-surface-muted hover:text-content-secondary dark:text-neutral-200 disabled:opacity-25">
               <LuArrowRight className="h-4 w-4" />
             </button>
           </div>
@@ -408,7 +404,7 @@ function TaskBoardArticle({
           </span>
         )}
         {card.allowedTools && card.allowedTools.length > 0 && (
-          <span className="inline-flex items-center gap-1 rounded-md bg-stone-100 px-1.5 py-0.5 text-[10px] text-stone-600 dark:bg-neutral-800 dark:text-neutral-300">
+          <span className="inline-flex items-center gap-1 rounded-md bg-surface-subtle px-1.5 py-0.5 text-[10px] text-content-secondary">
             <LuWrench className="h-3 w-3" />
             {card.allowedTools.length}
           </span>
@@ -425,7 +421,7 @@ function TaskBoardArticle({
             target="_blank"
             rel="noreferrer"
             title={t('conversations.taskKanban.source.openExternal')}
-            className="inline-flex items-center gap-1 rounded-md bg-stone-100 px-1.5 py-0.5 text-[10px] text-stone-600 hover:bg-stone-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700">
+            className="inline-flex items-center gap-1 rounded-md bg-surface-subtle px-1.5 py-0.5 text-[10px] text-content-secondary hover:bg-surface-strong dark:hover:bg-neutral-700">
             <LuExternalLink className="h-3 w-3" />
             {t('conversations.taskKanban.source.openExternalShort')}
           </a>
@@ -466,14 +462,12 @@ function TaskBoardArticle({
         )}
       </div>
       {card.objective && (
-        <p className="mt-1 break-words text-[11px] leading-snug text-stone-500 dark:text-neutral-400">
+        <p className="mt-1 break-words text-[11px] leading-snug text-content-muted">
           {card.objective}
         </p>
       )}
       {card.notes && (
-        <p className="mt-1 break-words text-[11px] leading-snug text-stone-500 dark:text-neutral-400">
-          {card.notes}
-        </p>
+        <p className="mt-1 break-words text-[11px] leading-snug text-content-muted">{card.notes}</p>
       )}
       {/* Blocker text: always shown for blocked cards (column or status) */}
       {card.blocker && (card.status === 'blocked' || columnStatus === 'blocked') && (
@@ -690,14 +684,14 @@ function TaskSourceControls({ disabled, compact }: { disabled: boolean; compact:
   };
 
   return (
-    <section className="mb-3 rounded-lg border border-stone-200 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-900">
+    <section className="mb-3 rounded-lg border border-line bg-surface p-3">
       <div className="flex flex-wrap items-center justify-between gap-2">
         <div className="min-w-0">
-          <h5 className="text-xs font-semibold text-stone-800 dark:text-neutral-100">
+          <h5 className="text-xs font-semibold text-content">
             {t('conversations.taskKanban.sources.title')}
           </h5>
           {!compact && status && (
-            <p className="text-[11px] text-stone-500 dark:text-neutral-400">
+            <p className="text-[11px] text-content-muted">
               {status.enabled
                 ? t('conversations.taskKanban.sources.statusEnabled')
                 : t('settings.taskSources.disabledBanner')}
@@ -715,7 +709,7 @@ function TaskSourceControls({ disabled, compact }: { disabled: boolean; compact:
             type="button"
             disabled={disabled || loading || busyKey !== null || sources.length === 0}
             onClick={() => void syncSources()}
-            className="inline-flex items-center gap-1 rounded-md border border-stone-200 px-2 py-1 text-[11px] font-medium text-stone-600 hover:bg-stone-50 disabled:opacity-40 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
+            className="inline-flex items-center gap-1 rounded-md border border-line px-2 py-1 text-[11px] font-medium text-content-secondary hover:bg-surface-hover disabled:opacity-40">
             <LuRefreshCw className="h-3 w-3" />
             {busyKey === 'sync'
               ? t('settings.taskSources.syncing')
@@ -726,7 +720,7 @@ function TaskSourceControls({ disabled, compact }: { disabled: boolean; compact:
             aria-label={t('settings.taskSources.refresh')}
             disabled={loading}
             onClick={() => void load()}
-            className="flex h-7 w-7 items-center justify-center rounded-md border border-stone-200 text-stone-500 hover:bg-stone-50 disabled:opacity-40 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
+            className="flex h-7 w-7 items-center justify-center rounded-md border border-line text-content-muted hover:bg-surface-hover disabled:opacity-40 dark:text-content-secondary">
             <LuRefreshCw className="h-3.5 w-3.5" />
           </button>
         </div>
@@ -742,25 +736,19 @@ function TaskSourceControls({ disabled, compact }: { disabled: boolean; compact:
         </p>
       )}
       {loading ? (
-        <p className="mt-2 text-[11px] text-stone-400 dark:text-neutral-500">
-          {t('common.loading')}
-        </p>
+        <p className="mt-2 text-[11px] text-content-faint">{t('common.loading')}</p>
       ) : sources.length === 0 ? (
-        <p className="mt-2 text-[11px] text-stone-400 dark:text-neutral-500">
-          {t('settings.taskSources.empty')}
-        </p>
+        <p className="mt-2 text-[11px] text-content-faint">{t('settings.taskSources.empty')}</p>
       ) : (
         <ul className="mt-3 grid gap-2 sm:grid-cols-2">
           {sources.map(source => (
-            <li
-              key={source.id}
-              className="min-w-0 rounded-lg border border-stone-200 px-2.5 py-2 dark:border-neutral-800">
+            <li key={source.id} className="min-w-0 rounded-lg border border-line px-2.5 py-2">
               <div className="flex items-start justify-between gap-2">
                 <div className="min-w-0">
-                  <p className="truncate text-xs font-medium text-stone-800 dark:text-neutral-100">
+                  <p className="truncate text-xs font-medium text-content">
                     {source.name || providerLabel(source.provider, t)}
                   </p>
-                  <p className="truncate text-[11px] text-stone-500 dark:text-neutral-400">
+                  <p className="truncate text-[11px] text-content-muted">
                     {providerLabel(source.provider, t)}
                     {source.target === 'agent_todo_proactive'
                       ? ` · ${t('settings.taskSources.proactive')}`
@@ -771,7 +759,7 @@ function TaskSourceControls({ disabled, compact }: { disabled: boolean; compact:
                   className={`flex-none rounded-md px-1.5 py-0.5 text-[10px] ${
                     source.enabled
                       ? 'bg-sage-50 text-sage-700 dark:bg-sage-500/10 dark:text-sage-200'
-                      : 'bg-stone-100 text-stone-500 dark:bg-neutral-800 dark:text-neutral-400'
+                      : 'bg-surface-subtle text-content-muted'
                   }`}>
                   {source.enabled
                     ? t('settings.taskSources.statusEnabled')
@@ -783,7 +771,7 @@ function TaskSourceControls({ disabled, compact }: { disabled: boolean; compact:
                   type="button"
                   disabled={disabled || busyKey !== null}
                   onClick={() => void fetchSource(source)}
-                  className="inline-flex items-center gap-1 rounded-md border border-stone-200 px-2 py-1 text-[11px] font-medium text-stone-600 hover:bg-stone-50 disabled:opacity-40 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
+                  className="inline-flex items-center gap-1 rounded-md border border-line px-2 py-1 text-[11px] font-medium text-content-secondary hover:bg-surface-hover disabled:opacity-40">
                   <LuRefreshCw className="h-3 w-3" />
                   {busyKey === `fetch:${source.id}`
                     ? t('settings.taskSources.fetching')
@@ -793,7 +781,7 @@ function TaskSourceControls({ disabled, compact }: { disabled: boolean; compact:
                   type="button"
                   disabled={disabled || busyKey !== null}
                   onClick={() => void toggleSource(source)}
-                  className="rounded-md border border-stone-200 px-2 py-1 text-[11px] font-medium text-stone-600 hover:bg-stone-50 disabled:opacity-40 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
+                  className="rounded-md border border-line px-2 py-1 text-[11px] font-medium text-content-secondary hover:bg-surface-hover disabled:opacity-40">
                   {source.enabled
                     ? t('settings.taskSources.disable')
                     : t('settings.taskSources.enable')}
@@ -866,15 +854,13 @@ function TaskBriefDialog({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 px-4 py-6">
-      <section className="max-h-full w-full max-w-xl overflow-y-auto rounded-lg border border-stone-200 bg-white p-4 shadow-xl dark:border-neutral-800 dark:bg-neutral-900">
+      <section className="max-h-full w-full max-w-xl overflow-y-auto rounded-lg border border-line bg-surface p-4 shadow-xl">
         <div className="mb-3 flex items-start justify-between gap-3">
           <div className="min-w-0">
-            <p className="text-[11px] font-semibold uppercase text-stone-400 dark:text-neutral-500">
+            <p className="text-[11px] font-semibold uppercase text-content-faint">
               {t('conversations.taskKanban.briefTitle')}
             </p>
-            <h3 className="break-words text-base font-semibold text-stone-900 dark:text-neutral-50">
-              {card.title}
-            </h3>
+            <h3 className="break-words text-base font-semibold text-content">{card.title}</h3>
           </div>
           <Button
             iconOnly
@@ -892,24 +878,24 @@ function TaskBriefDialog({
         {editable ? (
           <div className="space-y-3 text-sm">
             <label className="block">
-              <span className="mb-1 block text-xs font-semibold text-stone-500 dark:text-neutral-400">
+              <span className="mb-1 block text-xs font-semibold text-content-muted">
                 {t('conversations.taskKanban.field.title')}
               </span>
               <input
                 value={title}
                 onChange={e => setTitle(e.target.value)}
-                className="w-full rounded-md border border-stone-200 bg-white px-2 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-50"
+                className="w-full rounded-md border border-line bg-surface px-2 py-1.5 text-sm text-content dark:bg-surface-canvas"
               />
             </label>
             <div className="grid gap-3 sm:grid-cols-3">
               <label className="block">
-                <span className="mb-1 block text-xs font-semibold text-stone-500 dark:text-neutral-400">
+                <span className="mb-1 block text-xs font-semibold text-content-muted">
                   {t('conversations.taskKanban.field.status')}
                 </span>
                 <select
                   value={status}
                   onChange={e => setStatus(e.target.value as TaskBoardCardStatus)}
-                  className="w-full rounded-md border border-stone-200 bg-white px-2 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-50">
+                  className="w-full rounded-md border border-line bg-surface px-2 py-1.5 text-sm text-content dark:bg-surface-canvas">
                   {(COLUMN_STATUSES.includes(status)
                     ? COLUMN_STATUSES
                     : [status, ...COLUMN_STATUSES]
@@ -926,13 +912,13 @@ function TaskBriefDialog({
                 onChange={setAssignedAgent}
               />
               <label className="block">
-                <span className="mb-1 block text-xs font-semibold text-stone-500 dark:text-neutral-400">
+                <span className="mb-1 block text-xs font-semibold text-content-muted">
                   {t('conversations.taskKanban.field.approval')}
                 </span>
                 <select
                   value={approvalMode}
                   onChange={e => setApprovalMode(e.target.value)}
-                  className="w-full rounded-md border border-stone-200 bg-white px-2 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-50">
+                  className="w-full rounded-md border border-line bg-surface px-2 py-1.5 text-sm text-content dark:bg-surface-canvas">
                   <option value="">{t('conversations.taskKanban.approval.default')}</option>
                   <option value="required">
                     {t('conversations.taskKanban.approval.required')}
@@ -1111,10 +1097,7 @@ function SourceBriefField({
   return (
     <div className="min-w-0">
       <dt className="text-[11px] font-semibold text-sky-700 dark:text-sky-200">{label}</dt>
-      <dd
-        className={`mt-0.5 break-words text-xs text-stone-800 dark:text-neutral-100 ${
-          mono ? 'font-mono' : ''
-        }`}>
+      <dd className={`mt-0.5 break-words text-xs text-content ${mono ? 'font-mono' : ''}`}>
         {value}
       </dd>
     </div>
@@ -1132,13 +1115,11 @@ function BriefInput({
 }) {
   return (
     <label className="block">
-      <span className="mb-1 block text-xs font-semibold text-stone-500 dark:text-neutral-400">
-        {label}
-      </span>
+      <span className="mb-1 block text-xs font-semibold text-content-muted">{label}</span>
       <input
         value={value}
         onChange={e => onChange(e.target.value)}
-        className="w-full rounded-md border border-stone-200 bg-white px-2 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-50"
+        className="w-full rounded-md border border-line bg-surface px-2 py-1.5 text-sm text-content dark:bg-surface-canvas"
       />
     </label>
   );
@@ -1155,14 +1136,12 @@ function BriefTextarea({
 }) {
   return (
     <label className="block">
-      <span className="mb-1 block text-xs font-semibold text-stone-500 dark:text-neutral-400">
-        {label}
-      </span>
+      <span className="mb-1 block text-xs font-semibold text-content-muted">{label}</span>
       <textarea
         value={value}
         onChange={e => onChange(e.target.value)}
         rows={3}
-        className="w-full resize-y rounded-md border border-stone-200 bg-white px-2 py-1.5 text-sm text-stone-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-50"
+        className="w-full resize-y rounded-md border border-line bg-surface px-2 py-1.5 text-sm text-content dark:bg-surface-canvas"
       />
     </label>
   );
@@ -1182,11 +1161,11 @@ function BriefText({
   if (!value) return null;
   return (
     <div>
-      <h4 className="mb-1 text-xs font-semibold text-stone-500 dark:text-neutral-400">{label}</h4>
+      <h4 className="mb-1 text-xs font-semibold text-content-muted">{label}</h4>
       <p
         className={`break-words text-sm ${
           mono ? 'font-mono' : ''
-        } ${tone === 'danger' ? 'text-coral-600' : 'text-stone-800 dark:text-neutral-100'}`}>
+        } ${tone === 'danger' ? 'text-coral-600' : 'text-content'}`}>
         {value}
       </p>
     </div>
@@ -1208,11 +1187,11 @@ function BriefList({
   const List = ordered ? 'ol' : 'ul';
   return (
     <div>
-      <h4 className="mb-1 text-xs font-semibold text-stone-500 dark:text-neutral-400">{label}</h4>
+      <h4 className="mb-1 text-xs font-semibold text-content-muted">{label}</h4>
       <List
         className={`space-y-1 ${
           ordered ? 'list-decimal' : 'list-disc'
-        } list-inside text-sm text-stone-800 dark:text-neutral-100 ${mono ? 'font-mono' : ''}`}>
+        } list-inside text-sm text-content ${mono ? 'font-mono' : ''}`}>
         {values.map((value, index) => (
           <li key={index} className="break-words">
             {value}
diff --git a/app/src/pages/conversations/components/ThreadGoalChip.tsx b/app/src/pages/conversations/components/ThreadGoalChip.tsx
index 3e6bc4ba1..01761a32b 100644
--- a/app/src/pages/conversations/components/ThreadGoalChip.tsx
+++ b/app/src/pages/conversations/components/ThreadGoalChip.tsx
@@ -54,13 +54,13 @@ function statusClasses(status: ThreadGoalStatus): string {
     case 'active':
       return 'bg-primary-50 text-primary-700 dark:bg-primary-900/40 dark:text-primary-200';
     case 'paused':
-      return 'bg-stone-100 text-stone-600 dark:bg-neutral-800 dark:text-neutral-300';
+      return 'bg-surface-subtle text-content-secondary';
     case 'budget_limited':
       return 'bg-amber-50 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200';
     case 'complete':
       return 'bg-sage-50 text-sage-700 dark:bg-sage-900/40 dark:text-sage-200';
     default:
-      return 'bg-stone-100 text-stone-600';
+      return 'bg-surface-subtle text-content-secondary';
   }
 }
 
@@ -192,7 +192,7 @@ export function ThreadGoalFooterTrigger({
         type="button"
         onClick={ctl.toggle}
         aria-expanded={ctl.expanded}
-        className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200">
+        className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-content-muted hover:bg-surface-hover hover:text-content-secondary">
         <span aria-hidden>◎</span>
         {t('conversations.threadGoal.setCta')}
       </button>
@@ -205,18 +205,15 @@ export function ThreadGoalFooterTrigger({
       onClick={ctl.toggle}
       aria-expanded={ctl.expanded}
       title={ctl.goal.objective}
-      className="inline-flex min-w-0 items-center gap-1.5 rounded-md px-1.5 py-0.5 text-xs hover:bg-stone-100 dark:hover:bg-neutral-800">
-      <span aria-hidden className="shrink-0 text-stone-400">
+      className="inline-flex min-w-0 items-center gap-1.5 rounded-md px-1.5 py-0.5 text-xs hover:bg-surface-hover">
+      <span aria-hidden className="shrink-0 text-content-faint">
         ◎
       </span>
       <span
         className={`shrink-0 rounded px-1 py-0.5 text-[10px] font-medium uppercase tracking-wide ${statusClasses(ctl.goal.status)}`}>
         {t(`conversations.threadGoal.status.${ctl.goal.status}`)}
       </span>
-      <MarqueeText
-        text={ctl.goal.objective}
-        className="max-w-[18rem] text-stone-600 dark:text-neutral-300"
-      />
+      <MarqueeText text={ctl.goal.objective} className="max-w-[18rem] text-content-secondary" />
     </button>
   );
 }
@@ -237,7 +234,7 @@ export function ThreadGoalEditorPanel({
       : null;
 
   return (
-    <div className="flex flex-col gap-1.5 rounded-xl border border-stone-200 bg-stone-50 px-3 py-2 dark:border-neutral-800 dark:bg-neutral-800">
+    <div className="flex flex-col gap-1.5 rounded-xl border border-line bg-surface-muted px-3 py-2">
       {/* Controls row — lifecycle (left) + budget and Cancel/Save (right) —
           sits above the input so the input gets the full width below. */}
       <div className="flex items-center gap-1">
@@ -271,14 +268,14 @@ export function ThreadGoalEditorPanel({
         )}
         <div className="ml-auto flex items-center gap-1">
           {budgetText && (
-            <span className="shrink-0 text-[11px] tabular-nums text-stone-400 dark:text-neutral-500">
+            <span className="shrink-0 text-[11px] tabular-nums text-content-faint">
               {budgetText}
             </span>
           )}
           <button
             type="button"
             onClick={ctl.close}
-            className="shrink-0 rounded px-2 py-0.5 text-xs text-stone-500 hover:bg-stone-100 dark:text-neutral-400 dark:hover:bg-neutral-800">
+            className="shrink-0 rounded px-2 py-0.5 text-xs text-content-muted hover:bg-surface-hover">
             {t('conversations.threadGoal.cancel')}
           </button>
           <button
@@ -302,7 +299,7 @@ export function ThreadGoalEditorPanel({
         }}
         placeholder={t('conversations.threadGoal.placeholder')}
         aria-label={t('conversations.threadGoal.placeholder')}
-        className="w-full border-0 bg-transparent text-sm text-stone-800 outline-none focus:outline-none focus:ring-0 placeholder:text-stone-400 dark:text-neutral-100"
+        className="w-full border-0 bg-transparent text-sm text-content outline-none focus:outline-none focus:ring-0 placeholder:text-stone-400"
       />
     </div>
   );
@@ -362,7 +359,7 @@ function PanelButton({
       aria-label={label}
       onClick={onClick}
       disabled={disabled}
-      className="rounded px-1.5 py-0.5 text-[11px] text-stone-500 hover:bg-stone-100 disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-neutral-800">
+      className="rounded px-1.5 py-0.5 text-[11px] text-content-muted hover:bg-surface-hover disabled:opacity-40">
       {label}
     </button>
   );
diff --git a/app/src/pages/conversations/components/ThreadTodoStrip.tsx b/app/src/pages/conversations/components/ThreadTodoStrip.tsx
index 4d9592232..b7d91d4ff 100644
--- a/app/src/pages/conversations/components/ThreadTodoStrip.tsx
+++ b/app/src/pages/conversations/components/ThreadTodoStrip.tsx
@@ -59,7 +59,7 @@ function statusColorClass(status: TaskBoardCardStatus): string {
     case 'awaiting_approval':
       return 'text-amber-700 dark:text-amber-300';
     default:
-      return 'text-stone-600 dark:text-neutral-300';
+      return 'text-content-secondary';
   }
 }
 
@@ -109,20 +109,20 @@ export const ThreadTodoStrip: React.FC<Props> = ({
 
   return (
     <div
-      className="mb-2 rounded-xl border border-stone-200 bg-stone-50 text-xs shadow-sm dark:border-neutral-700 dark:bg-neutral-900"
+      className="mb-2 rounded-xl border border-line bg-surface-muted text-xs shadow-sm"
       data-testid="thread-todo-strip">
       <button
         type="button"
         onClick={() => setCollapsed(prev => !prev)}
         aria-expanded={!collapsed}
-        className="flex w-full items-center gap-1.5 px-3 py-2 text-left text-stone-500 transition-colors hover:text-stone-700 dark:text-neutral-400 dark:hover:text-neutral-200">
+        className="flex w-full items-center gap-1.5 px-3 py-2 text-left text-content-muted transition-colors hover:text-content-secondary">
         <span aria-hidden className="text-primary-500">
           {collapsed ? '▸' : '▾'}
         </span>
-        <span className="font-semibold text-stone-700 dark:text-neutral-200">
+        <span className="font-semibold text-content-secondary">
           {t('conversations.threadTodo.title')}
         </span>
-        <span className="text-stone-400 dark:text-neutral-500">
+        <span className="text-content-faint">
           {doneCount}/{total}
         </span>
       </button>
@@ -151,7 +151,7 @@ export const ThreadTodoStrip: React.FC<Props> = ({
                   type="button"
                   title={t('conversations.taskKanban.viewWork')}
                   onClick={() => onViewSession(card)}
-                  className="flex-shrink-0 rounded-md border border-stone-200 px-1.5 py-0.5 text-[10px] font-medium text-stone-600 transition-colors hover:bg-stone-100 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800">
+                  className="flex-shrink-0 rounded-md border border-line px-1.5 py-0.5 text-[10px] font-medium text-content-secondary transition-colors hover:bg-surface-hover">
                   {t('conversations.taskKanban.viewWork')}
                 </button>
               )}
@@ -170,7 +170,7 @@ export const ThreadTodoStrip: React.FC<Props> = ({
                     title={t('chat.approval.deny')}
                     disabled={disabled}
                     onClick={() => onDecidePlan(card, false)}
-                    className="rounded-md border border-stone-200 px-1.5 py-0.5 text-[10px] font-medium text-stone-600 transition-colors hover:bg-stone-100 disabled:opacity-40 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800">
+                    className="rounded-md border border-line px-1.5 py-0.5 text-[10px] font-medium text-content-secondary transition-colors hover:bg-surface-hover disabled:opacity-40">
                     {t('chat.approval.deny')}
                   </button>
                 </span>
diff --git a/app/src/pages/conversations/components/ToolTimelineBlock.tsx b/app/src/pages/conversations/components/ToolTimelineBlock.tsx
index 0faafe551..e19b80c90 100644
--- a/app/src/pages/conversations/components/ToolTimelineBlock.tsx
+++ b/app/src/pages/conversations/components/ToolTimelineBlock.tsx
@@ -61,7 +61,7 @@ function StatusTag({ status }: { status: ToolTimelineEntryStatus }) {
         : status === 'cancelled'
           ? {
               label: t('conversations.agentTaskInsights.cancelled'),
-              classes: 'bg-stone-100 text-stone-500 dark:bg-neutral-800 dark:text-neutral-400',
+              classes: 'bg-surface-subtle text-content-muted',
             }
           : status === 'awaiting_user'
             ? {
@@ -101,18 +101,18 @@ function ToolCallRow({
   return (
     <div className="flex items-center gap-1.5" data-testid="subagent-tool-call">
       <span className={`text-[11px] ${tone}`}>•</span>
-      <span className="text-[12px] text-stone-700 dark:text-neutral-200">
+      <span className="text-[12px] text-content-secondary">
         {call.displayName ?? formatToolName(call.toolName)}
       </span>
       {call.detail ? (
-        <span className="rounded bg-stone-100 px-1 font-mono text-[11px] text-stone-500 dark:bg-neutral-800 dark:text-neutral-400">
+        <span className="rounded bg-surface-subtle px-1 font-mono text-[11px] text-content-muted">
           {call.detail}
         </span>
       ) : null}
       {/* Status reads as a tinted "Done" / "Failed" / "Running" tag. */}
       <StatusTag status={call.status} />
       {call.elapsedMs != null && call.status !== 'running' ? (
-        <span className="text-[11px] text-stone-400 dark:text-neutral-500">
+        <span className="text-[11px] text-content-faint">
           {call.elapsedMs >= 1000
             ? `${(call.elapsedMs / 1000).toFixed(1)}s`
             : `${call.elapsedMs}ms`}
@@ -138,7 +138,7 @@ function ThoughtBlock({ text }: { text: string }) {
   return (
     <div
       data-testid="subagent-thought"
-      className="my-0.5 border-l-2 border-stone-200 pl-2 text-[12px] break-words text-stone-500 italic dark:border-neutral-700 dark:text-neutral-400">
+      className="my-0.5 border-l-2 border-line pl-2 text-[12px] break-words text-content-muted italic">
       “{clean}”
     </div>
   );
@@ -174,13 +174,13 @@ function LiveResponseBlock({ text }: { text: string }) {
         <span className="text-[11px] font-semibold tracking-wide text-primary-500 uppercase dark:text-primary-300">
           {t('conversations.agentTaskInsights.response')}
         </span>
-        <span className="text-[10px] text-stone-300 transition-transform group-open/resp:rotate-90 dark:text-neutral-600">
+        <span className="text-[10px] text-content-faint transition-transform group-open/resp:rotate-90 dark:text-neutral-600">
           ▶
         </span>
       </summary>
-      <p className="mt-0.5 text-[12px] leading-snug break-words whitespace-pre-wrap text-stone-600 dark:text-neutral-300">
+      <p className="mt-0.5 text-[12px] leading-snug break-words whitespace-pre-wrap text-content-secondary">
         {clean.length > RESPONSE_PREVIEW_CHARS ? (
-          <span className="text-stone-400 dark:text-neutral-500">…</span>
+          <span className="text-content-faint">…</span>
         ) : null}
         {shown}
         <span className="ml-0.5 inline-block h-3 w-1 animate-pulse bg-primary-400 align-middle" />
@@ -245,14 +245,14 @@ export function SubagentActivityBlock({
 
   return (
     <div
-      className="mt-1 space-y-0.5 text-[12px] text-stone-500 dark:text-neutral-400"
+      className="mt-1 space-y-0.5 text-[12px] text-content-muted"
       data-testid="subagent-activity">
       {headerBits.length > 0 ? (
         <div className="flex flex-wrap items-center gap-1.5">
           {headerBits.map(bit => (
             <span
               key={bit}
-              className="rounded-full bg-stone-100 dark:bg-neutral-800 px-1.5 py-0.5 font-medium text-stone-600 dark:text-neutral-300">
+              className="rounded-full bg-surface-subtle px-1.5 py-0.5 font-medium text-content-secondary">
               {bit}
             </span>
           ))}
@@ -277,14 +277,12 @@ export function SubagentActivityBlock({
       ) : null}
       {subagent.worktreePath ? (
         <div
-          className="mt-1 space-y-1 rounded-md border border-stone-200 bg-stone-50/70 p-1.5 dark:border-neutral-800 dark:bg-neutral-900/50"
+          className="mt-1 space-y-1 rounded-md border border-line bg-surface-muted/70 p-1.5 dark:bg-surface/50"
           data-testid="subagent-worktree">
           <div className="flex flex-wrap items-center gap-1.5">
-            <span className="font-medium text-stone-600 dark:text-neutral-300">
-              {t('worktree.label')}
-            </span>
+            <span className="font-medium text-content-secondary">{t('worktree.label')}</span>
             <span
-              className="truncate font-mono text-[12px] text-stone-500 dark:text-neutral-400"
+              className="truncate font-mono text-[12px] text-content-muted"
               title={subagent.worktreePath}>
               {basename(subagent.worktreePath)}
             </span>
@@ -298,7 +296,7 @@ export function SubagentActivityBlock({
               </span>
             )}
             {subagent.changedFiles && subagent.changedFiles.length > 0 ? (
-              <span className="text-[11px] text-stone-400 dark:text-neutral-500">
+              <span className="text-[11px] text-content-faint">
                 {subagent.changedFiles.length}{' '}
                 {subagent.changedFiles.length === 1
                   ? t('worktree.changedFile')
@@ -337,7 +335,7 @@ function normalizeToolBody(value?: string): string | undefined {
  * panels — the row's *status* is conveyed by the agent name (see
  * {@link agentNameTone}), so the body stays visually quiet.
  */
-const BODY_SURFACE = 'bg-stone-50 dark:bg-neutral-800/60';
+const BODY_SURFACE = 'bg-surface-muted';
 
 /**
  * The agent-run timeline rendered above an assistant answer — the
@@ -391,7 +389,7 @@ export function ToolTimelineBlock({
   const isRunning = latestRunningEntryId != null;
 
   const titleLabel = (
-    <span className="text-[13px] font-medium text-stone-500 dark:text-neutral-400">
+    <span className="text-[13px] font-medium text-content-muted">
       {t('conversations.agentTaskInsights.title')}
     </span>
   );
@@ -417,7 +415,7 @@ export function ToolTimelineBlock({
   // (in-flight) and static (settled) header layouts below.
   const body = (
     <>
-      <div className="text-sm text-stone-400 dark:text-neutral-500">
+      <div className="text-sm text-content-faint">
         {entries.map((entry, index) => {
           const formatted = formatTimelineEntry(entry);
           const detailContent =
@@ -464,13 +462,13 @@ export function ToolTimelineBlock({
                 <details open={shouldAutoExpand} className="group/row">
                   <summary className="flex cursor-pointer list-none items-center gap-1.5 select-none marker:hidden">
                     <span className={`text-[13px] font-medium ${nameTone}`}>{formatted.title}</span>
-                    <span className="text-[11px] text-stone-300 transition-transform group-open/row:rotate-90 dark:text-neutral-600">
+                    <span className="text-[11px] text-content-faint transition-transform group-open/row:rotate-90 dark:text-neutral-600">
                       ▶
                     </span>
                   </summary>
                   {workerRef ? (
                     <div
-                      className={`mt-1 rounded-xl rounded-tl-md px-2.5 py-2 text-[13px] whitespace-pre-wrap break-words text-stone-600 dark:text-neutral-300 ${BODY_SURFACE}`}>
+                      className={`mt-1 rounded-xl rounded-tl-md px-2.5 py-2 text-[13px] whitespace-pre-wrap break-words text-content-secondary ${BODY_SURFACE}`}>
                       {workerRef.before}
                       <WorkerThreadRefCard
                         ref={workerRef.ref}
@@ -480,12 +478,12 @@ export function ToolTimelineBlock({
                     </div>
                   ) : formatted.detail ? (
                     <div
-                      className={`mt-1 rounded-xl rounded-tl-md px-2.5 py-2 text-[13px] whitespace-pre-wrap break-words text-stone-600 dark:text-neutral-300 ${BODY_SURFACE}`}>
+                      className={`mt-1 rounded-xl rounded-tl-md px-2.5 py-2 text-[13px] whitespace-pre-wrap break-words text-content-secondary ${BODY_SURFACE}`}>
                       {formatted.detail}
                     </div>
                   ) : detailContent ? (
                     <pre
-                      className={`mt-1 max-h-24 overflow-y-auto rounded px-2 py-1 font-mono text-[12px] whitespace-pre-wrap break-all text-stone-600 dark:text-neutral-300 ${BODY_SURFACE}`}>
+                      className={`mt-1 max-h-24 overflow-y-auto rounded px-2 py-1 font-mono text-[12px] whitespace-pre-wrap break-all text-content-secondary ${BODY_SURFACE}`}>
                       {detailContent}
                     </pre>
                   ) : null}
@@ -527,7 +525,7 @@ export function ToolTimelineBlock({
               onClick={onViewWholeRun}
               data-testid="view-process-source"
               className="group/insights-link flex items-center gap-1.5 text-left">
-              <span className="text-[13px] font-medium text-stone-500 group-hover/insights-link:underline dark:text-neutral-400">
+              <span className="text-[13px] font-medium text-content-muted group-hover/insights-link:underline">
                 {t('conversations.agentTaskInsights.title')}
               </span>
               <span className="text-[13px] font-medium text-primary-600 dark:text-primary-300">
@@ -547,7 +545,7 @@ export function ToolTimelineBlock({
     <details open className="group/insights mb-2 px-1 py-0" data-testid="agent-task-insights">
       <summary className="mb-1.5 flex cursor-pointer list-none items-center gap-1.5 select-none marker:hidden">
         {titleLabel}
-        <span className="text-[11px] text-stone-400 transition-transform group-open/insights:rotate-90 dark:text-neutral-500">
+        <span className="text-[11px] text-content-faint transition-transform group-open/insights:rotate-90">
           ▶
         </span>
         {wholeRunLink}
diff --git a/app/src/pages/conversations/components/__tests__/AgentTimelineRail.test.tsx b/app/src/pages/conversations/components/__tests__/AgentTimelineRail.test.tsx
index 212ea289a..0fa36f1e5 100644
--- a/app/src/pages/conversations/components/__tests__/AgentTimelineRail.test.tsx
+++ b/app/src/pages/conversations/components/__tests__/AgentTimelineRail.test.tsx
@@ -7,7 +7,7 @@ describe('agentNameTone', () => {
   it('pulses + mutes a running agent (in progress)', () => {
     const tone = agentNameTone('running');
     expect(tone).toContain('animate-pulse');
-    expect(tone).toContain('text-stone-400');
+    expect(tone).toContain('text-content-faint');
   });
 
   it('pulses an awaiting-user agent', () => {
@@ -17,7 +17,7 @@ describe('agentNameTone', () => {
   it('renders a done agent solid (no pulse)', () => {
     const tone = agentNameTone('success');
     expect(tone).not.toContain('animate-pulse');
-    expect(tone).toContain('text-stone-700');
+    expect(tone).toContain('text-content-secondary');
   });
 
   it('tints a failed agent with the error token', () => {
@@ -31,7 +31,7 @@ describe('agentNameTone', () => {
   it('renders a cancelled agent muted and static (terminal, not pulsing)', () => {
     const tone = agentNameTone('cancelled');
     expect(tone).not.toContain('animate-pulse');
-    expect(tone).toContain('stone');
+    expect(tone).toContain('text-content-faint');
   });
 });
 
diff --git a/app/src/pages/dev/AgentInsightsPreview.tsx b/app/src/pages/dev/AgentInsightsPreview.tsx
index 122f90b26..770474b48 100644
--- a/app/src/pages/dev/AgentInsightsPreview.tsx
+++ b/app/src/pages/dev/AgentInsightsPreview.tsx
@@ -94,8 +94,8 @@ const SETTLED_ENTRIES: ToolTimelineEntry[] = RUNNING_ENTRIES.map(e => ({
 
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
   return (
-    <section className="rounded-2xl border border-stone-200 bg-[#f6f6f6] p-4 dark:border-neutral-800 dark:bg-neutral-950">
-      <h2 className="mb-3 text-sm font-semibold text-stone-700 dark:text-neutral-200">{title}</h2>
+    <section className="rounded-2xl border border-line bg-[#f6f6f6] p-4 dark:border-line dark:bg-surface-canvas">
+      <h2 className="mb-3 text-sm font-semibold text-content-secondary">{title}</h2>
       {children}
     </section>
   );
@@ -105,13 +105,11 @@ export default function AgentInsightsPreview() {
   const [panelOpen, setPanelOpen] = useState(false);
 
   return (
-    <div className="h-full overflow-y-auto bg-white p-8 dark:bg-neutral-900">
+    <div className="h-full overflow-y-auto bg-surface p-8">
       <div className="mx-auto max-w-2xl space-y-6">
         <header>
-          <h1 className="text-lg font-bold text-stone-900 dark:text-neutral-100">
-            Agentic task insights — preview
-          </h1>
-          <p className="text-xs text-stone-500 dark:text-neutral-400">
+          <h1 className="text-lg font-bold text-content">Agentic task insights — preview</h1>
+          <p className="text-xs text-content-muted">
             Dev-only harness (#/dev/agent-insights). Sample data — not a live run.
           </p>
         </header>
diff --git a/app/src/pages/ios/MascotScreen.tsx b/app/src/pages/ios/MascotScreen.tsx
index b88e9a2bc..8d5dfffb0 100644
--- a/app/src/pages/ios/MascotScreen.tsx
+++ b/app/src/pages/ios/MascotScreen.tsx
@@ -94,7 +94,7 @@ const MascotChatTranscript: FC<TranscriptProps> = ({ messages }) => {
               ${
                 msg.role === 'user'
                   ? 'bg-[#4A83DD] text-white rounded-br-sm'
-                  : 'bg-white/10 text-white/90 rounded-bl-sm'
+                  : 'bg-surface/10 text-white/90 rounded-bl-sm'
               }
               ${msg.streaming ? 'animate-pulse' : ''}`}>
             {msg.text}
@@ -144,7 +144,7 @@ const PTTButton: FC<PTTButtonProps> = ({ active, partialText, ariaLabel, onDown,
                    ${
                      active
                        ? 'bg-[#4A83DD] border-[#4A83DD] scale-110'
-                       : 'bg-white/10 border-white/20 opacity-80'
+                       : 'bg-surface/10 border-white/20 opacity-80'
                    }`}>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
           <path d="M12 1a4 4 0 0 1 4 4v6a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4z" fill="white" />
@@ -457,7 +457,7 @@ export const MascotScreen: FC = () => {
             onChange={e => setInputText(e.target.value)}
             disabled={isSending}
             placeholder={isSending ? t('iosMascot.thinking') : t('iosMascot.typeMessage')}
-            className="flex-1 bg-white/10 text-white placeholder-white/30 rounded-xl
+            className="flex-1 bg-surface/10 text-white placeholder-white/30 rounded-xl
                        px-4 py-3 text-sm outline-none border border-white/10
                        focus:border-[#4A83DD]/60 transition-colors
                        disabled:opacity-50"
diff --git a/app/src/pages/onboarding/components/BetaBanner.tsx b/app/src/pages/onboarding/components/BetaBanner.tsx
index e7d7dbee0..edd21929d 100644
--- a/app/src/pages/onboarding/components/BetaBanner.tsx
+++ b/app/src/pages/onboarding/components/BetaBanner.tsx
@@ -29,7 +29,7 @@ const BetaBanner = () => {
   return (
     <div className="mb-4 flex items-start gap-3 rounded-xl border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 px-4 py-3">
       {/* Message */}
-      <p className="flex-1 text-xs leading-relaxed text-stone-700 dark:text-neutral-200">
+      <p className="flex-1 text-xs leading-relaxed text-content-secondary">
         {t('misc.beta')}{' '}
         <a
           href={DISCORD_INVITE_URL}
@@ -45,7 +45,7 @@ const BetaBanner = () => {
         type="button"
         aria-label={t('common.dismiss')}
         onClick={handleDismiss}
-        className="mt-0.5 flex-shrink-0 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:text-neutral-300 transition-colors">
+        className="mt-0.5 flex-shrink-0 text-content-faint hover:text-content-secondary dark:text-content-secondary transition-colors">
         <svg
           className="h-3.5 w-3.5"
           fill="none"
diff --git a/app/src/pages/onboarding/components/ConfigureLaterCallout.tsx b/app/src/pages/onboarding/components/ConfigureLaterCallout.tsx
index 2410c96fe..e613447ae 100644
--- a/app/src/pages/onboarding/components/ConfigureLaterCallout.tsx
+++ b/app/src/pages/onboarding/components/ConfigureLaterCallout.tsx
@@ -15,14 +15,12 @@ const ConfigureLaterCallout = ({ settingsHref }: ConfigureLaterCalloutProps) =>
   const { t } = useT();
   return (
     <div className="flex flex-col gap-3">
-      <p className="text-xs text-stone-700 dark:text-neutral-200 leading-relaxed">
+      <p className="text-xs text-content-secondary leading-relaxed">
         {t('onboarding.custom.configureLater')}
       </p>
-      <p
-        className="text-[11px] text-stone-500 dark:text-neutral-400"
-        data-testid="configure-later-hint">
+      <p className="text-[11px] text-content-muted" data-testid="configure-later-hint">
         {t('onboarding.custom.openSettings')}:{' '}
-        <code className="text-stone-700 dark:text-neutral-200">{settingsHref}</code>
+        <code className="text-content-secondary">{settingsHref}</code>
       </p>
     </div>
   );
diff --git a/app/src/pages/onboarding/components/OnboardingNextButton.tsx b/app/src/pages/onboarding/components/OnboardingNextButton.tsx
index 7cf7eb34e..ae67eb846 100644
--- a/app/src/pages/onboarding/components/OnboardingNextButton.tsx
+++ b/app/src/pages/onboarding/components/OnboardingNextButton.tsx
@@ -27,7 +27,7 @@ const OnboardingNextButton = ({
       aria-busy={loading}
       onClick={onClick}
       disabled={disabled || loading}
-      className="w-full py-2.5 bg-primary-500 hover:bg-primary-600 active:bg-primary-700 text-white text-sm font-medium rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900">
+      className="w-full py-2.5 bg-primary-500 hover:bg-primary-600 active:bg-primary-700 text-content-inverted text-sm font-medium rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900">
       {loading ? effectiveLoadingLabel : effectiveLabel}
     </button>
   );
diff --git a/app/src/pages/onboarding/components/WizardStepper.tsx b/app/src/pages/onboarding/components/WizardStepper.tsx
index 20e4d6cd1..a4ed388e0 100644
--- a/app/src/pages/onboarding/components/WizardStepper.tsx
+++ b/app/src/pages/onboarding/components/WizardStepper.tsx
@@ -27,18 +27,18 @@ const WizardStepper = ({ labels, activeIndex }: WizardStepperProps) => {
         const isLast = idx === labels.length - 1;
 
         const dotClasses = completed
-          ? 'bg-sage-500 border-sage-500 text-white'
+          ? 'bg-sage-500 border-sage-500 text-content-inverted'
           : active
-            ? 'bg-primary-500 border-primary-500 text-white'
-            : 'bg-white dark:bg-neutral-900 border-stone-300 dark:border-neutral-700 text-stone-400 dark:text-neutral-500';
+            ? 'bg-primary-500 border-primary-500 text-content-inverted'
+            : 'bg-surface border-line-strong text-content-faint';
 
         const labelClasses = completed
           ? 'text-sage-700 dark:text-sage-300'
           : active
-            ? 'text-stone-900 dark:text-neutral-100 font-semibold'
-            : 'text-stone-400 dark:text-neutral-500';
+            ? 'text-content font-semibold'
+            : 'text-content-faint';
 
-        const connectorClasses = completed ? 'bg-sage-500' : 'bg-stone-200 dark:bg-neutral-800';
+        const connectorClasses = completed ? 'bg-sage-500' : 'bg-surface-strong';
 
         return (
           <li
diff --git a/app/src/pages/onboarding/pages/ChatProviderPage.tsx b/app/src/pages/onboarding/pages/ChatProviderPage.tsx
index d211b986f..a0ef97ab8 100644
--- a/app/src/pages/onboarding/pages/ChatProviderPage.tsx
+++ b/app/src/pages/onboarding/pages/ChatProviderPage.tsx
@@ -32,17 +32,15 @@ const ChatProviderPage = () => {
   return (
     <div
       data-testid="onboarding-chat-provider-step"
-      className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
+      className="rounded-2xl border border-line bg-surface p-8 shadow-soft animate-fade-up">
       <div className="text-center mb-5">
-        <h1 className="text-xl font-bold mb-2 text-stone-900 dark:text-neutral-100">
-          {t('onboarding.chatProvider')}
-        </h1>
-        <p className="text-stone-500 dark:text-neutral-400 text-sm leading-relaxed max-w-sm mx-auto">
+        <h1 className="text-xl font-bold mb-2 text-content">{t('onboarding.chatProvider')}</h1>
+        <p className="text-content-muted text-sm leading-relaxed max-w-sm mx-auto">
           {t('onboarding.chatProviderDesc')}
         </p>
       </div>
 
-      <div className="rounded-xl border border-dashed border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-6 mb-5 text-center text-sm text-stone-500 dark:text-neutral-400">
+      <div className="rounded-xl border border-dashed border-line bg-surface-muted p-6 mb-5 text-center text-sm text-content-muted">
         {t('misc.beta')}
       </div>
 
diff --git a/app/src/pages/onboarding/steps/ApiKeysStep.tsx b/app/src/pages/onboarding/steps/ApiKeysStep.tsx
index 2f2958941..e0c377720 100644
--- a/app/src/pages/onboarding/steps/ApiKeysStep.tsx
+++ b/app/src/pages/onboarding/steps/ApiKeysStep.tsx
@@ -133,20 +133,20 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
   return (
     <div
       data-testid="onboarding-api-keys-step"
-      className="rounded-2xl bg-white dark:bg-neutral-900 p-10 shadow-soft animate-fade-up">
+      className="rounded-2xl bg-surface p-10 shadow-soft animate-fade-up">
       <div className="text-center">
-        <h1 className="text-2xl font-display text-stone-900 dark:text-neutral-100 mb-2 leading-tight">
+        <h1 className="text-2xl font-title text-content mb-2 leading-tight">
           {t('onboarding.apiKeys.title')}
         </h1>
-        <p className="text-stone-500 dark:text-neutral-400 text-sm leading-relaxed">
+        <p className="text-content-muted text-sm leading-relaxed">
           {t('onboarding.apiKeys.subtitle')}
         </p>
       </div>
 
       <div className="mt-6 flex flex-col gap-4">
-        <div className="flex flex-col gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/40 p-3">
+        <div className="flex flex-col gap-2 rounded-lg border border-line bg-surface-muted p-3">
           <div className="flex flex-wrap items-center justify-between gap-2">
-            <span className="text-xs font-medium text-stone-700 dark:text-neutral-200">
+            <span className="text-xs font-medium text-content-secondary">
               {t('onboarding.apiKeys.openaiLabel')}
             </span>
             {oauthConnected ? (
@@ -157,7 +157,7 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
               </span>
             ) : null}
           </div>
-          <p className="text-[11px] text-stone-500 dark:text-neutral-400">
+          <p className="text-[11px] text-content-muted">
             {t('onboarding.apiKeys.openaiOauthHint')}
           </p>
           <button
@@ -172,7 +172,7 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
           </button>
           {oauthAwaitingCallback && !oauthConnected ? (
             <div className="flex flex-col gap-1.5">
-              <p className="text-[11px] text-stone-500 dark:text-neutral-400">
+              <p className="text-[11px] text-content-muted">
                 {t('onboarding.apiKeys.openaiOauthCallbackHint').replace(
                   '{url}',
                   OPENAI_OAUTH_CALLBACK_ORIGIN
@@ -189,7 +189,7 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
                   setOauthCallbackUrl(e.target.value);
                   setError(null);
                 }}
-                className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-xs text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                className="rounded-lg border border-line-strong bg-surface px-3 py-2 text-xs text-content placeholder-content-faint focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
               />
               <button
                 type="button"
@@ -202,11 +202,11 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
             </div>
           ) : null}
           <div className="relative flex items-center gap-2 py-1">
-            <div className="h-px flex-1 bg-stone-200 dark:bg-neutral-700" />
-            <span className="text-[10px] uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+            <div className="h-px flex-1 bg-surface-strong" />
+            <span className="text-[10px] uppercase tracking-wide text-content-faint">
               {t('onboarding.apiKeys.orApiKey')}
             </span>
-            <div className="h-px flex-1 bg-stone-200 dark:bg-neutral-700" />
+            <div className="h-px flex-1 bg-surface-strong" />
           </div>
           <input
             id="onboarding-openai-key"
@@ -220,14 +220,14 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
               setOpenai(e.target.value);
               setError(null);
             }}
-            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+            className="rounded-lg border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder-content-faint focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
           />
         </div>
 
         <div className="flex flex-col gap-1.5">
           <label
             htmlFor="onboarding-anthropic-key"
-            className="text-xs font-medium text-stone-700 dark:text-neutral-200">
+            className="text-xs font-medium text-content-secondary">
             {t('onboarding.apiKeys.anthropicLabel')}
           </label>
           <input
@@ -242,7 +242,7 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
               setAnthropic(e.target.value);
               setError(null);
             }}
-            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+            className="rounded-lg border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder-content-faint focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
           />
         </div>
 
diff --git a/app/src/pages/onboarding/steps/ContextGatheringStep.tsx b/app/src/pages/onboarding/steps/ContextGatheringStep.tsx
index 043538eaf..bbd17e306 100644
--- a/app/src/pages/onboarding/steps/ContextGatheringStep.tsx
+++ b/app/src/pages/onboarding/steps/ContextGatheringStep.tsx
@@ -389,13 +389,13 @@ const ContextGatheringStep = ({
 
   if (finished && hasError) {
     return (
-      <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
+      <div className="rounded-2xl border border-line bg-surface p-8 shadow-soft animate-fade-up">
         <div className="flex flex-col items-center justify-center gap-5">
-          <h1 className="text-xl font-bold text-stone-900 dark:text-neutral-100">
+          <h1 className="text-xl font-bold text-content">
             {t('onboarding.contextGathering.title')}
           </h1>
           <div className="w-full max-w-sm rounded-xl border border-primary-100 bg-primary-50/80 p-4 dark:border-primary-900/50 dark:bg-primary-950/30">
-            <p className="text-sm text-stone-700 dark:text-neutral-200 text-center leading-relaxed mb-4">
+            <p className="text-sm text-content-secondary text-center leading-relaxed mb-4">
               {t('onboarding.contextGathering.errorDesc')}
             </p>
             <OnboardingNextButton
@@ -427,19 +427,19 @@ const ContextGatheringStep = ({
   };
 
   return (
-    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
+    <div className="rounded-2xl border border-line bg-surface p-8 shadow-soft animate-fade-up">
       <div className="flex flex-col items-center justify-center gap-6 py-8">
         {/* Pulsing avatar silhouette */}
         <div className="w-20 h-20 rounded-full bg-gradient-to-r from-stone-300 via-stone-100 to-stone-300 bg-[length:200%_100%] animate-shimmer" />
 
         {/* Title */}
         <h1
-          className="text-xl font-bold text-stone-900 dark:text-neutral-100 animate-pulse"
+          className="text-xl font-bold text-content animate-pulse"
           data-testid="context-gathering-title">
           {t(titleKey)}
         </h1>
         <p
-          className="text-sm text-stone-500 dark:text-neutral-400 leading-relaxed text-center max-w-sm"
+          className="text-sm text-content-muted leading-relaxed text-center max-w-sm"
           data-testid="context-gathering-desc">
           {t(descKey)}
         </p>
@@ -456,7 +456,7 @@ const ContextGatheringStep = ({
             during the 800ms auto-advance window after a slow success. */}
         {showStillWorking && (
           <div
-            className="flex items-center gap-2 text-xs text-stone-500 dark:text-neutral-400"
+            className="flex items-center gap-2 text-xs text-content-muted"
             data-testid="core-alive-indicator"
             data-alive-state={aliveState}>
             <span
@@ -465,7 +465,7 @@ const ContextGatheringStep = ({
                   ? 'bg-emerald-500'
                   : aliveState === 'unreachable'
                     ? 'bg-red-500'
-                    : 'bg-stone-300 dark:bg-neutral-600 animate-pulse'
+                    : 'bg-surface-strong animate-pulse'
               }`}
               aria-hidden="true"
             />
diff --git a/app/src/pages/onboarding/steps/CustomWizardStep.tsx b/app/src/pages/onboarding/steps/CustomWizardStep.tsx
index 8d928f879..6b8651cdd 100644
--- a/app/src/pages/onboarding/steps/CustomWizardStep.tsx
+++ b/app/src/pages/onboarding/steps/CustomWizardStep.tsx
@@ -39,12 +39,10 @@ const ChoiceCard = ({
       className={`flex h-full w-full flex-col rounded-2xl border-2 p-5 text-left transition-colors focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 ${
         selected
           ? selectedClasses
-          : '!border-stone-200 dark:!border-neutral-700 bg-white dark:bg-neutral-900 hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
+          : '!border-stone-200 dark:!border-neutral-700 bg-surface hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-surface-hover'
       }`}>
-      <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">{title}</h3>
-      <p className="mt-1 text-xs text-stone-600 dark:text-neutral-300 leading-relaxed">
-        {description}
-      </p>
+      <h3 className="text-base font-semibold text-content">{title}</h3>
+      <p className="mt-1 text-xs text-content-secondary leading-relaxed">{description}</p>
     </button>
   );
 };
@@ -123,15 +121,11 @@ const CustomWizardStep = ({
   return (
     <div
       data-testid={testId ?? 'onboarding-custom-wizard-step'}
-      className="rounded-2xl bg-white dark:bg-neutral-900 p-10 shadow-soft animate-fade-up">
+      className="rounded-2xl bg-surface p-10 shadow-soft animate-fade-up">
       <WizardStepper labels={stepperLabels} activeIndex={stepIndex} />
 
-      <h1 className="mt-8 text-2xl font-display text-stone-900 dark:text-neutral-100 leading-tight">
-        {title}
-      </h1>
-      <p className="mt-2 text-sm text-stone-500 dark:text-neutral-400 leading-relaxed">
-        {subtitle}
-      </p>
+      <h1 className="mt-8 text-2xl font-title text-content leading-tight">{title}</h1>
+      <p className="mt-2 text-sm text-content-muted leading-relaxed">{subtitle}</p>
 
       {!hideChoiceCards ? (
         <>
@@ -156,7 +150,7 @@ const CustomWizardStep = ({
           </div>
 
           {defaultDisabled && defaultDisabledReason ? (
-            <p className="mt-3 text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+            <p className="mt-3 text-xs text-content-muted leading-relaxed">
               {defaultDisabledReason}
             </p>
           ) : null}
@@ -164,7 +158,7 @@ const CustomWizardStep = ({
       ) : null}
 
       {(choice === 'configure' || hideChoiceCards) && configureContent ? (
-        <div className="mt-6 rounded-2xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
+        <div className="mt-6 rounded-2xl border border-line bg-surface-muted p-5">
           {configureContent}
         </div>
       ) : null}
diff --git a/app/src/pages/onboarding/steps/LocalAIStep.tsx b/app/src/pages/onboarding/steps/LocalAIStep.tsx
index 92daeaaeb..4f94fc901 100644
--- a/app/src/pages/onboarding/steps/LocalAIStep.tsx
+++ b/app/src/pages/onboarding/steps/LocalAIStep.tsx
@@ -65,7 +65,7 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
   // Low-RAM device: show cloud fallback option as the primary path.
   if (recommendDisabled) {
     return (
-      <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
+      <div className="rounded-2xl border border-line bg-surface p-8 shadow-soft animate-fade-up">
         <div className="flex flex-col items-center mb-5">
           <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 dark:bg-primary-500/15 mb-3">
             <svg
@@ -81,37 +81,29 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
               />
             </svg>
           </div>
-          <h1 className="text-xl font-bold mb-2 text-stone-900 dark:text-neutral-100">
-            {t('onboarding.localAI')}
-          </h1>
-          <p className="text-stone-600 dark:text-neutral-300 text-sm text-center">
+          <h1 className="text-xl font-bold mb-2 text-content">{t('onboarding.localAI')}</h1>
+          <p className="text-content-secondary text-sm text-center">
             {t('onboarding.localAIDesc')}
           </p>
         </div>
 
         <div className="space-y-2 mb-5">
           <div className="rounded-xl border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/15 px-3 py-2">
-            <p className="text-xs text-stone-700 dark:text-neutral-200">
+            <p className="text-xs text-content-secondary">
               <span className="font-semibold">{t('onboarding.localAI')}</span>
-              <span className="text-stone-600 dark:text-neutral-300">
-                &nbsp;— {t('onboarding.localAIDesc')}
-              </span>
+              <span className="text-content-secondary">&nbsp;— {t('onboarding.localAIDesc')}</span>
             </p>
           </div>
-          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
-            <p className="text-xs text-stone-700 dark:text-neutral-200">
+          <div className="rounded-xl border border-line bg-surface-muted px-3 py-2">
+            <p className="text-xs text-content-secondary">
               <span className="font-semibold">{t('common.download')}</span>
-              <span className="text-stone-600 dark:text-neutral-300">
-                &nbsp;— {t('misc.downloading')}
-              </span>
+              <span className="text-content-secondary">&nbsp;— {t('misc.downloading')}</span>
             </p>
           </div>
           <div className="rounded-xl border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 px-3 py-2">
-            <p className="text-xs text-stone-700 dark:text-neutral-200">
+            <p className="text-xs text-content-secondary">
               <span className="font-semibold">{t('welcome.connect')}</span>
-              <span className="text-stone-600 dark:text-neutral-300">
-                &nbsp;— {t('onboarding.localAIDesc')}
-              </span>
+              <span className="text-content-secondary">&nbsp;— {t('onboarding.localAIDesc')}</span>
             </p>
           </div>
         </div>
@@ -131,7 +123,7 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
   // Sufficient RAM: local AI is opt-in. Present cloud as the primary path and
   // local AI as an explicit choice for users who want full privacy.
   return (
-    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
+    <div className="rounded-2xl border border-line bg-surface p-8 shadow-soft animate-fade-up">
       <div className="flex flex-col items-center mb-5">
         <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 dark:bg-primary-500/15 mb-3">
           <svg
@@ -147,37 +139,27 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
             />
           </svg>
         </div>
-        <h1 className="text-xl font-bold mb-2 text-stone-900 dark:text-neutral-100">
-          {t('onboarding.localAI')}
-        </h1>
-        <p className="text-stone-600 dark:text-neutral-300 text-sm text-center">
-          {t('onboarding.localAIDesc')}
-        </p>
+        <h1 className="text-xl font-bold mb-2 text-content">{t('onboarding.localAI')}</h1>
+        <p className="text-content-secondary text-sm text-center">{t('onboarding.localAIDesc')}</p>
       </div>
 
       <div className="space-y-2 mb-5">
         <div className="rounded-xl border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/15 px-3 py-2">
-          <p className="text-xs text-stone-700 dark:text-neutral-200">
+          <p className="text-xs text-content-secondary">
             <span className="font-semibold">{t('onboarding.localAI')}</span>
-            <span className="text-stone-600 dark:text-neutral-300">
-              &nbsp;— {t('onboarding.localAIDesc')}
-            </span>
+            <span className="text-content-secondary">&nbsp;— {t('onboarding.localAIDesc')}</span>
           </p>
         </div>
-        <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
-          <p className="text-xs text-stone-700 dark:text-neutral-200">
+        <div className="rounded-xl border border-line bg-surface-muted px-3 py-2">
+          <p className="text-xs text-content-secondary">
             <span className="font-semibold">{t('onboarding.localAI')}</span>
-            <span className="text-stone-600 dark:text-neutral-300">
-              &nbsp;— {t('onboarding.localAIDesc')}
-            </span>
+            <span className="text-content-secondary">&nbsp;— {t('onboarding.localAIDesc')}</span>
           </p>
         </div>
-        <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
-          <p className="text-xs text-stone-700 dark:text-neutral-200">
+        <div className="rounded-xl border border-line bg-surface-muted px-3 py-2">
+          <p className="text-xs text-content-secondary">
             <span className="font-semibold">{t('common.refresh')}</span>
-            <span className="text-stone-600 dark:text-neutral-300">
-              &nbsp;— {t('onboarding.localAIDesc')}
-            </span>
+            <span className="text-content-secondary">&nbsp;— {t('onboarding.localAIDesc')}</span>
           </p>
         </div>
       </div>
diff --git a/app/src/pages/onboarding/steps/ReferralApplyStep.tsx b/app/src/pages/onboarding/steps/ReferralApplyStep.tsx
index 2fd8b8006..3d1422cbf 100644
--- a/app/src/pages/onboarding/steps/ReferralApplyStep.tsx
+++ b/app/src/pages/onboarding/steps/ReferralApplyStep.tsx
@@ -72,14 +72,10 @@ const ReferralApplyStep = ({ onNext, onApplied }: ReferralApplyStepProps) => {
   };
 
   return (
-    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
+    <div className="rounded-2xl border border-line bg-surface p-8 shadow-soft animate-fade-up">
       <div className="text-center mb-6">
-        <h1 className="text-xl font-bold mb-2 text-stone-900 dark:text-neutral-100">
-          {t('onboarding.referral')}
-        </h1>
-        <p className="text-stone-600 dark:text-neutral-300 text-sm">
-          {t('onboarding.referralDesc')}
-        </p>
+        <h1 className="text-xl font-bold mb-2 text-content">{t('onboarding.referral')}</h1>
+        <p className="text-content-secondary text-sm">{t('onboarding.referralDesc')}</p>
       </div>
 
       {success ? (
@@ -111,7 +107,7 @@ const ReferralApplyStep = ({ onNext, onApplied }: ReferralApplyStepProps) => {
               onChange={e => setCode(e.target.value.toUpperCase())}
               onKeyDown={e => e.key === 'Enter' && void handleApply()}
               placeholder={t('rewards.referralCode')}
-              className="w-full px-4 py-3 bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 rounded-xl text-center font-mono text-lg tracking-widest text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 placeholder:tracking-normal placeholder:font-sans placeholder:text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500/50 transition-all"
+              className="w-full px-4 py-3 bg-surface-muted border border-line rounded-xl text-center font-mono text-lg tracking-widest text-content placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-content-faint placeholder:tracking-normal placeholder:font-sans placeholder:text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500/50 transition-all"
               disabled={isLoading}
             />
             {error ? <p className="text-coral-500 text-xs mt-2 text-center">{error}</p> : null}
diff --git a/app/src/pages/onboarding/steps/RuntimeChoiceStep.tsx b/app/src/pages/onboarding/steps/RuntimeChoiceStep.tsx
index 554a2e0cf..2e32488dd 100644
--- a/app/src/pages/onboarding/steps/RuntimeChoiceStep.tsx
+++ b/app/src/pages/onboarding/steps/RuntimeChoiceStep.tsx
@@ -63,10 +63,10 @@ const ChoiceCard = ({
       className={`flex h-full w-full flex-col rounded-2xl border-2 p-5 text-left transition-colors focus:outline-none ${
         selected
           ? accentClasses.selected
-          : '!border-stone-200 dark:!border-neutral-700 bg-white dark:bg-neutral-900 hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
+          : '!border-stone-200 dark:!border-neutral-700 bg-surface hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-surface-hover'
       }`}>
       <div className="flex items-start justify-between gap-3">
-        <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">{title}</h3>
+        <h3 className="text-base font-semibold text-content">{title}</h3>
         {badge ? (
           <span
             className={`rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${accentClasses.badge}`}>
@@ -74,12 +74,10 @@ const ChoiceCard = ({
           </span>
         ) : null}
       </div>
-      <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">{tagline}</p>
+      <p className="mt-1 text-xs text-content-muted">{tagline}</p>
       <ul className="mt-3 flex flex-1 flex-col gap-1.5">
         {features.map(f => (
-          <li
-            key={f}
-            className="flex items-start gap-2 text-xs text-stone-700 dark:text-neutral-200">
+          <li key={f} className="flex items-start gap-2 text-xs text-content-secondary">
             <span
               aria-hidden
               className={`mt-1 inline-block h-1.5 w-1.5 flex-none rounded-full ${accentClasses.dot}`}
@@ -120,12 +118,12 @@ const RuntimeChoiceStep = ({ onNext }: RuntimeChoiceStepProps) => {
   return (
     <div
       data-testid="onboarding-runtime-choice-step"
-      className="rounded-2xl bg-white dark:bg-neutral-900 p-10 shadow-soft animate-fade-up">
+      className="rounded-2xl bg-surface p-10 shadow-soft animate-fade-up">
       <div className="text-center">
-        <h1 className="text-2xl font-display text-stone-900 dark:text-neutral-100 mb-2 leading-tight">
+        <h1 className="text-2xl font-title text-content mb-2 leading-tight">
           {t('onboarding.runtimeChoice.title')}
         </h1>
-        <p className="text-stone-500 dark:text-neutral-400 text-sm leading-relaxed">
+        <p className="text-content-muted text-sm leading-relaxed">
           {t('onboarding.runtimeChoice.subtitle')}
         </p>
       </div>
diff --git a/app/src/pages/onboarding/steps/SkillsStep.tsx b/app/src/pages/onboarding/steps/SkillsStep.tsx
index 86ef1823a..690667272 100644
--- a/app/src/pages/onboarding/steps/SkillsStep.tsx
+++ b/app/src/pages/onboarding/steps/SkillsStep.tsx
@@ -64,7 +64,7 @@ function statusColor(state: ReturnType<typeof deriveComposioState>): string {
     case 'error':
       return 'text-coral-600 dark:text-coral-300';
     default:
-      return 'text-stone-400 dark:text-neutral-500';
+      return 'text-content-faint';
   }
 }
 
@@ -100,12 +100,10 @@ const SkillsStep = ({ onNext, onBack: _onBack }: SkillsStepProps) => {
   };
 
   return (
-    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
+    <div className="rounded-2xl border border-line bg-surface p-8 shadow-soft animate-fade-up">
       <div className="text-center mb-4">
-        <h1 className="text-xl font-bold mb-2 text-stone-900 dark:text-neutral-100">
-          {t('skills.connect')}
-        </h1>
-        <p className="text-stone-600 dark:text-neutral-300 text-sm">{t('skills.available')}</p>
+        <h1 className="text-xl font-bold mb-2 text-content">{t('skills.connect')}</h1>
+        <p className="text-content-secondary text-sm">{t('skills.available')}</p>
       </div>
 
       <div className="mb-4 space-y-2">
@@ -124,14 +122,14 @@ const SkillsStep = ({ onNext, onBack: _onBack }: SkillsStepProps) => {
             type="button"
             onClick={() => setActiveToolkit(gmailMeta)}
             data-testid="onboarding-skills-gmail-button"
-            className="w-full flex items-center gap-3 rounded-xl border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60 text-left">
+            className="w-full flex items-center gap-3 rounded-xl border border-line-subtle bg-surface p-3 transition-colors hover:bg-surface-hover text-left">
             <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center text-lg">
               {gmailMeta.icon}
             </div>
 
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2">
-                <span className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                <span className="truncate text-sm font-semibold text-content">
                   {gmailMeta.name}
                 </span>
                 {statusLabel(gmailState, t) && (
@@ -145,7 +143,7 @@ const SkillsStep = ({ onNext, onBack: _onBack }: SkillsStepProps) => {
                   </>
                 )}
               </div>
-              <p className="mt-0.5 line-clamp-1 text-xs leading-relaxed text-stone-500 dark:text-neutral-400">
+              <p className="mt-0.5 line-clamp-1 text-xs leading-relaxed text-content-muted">
                 {gmailMeta.description}
               </p>
             </div>
@@ -169,8 +167,8 @@ const SkillsStep = ({ onNext, onBack: _onBack }: SkillsStepProps) => {
           </button>
         )}
 
-        <div className="rounded-xl border border-stone-100 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5 text-center">
-          <p className="text-xs text-stone-400 dark:text-neutral-500">{t('skills.available')}</p>
+        <div className="rounded-xl border border-line-subtle bg-surface-muted px-3 py-2.5 text-center">
+          <p className="text-xs text-content-faint">{t('skills.available')}</p>
         </div>
       </div>
 
diff --git a/app/src/pages/onboarding/steps/WelcomeStep.tsx b/app/src/pages/onboarding/steps/WelcomeStep.tsx
index e129b2c6a..0d7bf7b0e 100644
--- a/app/src/pages/onboarding/steps/WelcomeStep.tsx
+++ b/app/src/pages/onboarding/steps/WelcomeStep.tsx
@@ -11,13 +11,13 @@ const WelcomeStep = ({ onNext }: WelcomeStepProps) => {
   return (
     <div
       data-testid="onboarding-welcome-step"
-      className="rounded-2xl bg-white dark:bg-neutral-900 p-10 shadow-soft animate-fade-up">
+      className="rounded-2xl bg-surface p-10 shadow-soft animate-fade-up">
       <div className="flex flex-col items-center text-center">
         <img src="/logo.png" alt="OpenHuman" className="w-20 h-20 rounded-2xl mb-5" />
-        <h1 className="text-3xl font-display text-stone-900 dark:text-neutral-100 mb-3 leading-tight">
+        <h1 className="text-3xl font-title text-content mb-3 leading-tight">
           {t('onboarding.welcome')}
         </h1>
-        <p className="text-stone-500 dark:text-neutral-400 text-sm leading-relaxed max-w-sm">
+        <p className="text-content-muted text-sm leading-relaxed max-w-sm">
           {t('onboarding.welcomeDesc')}
         </p>
       </div>
diff --git a/app/src/pages/settings/voice/PttSettingsPanel.tsx b/app/src/pages/settings/voice/PttSettingsPanel.tsx
index 474459bc9..024286e7d 100644
--- a/app/src/pages/settings/voice/PttSettingsPanel.tsx
+++ b/app/src/pages/settings/voice/PttSettingsPanel.tsx
@@ -194,11 +194,11 @@ const PttSettingsPanel = () => {
                 aria-label={t('pttSettings.shortcutLabel')}
                 onKeyDown={handleShortcutKeyDown}
                 onFocus={() => setCaptureError(null)}
-                className="w-full rounded-md border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-neutral-800 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
+                className="w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-content placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
               />
               {!shortcut && !captureError && (
                 <p
-                  className="text-[11px] text-neutral-500 dark:text-neutral-400 mt-0.5"
+                  className="text-[11px] text-content-muted mt-0.5"
                   data-testid="ptt-shortcut-unset-hint">
                   {t('pttSettings.shortcutUnsetHint')}
                 </p>
diff --git a/app/src/providers/ThemeProvider.test.tsx b/app/src/providers/ThemeProvider.test.tsx
index 3d2536834..85b7856ed 100644
--- a/app/src/providers/ThemeProvider.test.tsx
+++ b/app/src/providers/ThemeProvider.test.tsx
@@ -29,4 +29,37 @@ describe('<ThemeProvider />', () => {
 
     expect(getByText('hello')).toBeInTheDocument();
   });
+
+  it('applies an active custom theme — colour vars, font vars, and .dark', () => {
+    renderWithProviders(
+      <ThemeProvider>
+        <span>themed</span>
+      </ThemeProvider>,
+      {
+        preloadedState: {
+          theme: {
+            mode: 'dark',
+            tabBarLabels: 'hover',
+            fontSize: 'medium',
+            activeThemeId: 'custom-1',
+            customThemes: [
+              {
+                id: 'custom-1',
+                name: 'C',
+                isDark: true,
+                builtIn: false,
+                colors: { surface: '1 2 3' },
+                fonts: { body: 'TestFont, sans-serif' },
+              },
+            ],
+          },
+        },
+      }
+    );
+
+    const root = document.documentElement;
+    expect(root.classList.contains('dark')).toBe(true);
+    expect(root.style.getPropertyValue('--surface')).toBe('1 2 3');
+    expect(root.style.getPropertyValue('--font-body')).toBe('TestFont, sans-serif');
+  });
 });
diff --git a/app/src/providers/ThemeProvider.tsx b/app/src/providers/ThemeProvider.tsx
index 8ba804663..0314c4ec8 100644
--- a/app/src/providers/ThemeProvider.tsx
+++ b/app/src/providers/ThemeProvider.tsx
@@ -1,26 +1,81 @@
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useCallback, useEffect, useRef } from 'react';
 
+import { findFamily, resolveFamilyVariant } from '../lib/theme/presets';
+import type { Theme } from '../lib/theme/types';
 import { useAppSelector } from '../store/hooks';
-import { FONT_SIZE_PX, resolveTheme, type ThemeMode } from '../store/themeSlice';
+import {
+  FONT_SIZE_PX,
+  selectActiveFamilyId,
+  selectEffectiveTheme,
+  selectThemeVariant,
+} from '../store/themeSlice';
 
 /**
- * Syncs the Redux `theme` slice to the root `<html>` element:
+ * Applies the active {@link Theme} to the root `<html>` element:
  *
- * - `theme.mode` → the `<html>` class list so Tailwind's `darkMode: 'class'`
- *   and the `:root.dark` CSS variable block in theme.css activate together.
- *   Mode = `system` also subscribes to `prefers-color-scheme` so OS-level theme
- *   flips propagate live without a reload.
- * - `theme.fontSize` (issue #3120) → the `<html>` inline `font-size`. Because
- *   Tailwind's text scale is rem-based and `:root` is 16px, scaling the root
- *   font-size scales every text utility app-wide (chat messages, composer, UI
- *   chrome) independently of the OS / system font setting.
+ * - Writes each colour token override as an inline `--<key>` CSS variable and
+ *   each font role as `--font-<role>`. Anything the theme omits falls through to
+ *   the Light/Dark defaults in `styles/tokens.css`. Variables set by a previous
+ *   theme but absent from the new one are removed, so switching themes never
+ *   leaks stale overrides.
+ * - Toggles the `.dark` class from `theme.isDark` so the tokens.css dark base
+ *   and any remaining `dark:` utilities activate together.
+ * - `theme.mode === system` (active id `system`) also subscribes to
+ *   `prefers-color-scheme` so OS-level flips re-apply live without a reload.
+ * - `theme.fontSize` → the `<html>` inline `font-size` (rem-based Tailwind text
+ *   utilities scale off this), unchanged from before.
  */
 const ThemeProvider = ({ children }: { children: ReactNode }) => {
-  const mode = useAppSelector(state => state.theme.mode) as ThemeMode;
   const fontSize = useAppSelector(state => state.theme.fontSize);
+  const themeVariant = useAppSelector(selectThemeVariant);
+  const activeFamilyId = useAppSelector(selectActiveFamilyId);
+  const effectiveTheme = useAppSelector(selectEffectiveTheme);
 
-  // Apply the global font size to <html>. rem-based Tailwind utilities scale
-  // off this, so a single inline style flows through the whole tree.
+  // Track which inline vars we set last time so we can clear stale ones.
+  const appliedRef = useRef<{ colors: string[]; fonts: string[] }>({ colors: [], fonts: [] });
+
+  const applyTheme = useCallback((theme: Theme) => {
+    if (typeof document === 'undefined') return;
+    const root = document.documentElement;
+
+    if (theme.isDark) root.classList.add('dark');
+    else root.classList.remove('dark');
+    root.style.colorScheme = theme.isDark ? 'dark' : 'light';
+
+    const prev = appliedRef.current;
+    for (const key of prev.colors) {
+      if (!(key in theme.colors)) root.style.removeProperty(`--${key}`);
+    }
+    for (const role of prev.fonts) {
+      if (!theme.fonts[role as keyof typeof theme.fonts]) {
+        root.style.removeProperty(`--font-${role}`);
+      }
+    }
+
+    for (const [key, value] of Object.entries(theme.colors)) {
+      root.style.setProperty(`--${key}`, value);
+    }
+    for (const [role, stack] of Object.entries(theme.fonts)) {
+      if (stack) root.style.setProperty(`--font-${role}`, stack);
+    }
+
+    // Optional decorative canvas gradient (behind all surfaces).
+    if (theme.gradient?.canvas) {
+      root.style.setProperty('--app-gradient', theme.gradient.canvas);
+    } else {
+      root.style.removeProperty('--app-gradient');
+    }
+
+    appliedRef.current = { colors: Object.keys(theme.colors), fonts: Object.keys(theme.fonts) };
+    console.debug('[theme] applied', {
+      id: theme.id,
+      isDark: theme.isDark,
+      colorOverrides: Object.keys(theme.colors).length,
+      fontOverrides: Object.keys(theme.fonts).length,
+    });
+  }, []);
+
+  // Apply the global font size to <html>.
   useEffect(() => {
     if (typeof document === 'undefined') return;
     const px = FONT_SIZE_PX[fontSize] ?? FONT_SIZE_PX.medium;
@@ -28,33 +83,31 @@ const ThemeProvider = ({ children }: { children: ReactNode }) => {
     document.documentElement.style.fontSize = px;
   }, [fontSize]);
 
+  // Apply the active theme whenever it changes.
   useEffect(() => {
-    const apply = () => {
-      const root = document.documentElement;
-      const resolved = resolveTheme(mode);
-      if (resolved === 'dark') {
-        root.classList.add('dark');
-      } else {
-        root.classList.remove('dark');
-      }
-      root.style.colorScheme = resolved;
-    };
+    applyTheme(effectiveTheme);
+  }, [effectiveTheme, applyTheme]);
 
-    apply();
-
-    if (mode !== 'system') return;
+  // When the active family follows the OS preference (Auto variant), re-apply on
+  // system light/dark flips. Resolves the *active family's* variant (not just
+  // the classic preset), and stays inert for explicit light/dark or a custom
+  // theme (selectActiveFamilyId is '' for custom selections).
+  useEffect(() => {
+    if (themeVariant !== 'system' || !activeFamilyId) return;
     if (typeof window === 'undefined' || !window.matchMedia) return;
     const mq = window.matchMedia('(prefers-color-scheme: dark)');
-    const listener = () => apply();
-    // Safari < 14 uses addListener/removeListener (the deprecated API). Guard
-    // for both so we don't ship a broken sync on older webviews.
+    const listener = () => {
+      const family = findFamily(activeFamilyId) ?? findFamily('classic');
+      if (family) applyTheme(resolveFamilyVariant(family, mq.matches ? 'dark' : 'light'));
+    };
     if (mq.addEventListener) {
       mq.addEventListener('change', listener);
       return () => mq.removeEventListener('change', listener);
     }
+    // Safari < 14 fallback.
     mq.addListener(listener);
     return () => mq.removeListener(listener);
-  }, [mode]);
+  }, [themeVariant, activeFamilyId, applyTheme]);
 
   return <>{children}</>;
 };
diff --git a/app/src/store/index.ts b/app/src/store/index.ts
index cb0019d41..cda735b95 100644
--- a/app/src/store/index.ts
+++ b/app/src/store/index.ts
@@ -105,6 +105,9 @@ const themePersistConfig = {
     'agentMessageViewMode',
     'developerMode',
     'hideAgentInsights',
+    'activeThemeId',
+    'themeVariant',
+    'customThemes',
   ],
 };
 const persistedThemeReducer = persistReducer(themePersistConfig, themeReducer);
diff --git a/app/src/store/themeSlice.test.ts b/app/src/store/themeSlice.test.ts
index 90e7426df..3deacacad 100644
--- a/app/src/store/themeSlice.test.ts
+++ b/app/src/store/themeSlice.test.ts
@@ -1,16 +1,35 @@
+import { REHYDRATE } from 'redux-persist';
 import { describe, expect, it } from 'vitest';
 
+import type { Theme } from '../lib/theme/types';
 import themeReducer, {
+  deleteCustomTheme,
   FONT_SIZE_PX,
   type FontSize,
+  resetActiveTheme,
+  selectEffectiveTheme,
   selectHideAgentInsights,
+  setActiveTheme,
   setAgentMessageViewMode,
+  setFontRole,
   setFontSize,
   setHideAgentInsights,
   setTabBarLabels,
   setThemeMode,
+  setThemeToken,
+  upsertCustomTheme,
 } from './themeSlice';
 
+const customTheme = (overrides: Partial<Theme> = {}): Theme => ({
+  id: 'custom-1',
+  name: 'My theme',
+  isDark: false,
+  builtIn: false,
+  colors: {},
+  fonts: {},
+  ...overrides,
+});
+
 describe('themeSlice', () => {
   it('defaults fontSize to medium', () => {
     const state = themeReducer(undefined, { type: '@@INIT' });
@@ -42,6 +61,10 @@ describe('themeSlice', () => {
       agentMessageViewMode: 'text',
       developerMode: false,
       hideAgentInsights: false,
+      // setThemeMode('dark') syncs the variant; the active family is unchanged.
+      activeThemeId: 'classic',
+      themeVariant: 'dark',
+      customThemes: [],
     });
   });
 
@@ -73,4 +96,132 @@ describe('themeSlice', () => {
   it('keeps medium aligned with the historical 16px root size', () => {
     expect(FONT_SIZE_PX.medium).toBe('16px');
   });
+
+  describe('runtime themes', () => {
+    it('defaults to the classic family with the system variant', () => {
+      const state = themeReducer(undefined, { type: '@@INIT' });
+      expect(state.activeThemeId).toBe('classic');
+      expect(state.themeVariant).toBe('system');
+      expect(state.customThemes).toEqual([]);
+    });
+
+    it('setThemeMode keeps mode and themeVariant in sync (family unchanged)', () => {
+      let state = themeReducer(undefined, { type: '@@INIT' });
+      state = themeReducer(state, setActiveTheme('ocean'));
+      state = themeReducer(state, setThemeMode('light'));
+      expect(state.themeVariant).toBe('light');
+      expect(state.activeThemeId).toBe('ocean'); // family preserved
+      state = themeReducer(state, setThemeMode('system'));
+      expect(state.themeVariant).toBe('system');
+    });
+
+    it('migrates legacy persisted mode into themeVariant on rehydrate', () => {
+      const state = themeReducer(undefined, {
+        type: REHYDRATE,
+        key: 'theme',
+        payload: { mode: 'dark' },
+      } as never);
+      expect(state.themeVariant).toBe('dark');
+      expect(selectEffectiveTheme({ theme: state }).id).toBe('dark');
+    });
+
+    it('leaves explicit persisted themeVariant for redux-persist reconciliation', () => {
+      const state = themeReducer(undefined, {
+        type: REHYDRATE,
+        key: 'theme',
+        payload: { mode: 'dark', themeVariant: 'light' },
+      } as never);
+      expect(state.themeVariant).toBe('system');
+    });
+
+    it('upserts a custom theme and makes it active', () => {
+      let state = themeReducer(undefined, { type: '@@INIT' });
+      state = themeReducer(state, upsertCustomTheme(customTheme()));
+      expect(state.customThemes).toHaveLength(1);
+      expect(state.activeThemeId).toBe('custom-1');
+    });
+
+    it('edits colour tokens and font roles only on the active custom theme', () => {
+      let state = themeReducer(undefined, { type: '@@INIT' });
+      state = themeReducer(state, upsertCustomTheme(customTheme()));
+      state = themeReducer(state, setThemeToken({ key: 'surface', value: '10 20 30' }));
+      state = themeReducer(state, setFontRole({ role: 'body', stack: 'Comic Sans' }));
+      expect(state.customThemes[0].colors.surface).toBe('10 20 30');
+      expect(state.customThemes[0].fonts.body).toBe('Comic Sans');
+    });
+
+    it('auto-forks a custom theme when editing a built-in preset', () => {
+      let state = themeReducer(undefined, { type: '@@INIT' });
+      state = themeReducer(state, setActiveTheme('dark'));
+      state = themeReducer(state, setThemeToken({ key: 'surface', value: '0 0 0' }));
+      expect(state.customThemes).toHaveLength(1);
+      expect(state.customThemes[0].id).toBe('custom-dark');
+      expect(state.activeThemeId).toBe('custom-dark');
+      expect(state.customThemes[0].colors.surface).toBe('0 0 0');
+      // A second edit reuses the same fork (no duplicate).
+      state = themeReducer(state, setThemeToken({ key: 'content', value: '1 1 1' }));
+      expect(state.customThemes).toHaveLength(1);
+    });
+
+    it('resets overrides on the active custom theme', () => {
+      let state = themeReducer(undefined, { type: '@@INIT' });
+      state = themeReducer(state, upsertCustomTheme(customTheme({ colors: { surface: '1 2 3' } })));
+      state = themeReducer(state, resetActiveTheme());
+      expect(state.customThemes[0].colors).toEqual({});
+    });
+
+    it('reset restores the source preset base for a preset fork (not empty)', () => {
+      let state = themeReducer(undefined, { type: '@@INIT' });
+      // Fork Ocean (light) by editing it, then reset.
+      state = themeReducer(state, setActiveTheme('ocean'));
+      state = themeReducer(state, setThemeToken({ key: 'surface', value: '0 0 0' }));
+      const fork = state.customThemes[0];
+      expect(fork.basedOn).toBe('ocean');
+      state = themeReducer(state, resetActiveTheme());
+      // Ocean's base palette is restored (it defines surface-canvas), not wiped.
+      expect(state.customThemes[0].colors['surface-canvas']).toBe('233 242 252');
+      expect(state.customThemes[0].colors.surface).not.toBe('0 0 0');
+    });
+
+    it('deletes a custom theme and falls back to the default family when active', () => {
+      let state = themeReducer(undefined, { type: '@@INIT' });
+      state = themeReducer(state, upsertCustomTheme(customTheme()));
+      state = themeReducer(state, deleteCustomTheme('custom-1'));
+      expect(state.customThemes).toEqual([]);
+      expect(state.activeThemeId).toBe('classic');
+    });
+
+    it('selectEffectiveTheme resolves a custom theme by id', () => {
+      let state = themeReducer(undefined, { type: '@@INIT' });
+      state = themeReducer(state, upsertCustomTheme(customTheme({ id: 'custom-x', name: 'X' })));
+      expect(selectEffectiveTheme({ theme: state }).id).toBe('custom-x');
+    });
+
+    it('applies the selected light/dark variant to custom themes', () => {
+      let state = themeReducer(undefined, { type: '@@INIT' });
+      state = themeReducer(
+        state,
+        upsertCustomTheme(
+          customTheme({ id: 'custom-x', name: 'X', isDark: false, colors: { surface: '1 2 3' } })
+        )
+      );
+
+      state = themeReducer(state, setThemeMode('dark'));
+      expect(selectEffectiveTheme({ theme: state })).toMatchObject({
+        id: 'custom-x',
+        isDark: true,
+        colors: { surface: '1 2 3' },
+      });
+
+      state = themeReducer(state, setThemeMode('light'));
+      expect(selectEffectiveTheme({ theme: state }).isDark).toBe(false);
+    });
+
+    it('selectEffectiveTheme falls back to a preset for an unknown id', () => {
+      let state = themeReducer(undefined, { type: '@@INIT' });
+      state = themeReducer(state, setActiveTheme('does-not-exist'));
+      // Falls back to the Light preset rather than leaving the UI unthemed.
+      expect(selectEffectiveTheme({ theme: state }).id).toBe('light');
+    });
+  });
 });
diff --git a/app/src/store/themeSlice.ts b/app/src/store/themeSlice.ts
index f96f8ccad..7acaeb08b 100644
--- a/app/src/store/themeSlice.ts
+++ b/app/src/store/themeSlice.ts
@@ -1,6 +1,25 @@
-import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import { REHYDRATE } from 'redux-persist';
+
+import {
+  familyForThemeId,
+  findFamily,
+  findPreset,
+  PRESET_THEMES,
+  resolveFamilyVariant,
+  THEME_FAMILIES,
+} from '../lib/theme/presets';
+import type { FontRole } from '../lib/theme/tokens';
+import type { Theme, ThemeFamily } from '../lib/theme/types';
 
 export type ThemeMode = 'light' | 'dark' | 'system';
+/** Theme variant preference: explicit light/dark, or follow the OS. */
+export type ThemeVariant = 'light' | 'dark' | 'system';
+
+/** Sentinel active-theme id meaning "follow OS light/dark preference". */
+export const SYSTEM_THEME_ID = 'system';
+/** Default theme family selected on first run. */
+export const DEFAULT_FAMILY_ID = 'classic';
 export type TabBarLabels = 'hover' | 'always';
 export type AgentMessageViewMode = 'bubbles' | 'text';
 /**
@@ -45,6 +64,22 @@ interface ThemeState {
    * process Source" affordance, which open the existing side panel.
    */
   hideAgentInsights: boolean;
+  /**
+   * Active selection: a theme **family** id (`classic`, `ocean`, `matrix`,
+   * `hal9000`, `sepia`) or a custom theme id. Combined with
+   * {@link ThemeState.themeVariant} to resolve the concrete theme. Legacy values
+   * (`light`/`dark`/`system`/`ocean`/`midnight`) from older persisted state are
+   * normalized by {@link selectEffectiveTheme}.
+   */
+  activeThemeId: string;
+  /**
+   * Which variant of the active family to apply: explicit `light`/`dark` or
+   * `system` (follow OS). Mirrors {@link ThemeState.mode} so the simple
+   * Appearance toggle and the Theme Studio variant control stay in sync.
+   */
+  themeVariant: ThemeVariant;
+  /** User-authored themes (full or partial token overrides). */
+  customThemes: Theme[];
 }
 
 const initialState: ThemeState = {
@@ -54,6 +89,9 @@ const initialState: ThemeState = {
   agentMessageViewMode: 'text',
   developerMode: false,
   hideAgentInsights: false,
+  activeThemeId: DEFAULT_FAMILY_ID,
+  themeVariant: 'system',
+  customThemes: [],
 };
 
 const themeSlice = createSlice({
@@ -61,7 +99,75 @@ const themeSlice = createSlice({
   initialState,
   reducers: {
     setThemeMode(state, action: PayloadAction<ThemeMode>) {
+      // The simple Appearance light/dark/system toggle drives the variant of the
+      // currently-selected family (it no longer forces the Classic family).
       state.mode = action.payload;
+      state.themeVariant = action.payload;
+    },
+    /** Set the light/dark/system variant of the active family. */
+    setThemeVariant(state, action: PayloadAction<ThemeVariant>) {
+      state.themeVariant = action.payload;
+      state.mode = action.payload;
+    },
+    /** Select a theme family (or a custom theme id). */
+    setActiveFamily(state, action: PayloadAction<string>) {
+      state.activeThemeId = action.payload;
+    },
+    /** Back-compat alias: select any family or custom theme by id. */
+    setActiveTheme(state, action: PayloadAction<string>) {
+      state.activeThemeId = action.payload;
+    },
+    /** Insert or replace a custom theme (by id) and make it active. */
+    upsertCustomTheme(state, action: PayloadAction<Theme>) {
+      const theme = action.payload;
+      const idx = state.customThemes.findIndex(t => t.id === theme.id);
+      if (idx >= 0) state.customThemes[idx] = theme;
+      else state.customThemes.push(theme);
+      state.activeThemeId = theme.id;
+    },
+    /** Remove a custom theme; fall back to the default family if it was active. */
+    deleteCustomTheme(state, action: PayloadAction<string>) {
+      state.customThemes = state.customThemes.filter(t => t.id !== action.payload);
+      if (state.activeThemeId === action.payload) {
+        state.activeThemeId = DEFAULT_FAMILY_ID;
+      }
+    },
+    /** Set a single colour token (`"R G B"`); auto-forks a preset to custom. */
+    setThemeToken(state, action: PayloadAction<{ key: string; value: string }>) {
+      const theme = ensureEditableCustom(state);
+      theme.colors[action.payload.key] = action.payload.value;
+    },
+    /** Set a single font role (CSS stack); auto-forks a preset to custom. */
+    setFontRole(state, action: PayloadAction<{ role: FontRole; stack: string }>) {
+      const theme = ensureEditableCustom(state);
+      theme.fonts[action.payload.role] = action.payload.stack;
+    },
+    /** Patch the backdrop (mesh/solid/image, dots); auto-forks a preset. */
+    setThemeBackdrop(
+      state,
+      action: PayloadAction<{
+        kind?: 'mesh' | 'solid' | 'image';
+        imageUrl?: string;
+        dots?: boolean;
+      }>
+    ) {
+      const theme = ensureEditableCustom(state);
+      const prev = theme.backdrop ?? { kind: 'mesh' as const };
+      theme.backdrop = { ...prev, ...action.payload, kind: action.payload.kind ?? prev.kind };
+    },
+    /**
+     * Clear the user's edits on the active custom theme. For a theme forked
+     * from a preset, restore that preset's base palette/fonts (via `basedOn`)
+     * rather than the generic Light/Dark defaults; otherwise clear to empty.
+     */
+    resetActiveTheme(state) {
+      const theme = state.customThemes.find(t => t.id === state.activeThemeId);
+      if (!theme) return;
+      const base = theme.basedOn ? findPreset(theme.basedOn) : undefined;
+      theme.colors = base ? { ...base.colors } : {};
+      theme.fonts = base ? { ...base.fonts } : {};
+      theme.gradient = base?.gradient ? { ...base.gradient } : undefined;
+      theme.backdrop = base?.backdrop ? { ...base.backdrop } : undefined;
     },
     setTabBarLabels(state, action: PayloadAction<TabBarLabels>) {
       state.tabBarLabels = action.payload;
@@ -79,18 +185,161 @@ const themeSlice = createSlice({
       state.hideAgentInsights = action.payload;
     },
   },
+  extraReducers: builder => {
+    builder.addCase(REHYDRATE, (state, action) => {
+      const rehydrateAction = action as {
+        type: typeof REHYDRATE;
+        key?: string;
+        payload?: Partial<ThemeState>;
+      };
+      if (rehydrateAction.key !== 'theme') return;
+      const inbound = rehydrateAction.payload;
+      if (!inbound || typeof inbound !== 'object') return;
+      if (
+        !Object.prototype.hasOwnProperty.call(inbound, 'themeVariant') &&
+        isThemeMode(inbound.mode)
+      ) {
+        state.themeVariant = inbound.mode;
+        console.debug('[theme] migrated persisted mode to themeVariant', { mode: inbound.mode });
+      }
+    });
+  },
 });
 
 export const {
   setThemeMode,
+  setThemeVariant,
+  setActiveFamily,
   setTabBarLabels,
   setFontSize,
   setAgentMessageViewMode,
   setDeveloperMode,
   setHideAgentInsights,
+  setActiveTheme,
+  upsertCustomTheme,
+  deleteCustomTheme,
+  setThemeToken,
+  setFontRole,
+  setThemeBackdrop,
+  resetActiveTheme,
 } = themeSlice.actions;
 export default themeSlice.reducer;
 
+/** Built-in theme families (static). */
+export const selectThemeFamilies = (): ThemeFamily[] => THEME_FAMILIES;
+
+/**
+ * All selectable concrete themes: built-in variants followed by user themes.
+ * Memoized so the reference is stable while `customThemes` is unchanged.
+ */
+export const selectAllThemes = createSelector(
+  (state: { theme: ThemeState }) => state.theme.customThemes,
+  (customThemes): Theme[] => [...PRESET_THEMES, ...(customThemes ?? [])]
+);
+
+export const selectActiveThemeId = (state: { theme?: ThemeState }): string =>
+  state.theme?.activeThemeId ?? DEFAULT_FAMILY_ID;
+
+export const selectThemeVariant = (state: { theme?: ThemeState }): ThemeVariant =>
+  state.theme?.themeVariant ?? state.theme?.mode ?? 'system';
+
+export const selectCustomThemes = (state: { theme?: ThemeState }): Theme[] =>
+  state.theme?.customThemes ?? [];
+
+/**
+ * Normalize the active selection to a `{ family, variant, custom }` shape,
+ * tolerating legacy persisted ids (`light`/`dark`/`system`/`ocean`/`midnight`).
+ * Returns `custom` set when a user theme is selected.
+ */
+function resolveSelection(ts: ThemeState): {
+  family?: ThemeFamily;
+  variant: ThemeVariant;
+  custom?: Theme;
+} {
+  const sel = ts.activeThemeId ?? DEFAULT_FAMILY_ID;
+  const variantPref = ts.themeVariant ?? ts.mode ?? 'system';
+
+  const custom = ts.customThemes?.find(t => t.id === sel);
+  if (custom) return { custom, variant: variantPref };
+
+  // Current family-id selection.
+  const direct = findFamily(sel);
+  if (direct) return { family: direct, variant: variantPref };
+
+  // Legacy concrete-variant / sentinel ids.
+  if (sel === SYSTEM_THEME_ID) return { family: findFamily('classic'), variant: 'system' };
+  if (sel === 'midnight') return { family: findFamily('ocean'), variant: 'dark' };
+  const owner = familyForThemeId(sel);
+  if (owner) return { family: owner, variant: owner.dark?.id === sel ? 'dark' : 'light' };
+  return { family: findFamily('classic'), variant: variantPref };
+}
+
+function isThemeMode(value: unknown): value is ThemeMode {
+  return value === 'light' || value === 'dark' || value === 'system';
+}
+
+/** The active family id (`''` when a custom theme is selected). */
+export function selectActiveFamilyId(state: { theme?: ThemeState }): string {
+  if (!state.theme) return DEFAULT_FAMILY_ID;
+  const { family, custom } = resolveSelection(state.theme);
+  if (custom) return '';
+  return family?.id ?? DEFAULT_FAMILY_ID;
+}
+
+/**
+ * Return the active custom theme for editing. If a preset (or legacy id) is
+ * active, transparently fork the current effective theme into a custom theme,
+ * make it active, and return it — so editing a preset "just works" and the
+ * original preset stays pristine. Idempotent per source theme (reuses
+ * `custom-<sourceId>`), so rapid edits don't spawn duplicates.
+ */
+function ensureEditableCustom(ts: ThemeState): Theme {
+  const existingActive = ts.customThemes.find(t => t.id === ts.activeThemeId);
+  if (existingActive) return existingActive;
+
+  const base = effectiveThemeFromState(ts);
+  const id = `custom-${base.id}`;
+  let theme = ts.customThemes.find(t => t.id === id);
+  if (!theme) {
+    theme = {
+      id,
+      name: `${base.name} (custom)`,
+      isDark: base.isDark,
+      builtIn: false,
+      basedOn: base.id,
+      colors: { ...base.colors },
+      fonts: { ...base.fonts },
+      gradient: base.gradient ? { ...base.gradient } : undefined,
+      backdrop: base.backdrop ? { ...base.backdrop } : undefined,
+    };
+    ts.customThemes.push(theme);
+  }
+  ts.activeThemeId = id;
+  return theme;
+}
+
+/** Resolve a {@link ThemeState} to the concrete {@link Theme} to apply. */
+function effectiveThemeFromState(ts: ThemeState): Theme {
+  const { family, variant, custom } = resolveSelection(ts);
+  const resolved = variant === 'system' ? resolveTheme('system') : variant;
+  if (custom) {
+    const isDark = resolved === 'dark';
+    return custom.isDark === isDark ? custom : { ...custom, isDark };
+  }
+  const fam = family ?? findFamily('classic')!;
+  return resolveFamilyVariant(fam, resolved);
+}
+
+/**
+ * Resolve the effective {@link Theme} to apply right now. A custom theme is
+ * returned directly; otherwise the active family's variant is resolved, with
+ * `system` consulting `prefers-color-scheme`.
+ */
+export function selectEffectiveTheme(state: { theme?: ThemeState }): Theme {
+  if (!state.theme) return findFamily('classic')!.light!;
+  return effectiveThemeFromState(state.theme);
+}
+
 /**
  * Selector for the persisted `hideAgentInsights` preference. Falls back to
  * `false` so existing persisted state (written before this field existed)
diff --git a/app/src/styles/theme.css b/app/src/styles/theme.css
index bf77a5e7e..a3869125f 100644
--- a/app/src/styles/theme.css
+++ b/app/src/styles/theme.css
@@ -558,60 +558,34 @@ body::before {
 /* ============================================
    Light Mode (Default)
    ============================================ */
+/*
+ * The legacy --color-* semantic tokens are now thin aliases over the canonical
+ * channel tokens in styles/tokens.css. Because those canonical vars already
+ * flip between :root and :root.dark, these aliases inherit dark mode for free —
+ * no separate dark override block is needed, and they theme along with the app.
+ */
 :root {
-  --color-background: #f5f5f5;
-  --color-surface: #ffffff;
-  --color-surface-elevated: #fafafa;
-  --color-border: #e5e5e5;
-  --color-border-subtle: #f5f5f5;
+  --color-background: rgb(var(--surface-canvas));
+  --color-surface: rgb(var(--surface));
+  --color-surface-elevated: rgb(var(--surface-muted));
+  --color-border: rgb(var(--line));
+  --color-border-subtle: rgb(var(--line-subtle));
 
-  --color-text-primary: #171717;
-  --color-text-secondary: #525252;
-  --color-text-tertiary: #737373;
-  --color-text-muted: #a3a3a3;
+  --color-text-primary: rgb(var(--content));
+  --color-text-secondary: rgb(var(--content-secondary));
+  --color-text-tertiary: rgb(var(--content-muted));
+  --color-text-muted: rgb(var(--content-faint));
 
-  --color-hover: #eff6ff;
-  --color-active: #dbeafe;
-  --color-focus: #2f6ef4;
+  --color-hover: rgb(var(--primary-50));
+  --color-active: rgb(var(--primary-100));
+  --color-focus: rgb(var(--primary-500));
 
-  --color-success: #34c759;
-  --color-warning: #e8a728;
-  --color-error: #ef4444;
-  --color-info: #2f6ef4;
-
-  /* Shadow tint used by elevated surfaces. Dark mode replaces this with a
-     softer alpha so layered cards don't turn into black holes. */
-  --shadow-tint: 0, 0, 0;
-}
-
-/* ============================================
-   Dark Mode — applied when <html class="dark">
-   ============================================ */
-:root.dark {
-  /* Page bg is darker than card/surface so elevated content (cards, menus,
-     panels) stands out against it. neutral-950 (#0a0a0a) for the page,
-     neutral-900 (#171717) for cards gives ~9% lightness delta — visible
-     but calm. */
-  --color-background: #000000;
-  --color-surface: #171717;
-  --color-surface-elevated: #1f1f1f;
-  --color-border: #2d2d2d;
-  --color-border-subtle: #1f1f1f;
-
-  --color-text-primary: #f5f5f5;
-  --color-text-secondary: #a3a3a3;
-  --color-text-tertiary: #737373;
-  --color-text-muted: #525252;
-
-  --color-hover: #1e293b;
-  --color-active: #1e3a8a;
-  --color-focus: #60a5fa;
-
-  --color-success: #4ade80;
-  --color-warning: #fbbf24;
-  --color-error: #f87171;
-  --color-info: #60a5fa;
+  --color-success: rgb(var(--sage-500));
+  --color-warning: rgb(var(--amber-500));
+  --color-error: rgb(var(--coral-500));
+  --color-info: rgb(var(--primary-500));
 
+  /* Shadow tint used by elevated surfaces. */
   --shadow-tint: 0, 0, 0;
 }
 
diff --git a/app/src/styles/tokens.css b/app/src/styles/tokens.css
new file mode 100644
index 000000000..c59b6357e
--- /dev/null
+++ b/app/src/styles/tokens.css
@@ -0,0 +1,133 @@
+/*
+ * Canonical theme tokens — the single source of truth for every themeable
+ * colour and font in the app. See gitbooks/developing/theming.md.
+ *
+ * WHY CHANNEL FORMAT: each colour is stored as a space-separated RGB triple
+ * (e.g. `255 255 255`) rather than a hex string. `tailwind.config.js` wraps
+ * every token as `rgb(var(--token) / <alpha-value>)`, so Tailwind opacity
+ * modifiers keep working (`bg-surface/50`, `bg-primary-500/10`). A hex/var
+ * swap would silently break all ~640 opacity-suffixed utilities.
+ *
+ * HOW THEMING WORKS: a "theme" is just a set of values for these vars. The
+ * defaults below are the historical Light palette; `:root.dark` holds the
+ * historical Dark palette. `ThemeProvider` writes the active theme's values
+ * as inline `--token` vars on <html>, overriding both blocks at runtime — so
+ * presets and fully-custom user themes are the same mechanism.
+ *
+ * Values here are byte-identical to the previous --cmd and --color blocks and
+ * the tailwind.config.js palette hexes, so adopting tokens is colour-neutral
+ * until a user actually changes a theme.
+ */
+
+:root {
+  /* ---- Surfaces (backgrounds) ---- */
+  --surface: 255 255 255; /* cards / panels — "secondary background" (white) */
+  --surface-canvas: 245 245 245; /* app background — "primary background" (stone-100) */
+  --surface-muted: 250 250 250; /* inputs / subtle fills (stone-50) */
+  --surface-subtle: 245 245 245; /* recessed wells (stone-100) */
+  --surface-strong: 229 229 229; /* sunken / pressed (stone-200) */
+  --surface-hover: 240 240 240; /* hover fills — distinct from white surface so
+                                   hover reads on elevated cards, not just canvas */
+  --surface-overlay: 0 0 0; /* modal scrim (used with /40../70) */
+
+  /* ---- Text ---- */
+  --content: 23 23 23; /* primary text (stone-900) */
+  --content-secondary: 82 82 82; /* secondary text (stone-600) */
+  --content-muted: 115 115 115; /* muted/labels (stone-500) */
+  --content-faint: 163 163 163; /* faint/placeholder (stone-400) */
+  --content-inverted: 255 255 255; /* text over accent fills (white) */
+
+  /* ---- Borders ---- */
+  --line: 229 229 229; /* default hairline (stone-200) */
+  --line-strong: 212 212 212; /* stronger divider (stone-300) */
+  --line-subtle: 245 245 245; /* faintest divider (stone-100) */
+
+  /* ---- Accent palette: primary (Complementary Blue) ---- */
+  --primary-50: 239 246 255;
+  --primary-100: 219 234 254;
+  --primary-200: 191 219 254;
+  --primary-300: 147 197 253;
+  --primary-400: 96 165 250;
+  --primary-500: 47 110 244;
+  --primary-600: 37 99 235;
+  --primary-700: 29 78 216;
+  --primary-800: 30 64 175;
+  --primary-900: 30 58 138;
+  --primary-950: 23 37 84;
+
+  /* ---- Accent palette: sage (Success Green) ---- */
+  --sage-50: 240 253 244;
+  --sage-100: 220 252 231;
+  --sage-200: 187 247 208;
+  --sage-300: 134 239 172;
+  --sage-400: 74 222 128;
+  --sage-500: 52 199 89;
+  --sage-600: 22 163 74;
+  --sage-700: 21 128 61;
+  --sage-800: 22 101 52;
+  --sage-900: 20 83 45;
+  --sage-950: 5 46 22;
+
+  /* ---- Accent palette: amber (Alert Orange) ---- */
+  --amber-50: 255 251 235;
+  --amber-100: 254 243 199;
+  --amber-200: 253 230 138;
+  --amber-300: 252 211 77;
+  --amber-400: 251 191 36;
+  --amber-500: 232 167 40;
+  --amber-600: 217 119 6;
+  --amber-700: 180 83 9;
+  --amber-800: 146 64 14;
+  --amber-900: 120 53 15;
+  --amber-950: 69 26 3;
+
+  /* ---- Accent palette: coral (Error Red) ---- */
+  --coral-50: 254 242 242;
+  --coral-100: 254 226 226;
+  --coral-200: 254 202 202;
+  --coral-300: 252 165 165;
+  --coral-400: 248 113 113;
+  --coral-500: 239 68 68;
+  --coral-600: 220 38 38;
+  --coral-700: 185 28 28;
+  --coral-800: 153 27 27;
+  --coral-900: 127 29 29;
+  --coral-950: 69 10 10;
+
+  /* ---- Font roles ---- */
+  --font-title: 'Cabinet Grotesk', 'Inter', -apple-system, system-ui, sans-serif;
+  --font-heading: 'Inter', 'Cabinet Grotesk', -apple-system, system-ui, sans-serif;
+  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', Courier, monospace;
+  --font-serif: 'Newsreader', Georgia, Cambria, 'Times New Roman', Times, serif;
+}
+
+:root.dark {
+  /* ---- Surfaces ---- */
+  --surface: 23 23 23; /* neutral-900 */
+  --surface-canvas: 0 0 0; /* black (historical dark --color-background) */
+  --surface-muted: 38 38 38; /* neutral-800 */
+  --surface-subtle: 38 38 38; /* neutral-800 */
+  --surface-strong: 38 38 38; /* neutral-800 */
+  --surface-hover: 38 38 38; /* neutral-800 */
+  --surface-overlay: 0 0 0;
+
+  /* ---- Text ---- */
+  --content: 245 245 245; /* neutral-100 */
+  --content-secondary: 212 212 212; /* neutral-300 */
+  --content-muted: 163 163 163; /* neutral-400 */
+  --content-faint: 115 115 115; /* neutral-500 */
+  --content-inverted: 255 255 255;
+
+  /* ---- Borders ---- */
+  --line: 38 38 38; /* neutral-800 */
+  --line-strong: 64 64 64; /* neutral-700 */
+  --line-subtle: 38 38 38; /* neutral-800 */
+
+  /*
+   * Accent palettes intentionally inherit their `:root` values under dark mode:
+   * the historical design kept primary/sage/amber/coral identical across light
+   * and dark, varying only the shade chosen per component via `dark:` utilities.
+   * Custom themes may override these per theme.
+   */
+}
diff --git a/app/src/test/mockDefaultSkillStatusHooks.ts b/app/src/test/mockDefaultSkillStatusHooks.ts
index a9593896f..f92fd607f 100644
--- a/app/src/test/mockDefaultSkillStatusHooks.ts
+++ b/app/src/test/mockDefaultSkillStatusHooks.ts
@@ -9,7 +9,7 @@ const offlineStatusBase = {
   connectionStatus: 'offline' as const,
   statusDot: 'bg-stone-400',
   statusLabel: 'Offline',
-  statusColor: 'text-stone-500',
+  statusColor: 'text-content-muted',
   ctaLabel: 'Enable',
   ctaVariant: 'sage' as const,
 };
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index 3d6489b7a..332ac7df5 100644
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -7,12 +7,17 @@ module.exports = {
   ],
   theme: {
     extend: {
-      // Premium font stack optimized for crypto professionals
+      // Font roles — each maps to a CSS variable (defined in styles/tokens.css)
+      // so themes can swap any role at runtime. The historical aliases
+      // (sans/display) point at the matching role var for backwards compat.
       fontFamily: {
-        'sans': ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
-        'display': ['Cabinet Grotesk', 'Inter', '-apple-system', 'system-ui', 'sans-serif'],
-        'mono': ['JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', 'Courier', 'monospace'],
-        'serif': ['Newsreader', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
+        'body': ['var(--font-body)'],
+        'heading': ['var(--font-heading)'],
+        'title': ['var(--font-title)'],
+        'sans': ['var(--font-body)'],
+        'display': ['var(--font-title)'],
+        'mono': ['var(--font-mono)'],
+        'serif': ['var(--font-serif)'],
       },
 
       // Elevated color system - Clean, light, professional
@@ -29,6 +34,32 @@ module.exports = {
         'cmd-accent':           'var(--cmd-accent)',
         'cmd-overlay':          'var(--cmd-overlay)',
 
+        // ── Semantic theme tokens (var-backed, themeable at runtime) ─────────
+        // Backed by channel vars in styles/tokens.css via rgb(... / <alpha-value>)
+        // so opacity modifiers (bg-surface/50) keep working. These are the
+        // canonical surface/text/border names the app migrates onto.
+        surface: {
+          DEFAULT:  'rgb(var(--surface) / <alpha-value>)',
+          canvas:   'rgb(var(--surface-canvas) / <alpha-value>)',
+          muted:    'rgb(var(--surface-muted) / <alpha-value>)',
+          subtle:   'rgb(var(--surface-subtle) / <alpha-value>)',
+          strong:   'rgb(var(--surface-strong) / <alpha-value>)',
+          hover:    'rgb(var(--surface-hover) / <alpha-value>)',
+          overlay:  'rgb(var(--surface-overlay) / <alpha-value>)',
+        },
+        content: {
+          DEFAULT:   'rgb(var(--content) / <alpha-value>)',
+          secondary: 'rgb(var(--content-secondary) / <alpha-value>)',
+          muted:     'rgb(var(--content-muted) / <alpha-value>)',
+          faint:     'rgb(var(--content-faint) / <alpha-value>)',
+          inverted:  'rgb(var(--content-inverted) / <alpha-value>)',
+        },
+        line: {
+          DEFAULT: 'rgb(var(--line) / <alpha-value>)',
+          strong:  'rgb(var(--line-strong) / <alpha-value>)',
+          subtle:  'rgb(var(--line-subtle) / <alpha-value>)',
+        },
+
         // Neutral - Light theme grayscale (from Figma design tokens)
         neutral: {
           0: '#FFFFFF',     // Base / surface
@@ -54,64 +85,65 @@ module.exports = {
           300: '#D4D4D4',   // Hover states
         },
 
-        // Primary - Complementary blue from Figma
+        // Primary - Complementary blue from Figma. Var-backed (styles/tokens.css)
+        // so the whole accent ramp is themeable without touching any classes.
         primary: {
-          50: '#EFF6FF',
-          100: '#DBEAFE',
-          200: '#BFDBFE',
-          300: '#93C5FD',
-          400: '#60A5FA',
-          500: '#2F6EF4',   // Complementary Blue (Figma)
-          600: '#2563EB',   // Gradient end
-          700: '#1D4ED8',   // Active state
-          800: '#1E40AF',
-          900: '#1E3A8A',
-          950: '#172554',
+          50:  'rgb(var(--primary-50) / <alpha-value>)',
+          100: 'rgb(var(--primary-100) / <alpha-value>)',
+          200: 'rgb(var(--primary-200) / <alpha-value>)',
+          300: 'rgb(var(--primary-300) / <alpha-value>)',
+          400: 'rgb(var(--primary-400) / <alpha-value>)',
+          500: 'rgb(var(--primary-500) / <alpha-value>)',
+          600: 'rgb(var(--primary-600) / <alpha-value>)',
+          700: 'rgb(var(--primary-700) / <alpha-value>)',
+          800: 'rgb(var(--primary-800) / <alpha-value>)',
+          900: 'rgb(var(--primary-900) / <alpha-value>)',
+          950: 'rgb(var(--primary-950) / <alpha-value>)',
         },
 
         // Sage - Success (from Figma: #34C759)
         sage: {
-          50: '#F0FDF4',
-          100: '#DCFCE7',
-          200: '#BBF7D0',
-          300: '#86EFAC',
-          400: '#4ADE80',
-          500: '#34C759',   // Success Green (Figma)
-          600: '#16A34A',
-          700: '#15803D',
-          800: '#166534',
-          900: '#14532D',
-          950: '#052E16',
+          50:  'rgb(var(--sage-50) / <alpha-value>)',
+          100: 'rgb(var(--sage-100) / <alpha-value>)',
+          200: 'rgb(var(--sage-200) / <alpha-value>)',
+          300: 'rgb(var(--sage-300) / <alpha-value>)',
+          400: 'rgb(var(--sage-400) / <alpha-value>)',
+          500: 'rgb(var(--sage-500) / <alpha-value>)',
+          600: 'rgb(var(--sage-600) / <alpha-value>)',
+          700: 'rgb(var(--sage-700) / <alpha-value>)',
+          800: 'rgb(var(--sage-800) / <alpha-value>)',
+          900: 'rgb(var(--sage-900) / <alpha-value>)',
+          950: 'rgb(var(--sage-950) / <alpha-value>)',
         },
 
         // Amber - Attention and caution (from Figma: #E8A728)
         amber: {
-          50: '#FFFBEB',
-          100: '#FEF3C7',
-          200: '#FDE68A',
-          300: '#FCD34D',
-          400: '#FBBF24',
-          500: '#E8A728',   // Alert Orange (Figma)
-          600: '#D97706',
-          700: '#B45309',
-          800: '#92400E',
-          900: '#78350F',
-          950: '#451A03',
+          50:  'rgb(var(--amber-50) / <alpha-value>)',
+          100: 'rgb(var(--amber-100) / <alpha-value>)',
+          200: 'rgb(var(--amber-200) / <alpha-value>)',
+          300: 'rgb(var(--amber-300) / <alpha-value>)',
+          400: 'rgb(var(--amber-400) / <alpha-value>)',
+          500: 'rgb(var(--amber-500) / <alpha-value>)',
+          600: 'rgb(var(--amber-600) / <alpha-value>)',
+          700: 'rgb(var(--amber-700) / <alpha-value>)',
+          800: 'rgb(var(--amber-800) / <alpha-value>)',
+          900: 'rgb(var(--amber-900) / <alpha-value>)',
+          950: 'rgb(var(--amber-950) / <alpha-value>)',
         },
 
         // Coral - Errors and dangers (from Figma: #EF4444)
         coral: {
-          50: '#FEF2F2',
-          100: '#FEE2E2',
-          200: '#FECACA',
-          300: '#FCA5A5',
-          400: '#F87171',
-          500: '#EF4444',   // Error Red (Figma)
-          600: '#DC2626',
-          700: '#B91C1C',
-          800: '#991B1B',
-          900: '#7F1D1D',
-          950: '#450A0A',
+          50:  'rgb(var(--coral-50) / <alpha-value>)',
+          100: 'rgb(var(--coral-100) / <alpha-value>)',
+          200: 'rgb(var(--coral-200) / <alpha-value>)',
+          300: 'rgb(var(--coral-300) / <alpha-value>)',
+          400: 'rgb(var(--coral-400) / <alpha-value>)',
+          500: 'rgb(var(--coral-500) / <alpha-value>)',
+          600: 'rgb(var(--coral-600) / <alpha-value>)',
+          700: 'rgb(var(--coral-700) / <alpha-value>)',
+          800: 'rgb(var(--coral-800) / <alpha-value>)',
+          900: 'rgb(var(--coral-900) / <alpha-value>)',
+          950: 'rgb(var(--coral-950) / <alpha-value>)',
         },
 
         // Stone - Neutral scale (keeping for backward compat, mapped to neutral)
diff --git a/app/test/OAuthGitHub.test.tsx b/app/test/OAuthGitHub.test.tsx
index 2b7aec5f9..34abe79d0 100644
--- a/app/test/OAuthGitHub.test.tsx
+++ b/app/test/OAuthGitHub.test.tsx
@@ -107,13 +107,14 @@ describe('OAuthProviderButton (GitHub) — rendering', () => {
 
   it('has neutral light background styling', () => {
     renderGitHubButton();
-    expect(screen.getByRole('button', { name: /github/i })).toHaveClass('bg-white');
+    // Migrated to the themeable surface token (was bg-white dark:bg-neutral-900).
+    expect(screen.getByRole('button', { name: /github/i })).toHaveClass('bg-surface');
   });
 
   it('has dark text', () => {
     const { container } = renderGitHubButton();
     const label = container.querySelector('span');
-    expect(label).toHaveClass('text-gray-900');
+    expect(label).toHaveClass('text-content');
   });
 });
 
diff --git a/app/test/OAuthTwitter.test.tsx b/app/test/OAuthTwitter.test.tsx
index 0ffc92890..34fb2934c 100644
--- a/app/test/OAuthTwitter.test.tsx
+++ b/app/test/OAuthTwitter.test.tsx
@@ -107,13 +107,14 @@ describe('OAuthProviderButton (Twitter) — rendering', () => {
 
   it('has neutral light background styling', () => {
     renderTwitterButton();
-    expect(screen.getByRole('button', { name: /twitter/i })).toHaveClass('bg-white');
+    // Migrated to the themeable surface token (was bg-white dark:bg-neutral-900).
+    expect(screen.getByRole('button', { name: /twitter/i })).toHaveClass('bg-surface');
   });
 
   it('has dark text', () => {
     const { container } = renderTwitterButton();
     const label = container.querySelector('span');
-    expect(label).toHaveClass('text-gray-900');
+    expect(label).toHaveClass('text-content');
   });
 });
 
diff --git a/gitbooks/developing/theming.md b/gitbooks/developing/theming.md
new file mode 100644
index 000000000..086e2e8a0
--- /dev/null
+++ b/gitbooks/developing/theming.md
@@ -0,0 +1,65 @@
+# Theming
+
+OpenHuman is fully re-skinnable at runtime. Colours and fonts are driven by CSS
+variables (the "tokens"), so a theme is just a set of values for those variables.
+This page is the contributor reference for the token system.
+
+## How it works
+
+1. **Tokens** — `app/src/styles/tokens.css` defines every themeable colour as a
+   space-separated **RGB channel triple** (e.g. `--surface: 255 255 255;`) plus
+   font-role vars (`--font-title/heading/body/mono/serif`). The Light palette
+   lives in `:root`; the Dark palette in `:root.dark`.
+
+2. **Tailwind wiring** — `app/tailwind.config.js` exposes the tokens as utility
+   colours via `rgb(var(--token) / <alpha-value>)`. The `<alpha-value>` form is
+   what keeps opacity modifiers working (`bg-surface/50`, `bg-primary-500/10`).
+   Channel format is mandatory for this reason — never store a token as a hex
+   string.
+
+3. **Runtime application** — `app/src/providers/ThemeProvider.tsx` resolves the
+   active `Theme` and writes its overrides as inline `--token` / `--font-<role>`
+   variables on `<html>`, toggling `.dark` from `theme.isDark`. Variables a theme
+   doesn't override fall through to the tokens.css defaults; variables left over
+   from a previous theme are removed on switch.
+
+4. **State** — `app/src/store/themeSlice.ts` holds `activeThemeId` and
+   `customThemes`. Built-in presets live in `app/src/lib/theme/presets.ts`.
+   Users edit themes in **Settings → Theme Studio**
+   (`app/src/components/settings/panels/ThemeStudioPanel.tsx`).
+
+## Token taxonomy
+
+| Group     | Tokens                                                                                  | Tailwind utilities |
+| --------- | --------------------------------------------------------------------------------------- | ------------------ |
+| Surfaces  | `surface`, `surface-canvas`, `surface-muted`, `surface-subtle`, `surface-strong`, `surface-hover`, `surface-overlay` | `bg-surface`, `bg-surface-muted`, … |
+| Text      | `content`, `content-secondary`, `content-muted`, `content-faint`, `content-inverted`    | `text-content`, `text-content-muted`, … |
+| Borders   | `line`, `line-strong`, `line-subtle`                                                     | `border-line`, `border-line-strong`, … |
+| Accents   | `primary-*`, `sage-*`, `amber-*`, `coral-*` (shades 50…950)                              | `bg-primary-500`, `text-coral-600`, … (var-backed, themeable, unchanged names) |
+| Fonts     | `font-title`, `font-heading`, `font-body`, `font-mono`, `font-serif`                     | `font-title`, `font-heading`, `font-body`, … |
+
+The legacy `--cmd-*` and `--color-*` variable sets are thin aliases over these
+canonical tokens — don't add new colours there.
+
+## Authoring components
+
+- Use semantic utilities (`bg-surface`, `text-content`, `border-line`) for
+  neutral surfaces/text/borders instead of `bg-white dark:bg-neutral-900` etc.
+  You almost never need `dark:` variants for these — the token flips for you.
+- Use the accent palettes (`primary`/`sage`/`amber`/`coral`) for semantic colour;
+  they're themeable with no extra work.
+- Avoid hardcoded hex in `className` or inline `style` — those bypass theming.
+
+## The migration codemod
+
+`scripts/theme-codemod/` collapses audited `light dark:` Tailwind pairings into
+the semantic utilities. It is idempotent and dry-run by default:
+
+```bash
+node scripts/theme-codemod/migrate.mjs            # dry-run + report
+node scripts/theme-codemod/migrate.mjs --write    # apply
+node scripts/theme-codemod/migrate.mjs --selftest # fixture assertions
+```
+
+It only rewrites adjacent pairs and never touches opacity-suffixed utilities or
+test files. Mapping table: `scripts/theme-codemod/map.mjs`.
diff --git a/scripts/theme-codemod/map.mjs b/scripts/theme-codemod/map.mjs
new file mode 100644
index 000000000..3ec314e0f
--- /dev/null
+++ b/scripts/theme-codemod/map.mjs
@@ -0,0 +1,113 @@
+/**
+ * Theme codemod mapping table.
+ *
+ * Each PAIR entry is `[lightClass, darkClass, semanticClass]`. The codemod
+ * collapses an adjacent `lightClass darkClass` (or the reversed order) into the
+ * single semantic class — the CSS variable behind the semantic class handles
+ * dark mode, so the `dark:` half is redundant after migration.
+ *
+ * Only high-confidence, audited pairings live here (see the className-pairing
+ * audit). Opacity-suffixed variants (`bg-neutral-900/50`) are intentionally NOT
+ * matched — the codemod's class boundaries exclude a trailing `/`, leaving them
+ * untouched for manual handling.
+ *
+ * SINGLES are 1:1 class renames (no pairing).
+ */
+
+export const PAIRS = [
+  // ── Backgrounds ─────────────────────────────────────────────────────────
+  ['bg-white', 'dark:bg-neutral-900', 'bg-surface'],
+  ['bg-white', 'dark:bg-neutral-800', 'bg-surface'],
+  ['bg-white', 'dark:bg-stone-800', 'bg-surface'],
+  ['bg-stone-50', 'dark:bg-neutral-800', 'bg-surface-muted'],
+  ['bg-neutral-50', 'dark:bg-neutral-800', 'bg-surface-muted'],
+  ['bg-stone-50', 'dark:bg-neutral-900', 'bg-surface-muted'],
+  ['bg-stone-50', 'dark:bg-neutral-950', 'bg-surface-muted'],
+  ['bg-stone-100', 'dark:bg-neutral-800', 'bg-surface-subtle'],
+  ['bg-neutral-100', 'dark:bg-neutral-800', 'bg-surface-subtle'],
+  ['bg-stone-200', 'dark:bg-neutral-800', 'bg-surface-strong'],
+  ['bg-stone-200', 'dark:bg-neutral-700', 'bg-surface-strong'],
+  ['bg-neutral-200', 'dark:bg-neutral-800', 'bg-surface-strong'],
+
+  // ── Text ────────────────────────────────────────────────────────────────
+  ['text-stone-900', 'dark:text-neutral-100', 'text-content'],
+  ['text-stone-900', 'dark:text-neutral-50', 'text-content'],
+  ['text-neutral-900', 'dark:text-neutral-100', 'text-content'],
+  ['text-neutral-900', 'dark:text-neutral-50', 'text-content'],
+  ['text-neutral-800', 'dark:text-neutral-100', 'text-content'],
+  ['text-stone-800', 'dark:text-neutral-100', 'text-content'],
+  ['text-stone-800', 'dark:text-neutral-200', 'text-content'],
+  ['text-neutral-800', 'dark:text-neutral-200', 'text-content'],
+  ['text-stone-700', 'dark:text-neutral-200', 'text-content-secondary'],
+  ['text-stone-700', 'dark:text-neutral-300', 'text-content-secondary'],
+  ['text-neutral-700', 'dark:text-neutral-200', 'text-content-secondary'],
+  ['text-neutral-700', 'dark:text-neutral-300', 'text-content-secondary'],
+  ['text-stone-600', 'dark:text-neutral-300', 'text-content-secondary'],
+  ['text-neutral-600', 'dark:text-neutral-300', 'text-content-secondary'],
+  ['text-stone-600', 'dark:text-neutral-400', 'text-content-secondary'],
+  ['text-stone-500', 'dark:text-neutral-400', 'text-content-muted'],
+  ['text-neutral-500', 'dark:text-neutral-400', 'text-content-muted'],
+  ['text-stone-400', 'dark:text-neutral-500', 'text-content-faint'],
+  ['text-neutral-400', 'dark:text-neutral-500', 'text-content-faint'],
+
+  // ── Borders ─────────────────────────────────────────────────────────────
+  ['border-stone-200', 'dark:border-neutral-800', 'border-line'],
+  ['border-neutral-200', 'dark:border-neutral-800', 'border-line'],
+  ['border-stone-200', 'dark:border-neutral-700', 'border-line'],
+  ['border-stone-100', 'dark:border-neutral-800', 'border-line-subtle'],
+  ['border-neutral-100', 'dark:border-neutral-800', 'border-line-subtle'],
+  ['border-stone-300', 'dark:border-neutral-700', 'border-line-strong'],
+  ['border-neutral-300', 'dark:border-neutral-700', 'border-line-strong'],
+
+  // ── Opacity-suffixed surface pairs (pass 2) ─────────────────────────────
+  // The dark half carries an opacity suffix, so the boundary-based matcher skips
+  // them unless the full literal (incl. /NN) is listed. Light stays opaque; dark
+  // collapses to the opaque themed surface (the translucency was a dark-mode
+  // aesthetic that read as grey under custom dark themes like Midnight).
+  ['bg-stone-50', 'dark:bg-neutral-800/60', 'bg-surface-muted'],
+  ['bg-neutral-50', 'dark:bg-neutral-800/60', 'bg-surface-muted'],
+  ['bg-stone-50', 'dark:bg-neutral-800/40', 'bg-surface-muted'],
+  ['bg-stone-50', 'dark:bg-neutral-900/50', 'bg-surface-muted'],
+  ['bg-stone-50', 'dark:bg-neutral-900/40', 'bg-surface-muted'],
+  ['bg-stone-100', 'dark:bg-neutral-800/60', 'bg-surface-subtle'],
+  ['bg-neutral-100', 'dark:bg-neutral-800/60', 'bg-surface-subtle'],
+  ['bg-stone-200', 'dark:bg-neutral-700', 'bg-surface-strong'],
+  ['bg-stone-300', 'dark:bg-neutral-600', 'bg-surface-strong'],
+  ['bg-stone-300', 'dark:bg-neutral-700', 'bg-surface-strong'],
+  ['bg-neutral-300', 'dark:bg-neutral-600', 'bg-surface-strong'],
+  ['bg-white', 'dark:bg-neutral-900/40', 'bg-surface'],
+  ['bg-white', 'dark:bg-neutral-900/30', 'bg-surface'],
+  ['bg-white', 'dark:bg-neutral-600', 'bg-surface'],
+  ['bg-white', 'dark:bg-neutral-700', 'bg-surface'],
+
+  // ── Placeholder text ────────────────────────────────────────────────────
+  ['placeholder-stone-400', 'dark:placeholder-neutral-500', 'placeholder-content-faint'],
+  ['placeholder-neutral-400', 'dark:placeholder-neutral-500', 'placeholder-content-faint'],
+  ['placeholder-stone-500', 'dark:placeholder-neutral-500', 'placeholder-content-faint'],
+
+  // Translucent panels — opacity intended in BOTH modes (sticky headers, glass).
+  // Preserve the opacity on the themed surface so they stay translucent.
+  ['bg-white/95', 'dark:bg-neutral-900/95', 'bg-surface/95'],
+  ['bg-white/90', 'dark:bg-neutral-900/90', 'bg-surface/90'],
+  ['bg-white/80', 'dark:bg-neutral-900/80', 'bg-surface/80'],
+  ['bg-white/70', 'dark:bg-neutral-950/40', 'bg-surface/70'],
+  ['bg-white/40', 'dark:bg-neutral-900/40', 'bg-surface/40'],
+
+  // ── Hover / interaction states ──────────────────────────────────────────
+  ['hover:bg-stone-50', 'dark:hover:bg-neutral-800', 'hover:bg-surface-hover'],
+  ['hover:bg-stone-50', 'dark:hover:bg-neutral-800/60', 'hover:bg-surface-hover'],
+  ['hover:bg-stone-100', 'dark:hover:bg-neutral-800/60', 'hover:bg-surface-hover'],
+  ['hover:bg-neutral-50', 'dark:hover:bg-neutral-800/60', 'hover:bg-surface-hover'],
+  ['hover:bg-stone-100', 'dark:hover:bg-neutral-800', 'hover:bg-surface-hover'],
+  ['hover:bg-neutral-50', 'dark:hover:bg-neutral-800', 'hover:bg-surface-hover'],
+  ['hover:bg-neutral-100', 'dark:hover:bg-neutral-800', 'hover:bg-surface-hover'],
+  ['hover:text-stone-700', 'dark:hover:text-neutral-200', 'hover:text-content-secondary'],
+  ['hover:text-stone-600', 'dark:hover:text-neutral-300', 'hover:text-content-secondary'],
+  ['hover:text-stone-900', 'dark:hover:text-neutral-100', 'hover:text-content'],
+  ['hover:text-stone-800', 'dark:hover:text-neutral-100', 'hover:text-content'],
+];
+
+export const SINGLES = [
+  // Font role clarity: font-display is an alias of font-title (both → --font-title).
+  ['font-display', 'font-title'],
+];
diff --git a/scripts/theme-codemod/migrate.mjs b/scripts/theme-codemod/migrate.mjs
new file mode 100644
index 000000000..59a84bf07
--- /dev/null
+++ b/scripts/theme-codemod/migrate.mjs
@@ -0,0 +1,376 @@
+#!/usr/bin/env node
+/**
+ * Theme migration codemod.
+ *
+ * Collapses audited light/dark Tailwind colour pairings into the canonical
+ * semantic utilities (bg-surface, text-content, border-line, …) defined in
+ * app/src/styles/tokens.css + tailwind.config.js.
+ *
+ * Usage (from repo root):
+ *   node scripts/theme-codemod/migrate.mjs            # dry-run (default) + report
+ *   node scripts/theme-codemod/migrate.mjs --write    # apply changes
+ *   node scripts/theme-codemod/migrate.mjs --selftest # fixture assertions, no FS scan
+ *
+ * Safety:
+ *   - Only adjacent `light dark:` pairs (either order, single space) are touched.
+ *   - Class boundaries exclude a trailing `/`, so opacity-suffixed utilities
+ *     (bg-neutral-900/50) are never matched.
+ *   - Test/spec files are skipped so fixtures asserting class strings stay intact.
+ *   - Idempotent: re-running over migrated code yields zero changes.
+ *   - Default is dry-run; nothing is written without --write.
+ */
+
+import { readFileSync, writeFileSync, mkdirSync, readdirSync, statSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, relative } from 'node:path';
+import { PAIRS, SINGLES } from './map.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = join(__dirname, '..', '..');
+const SRC_DIR = join(REPO_ROOT, 'app', 'src');
+const OUT_DIR = join(REPO_ROOT, 'target', 'theme-codemod');
+
+// Class-boundary fragments: a token must be flanked by string/JSX-className
+// delimiters (start/space/quote/backtick/brace/paren/gt) — never a `/`, `-`,
+// `:` or word char that would mean it's part of a larger class or opacity suffix.
+const LEFT = `(^|[\\s"'\\\`{(>])`;
+const RIGHT = `($|[\\s"'\\\`})<])`;
+
+function esc(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/** Build the ordered list of {name, re, to} replacement rules. */
+function buildRules() {
+  const rules = [];
+  for (const [light, dark, to] of PAIRS) {
+    const a = esc(light);
+    const b = esc(dark);
+    // Match either ordering of the adjacent pair.
+    rules.push({
+      name: `${light} ${dark} → ${to}`,
+      re: new RegExp(`${LEFT}(?:${a} ${b}|${b} ${a})${RIGHT}`, 'g'),
+      to,
+      kind: 'pair',
+    });
+  }
+  for (const [from, to] of SINGLES) {
+    rules.push({
+      name: `${from} → ${to}`,
+      re: new RegExp(`${LEFT}${esc(from)}${RIGHT}`, 'g'),
+      to,
+      kind: 'single',
+    });
+  }
+  return rules;
+}
+
+// A "class run": 2+ adjacent class-like tokens on one line. Used by the grouped
+// pass so we can pair a light class with its `dark:` partner even when they
+// aren't adjacent (e.g. `border-stone-200 bg-white dark:border-neutral-800
+// dark:bg-neutral-900` — all light classes first, then all dark ones).
+const CLASS_RUN_RE = /[\w:/.@[\]-]+(?:[ \t]+[\w:/.@[\]-]+)+/g;
+
+/**
+ * Grouped-pairing pass: within each class run, if BOTH a mapping's light class
+ * and its `dark:` partner are present (in any order, any distance), replace the
+ * light class with the semantic class and drop the dark one. Only the prefix-
+ * free pairs apply (hover:/focus: states are handled by the adjacent pass).
+ */
+function transformGrouped(text, pairs, counts) {
+  return text.replace(CLASS_RUN_RE, (run) => {
+    const toks = run.split(/[ \t]+/);
+    const set = new Set(toks);
+    let changed = false;
+    for (const [light, dark, to] of pairs) {
+      if (!set.has(light) || !set.has(dark)) continue;
+      for (let i = 0; i < toks.length; i++) {
+        if (toks[i] === dark) toks[i] = null;
+        else if (toks[i] === light) toks[i] = to;
+      }
+      set.delete(light);
+      set.delete(dark);
+      set.add(to);
+      changed = true;
+      const name = `${light} + ${dark} → ${to}`;
+      counts[name] = (counts[name] || 0) + 1;
+    }
+    // Only rewrite runs we actually changed; rebuild with single spaces.
+    return changed ? toks.filter((t) => t !== null).join(' ') : run;
+  });
+}
+
+/**
+ * Apply all rules to `text`; returns { out, counts }.
+ *
+ * Adjacent rules and the grouped pass are looped until the text stabilises: the
+ * grouped pass can leave a `hover:` pair adjacent that only the adjacent rules
+ * handle, so a single round isn't a fixed point. Looping makes one invocation
+ * fully idempotent (a re-run finds nothing).
+ */
+// Shade→token maps for converting *standalone* dark: neutral utilities (no light
+// partner left after the pair passes). Only shades that equal the token's
+// built-in dark value are mapped, so the Light/Dark presets look identical and
+// only custom themes change.
+const DARK_BG = { 950: 'surface-canvas', 900: 'surface', 800: 'surface-muted' };
+const DARK_TEXT = { 50: 'content', 100: 'content', 300: 'content-secondary', 400: 'content-muted', 500: 'content-faint' };
+const DARK_BORDER = { 800: 'line', 700: 'line-strong' };
+const DARK_PLACEHOLDER = { 400: 'content-muted', 500: 'content-faint' };
+const DARK_MAPS = { bg: DARK_BG, text: DARK_TEXT, border: DARK_BORDER, placeholder: DARK_PLACEHOLDER };
+
+const DARK_NEUTRAL_RE =
+  /\bdark:((?:hover:|focus:|active:|group-hover:|disabled:)*)(bg|text|border|placeholder)-neutral-(\d{2,3})(\/\d+)?\b/g;
+
+/** Convert leftover standalone `dark:[state:]{util}-neutral-N[/op]` to tokens. */
+function transformDarkStandalone(text, counts) {
+  return text.replace(DARK_NEUTRAL_RE, (m, states, util, shade, opacity) => {
+    const token = DARK_MAPS[util]?.[Number(shade)];
+    if (!token) return m; // shade with no exact token equivalent — leave as-is
+    const name = `dark:${util}-neutral-${shade} → dark:${util}-${token}`;
+    counts[name] = (counts[name] || 0) + 1;
+    return `dark:${states}${util}-${token}${opacity ?? ''}`;
+  });
+}
+
+// Light placeholder colours with no dark partner → faint content token.
+const LIGHT_PLACEHOLDER_RE = /\b(placeholder)-(?:stone|neutral)-(400|500)\b/g;
+function transformLightPlaceholder(text, counts) {
+  return text.replace(LIGHT_PLACEHOLDER_RE, (m, util, shade) => {
+    const token = shade === '500' ? 'content-muted' : 'content-faint';
+    counts[`${m} → ${util}-${token}`] = (counts[`${m} → ${util}-${token}`] || 0) + 1;
+    return `${util}-${token}`;
+  });
+}
+
+const ACCENT_BG_RE = /(?:^|[\s"'`{(>])(?:hover:|focus:|active:|dark:)*bg-(?:primary|coral|sage|amber)-\d/;
+
+/** Invert `text-white` to `text-content-inverted` when on an accent fill. */
+function transformInvertedText(text, counts) {
+  return text.replace(CLASS_RUN_RE, (run) => {
+    if (!run.includes('text-white')) return run;
+    if (!ACCENT_BG_RE.test(' ' + run)) return run;
+    return run
+      .split(/[ \t]+/)
+      .map((tkn) => {
+        if (tkn !== 'text-white') return tkn;
+        counts['text-white → text-content-inverted'] =
+          (counts['text-white → text-content-inverted'] || 0) + 1;
+        return 'text-content-inverted';
+      })
+      .join(' ');
+  });
+}
+
+// Bare (non-dark:) singles with no dark partner. CRITICAL: only convert where
+// the token's built-in LIGHT value matches the source shade — otherwise a dark
+// bare surface (e.g. bg-stone-900 tooltip, bg-stone-800 active dot) would invert
+// to a near-white token in light mode. So:
+//   - text: all shades (content* flips correctly for readability in dark themes)
+//   - bg/border/divide: ONLY light shades (50–300); dark shades (700–950) are
+//     intentionally-dark, ambiguous, and left alone.
+const BARE_TEXT = { 300: 'content-faint', 400: 'content-faint', 500: 'content-muted', 600: 'content-secondary', 700: 'content-secondary', 800: 'content', 900: 'content' };
+const BARE_BG = { 50: 'surface-muted', 100: 'surface-subtle', 200: 'surface-strong' };
+const BARE_BORDER = { 100: 'line-subtle', 200: 'line', 300: 'line-strong' };
+const BARE_DIVIDE = { 100: 'line-subtle', 200: 'line', 300: 'line-strong' };
+const BARE_MAPS = { text: BARE_TEXT, bg: BARE_BG, border: BARE_BORDER, divide: BARE_DIVIDE };
+
+const BARE_NEUTRAL_RE =
+  /(^|[\s"'`{(>])((?:hover:|focus:|active:|group-hover:|disabled:)*)(text|bg|border|divide)-(?:stone|neutral|gray)-(\d{2,3})(\/\d+)?(?=$|[\s"'`})<])/g;
+
+/** Convert bare `{util}-{stone|neutral|gray}-N[/op]` (no dark: partner) to tokens. */
+function transformBareNeutral(text, counts) {
+  return text.replace(BARE_NEUTRAL_RE, (m, lead, states, util, shade, opacity) => {
+    const token = BARE_MAPS[util]?.[Number(shade)];
+    if (!token) return m;
+    counts[`${util}-*-${shade} → ${util}-${token}`] =
+      (counts[`${util}-*-${shade} → ${util}-${token}`] || 0) + 1;
+    return `${lead}${states}${util}-${token}${opacity ?? ''}`;
+  });
+}
+
+// Bare bg-white (incl. opacity) → surface token. bg-black is left alone (it's
+// almost always an intentional fixed scrim/media background).
+const BARE_WHITE_RE = /(^|[\s"'`{(>])bg-white(\/\d+)?(?=$|[\s"'`})<])/g;
+function transformBareWhite(text, counts) {
+  return text.replace(BARE_WHITE_RE, (m, lead, opacity) => {
+    counts['bg-white → bg-surface'] = (counts['bg-white → bg-surface'] || 0) + 1;
+    return `${lead}bg-surface${opacity ?? ''}`;
+  });
+}
+
+function transform(text, rules) {
+  let out = text;
+  const counts = {};
+  let prev;
+  do {
+    prev = out;
+    for (const rule of rules) {
+      out = out.replace(rule.re, (_m, l, r) => {
+        counts[rule.name] = (counts[rule.name] || 0) + 1;
+        return `${l}${rule.to}${r}`;
+      });
+    }
+    out = transformGrouped(out, PAIRS, counts);
+  } while (out !== prev);
+  // Post-passes (run once; each is idempotent on its own output).
+  out = transformDarkStandalone(out, counts);
+  out = transformLightPlaceholder(out, counts);
+  out = transformInvertedText(out, counts);
+  out = transformBareNeutral(out, counts);
+  out = transformBareWhite(out, counts);
+  return { out, counts };
+}
+
+function isSkippable(path) {
+  return (
+    /\.(test|spec)\.[tj]sx?$/.test(path) ||
+    /\.d\.ts$/.test(path) ||
+    path.includes(`${join('lib', 'i18n')}`) // locale string maps — never touch
+  );
+}
+
+function walk(dir, acc = []) {
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    const st = statSync(full);
+    if (st.isDirectory()) {
+      if (entry === 'node_modules' || entry === '__snapshots__') continue;
+      walk(full, acc);
+    } else if (/\.(tsx?|jsx?)$/.test(entry) && !isSkippable(full)) {
+      acc.push(full);
+    }
+  }
+  return acc;
+}
+
+function runSelfTest() {
+  const rules = buildRules();
+  const cases = [
+    ['<div className="bg-white dark:bg-neutral-900 p-4">', '<div className="bg-surface p-4">'],
+    ['className="p-2 dark:bg-neutral-900 bg-white"', 'className="p-2 bg-surface"'], // reversed
+    [
+      'className="text-stone-500 dark:text-neutral-400"',
+      'className="text-content-muted"',
+    ],
+    [
+      'className="border-stone-200 dark:border-neutral-800 rounded"',
+      'className="border-line rounded"',
+    ],
+    // Grouped pattern: light classes first, dark classes after (non-adjacent).
+    [
+      'className="border p-3 transition-colors border-stone-200 bg-white dark:border-neutral-800 dark:bg-neutral-900"',
+      'className="border p-3 transition-colors border-line bg-surface"',
+    ],
+    [
+      'className="bg-stone-100 font-medium text-stone-900 dark:bg-neutral-800 dark:text-neutral-100"',
+      'className="bg-surface-subtle font-medium text-content"',
+    ],
+    [
+      'className="relative flex w-full bg-white shadow-xl dark:bg-neutral-900"',
+      'className="relative flex w-full bg-surface shadow-xl"',
+    ],
+    // Grouped hover pairs (all hover-light first, then hover-dark).
+    [
+      'className="transition-colors text-content-secondary hover:bg-stone-50 hover:text-stone-900 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-100"',
+      'className="transition-colors text-content-secondary hover:bg-surface-hover hover:text-content"',
+    ],
+    // Standalone dark: neutral (no light partner) → themed dark token.
+    ['className="dark:bg-neutral-900"', 'className="dark:bg-surface"'],
+    ['className="dark:hover:bg-neutral-800/60"', 'className="dark:hover:bg-surface-muted/60"'],
+    ['className="dark:text-neutral-100"', 'className="dark:text-content"'],
+    // text-white on an accent fill → inverted (plain text-white untouched).
+    ['className="bg-primary-500 text-white"', 'className="bg-primary-500 text-content-inverted"'],
+    ['className="absolute inset-0 text-white"', 'className="absolute inset-0 text-white"'],
+    // Placeholder colours.
+    ['className="placeholder-stone-400"', 'className="placeholder-content-faint"'],
+    ['className="bg-white text-content dark:bg-neutral-600"', 'className="bg-surface text-content"'],
+    [
+      'className="hover:bg-stone-50 dark:hover:bg-neutral-800"',
+      'className="hover:bg-surface-hover"',
+    ],
+    ['className="font-display text-xl"', 'className="font-title text-xl"'],
+    // Opacity-suffixed must be LEFT ALONE:
+    // Bare (non-dark:) opacity colours are never matched.
+    ['className="bg-neutral-900/50"', 'className="bg-neutral-900/50"'],
+    // Standalone dark: opacity colour is themed (light side stays since no pair).
+    ['className="bg-white dark:bg-neutral-900/50"', 'className="bg-surface dark:bg-surface/50"'],
+    // Bare singles: text (all shades) + light bg/border/divide + bg-white.
+    ['className="text-stone-500 px-2"', 'className="text-content-muted px-2"'],
+    ['className="text-neutral-900"', 'className="text-content"'],
+    ['className="bg-stone-50 p-4"', 'className="bg-surface-muted p-4"'],
+    ['className="bg-white p-4"', 'className="bg-surface p-4"'],
+    ['className="border-stone-200 rounded"', 'className="border-line rounded"'],
+    ['className="divide-y divide-stone-200"', 'className="divide-y divide-line"'],
+    ['className="hover:bg-stone-100 rounded"', 'className="hover:bg-surface-subtle rounded"'],
+    // Dark bare surfaces are LEFT ALONE (ambiguous; would invert in light mode).
+    ['className="bg-stone-900 p-6"', 'className="bg-stone-900 p-6"'],
+    ['className="bg-stone-800"', 'className="bg-stone-800"'],
+    ['className="bg-black/50"', 'className="bg-black/50"'],
+    // Accent untouched.
+    ['className="text-primary-600 bg-sage-50"', 'className="text-primary-600 bg-sage-50"'],
+    // Unrelated classes untouched:
+    ['className="rounded-lg p-2 shadow"', 'className="rounded-lg p-2 shadow"'],
+    // Idempotent (already migrated):
+    ['className="bg-surface text-content"', 'className="bg-surface text-content"'],
+  ];
+  let failed = 0;
+  for (const [input, expected] of cases) {
+    const { out } = transform(input, rules);
+    if (out !== expected) {
+      failed++;
+      console.error(`FAIL\n  in:  ${input}\n  got: ${out}\n  exp: ${expected}`);
+    }
+  }
+  if (failed) {
+    console.error(`\n${failed}/${cases.length} self-test cases failed`);
+    process.exit(1);
+  }
+  console.log(`self-test: all ${cases.length} cases passed`);
+}
+
+function main() {
+  const args = new Set(process.argv.slice(2));
+  if (args.has('--selftest')) return runSelfTest();
+
+  const write = args.has('--write');
+  const rules = buildRules();
+  const files = walk(SRC_DIR);
+
+  const totals = {};
+  const changedFiles = [];
+  let totalReplacements = 0;
+
+  for (const file of files) {
+    const src = readFileSync(file, 'utf8');
+    const { out, counts } = transform(src, rules);
+    const fileCount = Object.values(counts).reduce((a, b) => a + b, 0);
+    if (fileCount === 0) continue;
+    changedFiles.push({ file: relative(REPO_ROOT, file), count: fileCount });
+    totalReplacements += fileCount;
+    for (const [k, v] of Object.entries(counts)) totals[k] = (totals[k] || 0) + v;
+    if (write) writeFileSync(file, out, 'utf8');
+  }
+
+  // Report
+  mkdirSync(OUT_DIR, { recursive: true });
+  const lines = [];
+  lines.push(`Theme codemod ${write ? '(WRITE)' : '(DRY-RUN)'} — ${new Date().toISOString?.() ?? ''}`);
+  lines.push(`Scanned ${files.length} files`);
+  lines.push(`Changed ${changedFiles.length} files, ${totalReplacements} replacements\n`);
+  lines.push('Per-rule counts:');
+  for (const [k, v] of Object.entries(totals).sort((a, b) => b[1] - a[1])) {
+    lines.push(`  ${String(v).padStart(5)}  ${k}`);
+  }
+  lines.push('\nTop changed files:');
+  for (const { file, count } of changedFiles.sort((a, b) => b.count - a.count).slice(0, 40)) {
+    lines.push(`  ${String(count).padStart(4)}  ${file}`);
+  }
+  const report = lines.join('\n') + '\n';
+  writeFileSync(join(OUT_DIR, 'report.txt'), report, 'utf8');
+
+  console.log(report);
+  console.log(`Report written to ${relative(REPO_ROOT, join(OUT_DIR, 'report.txt'))}`);
+  if (!write) console.log('\nDry-run only. Re-run with --write to apply.');
+}
+
+main();