From 40877bc120f85cf07d19857e3b9c11206ac78dca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BF=AE=E9=9B=A8?=
 <47820304+PeterGuy326@users.noreply.github.com>
Date: Wed, 16 Sep 2026 00:46:04 +0800
Subject: [PATCH 1/2] fix(web): improve control contrast and centered labels

---
 CHANGELOG.md                                  |  5 +++
 web/src/components/explorer/ContextMenu.tsx   |  6 +--
 web/src/components/explorer/FileGrid.tsx      |  4 +-
 web/src/components/layout/TopBar.tsx          |  2 +-
 .../memory/CreateRelationDialog.tsx           |  8 ++--
 .../components/memory/ForgetMemoryDialog.tsx  |  8 ++--
 web/src/components/memory/MemoryFilters.tsx   | 10 ++---
 web/src/components/ui/Badge.tsx               |  4 +-
 web/src/components/ui/Button.tsx              |  6 +--
 web/src/components/ui/Card.tsx                |  2 +-
 web/src/components/ui/ConfirmDialog.test.tsx  | 38 +++++++++++++++++++
 web/src/components/ui/ConfirmDialog.tsx       | 19 +++++-----
 web/src/pages/CheckpointDetailPage.tsx        |  8 ++--
 web/src/pages/FileDetailPage.tsx              |  2 +-
 web/src/pages/MemoriesPage.tsx                |  6 +--
 web/src/pages/PermissionsPage.tsx             | 12 +++---
 web/src/pages/ProvidersPage.tsx               |  4 +-
 web/src/pages/SearchPage.tsx                  |  4 +-
 web/src/pages/TaskDetailPage.tsx              |  8 ++--
 web/src/pages/TasksPage.tsx                   |  6 +--
 web/src/pages/TransferPage.tsx                | 22 +++++------
 web/src/styles/globals.css                    | 10 ++---
 22 files changed, 120 insertions(+), 74 deletions(-)
 create mode 100644 web/src/components/ui/ConfirmDialog.test.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7bdac57..70d5206 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -75,6 +75,11 @@ The project publishes 0.x prerelease versions; a stable release line is not yet
 
 ### Fixed
 
+- Improve web caption and status contrast in both themes, including tinted danger
+  buttons, and center action labels, context menus, badges, dialog prompts, and
+  overview/detail headings. Restore localized cancel/confirm labels when a
+  confirmation dialog caller omits custom action text.
+
 - A configured URL that carries credentials in a shape `url.Parse` does not
   report as userinfo no longer reaches output. `admin:pw@host` parses as
   `Scheme="admin"` with the credential in `Opaque` and `User` unset, so an
diff --git a/web/src/components/explorer/ContextMenu.tsx b/web/src/components/explorer/ContextMenu.tsx
index d12b0d3..8913d84 100644
--- a/web/src/components/explorer/ContextMenu.tsx
+++ b/web/src/components/explorer/ContextMenu.tsx
@@ -102,7 +102,7 @@ function ContextMenuView({ state, onClose }: { state: ContextMenuState; onClose:
                 requestAnimationFrame(() => item.onSelect());
               }}
               className={cn(
-                'flex w-full items-center gap-2 px-2.5 py-1.5 text-sm rounded-sm mx-1 my-0.5',
+                'grid w-[calc(100%-0.5rem)] grid-cols-[1fr_auto_1fr] items-center gap-2 px-2.5 py-1.5 text-center text-sm rounded-sm mx-1 my-0.5',
                 'transition-colors',
                 item.disabled
                   ? 'text-fg-subtle cursor-not-allowed'
@@ -111,9 +111,9 @@ function ContextMenuView({ state, onClose }: { state: ContextMenuState; onClose:
                     : 'text-fg-muted hover:bg-bg-inset hover:text-fg',
               )}
             >
-              <span className="flex-1 text-left">{item.label}</span>
+              <span className="col-start-2">{item.label}</span>
               {item.shortcut && (
-                <span className="text-2xs text-fg-subtle tabular-nums">{item.shortcut}</span>
+                <span className="col-start-3 justify-self-end text-2xs text-fg-subtle tabular-nums">{item.shortcut}</span>
               )}
             </button>
           </React.Fragment>
diff --git a/web/src/components/explorer/FileGrid.tsx b/web/src/components/explorer/FileGrid.tsx
index 458aa1c..677a046 100644
--- a/web/src/components/explorer/FileGrid.tsx
+++ b/web/src/components/explorer/FileGrid.tsx
@@ -73,6 +73,7 @@ export function FileGrid(props: FileGridProps) {
         <div className="flex flex-col items-center text-center gap-2 p-2 rounded-lg border border-dashed border-accent/40 bg-accent/5">
           <FolderClosed className="h-12 w-12 text-fg-subtle" />
           <RenameInput
+            className="text-center"
             initial={tt('drive.untitledFolder')}
             placeholder={tt('drive.folderName')}
             preserveExtension={false}
@@ -218,6 +219,7 @@ function FolderCard({
       <FolderClosed className="h-14 w-14 text-accent/80" strokeWidth={1.4} />
       {renaming ? (
         <RenameInput
+            className="text-center"
           initial={folder.name}
           preserveExtension={false}
           onCommit={onCommitRename}
@@ -286,7 +288,7 @@ function FileCard({
         {file.index_status !== 'done' && <StatusOverlay status={file.index_status} />}
       </div>
       {renaming ? (
-        <RenameInput initial={file.name} onCommit={onCommitRename} onCancel={onCancelRename} />
+        <RenameInput className="text-center" initial={file.name} onCommit={onCommitRename} onCancel={onCancelRename} />
       ) : (
         <div className="text-xs text-fg truncate w-full" title={file.name}>
           {file.name}
diff --git a/web/src/components/layout/TopBar.tsx b/web/src/components/layout/TopBar.tsx
index 97bd25b..9f5f646 100644
--- a/web/src/components/layout/TopBar.tsx
+++ b/web/src/components/layout/TopBar.tsx
@@ -186,7 +186,7 @@ export function TopBar({ children }: { children?: React.ReactNode }) {
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="w-full justify-start text-danger hover:text-danger"
+                    className="w-full text-danger hover:text-danger"
                     onClick={() => {
                       logout();
                       navigate('/login');
diff --git a/web/src/components/memory/CreateRelationDialog.tsx b/web/src/components/memory/CreateRelationDialog.tsx
index 06bdeb7..01455ca 100644
--- a/web/src/components/memory/CreateRelationDialog.tsx
+++ b/web/src/components/memory/CreateRelationDialog.tsx
@@ -104,11 +104,11 @@ export function CreateRelationDialog({
           className="fixed left-1/2 top-1/2 z-50 w-[560px] max-w-[94vw] -translate-x-1/2 -translate-y-1/2
                      rounded-lg border border-border bg-bg-panel p-5 shadow-soft animate-fade-in"
         >
-          <div className="flex items-start gap-3">
+          <div className="relative flex flex-col items-center gap-3 px-7">
             <div className="grid h-9 w-9 flex-none place-items-center rounded-md border border-accent/30 bg-accent/10 text-accent">
               <Icon className="h-4 w-4" />
             </div>
-            <div className="min-w-0 flex-1">
+            <div className="min-w-0 w-full text-center">
               <Dialog.Title className="text-base font-semibold text-fg">
                 {t(`memories.relationDialog.title.${relationType}`)}
               </Dialog.Title>
@@ -121,7 +121,7 @@ export function CreateRelationDialog({
                 type="button"
                 disabled={busy}
                 aria-label={t('action.close')}
-                className="text-fg-subtle transition-colors hover:text-fg disabled:opacity-50"
+                className="absolute right-0 top-0 grid h-6 w-6 place-items-center text-fg-subtle transition-colors hover:text-fg disabled:opacity-50"
               >
                 <X className="h-4 w-4" />
               </button>
@@ -166,7 +166,7 @@ export function CreateRelationDialog({
             <select
               value={peerMode}
               onChange={(event) => setPeerMode(event.target.value as 'list' | 'manual')}
-              className="h-9 rounded-md border border-border bg-bg-inset px-3 text-sm text-fg outline-none focus:border-accent/60"
+              className="h-9 rounded-md border border-border bg-bg-inset px-3 text-center [text-align-last:center] text-sm text-fg outline-none focus:border-accent/60"
             >
               <option value="list">{t('memories.relationDialog.peerFromList')}</option>
               <option value="manual">{t('memories.relationDialog.peerManual')}</option>
diff --git a/web/src/components/memory/ForgetMemoryDialog.tsx b/web/src/components/memory/ForgetMemoryDialog.tsx
index f6168bd..0b8e3e0 100644
--- a/web/src/components/memory/ForgetMemoryDialog.tsx
+++ b/web/src/components/memory/ForgetMemoryDialog.tsx
@@ -51,11 +51,11 @@ export function ForgetMemoryDialog({
           className="fixed left-1/2 top-1/2 z-50 w-[520px] max-w-[94vw] -translate-x-1/2 -translate-y-1/2
                      rounded-lg border border-danger/35 bg-bg-panel p-5 shadow-soft animate-fade-in"
         >
-          <div className="flex items-start gap-3">
+          <div className="relative flex flex-col items-center gap-3 px-7">
             <div className="grid h-9 w-9 flex-none place-items-center rounded-md border border-danger/30 bg-danger/10 text-danger">
               <AlertTriangle className="h-4 w-4" />
             </div>
-            <div className="min-w-0 flex-1">
+            <div className="min-w-0 w-full text-center">
               <Dialog.Title className="text-base font-semibold text-fg">
                 {t('memory.forgetTitle')}
               </Dialog.Title>
@@ -68,7 +68,7 @@ export function ForgetMemoryDialog({
                 type="button"
                 disabled={busy}
                 aria-label={t('action.close')}
-                className="text-fg-subtle transition-colors hover:text-fg disabled:opacity-50"
+                className="absolute right-0 top-0 grid h-6 w-6 place-items-center text-fg-subtle transition-colors hover:text-fg disabled:opacity-50"
               >
                 <X className="h-4 w-4" />
               </button>
@@ -92,7 +92,7 @@ export function ForgetMemoryDialog({
             <select
               value={reason}
               onChange={(event) => setReason(event.target.value as MemoryForgetReason)}
-              className="h-9 rounded-md border border-border bg-bg-inset px-3 text-sm text-fg outline-none focus:border-accent/60"
+              className="h-9 rounded-md border border-border bg-bg-inset px-3 text-center [text-align-last:center] text-sm text-fg outline-none focus:border-accent/60"
             >
               {REASONS.map((candidate) => (
                 <option key={candidate} value={candidate}>
diff --git a/web/src/components/memory/MemoryFilters.tsx b/web/src/components/memory/MemoryFilters.tsx
index 58a7afa..e82f848 100644
--- a/web/src/components/memory/MemoryFilters.tsx
+++ b/web/src/components/memory/MemoryFilters.tsx
@@ -64,13 +64,13 @@ export function MemoryFilters({
       </form>
 
       <label className="grid gap-1">
-        <span className="text-2xs uppercase tracking-wider text-fg-subtle">{t('memory.kind')}</span>
+        <span className="text-center text-2xs uppercase tracking-wider text-fg-subtle">{t('memory.kind')}</span>
         <select
           value={value.kind ?? ''}
           onChange={(event) =>
             update({ kind: (event.target.value || undefined) as MemoryKind | undefined })
           }
-          className="h-9 rounded-md border border-border bg-bg-inset px-2.5 text-xs text-fg outline-none focus:border-accent/60"
+          className="h-9 rounded-md border border-border bg-bg-inset px-2.5 text-center [text-align-last:center] text-xs text-fg outline-none focus:border-accent/60"
           aria-label={t('memory.kind')}
         >
           <option value="">{t('memory.allKinds')}</option>
@@ -83,7 +83,7 @@ export function MemoryFilters({
       </label>
 
       <div className="grid gap-1">
-        <span className="inline-flex items-center gap-1 text-2xs uppercase tracking-wider text-fg-subtle">
+        <span className="inline-flex items-center justify-center gap-1 text-center text-2xs uppercase tracking-wider text-fg-subtle">
           <Filter className="h-3 w-3" />
           {t('memory.visibility')}
         </span>
@@ -109,7 +109,7 @@ export function MemoryFilters({
 
       <div className="flex items-end gap-2">
         <label className="grid min-w-28 flex-1 gap-1">
-          <span className="text-2xs uppercase tracking-wider text-fg-subtle">
+          <span className="text-center text-2xs uppercase tracking-wider text-fg-subtle">
             {t('memory.pinFilter')}
           </span>
           <select
@@ -119,7 +119,7 @@ export function MemoryFilters({
                 pinned: event.target.value === '' ? undefined : event.target.value === 'true',
               })
             }
-            className="h-9 rounded-md border border-border bg-bg-inset px-2.5 text-xs text-fg outline-none focus:border-accent/60"
+            className="h-9 rounded-md border border-border bg-bg-inset px-2.5 text-center [text-align-last:center] text-xs text-fg outline-none focus:border-accent/60"
             aria-label={t('memory.pinFilter')}
           >
             <option value="">{t('memory.pinAny')}</option>
diff --git a/web/src/components/ui/Badge.tsx b/web/src/components/ui/Badge.tsx
index 929b3c4..3f04f55 100644
--- a/web/src/components/ui/Badge.tsx
+++ b/web/src/components/ui/Badge.tsx
@@ -23,8 +23,8 @@ export function Badge({ className, tone = 'neutral', dot, children, ...rest }: B
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-1.5 rounded-md border px-1.5 py-0.5 text-2xs font-medium',
-        'tracking-wide whitespace-nowrap',
+        'inline-flex items-center justify-center gap-1.5 rounded-md border px-1.5 py-0.5 text-2xs font-medium',
+        'text-center tracking-wide whitespace-nowrap',
         TONE[tone],
         className,
       )}
diff --git a/web/src/components/ui/Button.tsx b/web/src/components/ui/Button.tsx
index fbda135..f45cee4 100644
--- a/web/src/components/ui/Button.tsx
+++ b/web/src/components/ui/Button.tsx
@@ -6,7 +6,7 @@ type Size = 'sm' | 'md' | 'lg' | 'icon';
 
 const VARIANT: Record<Variant, string> = {
   primary:
-    'bg-accent text-bg hover:bg-accent-hover shadow-soft active:translate-y-px disabled:bg-accent/40 disabled:text-bg/60',
+    'bg-accent text-bg hover:bg-accent-hover shadow-soft active:translate-y-px',
   secondary:
     'bg-bg-inset text-fg border border-border hover:border-border-strong hover:bg-bg-panel',
   ghost: 'text-fg-muted hover:text-fg hover:bg-bg-inset',
@@ -36,9 +36,9 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={disabled || loading}
         className={cn(
-          'inline-flex items-center justify-center rounded-md font-medium',
+          'inline-flex items-center justify-center rounded-md text-center font-medium',
           'transition-colors duration-150 select-none whitespace-nowrap',
-          'disabled:cursor-not-allowed disabled:opacity-60',
+          'disabled:cursor-not-allowed disabled:bg-bg-inset disabled:text-fg-subtle disabled:border-border disabled:shadow-none',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/60 focus-visible:ring-offset-2 focus-visible:ring-offset-bg',
           SIZE[size],
           VARIANT[variant],
diff --git a/web/src/components/ui/Card.tsx b/web/src/components/ui/Card.tsx
index a47cd06..17f706b 100644
--- a/web/src/components/ui/Card.tsx
+++ b/web/src/components/ui/Card.tsx
@@ -21,7 +21,7 @@ export function CardHeader({ className, ...rest }: React.HTMLAttributes<HTMLDivE
 export function CardTitle({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('text-xs font-medium uppercase tracking-wider text-fg-muted', className)}
+      className={cn('flex flex-1 items-center justify-center gap-1.5 text-center text-xs font-medium uppercase tracking-wider text-fg-muted', className)}
       {...rest}
     />
   );
diff --git a/web/src/components/ui/ConfirmDialog.test.tsx b/web/src/components/ui/ConfirmDialog.test.tsx
new file mode 100644
index 0000000..bfe0b61
--- /dev/null
+++ b/web/src/components/ui/ConfirmDialog.test.tsx
@@ -0,0 +1,38 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { I18nProvider } from '@/i18n';
+import { ConfirmDialog } from './ConfirmDialog';
+
+describe('ConfirmDialog action labels', () => {
+  it.each([
+    ['en', 'Cancel', 'Confirm'],
+    ['zh', '取消', '确认'],
+  ])('keeps default actions visible and cancel safe in %s', async (language, cancel, confirm) => {
+    const onConfirm = vi.fn();
+    const onOpenChange = vi.fn();
+    const dialogTitle = 'Fixture action';
+    const dialogDescription = 'Synthetic confirmation fixture';
+    render(
+      <I18nProvider>
+        <ConfirmDialog
+          open
+          title={dialogTitle}
+          description={dialogDescription}
+          onOpenChange={onOpenChange}
+          onConfirm={onConfirm}
+        />
+      </I18nProvider>,
+    );
+
+    act(() => window.dispatchEvent(new StorageEvent('storage', {
+      key: 'mem.lang',
+      newValue: language,
+    })));
+
+    expect(screen.getByRole('button', { name: confirm })).toBeVisible();
+    await userEvent.click(screen.getByRole('button', { name: cancel }));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+});
diff --git a/web/src/components/ui/ConfirmDialog.tsx b/web/src/components/ui/ConfirmDialog.tsx
index 2536492..63e56ac 100644
--- a/web/src/components/ui/ConfirmDialog.tsx
+++ b/web/src/components/ui/ConfirmDialog.tsx
@@ -1,7 +1,7 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import { Button } from './Button';
 import { X } from 'lucide-react';
-import { tt } from '@/i18n';
+import { useT } from '@/i18n';
 
 export interface ConfirmDialogProps {
   open: boolean;
@@ -24,6 +24,7 @@ export function ConfirmDialog({
   destructive,
   onConfirm,
 }: ConfirmDialogProps) {
+  const { t } = useT();
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Portal>
@@ -32,26 +33,26 @@ export function ConfirmDialog({
           className="fixed left-1/2 top-1/2 z-50 w-[420px] max-w-[92vw] -translate-x-1/2 -translate-y-1/2
                      rounded-lg border border-border bg-bg-panel p-5 shadow-soft animate-fade-in"
         >
-          <div className="flex items-start justify-between gap-4">
-            <Dialog.Title className="text-base font-semibold text-fg">{title}</Dialog.Title>
+          <div className="relative px-7">
+            <Dialog.Title className="text-center text-base font-semibold text-fg">{title}</Dialog.Title>
             <Dialog.Close asChild>
               <button
-                aria-label={tt('action.close')}
-                className="text-fg-subtle hover:text-fg transition-colors"
+                aria-label={t('action.close')}
+                className="absolute right-0 top-0 grid h-6 w-6 place-items-center text-fg-subtle hover:text-fg transition-colors"
               >
                 <X className="h-4 w-4" />
               </button>
             </Dialog.Close>
           </div>
           {description && (
-            <Dialog.Description className="mt-2 text-sm text-fg-muted leading-relaxed">
+            <Dialog.Description className="mt-2 text-center text-sm text-fg-muted leading-relaxed">
               {description}
             </Dialog.Description>
           )}
-          <div className="mt-5 flex items-center justify-end gap-2">
+          <div className="mt-5 flex items-center justify-center gap-2">
             <Dialog.Close asChild>
               <Button variant="ghost" size="sm">
-                {cancelText}
+                {cancelText ?? t('action.cancel')}
               </Button>
             </Dialog.Close>
             <Button
@@ -62,7 +63,7 @@ export function ConfirmDialog({
                 onOpenChange(false);
               }}
             >
-              {confirmText}
+              {confirmText ?? t('action.confirm')}
             </Button>
           </div>
         </Dialog.Content>
diff --git a/web/src/pages/CheckpointDetailPage.tsx b/web/src/pages/CheckpointDetailPage.tsx
index 7f8db82..ffb3f4b 100644
--- a/web/src/pages/CheckpointDetailPage.tsx
+++ b/web/src/pages/CheckpointDetailPage.tsx
@@ -94,8 +94,8 @@ export function CheckpointDetailPage() {
         {t('task.backToTask')}
       </Link>
 
-      <header className="mb-7 border-l-2 border-accent pl-4">
-        <div className="mb-2 flex flex-wrap items-center gap-2">
+      <header className="mb-7 text-center">
+        <div className="mb-2 flex flex-wrap items-center justify-center gap-2">
           <span className="font-mono text-2xs uppercase tracking-[0.16em] text-fg-subtle">
             {taskKey}
           </span>
@@ -106,10 +106,10 @@ export function CheckpointDetailPage() {
           <TaskStatusBadge status={state.status} />
           <CheckpointKindBadge kind={record.checkpoint_kind} />
         </div>
-        <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="flex flex-col items-center gap-3">
           <div>
             <h1 className="text-2xl font-semibold tracking-tight">{t('checkpoint.title')}</h1>
-            <p className="mt-1.5 max-w-3xl text-sm leading-6 text-fg-muted">
+            <p className="mx-auto mt-1.5 max-w-3xl text-sm leading-6 text-fg-muted">
               {state.progress.summary}
             </p>
           </div>
diff --git a/web/src/pages/FileDetailPage.tsx b/web/src/pages/FileDetailPage.tsx
index 2c05f72..24d162a 100644
--- a/web/src/pages/FileDetailPage.tsx
+++ b/web/src/pages/FileDetailPage.tsx
@@ -103,7 +103,7 @@ export function FileDetailPage() {
           {t('common.back')}
         </Button>
         <div className="flex-1 min-w-0">
-          <div className="text-sm text-fg truncate">{file.name}</div>
+          <div className="text-center text-sm text-fg truncate">{file.name}</div>
           <div className="text-2xs text-fg-subtle font-mono truncate">{file.path}</div>
         </div>
         <Button variant="ghost" size="sm" onClick={copyId}>
diff --git a/web/src/pages/MemoriesPage.tsx b/web/src/pages/MemoriesPage.tsx
index 0cc4a6b..aaca46d 100644
--- a/web/src/pages/MemoriesPage.tsx
+++ b/web/src/pages/MemoriesPage.tsx
@@ -198,8 +198,8 @@ export function MemoriesPage() {
 
   return (
     <div className="mx-auto max-w-[1500px] px-5 py-7 lg:px-8 lg:py-9">
-      <header className="mb-6 border-l-2 border-accent pl-4">
-        <div className="mb-2 flex flex-wrap items-center gap-2 font-mono text-2xs uppercase tracking-[0.18em] text-fg-subtle">
+      <header className="mb-6 text-center">
+        <div className="mb-2 flex flex-wrap items-center justify-center gap-2 font-mono text-2xs uppercase tracking-[0.18em] text-fg-subtle">
           <ShieldCheck className="h-3.5 w-3.5 text-accent" />
           {t('memory.trustSurface')}
           {capabilities.data.workspace.name && (
@@ -210,7 +210,7 @@ export function MemoriesPage() {
           )}
         </div>
         <h1 className="text-2xl font-semibold tracking-tight">{t('memory.title')}</h1>
-        <p className="mt-1.5 max-w-3xl text-sm leading-6 text-fg-muted">{t('memory.subtitle')}</p>
+        <p className="mx-auto mt-1.5 max-w-3xl text-sm leading-6 text-fg-muted">{t('memory.subtitle')}</p>
       </header>
 
       <div className={memoryId ? 'hidden xl:block' : undefined}>
diff --git a/web/src/pages/PermissionsPage.tsx b/web/src/pages/PermissionsPage.tsx
index fc57237..6cac164 100644
--- a/web/src/pages/PermissionsPage.tsx
+++ b/web/src/pages/PermissionsPage.tsx
@@ -144,7 +144,7 @@ export function PermissionsPage() {
 
   const header = (
     <>
-      <div className="flex items-center gap-3 mb-1">
+      <div className="flex flex-wrap items-center justify-center gap-3 mb-1">
         <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
           <ShieldCheck className="h-5 w-5 text-accent" /> {t('permissions.title')}
         </h1>
@@ -155,7 +155,7 @@ export function PermissionsPage() {
           </Button>
         )}
       </div>
-      <p className="text-sm text-fg-muted mb-6">{t('permissions.description')}</p>
+      <p className="text-center text-sm text-fg-muted mb-6">{t('permissions.description')}</p>
     </>
   );
 
@@ -207,13 +207,13 @@ export function PermissionsPage() {
 
       {/* ---- Issued tokens / sessions ---- */}
       <section className="mb-10" data-testid="tokens-section">
-        <div className="flex items-center gap-2 mb-1">
+        <div className="flex items-center justify-center gap-2 mb-1">
           <KeyRound className="h-4 w-4 text-accent" aria-hidden="true" />
           <h2 className="text-base font-semibold tracking-tight">
             {t('permissions.tokens.title')}
           </h2>
         </div>
-        <p className="text-xs text-fg-muted mb-3">{t('permissions.tokens.description')}</p>
+        <p className="text-center text-xs text-fg-muted mb-3">{t('permissions.tokens.description')}</p>
 
         {tokensForbidden ? (
           forbiddenPanel('tokens-forbidden')
@@ -302,13 +302,13 @@ export function PermissionsPage() {
 
       {/* ---- durable-context recall grants ---- */}
       <section data-testid="grants-section">
-        <div className="flex items-center gap-2 mb-1">
+        <div className="flex items-center justify-center gap-2 mb-1">
           <ScrollText className="h-4 w-4 text-accent" aria-hidden="true" />
           <h2 className="text-base font-semibold tracking-tight">
             {t('permissions.grants.title')}
           </h2>
         </div>
-        <p className="text-xs text-fg-muted mb-3">{t('permissions.grants.description')}</p>
+        <p className="text-center text-xs text-fg-muted mb-3">{t('permissions.grants.description')}</p>
 
         {grantsForbidden ? (
           forbiddenPanel('grants-forbidden')
diff --git a/web/src/pages/ProvidersPage.tsx b/web/src/pages/ProvidersPage.tsx
index 36ceec3..9495fe2 100644
--- a/web/src/pages/ProvidersPage.tsx
+++ b/web/src/pages/ProvidersPage.tsx
@@ -171,7 +171,7 @@ export function ProvidersPage() {
 
   return (
     <div className="mx-auto max-w-3xl px-8 py-10">
-      <div className="flex items-center gap-3 mb-1">
+      <div className="flex flex-wrap items-center justify-center gap-3 mb-1">
         <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
           <Settings className="h-5 w-5 text-accent" /> {t('providers.title')}
         </h1>
@@ -183,7 +183,7 @@ export function ProvidersPage() {
           {t('providers.refresh')}
         </Button>
       </div>
-      <p className="text-sm text-fg-muted mb-6">{t('providers.description')}</p>
+      <p className="text-center text-sm text-fg-muted mb-6">{t('providers.description')}</p>
 
       {entitlement && (
         <section
diff --git a/web/src/pages/SearchPage.tsx b/web/src/pages/SearchPage.tsx
index 289f4bb..c52f5af 100644
--- a/web/src/pages/SearchPage.tsx
+++ b/web/src/pages/SearchPage.tsx
@@ -110,8 +110,8 @@ export function SearchPage() {
         >
           <ArrowLeft className="h-3.5 w-3.5" /> {t('common.backToDrive')}
         </Link>
-        <h1 className="text-2xl font-semibold tracking-tight">{t('search.title')}</h1>
-        <p className="mt-1.5 text-sm text-fg-muted">{t('search.subtitle')}</p>
+        <h1 className="text-center text-2xl font-semibold tracking-tight">{t('search.title')}</h1>
+        <p className="mt-1.5 text-center text-sm text-fg-muted">{t('search.subtitle')}</p>
         <div className="mt-5 relative">
           <Input
             value={q}
diff --git a/web/src/pages/TaskDetailPage.tsx b/web/src/pages/TaskDetailPage.tsx
index b02c79b..b4d4336 100644
--- a/web/src/pages/TaskDetailPage.tsx
+++ b/web/src/pages/TaskDetailPage.tsx
@@ -33,8 +33,8 @@ export function TaskDetailPage() {
         {t('task.backToTasks')}
       </Link>
 
-      <header className="mb-7">
-        <div className="mb-2 flex flex-wrap items-center gap-2">
+      <header className="mb-7 text-center">
+        <div className="mb-2 flex flex-wrap items-center justify-center gap-2">
           <ScrollText className="h-4 w-4 text-accent" />
           <span className="font-mono text-2xs uppercase tracking-[0.16em] text-fg-subtle">
             {t('task.taskKey')}
@@ -43,7 +43,7 @@ export function TaskDetailPage() {
         </div>
         <h1 className="break-all font-mono text-2xl font-semibold text-fg">{taskKey}</h1>
         {head && (
-          <div className="mt-2 flex flex-wrap gap-x-5 gap-y-2 text-xs text-fg-muted">
+          <div className="mt-2 flex flex-wrap justify-center gap-x-5 gap-y-2 text-xs text-fg-muted">
             <span className="inline-flex items-center gap-1.5">
               <FolderClosed className="h-3.5 w-3.5" />
               <span className="font-mono">{head.scope_path}</span>
@@ -83,7 +83,7 @@ export function TaskDetailPage() {
           <ResumePanel taskKey={taskKey} />
           <div>
             <div className="mb-3 flex items-baseline justify-between gap-3">
-              <h2 className="text-sm font-medium text-fg">{t('task.timeline')}</h2>
+              <h2 className="flex-1 text-center text-sm font-medium text-fg">{t('task.timeline')}</h2>
               <span className="font-mono text-2xs text-fg-subtle">
                 {t('task.latestCount', { n: items.length })}
               </span>
diff --git a/web/src/pages/TasksPage.tsx b/web/src/pages/TasksPage.tsx
index 49809b1..e589b38 100644
--- a/web/src/pages/TasksPage.tsx
+++ b/web/src/pages/TasksPage.tsx
@@ -94,8 +94,8 @@ export function TasksPage() {
 
   return (
     <div className="mx-auto max-w-6xl px-8 py-10">
-      <header className="mb-7 border-l-2 border-accent pl-4">
-        <div className="mb-2 flex flex-wrap items-center gap-2 font-mono text-2xs uppercase tracking-[0.18em] text-fg-subtle">
+      <header className="mb-7 text-center">
+        <div className="mb-2 flex flex-wrap items-center justify-center gap-2 font-mono text-2xs uppercase tracking-[0.18em] text-fg-subtle">
           <GitCommitHorizontal className="h-3.5 w-3.5 text-accent" />
           {t('task.portableLedger')}
           {capabilities.data?.workspace.name && (
@@ -106,7 +106,7 @@ export function TasksPage() {
           )}
         </div>
         <h1 className="text-2xl font-semibold tracking-tight">{t('task.title')}</h1>
-        <p className="mt-1.5 max-w-2xl text-sm leading-6 text-fg-muted">
+        <p className="mx-auto mt-1.5 max-w-2xl text-sm leading-6 text-fg-muted">
           {t('task.subtitle')}
         </p>
       </header>
diff --git a/web/src/pages/TransferPage.tsx b/web/src/pages/TransferPage.tsx
index 44b36eb..e8c7a29 100644
--- a/web/src/pages/TransferPage.tsx
+++ b/web/src/pages/TransferPage.tsx
@@ -312,12 +312,12 @@ function ExportCard({
   const enabled = supported && permitted;
   return (
     <Card className="min-w-0" data-testid="workspace-export-card">
-      <CardHeader className="flex flex-row items-start justify-between gap-3">
+      <CardHeader className="relative px-16 text-center">
         <div className="min-w-0">
           <CardTitle>{t('transfer.export.eyebrow')}</CardTitle>
           <h2 className="mt-1.5 text-lg font-semibold">{t('transfer.export.title')}</h2>
         </div>
-        <div className="grid h-9 w-9 flex-none place-items-center rounded-md border border-accent/20 bg-accent/10 text-accent">
+        <div className="absolute right-4 top-3 grid h-9 w-9 place-items-center rounded-md border border-accent/20 bg-accent/10 text-accent">
           <ArrowDownToLine className="h-4 w-4" aria-hidden="true" />
         </div>
       </CardHeader>
@@ -483,12 +483,12 @@ function ImportCard({
 
   return (
     <Card className="min-w-0" data-testid="workspace-import-card">
-      <CardHeader className="flex flex-row items-start justify-between gap-3">
+      <CardHeader className="relative px-16 text-center">
         <div className="min-w-0">
           <CardTitle>{t('transfer.import.eyebrow')}</CardTitle>
           <h2 className="mt-1.5 text-lg font-semibold">{t('transfer.import.title')}</h2>
         </div>
-        <div className="grid h-9 w-9 flex-none place-items-center rounded-md border border-accent/20 bg-accent/10 text-accent">
+        <div className="absolute right-4 top-3 grid h-9 w-9 place-items-center rounded-md border border-accent/20 bg-accent/10 text-accent">
           <ArrowUpFromLine className="h-4 w-4" aria-hidden="true" />
         </div>
       </CardHeader>
@@ -724,12 +724,12 @@ function ImportHistoryCard({ workspaceID }: { workspaceID: string }) {
 
   return (
     <Card className="min-w-0" data-testid="workspace-import-history">
-      <CardHeader className="flex flex-row items-start justify-between gap-3">
+      <CardHeader className="relative px-16 text-center">
         <div className="min-w-0">
           <CardTitle>{t('transfer.history.eyebrow')}</CardTitle>
           <h2 className="mt-1.5 text-lg font-semibold">{t('transfer.history.title')}</h2>
         </div>
-        <div className="grid h-9 w-9 flex-none place-items-center rounded-md border border-accent/20 bg-accent/10 text-accent">
+        <div className="absolute right-4 top-3 grid h-9 w-9 place-items-center rounded-md border border-accent/20 bg-accent/10 text-accent">
           <History className="h-4 w-4" aria-hidden="true" />
         </div>
       </CardHeader>
@@ -791,19 +791,19 @@ function WorkspaceTransferSurface({ capabilities }: { capabilities: Capabilities
 
   return (
     <main className="mx-auto w-full max-w-6xl space-y-5 px-4 py-7 sm:px-6 sm:py-10">
-      <header className="min-w-0">
-        <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-[0.16em] text-accent">
+      <header className="min-w-0 text-center">
+        <div className="flex items-center justify-center gap-2 text-xs font-medium uppercase tracking-[0.16em] text-accent">
           <ArrowLeftRight className="h-3.5 w-3.5" aria-hidden="true" />
           {t('transfer.eyebrow')}
         </div>
-        <div className="mt-2 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div className="mt-2 flex flex-col items-center gap-3">
           <div className="min-w-0">
             <h1 className="text-2xl font-semibold sm:text-3xl">{t('transfer.title')}</h1>
-            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-fg-muted">
+            <p className="mx-auto mt-2 max-w-3xl text-sm leading-relaxed text-fg-muted">
               {t('transfer.subtitle')}
             </p>
           </div>
-          <Badge tone="neutral" className="self-start sm:self-auto">
+          <Badge tone="neutral" className="self-center">
             <Fingerprint className="h-3 w-3" aria-hidden="true" />
             {t('transfer.evidenceLedger')}
           </Badge>
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 343c9a3..fac8b63 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -19,7 +19,7 @@
 
   --fg: 232 234 240; /* primary text */
   --fg-muted: 156 163 175; /* secondary text */
-  --fg-subtle: 107 114 128; /* tertiary, captions */
+  --fg-subtle: 139 148 165; /* captions remain readable on inset surfaces */
 
   --border: 30 35 46;
   --border-strong: 48 55 72;
@@ -44,15 +44,15 @@
   --bg-inset: 240 242 246;
   --fg: 17 24 39;
   --fg-muted: 75 85 99;
-  --fg-subtle: 107 114 128;
+  --fg-subtle: 96 104 118;
   --border: 226 230 237;
   --border-strong: 203 213 225;
   --accent: 79 70 229;
   --accent-hover: 67 56 202;
   --accent-muted: 224 231 255;
-  --success: 5 150 105;
-  --warn: 217 119 6;
-  --danger: 220 38 38;
+  --success: 6 95 70;
+  --warn: 146 64 14;
+  --danger: 153 27 27;
   --shadow-soft: 0 1px 0 0 rgb(255 255 255 / 0.8) inset, 0 1px 3px 0 rgb(15 23 42 / 0.12);
 
   color-scheme: light;

From 7d941998167c4c6dadd27be348d9b96e1ec28e03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BF=AE=E9=9B=A8?=
 <47820304+PeterGuy326@users.noreply.github.com>
Date: Wed, 16 Sep 2026 10:17:37 +0800
Subject: [PATCH 2/2] fix(web): share design tokens and semantic alignment

---
 CHANGELOG.md                                  |   2 +
 web/design-system/LICENSE                     | 201 ++++++++
 web/design-system/README.md                   |  37 ++
 web/design-system/tokens.json                 | 483 ++++++++++++++++++
 web/index.html                                |   8 +-
 web/localization-acceptance.mjs               |   2 +-
 web/package.json                              |   5 +-
 web/scripts/design-tokens.mjs                 | 136 +++++
 web/src/components/explorer/ContextMenu.tsx   |   6 +-
 web/src/components/explorer/FileGrid.tsx      |  22 +-
 web/src/components/explorer/FileList.tsx      |   9 +-
 web/src/components/layout/TopBar.tsx          |   2 +-
 .../memory/CreateRelationDialog.tsx           |   6 +-
 .../components/memory/ForgetMemoryDialog.tsx  |   6 +-
 web/src/components/memory/MemoryDetail.tsx    |   4 +-
 web/src/components/memory/MemoryFilters.tsx   |  10 +-
 web/src/components/ui/Button.tsx              |   2 +-
 web/src/components/ui/Card.tsx                |   4 +-
 web/src/components/ui/ConfirmDialog.tsx       |   8 +-
 web/src/components/ui/EmptyState.tsx          |  33 +-
 web/src/hooks/useTheme.tsx                    |   8 +-
 web/src/pages/CheckpointDetailPage.tsx        |   8 +-
 web/src/pages/ExplorerPage.tsx                |  33 +-
 web/src/pages/FileDetailPage.tsx              |  12 +-
 web/src/pages/MemoriesPage.tsx                |  10 +-
 web/src/pages/PermissionsPage.tsx             |  24 +-
 web/src/pages/ProvidersPage.tsx               |  10 +-
 web/src/pages/SearchPage.tsx                  |   6 +-
 web/src/pages/TaskDetailPage.tsx              |   8 +-
 web/src/pages/TasksPage.tsx                   |   4 +-
 web/src/pages/TransferPage.tsx                |  16 +-
 web/src/styles/design-tokens.generated.css    |  92 ++++
 web/src/styles/globals.css                    |  60 +--
 web/tailwind.config.js                        |  52 +-
 web/theme-acceptance.mjs                      |   4 +-
 35 files changed, 1117 insertions(+), 216 deletions(-)
 create mode 100644 web/design-system/LICENSE
 create mode 100644 web/design-system/README.md
 create mode 100644 web/design-system/tokens.json
 create mode 100644 web/scripts/design-tokens.mjs
 create mode 100644 web/src/styles/design-tokens.generated.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 70d5206..55e3a39 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -75,6 +75,8 @@ The project publishes 0.x prerelease versions; a stable release line is not yet
 
 ### Fixed
 
+- Follow the shared design language for reading, numeric and action alignment; generate the existing Web color variables from a pinned design-system token snapshot, and use a single consistent empty-state pattern. Refs #211.
+
 - Improve web caption and status contrast in both themes, including tinted danger
   buttons, and center action labels, context menus, badges, dialog prompts, and
   overview/detail headings. Restore localized cancel/confirm labels when a
diff --git a/web/design-system/LICENSE b/web/design-system/LICENSE
new file mode 100644
index 0000000..261eeb9
--- /dev/null
+++ b/web/design-system/LICENSE
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/web/design-system/README.md b/web/design-system/README.md
new file mode 100644
index 0000000..1c448bf
--- /dev/null
+++ b/web/design-system/README.md
@@ -0,0 +1,37 @@
+# Shared design token bridge
+
+`tokens.json` is an unmodified snapshot of
+[`bytefolk/design-system` at 910456901dda74da4d5b0320cd03d36ad18650b0](https://github.com/bytefolk/design-system/blob/910456901dda74da4d5b0320cd03d36ad18650b0/tokens/design-tokens.json).
+The upstream Apache-2.0 license is included as `LICENSE`.
+
+The shared JSON owns the palette. Do not edit the snapshot or generated CSS by
+hand. To update it, copy the JSON from a reviewed upstream commit, update the
+revision and expected SHA-256 in `../scripts/design-tokens.mjs`, regenerate, and review both themes.
+The CSS header records the commit and content SHA-256.
+
+```sh
+cd web
+npm run tokens:generate
+npm run tokens:check
+```
+
+`tokens:check` runs before every Web build. The zero-dependency generator maps
+the default profile to mem's existing RGB variable API, preserves alpha, and
+uses shared font/shadow roles. Human actions are blue; `ai` is reserved for AI
+affordances. The user's saved light/dark preference is retained.
+
+Upstream base hues include decorative contrast exceptions. For actual small
+text, the adapter raises source alpha or adjusts an opaque source hue toward
+the theme's foreground until it reaches 4.5:1 on all five source surfaces.
+Semantic foregrounds also meet this ratio on up to 30% tinted state backgrounds. Solid normal/hover backgrounds
+are derived from upstream primary/hover hues and paired with the upstream
+primary foreground. Generation checks 334 text/background pairs; actual
+browser acceptance additionally checks compositing and control states.
+
+mem currently uses React 19 and local primitives; the published shared facade
+expects React 18. This bridge deliberately adds no runtime dependency or React
+migration. The local `EmptyState` follows the shared `ui-empty-state` structure
+and spacing; it can be replaced by a compatible shared release later. Page,
+card, dialog and form content starts at the reading edge; numeric comparison
+columns and trailing actions align to the end; buttons, badges, tabs and whole
+empty panels center their content. Business routes and actions stay in mem.
diff --git a/web/design-system/tokens.json b/web/design-system/tokens.json
new file mode 100644
index 0000000..cccf5a2
--- /dev/null
+++ b/web/design-system/tokens.json
@@ -0,0 +1,483 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "name": "@fullstack-ai-infra/ui",
+  "description": "Ant Design aligned semantic design tokens v3 (light+dark). Values extracted from antd@5 defaultAlgorithm/darkAlgorithm on 2026-08-24 by Design Lead; AA deviations documented in docs/org-workbench-design-language.md. Single token source per ADR 0002: src/styles/tokens.css is generated via scripts/generate-tokens-css.mjs.",
+  "tokens": {
+    "color": {
+      "canvas": {
+        "$type": "color",
+        "$value": {
+          "light": "#f5f5f5",
+          "dark": "#000000"
+        }
+      },
+      "canvas-subtle": {
+        "$type": "color",
+        "$value": {
+          "light": "#fafafa",
+          "dark": "#141414"
+        }
+      },
+      "navigation": {
+        "$type": "color",
+        "$value": {
+          "light": "#f0f0f0",
+          "dark": "#1f1f1f"
+        }
+      },
+      "navigation-hover": {
+        "$type": "color",
+        "$value": {
+          "light": "#e6f4ff",
+          "dark": "#15325b"
+        }
+      },
+      "surface": {
+        "$type": "color",
+        "$value": {
+          "light": "#ffffff",
+          "dark": "#141414"
+        }
+      },
+      "surface-raised": {
+        "$type": "color",
+        "$value": {
+          "light": "#ffffff",
+          "dark": "#1f1f1f"
+        }
+      },
+      "surface-inset": {
+        "$type": "color",
+        "$value": {
+          "light": "#fafafa",
+          "dark": "#1d1d1d"
+        }
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": {
+          "light": "rgba(0, 0, 0, 0.88)",
+          "dark": "rgba(255, 255, 255, 0.85)"
+        }
+      },
+      "foreground-muted": {
+        "$type": "color",
+        "$value": {
+          "light": "rgba(0, 0, 0, 0.65)",
+          "dark": "rgba(255, 255, 255, 0.65)"
+        }
+      },
+      "foreground-subtle": {
+        "$type": "color",
+        "$value": {
+          "light": "rgba(0, 0, 0, 0.45)",
+          "dark": "rgba(255, 255, 255, 0.45)"
+        }
+      },
+      "border": {
+        "$type": "color",
+        "$value": {
+          "light": "#d9d9d9",
+          "dark": "#424242"
+        }
+      },
+      "border-strong": {
+        "$type": "color",
+        "$value": {
+          "light": "#bfbfbf",
+          "dark": "#595959"
+        }
+      },
+      "primary": {
+        "$type": "color",
+        "$value": {
+          "light": "#1677ff",
+          "dark": "#1668dc"
+        }
+      },
+      "primary-hover": {
+        "$type": "color",
+        "$value": {
+          "light": "#4096ff",
+          "dark": "#3c89e8"
+        }
+      },
+      "primary-foreground": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "primary-soft": {
+        "$type": "color",
+        "$value": {
+          "light": "#e6f4ff",
+          "dark": "#15325b"
+        }
+      },
+      "ai": {
+        "$type": "color",
+        "$value": {
+          "light": "#722ed1",
+          "dark": "#642ab5"
+        }
+      },
+      "ai-strong": {
+        "$type": "color",
+        "$value": {
+          "light": "#531dab",
+          "dark": "#854eca"
+        }
+      },
+      "ai-hover": {
+        "$type": "color",
+        "$value": {
+          "light": "#9254de",
+          "dark": "#854eca"
+        }
+      },
+      "ai-foreground": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "ai-soft": {
+        "$type": "color",
+        "$value": {
+          "light": "#f9f0ff",
+          "dark": "#301c4d"
+        }
+      },
+      "info": {
+        "$type": "color",
+        "$value": {
+          "light": "#1677ff",
+          "dark": "#1668dc"
+        }
+      },
+      "info-soft": {
+        "$type": "color",
+        "$value": {
+          "light": "#e6f4ff",
+          "dark": "#111a2c"
+        }
+      },
+      "success": {
+        "$type": "color",
+        "$value": {
+          "light": "#52c41a",
+          "dark": "#49aa19"
+        }
+      },
+      "success-strong": {
+        "$type": "color",
+        "$value": {
+          "light": "#237804",
+          "dark": "#95de64"
+        }
+      },
+      "success-soft": {
+        "$type": "color",
+        "$value": {
+          "light": "#f6ffed",
+          "dark": "#162312"
+        }
+      },
+      "warning": {
+        "$type": "color",
+        "$value": {
+          "light": "#faad14",
+          "dark": "#d89614"
+        }
+      },
+      "warning-strong": {
+        "$type": "color",
+        "$value": {
+          "light": "#ad4e00",
+          "dark": "#f8ce5b"
+        }
+      },
+      "warning-soft": {
+        "$type": "color",
+        "$value": {
+          "light": "#fffbe6",
+          "dark": "#2b2111"
+        }
+      },
+      "danger": {
+        "$type": "color",
+        "$value": {
+          "light": "#ff4d4f",
+          "dark": "#dc4446"
+        }
+      },
+      "danger-strong": {
+        "$type": "color",
+        "$value": {
+          "light": "#cf1322",
+          "dark": "#e84749"
+        }
+      },
+      "danger-soft": {
+        "$type": "color",
+        "$value": {
+          "light": "#fff2f0",
+          "dark": "#2c1618"
+        }
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(0, 0, 0, 0.45)"
+      },
+      "focus": {
+        "$type": "color",
+        "$value": {
+          "light": "#1677ff",
+          "dark": "#1668dc"
+        }
+      },
+      "selection": {
+        "$type": "color",
+        "$value": {
+          "light": "#bae0ff",
+          "dark": "#15417e"
+        }
+      }
+    },
+    "fontFamily": {
+      "font-sans": {
+        "$type": "fontFamily",
+        "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"
+      },
+      "font-mono": {
+        "$type": "fontFamily",
+        "$value": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace"
+      }
+    },
+    "fontSize": {
+      "text-xs": {
+        "$type": "fontSize",
+        "$value": "12px"
+      },
+      "text-sm": {
+        "$type": "fontSize",
+        "$value": "14px"
+      },
+      "text-base": {
+        "$type": "fontSize",
+        "$value": "16px"
+      },
+      "text-lg": {
+        "$type": "fontSize",
+        "$value": "20px"
+      },
+      "text-xl": {
+        "$type": "fontSize",
+        "$value": "24px"
+      },
+      "text-2xl": {
+        "$type": "fontSize",
+        "$value": "30px"
+      }
+    },
+    "lineHeight": {
+      "leading-tight": {
+        "$type": "lineHeight",
+        "$value": "1.3333"
+      },
+      "leading-normal": {
+        "$type": "lineHeight",
+        "$value": "1.5714"
+      }
+    },
+    "dimension": {
+      "space-1": {
+        "$type": "dimension",
+        "$value": "0.25rem"
+      },
+      "space-2": {
+        "$type": "dimension",
+        "$value": "0.5rem"
+      },
+      "space-3": {
+        "$type": "dimension",
+        "$value": "0.75rem"
+      },
+      "space-4": {
+        "$type": "dimension",
+        "$value": "1rem"
+      },
+      "space-5": {
+        "$type": "dimension",
+        "$value": "1.25rem"
+      },
+      "space-6": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      },
+      "space-8": {
+        "$type": "dimension",
+        "$value": "2rem"
+      },
+      "space-10": {
+        "$type": "dimension",
+        "$value": "2.5rem"
+      },
+      "space-12": {
+        "$type": "dimension",
+        "$value": "3rem"
+      },
+      "rail-width": {
+        "$type": "dimension",
+        "$value": "4.5rem"
+      },
+      "sidebar-width": {
+        "$type": "dimension",
+        "$value": "16rem"
+      },
+      "sidebar-wide": {
+        "$type": "dimension",
+        "$value": "18rem"
+      },
+      "topbar-height": {
+        "$type": "dimension",
+        "$value": "3.75rem"
+      }
+    },
+    "borderRadius": {
+      "radius-sm": {
+        "$type": "borderRadius",
+        "$value": "4px"
+      },
+      "radius-md": {
+        "$type": "borderRadius",
+        "$value": "6px"
+      },
+      "radius-lg": {
+        "$type": "borderRadius",
+        "$value": "8px"
+      },
+      "radius-xl": {
+        "$type": "borderRadius",
+        "$value": "8px"
+      },
+      "radius-full": {
+        "$type": "borderRadius",
+        "$value": "9999px"
+      }
+    },
+    "boxShadow": {
+      "shadow-sm": {
+        "$type": "boxShadow",
+        "$value": "0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)"
+      },
+      "shadow-md": {
+        "$type": "boxShadow",
+        "$value": "0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)"
+      },
+      "shadow-lg": {
+        "$type": "boxShadow",
+        "$value": "0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)"
+      }
+    },
+    "duration": {
+      "duration-fast": {
+        "$type": "duration",
+        "$value": "0.1s"
+      },
+      "duration-normal": {
+        "$type": "duration",
+        "$value": "0.2s"
+      }
+    },
+    "timingFunction": {
+      "ease": {
+        "$type": "timingFunction",
+        "$value": "cubic-bezier(0.645, 0.045, 0.355, 1)"
+      }
+    }
+  },
+  "profiles": {
+    "mint": {
+      "$description": "Compact high-contrast mint profile for dark-first workbenches. Product applications may label this profile independently.",
+      "tokens": {
+        "color": {
+          "canvas": { "$value": { "light": "#f6f8f7", "dark": "#0a0c10" } },
+          "canvas-subtle": { "$value": { "light": "#eff3f1", "dark": "#101318" } },
+          "navigation": { "$value": { "light": "#eff3f1", "dark": "#101318" } },
+          "navigation-hover": { "$value": { "light": "#e5ebe8", "dark": "#181d22" } },
+          "surface": { "$value": { "light": "#ffffff", "dark": "#14171d" } },
+          "surface-raised": { "$value": { "light": "#ffffff", "dark": "#1a1e25" } },
+          "surface-inset": { "$value": { "light": "#f1f4f2", "dark": "#101318" } },
+          "foreground": { "$value": { "light": "#191e24", "dark": "#e9edf2" } },
+          "foreground-muted": { "$value": { "light": "#57606b", "dark": "#a3abb8" } },
+          "foreground-subtle": { "$value": { "light": "#636d78", "dark": "#7d8694" } },
+          "border": { "$value": { "light": "#dbe2df", "dark": "#232830" } },
+          "border-strong": { "$value": { "light": "#bfcac4", "dark": "#343b45" } },
+          "primary": { "$value": { "light": "#0a6b4e", "dark": "#19d89b" } },
+          "primary-hover": { "$value": { "light": "#085a42", "dark": "#2ee9a8" } },
+          "primary-foreground": { "$value": { "light": "#ffffff", "dark": "#04150f" } },
+          "primary-soft": { "$value": { "light": "#e2f7ef", "dark": "#0d2a22" } },
+          "ai": { "$value": { "light": "#0a6b4e", "dark": "#19d89b" } },
+          "ai-strong": { "$value": { "light": "#07563f", "dark": "#2ee9a8" } },
+          "ai-hover": { "$value": { "light": "#085a42", "dark": "#2ee9a8" } },
+          "ai-foreground": { "$value": { "light": "#ffffff", "dark": "#04150f" } },
+          "ai-soft": { "$value": { "light": "#e2f7ef", "dark": "#0d2a22" } },
+          "info": { "$value": { "light": "#1b7fb5", "dark": "#5cc8e8" } },
+          "info-soft": { "$value": { "light": "#e6f4fb", "dark": "#12313b" } },
+          "success": { "$value": { "light": "#266b4a", "dark": "#78c89c" } },
+          "success-strong": { "$value": { "light": "#1e5739", "dark": "#a3ddb8" } },
+          "success-soft": { "$value": { "light": "#eaf5ef", "dark": "#173526" } },
+          "warning": { "$value": { "light": "#7d4f0f", "dark": "#f0b563" } },
+          "warning-strong": { "$value": { "light": "#6b420b", "dark": "#f6cf95" } },
+          "warning-soft": { "$value": { "light": "#fff4df", "dark": "#352816" } },
+          "danger": { "$value": { "light": "#a83232", "dark": "#f08d8d" } },
+          "danger-strong": { "$value": { "light": "#8f2525", "dark": "#ffb1b1" } },
+          "danger-soft": { "$value": { "light": "#fff0f0", "dark": "#3b2226" } },
+          "overlay": {
+            "$value": { "light": "rgba(20, 30, 26, 0.35)", "dark": "rgba(0, 0, 0, 0.65)" }
+          },
+          "focus": { "$value": { "light": "#0a6b4e", "dark": "#19d89b" } },
+          "selection": { "$value": { "light": "#e2f7ef", "dark": "#0d2a22" } }
+        },
+        "fontFamily": {
+          "font-sans": {
+            "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif"
+          },
+          "font-mono": {
+            "$value": "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace"
+          }
+        },
+        "fontSize": {
+          "text-xs": { "$value": "11px" },
+          "text-sm": { "$value": "12px" },
+          "text-base": { "$value": "13px" },
+          "text-lg": { "$value": "17px" },
+          "text-xl": { "$value": "22px" },
+          "text-2xl": { "$value": "28px" }
+        },
+        "lineHeight": {
+          "leading-tight": { "$value": "1.3" },
+          "leading-normal": { "$value": "1.6" }
+        },
+        "borderRadius": {
+          "radius-sm": { "$value": "6px" },
+          "radius-md": { "$value": "8px" },
+          "radius-lg": { "$value": "13px" },
+          "radius-xl": { "$value": "16px" }
+        },
+        "boxShadow": {
+          "shadow-sm": { "$value": "0 1px 2px 0 rgba(20, 21, 27, 0.03)" },
+          "shadow-md": {
+            "$value": "0 4px 16px 0 rgba(20, 21, 27, 0.07), 0 1px 4px 0 rgba(20, 21, 27, 0.03)"
+          },
+          "shadow-lg": { "$value": "0 16px 48px 0 rgba(20, 21, 27, 0.14)" }
+        },
+        "duration": {
+          "duration-fast": { "$value": "0.12s" },
+          "duration-normal": { "$value": "0.16s" }
+        },
+        "timingFunction": {
+          "ease": { "$value": "cubic-bezier(0.22, 0.61, 0.36, 1)" }
+        }
+      }
+    }
+  }
+}
diff --git a/web/index.html b/web/index.html
index e0268bc..a83cc1f 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,9 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=1280" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="dark light" />
-    <meta name="theme-color" content="#0a0b0f" />
+    <meta name="theme-color" />
     <script>
       (() => {
         const root = document.documentElement;
@@ -28,9 +28,7 @@
         root.classList.add(theme);
         root.dataset.theme = theme;
         root.style.colorScheme = theme;
-        document
-          .querySelector('meta[name="theme-color"]')
-          ?.setAttribute('content', theme === 'light' ? '#fafafc' : '#0a0b0f');
+
       })();
     </script>
     <title>mem</title>
diff --git a/web/localization-acceptance.mjs b/web/localization-acceptance.mjs
index b322272..96687c1 100644
--- a/web/localization-acceptance.mjs
+++ b/web/localization-acceptance.mjs
@@ -173,7 +173,7 @@ try {
   console.log('✓ unknown managed-embedding errors use the selected locale');
 
   await page.goto(`${baseURL}/search`, { waitUntil: 'domcontentloaded' });
-  await page.getByRole('heading', { name: '搜索' }).waitFor();
+  await page.getByRole('heading', { name: '搜索', level: 1, exact: true }).waitFor();
   await page.getByRole('button', { name: '草地上的金毛' }).waitFor();
   assert.equal(await page.evaluate(() => window.__documentLangAtInteractive), 'zh-CN');
 
diff --git a/web/package.json b/web/package.json
index 6a66d95..a005d33 100644
--- a/web/package.json
+++ b/web/package.json
@@ -21,7 +21,10 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "typecheck": "tsc -b --noEmit"
+    "typecheck": "tsc -b --noEmit",
+    "tokens:generate": "node scripts/design-tokens.mjs",
+    "tokens:check": "node scripts/design-tokens.mjs --check",
+    "prebuild": "npm run tokens:check"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.2",
diff --git a/web/scripts/design-tokens.mjs b/web/scripts/design-tokens.mjs
new file mode 100644
index 0000000..4899c60
--- /dev/null
+++ b/web/scripts/design-tokens.mjs
@@ -0,0 +1,136 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import { createHash } from 'node:crypto';
+import assert from 'node:assert/strict';
+
+// The snapshot, not this compatibility adapter, owns palette values.
+const revision = '910456901dda74da4d5b0320cd03d36ad18650b0';
+const root = new URL('../', import.meta.url);
+const source = await readFile(new URL('design-system/tokens.json', root), 'utf8');
+const tokens = JSON.parse(source).tokens;
+const digest = createHash('sha256').update(source).digest('hex');
+assert.equal(
+  digest,
+  '75e62b372f23083c2f35400ce434d40bf1be098375cea85b97352dcfedbf5766',
+  'Pinned upstream snapshot changed: review a new revision and its hash',
+);
+const value = (group, name, mode) => {
+  const v = tokens[group][name].$value;
+  return typeof v === 'string' ? v : v[mode];
+};
+const color = (name, mode) => {
+  const s = value('color', name, mode);
+  if (s.startsWith('#'))
+    return [
+      ...s
+        .slice(1)
+        .match(/../g)
+        .map((v) => parseInt(v, 16)),
+      1,
+    ];
+  const c = s.match(/[\d.]+/g).map(Number);
+  return c.length === 3 ? [...c, 1] : c;
+};
+const mix = (a, b, weight) =>
+  a
+    .slice(0, 3)
+    .map((n, i) => Math.round(n * weight + b[i] * (1 - weight)))
+    .concat(1);
+const luminance = (c) =>
+  c
+    .slice(0, 3)
+    .map((v) => v / 255)
+    .map((v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4))
+    .reduce((sum, v, i) => sum + v * [0.2126, 0.7152, 0.0722][i], 0);
+const contrast = (fg, bg) => {
+  const a = luminance(mix(fg, bg, fg[3] ?? 1)),
+    b = luminance(bg);
+  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+};
+let css = `/* GENERATED by scripts/design-tokens.mjs; DO NOT EDIT.\n * Source: bytefolk/design-system@${revision}/tokens/design-tokens.json\n * SHA-256: ${digest}; Apache-2.0 (web/design-system/LICENSE).\n */\n`;
+const checks = [];
+for (const mode of ['dark', 'light']) {
+  const surfaces = ['canvas', 'navigation', 'surface', 'surface-inset', 'surface-raised'].map((n) =>
+    color(n, mode),
+  );
+  const target = mode === 'dark' ? [255, 255, 255] : [0, 0, 0];
+  // Preserve the upstream hue while making actual small text readable on every
+  // surface. Upstream base hues are sometimes intended only for borders/icons.
+  const readable = (base, tinted = false) => {
+    for (let step = 0; step <= 100; step++) {
+      const c =
+        base[3] < 1
+          ? [...base.slice(0, 3), base[3] + ((1 - base[3]) * step) / 100]
+          : mix(base, target, 1 - step / 100);
+      if (
+        surfaces.every(
+          (bg) => contrast(c, bg) >= 4.5 && (!tinted || contrast(c, mix(c, bg, 0.3)) >= 4.5),
+        )
+      )
+        return c;
+    }
+    throw new Error('No readable foreground found');
+  };
+  const vars = {
+    bg: color('canvas', mode),
+    'bg-subtle': color('navigation', mode),
+    'bg-panel': color('surface', mode),
+    'bg-inset': color('surface-inset', mode),
+    fg: color('foreground', mode),
+    'fg-muted': readable(color('foreground-muted', mode)),
+    'fg-subtle': readable(color('foreground-muted', mode)),
+    border: color('border', mode),
+    'border-strong': color('border-strong', mode),
+    accent: readable(color('primary', mode), true),
+    'accent-hover': readable(color('primary-hover', mode), true),
+    'accent-muted': color('primary-soft', mode),
+    'accent-solid': mix(color('primary', mode), [0, 0, 0], 0.8),
+    'accent-solid-hover': mix(color('primary-hover', mode), [0, 0, 0], 0.7),
+    'accent-foreground': color('primary-foreground', mode),
+    ai: readable(color('ai', mode), true),
+    success: readable(color('success-strong', mode), true),
+    warn: readable(color('warning-strong', mode), true),
+    danger: readable(color('danger-strong', mode), true),
+  };
+  for (const name of [
+    'fg',
+    'fg-muted',
+    'fg-subtle',
+    'accent',
+    'accent-hover',
+    'ai',
+    'success',
+    'warn',
+    'danger',
+  ]) {
+    for (const bg of surfaces) {
+      const ratio = contrast(vars[name], bg);
+      assert.ok(ratio >= 4.5, `${mode} ${name}: ${ratio}`);
+      checks.push(ratio);
+    }
+  }
+  // Badges, selected navigation and danger-button hover compose tinted surfaces.
+  for (const name of ['accent', 'accent-hover', 'ai', 'success', 'warn', 'danger']) {
+    for (const bg of surfaces)
+      for (const alpha of [0.05, 0.1, 0.2, 0.3]) {
+        const ratio = contrast(vars[name], mix(vars[name], bg, alpha));
+        assert.ok(ratio >= 4.5, `${mode} ${name} tint ${alpha}: ${ratio}`);
+        checks.push(ratio);
+      }
+  }
+  for (const name of ['accent-solid', 'accent-solid-hover']) {
+    const ratio = contrast(vars['accent-foreground'], vars[name]);
+    assert.ok(ratio >= 4.5, `${mode} ${name}: ${ratio}`);
+    checks.push(ratio);
+  }
+  css += `${mode === 'dark' ? ':root, .dark' : '.light'} {\n`;
+  for (const [name, c] of Object.entries(vars))
+    css += `  --${name}: ${c.slice(0, 3).join(' ')};\n  --${name}-opacity: ${c[3]};\n`;
+  css += `  --shadow-soft: ${value('boxShadow', 'shadow-sm', mode)};\n  --font-sans: ${value('fontFamily', 'font-sans', mode)};\n  --font-mono: ${value('fontFamily', 'font-mono', mode)};\n  color-scheme: ${mode};\n}\n`;
+}
+const output = new URL('src/styles/design-tokens.generated.css', root);
+if (process.argv.includes('--check'))
+  assert.equal(await readFile(output, 'utf8'), css, 'Regenerate shared design tokens');
+else await writeFile(output, css);
+console.log(
+  `Shared token bridge: ${checks.length} contrast pairs >= ${Math.min(...checks).toFixed(2)}:1; ${process.argv.includes('--check') ? 'current' : 'generated'}`,
+);
diff --git a/web/src/components/explorer/ContextMenu.tsx b/web/src/components/explorer/ContextMenu.tsx
index 8913d84..24722d7 100644
--- a/web/src/components/explorer/ContextMenu.tsx
+++ b/web/src/components/explorer/ContextMenu.tsx
@@ -102,7 +102,7 @@ function ContextMenuView({ state, onClose }: { state: ContextMenuState; onClose:
                 requestAnimationFrame(() => item.onSelect());
               }}
               className={cn(
-                'grid w-[calc(100%-0.5rem)] grid-cols-[1fr_auto_1fr] items-center gap-2 px-2.5 py-1.5 text-center text-sm rounded-sm mx-1 my-0.5',
+                'grid w-[calc(100%-0.5rem)] grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2.5 py-1.5 text-left text-sm rounded-sm mx-1 my-0.5',
                 'transition-colors',
                 item.disabled
                   ? 'text-fg-subtle cursor-not-allowed'
@@ -111,9 +111,9 @@ function ContextMenuView({ state, onClose }: { state: ContextMenuState; onClose:
                     : 'text-fg-muted hover:bg-bg-inset hover:text-fg',
               )}
             >
-              <span className="col-start-2">{item.label}</span>
+              <span className="min-w-0">{item.label}</span>
               {item.shortcut && (
-                <span className="col-start-3 justify-self-end text-2xs text-fg-subtle tabular-nums">{item.shortcut}</span>
+                <span className="justify-self-end text-2xs text-fg-subtle tabular-nums">{item.shortcut}</span>
               )}
             </button>
           </React.Fragment>
diff --git a/web/src/components/explorer/FileGrid.tsx b/web/src/components/explorer/FileGrid.tsx
index 677a046..d465cf0 100644
--- a/web/src/components/explorer/FileGrid.tsx
+++ b/web/src/components/explorer/FileGrid.tsx
@@ -70,10 +70,10 @@ export function FileGrid(props: FileGridProps) {
   return (
     <div className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-4 px-6 py-5">
       {pendingNewFolder && (
-        <div className="flex flex-col items-center text-center gap-2 p-2 rounded-lg border border-dashed border-accent/40 bg-accent/5">
+        <div className="flex flex-col items-center text-left gap-2 p-2 rounded-lg border border-dashed border-accent/40 bg-accent/5">
           <FolderClosed className="h-12 w-12 text-fg-subtle" />
           <RenameInput
-            className="text-center"
+            className="text-left"
             initial={tt('drive.untitledFolder')}
             placeholder={tt('drive.folderName')}
             preserveExtension={false}
@@ -120,7 +120,7 @@ export function FileGrid(props: FileGridProps) {
       {uploading.map((u, i) => (
         <div
           key={`upl-${i}`}
-          className="flex flex-col items-center text-center gap-2 p-2 rounded-lg border border-dashed border-border bg-bg-subtle/40"
+          className="flex flex-col items-center text-left gap-2 p-2 rounded-lg border border-dashed border-border bg-bg-subtle/40"
         >
           <div className="h-20 w-full rounded-md bg-bg-inset grid place-items-center">
             <div className="h-5 w-5 rounded-full border-2 border-accent border-r-transparent animate-spin" />
@@ -207,7 +207,7 @@ function FolderCard({
       onDragLeave={() => setDropHover(false)}
       onDrop={onDrop}
       className={cn(
-        'flex flex-col items-center text-center gap-2 p-2 rounded-lg cursor-default select-none',
+        'flex flex-col items-center text-left gap-2 p-2 rounded-lg cursor-default select-none',
         'border transition-colors',
         selected
           ? 'border-accent/60 bg-accent/10'
@@ -219,7 +219,7 @@ function FolderCard({
       <FolderClosed className="h-14 w-14 text-accent/80" strokeWidth={1.4} />
       {renaming ? (
         <RenameInput
-            className="text-center"
+            className="text-left"
           initial={folder.name}
           preserveExtension={false}
           onCommit={onCommitRename}
@@ -230,7 +230,7 @@ function FolderCard({
           {folder.name}
         </div>
       )}
-      <div className="text-2xs text-fg-subtle">{tt('drive.itemsN', { n: folder.fileCount })}</div>
+      <div className="w-full text-2xs text-fg-subtle">{tt('drive.itemsN', { n: folder.fileCount })}</div>
     </div>
   );
 }
@@ -267,7 +267,7 @@ function FileCard({
       onDoubleClick={onDoubleClick}
       onContextMenu={onContextMenu}
       className={cn(
-        'flex flex-col items-center text-center gap-2 p-2 rounded-lg cursor-default select-none',
+        'flex flex-col items-center text-left gap-2 p-2 rounded-lg cursor-default select-none',
         'border transition-colors',
         selected
           ? 'border-accent/60 bg-accent/10'
@@ -288,7 +288,7 @@ function FileCard({
         {file.index_status !== 'done' && <StatusOverlay status={file.index_status} />}
       </div>
       {renaming ? (
-        <RenameInput className="text-center" initial={file.name} onCommit={onCommitRename} onCancel={onCancelRename} />
+        <RenameInput className="text-left" initial={file.name} onCommit={onCommitRename} onCancel={onCancelRename} />
       ) : (
         <div className="text-xs text-fg truncate w-full" title={file.name}>
           {file.name}
@@ -309,10 +309,12 @@ function KindIcon({ kind }: { kind: FileKind }) {
 
 function StatusOverlay({ status }: { status: IndexStatus }) {
   const text = tt(`status.${status}`);
-  const tone = status === 'failed' ? 'bg-danger/80' : 'bg-bg/70';
+  const tone = status === 'failed'
+    ? 'border border-danger/30 bg-bg-panel text-danger'
+    : 'bg-bg/70 text-fg';
   return (
     <div
-      className={cn('absolute bottom-1 right-1 rounded px-1.5 py-0.5 text-2xs text-fg', tone)}
+      className={cn('absolute bottom-1 right-1 rounded px-1.5 py-0.5 text-2xs', tone)}
     >
       {text}
     </div>
diff --git a/web/src/components/explorer/FileList.tsx b/web/src/components/explorer/FileList.tsx
index 71e1396..5aaf6a7 100644
--- a/web/src/components/explorer/FileList.tsx
+++ b/web/src/components/explorer/FileList.tsx
@@ -33,10 +33,10 @@ export interface FileListProps {
 export function FileList(props: FileListProps) {
   const { t } = useT();
   return (
-    <div className="px-4 py-3">
+    <div className="min-w-[640px] px-4 py-3">
       <div className="grid grid-cols-[1fr_120px_180px_120px] gap-3 px-3 py-2 text-2xs uppercase tracking-wider text-fg-subtle font-medium border-b border-border">
         <div>{t('drive.colName')}</div>
-        <div>{t('drive.colSize')}</div>
+        <div className="text-right">{t('drive.colSize')}</div>
         <div>{t('drive.colModified')}</div>
         <div>{t('drive.colType')}</div>
       </div>
@@ -215,7 +215,7 @@ function FolderRow({
           </div>
         )}
       </div>
-      <div className="text-xs text-fg-subtle tabular-nums">{tt('drive.itemsN', { n: folder.fileCount })}</div>
+      <div className="text-xs text-fg-subtle text-right tabular-nums">{tt('drive.itemsN', { n: folder.fileCount })}</div>
       <div className="text-xs text-fg-subtle">—</div>
       <div className="text-xs text-fg-subtle">{tt('drive.folder')}</div>
     </div>
@@ -271,7 +271,7 @@ function FileRow({
           </div>
         )}
       </div>
-      <div className="text-xs text-fg-muted tabular-nums">{formatBytes(file.size)}</div>
+      <div className="text-xs text-fg-muted text-right tabular-nums">{formatBytes(file.size)}</div>
       <div className="text-xs text-fg-muted">{formatRelative(file.updated_at)}</div>
       <div className="text-xs text-fg-subtle">{tt(`kind.${file.kind === 'pdf' ? 'doc' : file.kind}`)}</div>
     </div>
@@ -285,4 +285,3 @@ function KindIconSmall({ kind }: { kind: FileKind }) {
   if (kind === 'pdf' || kind === 'doc' || kind === 'text') return <FileText className={cls} />;
   return <FileQuestion className={cls} />;
 }
-
diff --git a/web/src/components/layout/TopBar.tsx b/web/src/components/layout/TopBar.tsx
index 9f5f646..066d336 100644
--- a/web/src/components/layout/TopBar.tsx
+++ b/web/src/components/layout/TopBar.tsx
@@ -186,7 +186,7 @@ export function TopBar({ children }: { children?: React.ReactNode }) {
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="w-full text-danger hover:text-danger"
+                    className="w-full justify-start text-left text-danger hover:text-danger"
                     onClick={() => {
                       logout();
                       navigate('/login');
diff --git a/web/src/components/memory/CreateRelationDialog.tsx b/web/src/components/memory/CreateRelationDialog.tsx
index 01455ca..5246e79 100644
--- a/web/src/components/memory/CreateRelationDialog.tsx
+++ b/web/src/components/memory/CreateRelationDialog.tsx
@@ -104,11 +104,11 @@ export function CreateRelationDialog({
           className="fixed left-1/2 top-1/2 z-50 w-[560px] max-w-[94vw] -translate-x-1/2 -translate-y-1/2
                      rounded-lg border border-border bg-bg-panel p-5 shadow-soft animate-fade-in"
         >
-          <div className="relative flex flex-col items-center gap-3 px-7">
+          <div className="relative flex items-start gap-3 pr-7">
             <div className="grid h-9 w-9 flex-none place-items-center rounded-md border border-accent/30 bg-accent/10 text-accent">
               <Icon className="h-4 w-4" />
             </div>
-            <div className="min-w-0 w-full text-center">
+            <div className="min-w-0 w-full text-left">
               <Dialog.Title className="text-base font-semibold text-fg">
                 {t(`memories.relationDialog.title.${relationType}`)}
               </Dialog.Title>
@@ -166,7 +166,7 @@ export function CreateRelationDialog({
             <select
               value={peerMode}
               onChange={(event) => setPeerMode(event.target.value as 'list' | 'manual')}
-              className="h-9 rounded-md border border-border bg-bg-inset px-3 text-center [text-align-last:center] text-sm text-fg outline-none focus:border-accent/60"
+              className="h-9 rounded-md border border-border bg-bg-inset px-3 text-left [text-align-last:left] text-sm text-fg outline-none focus:border-accent/60"
             >
               <option value="list">{t('memories.relationDialog.peerFromList')}</option>
               <option value="manual">{t('memories.relationDialog.peerManual')}</option>
diff --git a/web/src/components/memory/ForgetMemoryDialog.tsx b/web/src/components/memory/ForgetMemoryDialog.tsx
index 0b8e3e0..f3fc4d1 100644
--- a/web/src/components/memory/ForgetMemoryDialog.tsx
+++ b/web/src/components/memory/ForgetMemoryDialog.tsx
@@ -51,11 +51,11 @@ export function ForgetMemoryDialog({
           className="fixed left-1/2 top-1/2 z-50 w-[520px] max-w-[94vw] -translate-x-1/2 -translate-y-1/2
                      rounded-lg border border-danger/35 bg-bg-panel p-5 shadow-soft animate-fade-in"
         >
-          <div className="relative flex flex-col items-center gap-3 px-7">
+          <div className="relative flex items-start gap-3 pr-7">
             <div className="grid h-9 w-9 flex-none place-items-center rounded-md border border-danger/30 bg-danger/10 text-danger">
               <AlertTriangle className="h-4 w-4" />
             </div>
-            <div className="min-w-0 w-full text-center">
+            <div className="min-w-0 w-full text-left">
               <Dialog.Title className="text-base font-semibold text-fg">
                 {t('memory.forgetTitle')}
               </Dialog.Title>
@@ -92,7 +92,7 @@ export function ForgetMemoryDialog({
             <select
               value={reason}
               onChange={(event) => setReason(event.target.value as MemoryForgetReason)}
-              className="h-9 rounded-md border border-border bg-bg-inset px-3 text-center [text-align-last:center] text-sm text-fg outline-none focus:border-accent/60"
+              className="h-9 rounded-md border border-border bg-bg-inset px-3 text-left [text-align-last:left] text-sm text-fg outline-none focus:border-accent/60"
             >
               {REASONS.map((candidate) => (
                 <option key={candidate} value={candidate}>
diff --git a/web/src/components/memory/MemoryDetail.tsx b/web/src/components/memory/MemoryDetail.tsx
index 00431b4..98daf7f 100644
--- a/web/src/components/memory/MemoryDetail.tsx
+++ b/web/src/components/memory/MemoryDetail.tsx
@@ -396,7 +396,7 @@ export function MemoryDetail({
             <ShieldCheck className="h-3.5 w-3.5 text-accent" />
             <CardTitle>{t('memory.provenance')}</CardTitle>
           </CardHeader>
-          <CardBody className="grid gap-4 sm:grid-cols-2">
+          <CardBody className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <Meta
               icon={<Database className="h-3 w-3" />}
               label={t('memory.sourceType')}
@@ -475,7 +475,7 @@ export function MemoryDetail({
             <Fingerprint className="h-3.5 w-3.5 text-accent" />
             <CardTitle>{t('memory.identity')}</CardTitle>
           </CardHeader>
-          <CardBody className="grid gap-4 sm:grid-cols-2">
+          <CardBody className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <Meta label={t('memory.createdAt')} value={formatDateTime(memory.created_at)} />
             <Meta label={t('memory.updatedAt')} value={formatDateTime(memory.updated_at)} />
             <Meta label={t('memory.feedbackScore')} value={memory.feedback_score} mono />
diff --git a/web/src/components/memory/MemoryFilters.tsx b/web/src/components/memory/MemoryFilters.tsx
index e82f848..e4c37a0 100644
--- a/web/src/components/memory/MemoryFilters.tsx
+++ b/web/src/components/memory/MemoryFilters.tsx
@@ -64,13 +64,13 @@ export function MemoryFilters({
       </form>
 
       <label className="grid gap-1">
-        <span className="text-center text-2xs uppercase tracking-wider text-fg-subtle">{t('memory.kind')}</span>
+        <span className="text-left text-2xs uppercase tracking-wider text-fg-subtle">{t('memory.kind')}</span>
         <select
           value={value.kind ?? ''}
           onChange={(event) =>
             update({ kind: (event.target.value || undefined) as MemoryKind | undefined })
           }
-          className="h-9 rounded-md border border-border bg-bg-inset px-2.5 text-center [text-align-last:center] text-xs text-fg outline-none focus:border-accent/60"
+          className="h-9 rounded-md border border-border bg-bg-inset px-2.5 text-left [text-align-last:left] text-xs text-fg outline-none focus:border-accent/60"
           aria-label={t('memory.kind')}
         >
           <option value="">{t('memory.allKinds')}</option>
@@ -83,7 +83,7 @@ export function MemoryFilters({
       </label>
 
       <div className="grid gap-1">
-        <span className="inline-flex items-center justify-center gap-1 text-center text-2xs uppercase tracking-wider text-fg-subtle">
+        <span className="inline-flex items-center justify-start gap-1 text-left text-2xs uppercase tracking-wider text-fg-subtle">
           <Filter className="h-3 w-3" />
           {t('memory.visibility')}
         </span>
@@ -109,7 +109,7 @@ export function MemoryFilters({
 
       <div className="flex items-end gap-2">
         <label className="grid min-w-28 flex-1 gap-1">
-          <span className="text-center text-2xs uppercase tracking-wider text-fg-subtle">
+          <span className="text-left text-2xs uppercase tracking-wider text-fg-subtle">
             {t('memory.pinFilter')}
           </span>
           <select
@@ -119,7 +119,7 @@ export function MemoryFilters({
                 pinned: event.target.value === '' ? undefined : event.target.value === 'true',
               })
             }
-            className="h-9 rounded-md border border-border bg-bg-inset px-2.5 text-center [text-align-last:center] text-xs text-fg outline-none focus:border-accent/60"
+            className="h-9 rounded-md border border-border bg-bg-inset px-2.5 text-left [text-align-last:left] text-xs text-fg outline-none focus:border-accent/60"
             aria-label={t('memory.pinFilter')}
           >
             <option value="">{t('memory.pinAny')}</option>
diff --git a/web/src/components/ui/Button.tsx b/web/src/components/ui/Button.tsx
index f45cee4..5042a72 100644
--- a/web/src/components/ui/Button.tsx
+++ b/web/src/components/ui/Button.tsx
@@ -6,7 +6,7 @@ type Size = 'sm' | 'md' | 'lg' | 'icon';
 
 const VARIANT: Record<Variant, string> = {
   primary:
-    'bg-accent text-bg hover:bg-accent-hover shadow-soft active:translate-y-px',
+    'bg-accent-solid text-accent-foreground hover:bg-accent-solid-hover shadow-soft active:translate-y-px',
   secondary:
     'bg-bg-inset text-fg border border-border hover:border-border-strong hover:bg-bg-panel',
   ghost: 'text-fg-muted hover:text-fg hover:bg-bg-inset',
diff --git a/web/src/components/ui/Card.tsx b/web/src/components/ui/Card.tsx
index 17f706b..dfcedc9 100644
--- a/web/src/components/ui/Card.tsx
+++ b/web/src/components/ui/Card.tsx
@@ -5,7 +5,7 @@ export function Card({ className, ...rest }: React.HTMLAttributes<HTMLDivElement
   return (
     <div
       className={cn(
-        'rounded-lg border border-border bg-bg-panel',
+        'min-w-0 rounded-lg border border-border bg-bg-panel',
         'transition-colors',
         className,
       )}
@@ -21,7 +21,7 @@ export function CardHeader({ className, ...rest }: React.HTMLAttributes<HTMLDivE
 export function CardTitle({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('flex flex-1 items-center justify-center gap-1.5 text-center text-xs font-medium uppercase tracking-wider text-fg-muted', className)}
+      className={cn('flex flex-1 items-center gap-1.5 text-left text-sm font-semibold text-fg', className)}
       {...rest}
     />
   );
diff --git a/web/src/components/ui/ConfirmDialog.tsx b/web/src/components/ui/ConfirmDialog.tsx
index 63e56ac..2a87e8a 100644
--- a/web/src/components/ui/ConfirmDialog.tsx
+++ b/web/src/components/ui/ConfirmDialog.tsx
@@ -33,8 +33,8 @@ export function ConfirmDialog({
           className="fixed left-1/2 top-1/2 z-50 w-[420px] max-w-[92vw] -translate-x-1/2 -translate-y-1/2
                      rounded-lg border border-border bg-bg-panel p-5 shadow-soft animate-fade-in"
         >
-          <div className="relative px-7">
-            <Dialog.Title className="text-center text-base font-semibold text-fg">{title}</Dialog.Title>
+          <div className="relative pr-7">
+            <Dialog.Title className="text-left text-base font-semibold text-fg">{title}</Dialog.Title>
             <Dialog.Close asChild>
               <button
                 aria-label={t('action.close')}
@@ -45,11 +45,11 @@ export function ConfirmDialog({
             </Dialog.Close>
           </div>
           {description && (
-            <Dialog.Description className="mt-2 text-center text-sm text-fg-muted leading-relaxed">
+            <Dialog.Description className="mt-2 text-left text-sm text-fg-muted leading-relaxed">
               {description}
             </Dialog.Description>
           )}
-          <div className="mt-5 flex items-center justify-center gap-2">
+          <div className="mt-5 flex items-center justify-end gap-2">
             <Dialog.Close asChild>
               <Button variant="ghost" size="sm">
                 {cancelText ?? t('action.cancel')}
diff --git a/web/src/components/ui/EmptyState.tsx b/web/src/components/ui/EmptyState.tsx
index 4be4a38..7f8953d 100644
--- a/web/src/components/ui/EmptyState.tsx
+++ b/web/src/components/ui/EmptyState.tsx
@@ -3,29 +3,46 @@ import { cn } from '@/lib/cn';
 
 export interface EmptyStateProps {
   icon?: React.ReactNode;
-  title: string;
+  title: React.ReactNode;
   description?: React.ReactNode;
   action?: React.ReactNode;
   className?: string;
+  compact?: boolean;
 }
 
-export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  compact = false,
+}: EmptyStateProps) {
   return (
     <div
       className={cn(
-        'flex flex-col items-center justify-center text-center py-16 px-6',
-        'border border-dashed border-border rounded-lg bg-bg-subtle/40',
+        'ui-empty-state flex flex-col items-center justify-center text-center',
+        compact ? 'ui-empty-state--compact py-6 px-4' : 'py-12 px-6',
         className,
       )}
     >
       {icon && (
-        <div className="mb-4 text-fg-subtle [&>svg]:h-8 [&>svg]:w-8">{icon}</div>
+        <div
+          aria-hidden="true"
+          className="ui-empty-state__icon mb-3 text-fg-muted [&>svg]:h-8 [&>svg]:w-8"
+        >
+          {icon}
+        </div>
       )}
-      <div className="text-sm font-medium text-fg">{title}</div>
+      <h3 className="ui-empty-state__title text-sm font-semibold text-fg leading-normal">
+        {title}
+      </h3>
       {description && (
-        <div className="mt-1.5 max-w-md text-sm text-fg-muted leading-relaxed">{description}</div>
+        <div className="ui-empty-state__description mt-2 max-w-md text-sm text-fg-muted leading-normal">
+          {description}
+        </div>
       )}
-      {action && <div className="mt-4">{action}</div>}
+      {action && <div className="ui-empty-state__action mt-4">{action}</div>}
     </div>
   );
 }
diff --git a/web/src/hooks/useTheme.tsx b/web/src/hooks/useTheme.tsx
index 0beb479..c2e1021 100644
--- a/web/src/hooks/useTheme.tsx
+++ b/web/src/hooks/useTheme.tsx
@@ -4,11 +4,6 @@ export type Theme = 'dark' | 'light';
 
 export const THEME_STORAGE_KEY = 'mem.theme';
 
-const THEME_COLORS: Record<Theme, string> = {
-  dark: '#0a0b0f',
-  light: '#fafafc',
-};
-
 type ThemeContextValue = {
   theme: Theme;
   setTheme: (theme: Theme) => void;
@@ -27,7 +22,7 @@ function applyDocumentTheme(theme: Theme): void {
   root.classList.add(theme);
   root.dataset.theme = theme;
   root.style.colorScheme = theme;
-  document.querySelector('meta[name="theme-color"]')?.setAttribute('content', THEME_COLORS[theme]);
+  document.querySelector('meta[name="theme-color"]')?.setAttribute('content', `rgb(${getComputedStyle(root).getPropertyValue('--bg').trim()})`);
 }
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
@@ -48,6 +43,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   }, [setTheme, theme]);
 
   React.useEffect(() => {
+    applyDocumentTheme(themeFromDocument());
     const syncTheme = (event: StorageEvent) => {
       if (event.key !== THEME_STORAGE_KEY) return;
       const nextTheme: Theme = event.newValue === 'light' ? 'light' : 'dark';
diff --git a/web/src/pages/CheckpointDetailPage.tsx b/web/src/pages/CheckpointDetailPage.tsx
index ffb3f4b..f66e8ff 100644
--- a/web/src/pages/CheckpointDetailPage.tsx
+++ b/web/src/pages/CheckpointDetailPage.tsx
@@ -94,8 +94,8 @@ export function CheckpointDetailPage() {
         {t('task.backToTask')}
       </Link>
 
-      <header className="mb-7 text-center">
-        <div className="mb-2 flex flex-wrap items-center justify-center gap-2">
+      <header className="mb-7 text-left">
+        <div className="mb-2 flex flex-wrap items-center justify-start gap-2">
           <span className="font-mono text-2xs uppercase tracking-[0.16em] text-fg-subtle">
             {taskKey}
           </span>
@@ -106,10 +106,10 @@ export function CheckpointDetailPage() {
           <TaskStatusBadge status={state.status} />
           <CheckpointKindBadge kind={record.checkpoint_kind} />
         </div>
-        <div className="flex flex-col items-center gap-3">
+        <div className="flex flex-col items-start justify-between gap-3 sm:flex-row">
           <div>
             <h1 className="text-2xl font-semibold tracking-tight">{t('checkpoint.title')}</h1>
-            <p className="mx-auto mt-1.5 max-w-3xl text-sm leading-6 text-fg-muted">
+            <p className="mt-1.5 max-w-3xl text-sm leading-6 text-fg-muted">
               {state.progress.summary}
             </p>
           </div>
diff --git a/web/src/pages/ExplorerPage.tsx b/web/src/pages/ExplorerPage.tsx
index 3c230a7..781f808 100644
--- a/web/src/pages/ExplorerPage.tsx
+++ b/web/src/pages/ExplorerPage.tsx
@@ -40,6 +40,7 @@ import { TopBar } from '@/components/layout/TopBar';
 import { Skeleton } from '@/components/ui/Skeleton';
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
 import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
 import { readView, writeView, type ExplorerView } from '@/components/explorer/viewMode';
 import { downloadFile } from '@/lib/api';
 import type { MemFile } from '@/lib/types';
@@ -526,10 +527,7 @@ function ExplorerLayout({ currentPath }: { currentPath: string }) {
 
   return (
     <div className="h-screen flex flex-col bg-bg text-fg">
-      <TopBar>
-        <div className="h-5 w-px bg-border" aria-hidden />
-        <Breadcrumb path={currentPath} onInternalDropToFolder={handleInternalDropTo} />
-      </TopBar>
+      <TopBar />
 
       {/* Two-pane */}
       <div className="flex-1 min-h-0 flex">
@@ -543,6 +541,9 @@ function ExplorerLayout({ currentPath }: { currentPath: string }) {
         </aside>
 
         <main className="flex-1 min-w-0 flex flex-col overflow-hidden">
+          <div className="flex min-h-10 flex-none items-center border-b border-border px-4">
+            <Breadcrumb path={currentPath} onInternalDropToFolder={handleInternalDropTo} />
+          </div>
           <Toolbar
             onNewFolder={() => setPendingNewFolder(true)}
             onUploadClick={() => fileInputRef.current?.click()}
@@ -582,7 +583,6 @@ function ExplorerLayout({ currentPath }: { currentPath: string }) {
               <EmptyFolder
                 path={currentPath}
                 onUploadClick={() => fileInputRef.current?.click()}
-                onNewFolder={() => setPendingNewFolder(true)}
               />
             ) : view === 'grid' ? (
               <FileGrid
@@ -700,33 +700,26 @@ function ContentSkeleton({ view }: { view: ExplorerView }) {
 function EmptyFolder({
   path,
   onUploadClick,
-  onNewFolder,
 }: {
   path: string;
   onUploadClick: () => void;
-  onNewFolder: () => void;
 }) {
   const { t } = useT();
   const crumbs = buildCrumbs(path);
   const leaf = crumbs[crumbs.length - 1];
   const inside = leaf?.path === ROOT_PATH ? t('drive.root') : (leaf?.name ?? t('drive.root'));
   return (
-    <div className="flex flex-col items-center justify-center text-center py-24 px-6 text-fg-muted">
-      <FolderOpen className="h-12 w-12 text-fg-subtle mb-4" strokeWidth={1.3} />
-      <div className="text-sm text-fg">{t('drive.emptyTitle', { name: inside })}</div>
-      <div className="mt-1 text-xs text-fg-subtle">
-        {t('drive.emptyHint')}
-      </div>
-      <div className="mt-5 flex items-center gap-2">
-        <Button variant="secondary" size="sm" onClick={onUploadClick}>
+    <EmptyState
+      icon={<FolderOpen strokeWidth={1.3} />}
+      title={t('drive.emptyTitle', { name: inside })}
+      description={t('drive.emptyHint')}
+      action={
+        <Button variant="primary" size="sm" onClick={onUploadClick}>
           <Upload className="h-3.5 w-3.5" />
           {t('drive.upload')}
         </Button>
-        <Button variant="ghost" size="sm" onClick={onNewFolder}>
-          {t('drive.newFolder')}
-        </Button>
-      </div>
-    </div>
+      }
+    />
   );
 }
 
diff --git a/web/src/pages/FileDetailPage.tsx b/web/src/pages/FileDetailPage.tsx
index 24d162a..409a275 100644
--- a/web/src/pages/FileDetailPage.tsx
+++ b/web/src/pages/FileDetailPage.tsx
@@ -97,13 +97,13 @@ export function FileDetailPage() {
   return (
     <div className="mx-auto max-w-7xl px-8 py-8">
       {/* Top bar */}
-      <div className="flex items-center gap-3 mb-6">
+      <div className="flex flex-wrap items-center justify-end gap-3 mb-6">
         <Button variant="ghost" size="sm" onClick={() => navigate(-1)}>
           <ArrowLeft className="h-3.5 w-3.5" />
           {t('common.back')}
         </Button>
-        <div className="flex-1 min-w-0">
-          <div className="text-center text-sm text-fg truncate">{file.name}</div>
+        <div className="flex-1 min-w-0 basis-[calc(100%-7rem)] sm:basis-0">
+          <div className="text-left text-sm text-fg truncate">{file.name}</div>
           <div className="text-2xs text-fg-subtle font-mono truncate">{file.path}</div>
         </div>
         <Button variant="ghost" size="sm" onClick={copyId}>
@@ -270,7 +270,7 @@ function AIInsightsCard({ file }: { file: MemFile }) {
   return (
     <Card>
       <CardHeader className="flex items-center gap-2">
-        <Sparkles className="h-3.5 w-3.5 text-accent" />
+        <Sparkles className="h-3.5 w-3.5 text-ai" />
         <CardTitle>{t('detail.aiInsights')}</CardTitle>
       </CardHeader>
       <CardBody className="space-y-5 text-sm">
@@ -390,7 +390,7 @@ function AIInsightsCard({ file }: { file: MemFile }) {
           <div className="flex items-center justify-between gap-3">
             <div
               id="pending-suggestions-heading"
-              className="flex items-center gap-2 text-2xs font-semibold uppercase tracking-wider text-accent"
+              className="flex items-center gap-2 text-2xs font-semibold uppercase tracking-wider text-ai"
             >
               <Sparkles className="h-3.5 w-3.5" />
               {t('detail.reviewSuggestions')}
@@ -923,7 +923,7 @@ function RelatedRow({
 function DetailSkeleton() {
   return (
     <div className="mx-auto max-w-7xl px-8 py-8">
-      <div className="flex items-center gap-3 mb-6">
+      <div className="flex flex-wrap items-center justify-end gap-3 mb-6">
         <Skeleton className="h-7 w-16" />
         <Skeleton className="h-5 w-64 flex-1" />
         <Skeleton className="h-7 w-20" />
diff --git a/web/src/pages/MemoriesPage.tsx b/web/src/pages/MemoriesPage.tsx
index aaca46d..b2e0f2c 100644
--- a/web/src/pages/MemoriesPage.tsx
+++ b/web/src/pages/MemoriesPage.tsx
@@ -198,8 +198,8 @@ export function MemoriesPage() {
 
   return (
     <div className="mx-auto max-w-[1500px] px-5 py-7 lg:px-8 lg:py-9">
-      <header className="mb-6 text-center">
-        <div className="mb-2 flex flex-wrap items-center justify-center gap-2 font-mono text-2xs uppercase tracking-[0.18em] text-fg-subtle">
+      <header className="mb-6 text-left">
+        <div className="mb-2 flex flex-wrap items-center justify-start gap-2 font-mono text-2xs uppercase tracking-[0.18em] text-fg-subtle">
           <ShieldCheck className="h-3.5 w-3.5 text-accent" />
           {t('memory.trustSurface')}
           {capabilities.data.workspace.name && (
@@ -210,7 +210,7 @@ export function MemoriesPage() {
           )}
         </div>
         <h1 className="text-2xl font-semibold tracking-tight">{t('memory.title')}</h1>
-        <p className="mx-auto mt-1.5 max-w-3xl text-sm leading-6 text-fg-muted">{t('memory.subtitle')}</p>
+        <p className="mt-1.5 max-w-3xl text-sm leading-6 text-fg-muted">{t('memory.subtitle')}</p>
       </header>
 
       <div className={memoryId ? 'hidden xl:block' : undefined}>
@@ -219,7 +219,7 @@ export function MemoriesPage() {
 
       <div className="mt-5 grid min-w-0 gap-5 xl:grid-cols-[390px_minmax(0,1fr)] xl:items-start">
         <aside
-          className={'min-w-0 xl:sticky xl:top-16 ' + (memoryId ? 'hidden xl:block' : 'block')}
+          className={'min-w-0 xl:sticky xl:top-16 ' + (memoryId ? 'hidden xl:block' : items.length === 0 ? 'xl:col-span-2' : 'block')}
         >
           {memories.isLoading ? (
             <LedgerSkeleton />
@@ -252,7 +252,7 @@ export function MemoriesPage() {
           )}
         </aside>
 
-        <main className={'min-w-0 ' + (memoryId ? 'block' : 'hidden xl:block')}>
+        <main className={'min-w-0 ' + (memoryId ? 'block' : items.length > 0 ? 'hidden xl:block' : 'hidden')}>
           {memoryId && (
             <Button
               type="button"
diff --git a/web/src/pages/PermissionsPage.tsx b/web/src/pages/PermissionsPage.tsx
index 6cac164..ec00bdf 100644
--- a/web/src/pages/PermissionsPage.tsx
+++ b/web/src/pages/PermissionsPage.tsx
@@ -144,7 +144,7 @@ export function PermissionsPage() {
 
   const header = (
     <>
-      <div className="flex flex-wrap items-center justify-center gap-3 mb-1">
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-1">
         <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
           <ShieldCheck className="h-5 w-5 text-accent" /> {t('permissions.title')}
         </h1>
@@ -155,7 +155,7 @@ export function PermissionsPage() {
           </Button>
         )}
       </div>
-      <p className="text-center text-sm text-fg-muted mb-6">{t('permissions.description')}</p>
+      <p className="text-left text-sm text-fg-muted mb-6">{t('permissions.description')}</p>
     </>
   );
 
@@ -207,13 +207,13 @@ export function PermissionsPage() {
 
       {/* ---- Issued tokens / sessions ---- */}
       <section className="mb-10" data-testid="tokens-section">
-        <div className="flex items-center justify-center gap-2 mb-1">
+        <div className="flex items-center justify-start gap-2 mb-1">
           <KeyRound className="h-4 w-4 text-accent" aria-hidden="true" />
           <h2 className="text-base font-semibold tracking-tight">
             {t('permissions.tokens.title')}
           </h2>
         </div>
-        <p className="text-center text-xs text-fg-muted mb-3">{t('permissions.tokens.description')}</p>
+        <p className="text-left text-xs text-fg-muted mb-3">{t('permissions.tokens.description')}</p>
 
         {tokensForbidden ? (
           forbiddenPanel('tokens-forbidden')
@@ -237,9 +237,9 @@ export function PermissionsPage() {
             description={t('permissions.tokens.emptyHint')}
           />
         ) : tokens ? (
-          <div className="surface overflow-hidden">
+          <div className="surface overflow-x-auto">
             <div
-              className={`${TOKEN_ROW_GRID} border-b border-border bg-bg-subtle/60 px-4 py-2 text-2xs uppercase tracking-wider text-fg-subtle`}
+              className={`${TOKEN_ROW_GRID} min-w-[640px] border-b border-border bg-bg-subtle/60 px-4 py-2 text-2xs uppercase tracking-wider text-fg-subtle`}
             >
               <span>{t('permissions.tokens.col.name')}</span>
               <span>{t('permissions.tokens.col.scopes')}</span>
@@ -247,7 +247,7 @@ export function PermissionsPage() {
               <span>{t('permissions.tokens.col.lastUsed')}</span>
               <span />
             </div>
-            <ol className="divide-y divide-border">
+            <ol className="min-w-[640px] divide-y divide-border">
               {tokens.map((token) => (
                 <li
                   key={token.id}
@@ -302,13 +302,13 @@ export function PermissionsPage() {
 
       {/* ---- durable-context recall grants ---- */}
       <section data-testid="grants-section">
-        <div className="flex items-center justify-center gap-2 mb-1">
+        <div className="flex items-center justify-start gap-2 mb-1">
           <ScrollText className="h-4 w-4 text-accent" aria-hidden="true" />
           <h2 className="text-base font-semibold tracking-tight">
             {t('permissions.grants.title')}
           </h2>
         </div>
-        <p className="text-center text-xs text-fg-muted mb-3">{t('permissions.grants.description')}</p>
+        <p className="text-left text-xs text-fg-muted mb-3">{t('permissions.grants.description')}</p>
 
         {grantsForbidden ? (
           forbiddenPanel('grants-forbidden')
@@ -332,9 +332,9 @@ export function PermissionsPage() {
             description={t('permissions.grants.emptyHint')}
           />
         ) : grants ? (
-          <div className="surface overflow-hidden">
+          <div className="surface overflow-x-auto">
             <div
-              className={`${GRANT_ROW_GRID} border-b border-border bg-bg-subtle/60 px-4 py-2 text-2xs uppercase tracking-wider text-fg-subtle`}
+              className={`${GRANT_ROW_GRID} min-w-[640px] border-b border-border bg-bg-subtle/60 px-4 py-2 text-2xs uppercase tracking-wider text-fg-subtle`}
             >
               <span>{t('permissions.grants.col.principal')}</span>
               <span>{t('permissions.grants.col.memory')}</span>
@@ -342,7 +342,7 @@ export function PermissionsPage() {
               <span>{t('permissions.grants.col.grantedAt')}</span>
               <span />
             </div>
-            <ol className="divide-y divide-border">
+            <ol className="min-w-[640px] divide-y divide-border">
               {grants.map((grant) => {
                 const statusLabel = KNOWN_GRANT_STATUSES.has(grant.status)
                   ? t(`permissions.status.${grant.status}`)
diff --git a/web/src/pages/ProvidersPage.tsx b/web/src/pages/ProvidersPage.tsx
index 9495fe2..09f3291 100644
--- a/web/src/pages/ProvidersPage.tsx
+++ b/web/src/pages/ProvidersPage.tsx
@@ -171,7 +171,7 @@ export function ProvidersPage() {
 
   return (
     <div className="mx-auto max-w-3xl px-8 py-10">
-      <div className="flex flex-wrap items-center justify-center gap-3 mb-1">
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-1">
         <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
           <Settings className="h-5 w-5 text-accent" /> {t('providers.title')}
         </h1>
@@ -183,7 +183,7 @@ export function ProvidersPage() {
           {t('providers.refresh')}
         </Button>
       </div>
-      <p className="text-center text-sm text-fg-muted mb-6">{t('providers.description')}</p>
+      <p className="text-left text-sm text-fg-muted mb-6">{t('providers.description')}</p>
 
       {entitlement && (
         <section
@@ -259,7 +259,7 @@ export function ProvidersPage() {
             const KindIcon = detail.icon;
             return (
               <section key={kind} className="surface p-4">
-                <div className="flex items-center justify-between mb-2">
+                <div className="flex flex-wrap items-center justify-between gap-2 mb-2">
                   <div className="flex min-w-0 items-start gap-2.5">
                     <div className="mt-0.5 grid h-8 w-8 flex-none place-items-center rounded-md border border-border bg-bg-inset text-accent">
                       <KindIcon className="h-4 w-4" />
@@ -283,14 +283,14 @@ export function ProvidersPage() {
                 </div>
                 <p className="mb-3 pl-[42px] text-xs text-fg-muted">{t(detail.descriptionKey)}</p>
 
-                <div className="flex gap-2 items-stretch">
+                <div className="flex flex-wrap justify-end gap-2 items-stretch">
                   <input
                     value={draft}
                     onChange={(e) =>
                       setEditing((m) => ({ ...m, [kind]: e.target.value }))
                     }
                     placeholder="vendor:model"
-                    className="flex-1 h-9 rounded-md border border-border bg-bg-inset px-3 text-sm font-mono outline-none focus:border-accent/60"
+                    className="min-w-0 basis-full sm:basis-0 flex-1 h-9 rounded-md border border-border bg-bg-inset px-3 text-sm font-mono outline-none focus:border-accent/60"
                   />
                   <Button
                     variant="secondary"
diff --git a/web/src/pages/SearchPage.tsx b/web/src/pages/SearchPage.tsx
index c52f5af..b0daec6 100644
--- a/web/src/pages/SearchPage.tsx
+++ b/web/src/pages/SearchPage.tsx
@@ -110,8 +110,8 @@ export function SearchPage() {
         >
           <ArrowLeft className="h-3.5 w-3.5" /> {t('common.backToDrive')}
         </Link>
-        <h1 className="text-center text-2xl font-semibold tracking-tight">{t('search.title')}</h1>
-        <p className="mt-1.5 text-center text-sm text-fg-muted">{t('search.subtitle')}</p>
+        <h1 className="text-left text-2xl font-semibold tracking-tight">{t('search.title')}</h1>
+        <p className="mt-1.5 text-left text-sm text-fg-muted">{t('search.subtitle')}</p>
         <div className="mt-5 relative">
           <Input
             value={q}
@@ -269,7 +269,7 @@ export function SearchPage() {
 
       {/* Footer meta */}
       {hasQuery && data && (
-        <div className="mt-10 text-2xs text-fg-subtle text-center">
+        <div className="mt-10 text-2xs text-fg-subtle text-left">
           {t('search.footer', { total: data.total, ms: data._meta?.latency_ms ?? '?' })}
         </div>
       )}
diff --git a/web/src/pages/TaskDetailPage.tsx b/web/src/pages/TaskDetailPage.tsx
index b4d4336..4826a38 100644
--- a/web/src/pages/TaskDetailPage.tsx
+++ b/web/src/pages/TaskDetailPage.tsx
@@ -33,8 +33,8 @@ export function TaskDetailPage() {
         {t('task.backToTasks')}
       </Link>
 
-      <header className="mb-7 text-center">
-        <div className="mb-2 flex flex-wrap items-center justify-center gap-2">
+      <header className="mb-7 text-left">
+        <div className="mb-2 flex flex-wrap items-center justify-start gap-2">
           <ScrollText className="h-4 w-4 text-accent" />
           <span className="font-mono text-2xs uppercase tracking-[0.16em] text-fg-subtle">
             {t('task.taskKey')}
@@ -43,7 +43,7 @@ export function TaskDetailPage() {
         </div>
         <h1 className="break-all font-mono text-2xl font-semibold text-fg">{taskKey}</h1>
         {head && (
-          <div className="mt-2 flex flex-wrap justify-center gap-x-5 gap-y-2 text-xs text-fg-muted">
+          <div className="mt-2 flex flex-wrap justify-start gap-x-5 gap-y-2 text-xs text-fg-muted">
             <span className="inline-flex items-center gap-1.5">
               <FolderClosed className="h-3.5 w-3.5" />
               <span className="font-mono">{head.scope_path}</span>
@@ -83,7 +83,7 @@ export function TaskDetailPage() {
           <ResumePanel taskKey={taskKey} />
           <div>
             <div className="mb-3 flex items-baseline justify-between gap-3">
-              <h2 className="flex-1 text-center text-sm font-medium text-fg">{t('task.timeline')}</h2>
+              <h2 className="flex-1 text-left text-sm font-medium text-fg">{t('task.timeline')}</h2>
               <span className="font-mono text-2xs text-fg-subtle">
                 {t('task.latestCount', { n: items.length })}
               </span>
diff --git a/web/src/pages/TasksPage.tsx b/web/src/pages/TasksPage.tsx
index e589b38..c533941 100644
--- a/web/src/pages/TasksPage.tsx
+++ b/web/src/pages/TasksPage.tsx
@@ -94,8 +94,8 @@ export function TasksPage() {
 
   return (
     <div className="mx-auto max-w-6xl px-8 py-10">
-      <header className="mb-7 text-center">
-        <div className="mb-2 flex flex-wrap items-center justify-center gap-2 font-mono text-2xs uppercase tracking-[0.18em] text-fg-subtle">
+      <header className="mb-7 text-left">
+        <div className="mb-2 flex flex-wrap items-center justify-start gap-2 font-mono text-2xs uppercase tracking-[0.18em] text-fg-subtle">
           <GitCommitHorizontal className="h-3.5 w-3.5 text-accent" />
           {t('task.portableLedger')}
           {capabilities.data?.workspace.name && (
diff --git a/web/src/pages/TransferPage.tsx b/web/src/pages/TransferPage.tsx
index e8c7a29..4395816 100644
--- a/web/src/pages/TransferPage.tsx
+++ b/web/src/pages/TransferPage.tsx
@@ -312,7 +312,7 @@ function ExportCard({
   const enabled = supported && permitted;
   return (
     <Card className="min-w-0" data-testid="workspace-export-card">
-      <CardHeader className="relative px-16 text-center">
+      <CardHeader className="relative pr-14 text-left">
         <div className="min-w-0">
           <CardTitle>{t('transfer.export.eyebrow')}</CardTitle>
           <h2 className="mt-1.5 text-lg font-semibold">{t('transfer.export.title')}</h2>
@@ -483,7 +483,7 @@ function ImportCard({
 
   return (
     <Card className="min-w-0" data-testid="workspace-import-card">
-      <CardHeader className="relative px-16 text-center">
+      <CardHeader className="relative pr-14 text-left">
         <div className="min-w-0">
           <CardTitle>{t('transfer.import.eyebrow')}</CardTitle>
           <h2 className="mt-1.5 text-lg font-semibold">{t('transfer.import.title')}</h2>
@@ -724,7 +724,7 @@ function ImportHistoryCard({ workspaceID }: { workspaceID: string }) {
 
   return (
     <Card className="min-w-0" data-testid="workspace-import-history">
-      <CardHeader className="relative px-16 text-center">
+      <CardHeader className="relative pr-14 text-left">
         <div className="min-w-0">
           <CardTitle>{t('transfer.history.eyebrow')}</CardTitle>
           <h2 className="mt-1.5 text-lg font-semibold">{t('transfer.history.title')}</h2>
@@ -791,19 +791,19 @@ function WorkspaceTransferSurface({ capabilities }: { capabilities: Capabilities
 
   return (
     <main className="mx-auto w-full max-w-6xl space-y-5 px-4 py-7 sm:px-6 sm:py-10">
-      <header className="min-w-0 text-center">
-        <div className="flex items-center justify-center gap-2 text-xs font-medium uppercase tracking-[0.16em] text-accent">
+      <header className="min-w-0 text-left">
+        <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-[0.16em] text-accent">
           <ArrowLeftRight className="h-3.5 w-3.5" aria-hidden="true" />
           {t('transfer.eyebrow')}
         </div>
-        <div className="mt-2 flex flex-col items-center gap-3">
+        <div className="mt-2 flex flex-wrap items-start justify-between gap-3">
           <div className="min-w-0">
             <h1 className="text-2xl font-semibold sm:text-3xl">{t('transfer.title')}</h1>
-            <p className="mx-auto mt-2 max-w-3xl text-sm leading-relaxed text-fg-muted">
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-fg-muted">
               {t('transfer.subtitle')}
             </p>
           </div>
-          <Badge tone="neutral" className="self-center">
+          <Badge tone="neutral" className="self-start">
             <Fingerprint className="h-3 w-3" aria-hidden="true" />
             {t('transfer.evidenceLedger')}
           </Badge>
diff --git a/web/src/styles/design-tokens.generated.css b/web/src/styles/design-tokens.generated.css
new file mode 100644
index 0000000..42f7f0c
--- /dev/null
+++ b/web/src/styles/design-tokens.generated.css
@@ -0,0 +1,92 @@
+/* GENERATED by scripts/design-tokens.mjs; DO NOT EDIT.
+ * Source: bytefolk/design-system@910456901dda74da4d5b0320cd03d36ad18650b0/tokens/design-tokens.json
+ * SHA-256: 75e62b372f23083c2f35400ce434d40bf1be098375cea85b97352dcfedbf5766; Apache-2.0 (web/design-system/LICENSE).
+ */
+:root, .dark {
+  --bg: 0 0 0;
+  --bg-opacity: 1;
+  --bg-subtle: 31 31 31;
+  --bg-subtle-opacity: 1;
+  --bg-panel: 20 20 20;
+  --bg-panel-opacity: 1;
+  --bg-inset: 29 29 29;
+  --bg-inset-opacity: 1;
+  --fg: 255 255 255;
+  --fg-opacity: 0.85;
+  --fg-muted: 255 255 255;
+  --fg-muted-opacity: 0.65;
+  --fg-subtle: 255 255 255;
+  --fg-subtle-opacity: 0.65;
+  --border: 66 66 66;
+  --border-opacity: 1;
+  --border-strong: 89 89 89;
+  --border-strong-opacity: 1;
+  --accent: 162 195 241;
+  --accent-opacity: 1;
+  --accent-hover: 159 197 244;
+  --accent-hover-opacity: 1;
+  --accent-muted: 21 50 91;
+  --accent-muted-opacity: 1;
+  --accent-solid: 18 83 176;
+  --accent-solid-opacity: 1;
+  --accent-solid-hover: 42 96 162;
+  --accent-solid-hover-opacity: 1;
+  --accent-foreground: 255 255 255;
+  --accent-foreground-opacity: 1;
+  --ai: 204 185 231;
+  --ai-opacity: 1;
+  --success: 149 222 100;
+  --success-opacity: 1;
+  --warn: 248 206 91;
+  --warn-opacity: 1;
+  --danger: 245 174 175;
+  --danger-opacity: 1;
+  --shadow-soft: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  color-scheme: dark;
+}
+.light {
+  --bg: 245 245 245;
+  --bg-opacity: 1;
+  --bg-subtle: 240 240 240;
+  --bg-subtle-opacity: 1;
+  --bg-panel: 255 255 255;
+  --bg-panel-opacity: 1;
+  --bg-inset: 250 250 250;
+  --bg-inset-opacity: 1;
+  --fg: 0 0 0;
+  --fg-opacity: 0.88;
+  --fg-muted: 0 0 0;
+  --fg-muted-opacity: 0.65;
+  --fg-subtle: 0 0 0;
+  --fg-subtle-opacity: 0.65;
+  --border: 217 217 217;
+  --border-opacity: 1;
+  --border-strong: 191 191 191;
+  --border-strong-opacity: 1;
+  --accent: 13 73 156;
+  --accent-opacity: 1;
+  --accent-hover: 33 78 133;
+  --accent-hover-opacity: 1;
+  --accent-muted: 230 244 255;
+  --accent-muted-opacity: 1;
+  --accent-solid: 18 95 204;
+  --accent-solid-opacity: 1;
+  --accent-solid-hover: 45 105 179;
+  --accent-solid-hover-opacity: 1;
+  --accent-foreground: 255 255 255;
+  --accent-foreground-opacity: 1;
+  --ai: 96 39 176;
+  --ai-opacity: 1;
+  --success: 26 89 3;
+  --success-opacity: 1;
+  --warn: 126 57 0;
+  --warn-opacity: 1;
+  --danger: 145 13 24;
+  --danger-opacity: 1;
+  --shadow-soft: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  color-scheme: light;
+}
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index fac8b63..41ef4dd 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -1,63 +1,9 @@
+@import './design-tokens.generated.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/*
- * Design tokens
- * ----
- * Style brief: Linear / Vercel / Raycast. Restrained, geometric, dark or light.
- * Accent: indigo-500-ish, tuned independently for each canvas.
- * Color tokens are emitted as space-separated RGB triples so Tailwind's
- * `<alpha-value>` token works (e.g. `bg-bg/60`).
- */
-:root {
-  /* Dark (default) */
-  --bg: 10 11 15; /* near black, slightly warm */
-  --bg-subtle: 14 16 22; /* sidebar / second surface */
-  --bg-panel: 18 21 28; /* cards */
-  --bg-inset: 23 27 36; /* inputs, code blocks */
-
-  --fg: 232 234 240; /* primary text */
-  --fg-muted: 156 163 175; /* secondary text */
-  --fg-subtle: 139 148 165; /* captions remain readable on inset surfaces */
-
-  --border: 30 35 46;
-  --border-strong: 48 55 72;
-
-  --accent: 129 140 248; /* indigo-400 */
-  --accent-hover: 165 180 252; /* indigo-300 */
-  --accent-muted: 67 56 202; /* indigo-700 */
-
-  --success: 52 211 153;
-  --warn: 251 191 36;
-  --danger: 248 113 113;
-
-  --shadow-soft: 0 1px 0 0 rgb(255 255 255 / 0.03) inset, 0 1px 2px 0 rgb(0 0 0 / 0.4);
-
-  color-scheme: dark;
-}
-
-.light {
-  --bg: 250 250 252;
-  --bg-subtle: 244 245 248;
-  --bg-panel: 255 255 255;
-  --bg-inset: 240 242 246;
-  --fg: 17 24 39;
-  --fg-muted: 75 85 99;
-  --fg-subtle: 96 104 118;
-  --border: 226 230 237;
-  --border-strong: 203 213 225;
-  --accent: 79 70 229;
-  --accent-hover: 67 56 202;
-  --accent-muted: 224 231 255;
-  --success: 6 95 70;
-  --warn: 146 64 14;
-  --danger: 153 27 27;
-  --shadow-soft: 0 1px 0 0 rgb(255 255 255 / 0.8) inset, 0 1px 3px 0 rgb(15 23 42 / 0.12);
-
-  color-scheme: light;
-}
-
 @layer base {
   html,
   body,
@@ -67,6 +13,8 @@
 
   body {
     @apply bg-bg text-fg font-sans antialiased;
+    font-size: 14px;
+    line-height: 1.5714;
     font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 0f8e146..fa6f93f 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,3 +1,5 @@
+const tokenColor = (name) => `rgb(var(--${name}) / calc(var(--${name}-opacity, 1) * <alpha-value>))`;
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{ts,tsx}'],
@@ -7,44 +9,36 @@ export default {
       colors: {
         // Surface tokens — driven by CSS variables so themes swap at runtime.
         bg: {
-          DEFAULT: 'rgb(var(--bg) / <alpha-value>)',
-          subtle: 'rgb(var(--bg-subtle) / <alpha-value>)',
-          panel: 'rgb(var(--bg-panel) / <alpha-value>)',
-          inset: 'rgb(var(--bg-inset) / <alpha-value>)',
+          DEFAULT: tokenColor('bg'),
+          subtle: tokenColor('bg-subtle'),
+          panel: tokenColor('bg-panel'),
+          inset: tokenColor('bg-inset'),
         },
         fg: {
-          DEFAULT: 'rgb(var(--fg) / <alpha-value>)',
-          muted: 'rgb(var(--fg-muted) / <alpha-value>)',
-          subtle: 'rgb(var(--fg-subtle) / <alpha-value>)',
+          DEFAULT: tokenColor('fg'),
+          muted: tokenColor('fg-muted'),
+          subtle: tokenColor('fg-subtle'),
         },
         border: {
-          DEFAULT: 'rgb(var(--border) / <alpha-value>)',
-          strong: 'rgb(var(--border-strong) / <alpha-value>)',
+          DEFAULT: tokenColor('border'),
+          strong: tokenColor('border-strong'),
         },
         accent: {
-          DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
-          hover: 'rgb(var(--accent-hover) / <alpha-value>)',
-          muted: 'rgb(var(--accent-muted) / <alpha-value>)',
+          DEFAULT: tokenColor('accent'),
+          hover: tokenColor('accent-hover'),
+          muted: tokenColor('accent-muted'),
+          solid: tokenColor('accent-solid'),
+          'solid-hover': tokenColor('accent-solid-hover'),
+          foreground: tokenColor('accent-foreground'),
         },
-        success: 'rgb(var(--success) / <alpha-value>)',
-        warn: 'rgb(var(--warn) / <alpha-value>)',
-        danger: 'rgb(var(--danger) / <alpha-value>)',
-      },
-      fontFamily: {
-        sans: [
-          'ui-sans-serif',
-          'system-ui',
-          '-apple-system',
-          'BlinkMacSystemFont',
-          '"PingFang SC"',
-          '"Hiragino Sans GB"',
-          '"Microsoft YaHei"',
-          'sans-serif',
-        ],
-        mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'monospace'],
+        ai: tokenColor('ai'),
+        success: tokenColor('success'),
+        warn: tokenColor('warn'),
+        danger: tokenColor('danger'),
       },
+      fontFamily: { sans: ['var(--font-sans)'], mono: ['var(--font-mono)'] },
       fontSize: {
-        '2xs': ['0.6875rem', { lineHeight: '0.875rem' }],
+        '2xs': ['0.75rem', { lineHeight: '1rem' }],
       },
       boxShadow: {
         soft: 'var(--shadow-soft)',
diff --git a/web/theme-acceptance.mjs b/web/theme-acceptance.mjs
index a99bbfb..a347a50 100644
--- a/web/theme-acceptance.mjs
+++ b/web/theme-acceptance.mjs
@@ -102,7 +102,7 @@ async function addMockSession(context, options = {}) {
 }
 
 async function assertTheme(page, theme) {
-  const expectedColor = theme === 'light' ? '#fafafc' : '#0a0b0f';
+  const expectedColor = theme === 'light' ? 'rgb(245 245 245)' : 'rgb(0 0 0)';
   await page.waitForFunction(
     (expected) =>
       document.documentElement.classList.contains(expected) &&
@@ -154,7 +154,7 @@ try {
       ' ',
       '',
     ),
-    'rgb(250,250,252)',
+    'rgb(245,245,245)',
   );
   await defaultPage.reload({ waitUntil: 'domcontentloaded' });
   await defaultPage.getByRole('button', { name: 'Switch to dark theme' }).waitFor();