From 406bfb1dad5575698d984a2828c93c25d84328a5 Mon Sep 17 00:00:00 2001
From: Color2333 <1552429809@qq.com>
Date: Sat, 10 Oct 2026 12:40:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=85=A8=E7=AB=99=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E7=BB=9F=E4=B8=80=E2=80=94=E2=80=94Agent=20=E7=A9=BA?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E7=B4=A7=E5=87=91=E5=8C=96=20+=20Login/Devic?=
 =?UTF-8?q?e=20=E6=9A=96=E9=BB=91=E5=8C=96=20+=20gray/slate=20=E7=A1=AC?=
 =?UTF-8?q?=E7=BC=96=E7=A0=81=E5=85=A8=E9=87=8F=E6=8D=A2=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E4=BB=A4=E7=89=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agent 空状态：窄栏内大 hero 收紧（图标 10x10/标题 lg/文案合并）
- 登录/设备授权页：冷蓝 slate 渐变 → 暖黑渐变（与暗色令牌一致）
- JobMonitor/ResearchState/Statistics：gray/slate 硬编码 64 处 → ink/border/bg 令牌
- 全站 tailwind 灰阶硬编码清零
---
 frontend/src/pages/Agent.tsx           | 17 +++++-------
 frontend/src/pages/DeviceAuthorize.tsx | 24 ++++++++---------
 frontend/src/pages/JobMonitor.tsx      | 36 +++++++++++++-------------
 frontend/src/pages/Login.tsx           | 14 +++++-----
 frontend/src/pages/ResearchState.tsx   | 28 ++++++++++----------
 frontend/src/pages/Statistics.tsx      | 20 +++++++-------
 6 files changed, 68 insertions(+), 71 deletions(-)

diff --git a/frontend/src/pages/Agent.tsx b/frontend/src/pages/Agent.tsx
index e5fe96d..cae5d72 100644
--- a/frontend/src/pages/Agent.tsx
+++ b/frontend/src/pages/Agent.tsx
@@ -532,18 +532,15 @@ const EmptyState = memo(function EmptyState({ onSelect }: { onSelect: (p: string
   }, []);
 
   return (
-    <div className="flex h-full flex-col items-center overflow-y-auto px-4 pt-12 pb-4">
-      <div className="bg-primary/10 mb-6 flex h-16 w-16 items-center justify-center rounded-2xl">
-        <Sparkles className="text-primary h-8 w-8" />
+    <div className="flex h-full flex-col items-center overflow-y-auto px-4 pt-8 pb-4">
+      <div className="bg-primary/10 mb-3 flex h-10 w-10 items-center justify-center rounded-xl">
+        <Sparkles className="text-primary h-5 w-5" />
       </div>
-      <h2 className="text-ink mb-1 text-2xl font-bold">PaperMind Agent</h2>
-      <p className="text-ink-secondary mb-1 text-center text-sm leading-relaxed">
+      <h2 className="text-ink mb-0.5 text-lg font-bold">PaperMind Agent</h2>
+      <p className="text-ink-tertiary mb-5 max-w-md text-center text-xs leading-relaxed">
         {engine === "python"
           ? "由 Python 引擎驱动（pm 未部署）。"
-          : "由 Pi agent core 驱动——与终端 pm 同一循环、同一工具集。"}
-      </p>
-      <p className="text-ink-tertiary mb-6 max-w-lg text-center text-sm leading-relaxed">
-        告诉我你的研究需求，我会自动规划执行步骤：搜索论文、下载、分析、生成综述。
+          : "由 Pi agent core 驱动，与终端 pm 同一循环、同一工具集。描述研究需求，我会自动规划：搜索 → 下载 → 分析 → 综述。"}
       </p>
 
       {/* 今日研究速览 */}
@@ -552,7 +549,7 @@ const EmptyState = memo(function EmptyState({ onSelect }: { onSelect: (p: string
           {/* 统计卡片 */}
           <div className="grid grid-cols-3 gap-3">
             <div className="border-border bg-surface rounded-xl border p-3 text-center">
-              <div className="text-primary text-2xl font-bold">{today.total_papers}</div>
+              <div className="text-primary tnum text-xl font-bold">{today.total_papers}</div>
               <div className="text-ink-tertiary text-xs">论文总量</div>
             </div>
             <div className="border-border bg-surface rounded-xl border p-3 text-center">
diff --git a/frontend/src/pages/DeviceAuthorize.tsx b/frontend/src/pages/DeviceAuthorize.tsx
index 8d1b0b0..d3c2a4b 100644
--- a/frontend/src/pages/DeviceAuthorize.tsx
+++ b/frontend/src/pages/DeviceAuthorize.tsx
@@ -77,7 +77,7 @@ export default function DeviceAuthorize() {
   // 未认证：内嵌登录页（登录成功后回到本页授权流程）
   if (!checked) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
+      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-[#1B1917] via-[#141210] to-[#1B1917]">
         <Spinner />
       </div>
     );
@@ -90,17 +90,17 @@ export default function DeviceAuthorize() {
   const finalized = decision !== null || info?.status === "denied" || expired;
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-[#1B1917] via-[#141210] to-[#1B1917]">
       <div className="w-full max-w-md px-4">
         <div className="mb-8 text-center">
           <div className="bg-primary/10 mb-4 inline-flex h-16 w-16 items-center justify-center rounded-2xl">
             <MonitorSmartphone className="text-primary h-8 w-8" />
           </div>
           <h1 className="mb-2 text-2xl font-bold text-white">设备登录授权</h1>
-          <p className="text-sm text-slate-400">确认下面设备码与你终端 pm login 显示的一致</p>
+          <p className="text-sm text-[#A2988C]">确认下面设备码与你终端 pm login 显示的一致</p>
         </div>
 
-        <div className="rounded-2xl border border-slate-700/50 bg-slate-800/50 p-6 shadow-xl backdrop-blur-sm">
+        <div className="rounded-2xl border border-[#2E2A25]/60 bg-[#201D1A]/70 p-6 shadow-xl backdrop-blur-sm">
           {/* 设备码输入（URL 未带或需要更正时） */}
           {!info && !loadError && (
             <div className="space-y-3">
@@ -108,7 +108,7 @@ export default function DeviceAuthorize() {
                 value={userCode}
                 onChange={(e) => setUserCode(e.target.value.toUpperCase())}
                 placeholder="输入设备码，如 ABKQ-WERT"
-                className="w-full rounded-xl border border-slate-600 bg-slate-900/50 px-4 py-3 text-center font-mono text-lg tracking-widest text-white placeholder-slate-500 outline-none focus:border-primary"
+                className="w-full rounded-xl border border-[#2E2A25] bg-[#131110]/60 px-4 py-3 text-center font-mono text-lg tracking-widest text-white placeholder-[#575047] outline-none focus:border-primary"
                 maxLength={9}
               />
               <Button
@@ -131,7 +131,7 @@ export default function DeviceAuthorize() {
                   setLoadError("");
                   setUserCode("");
                 }}
-                className="mt-2 block w-full text-xs text-slate-400 underline"
+                className="mt-2 block w-full text-xs text-[#A2988C] underline"
               >
                 重新输入设备码
               </button>
@@ -142,14 +142,14 @@ export default function DeviceAuthorize() {
           {info && !finalized && (
             <div className="space-y-5">
               <div className="text-center">
-                <div className="rounded-xl border border-slate-600 bg-slate-900/50 px-4 py-4 font-mono text-3xl font-bold tracking-widest text-white">
+                <div className="rounded-xl border border-[#2E2A25] bg-[#131110]/60 px-4 py-4 font-mono text-3xl font-bold tracking-widest text-white">
                   {info.user_code}
                 </div>
-                <p className="mt-3 text-sm text-slate-300">
+                <p className="mt-3 text-sm text-[#EBE5DC]">
                   设备 <span className="font-medium text-white">{info.client_name}</span> 请求登录
                   PaperMind
                 </p>
-                <p className="mt-1 flex items-center justify-center gap-1 text-xs text-slate-500">
+                <p className="mt-1 flex items-center justify-center gap-1 text-xs text-[#A2988C]">
                   <Clock className="h-3 w-3" />
                   {Math.floor(info.expires_in / 60)} 分{" "}
                   {String(info.expires_in % 60).padStart(2, "0")} 秒后过期
@@ -206,14 +206,14 @@ export default function DeviceAuthorize() {
           )}
           {expired && (
             <ResultPanel
-              icon={<Clock className="h-10 w-10 text-slate-400" />}
+              icon={<Clock className="h-10 w-10 text-[#A2988C]" />}
               title="已过期"
               desc="授权请求超时，请在终端重新执行 pm login"
             />
           )}
         </div>
 
-        <p className="mt-6 text-center text-xs text-slate-500">
+        <p className="mt-6 text-center text-xs text-[#A2988C]">
           PaperMind · 设备码授权（类似 GitHub CLI 登录流程）
         </p>
       </div>
@@ -226,7 +226,7 @@ function ResultPanel({ icon, title, desc }: { icon: React.ReactNode; title: stri
     <div className="py-6 text-center">
       <div className="mb-3 flex justify-center">{icon}</div>
       <h2 className="text-lg font-semibold text-white">{title}</h2>
-      <p className="mt-1 text-sm text-slate-400">{desc}</p>
+      <p className="mt-1 text-sm text-[#A2988C]">{desc}</p>
     </div>
   );
 }
diff --git a/frontend/src/pages/JobMonitor.tsx b/frontend/src/pages/JobMonitor.tsx
index 71c4790..3c0eb3a 100644
--- a/frontend/src/pages/JobMonitor.tsx
+++ b/frontend/src/pages/JobMonitor.tsx
@@ -2,12 +2,12 @@ import { useEffect, useState, useCallback } from "react";
 import { jobApi, type DurableJobItem, type DurableJobGraph } from "@/services/api";
 
 const STATUS_COLORS: Record<string, string> = {
-  queued: "bg-gray-100 text-gray-600",
+  queued: "bg-hover text-ink-secondary",
   running: "bg-blue-100 text-blue-700",
   succeeded: "bg-green-100 text-green-800",
   partially_succeeded: "bg-yellow-100 text-yellow-800",
   failed: "bg-red-100 text-red-700",
-  cancelled: "bg-gray-100 text-gray-400",
+  cancelled: "bg-hover text-ink-tertiary",
   dead_letter: "bg-red-200 text-red-900",
   manual_recovery: "bg-purple-100 text-purple-800",
 };
@@ -102,7 +102,7 @@ export default function JobMonitor() {
 
       {/* Jobs 列表 */}
       {loading && !jobs.length ? (
-        <p className="text-gray-500">Loading...</p>
+        <p className="text-ink-tertiary">Loading...</p>
       ) : (
         <div className="space-y-2">
           {jobs.map((j) => (
@@ -116,7 +116,7 @@ export default function JobMonitor() {
               <div className="flex items-center gap-2">
                 <span
                   className={`px-2 py-0.5 rounded text-xs font-medium ${
-                    STATUS_COLORS[j.status] ?? "bg-gray-100"
+                    STATUS_COLORS[j.status] ?? "bg-hover"
                   }`}
                 >
                   {j.status}
@@ -133,13 +133,13 @@ export default function JobMonitor() {
                     {(j as any).authority === "go_core" ? "Go" : "存档"}
                   </span>
                 )}
-                <span className="text-xs text-gray-400 ml-auto">{j.id}</span>
+                <span className="text-xs text-ink-tertiary ml-auto">{j.id}</span>
               </div>
               {j.progress?.message && (
-                <p className="text-xs text-gray-600 mt-1">{j.progress.message}</p>
+                <p className="text-xs text-ink-secondary mt-1">{j.progress.message}</p>
               )}
               <div className="flex items-center gap-2 mt-1">
-                <div className="flex-1 bg-gray-200 rounded-full h-1.5">
+                <div className="flex-1 bg-active rounded-full h-1.5">
                   <div
                     className="bg-blue-500 rounded-full h-1.5"
                     style={{
@@ -150,7 +150,7 @@ export default function JobMonitor() {
                     }}
                   />
                 </div>
-                <span className="text-xs text-gray-500">
+                <span className="text-xs text-ink-tertiary">
                   {j.progress?.current ?? 0}/{j.progress?.total ?? 0}
                 </span>
               </div>
@@ -176,7 +176,7 @@ export default function JobMonitor() {
               </div>
             </div>
           ))}
-          {!jobs.length && <p className="text-gray-400 text-sm">No jobs found.</p>}
+          {!jobs.length && <p className="text-ink-tertiary text-sm">No jobs found.</p>}
         </div>
       )}
 
@@ -202,7 +202,7 @@ export default function JobMonitor() {
               </span>
             )}
             <button
-              className="text-gray-400 text-sm ml-auto hover:text-gray-600"
+              className="text-ink-tertiary text-sm ml-auto hover:text-ink-secondary"
               onClick={() => setSelected(null)}
             >
               ✕
@@ -211,7 +211,7 @@ export default function JobMonitor() {
 
           {/* Tasks */}
           <div>
-            <h4 className="text-sm font-medium text-gray-600 mb-2">
+            <h4 className="text-sm font-medium text-ink-secondary mb-2">
               Tasks ({selected.tasks.length})
             </h4>
             <div className="space-y-1">
@@ -219,14 +219,14 @@ export default function JobMonitor() {
                 <div key={t.id} className="flex items-center gap-2 text-xs border rounded p-2">
                   <span
                     className={`px-1.5 py-0.5 rounded ${
-                      STATUS_COLORS[t.status] ?? "bg-gray-100"
+                      STATUS_COLORS[t.status] ?? "bg-hover"
                     }`}
                   >
                     {t.status}
                   </span>
                   <span className="font-mono">{t.capability}</span>
-                  <span className="text-gray-400 ml-auto">attempt {t.attempt_count}</span>
-                  <span className="text-gray-400">{t.resource_class}</span>
+                  <span className="text-ink-tertiary ml-auto">attempt {t.attempt_count}</span>
+                  <span className="text-ink-tertiary">{t.resource_class}</span>
                   {t.last_error && (
                     <span className="text-red-500 text-xs truncate max-w-48">{t.last_error}</span>
                   )}
@@ -248,17 +248,17 @@ export default function JobMonitor() {
           {/* Attempts */}
           {selected.attempts.length > 0 && (
             <div>
-              <h4 className="text-sm font-medium text-gray-600 mb-2">
+              <h4 className="text-sm font-medium text-ink-secondary mb-2">
                 Attempts ({selected.attempts.length})
               </h4>
               <div className="space-y-1">
                 {selected.attempts.map((a) => (
-                  <div key={a.id} className="flex items-center gap-2 text-xs text-gray-600">
+                  <div key={a.id} className="flex items-center gap-2 text-xs text-ink-secondary">
                     <span className="font-mono">#{a.attempt_no}</span>
                     <span>{a.status}</span>
-                    <span className="text-gray-400">{a.executor_id}</span>
+                    <span className="text-ink-tertiary">{a.executor_id}</span>
                     {a.fencing_token > 0 && (
-                      <span className="text-gray-300">fence:{a.fencing_token}</span>
+                      <span className="text-ink-placeholder">fence:{a.fencing_token}</span>
                     )}
                     {a.error_message && (
                       <span className="text-red-500 truncate max-w-48">{a.error_message}</span>
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 2378872..68d3109 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -59,7 +59,7 @@ export default function LoginPage({ onLoginSuccess }: LoginPageProps) {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-[#1B1917] via-[#141210] to-[#1B1917]">
       <div className="w-full max-w-md px-4">
         {/* Logo 和标题 */}
         <div className="mb-8 text-center">
@@ -67,13 +67,13 @@ export default function LoginPage({ onLoginSuccess }: LoginPageProps) {
             <Lock className="text-primary h-8 w-8" />
           </div>
           <h1 className="mb-2 text-2xl font-bold text-white">PaperMind</h1>
-          <p className="text-sm text-slate-400">请输入访问密码</p>
+          <p className="text-sm text-[#A2988C]">请输入访问密码</p>
         </div>
 
         {/* 登录表单 */}
         <form
           onSubmit={handleSubmit}
-          className="rounded-2xl border border-slate-700/50 bg-slate-800/50 p-6 shadow-xl backdrop-blur-sm"
+          className="rounded-2xl border border-[#2E2A25]/60 bg-[#201D1A]/70 p-6 shadow-xl backdrop-blur-sm"
         >
           <div className="relative">
             <input
@@ -81,14 +81,14 @@ export default function LoginPage({ onLoginSuccess }: LoginPageProps) {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               placeholder="访问密码"
-              className="focus:ring-primary w-full rounded-xl border border-slate-600 bg-slate-900/50 px-4 py-3 pr-12 text-white placeholder-slate-500 transition-all focus:border-transparent focus:ring-2 focus:outline-none"
+              className="focus:ring-primary w-full rounded-xl border border-[#2E2A25] bg-[#131110]/60 px-4 py-3 pr-12 text-white placeholder-[#575047] transition-all focus:border-transparent focus:ring-2 focus:outline-none"
               disabled={loading || checkingAuth}
               autoFocus
             />
             <button
               type="button"
               onClick={() => setShowPassword(!showPassword)}
-              className="absolute top-1/2 right-3 -translate-y-1/2 text-slate-500 transition-colors hover:text-slate-300"
+              className="absolute top-1/2 right-3 -translate-y-1/2 text-[#A2988C] transition-colors hover:text-[#EBE5DC]"
             >
               {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
             </button>
@@ -99,7 +99,7 @@ export default function LoginPage({ onLoginSuccess }: LoginPageProps) {
           <button
             type="submit"
             disabled={loading || checkingAuth}
-            className="bg-primary hover:bg-primary-hover mt-4 flex w-full items-center justify-center gap-2 rounded-xl py-3 font-medium text-white transition-colors disabled:bg-slate-600"
+            className="bg-primary hover:bg-primary-hover mt-4 flex w-full items-center justify-center gap-2 rounded-xl py-3 font-medium text-white transition-colors disabled:bg-[#575047]"
           >
             {checkingAuth ? (
               <>
@@ -118,7 +118,7 @@ export default function LoginPage({ onLoginSuccess }: LoginPageProps) {
         </form>
 
         {/* 底部提示 */}
-        <p className="mt-6 text-center text-xs text-slate-500">
+        <p className="mt-6 text-center text-xs text-[#A2988C]">
           PaperMind · AI 驱动的学术论文研究平台
         </p>
       </div>
diff --git a/frontend/src/pages/ResearchState.tsx b/frontend/src/pages/ResearchState.tsx
index 69632e6..4a52df1 100644
--- a/frontend/src/pages/ResearchState.tsx
+++ b/frontend/src/pages/ResearchState.tsx
@@ -13,7 +13,7 @@ interface QuestionInfo {
 const STATUS_COLORS: Record<string, string> = {
   confirmed: "bg-green-100 text-green-800",
   pending_verification: "bg-yellow-100 text-yellow-800",
-  draft: "bg-gray-100 text-gray-600",
+  draft: "bg-hover text-ink-secondary",
   superseded: "bg-orange-100 text-orange-700",
   invalidated: "bg-red-100 text-red-700",
 };
@@ -143,13 +143,13 @@ export default function ResearchState() {
           {/* 问题概览 */}
           <div className="bg-white rounded-lg shadow p-4">
             <h2 className="text-lg font-semibold">{question.title}</h2>
-            <p className="text-gray-600 mt-1">{question.question}</p>
+            <p className="text-ink-secondary mt-1">{question.question}</p>
             <div className="flex gap-2 mt-3 flex-wrap">
               {Object.entries(question.claim_counts.by_status).map(([s, n]) => (
                 <span
                   key={s}
                   className={`px-2 py-1 rounded text-xs font-medium ${
-                    STATUS_COLORS[s] ?? "bg-gray-100 text-gray-600"
+                    STATUS_COLORS[s] ?? "bg-hover text-ink-secondary"
                   }`}
                 >
                   {s}: {n}
@@ -187,20 +187,20 @@ export default function ResearchState() {
                   <div className="flex items-center gap-2">
                     <span
                       className={`px-2 py-0.5 rounded text-xs font-medium ${
-                        STATUS_COLORS[c.status] ?? "bg-gray-100"
+                        STATUS_COLORS[c.status] ?? "bg-hover"
                       }`}
                     >
                       {c.status}
                     </span>
-                    <span className="text-xs text-gray-500">{c.certainty}</span>
-                    <span className="text-xs text-gray-400">origin: {c.origin}</span>
-                    <span className="text-xs text-gray-400 ml-auto">
+                    <span className="text-xs text-ink-tertiary">{c.certainty}</span>
+                    <span className="text-xs text-ink-tertiary">origin: {c.origin}</span>
+                    <span className="text-xs text-ink-tertiary ml-auto">
                       证据: {c.evidence_count}
                     </span>
                   </div>
                   <p className="mt-2 text-sm">{c.statement}</p>
                   {c.statement_zh && (
-                    <p className="text-xs text-gray-500 mt-1">{c.statement_zh}</p>
+                    <p className="text-xs text-ink-tertiary mt-1">{c.statement_zh}</p>
                   )}
                 </div>
               ))}
@@ -223,17 +223,17 @@ export default function ResearchState() {
                             ? "bg-green-100 text-green-700"
                             : ev.stance === "contradicts"
                               ? "bg-red-100 text-red-700"
-                              : "bg-gray-100"
+                              : "bg-hover"
                         }`}
                       >
                         {ev.stance}
                       </span>
-                      <span className="text-xs text-gray-500">
+                      <span className="text-xs text-ink-tertiary">
                         {ev.source_version.paper.title} v{ev.source_version.version_label}
                       </span>
                     </div>
-                    {ev.quote && <p className="mt-1 italic text-gray-700">"{ev.quote}"</p>}
-                    <p className="text-xs text-gray-400 mt-1">
+                    {ev.quote && <p className="mt-1 italic text-ink">"{ev.quote}"</p>}
+                    <p className="text-xs text-ink-tertiary mt-1">
                       {JSON.stringify(ev.locator)}
                     </p>
                   </div>
@@ -260,8 +260,8 @@ export default function ResearchState() {
                     >
                       {DIFF_LABELS[d.diff_kind] ?? d.diff_kind}
                     </span>
-                    <span className="text-gray-600">{d.event}</span>
-                    <span className="text-gray-400 ml-auto text-xs">
+                    <span className="text-ink-secondary">{d.event}</span>
+                    <span className="text-ink-tertiary ml-auto text-xs">
                       {d.occurred_at?.slice(0, 19)}
                     </span>
                   </div>
diff --git a/frontend/src/pages/Statistics.tsx b/frontend/src/pages/Statistics.tsx
index 4a27823..c773f43 100644
--- a/frontend/src/pages/Statistics.tsx
+++ b/frontend/src/pages/Statistics.tsx
@@ -21,7 +21,7 @@ import {
 } from "lucide-react";
 
 const STATUS_COLORS: Record<string, string> = {
-  unread: "bg-slate-400",
+  unread: "bg-ink-tertiary",
   skimmed: "bg-yellow-500",
   deep_read: "bg-primary",
 };
@@ -30,7 +30,7 @@ const SOURCE_COLORS: Record<string, string> = {
   arxiv: "bg-red-500",
   semantic_scholar: "bg-blue-500",
   reference_import: "bg-green-500",
-  unknown: "bg-gray-500",
+  unknown: "bg-page0",
   initial_import: "bg-purple-500",
   manual_collect: "bg-orange-500",
   auto_collect: "bg-cyan-500",
@@ -153,7 +153,7 @@ const TopicCard = memo(function TopicCard({ stat }: { stat: TopicStats }) {
                 style={{ width: `${(stat.status_dist.skimmed / total) * 100}%` }}
               />
               <div
-                className="h-full rounded-r-full bg-slate-300 dark:bg-slate-600"
+                className="h-full rounded-r-full bg-active dark:bg-ink-tertiary"
                 style={{ width: `${(stat.status_dist.unread / total) * 100}%` }}
               />
             </>
@@ -169,7 +169,7 @@ const TopicCard = memo(function TopicCard({ stat }: { stat: TopicStats }) {
             粗读 {stat.status_dist.skimmed}
           </span>
           <span className="flex items-center gap-1">
-            <span className="h-1.5 w-1.5 rounded-full bg-slate-300 dark:bg-slate-600" />
+            <span className="h-1.5 w-1.5 rounded-full bg-active dark:bg-ink-tertiary" />
             未读 {stat.status_dist.unread}
           </span>
         </div>
@@ -401,7 +401,7 @@ function VenueDistribution({ data }: { data: PaperDistributionResponse }) {
   const venues = data.by_venue;
   const maxCount = Math.max(...venues.map((v) => v.count), 1);
 
-  const medals = ["text-amber-500", "text-slate-400", "text-orange-400"];
+  const medals = ["text-amber-500", "text-ink-tertiary", "text-orange-400"];
 
   return (
     <SectionCard title="顶会/期刊分布" icon={<Layers className="text-warning h-4 w-4" />}>
@@ -447,12 +447,12 @@ function ActionSourceStats({ data }: { data: PaperDistributionResponse }) {
             return (
               <div key={a.raw_source} className="flex items-center gap-3">
                 <div
-                  className={`h-2.5 w-2.5 shrink-0 rounded-full ${SOURCE_COLORS[a.raw_source] || "bg-gray-500"}`}
+                  className={`h-2.5 w-2.5 shrink-0 rounded-full ${SOURCE_COLORS[a.raw_source] || "bg-page0"}`}
                 />
                 <span className="flex-1 truncate text-sm">{a.source}</span>
                 <div className="bg-page h-1.5 w-20 shrink-0 overflow-hidden rounded-full shadow-inner">
                   <div
-                    className={`h-full ${SOURCE_COLORS[a.raw_source] || "bg-gray-500"} bar-animate rounded-full`}
+                    className={`h-full ${SOURCE_COLORS[a.raw_source] || "bg-page0"} bar-animate rounded-full`}
                     style={{ width: `${pct}%` }}
                   />
                 </div>
@@ -480,7 +480,7 @@ function ReadStatusOverview({ data }: { data: PaperDistributionResponse }) {
             {statuses.map((s) => (
               <div
                 key={s.raw_status}
-                className={`${STATUS_COLORS[s.raw_status] || "bg-gray-500"} h-full`}
+                className={`${STATUS_COLORS[s.raw_status] || "bg-page0"} h-full`}
                 style={{ width: `${total > 0 ? (s.count / total) * 100 : 0}%` }}
               />
             ))}
@@ -494,11 +494,11 @@ function ReadStatusOverview({ data }: { data: PaperDistributionResponse }) {
                       ? "bg-primary/10"
                       : s.raw_status === "skimmed"
                         ? "bg-yellow-500/10"
-                        : "bg-slate-100 dark:bg-slate-800"
+                        : "bg-hover dark:bg-hover"
                   }`}
                 >
                   <div
-                    className={`h-2 w-2 rounded-full ${STATUS_COLORS[s.raw_status] || "bg-gray-500"}`}
+                    className={`h-2 w-2 rounded-full ${STATUS_COLORS[s.raw_status] || "bg-page0"}`}
                   />
                   <span className="text-xs font-medium">{s.status}</span>
                 </div>