diff --git a/apps/extension/entrypoints/sidepanel/agent-chat-panel.tsx b/apps/extension/entrypoints/sidepanel/agent-chat-panel.tsx
index ee0d50c617..1d0896eead 100644
--- a/apps/extension/entrypoints/sidepanel/agent-chat-panel.tsx
+++ b/apps/extension/entrypoints/sidepanel/agent-chat-panel.tsx
@@ -3,6 +3,7 @@ import { browser, storage } from '#imports';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { JSX, ReactNode } from 'react';
 import { useAtomValue, useSetAtom, useStore } from 'jotai';
+import { AlertTriangle } from 'lucide-react';
 import {
   compactingConversationIdsAtom,
   contextUsageAtomFamily,
@@ -863,8 +864,9 @@ export const AgentChatPanel = ({
       <ConversationList items={groupedEvents} streamingMessageId={streamingMessageId} />
 
       {remoteMcpToolWarning === undefined ? null : (
-        <p className="border-t border-amber-500/30 bg-amber-950/20 px-4 py-2 text-xs text-amber-300">
-          {remoteMcpToolWarning}
+        <p className="flex items-start gap-2 border-t border-status-yellow-500/30 bg-status-yellow-500/10 px-4 py-2 text-xs text-status-yellow-300">
+          <AlertTriangle aria-hidden="true" className="size-3.5 shrink-0 text-status-yellow-400" />
+          <span className="min-w-0">{remoteMcpToolWarning}</span>
         </p>
       )}
 
@@ -876,7 +878,7 @@ export const AgentChatPanel = ({
         onSubmit={submitDraft}
       />
 
-      <footer className="border-t border-zinc-900 bg-zinc-950 px-4 py-2">
+      <footer className="border-t border-border bg-surface-raised px-4 py-2">
         <AgentFooterControls
           contextDonut={contextDonut}
           inspectableTabs={inspectableTabs}
diff --git a/apps/extension/entrypoints/sidepanel/agent-conversation-events.tsx b/apps/extension/entrypoints/sidepanel/agent-conversation-events.tsx
index 9174de1663..9dfc5e74d6 100644
--- a/apps/extension/entrypoints/sidepanel/agent-conversation-events.tsx
+++ b/apps/extension/entrypoints/sidepanel/agent-conversation-events.tsx
@@ -126,8 +126,8 @@ const MessageEvent = ({
       <div
         className={
           isUser
-            ? 'max-w-[88%] rounded-lg bg-zinc-100 px-3 py-2 text-sm leading-5 text-zinc-950'
-            : 'max-w-[88%] rounded-lg border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm leading-5 text-zinc-200'
+            ? 'max-w-[88%] rounded-lg border border-border bg-surface-raised px-3 py-2 text-sm leading-5 text-foreground'
+            : 'max-w-[88%] rounded-lg px-3 py-2 text-sm leading-5 text-foreground'
         }
       >
         <div className="agent-message-markdown">
@@ -145,11 +145,11 @@ const ThinkingEvent = ({
 }: {
   event: Extract<AgentConversationEvent, { readonly type: 'thinking' }>;
 }): JSX.Element => (
-  <details className="group rounded-md border border-zinc-800 bg-zinc-900/60 px-3 py-2">
-    <summary className="cursor-pointer list-none text-xs font-semibold text-zinc-400 outline-none transition hover:text-zinc-200 focus-visible:ring-2 focus-visible:ring-[#EDFF00] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950">
+  <details className="group rounded-lg border border-border bg-surface-inset px-3 py-2">
+    <summary className="cursor-pointer list-none text-xs font-semibold text-foreground-muted outline-none transition hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background">
       thinking
     </summary>
-    <div className="agent-message-markdown mt-2 text-xs leading-5 text-zinc-400">
+    <div className="agent-message-markdown mt-2 text-xs leading-5 text-foreground-muted">
       <ReactMarkdown remarkPlugins={remarkPlugins}>{event.text}</ReactMarkdown>
     </div>
   </details>
@@ -166,22 +166,30 @@ const ToolExchangeEvent = ({
     : undefined;
 
   const panelClassName = isSuccessful
-    ? 'group min-w-0 rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2'
-    : 'group min-w-0 rounded-md border border-red-500/30 bg-red-950/20 px-3 py-2';
+    ? 'group min-w-0 rounded-lg border border-border bg-surface-inset px-3 py-2'
+    : 'group min-w-0 rounded-lg border border-status-red-500 bg-diff-delete-surface px-3 py-2';
   const titleClassName = isSuccessful
-    ? 'text-xs font-semibold text-zinc-300'
-    : 'text-xs font-semibold text-red-200';
-  const tabClassName = isSuccessful ? 'text-[11px] text-zinc-500' : 'text-[11px] text-red-200/70';
+    ? 'text-xs font-semibold text-foreground'
+    : 'text-xs font-semibold text-status-red-300';
+  const tabClassName = isSuccessful
+    ? 'text-xs text-foreground-subtle'
+    : 'text-xs text-status-red-400';
   const codeLabelClassName = isSuccessful
-    ? 'text-[11px] font-medium text-zinc-300'
-    : 'text-[11px] font-medium text-red-200/80';
+    ? 'text-xs font-medium text-foreground-muted'
+    : 'text-xs font-medium text-status-red-400';
   const codeBlockClassName = isSuccessful
-    ? 'mt-1 max-h-28 min-w-0 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-4 text-zinc-400'
-    : 'mt-1 max-h-28 min-w-0 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-4 text-red-100/90';
+    ? 'mt-1 max-h-28 min-w-0 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-xs leading-4 text-foreground-muted'
+    : 'mt-1 max-h-28 min-w-0 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-xs leading-4 text-status-red-300/80';
+  const resultLabelClassName = isSuccessful
+    ? 'text-xs font-medium text-foreground-muted'
+    : 'text-xs font-medium text-status-red-300';
+  const resultBlockClassName = isSuccessful
+    ? 'mt-1 max-h-28 min-w-0 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-xs leading-4 text-foreground-muted'
+    : 'mt-1 max-h-28 min-w-0 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-xs leading-4 text-status-red-300/80';
 
   return (
     <details className={panelClassName}>
-      <summary className="flex cursor-pointer list-none items-center justify-between gap-2 outline-none transition focus-visible:ring-2 focus-visible:ring-[#EDFF00] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950">
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-2 outline-none transition focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background">
         <span className={titleClassName}>
           {item.toolCall.name} {isSuccessful ? 'completed' : 'failed'}
         </span>
@@ -203,17 +211,15 @@ const ToolExchangeEvent = ({
           </div>
         ) : null}
         <div className="min-w-0">
-          <p className="text-[11px] font-medium text-zinc-300">
-            {isSuccessful ? 'Result' : 'Error'}
-          </p>
+          <p className={resultLabelClassName}>{isSuccessful ? 'Result' : 'Error'}</p>
           {screenshotDataUrl === undefined ? (
-            <pre className="mt-1 max-h-28 min-w-0 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-4 text-zinc-400">
+            <pre className={resultBlockClassName}>
               {isSuccessful ? formatToolValue(item.result.value) : item.result.error}
             </pre>
           ) : (
             <img
               alt="Viewport screenshot captured by get_viewport_screenshot"
-              className="mt-1 max-h-40 max-w-full rounded border border-zinc-800 object-contain"
+              className="mt-1 max-h-40 max-w-full rounded-md border border-border object-contain"
               src={screenshotDataUrl}
             />
           )}
@@ -238,12 +244,21 @@ const StandaloneToolEvent = ({
     body = formatToolValue(event.value);
   }
 
+  const isFailure = event.type === 'tool-result' && !event.ok;
+  const rootClassName = isFailure
+    ? 'rounded-lg border border-status-red-500 bg-diff-delete-surface px-3 py-2'
+    : 'rounded-lg border border-border bg-surface-inset px-3 py-2';
+  const titleClassName = isFailure
+    ? 'text-xs font-semibold text-status-red-300'
+    : 'text-xs font-semibold text-foreground';
+  const bodyClassName = isFailure
+    ? 'mt-2 max-h-28 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-xs leading-4 text-status-red-300/80'
+    : 'mt-2 max-h-28 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-xs leading-4 text-foreground-muted';
+
   return (
-    <div className="rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2">
-      <p className="text-xs font-semibold text-zinc-300">{title}</p>
-      <pre className="mt-2 max-h-28 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-4 text-zinc-400">
-        {body}
-      </pre>
+    <div className={rootClassName}>
+      <p className={titleClassName}>{title}</p>
+      <pre className={bodyClassName}>{body}</pre>
     </div>
   );
 };
diff --git a/apps/extension/entrypoints/sidepanel/agent-footer-controls.tsx b/apps/extension/entrypoints/sidepanel/agent-footer-controls.tsx
index 767ccc914c..ce06e2ac89 100644
--- a/apps/extension/entrypoints/sidepanel/agent-footer-controls.tsx
+++ b/apps/extension/entrypoints/sidepanel/agent-footer-controls.tsx
@@ -22,7 +22,7 @@ const ModeIcon = ({
   icon: ReturnType<typeof getFooterControlDisplay>['modeIcon'];
   tone: ReturnType<typeof getFooterControlDisplay>['modeIconTone'];
 }): JSX.Element => {
-  const toneClassName = tone === 'safe' ? 'text-[#EDFF00]' : 'text-red-400';
+  const toneClassName = tone === 'safe' ? 'text-status-green-500' : 'text-status-yellow-500';
 
   const Icon = icon === 'shield' ? Shield : TriangleAlert;
 
@@ -46,7 +46,7 @@ const CompactSelectControl = ({
 }): JSX.Element => (
   <select
     aria-label={ariaLabel}
-    className={`h-8 min-w-0 rounded-md border border-zinc-800 bg-zinc-950 text-xs font-medium text-zinc-200 outline-none transition hover:border-zinc-700 focus:border-[#EDFF00] focus:ring-2 focus:ring-[#EDFF00]/30 disabled:cursor-not-allowed disabled:text-zinc-600 ${className}`}
+    className={`h-8 min-w-0 rounded-md border border-border-strong bg-input-bg type-label text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background disabled:cursor-not-allowed disabled:text-foreground-subtle ${className}`}
     disabled={disabled}
     onChange={event => {
       onChange(event.currentTarget.value);
@@ -74,7 +74,7 @@ const ModeControl = ({
       <button
         aria-expanded={isOpen}
         aria-label={`${display.modeLabel} mode: ${display.modeDescription}`}
-        className="flex h-8 w-10 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 outline-none transition hover:border-zinc-700 focus:border-[#EDFF00] focus:ring-2 focus:ring-[#EDFF00]/30"
+        className="flex h-8 w-10 items-center justify-center rounded-md border border-border bg-surface-overlay text-foreground-on-secondary outline-none transition hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background"
         disabled={disabled}
         onClick={() => {
           setIsOpen(current => !current);
@@ -86,7 +86,7 @@ const ModeControl = ({
       </button>
 
       {isOpen && !disabled ? (
-        <div className="absolute bottom-10 left-0 z-10 grid w-56 gap-1 rounded-md border border-zinc-800 bg-zinc-950 p-1">
+        <div className="absolute bottom-10 left-0 z-10 grid w-56 gap-1 rounded-lg border border-border bg-surface-overlay p-1 shadow-lg shadow-black/50">
           {modeOptions.map(option => {
             const optionDisplay = getFooterControlDisplay({
               mode: option.value,
@@ -98,8 +98,8 @@ const ModeControl = ({
               <button
                 className={
                   option.value === mode
-                    ? 'flex items-start gap-2 rounded-sm bg-zinc-900 px-2 py-2 text-left text-zinc-100'
-                    : 'flex items-start gap-2 rounded-sm px-2 py-2 text-left text-zinc-400 transition hover:bg-zinc-900 hover:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-1 focus:ring-offset-zinc-950'
+                    ? 'flex items-start gap-2 rounded-sm bg-surface-selected px-2 py-2 text-left text-foreground'
+                    : 'flex items-start gap-2 rounded-sm px-2 py-2 text-left text-foreground-muted outline-none transition hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background'
                 }
                 key={option.value}
                 onClick={() => {
@@ -115,7 +115,7 @@ const ModeControl = ({
                 />
                 <span className="grid gap-0.5">
                   <span className="text-xs font-medium">{option.label}</span>
-                  <span className="text-[11px] leading-4 text-zinc-500">
+                  <span className="type-label text-foreground-muted">
                     {optionDisplay.modeDescription}
                   </span>
                 </span>
@@ -209,7 +209,7 @@ export const AgentFooterControls = ({
         </CompactSelectControl>
       </div>
       {tabDebuggerError === undefined ? null : (
-        <p className="text-xs leading-4 text-red-300">{tabDebuggerError}</p>
+        <p className="type-label text-status-red-400">{tabDebuggerError}</p>
       )}
       <div className="flex min-w-0 items-center gap-2">
         <ModeControl
@@ -255,9 +255,9 @@ export const AgentFooterControls = ({
       </div>
       {modelLoadError === undefined ? null : (
         <div className="flex items-center justify-between gap-2">
-          <p className="text-xs leading-4 text-red-300">{modelLoadError}</p>
+          <p className="type-label text-status-red-400">{modelLoadError}</p>
           <button
-            className="h-7 shrink-0 rounded-md border border-zinc-700 px-2 text-xs font-medium text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-900 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
+            className="h-8 shrink-0 rounded-md border border-border bg-surface-overlay px-2 type-label text-foreground-on-secondary outline-none transition hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background"
             onClick={() => {
               void onRetryModels();
             }}
diff --git a/apps/extension/entrypoints/sidepanel/auth-shell.tsx b/apps/extension/entrypoints/sidepanel/auth-shell.tsx
index ed32be7d5b..0130149568 100644
--- a/apps/extension/entrypoints/sidepanel/auth-shell.tsx
+++ b/apps/extension/entrypoints/sidepanel/auth-shell.tsx
@@ -31,6 +31,9 @@ import { settingsDialogOpenAtom } from './settings-dialog-state';
 
 const emptyOrganizationOptions: KiloOrganizationOption[] = [];
 
+const iconButtonClassName =
+  'flex size-8 items-center justify-center rounded-md border border-border bg-surface-overlay text-foreground-on-secondary transition hover:bg-surface-hover outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background';
+
 const IconButton = ({
   ariaLabel,
   children,
@@ -40,12 +43,7 @@ const IconButton = ({
   children: ReactNode;
   onClick: () => void;
 }): JSX.Element => (
-  <button
-    aria-label={ariaLabel}
-    className="flex size-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-300 transition hover:border-zinc-700 hover:bg-zinc-900 hover:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
-    onClick={onClick}
-    type="button"
-  >
+  <button aria-label={ariaLabel} className={iconButtonClassName} onClick={onClick} type="button">
     {children}
   </button>
 );
@@ -104,27 +102,29 @@ const AnalyticsSettingsRow = ({ userEmail }: { userEmail: string | undefined }):
   };
 
   return (
-    <div className="min-w-0 rounded-md border border-zinc-800 bg-zinc-900/40 p-3">
+    <div className="min-w-0 rounded-xl border border-border bg-surface-raised p-3">
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0 flex-1">
-          <p className="text-sm font-medium text-zinc-200">Share usage analytics</p>
-          <p className="mt-0.5 text-xs leading-4 text-zinc-500">
+          <p className="type-body font-medium text-foreground">Share usage analytics</p>
+          <p className="type-label mt-0.5 leading-4 text-foreground-muted">
             Helps improve Kilo. No page content is collected.
           </p>
           {showFirefoxHint ? (
-            <p className="mt-1 text-xs leading-4 text-zinc-500">
+            <p className="type-label mt-1 leading-4 text-foreground-muted">
               {FIREFOX_USAGE_DATA_BLOCKED_HINT}
             </p>
           ) : null}
           {state.errorMessage === null ? null : (
-            <p className="mt-1 text-xs leading-4 text-red-400">{state.errorMessage}</p>
+            <p className="type-label mt-1 leading-4 text-status-red-400">{state.errorMessage}</p>
           )}
         </div>
         <button
           aria-checked={state.checked}
           aria-label="Share usage analytics"
-          className={`relative mt-0.5 h-5 w-9 shrink-0 rounded-full border transition focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 ${
-            state.checked ? 'border-[#EDFF00]/40 bg-[#EDFF00]/20' : 'border-zinc-700 bg-zinc-800'
+          className={`relative mt-0.5 h-5 w-9 shrink-0 rounded-full border transition outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background disabled:cursor-not-allowed disabled:bg-surface-selected ${
+            state.checked
+              ? 'border-border-strong bg-surface-selected'
+              : 'border-border bg-surface-overlay'
           }`}
           disabled={!interactive}
           onClick={onToggle}
@@ -134,7 +134,7 @@ const AnalyticsSettingsRow = ({ userEmail }: { userEmail: string | undefined }):
           <span
             aria-hidden="true"
             className={`absolute top-0.5 size-3.5 rounded-full transition ${
-              state.checked ? 'left-4 bg-[#EDFF00]' : 'left-0.5 bg-zinc-400'
+              state.checked ? 'left-4 bg-foreground' : 'left-0.5 bg-foreground-muted'
             }`}
           />
         </button>
@@ -176,14 +176,14 @@ const HeaderActions = ({
         <div
           aria-label="Settings panel"
           aria-modal="true"
-          className="fixed inset-0 z-30 flex flex-col bg-zinc-950"
+          className="fixed inset-0 z-30 flex flex-col bg-surface-background"
           role="dialog"
         >
-          <div className="flex h-14 shrink-0 items-center justify-between border-b border-zinc-800 px-4">
-            <p className="text-sm font-semibold text-zinc-100">Settings</p>
+          <div className="flex h-14 shrink-0 items-center justify-between border-b border-border bg-surface-raised px-4">
+            <p className="text-sm font-semibold text-foreground">Settings</p>
             <button
               aria-label="Close settings"
-              className="flex size-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-300 transition hover:border-zinc-700 hover:bg-zinc-900 hover:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
+              className={iconButtonClassName}
               onClick={() => {
                 setIsSettingsOpen(false);
               }}
@@ -193,9 +193,11 @@ const HeaderActions = ({
             </button>
           </div>
           <div className="agent-conversation-scrollbar grid min-h-0 flex-1 content-start gap-4 overflow-y-auto px-4 py-4">
-            <div className="min-w-0 rounded-md border border-zinc-800 bg-zinc-900/40 p-3">
-              <p className="text-xs font-medium text-zinc-500">Signed in</p>
-              <p className="mt-1 truncate text-sm text-zinc-200">{auth.userEmail ?? 'Kilo user'}</p>
+            <div className="min-w-0 rounded-xl border border-border bg-surface-raised p-3">
+              <p className="type-label text-foreground-muted">Signed in</p>
+              <p className="type-body mt-1 truncate text-foreground">
+                {auth.userEmail ?? 'Kilo user'}
+              </p>
             </div>
             <MemorySettings />
             <OrganizationCreditAccountSelect
@@ -206,7 +208,7 @@ const HeaderActions = ({
             <RemoteMcpSettings />
             <AnalyticsSettingsRow userEmail={auth.userEmail} />
             <button
-              className="h-9 rounded-md border border-zinc-700 px-3 text-sm font-medium text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-900 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
+              className="type-label h-9 rounded-md border border-border bg-surface-overlay px-3 text-foreground-on-secondary transition hover:bg-surface-hover outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background"
               onClick={() => {
                 setIsSettingsOpen(false);
                 onSignOut();
@@ -237,9 +239,9 @@ const Header = ({
   organizationOptions?: KiloOrganizationOption[] | undefined;
   selectedOrganizationId?: string | undefined;
 }): JSX.Element => (
-  <div className="border-b border-zinc-800 px-4 py-3">
+  <div className="border-b border-border bg-surface-background px-4 py-3">
     <div className="flex min-w-0 items-center justify-between gap-3">
-      <KiloLogo className="size-8 shrink-0 text-[#EDFF00]" />
+      <KiloLogo className="size-8 shrink-0 text-brand-primary" />
       <span className="sr-only">Kilo</span>
       {auth === undefined ||
       onOrganizationChange === undefined ||
@@ -274,7 +276,7 @@ export const Shell = ({
   organizationOptions?: KiloOrganizationOption[] | undefined;
   selectedOrganizationId?: string | undefined;
 }): JSX.Element => (
-  <main className="flex h-dvh min-h-0 flex-col overflow-hidden bg-zinc-950 text-zinc-50">
+  <main className="flex h-dvh min-h-0 flex-col overflow-hidden bg-surface-background text-foreground">
     <Header
       auth={auth}
       headerBeforeSettings={headerBeforeSettings}
diff --git a/apps/extension/entrypoints/sidepanel/auth-views.tsx b/apps/extension/entrypoints/sidepanel/auth-views.tsx
index 2bde41a9d8..bea639f73a 100644
--- a/apps/extension/entrypoints/sidepanel/auth-views.tsx
+++ b/apps/extension/entrypoints/sidepanel/auth-views.tsx
@@ -6,10 +6,16 @@ import { Shell } from './auth-shell';
 import { useOrganizationCreditAccount } from './organization-credit-account';
 import { PendingMemorySaveCard } from './pending-memory-save-card';
 
+const primaryAuthButtonClassName =
+  'rounded-md bg-brand-primary type-label text-brand-primary-foreground transition hover:bg-brand-primary-hover outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background disabled:cursor-not-allowed disabled:bg-surface-selected disabled:text-foreground-subtle';
+
+const secondaryAuthButtonClassName =
+  'h-9 rounded-md border border-border bg-surface-overlay px-3 type-label text-foreground-on-secondary transition hover:bg-surface-hover outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background';
+
 export const LoadingView = (): JSX.Element => (
   <Shell>
     <div className="flex flex-1 items-center justify-center px-4 py-6">
-      <p className="text-sm text-zinc-400">Checking session...</p>
+      <p className="type-body text-foreground-muted">Checking session...</p>
     </div>
   </Shell>
 );
@@ -26,20 +32,20 @@ export const SignedOutView = ({
   <Shell>
     <div className="flex flex-1 flex-col justify-center gap-4 px-4 py-6">
       <div className="space-y-1">
-        <p className="text-base font-semibold text-zinc-50">Sign in to continue</p>
-        <p className="text-sm leading-5 text-zinc-400">
+        <p className="type-heading text-foreground">Sign in to continue</p>
+        <p className="type-body text-foreground-muted">
           Use your Kilo account to unlock extension tools.
         </p>
       </div>
 
       {message === undefined ? null : (
-        <p className="rounded-md border border-zinc-800 bg-zinc-900/70 p-3 text-sm leading-5 text-zinc-300">
+        <p className="type-body rounded-xl border border-border bg-surface-raised p-3 text-foreground">
           {message}
         </p>
       )}
 
       <button
-        className="h-10 rounded-md bg-[#EDFF00] px-4 text-sm font-semibold text-zinc-950 transition hover:bg-[#d9ea00] focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:bg-zinc-800 disabled:text-zinc-500"
+        className={`h-10 px-4 ${primaryAuthButtonClassName}`}
         disabled={isStarting}
         onClick={onSignIn}
         type="button"
@@ -62,30 +68,22 @@ export const PendingView = ({
   <Shell>
     <div className="flex flex-1 flex-col justify-center gap-4 px-4 py-6">
       <div className="space-y-1">
-        <p className="text-base font-semibold text-zinc-50">Complete sign in</p>
-        <p className="text-sm leading-5 text-zinc-400">Approve this code in the browser window.</p>
+        <p className="type-heading text-foreground">Complete sign in</p>
+        <p className="type-body text-foreground-muted">Approve this code in the browser window.</p>
       </div>
 
-      <div className="rounded-md border border-zinc-800 bg-zinc-900/70 p-4 text-center">
-        <p className="text-xs font-medium uppercase tracking-[0.14em] text-zinc-500">Code</p>
-        <p className="mt-2 font-mono text-2xl font-semibold tracking-[0.18em] text-zinc-50">
+      <div className="rounded-md border border-border bg-surface-inset p-4 text-center">
+        <p className="type-eyebrow text-foreground-muted">Code</p>
+        <p className="mt-2 font-mono text-2xl font-semibold tracking-[0.18em] text-foreground">
           {code}
         </p>
       </div>
 
       <div className="grid grid-cols-2 gap-2">
-        <button
-          className="h-9 rounded-md border border-zinc-700 px-3 text-sm font-medium text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-900 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
-          onClick={onOpen}
-          type="button"
-        >
+        <button className={secondaryAuthButtonClassName} onClick={onOpen} type="button">
           Open
         </button>
-        <button
-          className="h-9 rounded-md border border-zinc-700 px-3 text-sm font-medium text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-900 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
-          onClick={onCancel}
-          type="button"
-        >
+        <button className={secondaryAuthButtonClassName} onClick={onCancel} type="button">
           Cancel
         </button>
       </div>
@@ -103,24 +101,20 @@ export const ValidationErrorView = ({
   <Shell>
     <div className="flex flex-1 flex-col justify-center gap-4 px-4 py-6">
       <div className="space-y-1">
-        <p className="text-base font-semibold text-zinc-50">Session check failed</p>
-        <p className="text-sm leading-5 text-zinc-400">
+        <p className="type-heading text-foreground">Session check failed</p>
+        <p className="type-body text-foreground-muted">
           Kilo could not validate your saved session.
         </p>
       </div>
       <div className="grid grid-cols-2 gap-2">
         <button
-          className="h-9 rounded-md bg-[#EDFF00] px-3 text-sm font-semibold text-zinc-950 transition hover:bg-[#d9ea00] focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
+          className={`h-9 px-3 ${primaryAuthButtonClassName}`}
           onClick={onRetry}
           type="button"
         >
           Retry
         </button>
-        <button
-          className="h-9 rounded-md border border-zinc-700 px-3 text-sm font-medium text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-900 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
-          onClick={onSignInAgain}
-          type="button"
-        >
+        <button className={secondaryAuthButtonClassName} onClick={onSignInAgain} type="button">
           Sign in
         </button>
       </div>
diff --git a/apps/extension/entrypoints/sidepanel/collapsible-code-block.tsx b/apps/extension/entrypoints/sidepanel/collapsible-code-block.tsx
index c0cf60bb19..c3d6cb2e06 100644
--- a/apps/extension/entrypoints/sidepanel/collapsible-code-block.tsx
+++ b/apps/extension/entrypoints/sidepanel/collapsible-code-block.tsx
@@ -52,13 +52,13 @@ export const CollapsibleCodeBlock = ({
         {expanded ? null : (
           <div
             aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 bottom-0 h-10 rounded-b bg-gradient-to-t from-[rgb(9_9_11)] to-transparent"
+            className="pointer-events-none absolute inset-x-0 bottom-0 h-10 rounded-b bg-gradient-to-t from-surface-inset to-transparent"
           />
         )}
       </div>
       <button
         aria-expanded={expanded}
-        className="mt-1 flex w-full items-center gap-1 rounded px-1 py-0.5 text-left text-[11px] font-medium text-zinc-400 outline-none transition hover:text-zinc-200 focus-visible:ring-2 focus-visible:ring-[#EDFF00] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950"
+        className="type-label mt-1 flex w-full items-center gap-1 rounded px-1 py-0.5 text-left text-foreground-muted outline-none transition hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
         onClick={() => {
           setExpanded(current => !current);
         }}
diff --git a/apps/extension/entrypoints/sidepanel/context-donut.tsx b/apps/extension/entrypoints/sidepanel/context-donut.tsx
index ae2ac4a7fd..d0bc4d4e8a 100644
--- a/apps/extension/entrypoints/sidepanel/context-donut.tsx
+++ b/apps/extension/entrypoints/sidepanel/context-donut.tsx
@@ -2,11 +2,12 @@ import { useRef } from 'react';
 import type { JSX } from 'react';
 import { formatContextSummary, getContextRatio, getContextTone } from '@/src/shared/context-usage';
 import { formatSessionCost } from '@/src/shared/session-cost';
+import { DESIGN_TOKENS } from './design-tokens';
 
 const toneStroke: Record<'danger' | 'safe' | 'warn', string> = {
-  danger: '#f87171',
-  safe: '#EDFF00',
-  warn: '#fbbf24',
+  danger: DESIGN_TOKENS.statusRed500,
+  safe: DESIGN_TOKENS.statusGreen500,
+  warn: DESIGN_TOKENS.statusYellow500,
 };
 
 const RADIUS = 6;
@@ -27,7 +28,8 @@ export const ContextDonut = ({
 }): JSX.Element => {
   const detailsRef = useRef<HTMLDetailsElement>(null);
   const ratio = getContextRatio(promptTokens, contextLength);
-  const stroke = ratio === undefined ? '#52525b' : toneStroke[getContextTone(ratio)];
+  const stroke =
+    ratio === undefined ? DESIGN_TOKENS.statusGray500 : toneStroke[getContextTone(ratio)];
   const dash = ratio === undefined ? 0 : ratio * CIRCUMFERENCE;
   const summary = formatContextSummary(promptTokens, contextLength);
   const label = `Context usage: ${summary}`;
@@ -37,11 +39,18 @@ export const ContextDonut = ({
     <details className="relative shrink-0" ref={detailsRef}>
       <summary
         aria-label={label}
-        className="flex size-8 cursor-pointer list-none items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 outline-none transition hover:border-zinc-700 focus-visible:ring-2 focus-visible:ring-[#EDFF00]/50"
+        className="flex size-8 cursor-pointer list-none items-center justify-center rounded-md border border-border bg-surface-overlay text-foreground-on-secondary outline-none transition hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
         title={summary}
       >
         <svg aria-hidden="true" height="16" viewBox="0 0 16 16" width="16">
-          <circle cx="8" cy="8" fill="none" r={RADIUS} stroke="#27272a" strokeWidth="3" />
+          <circle
+            cx="8"
+            cy="8"
+            fill="none"
+            r={RADIUS}
+            stroke={DESIGN_TOKENS.surfaceBackground}
+            strokeWidth="3"
+          />
           <circle
             cx="8"
             cy="8"
@@ -55,12 +64,12 @@ export const ContextDonut = ({
           />
         </svg>
       </summary>
-      <div className="absolute bottom-10 right-0 z-20 w-56 rounded-md border border-zinc-800 bg-zinc-950 p-3 text-xs text-zinc-300 shadow-lg shadow-zinc-950/60">
-        <p className="font-medium text-zinc-100">Context</p>
-        <p className="mt-1 text-zinc-400">{summary}</p>
-        <p className="mt-1 text-zinc-400">Session cost {sessionCostLabel}</p>
+      <div className="absolute bottom-10 right-0 z-20 w-56 rounded-lg border border-border bg-surface-overlay p-3 shadow-lg shadow-black/50">
+        <p className="text-sm font-semibold text-foreground">Context</p>
+        <p className="type-label mt-1 text-foreground-muted">{summary}</p>
+        <p className="type-label mt-1 text-foreground-muted">Session cost {sessionCostLabel}</p>
         <button
-          className="mt-3 h-7 w-full rounded-md bg-[#EDFF00] px-2 text-xs font-semibold text-zinc-950 outline-none transition hover:bg-[#d9ea00] focus:ring-2 focus:ring-[#EDFF00]/50 disabled:cursor-not-allowed disabled:bg-zinc-800 disabled:text-zinc-500"
+          className="type-label mt-3 h-8 w-full rounded-md border border-border bg-surface-overlay px-2 text-foreground-on-secondary outline-none transition hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background disabled:cursor-not-allowed disabled:bg-surface-selected disabled:text-foreground-subtle"
           disabled={!canCompact}
           onClick={() => {
             detailsRef.current?.removeAttribute('open');
diff --git a/apps/extension/entrypoints/sidepanel/conversation-history-button.tsx b/apps/extension/entrypoints/sidepanel/conversation-history-button.tsx
index 6fccd2d2f0..592999874d 100644
--- a/apps/extension/entrypoints/sidepanel/conversation-history-button.tsx
+++ b/apps/extension/entrypoints/sidepanel/conversation-history-button.tsx
@@ -54,7 +54,7 @@ export const ConversationHistoryButton = ({
   const hasMore = visibleConversations.length < conversations.length;
   const virtualizer = useVirtualizer({
     count: visibleConversations.length + (hasMore ? 1 : 0),
-    estimateSize: () => 92,
+    estimateSize: () => 105,
     getScrollElement: () => historyRef.current,
     overscan: 8,
   });
@@ -68,7 +68,7 @@ export const ConversationHistoryButton = ({
       <button
         aria-expanded={isOpen}
         aria-label="History"
-        className="flex size-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-300 transition hover:border-zinc-700 hover:bg-zinc-900 hover:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
+        className="flex size-8 items-center justify-center rounded-md border border-border bg-surface-overlay text-foreground-on-secondary transition hover:bg-surface-hover outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
         onClick={() => {
           if (isOpen) {
             setIsOpen(false);
@@ -87,14 +87,14 @@ export const ConversationHistoryButton = ({
         <div
           aria-label="Conversation history"
           aria-modal="true"
-          className="agent-conversation-scrollbar fixed inset-0 z-30 flex flex-col overflow-y-auto bg-zinc-950"
+          className="agent-conversation-scrollbar fixed inset-0 z-30 flex flex-col overflow-y-auto bg-surface-background"
           ref={historyRef}
           role="dialog"
         >
-          <div className="sticky top-0 z-10 flex h-14 shrink-0 items-center justify-between border-b border-zinc-800 bg-zinc-950 px-4">
+          <div className="sticky top-0 z-10 flex h-14 shrink-0 items-center justify-between border-b border-border bg-surface-raised px-4">
             <div className="min-w-0">
-              <p className="text-sm font-semibold text-zinc-100">History</p>
-              <p className="text-xs text-zinc-500">
+              <p className="text-sm font-semibold text-foreground">History</p>
+              <p className="type-label text-foreground-muted">
                 {conversations.length === 1
                   ? '1 conversation'
                   : `${conversations.length} conversations`}
@@ -102,7 +102,7 @@ export const ConversationHistoryButton = ({
             </div>
             <button
               aria-label="Close history"
-              className="flex size-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-300 transition hover:border-zinc-700 hover:bg-zinc-900 hover:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
+              className="flex size-8 items-center justify-center rounded-md border border-border bg-surface-overlay text-foreground-on-secondary transition hover:bg-surface-hover outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
               onClick={() => {
                 setIsOpen(false);
               }}
@@ -113,7 +113,9 @@ export const ConversationHistoryButton = ({
           </div>
           <div className="px-3 py-3">
             {conversations.length === 0 ? (
-              <p className="px-1 py-8 text-center text-sm text-zinc-500">No conversations yet</p>
+              <p className="type-body px-1 py-8 text-center text-foreground-muted">
+                No conversations yet
+              </p>
             ) : (
               <div
                 className="relative w-full"
@@ -128,7 +130,7 @@ export const ConversationHistoryButton = ({
                         style={getHistoryRowStyle(virtualItem.start)}
                       >
                         <button
-                          className="h-9 w-full rounded-md border border-zinc-700 px-3 text-sm font-medium text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-900 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
+                          className="type-label h-9 w-full rounded-md border border-border bg-surface-overlay px-3 text-foreground-on-secondary transition hover:bg-surface-hover outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
                           onClick={() => {
                             setVisibleCount(count =>
                               Math.min(conversations.length, count + historyPageSize)
@@ -138,7 +140,7 @@ export const ConversationHistoryButton = ({
                         >
                           Show 100 more conversations
                         </button>
-                        <p className="mt-2 text-center text-xs text-zinc-500">
+                        <p className="type-label mt-2 text-center text-foreground-muted">
                           Showing {visibleConversations.length} of {conversations.length}
                         </p>
                       </div>
@@ -168,29 +170,32 @@ export const ConversationHistoryButton = ({
                       <div
                         className={
                           conversation.id === activeConversationId
-                            ? 'grid gap-2 rounded-md border border-[#EDFF00]/40 bg-zinc-900 p-2'
-                            : 'grid gap-2 rounded-md border border-transparent p-2 hover:border-zinc-800 hover:bg-zinc-900'
+                            ? 'grid gap-2 rounded-md border border-border-strong bg-surface-selected p-2'
+                            : 'grid gap-2 rounded-md border border-transparent p-2 hover:border-border hover:bg-surface-hover'
                         }
                       >
                         <div className="min-w-0">
                           <div className="flex min-w-0 items-center gap-2">
-                            <p className="truncate text-sm font-medium text-zinc-100" title={title}>
+                            <p
+                              className="type-body truncate font-medium text-foreground"
+                              title={title}
+                            >
                               {title}
                             </p>
                             {isConversationOpen ? (
-                              <span className="rounded-sm border border-zinc-700 px-1.5 py-0.5 text-[10px] font-medium uppercase text-zinc-400">
+                              <span className="type-eyebrow rounded-sm border border-border px-1.5 py-0.5 text-foreground-muted">
                                 Open
                               </span>
                             ) : null}
                           </div>
-                          <p className="mt-0.5 text-xs text-zinc-500">
+                          <p className="mt-0.5 font-mono text-xs text-foreground-muted">
                             {formatHistoryUpdatedAt(conversation.updatedAt)}
                           </p>
                         </div>
                         <div className="flex items-center gap-2">
                           <button
                             aria-label={`Open ${title}`}
-                            className="h-7 rounded-md border border-zinc-700 px-2 text-xs font-medium text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-[#EDFF00]/50"
+                            className="type-label h-8 rounded-md border border-border bg-surface-overlay px-2 text-foreground-on-secondary transition hover:bg-surface-hover outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
                             onClick={() => {
                               onOpenConversation(conversation.id);
                               setIsOpen(false);
@@ -201,7 +206,7 @@ export const ConversationHistoryButton = ({
                           </button>
                           <button
                             aria-label={`Delete ${title}`}
-                            className="flex size-7 items-center justify-center rounded-md border border-zinc-800 text-zinc-400 transition hover:border-red-500/70 hover:bg-red-950/30 hover:text-red-300 focus:outline-none focus:ring-2 focus:ring-red-400/50"
+                            className="flex size-8 items-center justify-center rounded-md border border-border bg-surface-overlay text-foreground-on-secondary transition hover:border-status-red-500/50 hover:bg-status-red-500/10 hover:text-status-red-300 outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
                             onClick={() => {
                               onDeleteConversation(conversation.id);
                             }}
@@ -218,7 +223,7 @@ export const ConversationHistoryButton = ({
             )}
           </div>
           {hasMore ? (
-            <p className="border-t border-zinc-900 px-4 py-2 text-center text-xs text-zinc-500">
+            <p className="type-label border-t border-border px-4 py-2 text-center text-foreground-muted">
               Showing {visibleConversations.length} of {conversations.length}
             </p>
           ) : null}
diff --git a/apps/extension/entrypoints/sidepanel/conversation-list.tsx b/apps/extension/entrypoints/sidepanel/conversation-list.tsx
index 78b2681f06..f4b083de0c 100644
--- a/apps/extension/entrypoints/sidepanel/conversation-list.tsx
+++ b/apps/extension/entrypoints/sidepanel/conversation-list.tsx
@@ -84,6 +84,12 @@ export const ConversationList = ({
   const scrollKey = getConversationScrollKey(items);
   const virtualizer = useVirtualizer({
     count: items.length,
+    /*
+     * Recorded deviation: measured collapsed row heights are 42-46px, but pinning
+     * the estimate into that band destabilized the scroll-pin E2E on the CI browser
+     * (wheel-up poll timeouts at 44/46/48). The pre-existing 52 stays; measureElement
+     * reconciles real rows regardless.
+     */
     estimateSize: () => 52,
     getScrollElement: () => listRef.current,
     overscan: 8,
@@ -298,7 +304,7 @@ export const ConversationList = ({
       {showJumpButton ? (
         <button
           aria-label="Jump to latest"
-          className="absolute bottom-3 right-3 z-10 flex size-9 items-center justify-center rounded-full border border-zinc-700 bg-zinc-950 text-zinc-100 shadow-lg shadow-zinc-950/60 outline-none transition hover:border-[#EDFF00] hover:text-[#EDFF00] focus:ring-2 focus:ring-[#EDFF00]/50"
+          className="absolute bottom-3 right-3 z-10 flex size-9 items-center justify-center rounded-full border border-border bg-surface-overlay text-foreground shadow-lg shadow-black/50 outline-none transition hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
           onClick={jumpToLatest}
           type="button"
         >
diff --git a/apps/extension/entrypoints/sidepanel/conversation-tabs.tsx b/apps/extension/entrypoints/sidepanel/conversation-tabs.tsx
index 2cf395bd25..c30afe780b 100644
--- a/apps/extension/entrypoints/sidepanel/conversation-tabs.tsx
+++ b/apps/extension/entrypoints/sidepanel/conversation-tabs.tsx
@@ -23,7 +23,7 @@ export const ConversationTabs = ({
   const compactingConversationIds = useAtomValue(compactingConversationIdsAtom);
 
   return (
-    <div className="border-b border-zinc-900 bg-zinc-950">
+    <div className="border-b border-border bg-surface-raised">
       <div
         aria-label="Conversation tabs"
         className="agent-conversation-scrollbar flex min-w-0 items-center gap-1 overflow-x-auto px-2 py-2"
@@ -40,14 +40,14 @@ export const ConversationTabs = ({
             <div
               className={
                 isActive
-                  ? 'flex h-8 max-w-44 shrink-0 items-center rounded-md border border-[#EDFF00]/70 bg-zinc-900 text-zinc-50'
-                  : 'flex h-8 max-w-44 shrink-0 items-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-400 hover:border-zinc-700 hover:text-zinc-100'
+                  ? 'flex h-8 max-w-44 shrink-0 items-center rounded-md border border-border-strong bg-surface-selected text-foreground'
+                  : 'flex h-8 max-w-44 shrink-0 items-center rounded-md border border-border text-foreground-muted hover:border-border-strong hover:text-foreground'
               }
               key={conversation.id}
             >
               <button
                 aria-selected={isActive}
-                className="flex h-full min-w-0 items-center gap-1.5 px-2 text-left text-xs font-medium outline-none focus:ring-2 focus:ring-[#EDFF00]/50 disabled:cursor-not-allowed disabled:text-zinc-600"
+                className="flex h-full min-w-0 items-center gap-1.5 px-2 text-left text-xs font-medium outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background disabled:cursor-not-allowed disabled:text-foreground-subtle"
                 disabled={isDisabled}
                 onClick={() => {
                   onSelectConversation(conversation.id);
@@ -59,14 +59,14 @@ export const ConversationTabs = ({
                 {isRunning ? (
                   <span
                     aria-hidden="true"
-                    className="size-2 shrink-0 animate-pulse rounded-full bg-[#EDFF00]"
+                    className="size-2 shrink-0 animate-pulse rounded-full bg-status-blue-400"
                   />
                 ) : null}
                 <span className="truncate">{title}</span>
               </button>
               <button
                 aria-label={`Close ${title}`}
-                className="mr-1 flex size-6 shrink-0 items-center justify-center rounded-sm text-zinc-500 outline-none transition hover:bg-zinc-800 hover:text-zinc-100 focus:ring-2 focus:ring-[#EDFF00]/50"
+                className="mr-1 flex size-6 shrink-0 items-center justify-center rounded-sm text-foreground-muted outline-none transition hover:bg-surface-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
                 disabled={isDisabled}
                 onClick={() => {
                   onCloseConversation(conversation.id);
@@ -82,7 +82,7 @@ export const ConversationTabs = ({
         })}
         <button
           aria-label="New conversation"
-          className="flex size-8 shrink-0 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-300 outline-none transition hover:border-zinc-700 hover:bg-zinc-900 hover:text-zinc-100 focus:ring-2 focus:ring-[#EDFF00]/50 disabled:cursor-not-allowed disabled:text-zinc-600"
+          className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface-overlay text-foreground-on-secondary outline-none transition hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background disabled:cursor-not-allowed disabled:text-foreground-subtle"
           disabled={isDisabled}
           onClick={onCreateConversation}
           type="button"
diff --git a/apps/extension/entrypoints/sidepanel/design-token-drift.test.ts b/apps/extension/entrypoints/sidepanel/design-token-drift.test.ts
new file mode 100644
index 0000000000..4a1fd3bed5
--- /dev/null
+++ b/apps/extension/entrypoints/sidepanel/design-token-drift.test.ts
@@ -0,0 +1,341 @@
+/* eslint-disable id-length, import/no-nodejs-modules, max-lines, max-params, no-continue, unicorn/no-immediate-mutation, jest/max-expects, jest/no-conditional-in-test, jest/valid-expect */
+/**
+ * Design-token drift guard for the extension side panel.
+ *
+ * Scans sidepanel sources + public/icon/icon.svg and fails on default Tailwind
+ * palette families, raw hex/rgb, arbitrary text-[Npx] / tracking-[…], and
+ * opacity modifiers on ring-brand-primary-ring. Also asserts DESIGN_TOKENS
+ * stays in sync with style.css @theme hexes.
+ *
+ * Allow-list (every rule): style.css, design-tokens.ts, this file, E2E
+ * assertion files under tests/e2e/. icon.svg is covered only by its dedicated
+ * hex assertion below.
+ */
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { basename, extname, join, relative, resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const sidepanelDir = resolve(import.meta.dirname);
+const iconSvgPath = resolve(sidepanelDir, '../../public/icon/icon.svg');
+const styleCssPath = join(sidepanelDir, 'style.css');
+const designTokensPath = join(sidepanelDir, 'design-tokens.ts');
+const thisTestFile = 'design-token-drift.test.ts';
+
+const SOURCE_EXTENSIONS = new Set(['.ts', '.tsx', '.css', '.html', '.js', '.jsx']);
+
+/** Files skipped by every ban rule (token definitions, this guard, E2E asserts). */
+const isAllowListedPath = (absolutePath: string): boolean => {
+  const name = basename(absolutePath);
+
+  if (name === 'style.css' || name === 'design-tokens.ts' || name === thisTestFile) {
+    return true;
+  }
+
+  // E2E assertion files pin token RGBs (outside the sidepanel walk, but keep explicit).
+  if (/[/\\]tests[/\\]e2e[/\\]/u.test(absolutePath)) {
+    return true;
+  }
+
+  // Icon.svg has its own dedicated hex assertion — skip generic bans.
+  if (name === 'icon.svg') {
+    return true;
+  }
+
+  return false;
+};
+
+const walkFiles = (dir: string): string[] => {
+  const entries = readdirSync(dir);
+  const files: string[] = [];
+
+  for (const entry of entries) {
+    const full = join(dir, entry);
+    const stat = statSync(full);
+
+    if (stat.isDirectory()) {
+      files.push(...walkFiles(full));
+    } else if (SOURCE_EXTENSIONS.has(extname(full))) {
+      files.push(full);
+    }
+  }
+
+  return files;
+};
+
+// Default Tailwind palette steps, excluding status-/diff-/syntax- token prefixes.
+const DEFAULT_PALETTE_RE =
+  /(?<!(?:status|diff|syntax)-)(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone)-(?:50|[1-9]00|950)\b/gu;
+
+const RAW_HEX_RE = /#(?:[0-9a-fA-F]{3,8})\b/gu;
+const RGB_RE = /\brgba?\(/gu;
+const TEXT_PX_RE = /\btext-\[\d+px\]/gu;
+const TRACKING_ARBITRARY_RE = /\btracking-\[[^\]]+\]/gu;
+const RING_BRAND_OPACITY_RE = /\bring-brand-primary-ring\/\d+\b/gu;
+
+/** OTP mono presentation in auth-views.tsx — recorded exception (not an eyebrow). */
+const ALLOWED_TRACKING = 'tracking-[0.18em]';
+const ALLOWED_TRACKING_FILE = 'auth-views.tsx';
+
+interface Finding {
+  readonly file: string;
+  readonly line: number;
+  readonly match: string;
+  readonly rule: string;
+}
+
+const lineNumberAt = (source: string, index: number): number =>
+  source.slice(0, index).split('\n').length;
+
+const collectMatches = (
+  source: string,
+  relativePath: string,
+  pattern: RegExp,
+  rule: string,
+  shouldIgnore: (matchText: string) => boolean = () => false
+): Finding[] => {
+  const findings: Finding[] = [];
+  const flags = pattern.flags.includes('g') ? pattern.flags : `${pattern.flags}g`;
+  const re = new RegExp(pattern.source, flags);
+
+  for (const match of source.matchAll(re)) {
+    const [matchText = ''] = match;
+
+    if (!shouldIgnore(matchText)) {
+      findings.push({
+        file: relativePath,
+        line: lineNumberAt(source, match.index),
+        match: matchText,
+        rule,
+      });
+    }
+  }
+
+  return findings;
+};
+
+interface BanRule {
+  pattern: RegExp;
+  rule: string;
+  shouldIgnore?: (matchText: string, relativePath: string) => boolean;
+}
+
+const BAN_RULES: readonly BanRule[] = [
+  { pattern: DEFAULT_PALETTE_RE, rule: 'default-tailwind-palette' },
+  { pattern: RAW_HEX_RE, rule: 'raw-hex' },
+  { pattern: RGB_RE, rule: 'raw-rgb' },
+  { pattern: TEXT_PX_RE, rule: 'arbitrary-text-px' },
+  {
+    pattern: TRACKING_ARBITRARY_RE,
+    rule: 'arbitrary-tracking',
+    // Recorded exception: OTP code display uses tracking-[0.18em] in auth-views.tsx.
+    shouldIgnore: (matchText, relativePath) =>
+      matchText === ALLOWED_TRACKING && basename(relativePath) === ALLOWED_TRACKING_FILE,
+  },
+  { pattern: RING_BRAND_OPACITY_RE, rule: 'ring-brand-primary-ring-opacity' },
+];
+
+const scanSourceForBans = (absolutePath: string, root: string): Finding[] => {
+  if (isAllowListedPath(absolutePath)) {
+    return [];
+  }
+
+  const relativePath = relative(root, absolutePath);
+  const source = readFileSync(absolutePath, 'utf8');
+
+  return BAN_RULES.flatMap(({ pattern, rule, shouldIgnore }) =>
+    collectMatches(
+      source,
+      relativePath,
+      pattern,
+      rule,
+      matchText => shouldIgnore?.(matchText, relativePath) === true
+    )
+  );
+};
+
+/** Scan an arbitrary source string (self-check fixtures live outside the tree). */
+const scanSourceTextForBans = (source: string, label = 'fixture'): Finding[] =>
+  BAN_RULES.flatMap(({ pattern, rule }) => collectMatches(source, label, pattern, rule));
+
+const formatFindings = (findings: Finding[]): string =>
+  findings
+    .map(finding => `${finding.file}:${finding.line} [${finding.rule}] ${finding.match}`)
+    .join('\n');
+
+/** Join string parts without writing complete banned class literals in source. */
+const concatParts = (parts: string[]): string => parts.join('');
+
+/** StatusGreen500 → status-green-500; surfaceBackground → surface-background. */
+const camelToKebab = (value: string): string =>
+  value
+    .replaceAll(/([a-z0-9])([A-Z])/gu, '$1-$2')
+    .replaceAll(/([A-Za-z])(\d)/gu, '$1-$2')
+    .toLowerCase();
+
+const normalizeHex = (hex: string): string => {
+  const trimmed = hex.trim().replace(/^#/u, '').toLowerCase();
+
+  if (trimmed.length === 3 || trimmed.length === 4) {
+    return Array.from(trimmed, ch => `${ch}${ch}`).join('');
+  }
+
+  return trimmed;
+};
+
+const parseDesignTokens = (source: string): Record<string, string> => {
+  const tokens: Record<string, string> = {};
+  const objectMatch = source.match(/export const DESIGN_TOKENS\s*=\s*\{([\s\S]*?)\}\s*as const/u);
+  const body = objectMatch?.[1];
+
+  if (body === undefined) {
+    throw new Error('Could not parse DESIGN_TOKENS object from design-tokens.ts');
+  }
+
+  const entryRe = /([A-Za-z][A-Za-z0-9]*)\s*:\s*['"](#[0-9a-fA-F]{3,8})['"]/gu;
+
+  for (const entry of body.matchAll(entryRe)) {
+    const [, key, hex] = entry;
+
+    if (key !== undefined && hex !== undefined) {
+      tokens[key] = hex;
+    }
+  }
+
+  return tokens;
+};
+
+const parseThemeHexes = (source: string): Record<string, string> => {
+  const tokens: Record<string, string> = {};
+  const varRe = /--color-([a-z0-9-]+)\s*:\s*(#[0-9a-fA-F]{3,8})\b/gu;
+
+  for (const match of source.matchAll(varRe)) {
+    const [, kebab, hex] = match;
+
+    if (kebab !== undefined && hex !== undefined) {
+      tokens[kebab] = hex;
+    }
+  }
+
+  return tokens;
+};
+
+const collectIconHexViolations = (source: string): string[] => {
+  const violations: string[] = [];
+
+  if (!/#F7F586/iu.test(source)) {
+    violations.push('icon.svg must contain brand #F7F586');
+  }
+
+  if (/#EDFF00/iu.test(source)) {
+    violations.push('icon.svg must not contain legacy #EDFF00');
+  }
+
+  const hexes = source.match(/#[0-9a-fA-F]{3,8}\b/gu) ?? [];
+  const allowed = new Set([normalizeHex('#F7F586'), normalizeHex('#000000')]);
+
+  for (const hex of hexes) {
+    const normalized = normalizeHex(hex);
+
+    if (!allowed.has(normalized)) {
+      violations.push(`icon.svg hex #${normalized} is not in {#F7F586, #000000}`);
+    }
+  }
+
+  return violations;
+};
+
+const collectTokenSyncMismatches = (
+  designTokens: Record<string, string>,
+  themeHexes: Record<string, string>
+): string[] =>
+  Object.entries(designTokens).flatMap(([key, hex]) => {
+    const kebab = camelToKebab(key);
+    const themeHex = themeHexes[kebab];
+
+    if (themeHex === undefined) {
+      return [`DESIGN_TOKENS.${key} → --color-${kebab} missing from style.css @theme`];
+    }
+
+    if (normalizeHex(hex) !== normalizeHex(themeHex)) {
+      return [`DESIGN_TOKENS.${key}=${hex} ≠ --color-${kebab}=${themeHex}`];
+    }
+
+    return [];
+  });
+
+describe('design-token drift guard', () => {
+  it('self-check: scanner catches planted violations on fixture strings', () => {
+    // Build planted class fragments at runtime so Tailwind content scan cannot
+    // Emit banned utilities from this test file into the sidepanel CSS bundle.
+    const planted = [
+      concatParts([
+        'className="bg-',
+        'zinc',
+        '-900 text-',
+        'red',
+        '-400 border-',
+        'amber',
+        '-500/30"',
+      ]),
+      concatParts(['const brand = "#', 'EDFF00', '";']),
+      concatParts(['background: rgb(', '9, 9, 11', ');']),
+      concatParts(['text-[', '11', 'px] tracking-[', '0.14', 'em]']),
+      concatParts(['focus-visible:ring-brand-primary-ring/', '40']),
+    ].join('\n');
+
+    const findings = scanSourceTextForBans(planted, 'planted-fixture');
+    const rules = new Set(findings.map(finding => finding.rule));
+    const required = [
+      'default-tailwind-palette',
+      'raw-hex',
+      'raw-rgb',
+      'arbitrary-text-px',
+      'arbitrary-tracking',
+      'ring-brand-primary-ring-opacity',
+    ];
+    const missing = required.filter(rule => !rules.has(rule));
+
+    expect(missing).toStrictEqual([]);
+    expect(formatFindings(findings).length).toBeGreaterThan(0);
+
+    // Token-prefixed classes must stay legal (already present in product sources).
+    const legal = [
+      'bg-status-red-500 text-diff-delete-text text-syntax-string',
+      'bg-surface-raised text-foreground border-border',
+      'ring-brand-primary-ring',
+    ].join('\n');
+
+    expect(scanSourceTextForBans(legal, 'legal-fixture')).toStrictEqual([]);
+  });
+
+  it('scans sidepanel sources for banned color/typography patterns', () => {
+    const files = walkFiles(sidepanelDir);
+    const findings = files.flatMap(file => scanSourceForBans(file, sidepanelDir));
+
+    if (findings.length > 0) {
+      throw new Error(`Banned design patterns:\n${formatFindings(findings)}`);
+    }
+
+    expect(findings).toStrictEqual([]);
+  });
+
+  it('asserts icon.svg brand hex contract', () => {
+    const source = readFileSync(iconSvgPath, 'utf8');
+    const violations = collectIconHexViolations(source);
+
+    expect(violations).toStrictEqual([]);
+  });
+
+  it('keeps DESIGN_TOKENS in sync with style.css @theme hexes', () => {
+    const designSource = readFileSync(designTokensPath, 'utf8');
+    const styleSource = readFileSync(styleCssPath, 'utf8');
+    const designTokens = parseDesignTokens(designSource);
+    const themeHexes = parseThemeHexes(styleSource);
+
+    expect(Object.keys(designTokens).length).toBeGreaterThan(0);
+
+    const mismatches = collectTokenSyncMismatches(designTokens, themeHexes);
+
+    expect(mismatches).toStrictEqual([]);
+  });
+});
diff --git a/apps/extension/entrypoints/sidepanel/design-tokens.ts b/apps/extension/entrypoints/sidepanel/design-tokens.ts
new file mode 100644
index 0000000000..a7e8a0ac20
--- /dev/null
+++ b/apps/extension/entrypoints/sidepanel/design-tokens.ts
@@ -0,0 +1,12 @@
+/**
+ * JS-readable mirror of the style.css @theme token hexes needed by SVG/JS
+ * (context donut usage strokes + recessed track on overlay). Keep in sync with
+ * entrypoints/sidepanel/style.css — enforced by design-token-drift.test.ts.
+ */
+export const DESIGN_TOKENS = {
+  statusGray500: '#71717A',
+  statusGreen500: '#22C55E',
+  statusRed500: '#EF4444',
+  statusYellow500: '#F0A900',
+  surfaceBackground: '#151515',
+} as const;
diff --git a/apps/extension/entrypoints/sidepanel/memory-settings.tsx b/apps/extension/entrypoints/sidepanel/memory-settings.tsx
index 37047f19cd..a0f7e8f66e 100644
--- a/apps/extension/entrypoints/sidepanel/memory-settings.tsx
+++ b/apps/extension/entrypoints/sidepanel/memory-settings.tsx
@@ -10,7 +10,7 @@ const EMPTY_MESSAGE =
 const LOAD_ERROR_MESSAGE = "Couldn't load memories. Try again.";
 
 const secondaryButtonClass =
-  'h-8 rounded-md border border-zinc-700 px-3 text-sm font-medium text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-900 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950';
+  'type-label h-8 rounded-md border border-border bg-surface-overlay px-3 text-foreground-on-secondary transition hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background';
 
 export const MemorySettings = (): JSX.Element => {
   const { isLoaded, loadError, memories, reload } = useAgentMemories();
@@ -19,15 +19,17 @@ export const MemorySettings = (): JSX.Element => {
   return (
     <section
       aria-label="Memories"
-      className="min-w-0 rounded-md border border-zinc-800 bg-zinc-900/40 p-3"
+      className="min-w-0 rounded-xl border border-border bg-surface-raised p-3"
     >
-      <h2 className="text-xs font-medium text-zinc-500">Memories</h2>
+      <h2 className="type-label text-foreground-muted">Memories</h2>
 
-      {view.kind === 'loading' ? <p className="mt-2 text-sm text-zinc-400">Loading…</p> : null}
+      {view.kind === 'loading' ? (
+        <p className="type-body mt-2 text-foreground-muted">Loading…</p>
+      ) : null}
 
       {view.kind === 'loadError' ? (
         <div className="mt-2 flex flex-col gap-2">
-          <p className="text-sm text-zinc-300">{LOAD_ERROR_MESSAGE}</p>
+          <p className="type-body text-status-red-400">{LOAD_ERROR_MESSAGE}</p>
           <div className="flex justify-end">
             <button className={secondaryButtonClass} onClick={reload} type="button">
               Retry
@@ -36,20 +38,22 @@ export const MemorySettings = (): JSX.Element => {
         </div>
       ) : null}
 
-      {view.kind === 'empty' ? <p className="mt-2 text-sm text-zinc-400">{EMPTY_MESSAGE}</p> : null}
+      {view.kind === 'empty' ? (
+        <p className="type-body mt-2 text-foreground-muted">{EMPTY_MESSAGE}</p>
+      ) : null}
 
       {view.kind === 'list' ? (
         <ul className="mt-2 flex flex-col gap-2">
           {view.items.map(item => (
             <li
-              className="flex min-w-0 items-start gap-2 rounded-md border border-zinc-800/80 bg-zinc-950/40 p-2"
+              className="flex min-w-0 items-start gap-2 rounded-md border border-border bg-surface-background p-2"
               key={item.id}
             >
               <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-medium text-zinc-100" title={item.preview}>
+                <p className="type-body truncate font-medium text-foreground" title={item.preview}>
                   {item.preview}
                 </p>
-                <p className="mt-0.5 text-xs text-zinc-500">
+                <p className="type-label mt-0.5 text-foreground-muted">
                   {item.domain === undefined
                     ? item.dateLabel
                     : `${item.domain} · ${item.dateLabel}`}
@@ -57,7 +61,7 @@ export const MemorySettings = (): JSX.Element => {
               </div>
               <button
                 aria-label={item.deleteAriaLabel}
-                className="flex size-7 shrink-0 items-center justify-center rounded-md border border-zinc-800 text-zinc-400 transition hover:border-red-500/70 hover:bg-red-950/30 hover:text-red-300 focus:outline-none focus:ring-2 focus:ring-red-400/50"
+                className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface-overlay text-foreground-on-secondary transition hover:border-status-red-500/50 hover:bg-status-red-500/10 hover:text-status-red-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
                 onClick={() => {
                   void deleteAgentMemory(storage, item.id);
                 }}
diff --git a/apps/extension/entrypoints/sidepanel/message-composer.tsx b/apps/extension/entrypoints/sidepanel/message-composer.tsx
index 66e81ca56b..7104208ab2 100644
--- a/apps/extension/entrypoints/sidepanel/message-composer.tsx
+++ b/apps/extension/entrypoints/sidepanel/message-composer.tsx
@@ -20,7 +20,7 @@ export const MessageComposer = ({
 
   return (
     <form
-      className="border-t border-zinc-900 px-4 py-3"
+      className="border-t border-border bg-surface-background px-4 py-3"
       onSubmit={event => {
         event.preventDefault();
         onSubmit();
@@ -30,7 +30,7 @@ export const MessageComposer = ({
         Message agent
       </label>
       <textarea
-        className="min-h-20 w-full resize-none rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm leading-5 text-zinc-100 outline-none transition placeholder:text-zinc-600 focus:border-[#EDFF00] focus:ring-2 focus:ring-[#EDFF00]/30"
+        className="type-body min-h-20 w-full resize-none rounded-md border border-border-strong bg-input-bg px-3 py-2 text-foreground outline-none transition placeholder:text-foreground-subtle focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
         id="agent-message"
         onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
           setDraft(event.currentTarget.value);
@@ -46,7 +46,11 @@ export const MessageComposer = ({
       />
       <div className="mt-2 grid gap-2">
         <button
-          className="h-9 w-full rounded-md bg-[#EDFF00] px-3 text-sm font-semibold text-zinc-950 transition hover:bg-[#d9ea00] focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:bg-zinc-800 disabled:text-zinc-500"
+          className={
+            isRunning
+              ? 'type-label h-9 w-full rounded-md border border-border bg-surface-overlay px-3 text-foreground-on-secondary transition hover:bg-surface-hover outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background'
+              : 'type-label h-9 w-full rounded-md border border-transparent bg-brand-primary px-3 text-brand-primary-foreground transition hover:bg-brand-primary-hover outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background disabled:cursor-not-allowed disabled:bg-surface-selected disabled:text-foreground-subtle'
+          }
           disabled={isRunning ? false : isSendDisabled}
           onClick={isRunning ? onStop : undefined}
           type={isRunning ? 'button' : 'submit'}
diff --git a/apps/extension/entrypoints/sidepanel/organization-credit-account.tsx b/apps/extension/entrypoints/sidepanel/organization-credit-account.tsx
index 5f56bbf0f3..99f56deecf 100644
--- a/apps/extension/entrypoints/sidepanel/organization-credit-account.tsx
+++ b/apps/extension/entrypoints/sidepanel/organization-credit-account.tsx
@@ -101,11 +101,11 @@ export const OrganizationCreditAccountSelect = ({
   organizationOptions: KiloOrganizationOption[];
   selectedOrganizationId: string;
 }): JSX.Element => (
-  <label className="grid gap-1 text-xs font-medium text-zinc-500">
+  <label className="grid gap-1 type-label text-foreground-muted">
     Credit account
     <select
       aria-label="Credit account"
-      className="h-8 rounded-md border border-zinc-800 bg-zinc-950 px-2 text-sm text-zinc-200 outline-none transition hover:border-zinc-700 focus:border-[#EDFF00] focus:ring-2 focus:ring-[#EDFF00]/30"
+      className="h-8 rounded-md border border-border-strong bg-input-bg px-2 type-body text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background"
       onChange={event => {
         onChange(event.currentTarget.value);
       }}
diff --git a/apps/extension/entrypoints/sidepanel/pending-memory-save-card.tsx b/apps/extension/entrypoints/sidepanel/pending-memory-save-card.tsx
index 1d1d49f05a..d605bce4e2 100644
--- a/apps/extension/entrypoints/sidepanel/pending-memory-save-card.tsx
+++ b/apps/extension/entrypoints/sidepanel/pending-memory-save-card.tsx
@@ -20,10 +20,10 @@ const CONFIRMATION_MESSAGE = 'Saved to memory';
 const TRUNCATION_NOTICE = 'Selection truncated to 8,000 characters';
 
 const secondaryButtonClass =
-  'h-8 rounded-md border border-zinc-700 px-3 text-sm font-medium text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-900 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50';
+  'type-label h-8 rounded-md border border-border bg-surface-overlay px-3 text-foreground-on-secondary transition hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background disabled:cursor-not-allowed disabled:bg-surface-selected disabled:text-foreground-subtle';
 
 const primaryButtonClass =
-  'h-8 rounded-md bg-[#EDFF00] px-3 text-sm font-semibold text-zinc-950 transition hover:bg-[#d9ea00] focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:bg-zinc-800 disabled:text-zinc-500';
+  'type-label h-8 rounded-md bg-brand-primary px-3 text-brand-primary-foreground transition hover:bg-brand-primary-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background disabled:cursor-not-allowed disabled:bg-surface-selected disabled:text-foreground-subtle';
 
 export const PendingMemorySaveCard = (): JSX.Element | null => {
   const { isLoaded, loadError, memories, pendingDraft, reload } = useAgentMemories();
@@ -117,12 +117,12 @@ export const PendingMemorySaveCard = (): JSX.Element | null => {
   return (
     <section
       aria-label="Add to memory"
-      className="shrink-0 border-b border-zinc-800 bg-zinc-950 px-3 py-3"
+      className="shrink-0 border-b border-border bg-surface-background px-3 py-3"
     >
-      <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-3">
+      <div className="rounded-xl border border-border bg-surface-raised p-3">
         {view.kind === 'confirmation' ? (
           <div className="flex flex-col gap-3">
-            <p className="text-sm text-zinc-200">{CONFIRMATION_MESSAGE}</p>
+            <p className="type-body text-foreground">{CONFIRMATION_MESSAGE}</p>
             <div className="flex justify-end">
               <button className={primaryButtonClass} onClick={handleDone} type="button">
                 Done
@@ -133,7 +133,7 @@ export const PendingMemorySaveCard = (): JSX.Element | null => {
 
         {view.kind === 'loadError' ? (
           <div className="flex flex-col gap-3">
-            <p className="text-sm text-zinc-300">{LOAD_ERROR_MESSAGE}</p>
+            <p className="type-body text-status-red-400">{LOAD_ERROR_MESSAGE}</p>
             <div className="flex justify-end">
               <button className={primaryButtonClass} onClick={reload} type="button">
                 Retry
@@ -146,7 +146,7 @@ export const PendingMemorySaveCard = (): JSX.Element | null => {
           <div className="flex flex-col gap-3">
             {view.kind === 'full' ? (
               <div className="flex flex-col gap-2">
-                <p className="text-sm text-zinc-300">{FULL_MESSAGE}</p>
+                <p className="type-body text-foreground">{FULL_MESSAGE}</p>
                 <div className="flex justify-end">
                   <button
                     className={secondaryButtonClass}
@@ -163,7 +163,7 @@ export const PendingMemorySaveCard = (): JSX.Element | null => {
 
             {view.kind === 'saveError' ? (
               <div className="flex flex-col gap-2">
-                <p className="text-sm text-zinc-300">{view.message}</p>
+                <p className="type-body text-status-red-400">{view.message}</p>
                 <div className="flex justify-end">
                   <button
                     className={primaryButtonClass}
@@ -182,22 +182,22 @@ export const PendingMemorySaveCard = (): JSX.Element | null => {
             {pendingDraft === undefined ? null : (
               <>
                 <div className="space-y-1">
-                  <p className="text-xs font-medium text-zinc-500">Selection</p>
-                  <p className="whitespace-pre-wrap break-words text-sm text-zinc-200">
+                  <p className="type-label text-foreground-muted">Selection</p>
+                  <p className="type-body whitespace-pre-wrap break-words text-foreground">
                     {buildDraftSelectionPreview(pendingDraft.text)}
                   </p>
                   {pendingDraft.truncated === true ? (
-                    <p className="text-xs text-zinc-500">{TRUNCATION_NOTICE}</p>
+                    <p className="type-label text-foreground-muted">{TRUNCATION_NOTICE}</p>
                   ) : null}
                 </div>
 
                 <div className="flex flex-col gap-1">
-                  <label className="text-xs font-medium text-zinc-500" htmlFor="memory-note">
+                  <label className="type-label text-foreground-muted" htmlFor="memory-note">
                     Note (optional)
                   </label>
                   <textarea
                     aria-label="Memory note (optional)"
-                    className="min-h-16 w-full resize-y rounded-md border border-zinc-800 bg-zinc-950 px-2 py-1.5 text-sm leading-5 text-zinc-200 outline-none transition hover:border-zinc-700 focus:border-[#EDFF00] focus:ring-2 focus:ring-[#EDFF00]/30"
+                    className="type-body min-h-16 w-full resize-y rounded-md border border-border-strong bg-input-bg px-2 py-1.5 text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
                     id="memory-note"
                     maxLength={MAX_MEMORY_NOTE_LENGTH}
                     onChange={event => {
@@ -205,7 +205,7 @@ export const PendingMemorySaveCard = (): JSX.Element | null => {
                     }}
                     value={note}
                   />
-                  <p className="text-right text-xs text-zinc-500">
+                  <p className="type-label text-right text-foreground-muted">
                     {noteCount.count}/{noteCount.max}
                   </p>
                 </div>
diff --git a/apps/extension/entrypoints/sidepanel/remote-mcp-settings.tsx b/apps/extension/entrypoints/sidepanel/remote-mcp-settings.tsx
index 9cf9abd064..6da9d0dd2c 100644
--- a/apps/extension/entrypoints/sidepanel/remote-mcp-settings.tsx
+++ b/apps/extension/entrypoints/sidepanel/remote-mcp-settings.tsx
@@ -68,15 +68,18 @@ const formFromServer = (server: RemoteMcpServer): FormState => {
 };
 
 const inputClass =
-  'h-8 w-full rounded-md border border-zinc-800 bg-zinc-950 px-2 text-sm text-zinc-200 outline-none transition hover:border-zinc-700 focus:border-[#EDFF00] focus:ring-2 focus:ring-[#EDFF00]/30';
+  'h-8 w-full rounded-md border border-border-strong bg-input-bg px-2 type-body text-foreground outline-none transition placeholder:text-foreground-subtle focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background';
 
-const labelClass = 'text-xs font-medium text-zinc-500';
+const labelClass = 'type-label text-foreground-muted';
+
+const filledSecondaryButtonClass =
+  'rounded-md border border-border bg-surface-overlay type-label text-foreground-on-secondary outline-none transition hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background';
 
 const SavedSecret = ({ onReplace }: { onReplace: () => void }): JSX.Element => (
   <div className="flex items-center gap-2">
-    <span className="text-sm text-zinc-500">••••••• saved</span>
+    <span className="type-body text-foreground-muted">••••••• saved</span>
     <button
-      className="text-xs text-zinc-400 underline hover:text-zinc-200"
+      className="type-label text-foreground-muted underline hover:text-foreground"
       onClick={onReplace}
       type="button"
     >
@@ -268,42 +271,42 @@ const ServerForm = ({
       <div className="flex items-center gap-2">
         <input
           checked={form.enabled}
-          className="rounded border-zinc-700"
+          className="rounded border border-border-strong"
           id="enabled"
           onChange={ev => {
             set('enabled', ev.target.checked);
           }}
           type="checkbox"
         />
-        <label className="text-sm text-zinc-300" htmlFor="enabled">
+        <label className="type-body text-foreground" htmlFor="enabled">
           Enabled
         </label>
       </div>
       <div className="flex items-center gap-2">
         <input
           checked={form.allowInSafeMode}
-          className="rounded border-zinc-700"
+          className="rounded border border-border-strong"
           id="allowInSafeMode"
           onChange={ev => {
             set('allowInSafeMode', ev.target.checked);
           }}
           type="checkbox"
         />
-        <label className="text-sm text-zinc-300" htmlFor="allowInSafeMode">
+        <label className="type-body text-foreground" htmlFor="allowInSafeMode">
           Allow in safe mode
         </label>
       </div>
-      {error === null ? null : <p className="text-xs text-red-400">{error}</p>}
+      {error === null ? null : <p className="type-label text-status-red-400">{error}</p>}
       <div className="flex gap-2">
         <button
-          className="h-9 flex-1 rounded-md border border-zinc-700 px-3 text-sm font-medium text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-900 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950 disabled:opacity-50"
+          className={`h-9 flex-1 px-3 ${filledSecondaryButtonClass} disabled:cursor-not-allowed disabled:bg-surface-selected disabled:text-foreground-subtle`}
           disabled={saving}
           type="submit"
         >
           {saving ? 'Saving…' : 'Save'}
         </button>
         <button
-          className="h-9 rounded-md border border-zinc-800 px-3 text-sm text-zinc-400 transition hover:border-zinc-700 hover:text-zinc-200 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
+          className={`h-9 px-3 ${filledSecondaryButtonClass}`}
           onClick={onCancel}
           type="button"
         >
@@ -338,7 +341,7 @@ const ServerRow = ({
   };
 
   return (
-    <div className="min-w-0 rounded-md border border-zinc-800 bg-zinc-900/40 p-3">
+    <div className="min-w-0 rounded-xl border border-border bg-surface-raised p-3">
       <div className="flex min-w-0 flex-wrap items-start justify-between gap-2">
         <div className="min-w-0 flex-1">
           <button
@@ -349,24 +352,24 @@ const ServerRow = ({
             type="button"
           >
             {expanded ? (
-              <ChevronDown aria-hidden="true" className="size-4 shrink-0 text-zinc-500" />
+              <ChevronDown aria-hidden="true" className="size-4 shrink-0 text-foreground-muted" />
             ) : (
-              <ChevronRight aria-hidden="true" className="size-4 shrink-0 text-zinc-500" />
+              <ChevronRight aria-hidden="true" className="size-4 shrink-0 text-foreground-muted" />
             )}
-            <span className="text-sm font-medium text-zinc-100">{server.displayName}</span>
+            <span className="type-body font-medium text-foreground">{server.displayName}</span>
           </button>
-          <p className="ml-5 truncate text-xs text-zinc-500">{server.url}</p>
-          <p className="ml-5 text-xs text-zinc-500">
+          <p className="ml-5 truncate type-label text-foreground-muted">{server.url}</p>
+          <p className="ml-5 type-label text-foreground-muted">
             {formatToolCount(server.cachedTools.length)} ·{' '}
             {formatLastConnected(server.lastConnectedAt)}
           </p>
           {server.lastError === undefined ? null : (
-            <p className="ml-5 truncate text-xs text-red-400">{server.lastError}</p>
+            <p className="ml-5 truncate type-label text-status-red-400">{server.lastError}</p>
           )}
         </div>
         <div className="flex shrink-0 items-center gap-1">
           <button
-            className="flex h-9 items-center gap-1 rounded-md border border-zinc-700 px-2 text-xs font-medium text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-900 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950 disabled:opacity-50"
+            className={`flex h-9 items-center gap-1 px-2 ${filledSecondaryButtonClass} disabled:cursor-not-allowed disabled:bg-surface-selected disabled:text-foreground-subtle`}
             disabled={connecting}
             onClick={() => void handleConnect()}
             type="button"
@@ -376,7 +379,7 @@ const ServerRow = ({
           </button>
           <button
             aria-label={`Edit ${server.displayName}`}
-            className="flex size-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-300 transition hover:border-zinc-700 hover:bg-zinc-900 hover:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
+            className={`flex size-8 items-center justify-center ${filledSecondaryButtonClass}`}
             onClick={() => {
               onEdit(server);
             }}
@@ -386,7 +389,7 @@ const ServerRow = ({
           </button>
           <button
             aria-label={`Remove ${server.displayName}`}
-            className="flex size-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-300 transition hover:border-zinc-700 hover:bg-zinc-900 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
+            className="flex size-8 items-center justify-center rounded-md border border-border bg-surface-overlay text-foreground-on-secondary outline-none transition hover:border-status-red-500/50 hover:bg-status-red-500/10 hover:text-status-red-300 focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background"
             onClick={() => {
               onRemove(server.id);
             }}
@@ -398,7 +401,7 @@ const ServerRow = ({
       </div>
       {expanded && server.cachedTools.length > 0 ? (
         <div className="mt-2 overflow-x-auto">
-          <pre className="font-mono text-xs text-zinc-400">
+          <pre className="font-mono text-xs text-foreground-muted">
             {toolsToJsonString(server.cachedTools)}
           </pre>
         </div>
@@ -480,7 +483,7 @@ export const RemoteMcpSettings = (): JSX.Element => {
       <p className={labelClass}>Remote MCP servers</p>
       {store.servers.map(server =>
         editingServer?.id === server.id ? (
-          <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-3" key={server.id}>
+          <div className="rounded-xl border border-border bg-surface-raised p-3" key={server.id}>
             <ServerForm existingServer={server} onCancel={handleCancelForm} onSave={handleSave} />
           </div>
         ) : (
@@ -494,12 +497,12 @@ export const RemoteMcpSettings = (): JSX.Element => {
         )
       )}
       {showAddForm ? (
-        <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-3">
+        <div className="rounded-xl border border-border bg-surface-raised p-3">
           <ServerForm onCancel={handleCancelForm} onSave={handleSave} />
         </div>
       ) : (
         <button
-          className="flex h-9 items-center gap-2 rounded-md border border-zinc-700 px-3 text-sm text-zinc-400 transition hover:border-zinc-600 hover:bg-zinc-900 hover:text-zinc-200 focus:outline-none focus:ring-2 focus:ring-[#EDFF00] focus:ring-offset-2 focus:ring-offset-zinc-950"
+          className={`flex h-9 items-center gap-2 px-3 ${filledSecondaryButtonClass}`}
           onClick={() => {
             setEditingServer(null);
             setShowAddForm(true);
diff --git a/apps/extension/entrypoints/sidepanel/style.css b/apps/extension/entrypoints/sidepanel/style.css
index f44f92b5d8..399ef6ed78 100644
--- a/apps/extension/entrypoints/sidepanel/style.css
+++ b/apps/extension/entrypoints/sidepanel/style.css
@@ -1,4 +1,150 @@
 @import 'tailwindcss';
+@import '@fontsource-variable/inter';
+@import '@fontsource-variable/roboto-mono';
+
+/* static: emit all token CSS variables even when unused in this slice (S2 will use them). Not @theme inline — literals stay here. */
+@theme static {
+  /* surfaces */
+  --color-surface-inset: #101010;
+  --color-surface-background: #151515;
+  --color-surface-raised: #202020;
+  --color-surface-overlay: #333333;
+  --color-surface-hover: #3a3a3a;
+  --color-surface-selected: #454545;
+  /* foreground */
+  --color-foreground: #fafafa;
+  --color-foreground-muted: #a3a3a3;
+  --color-foreground-subtle: #7a7a7a;
+  --color-foreground-on-secondary: #fafafa;
+  --color-foreground-on-destructive: #ffffff;
+  /* border */
+  --color-border: #ffffff1a;
+  --color-border-strong: #ffffff2e;
+  --color-input-bg: #ffffff0a;
+  /* brand */
+  --color-brand-primary: #f7f586;
+  --color-brand-primary-hover: #e6e475;
+  --color-brand-primary-foreground: #1f1f1f;
+  --color-brand-primary-ring: #f7f58659;
+  /* status families */
+  --color-status-blue-300: #93c5fd;
+  --color-status-blue-400: #60a5fa;
+  --color-status-blue-500: #3b82f6;
+  --color-status-blue-600: #2563eb;
+  --color-status-purple-300: #d8b4fe;
+  --color-status-purple-400: #c084fc;
+  --color-status-purple-500: #a855f7;
+  --color-status-purple-600: #9333ea;
+  --color-status-teal-300: #4ce7d7;
+  --color-status-teal-400: #00d4c2;
+  --color-status-teal-500: #00baa9;
+  --color-status-teal-600: #009689;
+  --color-status-gray-300: #d4d4d8;
+  --color-status-gray-400: #a1a1aa;
+  --color-status-gray-500: #71717a;
+  --color-status-gray-600: #52525b;
+  --color-status-orange-300: #fdba74;
+  --color-status-orange-400: #fb923c;
+  --color-status-orange-500: #f97316;
+  --color-status-orange-600: #ea580c;
+  --color-status-green-300: #86efac;
+  --color-status-green-400: #4ade80;
+  --color-status-green-500: #22c55e;
+  --color-status-green-600: #16a34a;
+  --color-status-yellow-300: #fdd94a;
+  --color-status-yellow-400: #fbc51c;
+  --color-status-yellow-500: #f0a900;
+  --color-status-yellow-600: #d28100;
+  --color-status-red-300: #fca5a5;
+  --color-status-red-400: #f87171;
+  --color-status-red-500: #ef4444;
+  --color-status-red-600: #dc2626;
+  /* syntax */
+  --color-syntax-plain: #e8e8e8;
+  --color-syntax-comment: #7a7a7a;
+  --color-syntax-keyword: #ff9ae2;
+  --color-syntax-string: #ecf58c;
+  --color-syntax-number: #f2b36b;
+  --color-syntax-function: #93e9f6;
+  --color-syntax-type: #00ceb9;
+  --color-syntax-property: #9cdcfe;
+  --color-syntax-constant: #c792ea;
+  --color-syntax-operator: #a3a3a3;
+  /* diff */
+  --color-diff-add-text: #9bcd97;
+  --color-diff-add-surface: #1a2919;
+  --color-diff-delete-text: #fc533a;
+  --color-diff-delete-surface: #42120b;
+  /* radius remap (do NOT set a --radius DEFAULT override; bare `rounded` already = 4px = sm) */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  /* fonts */
+  --font-sans: 'Inter Variable', Inter, system-ui, sans-serif;
+  --font-mono: 'Roboto Mono Variable', 'Roboto Mono', ui-monospace, monospace;
+}
+
+@utility type-title {
+  font-family: var(--font-sans);
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.015em;
+}
+
+@utility type-heading {
+  font-family: var(--font-sans);
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+@utility type-body-lg {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+@utility type-body {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+@utility type-label {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+@utility type-eyebrow {
+  font-family: var(--font-sans);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+@utility type-code {
+  font-family: var(--font-mono) !important;
+  font-size: 0.875rem !important;
+  font-weight: 400 !important;
+  line-height: 1.5 !important;
+}
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--color-border);
+  }
+}
 
 html,
 body,
@@ -9,7 +155,8 @@ body,
 }
 
 body {
-  background: #09090b;
+  background: var(--color-surface-background);
+  font-family: var(--font-sans);
   margin: 0;
 }
 
@@ -22,7 +169,7 @@ body {
 }
 
 .agent-conversation-scrollbar {
-  scrollbar-color: #52525b #09090b;
+  scrollbar-color: var(--color-surface-selected) var(--color-surface-background);
   scrollbar-width: thin;
 }
 
@@ -31,17 +178,17 @@ body {
 }
 
 .agent-conversation-scrollbar::-webkit-scrollbar-track {
-  background: #09090b;
+  background: var(--color-surface-background);
 }
 
 .agent-conversation-scrollbar::-webkit-scrollbar-thumb {
-  background: #3f3f46;
-  border: 0.1875rem solid #09090b;
+  background: var(--color-surface-selected);
+  border: 0.1875rem solid var(--color-surface-background);
   border-radius: 9999px;
 }
 
 .agent-conversation-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #52525b;
+  background: var(--color-surface-hover);
 }
 
 .agent-message-markdown {
@@ -56,6 +203,7 @@ body {
 }
 
 .agent-message-markdown :where(a) {
+  color: var(--color-status-blue-400);
   text-decoration: underline;
   text-underline-offset: 0.125rem;
 }
@@ -75,16 +223,17 @@ body {
 }
 
 .agent-message-markdown :where(code) {
-  background: rgb(9 9 11 / 70%);
+  background: var(--color-surface-inset);
   border-radius: 0.25rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
-  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
   overflow-wrap: anywhere;
   padding: 0.125rem 0.25rem;
 }
 
 .agent-message-markdown :where(table) {
   /* display:block + overflow-x lets a wide table scroll inside its own box instead of stretching the panel. */
+  /* font-size 0.75rem equals the contract label step (type-label). */
   border-collapse: collapse;
   display: block;
   font-size: 0.75rem;
@@ -93,19 +242,20 @@ body {
 }
 
 .agent-message-markdown :where(th, td) {
-  border: 1px solid rgb(63 63 70 / 100%);
+  border: 1px solid var(--color-border);
   padding: 0.25rem 0.5rem;
   text-align: left;
 }
 
 .agent-message-markdown :where(th) {
-  background: rgb(9 9 11 / 70%);
+  background: var(--color-surface-inset);
   font-weight: 600;
 }
 
 .agent-message-markdown :where(pre) {
-  background: rgb(9 9 11 / 70%);
+  background: var(--color-surface-inset);
   border-radius: 0.25rem;
+  font-family: var(--font-mono);
   overflow-x: hidden;
   padding: 0.5rem;
   white-space: pre-wrap;
diff --git a/apps/extension/package.json b/apps/extension/package.json
index 46ad05c5cc..9ba390a0ee 100644
--- a/apps/extension/package.json
+++ b/apps/extension/package.json
@@ -29,6 +29,8 @@
     "postinstall": "wxt prepare"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/roboto-mono": "^5.3.0",
     "@modelcontextprotocol/sdk": "1.29.0",
     "@tanstack/react-query": "catalog:",
     "@tanstack/react-virtual": "^3.14.3",
diff --git a/apps/extension/public/icon/128.png b/apps/extension/public/icon/128.png
index 8dbb8fbcc2..2c36b3fccd 100644
Binary files a/apps/extension/public/icon/128.png and b/apps/extension/public/icon/128.png differ
diff --git a/apps/extension/public/icon/16.png b/apps/extension/public/icon/16.png
index bdcbc1a9b1..951ab3b266 100644
Binary files a/apps/extension/public/icon/16.png and b/apps/extension/public/icon/16.png differ
diff --git a/apps/extension/public/icon/32.png b/apps/extension/public/icon/32.png
index 6ff801a3d1..9a6050774a 100644
Binary files a/apps/extension/public/icon/32.png and b/apps/extension/public/icon/32.png differ
diff --git a/apps/extension/public/icon/48.png b/apps/extension/public/icon/48.png
index 7b60547e10..99f6ca4998 100644
Binary files a/apps/extension/public/icon/48.png and b/apps/extension/public/icon/48.png differ
diff --git a/apps/extension/public/icon/96.png b/apps/extension/public/icon/96.png
index 3894322e18..a46be947e1 100644
Binary files a/apps/extension/public/icon/96.png and b/apps/extension/public/icon/96.png differ
diff --git a/apps/extension/public/icon/icon.svg b/apps/extension/public/icon/icon.svg
index e0603dabc2..3b948f6e9d 100644
--- a/apps/extension/public/icon/icon.svg
+++ b/apps/extension/public/icon/icon.svg
@@ -1,5 +1,5 @@
 <svg id="Kilo_Extension_Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <rect width="100" height="100" fill="#EDFF00" />
+  <rect width="100" height="100" fill="#F7F586" />
   <path
     fill="#000000"
     d="M0,0v100h100V0H0ZM92.5925926,92.5925926H7.4074074V7.4074074h85.1851852v85.1851852ZM61.1111044,71.9096084h9.2592593v7.4074074h-11.6402116l-5.026455-5.026455v-11.6402116h7.4074074v9.2592593ZM77.7777711,71.9096084h-7.4074074v-9.2592593h-9.2592593v-7.4074074h11.6402116l5.026455,5.026455v11.6402116ZM46.2962963,61.1114207h-7.4074074v-7.4074074h7.4074074v7.4074074ZM22.2222222,53.7040133h7.4074074v16.6666667h16.6666667v7.4074074h-19.047619l-5.026455-5.026455v-19.047619ZM77.7777711,38.8888889v7.4074074h-24.0740741v-7.4074074h8.2781918v-9.2592593h-8.2781918v-7.4074074h10.6591442l5.026455,5.026455v11.6402116h8.3884749ZM29.6296296,30.5555556h9.2592593l7.4074074,7.4074074v8.3333333h-7.4074074v-8.3333333h-9.2592593v8.3333333h-7.4074074v-24.0740741h7.4074074v8.3333333ZM46.2962963,30.5555556h-7.4074074v-8.3333333h7.4074074v8.3333333Z"
diff --git a/apps/extension/tests/e2e/design-tokens.test.ts b/apps/extension/tests/e2e/design-tokens.test.ts
new file mode 100644
index 0000000000..ded6a70550
--- /dev/null
+++ b/apps/extension/tests/e2e/design-tokens.test.ts
@@ -0,0 +1,614 @@
+/* eslint-disable id-length, import/no-nodejs-modules, jest/no-conditional-in-test, jest/valid-expect, max-lines, max-params, no-continue */
+/**
+ * Computed-style E2E for kilo-design token alignment (plan §4.8 Cases A–E).
+ * Pins token RGBs and font families only — no layout geometry.
+ */
+import { expect, test } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
+import { rm } from 'node:fs/promises';
+import {
+  launchExtensionContext,
+  seedExtensionAuth,
+  setExtensionStorage,
+  startFixtureServer,
+} from './extension-context-fixture';
+import { mockKiloApi } from './kilo-api-fixture';
+
+const safeToolNames = [
+  'get_page_snapshot',
+  'get_element_details',
+  'find_in_page',
+  'search_memories',
+  'get_memory',
+] as const;
+
+const modelWithContextLength = [
+  {
+    contextLength: 1000,
+    id: 'anthropic/claude-sonnet-4',
+    name: 'Anthropic: Claude Sonnet 4',
+    variants: { high: {}, low: {}, medium: {} },
+  },
+];
+
+const UNIQUE_USER_TEXT = 'Design-token user bubble 7f3a9c';
+const THINKING_BODY = 'Reasoning about the page snapshot…';
+const CONVERSATION_ID = 'design-tokens-conv-1';
+const CONVERSATION_TITLE = 'Design token seed conversation';
+
+/** Schema-valid conversation seed for Cases C and E (inline — no @/ imports). */
+const designTokenConversationStore = {
+  activeConversationId: CONVERSATION_ID,
+  conversations: [
+    {
+      events: [
+        {
+          id: 'evt-user-1',
+          role: 'user',
+          text: UNIQUE_USER_TEXT,
+          type: 'message',
+        },
+        {
+          id: 'evt-assistant-1',
+          role: 'assistant',
+          text: 'Here is a sample:\n\n```ts\nconst answer = 42;\n```\n\nDone.',
+          type: 'message',
+        },
+        {
+          id: 'evt-thinking-1',
+          text: THINKING_BODY,
+          type: 'thinking',
+        },
+        {
+          id: 'evt-tool-ok-call',
+          name: 'get_page_snapshot',
+          tabId: 1,
+          type: 'tool-call',
+        },
+        {
+          id: 'evt-tool-ok-result',
+          ok: true,
+          toolCallId: 'evt-tool-ok-call',
+          type: 'tool-result',
+          value: '{"title":"Fixture page"}',
+        },
+        {
+          id: 'evt-tool-fail-call',
+          name: 'get_page_snapshot',
+          tabId: 1,
+          type: 'tool-call',
+        },
+        {
+          error: 'snapshot timed out',
+          id: 'evt-tool-fail-result',
+          ok: false,
+          toolCallId: 'evt-tool-fail-call',
+          type: 'tool-result',
+        },
+        {
+          error: 'orphan tool failed',
+          id: 'evt-standalone-fail',
+          ok: false,
+          toolCallId: 'no-such-call',
+          type: 'tool-result',
+        },
+      ],
+      id: CONVERSATION_ID,
+      title: CONVERSATION_TITLE,
+      updatedAt: '2026-07-25T10:00:00.000Z',
+    },
+  ],
+  openConversationIds: [CONVERSATION_ID],
+};
+
+interface ComputedStyles {
+  backgroundColor: string;
+  borderTopColor: string;
+  borderTopWidth: string;
+  color: string;
+  fontFamily: string;
+  fontSize: string;
+  textTransform: string;
+}
+
+const readComputed = (locator: Locator): Promise<ComputedStyles> =>
+  locator.evaluate(element => {
+    const style = getComputedStyle(element);
+
+    return {
+      backgroundColor: style.backgroundColor,
+      borderTopColor: style.borderTopColor,
+      borderTopWidth: style.borderTopWidth,
+      color: style.color,
+      fontFamily: style.fontFamily,
+      fontSize: style.fontSize,
+      textTransform: style.textTransform,
+    };
+  });
+
+interface RgbaChannels {
+  readonly alpha: number;
+  readonly blue: number;
+  readonly green: number;
+  readonly red: number;
+}
+
+const parseRgba = (value: string): RgbaChannels => {
+  const commaMatch = value.match(
+    /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/u
+  );
+
+  if (commaMatch !== null) {
+    const [, redRaw, greenRaw, blueRaw, alphaRaw] = commaMatch;
+
+    return {
+      alpha: alphaRaw === undefined ? 1 : Number.parseFloat(alphaRaw),
+      blue: Number.parseFloat(blueRaw ?? '0'),
+      green: Number.parseFloat(greenRaw ?? '0'),
+      red: Number.parseFloat(redRaw ?? '0'),
+    };
+  }
+
+  // Modern browsers may serialize as `rgb(r g b / a)`.
+  const slashMatch = value.match(
+    /^rgba?\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+%?))?\s*\)$/u
+  );
+
+  if (slashMatch === null) {
+    throw new Error(`Could not parse color: ${value}`);
+  }
+
+  const [, redRaw, greenRaw, blueRaw, alphaRaw] = slashMatch;
+  let alpha = 1;
+
+  if (alphaRaw !== undefined) {
+    alpha = alphaRaw.endsWith('%')
+      ? Number.parseFloat(alphaRaw) / 100
+      : Number.parseFloat(alphaRaw);
+  }
+
+  return {
+    alpha,
+    blue: Number.parseFloat(blueRaw ?? '0'),
+    green: Number.parseFloat(greenRaw ?? '0'),
+    red: Number.parseFloat(redRaw ?? '0'),
+  };
+};
+
+const expectRgb = (
+  value: string,
+  expected: { blue: number; green: number; red: number },
+  label: string
+): void => {
+  const parsed = parseRgba(value);
+  expect(parsed.red, `${label} red from ${value}`).toBe(expected.red);
+  expect(parsed.green, `${label} green from ${value}`).toBe(expected.green);
+  expect(parsed.blue, `${label} blue from ${value}`).toBe(expected.blue);
+};
+
+const expectBorderTop = (
+  styles: Pick<ComputedStyles, 'borderTopColor' | 'borderTopWidth'>,
+  channels: RgbaChannels,
+  label: string
+): void => {
+  expect(styles.borderTopWidth, `${label} border-top-width`).toBe('1px');
+  const parsed = parseRgba(styles.borderTopColor);
+  expect(parsed.red, `${label} border red`).toBe(channels.red);
+  expect(parsed.green, `${label} border green`).toBe(channels.green);
+  expect(parsed.blue, `${label} border blue`).toBe(channels.blue);
+  expect(
+    Math.abs(parsed.alpha - channels.alpha),
+    `${label} border alpha from ${styles.borderTopColor}`
+  ).toBeLessThanOrEqual(0.01);
+};
+
+const borderDefault: RgbaChannels = { alpha: 0.102, blue: 255, green: 255, red: 255 };
+const borderError: RgbaChannels = { alpha: 1, blue: 68, green: 68, red: 239 };
+
+const openSignedInPanel = async (
+  context: Awaited<ReturnType<typeof launchExtensionContext>>['context'],
+  extensionId: string,
+  fixtureUrl: string
+): Promise<Page> => {
+  const page = await context.newPage();
+  await page.goto(fixtureUrl);
+
+  const sidePanel = await context.newPage();
+  await sidePanel.goto(`chrome-extension://${extensionId}/sidepanel.html`);
+  await seedExtensionAuth(sidePanel);
+  await sidePanel.reload();
+
+  return sidePanel;
+};
+
+const conversationPane = (sidePanel: Page): Locator => sidePanel.getByLabel('Agent conversation');
+
+const seedConversationAndReload = async (sidePanel: Page): Promise<void> => {
+  await setExtensionStorage(sidePanel, { kiloAgentConversations: designTokenConversationStore });
+  await sidePanel.reload();
+  // Scope to the transcript pane — the tab label also mirrors the first user message.
+  await expect(conversationPane(sidePanel).getByText(UNIQUE_USER_TEXT)).toBeVisible();
+};
+
+/** Wait until computed background settles (class transitions can leave mid-blend RGB). */
+const expectBackgroundRgb = async (
+  locator: Locator,
+  expected: { blue: number; green: number; red: number },
+  label: string
+): Promise<ComputedStyles> => {
+  await expect
+    .poll(
+      async () => {
+        const styles = await readComputed(locator);
+        const parsed = parseRgba(styles.backgroundColor);
+
+        return `${parsed.red},${parsed.green},${parsed.blue}`;
+      },
+      { timeout: 5000 }
+    )
+    .toBe(`${expected.red},${expected.green},${expected.blue}`);
+
+  const styles = await readComputed(locator);
+  expectRgb(styles.backgroundColor, expected, label);
+
+  return styles;
+};
+
+test('Case A — shell tokens', async () => {
+  const fixture = await startFixtureServer();
+  const { context, extensionId, userDataDir } = await launchExtensionContext();
+
+  try {
+    await mockKiloApi(context, { toolNames: [...safeToolNames] });
+    const sidePanel = await openSignedInPanel(context, extensionId, fixture.url);
+
+    await expect(sidePanel.getByLabel('Message agent')).toBeVisible();
+
+    const bodyStyles = await sidePanel.locator('body').evaluate(element => {
+      const style = getComputedStyle(element);
+
+      return {
+        backgroundColor: style.backgroundColor,
+        fontFamily: style.fontFamily,
+      };
+    });
+
+    expectRgb(bodyStyles.backgroundColor, { blue: 21, green: 21, red: 21 }, 'body background');
+    expect(bodyStyles.fontFamily, `body font-family ${bodyStyles.fontFamily}`).toMatch(/Inter/u);
+
+    const footer = sidePanel.locator('footer');
+    await expect(footer).toBeVisible();
+    const footerStyles = await readComputed(footer);
+    expectRgb(footerStyles.backgroundColor, { blue: 32, green: 32, red: 32 }, 'footer background');
+    expectBorderTop(footerStyles, borderDefault, 'footer');
+  } finally {
+    await context.close();
+    await fixture.close();
+    await rm(userDataDir, { force: true, recursive: true });
+  }
+});
+
+test('Case B — enabled Send brand', async () => {
+  const fixture = await startFixtureServer();
+  const { context, extensionId, userDataDir } = await launchExtensionContext();
+
+  try {
+    await mockKiloApi(context, { toolNames: [...safeToolNames] });
+    const sidePanel = await openSignedInPanel(context, extensionId, fixture.url);
+
+    await sidePanel.getByLabel('Message agent').fill('Draft for brand assert');
+    const sendButton = sidePanel.getByRole('button', { name: 'Send message' });
+    await expect(sendButton).toBeEnabled();
+    // Move pointer off the control so hover: styles cannot override brand fill.
+    await sidePanel.mouse.move(0, 0);
+    await expect(sendButton).toHaveClass(/bg-brand-primary/u);
+
+    const styles = await expectBackgroundRgb(
+      sendButton,
+      { blue: 134, green: 245, red: 247 },
+      'enabled Send background'
+    );
+    expectRgb(styles.color, { blue: 31, green: 31, red: 31 }, 'enabled Send color');
+    expect(styles.borderTopWidth, 'enabled Send border-top-width').toBe('1px');
+  } finally {
+    await context.close();
+    await fixture.close();
+    await rm(userDataDir, { force: true, recursive: true });
+  }
+});
+
+test('Case B — disabled Send', async () => {
+  const fixture = await startFixtureServer();
+  const { context, extensionId, userDataDir } = await launchExtensionContext();
+
+  try {
+    await mockKiloApi(context, { toolNames: [...safeToolNames] });
+    const sidePanel = await openSignedInPanel(context, extensionId, fixture.url);
+
+    const sendButton = sidePanel.getByRole('button', { name: 'Send message' });
+    await expect(sendButton).toBeDisabled();
+    await sidePanel.mouse.move(0, 0);
+
+    const styles = await expectBackgroundRgb(
+      sendButton,
+      { blue: 69, green: 69, red: 69 },
+      'disabled Send background'
+    );
+    expectRgb(styles.color, { blue: 122, green: 122, red: 122 }, 'disabled Send color');
+  } finally {
+    await context.close();
+    await fixture.close();
+    await rm(userDataDir, { force: true, recursive: true });
+  }
+});
+
+test('Case B — Stop secondary', async () => {
+  const fixture = await startFixtureServer();
+  const { promise: pendingCompletion, resolve: releaseCompletion } = Promise.withResolvers<void>();
+  const { context, extensionId, userDataDir } = await launchExtensionContext();
+
+  try {
+    await mockKiloApi(context, {
+      beforeFirstCompletion: () => pendingCompletion,
+      firstCompletionEvents: [{ choices: [{ delta: { content: 'Should not finish yet.' } }] }],
+      toolNames: [...safeToolNames],
+    });
+
+    const sidePanel = await openSignedInPanel(context, extensionId, fixture.url);
+
+    await sidePanel.getByLabel('Message agent').fill('Hold the turn open');
+    const sendButton = sidePanel.getByRole('button', { name: 'Send message' });
+    await expect(sendButton).toBeEnabled();
+    await sendButton.click();
+
+    const stopButton = sidePanel.getByRole('button', { name: 'Stop' });
+    await expect(stopButton).toBeVisible();
+    // Clear hover from the submit click so hover:bg-surface-hover cannot win.
+    await sidePanel.mouse.move(0, 0);
+    await expect(stopButton).toHaveClass(/bg-surface-overlay/u);
+
+    const styles = await expectBackgroundRgb(
+      stopButton,
+      { blue: 51, green: 51, red: 51 },
+      'Stop background'
+    );
+    expectBorderTop(styles, borderDefault, 'Stop');
+  } finally {
+    releaseCompletion();
+    await context.close();
+    await fixture.close();
+    await rm(userDataDir, { force: true, recursive: true });
+  }
+});
+
+test('Case C — transcript recipes', async () => {
+  const fixture = await startFixtureServer();
+  const { context, extensionId, userDataDir } = await launchExtensionContext();
+
+  try {
+    await mockKiloApi(context, { toolNames: [...safeToolNames] });
+    const sidePanel = await openSignedInPanel(context, extensionId, fixture.url);
+    await seedConversationAndReload(sidePanel);
+    const pane = conversationPane(sidePanel);
+
+    // User bubble
+    const userText = pane.getByText(UNIQUE_USER_TEXT);
+    await expect(userText).toBeVisible();
+    const userBubble = userText.locator('xpath=ancestor::div[contains(@class,"rounded")][1]');
+    const userStyles = await expectBackgroundRgb(
+      userBubble,
+      { blue: 32, green: 32, red: 32 },
+      'user bubble background'
+    );
+    expectRgb(userStyles.color, { blue: 250, green: 250, red: 250 }, 'user bubble color');
+    expectBorderTop(userStyles, borderDefault, 'user bubble');
+
+    // Markdown mono (fenced block)
+    const fenceCode = pane.locator('.agent-message-markdown pre code').first();
+    await expect(fenceCode).toBeVisible();
+    const monoStyles = await readComputed(fenceCode);
+    expect(monoStyles.fontFamily, `mono font ${monoStyles.fontFamily}`).toMatch(/Roboto Mono/u);
+    expect(monoStyles.fontSize, 'mono font-size').toBe('14px');
+
+    // Error panel shell
+    const errorSummary = pane.getByText('get_page_snapshot failed', { exact: true });
+    await expect(errorSummary).toBeVisible();
+    const errorPanel = errorSummary.locator('xpath=ancestor::details[1]');
+    const errorStyles = await expectBackgroundRgb(
+      errorPanel,
+      { blue: 11, green: 18, red: 66 },
+      'error panel background'
+    );
+    expectBorderTop(errorStyles, borderError, 'error panel');
+
+    // Nested Error label (expand first)
+    await errorSummary.click();
+    const errorLabel = errorPanel.getByText('Error', { exact: true });
+    await expect(errorLabel).toBeVisible();
+    const errorLabelStyles = await readComputed(errorLabel);
+    expectRgb(errorLabelStyles.color, { blue: 165, green: 165, red: 252 }, 'Error label color');
+
+    // Success well
+    const successSummary = pane.getByText('get_page_snapshot completed', { exact: true });
+    await expect(successSummary).toBeVisible();
+    const successPanel = successSummary.locator('xpath=ancestor::details[1]');
+    const successStyles = await expectBackgroundRgb(
+      successPanel,
+      { blue: 16, green: 16, red: 16 },
+      'success well background'
+    );
+    expectBorderTop(successStyles, borderDefault, 'success well');
+    const successTitleStyles = await readComputed(successSummary);
+    expectRgb(
+      successTitleStyles.color,
+      { blue: 250, green: 250, red: 250 },
+      'success summary color'
+    );
+
+    // Thinking
+    const thinkingLabel = pane.getByText('thinking', { exact: true });
+    await expect(thinkingLabel).toBeVisible();
+    const thinkingPanel = thinkingLabel.locator('xpath=ancestor::details[1]');
+    const thinkingStyles = await expectBackgroundRgb(
+      thinkingPanel,
+      { blue: 16, green: 16, red: 16 },
+      'thinking background'
+    );
+    expectBorderTop(thinkingStyles, borderDefault, 'thinking');
+    const thinkingLabelStyles = await readComputed(thinkingLabel);
+    expectRgb(
+      thinkingLabelStyles.color,
+      { blue: 163, green: 163, red: 163 },
+      'thinking summary color'
+    );
+
+    // Standalone error event
+    const standaloneTitle = pane.getByText('tool error', { exact: true });
+    await expect(standaloneTitle).toBeVisible();
+    const standaloneRoot = standaloneTitle.locator(
+      'xpath=ancestor::div[contains(@class,"rounded")][1]'
+    );
+    const standaloneStyles = await expectBackgroundRgb(
+      standaloneRoot,
+      { blue: 11, green: 18, red: 66 },
+      'standalone error background'
+    );
+    expectBorderTop(standaloneStyles, borderError, 'standalone error');
+
+    // Agent message container (unpainted canvas)
+    const agentPre = pane.locator('.agent-message-markdown pre').first();
+    await expect(agentPre).toBeVisible();
+    const agentContainer = agentPre.locator('xpath=ancestor::div[contains(@class,"rounded")][1]');
+    const agentStyles = await readComputed(agentContainer);
+    expect(agentStyles.backgroundColor, 'agent container fill').toMatch(
+      /^(?:rgba?\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)|rgba?\(\s*0\s+0\s+0\s*\/\s*0\s*\)|transparent)$/u
+    );
+    expect(agentStyles.borderTopWidth, 'agent container border-top-width').toBe('0px');
+  } finally {
+    await context.close();
+    await fixture.close();
+    await rm(userDataDir, { force: true, recursive: true });
+  }
+});
+
+test('Case D — donut status stroke', async () => {
+  const fixture = await startFixtureServer();
+  const { context, extensionId, userDataDir } = await launchExtensionContext();
+
+  try {
+    await mockKiloApi(context, {
+      firstCompletionEvents: [
+        { choices: [{ delta: { content: 'Donut reply.' } }] },
+        { choices: [], usage: { completion_tokens: 10, prompt_tokens: 850, total_tokens: 860 } },
+      ],
+      models: modelWithContextLength,
+      toolNames: [...safeToolNames],
+    });
+
+    const sidePanel = await openSignedInPanel(context, extensionId, fixture.url);
+
+    await sidePanel.getByLabel('Message agent').fill('Show me usage');
+    await expect(sidePanel.getByRole('button', { name: 'Send message' })).toBeEnabled();
+    await sidePanel.getByLabel('Message agent').press('Enter');
+    await expect(sidePanel.getByText('Donut reply.')).toBeVisible();
+
+    const donut = sidePanel.getByLabel(/^Context usage:/u);
+    await expect(donut).toBeVisible();
+    // Readiness gate: warn tone only after 85% is reflected in the label.
+    await expect(donut).toHaveAttribute('aria-label', /85%/u);
+
+    const stroke = await donut.locator('circle[stroke-dasharray]').getAttribute('stroke');
+    expect(stroke?.toLowerCase(), `donut stroke ${stroke}`).toBe('#f0a900');
+    expect(stroke?.toLowerCase()).not.toBe('#edff00');
+
+    // Track circle (no dasharray) must step down from the overlay button fill.
+    const trackStroke = await donut
+      .locator('circle:not([stroke-dasharray])')
+      .getAttribute('stroke');
+    expect(trackStroke?.toLowerCase(), `donut track stroke ${trackStroke}`).toBe('#151515');
+    const donutBg = await donut.evaluate(element => getComputedStyle(element).backgroundColor);
+    expectRgb(donutBg, { blue: 51, green: 51, red: 51 }, 'donut summary button background');
+  } finally {
+    await context.close();
+    await fixture.close();
+    await rm(userDataDir, { force: true, recursive: true });
+  }
+});
+
+test('Case E — eyebrow + old-paint scan', async () => {
+  const fixture = await startFixtureServer();
+  const { context, extensionId, userDataDir } = await launchExtensionContext();
+
+  try {
+    await mockKiloApi(context, { toolNames: [...safeToolNames] });
+    const sidePanel = await openSignedInPanel(context, extensionId, fixture.url);
+    await seedConversationAndReload(sidePanel);
+
+    await sidePanel.getByLabel('History').click();
+    // History rows use getStoredConversationTitle (first user message), not store.title.
+    await expect(sidePanel.getByText(UNIQUE_USER_TEXT).first()).toBeVisible();
+
+    const openChip = sidePanel.locator('span.type-eyebrow', { hasText: /^Open$/u });
+    await expect(openChip).toBeVisible();
+    const chipStyles = await readComputed(openChip);
+    expect(chipStyles.fontSize, 'Open chip font-size').toBe('11px');
+    expect(chipStyles.textTransform, 'Open chip text-transform').toBe('uppercase');
+
+    // Bounded old-paint scan: no legacy brand yellow or zinc-950 body paint.
+    // Compare parsed RGB channels (alpha-agnostic) so serialization form does not matter.
+    const colorSamples = await sidePanel.locator('body *').evaluateAll(elements =>
+      elements.flatMap(element => {
+        if (!(element instanceof HTMLElement)) {
+          return [];
+        }
+
+        const { backgroundColor, color } = getComputedStyle(element);
+
+        return [
+          {
+            backgroundColor,
+            className: String(element.className),
+            color,
+            tag: element.tagName.toLowerCase(),
+          },
+        ];
+      })
+    );
+
+    const bannedChannels = [
+      { blue: 0, green: 255, red: 237 },
+      { blue: 11, green: 9, red: 9 },
+    ] as const;
+
+    const offenders = colorSamples.flatMap(sample => {
+      const matchesBanned = (value: string): boolean => {
+        try {
+          const parsed = parseRgba(value);
+
+          return bannedChannels.some(
+            banned =>
+              parsed.red === banned.red &&
+              parsed.green === banned.green &&
+              parsed.blue === banned.blue
+          );
+        } catch {
+          return false;
+        }
+      };
+
+      if (!matchesBanned(sample.color) && !matchesBanned(sample.backgroundColor)) {
+        return [];
+      }
+
+      return [
+        `${sample.tag}.${sample.className}: color=${sample.color} bg=${sample.backgroundColor}`,
+      ];
+    });
+
+    expect(offenders, offenders.join('\n')).toStrictEqual([]);
+  } finally {
+    await context.close();
+    await fixture.close();
+    await rm(userDataDir, { force: true, recursive: true });
+  }
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93a744806e..590007df0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -182,6 +182,12 @@ importers:
 
   apps/extension:
     dependencies:
+      '@fontsource-variable/inter':
+        specifier: ^5.3.0
+        version: 5.3.0
+      '@fontsource-variable/roboto-mono':
+        specifier: ^5.3.0
+        version: 5.3.0
       '@modelcontextprotocol/sdk':
         specifier: 1.29.0
         version: 1.29.0(zod@4.4.3)
@@ -4903,6 +4909,12 @@ packages:
     resolution: {integrity: sha512-5D2qVpZrgpjtqU4eNOcWGp1gnUCgjfM+vKGE2y03kKN6z5EBhtx0qdRFbg8QuNNj8wXNoX93KJoYb+NqoxswmQ==}
     engines: {node: '>=14.0.0', npm: '>=7.0.0'}
 
+  '@fontsource-variable/inter@5.3.0':
+    resolution: {integrity: sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==}
+
+  '@fontsource-variable/roboto-mono@5.3.0':
+    resolution: {integrity: sha512-h5r+KY/6qy8JEOj33JgcrFO81YAnvrc1EAwMpl/EPJLb2OIvOy0/jmB5M7qs7x/uXk5JUP5Ux4LrkeOK7faHkQ==}
+
   '@fregante/relaxed-json@2.0.0':
     resolution: {integrity: sha512-PyUXQWB42s4jBli435TDiYuVsadwRHnMc27YaLouINktvTWsL3FcKrRMGawTayFk46X+n5bE23RjUTWQwrukWw==}
     engines: {node: '>= 0.10.0'}
@@ -20776,6 +20788,10 @@ snapshots:
 
   '@fluent/syntax@0.19.0': {}
 
+  '@fontsource-variable/inter@5.3.0': {}
+
+  '@fontsource-variable/roboto-mono@5.3.0': {}
+
   '@fregante/relaxed-json@2.0.0': {}
 
   '@google/genai@2.7.0(@modelcontextprotocol/sdk@1.29.0(zod@4.4.3))(bufferutil@4.1.0)(utf-8-validate@6.0.6)':