From f19589e817d8ee5b4a46d6041ad6c4921feb6c71 Mon Sep 17 00:00:00 2001
From: frapercan <frapercan1@alum.us.es>
Date: Fri, 8 May 2026 18:01:59 +0200
Subject: [PATCH] =?UTF-8?q?feat(web):=20visual=20coherence=20=E2=80=94=20s?=
 =?UTF-8?q?late=20palette,=20density=20bumps,=20Skeleton=20adoption?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three swings across the Next.js app to retire mismatched style choices
that landed in different sessions. No logic changes.

1) Palette unification: gray-* → slate-*
   The platform polish (#68) introduced slate on the header / home / nav
   while every other page kept gray-. The same session showed two
   neutral palettes side-by-side. Single sed sweep across 24 page and
   component files (641 occurrences) brings everything to slate-.
   Semantic colors (red / blue / emerald / amber / violet) untouched.

2) Density bump in body cells
   text-xs (12px) is hostile for tabular numbers in the data-heavy
   pages. Selective bump to text-[13px] inside <td> cells and body
   paragraphs in /scoring, /annotations, /reranker, /evaluation,
   /jobs/[id], /proteins/[accession]. Labels, chips, badges and
   tracking-* uppercase headers stay at text-xs (intentional).

3) Skeleton adoption
   The repo ships components/Skeleton.tsx but pages roll their own
   `bg-gray-100 rounded animate-pulse`. Migrated the most visible
   loading screen (/benchmark) to use <Skeleton/>. Other ad-hoc
   pulse patterns in cards (jobs / proteins / annotations / fa[id])
   are wrapper-level pulses, not inner skeletons — left intact for a
   follow-up that designs proper skeleton card variants.

CI: next build green; backend untouched.
---
 apps/web/app/[locale]/annotations/page.tsx    |  88 ++++----
 apps/web/app/[locale]/benchmark/page.tsx      |  77 +++----
 apps/web/app/[locale]/embeddings/page.tsx     |  66 +++---
 apps/web/app/[locale]/evaluation/page.tsx     | 144 ++++++------
 .../functional-annotation/[id]/page.tsx       | 206 +++++++++---------
 .../[locale]/functional-annotation/page.tsx   |  58 ++---
 apps/web/app/[locale]/jobs/[id]/page.tsx      |  44 ++--
 apps/web/app/[locale]/jobs/page.tsx           |  46 ++--
 apps/web/app/[locale]/maintenance/page.tsx    |  22 +-
 .../[locale]/proteins/[accession]/page.tsx    |  98 ++++-----
 apps/web/app/[locale]/proteins/page.tsx       |  72 +++---
 apps/web/app/[locale]/query-sets/page.tsx     |  32 +--
 apps/web/app/[locale]/reranker/page.tsx       |  88 ++++----
 apps/web/app/[locale]/scoring/page.tsx        |  88 ++++----
 apps/web/app/[locale]/stack/page.tsx          |  44 ++--
 apps/web/app/[locale]/support/page.tsx        |  12 +-
 apps/web/components/AnnotateForm.tsx          |  16 +-
 apps/web/components/ContextBanner.tsx         |   6 +-
 apps/web/components/DocLinks.tsx              |   6 +-
 apps/web/components/EventTimeline.tsx         |  14 +-
 apps/web/components/GoGraph.tsx               |  14 +-
 apps/web/components/ResetDbButton.tsx         |   6 +-
 apps/web/components/Skeleton.tsx              |   2 +-
 apps/web/components/StatusBadge.tsx           |   4 +-
 apps/web/components/SupportButton.tsx         |  18 +-
 apps/web/components/Tooltip.tsx               |   4 +-
 apps/web/components/UsagePolicyModal.tsx      |   8 +-
 27 files changed, 642 insertions(+), 641 deletions(-)

diff --git a/apps/web/app/[locale]/annotations/page.tsx b/apps/web/app/[locale]/annotations/page.tsx
index 0affb9e..fde76ed 100644
--- a/apps/web/app/[locale]/annotations/page.tsx
+++ b/apps/web/app/[locale]/annotations/page.tsx
@@ -18,7 +18,7 @@ import { useTranslations } from "next-intl";
 type Tab = "sets" | "snapshots" | "load-snapshot" | "load-goa" | "load-quickgo";
 
 const inputClass = "w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";
-const labelClass = "block text-sm font-medium text-gray-700 mb-1";
+const labelClass = "block text-sm font-medium text-slate-700 mb-1";
 
 function formatDate(iso?: string | null) {
   if (!iso) return "—";
@@ -209,7 +209,7 @@ export default function AnnotationsPage() {
             className={`px-3 sm:px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
               activeTab === tab.key
                 ? "border-blue-600 text-blue-600"
-                : "border-transparent text-gray-500 hover:text-gray-700"
+                : "border-transparent text-slate-500 hover:text-slate-700"
             }`}
           >
             {tab.label}
@@ -221,8 +221,8 @@ export default function AnnotationsPage() {
       {activeTab === "sets" && (
         <div>
           <div className="flex items-center justify-between mb-3">
-            <p className="text-sm text-gray-500">{t("setsTab.annotationSets", { count: sets.length })}</p>
-            <button onClick={loadSets} className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-50">
+            <p className="text-sm text-slate-500">{t("setsTab.annotationSets", { count: sets.length })}</p>
+            <button onClick={loadSets} className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-slate-50">
               {t("setsTab.refresh")}
             </button>
           </div>
@@ -230,19 +230,19 @@ export default function AnnotationsPage() {
           <div className="lg:hidden space-y-2">
             {loadingSets && Array.from({ length: 3 }).map((_, i) => (
               <div key={i} className="rounded-lg border bg-white p-4 shadow-sm animate-pulse">
-                <div className="h-4 bg-gray-200 rounded w-1/3 mb-2" />
-                <div className="h-3 bg-gray-100 rounded w-2/3" />
+                <div className="h-4 bg-slate-200 rounded w-1/3 mb-2" />
+                <div className="h-3 bg-slate-100 rounded w-2/3" />
               </div>
             ))}
             {!loadingSets && sets.length === 0 && (
-              <div className="rounded-lg border bg-white px-4 py-8 text-center text-sm text-gray-400 shadow-sm">
+              <div className="rounded-lg border bg-white px-4 py-8 text-center text-sm text-slate-400 shadow-sm">
                 {t("setsTab.noSetsFound")}
               </div>
             )}
             {sets.map((a) => (
               <div key={a.id} className="rounded-lg border bg-white p-4 shadow-sm">
                 <div className="flex items-center justify-between mb-1">
-                  <span className="font-medium text-gray-800">{a.source}</span>
+                  <span className="font-medium text-slate-800">{a.source}</span>
                   <button
                     onClick={() => handleDeleteSet(a.id)}
                     className="rounded border border-red-200 px-2 py-1 text-xs text-red-600 hover:bg-red-50 transition-colors"
@@ -250,15 +250,15 @@ export default function AnnotationsPage() {
                     {t("setsTab.delete")}
                   </button>
                 </div>
-                <p className="text-xs text-gray-500">{a.source_version ?? "—"} · {(a.annotation_count ?? 0).toLocaleString()} annotations</p>
+                <p className="text-[13px] text-slate-500">{a.source_version ?? "—"} · {(a.annotation_count ?? 0).toLocaleString()} annotations</p>
                 <div className="mt-1 flex flex-wrap gap-1">
                   {a.meta && Object.entries(a.meta).map(([k, v]) => (
-                    <span key={k} className="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600">
+                    <span key={k} className="rounded bg-slate-100 px-1.5 py-0.5 text-[13px] text-slate-600">
                       {k}: {Array.isArray(v) ? v.join(", ") : String(v)}
                     </span>
                   ))}
                 </div>
-                <div className="mt-1 flex items-center gap-2 text-xs text-gray-400">
+                <div className="mt-1 flex items-center gap-2 text-xs text-slate-400">
                   <span className="font-mono">{shortId(a.id)}</span>
                   <span>{formatDate(a.created_at)}</span>
                   {a.job_id && (
@@ -271,29 +271,29 @@ export default function AnnotationsPage() {
 
           {/* Desktop table */}
           <div className="hidden lg:block overflow-x-auto rounded-lg border bg-white shadow-sm">
-            <div className="grid grid-cols-[80px_100px_140px_100px_1fr_160px_60px] gap-2 border-b bg-gray-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
+            <div className="grid grid-cols-[80px_100px_140px_100px_1fr_160px_60px] gap-2 border-b bg-slate-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
               <div>{t("setsTab.tableHeaders.id")}</div><div>{t("setsTab.tableHeaders.source")}</div><div>{t("setsTab.tableHeaders.version")}</div><div>{t("setsTab.tableHeaders.annotations")}</div><div>{t("setsTab.tableHeaders.meta")}</div><div>{t("setsTab.tableHeaders.created")}</div><div></div>
             </div>
             {loadingSets && Array.from({ length: 3 }).map((_, i) => <SkeletonTableRow key={i} cols={7} />)}
             {!loadingSets && sets.length === 0 && (
-              <div className="px-4 py-8 text-center text-sm text-gray-400">
+              <div className="px-4 py-8 text-center text-sm text-slate-400">
                 {t("setsTab.noSetsFound")}
               </div>
             )}
             {sets.map((a) => (
               <div key={a.id} className="grid grid-cols-[80px_100px_140px_100px_1fr_160px_60px] gap-2 border-b px-4 py-3 text-sm last:border-0 items-center">
-                <div className="font-mono text-xs text-gray-400" title={a.id}>{shortId(a.id)}</div>
-                <div className="font-medium text-gray-800">{a.source}</div>
-                <div className="text-xs text-gray-500">{a.source_version ?? "—"}</div>
-                <div className="text-gray-700">{(a.annotation_count ?? 0).toLocaleString()}</div>
+                <div className="font-mono text-xs text-slate-400" title={a.id}>{shortId(a.id)}</div>
+                <div className="font-medium text-slate-800">{a.source}</div>
+                <div className="text-[13px] text-slate-500">{a.source_version ?? "—"}</div>
+                <div className="text-slate-700">{(a.annotation_count ?? 0).toLocaleString()}</div>
                 <div className="flex flex-wrap gap-1">
                   {a.meta && Object.entries(a.meta).map(([k, v]) => (
-                    <span key={k} className="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600">
+                    <span key={k} className="rounded bg-slate-100 px-1.5 py-0.5 text-[13px] text-slate-600">
                       {k}: {Array.isArray(v) ? v.join(", ") : String(v)}
                     </span>
                   ))}
                 </div>
-                <div className="flex items-center gap-2 text-xs text-gray-400">
+                <div className="flex items-center gap-2 text-xs text-slate-400">
                   {formatDate(a.created_at)}
                   {a.job_id && (
                     <Link href={`/jobs/${a.job_id}`} className="text-blue-400 hover:text-blue-600" title="View job">↗</Link>
@@ -317,8 +317,8 @@ export default function AnnotationsPage() {
       {activeTab === "snapshots" && (
         <div>
           <div className="flex items-center justify-between mb-3">
-            <p className="text-sm text-gray-500">{t("snapshotsTab.snapshots", { count: snapshots.length })}</p>
-            <button onClick={loadSnapshots} className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-50">
+            <p className="text-sm text-slate-500">{t("snapshotsTab.snapshots", { count: snapshots.length })}</p>
+            <button onClick={loadSnapshots} className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-slate-50">
               {t("snapshotsTab.refresh")}
             </button>
           </div>
@@ -326,20 +326,20 @@ export default function AnnotationsPage() {
           <div className="lg:hidden space-y-2">
             {loadingSnaps && Array.from({ length: 2 }).map((_, i) => (
               <div key={i} className="rounded-lg border bg-white p-4 shadow-sm animate-pulse">
-                <div className="h-4 bg-gray-200 rounded w-1/3 mb-2" />
-                <div className="h-3 bg-gray-100 rounded w-2/3" />
+                <div className="h-4 bg-slate-200 rounded w-1/3 mb-2" />
+                <div className="h-3 bg-slate-100 rounded w-2/3" />
               </div>
             ))}
             {!loadingSnaps && snapshots.length === 0 && (
-              <div className="rounded-lg border bg-white px-4 py-8 text-center text-sm text-gray-400 shadow-sm">
+              <div className="rounded-lg border bg-white px-4 py-8 text-center text-sm text-slate-400 shadow-sm">
                 {t("snapshotsTab.noSnapshotsFound")}
               </div>
             )}
             {snapshots.map((s) => (
               <div key={s.id} className="rounded-lg border bg-white p-4 shadow-sm space-y-2">
                 <div className="flex items-center justify-between">
-                  <span className="font-medium text-gray-800">{s.obo_version}</span>
-                  <span className="text-xs text-gray-400">{(s.go_term_count ?? 0).toLocaleString()} terms</span>
+                  <span className="font-medium text-slate-800">{s.obo_version}</span>
+                  <span className="text-xs text-slate-400">{(s.go_term_count ?? 0).toLocaleString()} terms</span>
                 </div>
                 <div className="min-w-0">
                   {iaEditId === s.id ? (
@@ -358,25 +358,25 @@ export default function AnnotationsPage() {
                       />
                       <div className="flex gap-1">
                         <button onClick={() => handleSaveIa(s.id)} disabled={iaSaving} className="rounded bg-blue-600 px-2 py-1 text-xs text-white hover:bg-blue-700 disabled:opacity-50">{t("snapshotsTab.save")}</button>
-                        <button onClick={() => setIaEditId(null)} className="rounded border px-2 py-1 text-xs text-gray-500 hover:bg-gray-50">{t("snapshotsTab.cancel")}</button>
+                        <button onClick={() => setIaEditId(null)} className="rounded border px-2 py-1 text-[13px] text-slate-500 hover:bg-slate-50">{t("snapshotsTab.cancel")}</button>
                       </div>
                     </div>
                   ) : (
                     <button
                       onClick={() => { setIaEditId(s.id); setIaEditValue(s.ia_url ?? ""); }}
-                      className="w-full text-left flex items-center gap-2 rounded px-1 py-0.5 hover:bg-gray-50 active:bg-gray-100 transition-colors"
+                      className="w-full text-left flex items-center gap-2 rounded px-1 py-0.5 hover:bg-slate-50 active:bg-slate-100 transition-colors"
                       title={t("snapshotsTab.editTooltip")}
                     >
                       {s.ia_url ? (
-                        <span className="truncate text-xs text-gray-500 font-mono flex-1">{s.ia_url}</span>
+                        <span className="truncate text-[13px] text-slate-500 font-mono flex-1">{s.ia_url}</span>
                       ) : (
                         <span className="text-xs text-amber-500 italic flex-1">{t("snapshotsTab.notSet")}</span>
                       )}
-                      <span className="shrink-0 text-gray-400 text-xs">✎</span>
+                      <span className="shrink-0 text-slate-400 text-xs">✎</span>
                     </button>
                   )}
                 </div>
-                <div className="flex items-center gap-2 text-xs text-gray-400">
+                <div className="flex items-center gap-2 text-xs text-slate-400">
                   <span className="font-mono">{shortId(s.id)}</span>
                   <span>{formatDate(s.loaded_at)}</span>
                 </div>
@@ -386,20 +386,20 @@ export default function AnnotationsPage() {
 
           {/* Desktop table */}
           <div className="hidden lg:block overflow-x-auto rounded-lg border bg-white shadow-sm">
-            <div className="grid grid-cols-[80px_160px_100px_minmax(160px,1fr)_160px] min-w-[700px] gap-2 border-b bg-gray-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
+            <div className="grid grid-cols-[80px_160px_100px_minmax(160px,1fr)_160px] min-w-[700px] gap-2 border-b bg-slate-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
               <div>{t("snapshotsTab.tableHeaders.id")}</div><div>{t("snapshotsTab.tableHeaders.version")}</div><div>{t("snapshotsTab.tableHeaders.goTerms")}</div><div>{t("snapshotsTab.tableHeaders.iaUrl")}</div><div>{t("snapshotsTab.tableHeaders.loaded")}</div>
             </div>
             {loadingSnaps && Array.from({ length: 2 }).map((_, i) => <SkeletonTableRow key={i} cols={5} />)}
             {!loadingSnaps && snapshots.length === 0 && (
-              <div className="px-4 py-8 text-center text-sm text-gray-400">
+              <div className="px-4 py-8 text-center text-sm text-slate-400">
                 {t("snapshotsTab.noSnapshotsFound")}
               </div>
             )}
             {snapshots.map((s) => (
               <div key={s.id} className="grid grid-cols-[80px_160px_100px_minmax(160px,1fr)_160px] min-w-[700px] gap-2 border-b px-4 py-3 text-sm last:border-0 items-center">
-                <div className="font-mono text-xs text-gray-400" title={s.id}>{shortId(s.id)}</div>
-                <div className="font-medium text-gray-800">{s.obo_version}</div>
-                <div className="text-gray-700">{(s.go_term_count ?? 0).toLocaleString()}</div>
+                <div className="font-mono text-xs text-slate-400" title={s.id}>{shortId(s.id)}</div>
+                <div className="font-medium text-slate-800">{s.obo_version}</div>
+                <div className="text-slate-700">{(s.go_term_count ?? 0).toLocaleString()}</div>
                 <div className="min-w-0">
                   {iaEditId === s.id ? (
                     <div className="flex items-center gap-1">
@@ -424,7 +424,7 @@ export default function AnnotationsPage() {
                       </button>
                       <button
                         onClick={() => setIaEditId(null)}
-                        className="rounded border px-2 py-1 text-xs text-gray-500 hover:bg-gray-50"
+                        className="rounded border px-2 py-1 text-[13px] text-slate-500 hover:bg-slate-50"
                       >
                         {t("snapshotsTab.cancel")}
                       </button>
@@ -432,19 +432,19 @@ export default function AnnotationsPage() {
                   ) : (
                     <button
                       onClick={() => { setIaEditId(s.id); setIaEditValue(s.ia_url ?? ""); }}
-                      className="w-full text-left flex items-center gap-2 rounded px-1 py-0.5 hover:bg-gray-50 active:bg-gray-100 transition-colors"
+                      className="w-full text-left flex items-center gap-2 rounded px-1 py-0.5 hover:bg-slate-50 active:bg-slate-100 transition-colors"
                       title={t("snapshotsTab.editTooltip")}
                     >
                       {s.ia_url ? (
-                        <span className="truncate text-xs text-gray-500 font-mono flex-1">{s.ia_url}</span>
+                        <span className="truncate text-[13px] text-slate-500 font-mono flex-1">{s.ia_url}</span>
                       ) : (
                         <span className="text-xs text-amber-500 italic flex-1">{t("snapshotsTab.notSet")}</span>
                       )}
-                      <span className="shrink-0 text-gray-400 text-xs">✎</span>
+                      <span className="shrink-0 text-slate-400 text-xs">✎</span>
                     </button>
                   )}
                 </div>
-                <div className="text-xs text-gray-400">{formatDate(s.loaded_at)}</div>
+                <div className="text-xs text-slate-400">{formatDate(s.loaded_at)}</div>
               </div>
             ))}
           </div>
@@ -456,7 +456,7 @@ export default function AnnotationsPage() {
         <div className="max-w-2xl">
           <div className="rounded-lg border bg-white p-6 shadow-sm">
             <h2 className="text-base font-semibold mb-1">{t("loadSnapshotTab.title")}</h2>
-            <p className="text-sm text-gray-500 mb-4">{t("loadSnapshotTab.description")}</p>
+            <p className="text-sm text-slate-500 mb-4">{t("loadSnapshotTab.description")}</p>
             <form onSubmit={handleLoadSnapshot} className="space-y-4">
               <div>
                 <label className={labelClass}>{t("loadSnapshotTab.oboUrlLabel")}</label>
@@ -491,7 +491,7 @@ export default function AnnotationsPage() {
         <div className="max-w-2xl">
           <div className="rounded-lg border bg-white p-6 shadow-sm">
             <h2 className="text-base font-semibold mb-1">{t("loadGoaTab.title")}</h2>
-            <p className="text-sm text-gray-500 mb-4">{t("loadGoaTab.description")}</p>
+            <p className="text-sm text-slate-500 mb-4">{t("loadGoaTab.description")}</p>
             <form onSubmit={handleLoadGoa} className="space-y-4">
               <div>
                 <label className={labelClass}>{t("loadGoaTab.snapshotLabel")}</label>
@@ -550,7 +550,7 @@ export default function AnnotationsPage() {
         <div className="max-w-2xl">
           <div className="rounded-lg border bg-white p-6 shadow-sm">
             <h2 className="text-base font-semibold mb-1">{t("loadQuickgoTab.title")}</h2>
-            <p className="text-sm text-gray-500 mb-4">{t("loadQuickgoTab.description")}</p>
+            <p className="text-sm text-slate-500 mb-4">{t("loadQuickgoTab.description")}</p>
             <form onSubmit={handleLoadQuickgo} className="space-y-4">
               <div>
                 <label className={labelClass}>{t("loadQuickgoTab.snapshotLabel")}</label>
diff --git a/apps/web/app/[locale]/benchmark/page.tsx b/apps/web/app/[locale]/benchmark/page.tsx
index b93c04d..5c33b92 100644
--- a/apps/web/app/[locale]/benchmark/page.tsx
+++ b/apps/web/app/[locale]/benchmark/page.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
+import { Skeleton } from "@/components/Skeleton";
 import {
   getBenchmarkEmbeddings,
   getBenchmarkMatrix,
@@ -227,8 +228,8 @@ export default function BenchmarkPage() {
   if (!embeddings || !matrix || stage === null) {
     return (
       <div className="max-w-6xl mx-auto px-4 sm:px-6 py-12 space-y-8">
-        <div className="h-8 w-64 bg-gray-100 rounded animate-pulse" />
-        <div className="h-96 bg-gray-100 rounded-lg animate-pulse" />
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-96 rounded-lg" />
       </div>
     );
   }
@@ -254,8 +255,8 @@ export default function BenchmarkPage() {
       {/* Header */}
       <header className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900">Benchmark matrix</h1>
-          <p className="text-sm text-gray-500 mt-1">
+          <h1 className="text-2xl font-bold text-slate-900">Benchmark matrix</h1>
+          <p className="text-sm text-slate-500 mt-1">
             Per-embedding Fmax across categories and aspects for every evaluation
             run in the database.{" "}
             <Link href="/" className="text-blue-600 hover:underline">
@@ -272,7 +273,7 @@ export default function BenchmarkPage() {
                 rowsToCsv(embeddings, matrix.rows, stage),
               )
             }
-            className="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Download CSV
           </button>
@@ -339,10 +340,10 @@ export default function BenchmarkPage() {
       {/* Filters */}
       <div className="flex flex-wrap gap-3 items-end">
         <div>
-          <label className="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">
+          <label className="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">
             Pipeline stage
           </label>
-          <div className="flex flex-wrap gap-1 rounded-lg bg-gray-100 p-0.5">
+          <div className="flex flex-wrap gap-1 rounded-lg bg-slate-100 p-0.5">
             {stageList.map((s) => (
               <button
                 key={s.name}
@@ -350,13 +351,13 @@ export default function BenchmarkPage() {
                 title={`${s.kind}${s.is_baseline ? " · baseline" : ""}`}
                 className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
                   stage === s.name
-                    ? "bg-white text-gray-900 shadow-sm"
-                    : "text-gray-500 hover:text-gray-700"
+                    ? "bg-white text-slate-900 shadow-sm"
+                    : "text-slate-500 hover:text-slate-700"
                 }`}
               >
                 {s.label}
                 {s.is_baseline && (
-                  <span className="ml-1 text-[9px] text-gray-400 uppercase">base</span>
+                  <span className="ml-1 text-[9px] text-slate-400 uppercase">base</span>
                 )}
               </button>
             ))}
@@ -365,18 +366,18 @@ export default function BenchmarkPage() {
 
         {catalog.ks.length > 0 && (
           <div>
-            <label className="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">
+            <label className="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">
               Neighbours (K)
             </label>
-            <div className="flex gap-1 rounded-lg bg-gray-100 p-0.5">
+            <div className="flex gap-1 rounded-lg bg-slate-100 p-0.5">
               {catalog.ks.map((n) => (
                 <button
                   key={n}
                   onClick={() => setSelectedK(n)}
                   className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
                     selectedK === n
-                      ? "bg-white text-gray-900 shadow-sm"
-                      : "text-gray-500 hover:text-gray-700"
+                      ? "bg-white text-slate-900 shadow-sm"
+                      : "text-slate-500 hover:text-slate-700"
                   }`}
                 >
                   K={n}
@@ -388,13 +389,13 @@ export default function BenchmarkPage() {
 
         {evalSetList.length > 1 && (
           <div>
-            <label className="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">
+            <label className="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">
               Evaluation set
             </label>
             <select
               value={evalSetId}
               onChange={(e) => setEvalSetId(e.target.value)}
-              className="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700"
+              className="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-700"
             >
               <option value="all">All splits</option>
               {evalSetList.map((es) => (
@@ -406,7 +407,7 @@ export default function BenchmarkPage() {
           </div>
         )}
 
-        <div className="text-xs text-gray-400 ml-auto self-end">
+        <div className="text-xs text-slate-400 ml-auto self-end">
           {matrix.total} cells · {matrix.embedding_config_ids.length} embeddings ·{" "}
           {matrix.evaluation_sets.length} eval set
           {matrix.evaluation_sets.length === 1 ? "" : "s"}
@@ -487,9 +488,9 @@ export default function BenchmarkPage() {
       {matrix.best_per_cell.length > 0 && (
         <section className="rounded-xl border bg-white shadow-sm p-4">
           <div className="flex items-baseline justify-between mb-3">
-            <h2 className="text-sm font-semibold text-gray-800">
+            <h2 className="text-sm font-semibold text-slate-800">
               Best Fmax per cell
-              <span className="ml-2 text-xs font-normal text-gray-400">
+              <span className="ml-2 text-xs font-normal text-slate-400">
                 in current selection
                 {stage ? ` · stage=${stageLabel(stageList, stage)}` : ""}
                 {selectedK ? ` · K=${selectedK}` : ""}
@@ -500,11 +501,11 @@ export default function BenchmarkPage() {
             <table className="w-full text-sm">
               <thead>
                 <tr>
-                  <th className="px-2 py-1 text-left font-medium text-gray-500"></th>
+                  <th className="px-2 py-1 text-left font-medium text-slate-500"></th>
                   {aspects.map((asp) => (
                     <th
                       key={asp}
-                      className="px-2 py-1 text-center text-[10px] font-medium text-gray-500 uppercase tracking-wide"
+                      className="px-2 py-1 text-center text-[10px] font-medium text-slate-500 uppercase tracking-wide"
                     >
                       {asp}
                     </th>
@@ -514,14 +515,14 @@ export default function BenchmarkPage() {
               <tbody>
                 {categories.map((cat) => (
                   <tr key={cat} className="border-t">
-                    <td className="px-2 py-2 font-semibold text-gray-700">{cat}</td>
+                    <td className="px-2 py-2 font-semibold text-slate-700">{cat}</td>
                     {aspects.map((asp) => {
                       const best = bestPerCell.get(`${cat}|${asp}`);
                       if (!best) {
                         return (
                           <td
                             key={asp}
-                            className="px-2 py-2 text-center text-gray-300"
+                            className="px-2 py-2 text-center text-slate-300"
                           >
                             —
                           </td>
@@ -534,13 +535,13 @@ export default function BenchmarkPage() {
                           className="px-2 py-2 text-center border-l"
                           title={`${emb?.display_name ?? best.embedding_config_id} · ${stageLabel(stageList, best.stage)}`}
                         >
-                          <div className="font-semibold text-gray-900 tabular-nums">
+                          <div className="font-semibold text-slate-900 tabular-nums">
                             {best.fmax.toFixed(3)}
                           </div>
-                          <div className="text-[10px] text-gray-500 truncate max-w-[120px] mx-auto">
+                          <div className="text-[10px] text-slate-500 truncate max-w-[120px] mx-auto">
                             {emb?.display_name ?? "—"}
                           </div>
-                          <div className="text-[9px] text-gray-400 truncate max-w-[120px] mx-auto">
+                          <div className="text-[9px] text-slate-400 truncate max-w-[120px] mx-auto">
                             {stageLabel(stageList, best.stage)}
                           </div>
                         </td>
@@ -556,12 +557,12 @@ export default function BenchmarkPage() {
 
       {/* Matrix table */}
       {!hasData ? (
-        <section className="rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 p-12 text-center">
-          <p className="text-gray-500 text-sm">
+        <section className="rounded-xl border-2 border-dashed border-slate-200 bg-slate-50 p-12 text-center">
+          <p className="text-slate-500 text-sm">
             No evaluation results for{" "}
             <span className="font-semibold">{currentStageLabel}</span> yet.
           </p>
-          <p className="text-gray-400 text-xs mt-2">
+          <p className="text-slate-400 text-xs mt-2">
             Run <code>run_cafa_evaluation</code> for an embedding to populate
             this cell of the matrix.
           </p>
@@ -569,11 +570,11 @@ export default function BenchmarkPage() {
       ) : (
         <div className="overflow-x-auto rounded-lg border bg-white shadow-sm">
           <table className="w-full text-sm">
-            <thead className="bg-gray-50">
+            <thead className="bg-slate-50">
               <tr>
                 <th
                   rowSpan={2}
-                  className="px-4 py-2 text-left font-medium text-gray-600 border-b sticky left-0 bg-gray-50"
+                  className="px-4 py-2 text-left font-medium text-slate-600 border-b sticky left-0 bg-slate-50"
                 >
                   Embedding
                 </th>
@@ -581,7 +582,7 @@ export default function BenchmarkPage() {
                   <th
                     key={cat}
                     colSpan={aspects.length}
-                    className="px-2 py-1.5 text-center font-semibold text-gray-700 border-b border-l"
+                    className="px-2 py-1.5 text-center font-semibold text-slate-700 border-b border-l"
                   >
                     {cat}
                   </th>
@@ -592,7 +593,7 @@ export default function BenchmarkPage() {
                   aspects.map((asp) => (
                     <th
                       key={`${cat}-${asp}`}
-                      className="px-2 py-1 text-center text-[10px] font-medium text-gray-500 uppercase tracking-wide border-b border-l"
+                      className="px-2 py-1 text-center text-[10px] font-medium text-slate-500 uppercase tracking-wide border-b border-l"
                     >
                       {asp}
                     </th>
@@ -609,10 +610,10 @@ export default function BenchmarkPage() {
                     className={`border-t ${hasRow ? "" : "opacity-50"}`}
                   >
                     <td className="px-4 py-2 sticky left-0 bg-white border-r">
-                      <div className="font-medium text-gray-900">
+                      <div className="font-medium text-slate-900">
                         {emb.display_name}
                       </div>
-                      <div className="text-[10px] text-gray-400 font-mono">
+                      <div className="text-[10px] text-slate-400 font-mono">
                         {emb.family}
                         {emb.param_count != null
                           ? ` · ${formatParams(emb.param_count)}`
@@ -640,13 +641,13 @@ export default function BenchmarkPage() {
                             {row ? (
                               <span
                                 className={`font-semibold ${
-                                  isWinner ? "text-green-700" : "text-gray-900"
+                                  isWinner ? "text-green-700" : "text-slate-900"
                                 }`}
                               >
                                 {row.fmax.toFixed(3)}
                               </span>
                             ) : (
-                              <span className="text-gray-300">—</span>
+                              <span className="text-slate-300">—</span>
                             )}
                           </td>
                         );
@@ -660,7 +661,7 @@ export default function BenchmarkPage() {
         </div>
       )}
 
-      <p className="text-xs text-gray-400">
+      <p className="text-xs text-slate-400">
         Display names and stage labels come from{" "}
         <code>embedding_config</code> (DB) and{" "}
         <code>protea/config/benchmark.yaml</code>. Edit the YAML to change
diff --git a/apps/web/app/[locale]/embeddings/page.tsx b/apps/web/app/[locale]/embeddings/page.tsx
index a45eaee..f91f222 100644
--- a/apps/web/app/[locale]/embeddings/page.tsx
+++ b/apps/web/app/[locale]/embeddings/page.tsx
@@ -224,7 +224,7 @@ export default function EmbeddingsPage() {
 
   const inputClass =
     "w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";
-  const labelClass = "block text-sm font-medium text-gray-700 mb-1";
+  const labelClass = "block text-sm font-medium text-slate-700 mb-1";
 
   return (
     <>
@@ -257,7 +257,7 @@ export default function EmbeddingsPage() {
             className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
               activeTab === tab.key
                 ? "border-blue-600 text-blue-600"
-                : "border-transparent text-gray-500 hover:text-gray-700"
+                : "border-transparent text-slate-500 hover:text-slate-700"
             }`}
           >
             {tab.label}
@@ -269,7 +269,7 @@ export default function EmbeddingsPage() {
       {activeTab === "configs" && (
         <div>
           <div className="flex items-center justify-between mb-3">
-            <p className="text-sm text-gray-500">{t("configsTab.configs", { count: configs.length })}</p>
+            <p className="text-sm text-slate-500">{t("configsTab.configs", { count: configs.length })}</p>
             <button
               onClick={() => setShowConfigForm((v) => !v)}
               className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700"
@@ -342,7 +342,7 @@ export default function EmbeddingsPage() {
                       />
                     )}
                     {cfgModelPreset !== "__custom__" && (
-                      <p className="mt-1 font-mono text-xs text-gray-400 truncate" title={cfgModelPreset}>
+                      <p className="mt-1 font-mono text-xs text-slate-400 truncate" title={cfgModelPreset}>
                         {cfgModelPreset}
                       </p>
                     )}
@@ -350,7 +350,7 @@ export default function EmbeddingsPage() {
                   <div>
                     <label className={labelClass}>
                       {t("configsTab.newConfigForm.layerIndicesLabel")}{" "}
-                      <span className="font-normal text-gray-400">{t("configsTab.newConfigForm.layerIndicesHelper")}</span>
+                      <span className="font-normal text-slate-400">{t("configsTab.newConfigForm.layerIndicesHelper")}</span>
                     </label>
                     <input
                       type="text"
@@ -407,7 +407,7 @@ export default function EmbeddingsPage() {
                       onChange={(e) => setCfgNormalizeResidues(e.target.checked)}
                       className="rounded"
                     />
-                    <label htmlFor="cfg-norm-residues" className="text-sm text-gray-700 cursor-pointer">
+                    <label htmlFor="cfg-norm-residues" className="text-sm text-slate-700 cursor-pointer">
                       {t("configsTab.newConfigForm.normalizeResidues")}
                     </label>
                   </div>
@@ -419,7 +419,7 @@ export default function EmbeddingsPage() {
                       onChange={(e) => setCfgNormalize(e.target.checked)}
                       className="rounded"
                     />
-                    <label htmlFor="cfg-normalize" className="text-sm text-gray-700 cursor-pointer">
+                    <label htmlFor="cfg-normalize" className="text-sm text-slate-700 cursor-pointer">
                       {t("configsTab.newConfigForm.normalizeFinal")}
                     </label>
                   </div>
@@ -433,7 +433,7 @@ export default function EmbeddingsPage() {
                       onChange={(e) => setCfgUseChunking(e.target.checked)}
                       className="rounded"
                     />
-                    <label htmlFor="cfg-chunking" className="text-sm text-gray-700 cursor-pointer">
+                    <label htmlFor="cfg-chunking" className="text-sm text-slate-700 cursor-pointer">
                       {t("configsTab.newConfigForm.enableChunking")}
                     </label>
                   </div>
@@ -473,7 +473,7 @@ export default function EmbeddingsPage() {
                   <button
                     type="button"
                     onClick={() => setShowConfigForm(false)}
-                    className="rounded-md border px-4 py-2 text-sm hover:bg-gray-50"
+                    className="rounded-md border px-4 py-2 text-sm hover:bg-slate-50"
                   >
                     {t("configsTab.cancel")}
                   </button>
@@ -500,29 +500,29 @@ export default function EmbeddingsPage() {
                 {configs.map((c) => (
                   <div key={c.id} className="rounded-lg border bg-white p-4 shadow-sm">
                     <div className="flex items-center justify-between mb-1">
-                      <span className="text-sm font-medium text-gray-800 truncate">
-                        {c.description || <span className="text-gray-400 italic">—</span>}
+                      <span className="text-sm font-medium text-slate-800 truncate">
+                        {c.description || <span className="text-slate-400 italic">—</span>}
                       </span>
                       <button
                         onClick={() => handleDeleteConfig(c.id)}
-                        className="text-gray-400 hover:text-red-600 transition-colors ml-2"
+                        className="text-slate-400 hover:text-red-600 transition-colors ml-2"
                         title="Delete config"
                       >
                         ✕
                       </button>
                     </div>
-                    <p className="font-mono text-xs text-gray-500 truncate" title={c.model_name}>{c.model_name}</p>
-                    <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs text-gray-600">
+                    <p className="font-mono text-xs text-slate-500 truncate" title={c.model_name}>{c.model_name}</p>
+                    <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs text-slate-600">
                       <span>{c.model_backend}</span>
                       <span>layers [{c.layer_indices.join(", ")}]</span>
                       <span>{c.layer_agg}/{c.pooling}</span>
                       <span>{c.normalize ? "norm" : "no norm"}</span>
                     </div>
-                    <p className="mt-1 text-xs text-gray-400">{formatDate(c.created_at)}</p>
+                    <p className="mt-1 text-xs text-slate-400">{formatDate(c.created_at)}</p>
                   </div>
                 ))}
                 {configs.length === 0 && (
-                  <div className="rounded-lg border bg-white px-4 py-8 text-center text-sm text-gray-400 shadow-sm">
+                  <div className="rounded-lg border bg-white px-4 py-8 text-center text-sm text-slate-400 shadow-sm">
                     {t("configsTab.noConfigs")}{" "}
                     <button onClick={() => setShowConfigForm(true)} className="text-blue-600 underline">
                       ↑
@@ -533,7 +533,7 @@ export default function EmbeddingsPage() {
 
               {/* Desktop table */}
               <div className="hidden lg:block overflow-x-auto rounded-lg border bg-white shadow-sm">
-                <div className="grid grid-cols-[1fr_140px_80px_100px_80px_80px_60px_160px_60px] gap-2 border-b bg-gray-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
+                <div className="grid grid-cols-[1fr_140px_80px_100px_80px_80px_60px_160px_60px] gap-2 border-b bg-slate-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
                   <div>{t("configsTab.tableHeaders.description")}</div>
                   <div>{t("configsTab.tableHeaders.model")}</div>
                   <div>{t("configsTab.tableHeaders.backend")}</div>
@@ -549,20 +549,20 @@ export default function EmbeddingsPage() {
                     key={c.id}
                     className="grid grid-cols-[1fr_140px_80px_100px_80px_80px_60px_160px_60px] gap-2 border-b px-4 py-3 text-sm last:border-0 items-center"
                   >
-                    <div className="text-gray-700 truncate" title={c.description ?? c.model_name}>
-                      {c.description || <span className="text-gray-400 italic">—</span>}
+                    <div className="text-slate-700 truncate" title={c.description ?? c.model_name}>
+                      {c.description || <span className="text-slate-400 italic">—</span>}
                     </div>
-                    <div className="font-mono text-xs text-gray-500 truncate" title={c.model_name}>{c.model_name}</div>
-                    <div className="text-gray-600">{c.model_backend}</div>
-                    <div className="font-mono text-xs text-gray-500">[{c.layer_indices.join(", ")}]</div>
-                    <div className="text-gray-600">{c.layer_agg}</div>
-                    <div className="text-gray-600">{c.pooling}</div>
-                    <div className="text-gray-600">{c.normalize ? "yes" : "no"}</div>
-                    <div className="text-xs text-gray-400">{formatDate(c.created_at)}</div>
+                    <div className="font-mono text-xs text-slate-500 truncate" title={c.model_name}>{c.model_name}</div>
+                    <div className="text-slate-600">{c.model_backend}</div>
+                    <div className="font-mono text-xs text-slate-500">[{c.layer_indices.join(", ")}]</div>
+                    <div className="text-slate-600">{c.layer_agg}</div>
+                    <div className="text-slate-600">{c.pooling}</div>
+                    <div className="text-slate-600">{c.normalize ? "yes" : "no"}</div>
+                    <div className="text-xs text-slate-400">{formatDate(c.created_at)}</div>
                     <div>
                       <button
                         onClick={() => handleDeleteConfig(c.id)}
-                        className="text-gray-400 hover:text-red-600 transition-colors"
+                        className="text-slate-400 hover:text-red-600 transition-colors"
                         title="Delete config"
                       >
                         ✕
@@ -571,7 +571,7 @@ export default function EmbeddingsPage() {
                   </div>
                 ))}
                 {configs.length === 0 && (
-                  <div className="px-4 py-8 text-center text-sm text-gray-400">
+                  <div className="px-4 py-8 text-center text-sm text-slate-400">
                     {t("configsTab.noConfigs")}{" "}
                     <button onClick={() => setShowConfigForm(true)} className="text-blue-600 underline">
                       ↑
@@ -590,7 +590,7 @@ export default function EmbeddingsPage() {
           <div className="rounded-lg border bg-white p-6 shadow-sm">
             <h2 className="text-base font-semibold mb-4">{t("computeTab.title")}</h2>
             {loading ? (
-              <p className="text-sm text-gray-400">{t("computeTab.loading")}</p>
+              <p className="text-sm text-slate-400">{t("computeTab.loading")}</p>
             ) : (
               <form onSubmit={handleComputeSubmit} className="space-y-4">
                 <div>
@@ -614,7 +614,7 @@ export default function EmbeddingsPage() {
 
                 <div>
                   <label className={labelClass}>
-                    {t("computeTab.querySetLabel")} <span className="font-normal text-gray-400">{t("computeTab.querySetHelper")}</span>
+                    {t("computeTab.querySetLabel")} <span className="font-normal text-slate-400">{t("computeTab.querySetHelper")}</span>
                   </label>
                   <select
                     value={cmpQuerySetId}
@@ -634,7 +634,7 @@ export default function EmbeddingsPage() {
                   <div>
                     <label className={labelClass}>
                       {t("computeTab.queueBatchSizeLabel")}{" "}
-                      <span className="font-normal text-gray-400">{t("computeTab.queueBatchSizeHelper")}</span>
+                      <span className="font-normal text-slate-400">{t("computeTab.queueBatchSizeHelper")}</span>
                     </label>
                     <input
                       type="number"
@@ -647,7 +647,7 @@ export default function EmbeddingsPage() {
                   <div>
                     <label className={labelClass}>
                       {t("computeTab.modelBatchSizeLabel")}{" "}
-                      <span className="font-normal text-gray-400">{t("computeTab.modelBatchSizeHelper")}</span>
+                      <span className="font-normal text-slate-400">{t("computeTab.modelBatchSizeHelper")}</span>
                     </label>
                     <input
                       type="number"
@@ -693,7 +693,7 @@ export default function EmbeddingsPage() {
                     onChange={(e) => setCmpSkipExisting(e.target.checked)}
                     className="rounded"
                   />
-                  <label htmlFor="cmp-skip-existing" className="text-sm text-gray-700 cursor-pointer">
+                  <label htmlFor="cmp-skip-existing" className="text-sm text-slate-700 cursor-pointer">
                     {t("computeTab.skipExisting")}
                   </label>
                 </div>
diff --git a/apps/web/app/[locale]/evaluation/page.tsx b/apps/web/app/[locale]/evaluation/page.tsx
index f7ce0fb..dafbefa 100644
--- a/apps/web/app/[locale]/evaluation/page.tsx
+++ b/apps/web/app/[locale]/evaluation/page.tsx
@@ -9,24 +9,24 @@ import {
 } from "@/lib/api";
 import type { AnnotationSet, PredictionSet, ScoringConfig, RerankerModel } from "@/lib/api";
 
-const labelClass = "block text-sm font-medium text-gray-700 mb-1";
+const labelClass = "block text-sm font-medium text-slate-700 mb-1";
 const selectClass =
-  "w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";
+  "w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";
 const btnPrimary =
   "rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50 transition-colors";
 const btnSecondary =
-  "rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 transition-colors";
+  "rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 transition-colors";
 
 function InfoTooltip({ text }: { text: string }) {
   return (
     <span className="relative inline-block group ml-1 align-middle">
       <span
         aria-label={text}
-        className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 text-gray-500 text-[10px] font-bold cursor-help select-none"
+        className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-slate-200 text-slate-500 text-[10px] font-bold cursor-help select-none"
       >
         ?
       </span>
-      <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 z-10 hidden group-hover:block w-64 rounded-md border border-gray-200 bg-white px-3 py-2 text-xs text-gray-600 shadow-lg leading-relaxed">
+      <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 z-10 hidden group-hover:block w-64 rounded-md border border-slate-200 bg-white px-3 py-2 text-[13px] text-slate-600 shadow-lg leading-relaxed">
         {text}
       </span>
     </span>
@@ -39,7 +39,7 @@ function RichTooltip({ children }: { children: React.ReactNode }) {
       <span className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-blue-100 text-blue-500 text-[10px] font-bold cursor-help select-none">
         ℹ
       </span>
-      <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 z-10 hidden group-hover:block w-72 rounded-md border border-gray-200 bg-white px-3 py-2.5 text-xs text-gray-600 shadow-xl leading-relaxed">
+      <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 z-10 hidden group-hover:block w-72 rounded-md border border-slate-200 bg-white px-3 py-2.5 text-[13px] text-slate-600 shadow-xl leading-relaxed">
         {children}
       </span>
     </span>
@@ -128,7 +128,7 @@ function DownloadLink({ href, label, filename }: { href: string; label: string;
     <a
       href={href}
       download={filename}
-      className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm hover:bg-gray-50 transition-colors"
+      className="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm hover:bg-slate-50 transition-colors"
     >
       ↓ {label}
     </a>
@@ -137,11 +137,11 @@ function DownloadLink({ href, label, filename }: { href: string; label: string;
 
 function StatBadge({ label, value, tooltip }: { label: string; value: number | undefined; tooltip?: string }) {
   return (
-    <div className="rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-center">
-      <div className="text-lg font-semibold text-gray-900">
+    <div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-center">
+      <div className="text-lg font-semibold text-slate-900">
         {value != null ? value.toLocaleString() : "—"}
       </div>
-      <div className="text-xs text-gray-500 mt-0.5">
+      <div className="text-[13px] text-slate-500 mt-0.5">
         {label}
         {tooltip && <InfoTooltip text={tooltip} />}
       </div>
@@ -158,7 +158,7 @@ const SETTING_COLORS: Record<string, string> = {
 function ResultsTable({ results }: { results: Record<string, SettingResults> }) {
   const t = useTranslations("evaluation");
   const settings = ["NK", "LK", "PK"].filter((s) => results[s] && Object.keys(results[s]).length > 0);
-  if (settings.length === 0) return <p className="text-sm text-gray-400">{t("evaluationSetCard.noEvaluations")}</p>;
+  if (settings.length === 0) return <p className="text-sm text-slate-400">{t("evaluationSetCard.noEvaluations")}</p>;
 
   const NS_LABELS: Record<string, string> = {
     BPO: t("resultMetrics.biologicalProcess"),
@@ -176,7 +176,7 @@ function ResultsTable({ results }: { results: Record<string, SettingResults> })
     <div className="space-y-4">
       {settings.map((setting) => (
         <div key={setting} className={`rounded-lg border p-4 ${SETTING_COLORS[setting] ?? ""}`}>
-          <div className="text-sm font-semibold text-gray-700 mb-3">
+          <div className="text-sm font-semibold text-slate-700 mb-3">
             {setting}
             {SETTING_TOOLTIPS[setting] && <InfoTooltip text={SETTING_TOOLTIPS[setting]} />}
           </div>
@@ -185,31 +185,31 @@ function ResultsTable({ results }: { results: Record<string, SettingResults> })
               const m = results[setting]?.[ns];
               if (!m) return null;
               return (
-                <div key={ns} className="rounded-md bg-white border border-gray-200 p-3">
-                  <div className="text-xs font-medium text-gray-500 mb-2">{NS_LABELS[ns]}</div>
+                <div key={ns} className="rounded-md bg-white border border-slate-200 p-3">
+                  <div className="text-xs font-medium text-slate-500 mb-2">{NS_LABELS[ns]}</div>
                   <div className="space-y-1 text-sm">
                     <div className="flex justify-between">
-                      <span className="text-gray-500">{t("resultMetrics.fmax")}</span>
-                      <span className="font-semibold text-gray-900">{m.fmax.toFixed(3)}</span>
+                      <span className="text-slate-500">{t("resultMetrics.fmax")}</span>
+                      <span className="font-semibold text-slate-900">{m.fmax.toFixed(3)}</span>
                     </div>
                     <div className="flex justify-between">
-                      <span className="text-gray-500">{t("resultMetrics.precision")}</span>
-                      <span className="text-gray-700">{m.precision.toFixed(3)}</span>
+                      <span className="text-slate-500">{t("resultMetrics.precision")}</span>
+                      <span className="text-slate-700">{m.precision.toFixed(3)}</span>
                     </div>
                     <div className="flex justify-between">
-                      <span className="text-gray-500">{t("resultMetrics.recall")}</span>
-                      <span className="text-gray-700">{m.recall.toFixed(3)}</span>
+                      <span className="text-slate-500">{t("resultMetrics.recall")}</span>
+                      <span className="text-slate-700">{m.recall.toFixed(3)}</span>
                     </div>
                     <div className="flex justify-between">
-                      <span className="text-gray-500 flex items-center gap-1">
+                      <span className="text-slate-500 flex items-center gap-1">
                         {t("resultMetrics.coverage")}
                         <InfoTooltip text="Fraction of benchmark proteins for which at least one prediction was submitted at the Fmax threshold. Values above 100% can occur in the PK setting: cafaeval shrinks the PK denominator by removing proteins whose new terms are excluded via the -known file, while PROTEA already subtracts those terms when building the ground truth — this double-accounting inflates the ratio. NK and LK coverage is always ≤ 100%." />
                       </span>
-                      <span className="text-gray-700">{(m.coverage * 100).toFixed(1)}%</span>
+                      <span className="text-slate-700">{(m.coverage * 100).toFixed(1)}%</span>
                     </div>
                     <div className="flex justify-between">
-                      <span className="text-gray-500">{t("resultMetrics.tau")}</span>
-                      <span className="text-gray-700">{m.tau.toFixed(2)}</span>
+                      <span className="text-slate-500">{t("resultMetrics.tau")}</span>
+                      <span className="text-slate-700">{m.tau.toFixed(2)}</span>
                     </div>
                   </div>
                 </div>
@@ -351,16 +351,16 @@ function EvaluationSetCard({
   return (
     <div
       className={`rounded-lg border transition-colors ${
-        isSelected ? "border-blue-400" : "border-gray-200"
+        isSelected ? "border-blue-400" : "border-slate-200"
       }`}
     >
       {/* Header */}
       <div
-        className="cursor-pointer p-4 hover:bg-gray-50 rounded-t-lg"
+        className="cursor-pointer p-4 hover:bg-slate-50 rounded-t-lg"
         onClick={onSelect}
       >
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
-          <div className="text-sm font-medium text-gray-800">{evalLabel(e, annotationSets)}</div>
+          <div className="text-sm font-medium text-slate-800">{evalLabel(e, annotationSets)}</div>
           <button
             onClick={async (ev) => {
               ev.stopPropagation();
@@ -398,11 +398,11 @@ function EvaluationSetCard({
       </div>
 
       {isSelected && (
-        <div className="border-t border-gray-200 p-4 space-y-5 bg-gray-50 rounded-b-lg">
+        <div className="border-t border-slate-200 p-4 space-y-5 bg-slate-50 rounded-b-lg">
 
           {/* Downloads */}
           <div>
-            <p className="text-xs font-medium text-gray-500 mb-2">
+            <p className="text-xs font-medium text-slate-500 mb-2">
               {t("evaluationSetCard.groundTruthFiles")}
               <InfoTooltip text="2-column TSV files (protein accession → GO term) used as input to the cafaeval evaluator. Each file contains only the novel experimental annotations for that category." />
             </p>
@@ -428,7 +428,7 @@ function EvaluationSetCard({
                 filename="known_terms.tsv"
               />
             </div>
-            <p className="text-xs text-gray-400 mt-1">
+            <p className="text-xs text-slate-400 mt-1">
               {t("evaluationSetCard.downloadKnownTerms")}
               <InfoTooltip text="All experimental annotations from the old snapshot for PK proteins in the relevant namespace. Passed to cafaeval with -known to exclude them from scoring — this penalises methods that simply repeat prior annotations." />
               : passed to cafaeval as <code className="font-mono">-known</code> for the PK pass only.
@@ -437,7 +437,7 @@ function EvaluationSetCard({
 
           {/* FASTA downloads */}
           <div>
-            <p className="text-xs font-medium text-gray-500 mb-2">
+            <p className="text-xs font-medium text-slate-500 mb-2">
               {t("evaluationSetCard.deltaProteinSequences")}
               <InfoTooltip text="Sequences of proteins that gained new experimental GO annotations (delta proteins). Download the full set or per-category subsets to compute embeddings and run predictions before evaluation." />
             </p>
@@ -467,7 +467,7 @@ function EvaluationSetCard({
 
           {/* Run evaluation */}
           <div className="space-y-3">
-            <p className="text-xs font-medium text-gray-500">{t("evaluationSetCard.runCafaEvaluator")}</p>
+            <p className="text-xs font-medium text-slate-500">{t("evaluationSetCard.runCafaEvaluator")}</p>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               <div>
                 <label className={labelClass}>{t("evaluationSetCard.predictionSetLabel")}</label>
@@ -488,7 +488,7 @@ function EvaluationSetCard({
                   type="number" min="0" max="2" step="0.05" placeholder="no limit"
                   value={maxDistance}
                   onChange={(ev) => setMaxDistance(ev.target.value)}
-                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                 />
               </div>
             </div>
@@ -504,16 +504,16 @@ function EvaluationSetCard({
                   <table className="w-full text-xs border-collapse">
                     <thead>
                       <tr>
-                        <th className="px-2 py-1 text-left text-gray-500 font-medium"></th>
-                        <th className="px-2 py-1 text-center text-gray-600 font-semibold">BPO</th>
-                        <th className="px-2 py-1 text-center text-gray-600 font-semibold">MFO</th>
-                        <th className="px-2 py-1 text-center text-gray-600 font-semibold">CCO</th>
+                        <th className="px-2 py-1 text-left text-slate-500 font-medium"></th>
+                        <th className="px-2 py-1 text-center text-slate-600 font-semibold">BPO</th>
+                        <th className="px-2 py-1 text-center text-slate-600 font-semibold">MFO</th>
+                        <th className="px-2 py-1 text-center text-slate-600 font-semibold">CCO</th>
                       </tr>
                     </thead>
                     <tbody>
                       {(["nk", "lk", "pk"] as const).map((cat) => (
                         <tr key={cat}>
-                          <td className="px-2 py-1.5 font-semibold text-gray-700 uppercase">{cat}</td>
+                          <td className="px-2 py-1.5 font-semibold text-slate-700 uppercase">{cat}</td>
                           {(["bpo", "mfo", "cco"] as const).map((asp) => {
                             // Show models matching this category+aspect, or category+null (all-aspect models)
                             const candidates = initialRerankers.filter(
@@ -524,7 +524,7 @@ function EvaluationSetCard({
                                 <select
                                   value={rrGrid[cat]?.[asp] ?? ""}
                                   onChange={(ev) => { setRrCell(cat, asp, ev.target.value); if (ev.target.value) setScoringConfigId(""); }}
-                                  className="w-full rounded border border-gray-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-blue-400"
+                                  className="w-full rounded border border-slate-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-blue-400"
                                 >
                                   <option value="">—</option>
                                   {candidates.map((r) => (
@@ -546,7 +546,7 @@ function EvaluationSetCard({
                 const hasAnyRr = Object.values(rrGrid).some((catMap) => Object.values(catMap).some(Boolean));
                 return scoringConfigs.length > 0 && !hasAnyRr ? (
                   <div className="mt-2">
-                    <label className="text-xs text-gray-500 mb-0.5 block">Scoring config (alternative to re-ranker)</label>
+                    <label className="text-[13px] text-slate-500 mb-0.5 block">Scoring config (alternative to re-ranker)</label>
                     <select
                       value={scoringConfigId}
                       onChange={(ev) => setScoringConfigId(ev.target.value)}
@@ -596,7 +596,7 @@ function EvaluationSetCard({
           {/* Results */}
           <div>
             <div className="flex items-center justify-between mb-3">
-              <p className="text-xs font-medium text-gray-500">
+              <p className="text-xs font-medium text-slate-500">
                 {t("evaluationSetCard.resultsHeading")}
                 {pollingResults && (
                   <span className="ml-2 text-blue-500 animate-pulse">{t("evaluationSetCard.pollingResults")}</span>
@@ -605,15 +605,15 @@ function EvaluationSetCard({
               <button
                 onClick={refreshResults}
                 disabled={loadingResults}
-                className="text-xs text-gray-400 hover:text-gray-700 border rounded px-2 py-0.5 disabled:opacity-40"
+                className="text-xs text-slate-400 hover:text-slate-700 border rounded px-2 py-0.5 disabled:opacity-40"
               >
                 {loadingResults ? t("evaluationSetCard.refreshing") : t("evaluationSetCard.refreshResults")}
               </button>
             </div>
             {loadingResults ? (
-              <p className="text-sm text-gray-400">Loading…</p>
+              <p className="text-sm text-slate-400">Loading…</p>
             ) : results.length === 0 ? (
-              <p className="text-sm text-gray-400">{t("evaluationSetCard.noEvaluations")}</p>
+              <p className="text-sm text-slate-400">{t("evaluationSetCard.noEvaluations")}</p>
             ) : (
               <div className="space-y-6">
                 {results.map((r) => {
@@ -622,12 +622,12 @@ function EvaluationSetCard({
                   const hasReranker = !!r.reranker_model_id;
                   const rr = initialRerankers.find((m) => m.id === r.reranker_model_id);
                   return (
-                    <div key={r.id} className="rounded-lg border border-gray-200 bg-white p-4 space-y-3">
+                    <div key={r.id} className="rounded-lg border border-slate-200 bg-white p-4 space-y-3">
                       {/* Meta header */}
                       <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2">
-                        <div className="space-y-0.5 text-xs text-gray-500 min-w-0">
+                        <div className="space-y-0.5 text-[13px] text-slate-500 min-w-0">
                           <div className="flex items-center gap-0.5">
-                            <span className="font-medium text-gray-700">{t("evaluationSetCard.predictionSet")} </span>
+                            <span className="font-medium text-slate-700">{t("evaluationSetCard.predictionSet")} </span>
                             {pred
                               ? <span title={r.prediction_set_id}>{r.prediction_set_id.slice(0, 8)}… · {new Date(pred.created_at).toLocaleDateString()}{pred.prediction_count != null ? ` · ${pred.prediction_count.toLocaleString()} preds.` : ""}</span>
                               : <span className="font-mono">{r.prediction_set_id.slice(0, 8)}…</span>
@@ -635,25 +635,25 @@ function EvaluationSetCard({
                             {pred && (
                               <RichTooltip>
                                 <div className="space-y-1.5">
-                                  <div className="font-semibold text-gray-700 border-b border-gray-100 pb-1 mb-1">Prediction Set</div>
+                                  <div className="font-semibold text-slate-700 border-b border-slate-100 pb-1 mb-1">Prediction Set</div>
                                   <div className="flex justify-between gap-3">
-                                    <span className="text-gray-400">Config</span>
+                                    <span className="text-slate-400">Config</span>
                                     <span className="text-right">{pred.embedding_config_name ?? pred.embedding_config_id.slice(0, 8) + "…"}</span>
                                   </div>
                                   <div className="flex justify-between gap-3">
-                                    <span className="text-gray-400">Annotations</span>
+                                    <span className="text-slate-400">Annotations</span>
                                     <span className="text-right">{pred.annotation_set_label ?? pred.annotation_set_id.slice(0, 8) + "…"}</span>
                                   </div>
                                   <div className="flex justify-between gap-3">
-                                    <span className="text-gray-400">Ontology</span>
+                                    <span className="text-slate-400">Ontology</span>
                                     <span className="text-right">{pred.ontology_snapshot_version ?? pred.ontology_snapshot_id.slice(0, 8) + "…"}</span>
                                   </div>
                                   <div className="flex justify-between gap-3">
-                                    <span className="text-gray-400">Max dist.</span>
+                                    <span className="text-slate-400">Max dist.</span>
                                     <span>{pred.distance_threshold ?? "—"}</span>
                                   </div>
                                   <div className="flex justify-between gap-3">
-                                    <span className="text-gray-400">Limit/entry</span>
+                                    <span className="text-slate-400">Limit/entry</span>
                                     <span>{pred.limit_per_entry}</span>
                                   </div>
                                 </div>
@@ -661,12 +661,12 @@ function EvaluationSetCard({
                             )}
                           </div>
                           <div className="flex items-center gap-0.5 flex-wrap">
-                            <span className="font-medium text-gray-700">{t("evaluationSetCard.scoring")} </span>
+                            <span className="font-medium text-slate-700">{t("evaluationSetCard.scoring")} </span>
                             {r.reranker_config ? (
                               <span className="inline-flex items-center gap-1 flex-wrap">
                                 <span className="rounded-full bg-indigo-50 border border-indigo-100 px-1.5 py-0.5 text-[10px] font-medium text-indigo-700">Re-ranker</span>
                                 {Object.entries(r.reranker_config).map(([cat, aspMap]) => (
-                                  <span key={cat} className="text-[10px] text-gray-500">
+                                  <span key={cat} className="text-[10px] text-slate-500">
                                     {cat.toUpperCase()}({Object.keys(aspMap).map(a => a.toUpperCase()).join(",")})
                                   </span>
                                 ))}
@@ -676,22 +676,22 @@ function EvaluationSetCard({
                                 <span className="rounded-full bg-indigo-50 border border-indigo-100 px-1.5 py-0.5 text-[10px] font-medium text-indigo-700">Re-ranker</span>
                                 {rr ? rr.name : "model"}
                               </span>
-                            ) : sc ? sc.name : <span className="italic text-gray-400">{t("evaluationSetCard.fallbackFormula")}</span>}
+                            ) : sc ? sc.name : <span className="italic text-slate-400">{t("evaluationSetCard.fallbackFormula")}</span>}
                             {sc && !hasReranker && (
                               <RichTooltip>
                                 <div className="space-y-1.5">
-                                  <div className="font-semibold text-gray-700 border-b border-gray-100 pb-1 mb-1">{sc.name}</div>
-                                  {sc.description && <div className="italic text-gray-500 mb-1">{sc.description}</div>}
+                                  <div className="font-semibold text-slate-700 border-b border-slate-100 pb-1 mb-1">{sc.name}</div>
+                                  {sc.description && <div className="italic text-slate-500 mb-1">{sc.description}</div>}
                                   <div className="flex justify-between gap-3">
-                                    <span className="text-gray-400">Formula</span>
+                                    <span className="text-slate-400">Formula</span>
                                     <code className="text-blue-600 text-[10px]">{sc.formula}</code>
                                   </div>
                                   {Object.keys(sc.weights).length > 0 && (
                                     <div>
-                                      <div className="text-gray-400 mb-0.5">Weights</div>
+                                      <div className="text-slate-400 mb-0.5">Weights</div>
                                       {Object.entries(sc.weights).map(([k, v]) => (
                                         <div key={k} className="flex justify-between gap-3 pl-2">
-                                          <span className="text-gray-500">{k}</span>
+                                          <span className="text-slate-500">{k}</span>
                                           <span className="font-mono">{v}</span>
                                         </div>
                                       ))}
@@ -701,13 +701,13 @@ function EvaluationSetCard({
                               </RichTooltip>
                             )}
                           </div>
-                          <div className="text-gray-400">{new Date(r.created_at).toLocaleString()}</div>
+                          <div className="text-slate-400">{new Date(r.created_at).toLocaleString()}</div>
                         </div>
                         <div className="flex items-center gap-2 shrink-0">
                           <a
                             href={`${baseUrl()}/annotations/evaluation-sets/${e.id}/results/${r.id}/artifacts.zip`}
                             download={`cafaeval_${r.id.slice(0, 8)}.zip`}
-                            className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-3 py-1 text-xs hover:bg-gray-50 transition-colors"
+                            className="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white px-3 py-1 text-xs hover:bg-slate-50 transition-colors"
                           >
                             {t("evaluationSetCard.artifactsDownload")}
                           </a>
@@ -788,11 +788,11 @@ export default function EvaluationPage() {
     }
   }
 
-  if (loading) return <div className="p-8 text-sm text-gray-500">Loading…</div>;
+  if (loading) return <div className="p-8 text-sm text-slate-500">Loading…</div>;
 
   return (
     <div className="px-4 sm:px-8 py-6 sm:py-8 max-w-3xl space-y-8 sm:space-y-10">
-      <h1 className="text-xl font-semibold text-gray-900">{t("title")}</h1>
+      <h1 className="text-xl font-semibold text-slate-900">{t("title")}</h1>
 
       <ContextBanner
         title="Benchmark prediction quality with CAFA metrics"
@@ -805,10 +805,10 @@ export default function EvaluationPage() {
       />
 
       {/* ── Generate Evaluation Set ───────────────────────────────── */}
-      <section className="rounded-lg border border-gray-200 p-6 space-y-5">
+      <section className="rounded-lg border border-slate-200 p-6 space-y-5">
         <div>
-          <h2 className="text-base font-semibold text-gray-800">{t("generateSection.heading")}</h2>
-          <p className="mt-1 text-sm text-gray-500">
+          <h2 className="text-base font-semibold text-slate-800">{t("generateSection.heading")}</h2>
+          <p className="mt-1 text-sm text-slate-500">
             {t("generateSection.description")}
           </p>
         </div>
@@ -846,7 +846,7 @@ export default function EvaluationPage() {
       {/* ── Evaluation Sets ───────────────────────────────────────── */}
       {evaluationSets.length > 0 && (
         <section className="space-y-4">
-          <h2 className="text-base font-semibold text-gray-800">{t("evaluationSetsSection.heading")}</h2>
+          <h2 className="text-base font-semibold text-slate-800">{t("evaluationSetsSection.heading")}</h2>
           {evaluationSets.map((e) => (
             <EvaluationSetCard
               key={e.id}
@@ -864,9 +864,9 @@ export default function EvaluationPage() {
       )}
 
       {/* ── Evaluator command reference ───────────────────────────── */}
-      <section className="rounded-lg border border-gray-100 bg-gray-50 p-5">
-        <h2 className="text-sm font-semibold text-gray-700 mb-2">{t("manualEvaluatorSection.heading")}</h2>
-        <pre className="text-xs text-gray-600 overflow-x-auto whitespace-pre-wrap leading-relaxed">
+      <section className="rounded-lg border border-slate-100 bg-slate-50 p-5">
+        <h2 className="text-sm font-semibold text-slate-700 mb-2">{t("manualEvaluatorSection.heading")}</h2>
+        <pre className="text-[13px] text-slate-600 overflow-x-auto whitespace-pre-wrap leading-relaxed">
 {`python -m cafaeval go-basic.obo predictions/ ground_truth_NK.tsv -out_dir results/NK
 python -m cafaeval go-basic.obo predictions/ ground_truth_LK.tsv -out_dir results/LK
 python -m cafaeval go-basic.obo predictions/ ground_truth_PK.tsv -known known_terms.tsv -out_dir results/PK`}
diff --git a/apps/web/app/[locale]/functional-annotation/[id]/page.tsx b/apps/web/app/[locale]/functional-annotation/[id]/page.tsx
index 1f403a6..9355033 100644
--- a/apps/web/app/[locale]/functional-annotation/[id]/page.tsx
+++ b/apps/web/app/[locale]/functional-annotation/[id]/page.tsx
@@ -156,14 +156,14 @@ function WeightPanel({
             <span
               key={key}
               title={`${label}: ${w}`}
-              className={`rounded px-1.5 py-0.5 font-mono ${w > 0 ? "bg-gray-100 text-gray-700" : "text-gray-300"}`}
+              className={`rounded px-1.5 py-0.5 font-mono ${w > 0 ? "bg-slate-100 text-slate-700" : "text-slate-300"}`}
             >
               {label} {w}
             </span>
           );
         })}
         {config.description && (
-          <span className="text-gray-400 italic ml-1">{config.description}</span>
+          <span className="text-slate-400 italic ml-1">{config.description}</span>
         )}
       </div>
     );
@@ -173,7 +173,7 @@ function WeightPanel({
     return (
       <div className="rounded-lg border bg-white p-3 shadow-sm w-72">
         <div className="flex items-center justify-between mb-3">
-          <span className="text-xs font-semibold text-gray-500 uppercase tracking-wide">Custom weights</span>
+          <span className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Custom weights</span>
           <select
             value={customFormula}
             onChange={(e) => onFormulaChange(e.target.value)}
@@ -188,14 +188,14 @@ function WeightPanel({
             const val = customWeights[key] ?? 0;
             return (
               <div key={key} className="flex items-center gap-2" title={hint}>
-                <span className="text-xs text-gray-600 w-32 shrink-0">{label}</span>
+                <span className="text-xs text-slate-600 w-32 shrink-0">{label}</span>
                 <input
                   type="range" min="0" max="1" step="0.05"
                   value={val}
                   onChange={(e) => onWeightChange(key, parseFloat(e.target.value))}
                   className="flex-1 accent-blue-500"
                 />
-                <span className="font-mono text-xs text-gray-700 w-8 text-right">{val.toFixed(2)}</span>
+                <span className="font-mono text-xs text-slate-700 w-8 text-right">{val.toFixed(2)}</span>
               </div>
             );
           })}
@@ -226,7 +226,7 @@ function WeightPanel({
               </button>
               <button
                 onClick={() => { setShowSaveForm(false); setSaveName(""); }}
-                className="text-xs text-gray-400 hover:text-gray-600 px-1"
+                className="text-xs text-slate-400 hover:text-slate-600 px-1"
               >
                 ✕
               </button>
@@ -257,9 +257,9 @@ const ASPECT_COLORS: Record<string, string> = {
 };
 
 function AspectBadge({ aspect }: { aspect?: string | null }) {
-  if (!aspect) return <span className="text-gray-300 text-xs">—</span>;
+  if (!aspect) return <span className="text-slate-300 text-xs">—</span>;
   return (
-    <span className={`rounded-full border px-2 py-0.5 text-xs font-medium ${ASPECT_COLORS[aspect] ?? "bg-gray-50 text-gray-600"}`}>
+    <span className={`rounded-full border px-2 py-0.5 text-xs font-medium ${ASPECT_COLORS[aspect] ?? "bg-slate-50 text-slate-600"}`}>
       {aspect}
     </span>
   );
@@ -280,7 +280,7 @@ const RELATION_COLORS: Record<string, string> = {
   close:        "bg-green-50 text-green-700",
   intermediate: "bg-yellow-50 text-yellow-700",
   distant:      "bg-orange-50 text-orange-700",
-  "root-only":  "bg-gray-50 text-gray-500",
+  "root-only":  "bg-slate-50 text-slate-500",
   unrelated:    "bg-red-50 text-red-600",
 };
 
@@ -302,7 +302,7 @@ function evidenceBadgeClass(code: string): string {
   if (w >= 1.0) return "bg-green-100 text-green-700 border-green-200";
   if (w >= 0.7) return "bg-blue-100 text-blue-700 border-blue-200";
   if (w >= 0.5) return "bg-yellow-100 text-yellow-700 border-yellow-200";
-  return "bg-gray-100 text-gray-500 border-gray-200";
+  return "bg-slate-100 text-slate-500 border-slate-200";
 }
 
 type GroupedAnnotation = { go_id: string; name: string | null; aspect: string | null; evidence_codes: string[] };
@@ -346,7 +346,7 @@ function PredictionTable({ preds, knownByGoId, scoringConfig }: {
   return (
     <div className="rounded-md border bg-white text-xs">
       {/* Desktop header */}
-      <div className={`hidden lg:grid ${gridClass} gap-x-3 border-b bg-gray-50 px-3 py-1.5 font-semibold uppercase tracking-wide text-gray-400`}>
+      <div className={`hidden lg:grid ${gridClass} gap-x-3 border-b bg-slate-50 px-3 py-1.5 font-semibold uppercase tracking-wide text-slate-400`}>
         {hasScore && <div>Score</div>}
         <div>GO ID</div>
         <div>Name</div>
@@ -357,7 +357,7 @@ function PredictionTable({ preds, knownByGoId, scoringConfig }: {
       </div>
 
       {sorted.length === 0 ? (
-        <p className="px-3 py-3 text-gray-300">—</p>
+        <p className="px-3 py-3 text-slate-300">—</p>
       ) : sorted.map((pred) => {
         const isExpanded = expanded === pred.go_id;
         const knownAnn = knownByGoId.get(pred.go_id);
@@ -377,13 +377,13 @@ function PredictionTable({ preds, knownByGoId, scoringConfig }: {
                       {computeScore(pred, scoringConfig!).toFixed(3)}
                     </span>
                   )}
-                  <span className="font-mono text-gray-500 text-[10px]">{pred.distance.toFixed(4)}</span>
-                  {hasDetail && <span className="text-gray-300 text-[10px]">{isExpanded ? "▲" : "▼"}</span>}
+                  <span className="font-mono text-slate-500 text-[10px]">{pred.distance.toFixed(4)}</span>
+                  {hasDetail && <span className="text-slate-300 text-[10px]">{isExpanded ? "▲" : "▼"}</span>}
                 </div>
               </div>
-              <p className="text-gray-700 leading-snug text-xs mb-1">{pred.name ?? "—"}</p>
+              <p className="text-slate-700 leading-snug text-xs mb-1">{pred.name ?? "—"}</p>
               <div className="flex flex-wrap items-center gap-2 text-[10px]">
-                <span className="text-gray-400">via</span>
+                <span className="text-slate-400">via</span>
                 <Link
                   href={`/proteins/${pred.ref_protein_accession}`}
                   className="font-mono text-blue-500 hover:underline"
@@ -415,90 +415,90 @@ function PredictionTable({ preds, knownByGoId, scoringConfig }: {
                 </span>
               )}
               <span className="font-mono text-blue-600">{pred.go_id}</span>
-              <span className="text-gray-700 leading-snug">{pred.name ?? "—"}</span>
+              <span className="text-slate-700 leading-snug">{pred.name ?? "—"}</span>
               <div className="flex items-start gap-1">
                 <Link
                   href={`/proteins/${pred.ref_protein_accession}`}
                   className="font-mono text-blue-500 hover:underline"
                   onClick={(e) => e.stopPropagation()}
                 >{pred.ref_protein_accession}</Link>
-                {hasDetail && <span className="text-gray-300 text-[10px] mt-0.5">{isExpanded ? "▲" : "▼"}</span>}
+                {hasDetail && <span className="text-slate-300 text-[10px] mt-0.5">{isExpanded ? "▲" : "▼"}</span>}
               </div>
               <div>
                 {pred.evidence_code ? (
                   <span className={`rounded border px-1 py-0.5 text-[10px] font-mono font-medium ${evidenceBadgeClass(pred.evidence_code)}`}>
                     {pred.evidence_code}
                   </span>
-                ) : <span className="text-gray-300">—</span>}
+                ) : <span className="text-slate-300">—</span>}
               </div>
               <div className="flex flex-wrap gap-0.5">
                 {knownAnn ? knownAnn.evidence_codes.map((ec) => (
                   <span key={ec} className={`rounded border px-1 py-0.5 text-[10px] font-mono font-medium ${evidenceBadgeClass(ec)}`}>
                     {ec}
                   </span>
-                )) : <span className="text-gray-300">—</span>}
+                )) : <span className="text-slate-300">—</span>}
               </div>
-              <span className="font-mono text-gray-500">{pred.distance.toFixed(4)}</span>
+              <span className="font-mono text-slate-500">{pred.distance.toFixed(4)}</span>
             </div>
 
             {/* Expanded: alignment + taxonomy + reranker detail */}
             {isExpanded && hasDetail && (
-              <div className="border-b bg-gray-50 px-4 py-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+              <div className="border-b bg-slate-50 px-4 py-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                 {hasAlignment && (
                   <div>
-                    <p className="text-[10px] font-semibold uppercase tracking-wide text-gray-400 mb-2">
+                    <p className="text-[10px] font-semibold uppercase tracking-wide text-slate-400 mb-2">
                       Alignment — query vs {pred.ref_protein_accession}
                     </p>
                     <table className="w-full text-xs">
                       <thead>
-                        <tr className="text-gray-400">
+                        <tr className="text-slate-400">
                           <th className="text-left font-medium pr-4 pb-1">Metric</th>
                           <th className="text-right font-medium pr-4 pb-1">NW (global)</th>
                           <th className="text-right font-medium pb-1">SW (local)</th>
                         </tr>
                       </thead>
                       <tbody className="font-mono">
-                        <tr><td className="pr-4 text-gray-500 font-sans py-0.5">Identity</td><td className="text-right pr-4">{pct(pred.identity_nw)}</td><td className="text-right">{pct(pred.identity_sw)}</td></tr>
-                        <tr><td className="pr-4 text-gray-500 font-sans py-0.5">Similarity</td><td className="text-right pr-4">{pct(pred.similarity_nw)}</td><td className="text-right">{pct(pred.similarity_sw)}</td></tr>
-                        <tr><td className="pr-4 text-gray-500 font-sans py-0.5">Score</td><td className="text-right pr-4">{pred.alignment_score_nw?.toFixed(0) ?? "—"}</td><td className="text-right">{pred.alignment_score_sw?.toFixed(0) ?? "—"}</td></tr>
-                        <tr><td className="pr-4 text-gray-500 font-sans py-0.5">Gaps</td><td className="text-right pr-4">{pct(pred.gaps_pct_nw)}</td><td className="text-right">{pct(pred.gaps_pct_sw)}</td></tr>
-                        <tr><td className="pr-4 text-gray-500 font-sans py-0.5">Aln length</td><td className="text-right pr-4">{pred.alignment_length_nw ?? "—"}</td><td className="text-right">{pred.alignment_length_sw ?? "—"}</td></tr>
-                        <tr><td className="pr-4 text-gray-500 font-sans py-0.5">Seq length</td><td className="text-right pr-4">{pred.length_query ?? "—"} (q)</td><td className="text-right">{pred.length_ref ?? "—"} (r)</td></tr>
+                        <tr><td className="pr-4 text-slate-500 font-sans py-0.5">Identity</td><td className="text-right pr-4">{pct(pred.identity_nw)}</td><td className="text-right">{pct(pred.identity_sw)}</td></tr>
+                        <tr><td className="pr-4 text-slate-500 font-sans py-0.5">Similarity</td><td className="text-right pr-4">{pct(pred.similarity_nw)}</td><td className="text-right">{pct(pred.similarity_sw)}</td></tr>
+                        <tr><td className="pr-4 text-slate-500 font-sans py-0.5">Score</td><td className="text-right pr-4">{pred.alignment_score_nw?.toFixed(0) ?? "—"}</td><td className="text-right">{pred.alignment_score_sw?.toFixed(0) ?? "—"}</td></tr>
+                        <tr><td className="pr-4 text-slate-500 font-sans py-0.5">Gaps</td><td className="text-right pr-4">{pct(pred.gaps_pct_nw)}</td><td className="text-right">{pct(pred.gaps_pct_sw)}</td></tr>
+                        <tr><td className="pr-4 text-slate-500 font-sans py-0.5">Aln length</td><td className="text-right pr-4">{pred.alignment_length_nw ?? "—"}</td><td className="text-right">{pred.alignment_length_sw ?? "—"}</td></tr>
+                        <tr><td className="pr-4 text-slate-500 font-sans py-0.5">Seq length</td><td className="text-right pr-4">{pred.length_query ?? "—"} (q)</td><td className="text-right">{pred.length_ref ?? "—"} (r)</td></tr>
                       </tbody>
                     </table>
                   </div>
                 )}
                 {hasTaxonomy && (
                   <div>
-                    <p className="text-[10px] font-semibold uppercase tracking-wide text-gray-400 mb-2">
+                    <p className="text-[10px] font-semibold uppercase tracking-wide text-slate-400 mb-2">
                       Taxonomy — query vs {pred.ref_protein_accession}
                     </p>
                     <div className="space-y-1.5 text-xs">
                       <div className="flex justify-between">
-                        <span className="text-gray-500">Relation</span>
-                        <span className={`rounded px-1.5 py-0.5 font-medium ${RELATION_COLORS[pred.taxonomic_relation ?? ""] ?? "bg-gray-50 text-gray-500"}`}>
+                        <span className="text-slate-500">Relation</span>
+                        <span className={`rounded px-1.5 py-0.5 font-medium ${RELATION_COLORS[pred.taxonomic_relation ?? ""] ?? "bg-slate-50 text-slate-500"}`}>
                           {pred.taxonomic_relation ?? "—"}
                         </span>
                       </div>
-                      <div className="flex justify-between"><span className="text-gray-500">Distance</span><span className="font-mono">{pred.taxonomic_distance ?? "—"}</span></div>
-                      <div className="flex justify-between"><span className="text-gray-500">Common ancestors</span><span className="font-mono">{pred.taxonomic_common_ancestors ?? "—"}</span></div>
-                      <div className="flex justify-between"><span className="text-gray-500">LCA taxid</span><span className="font-mono">{pred.taxonomic_lca ?? "—"}</span></div>
-                      <div className="flex justify-between"><span className="text-gray-500">Query taxid</span><span className="font-mono">{pred.query_taxonomy_id ?? "—"}</span></div>
-                      <div className="flex justify-between"><span className="text-gray-500">Ref taxid</span><span className="font-mono">{pred.ref_taxonomy_id ?? "—"}</span></div>
+                      <div className="flex justify-between"><span className="text-slate-500">Distance</span><span className="font-mono">{pred.taxonomic_distance ?? "—"}</span></div>
+                      <div className="flex justify-between"><span className="text-slate-500">Common ancestors</span><span className="font-mono">{pred.taxonomic_common_ancestors ?? "—"}</span></div>
+                      <div className="flex justify-between"><span className="text-slate-500">LCA taxid</span><span className="font-mono">{pred.taxonomic_lca ?? "—"}</span></div>
+                      <div className="flex justify-between"><span className="text-slate-500">Query taxid</span><span className="font-mono">{pred.query_taxonomy_id ?? "—"}</span></div>
+                      <div className="flex justify-between"><span className="text-slate-500">Ref taxid</span><span className="font-mono">{pred.ref_taxonomy_id ?? "—"}</span></div>
                     </div>
                   </div>
                 )}
                 {hasReranker && (
                   <div>
-                    <p className="text-[10px] font-semibold uppercase tracking-wide text-gray-400 mb-2">
+                    <p className="text-[10px] font-semibold uppercase tracking-wide text-slate-400 mb-2">
                       Re-ranker features
                     </p>
                     <div className="space-y-1.5 text-xs">
-                      <div className="flex justify-between"><span className="text-gray-500">Vote count</span><span className="font-mono">{pred.vote_count ?? "—"}</span></div>
-                      <div className="flex justify-between"><span className="text-gray-500">K position</span><span className="font-mono">{pred.k_position ?? "—"}</span></div>
-                      <div className="flex justify-between"><span className="text-gray-500">GO term frequency</span><span className="font-mono">{pred.go_term_frequency != null ? pred.go_term_frequency.toFixed(4) : "—"}</span></div>
-                      <div className="flex justify-between"><span className="text-gray-500">Ref annotation density</span><span className="font-mono">{pred.ref_annotation_density != null ? pred.ref_annotation_density.toFixed(4) : "—"}</span></div>
-                      <div className="flex justify-between"><span className="text-gray-500">Neighbor dist std</span><span className="font-mono">{pred.neighbor_distance_std != null ? pred.neighbor_distance_std.toFixed(4) : "—"}</span></div>
+                      <div className="flex justify-between"><span className="text-slate-500">Vote count</span><span className="font-mono">{pred.vote_count ?? "—"}</span></div>
+                      <div className="flex justify-between"><span className="text-slate-500">K position</span><span className="font-mono">{pred.k_position ?? "—"}</span></div>
+                      <div className="flex justify-between"><span className="text-slate-500">GO term frequency</span><span className="font-mono">{pred.go_term_frequency != null ? pred.go_term_frequency.toFixed(4) : "—"}</span></div>
+                      <div className="flex justify-between"><span className="text-slate-500">Ref annotation density</span><span className="font-mono">{pred.ref_annotation_density != null ? pred.ref_annotation_density.toFixed(4) : "—"}</span></div>
+                      <div className="flex justify-between"><span className="text-slate-500">Neighbor dist std</span><span className="font-mono">{pred.neighbor_distance_std != null ? pred.neighbor_distance_std.toFixed(4) : "—"}</span></div>
                     </div>
                   </div>
                 )}
@@ -569,9 +569,9 @@ function ProteinDetail({
   const uncoveredKnown = Array.from(knownByGoId.values()).filter((a) => !predictedGoIds.has(a.go_id));
 
   return (
-    <div className="mt-4 rounded-lg border bg-gray-50 p-4">
+    <div className="mt-4 rounded-lg border bg-slate-50 p-4">
       <div className="flex flex-wrap items-center gap-2 sm:gap-3 mb-4">
-        <span className="font-mono font-semibold text-gray-900">{accession}</span>
+        <span className="font-mono font-semibold text-slate-900">{accession}</span>
         {inDb && (
           <Link href={`/proteins/${accession}`} className="text-xs text-blue-500 hover:underline">
             View protein →
@@ -583,14 +583,14 @@ function ProteinDetail({
           </span>
         )}
         {ontologySnapshotId && predictions.length > 0 && (
-          <button onClick={toggleGraph} className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50">
+          <button onClick={toggleGraph} className="rounded border bg-white px-2 py-1 text-xs hover:bg-slate-50">
             {loadingGraph ? "Loading…" : showGraph ? "Hide graph" : "GO graph"}
           </button>
         )}
-        <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-lg leading-none ml-auto sm:ml-2">×</button>
+        <button onClick={onClose} className="text-slate-400 hover:text-slate-600 text-lg leading-none ml-auto sm:ml-2">×</button>
       </div>
 
-      {loading && <p className="text-sm text-gray-400">Loading…</p>}
+      {loading && <p className="text-sm text-slate-400">Loading…</p>}
 
       {showGraph && subgraph && (
         <div className="mb-4">
@@ -604,7 +604,7 @@ function ProteinDetail({
       )}
 
       {!loading && predictions.length === 0 && annotations.length === 0 && (
-        <p className="text-sm text-gray-400">No data found.</p>
+        <p className="text-sm text-slate-400">No data found.</p>
       )}
 
       {!loading && aspects.map((asp) => {
@@ -615,8 +615,8 @@ function ProteinDetail({
           <div key={asp} className="mb-5 last:mb-0">
             <div className="flex items-center gap-2 mb-2">
               <AspectBadge aspect={asp} />
-              <span className="text-xs font-semibold text-gray-600">{ASPECT_LABELS[asp]}</span>
-              <span className="text-xs text-gray-400 ml-1">{uniquePredCount} predicted · {knownInAspect.length} known</span>
+              <span className="text-xs font-semibold text-slate-600">{ASPECT_LABELS[asp]}</span>
+              <span className="text-xs text-slate-400 ml-1">{uniquePredCount} predicted · {knownInAspect.length} known</span>
             </div>
             <PredictionTable preds={preds} knownByGoId={knownByGoId} scoringConfig={scoringConfig} />
           </div>
@@ -626,17 +626,17 @@ function ProteinDetail({
       {/* Known terms with no matching prediction */}
       {!loading && uncoveredKnown.length > 0 && (
         <div className="mt-4">
-          <p className="text-xs font-semibold text-gray-500 mb-2">
+          <p className="text-xs font-semibold text-slate-500 mb-2">
             Known annotations not covered by any prediction ({uncoveredKnown.length})
           </p>
           <div className="overflow-x-auto rounded-md border bg-white text-xs">
-            <div className="grid grid-cols-[90px_1fr_80px] gap-2 border-b bg-gray-50 px-3 py-1.5 font-semibold uppercase tracking-wide text-gray-400">
+            <div className="grid grid-cols-[90px_1fr_80px] gap-2 border-b bg-slate-50 px-3 py-1.5 font-semibold uppercase tracking-wide text-slate-400">
               <div>GO ID</div><div>Name</div><div>Evidence</div>
             </div>
             {uncoveredKnown.map((ann) => (
               <div key={ann.go_id} className="grid grid-cols-[90px_1fr_80px] gap-2 border-b px-3 py-2 last:border-0 items-start">
                 <span className="font-mono text-blue-600 pt-0.5">{ann.go_id}</span>
-                <span className="text-gray-700 leading-snug">{ann.name ?? "—"}</span>
+                <span className="text-slate-700 leading-snug">{ann.name ?? "—"}</span>
                 <div className="flex flex-wrap gap-0.5 justify-end">
                   {ann.evidence_codes.map((ec) => (
                     <span key={ec} className={`rounded border px-1 py-0.5 text-[10px] font-mono font-medium ${evidenceBadgeClass(ec)}`}>
@@ -680,18 +680,18 @@ function DownloadButton({ setId, scoringConfigId, customBlocked }: { setId: stri
       <button
         onClick={() => setOpen((v) => !v)}
         title={customBlocked ? "Guarda el config custom para descargar scored TSV" : undefined}
-        className="flex items-center gap-1.5 rounded-md border bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
+        className="flex items-center gap-1.5 rounded-md border bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50"
       >
         ↓ Download TSV
       </button>
 
       {open && (
         <div className="absolute right-0 top-10 z-20 w-64 rounded-lg border bg-white p-4 shadow-lg">
-          <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-3">Download options</p>
+          <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-3">Download options</p>
 
           {!isScored && (
             <>
-              <label className="block text-xs text-gray-600 mb-1">GO Aspect</label>
+              <label className="block text-xs text-slate-600 mb-1">GO Aspect</label>
               <select
                 value={aspect}
                 onChange={(e) => setAspect(e.target.value)}
@@ -703,7 +703,7 @@ function DownloadButton({ setId, scoringConfigId, customBlocked }: { setId: stri
                 <option value="C">C — Cellular Component</option>
               </select>
 
-              <label className="block text-xs text-gray-600 mb-1">Max distance</label>
+              <label className="block text-xs text-slate-600 mb-1">Max distance</label>
               <input
                 type="number"
                 min="0"
@@ -728,7 +728,7 @@ function DownloadButton({ setId, scoringConfigId, customBlocked }: { setId: stri
               <p className="text-xs text-blue-700 bg-blue-50 rounded px-2 py-1.5 mb-3">
                 Scored TSV — includes computed score column
               </p>
-              <label className="block text-xs text-gray-600 mb-1">Min score</label>
+              <label className="block text-xs text-slate-600 mb-1">Min score</label>
               <input
                 type="number"
                 min="0"
@@ -890,19 +890,19 @@ export default function PredictionSetDetailPage({ params }: { params: Promise<{
         <Breadcrumbs />
         <div>
           <h1 className="text-xl font-semibold mt-2">
-            Prediction Set <span className="font-mono text-base text-gray-500">{shortId(setId)}…</span>
+            Prediction Set <span className="font-mono text-base text-slate-500">{shortId(setId)}…</span>
           </h1>
           {limitPerEntry != null && (
-            <p className="text-xs text-gray-400 mt-0.5">k = {limitPerEntry}</p>
+            <p className="text-xs text-slate-400 mt-0.5">k = {limitPerEntry}</p>
           )}
         </div>
         <div className="flex flex-wrap items-center gap-2">
           <div className="flex items-center gap-1.5">
-            <label className="text-xs text-gray-500 whitespace-nowrap">Scoring</label>
+            <label className="text-xs text-slate-500 whitespace-nowrap">Scoring</label>
             <select
               value={selectedConfigId}
               onChange={(e) => setSelectedConfigId(e.target.value)}
-              className="rounded-md border bg-white px-2 py-1.5 text-sm text-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="rounded-md border bg-white px-2 py-1.5 text-sm text-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
             >
               <option value="">Raw distance</option>
               {scoringConfigs.map((c) => (
@@ -952,7 +952,7 @@ export default function PredictionSetDetailPage({ params }: { params: Promise<{
             className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
               activeTab === t.key
                 ? "border-blue-600 text-blue-600"
-                : "border-transparent text-gray-500 hover:text-gray-700"
+                : "border-transparent text-slate-500 hover:text-slate-700"
             }`}
           >
             {t.label}
@@ -964,15 +964,15 @@ export default function PredictionSetDetailPage({ params }: { params: Promise<{
       {activeTab === "proteins" && distribution && (
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
           <div className="rounded-lg border bg-white p-3 text-center">
-            <div className="text-xl font-bold text-gray-900 tabular-nums">{proteinTotal.toLocaleString()}</div>
-            <div className="text-xs text-gray-500">Proteins</div>
+            <div className="text-xl font-bold text-slate-900 tabular-nums">{proteinTotal.toLocaleString()}</div>
+            <div className="text-xs text-slate-500">Proteins</div>
           </div>
           {(["P", "F", "C"] as const).map((aspect) => (
             <div key={aspect} className="rounded-lg border bg-white p-3 text-center">
-              <div className="text-xl font-bold text-gray-900 tabular-nums">
+              <div className="text-xl font-bold text-slate-900 tabular-nums">
                 {(distribution.aspect_totals[aspect] ?? 0).toLocaleString()}
               </div>
-              <div className="text-xs text-gray-500">{ASPECT_LABELS[aspect]}</div>
+              <div className="text-xs text-slate-500">{ASPECT_LABELS[aspect]}</div>
             </div>
           ))}
         </div>
@@ -990,42 +990,42 @@ export default function PredictionSetDetailPage({ params }: { params: Promise<{
                 placeholder="Filter by accession…"
                 className="rounded-md border px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full sm:w-56"
               />
-              <button type="submit" className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-50">
+              <button type="submit" className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-slate-50">
                 Filter
               </button>
               {proteinSearch && (
                 <button type="button" onClick={() => { setProteinSearchInput(""); setProteinSearch(""); loadProteins(0, ""); }}
-                  className="rounded-md border bg-white px-3 py-1.5 text-sm text-gray-500 hover:bg-gray-50">
+                  className="rounded-md border bg-white px-3 py-1.5 text-sm text-slate-500 hover:bg-slate-50">
                   Clear
                 </button>
               )}
             </form>
-            <span className="text-sm text-gray-400">{proteinTotal.toLocaleString()} proteins</span>
+            <span className="text-sm text-slate-400">{proteinTotal.toLocaleString()} proteins</span>
           </div>
 
           {/* Mobile card list */}
           <div className="lg:hidden space-y-2">
             {loadingProteins && Array.from({ length: 4 }).map((_, i) => (
               <div key={i} className="rounded-lg border bg-white p-4 shadow-sm animate-pulse">
-                <div className="h-4 bg-gray-200 rounded w-1/3 mb-2" />
-                <div className="h-3 bg-gray-100 rounded w-2/3" />
+                <div className="h-4 bg-slate-200 rounded w-1/3 mb-2" />
+                <div className="h-3 bg-slate-100 rounded w-2/3" />
               </div>
             ))}
             {!loadingProteins && proteins.length === 0 && (
-              <div className="rounded-lg border bg-white px-4 py-12 text-center text-sm text-gray-400 shadow-sm">No proteins found.</div>
+              <div className="rounded-lg border bg-white px-4 py-12 text-center text-sm text-slate-400 shadow-sm">No proteins found.</div>
             )}
             {!loadingProteins && proteins.map((p) => (
               <div key={p.accession} className="rounded-lg border bg-white shadow-sm overflow-hidden">
                 <div
                   className={`p-4 cursor-pointer transition-colors ${
-                    selectedAccession === p.accession ? "bg-blue-50" : "hover:bg-gray-50"
+                    selectedAccession === p.accession ? "bg-blue-50" : "hover:bg-slate-50"
                   }`}
                   onClick={() => selectProtein(p.accession, p.in_db)}
                 >
                   <div className="flex items-center justify-between mb-1">
                     <div className="flex items-center gap-1.5">
                       <span className={`inline-block w-2 h-2 rounded-full ${
-                        p.min_distance == null ? "bg-gray-300"
+                        p.min_distance == null ? "bg-slate-300"
                         : p.min_distance < 0.3 ? "bg-green-500"
                         : p.min_distance < 0.6 ? "bg-amber-400"
                         : "bg-red-500"
@@ -1035,12 +1035,12 @@ export default function PredictionSetDetailPage({ params }: { params: Promise<{
                           {p.accession}
                         </Link>
                       ) : (
-                        <span className="font-mono text-sm text-gray-700">{p.accession}</span>
+                        <span className="font-mono text-sm text-slate-700">{p.accession}</span>
                       )}
                     </div>
-                    <span className="text-xs text-gray-500">{p.go_count} predicted</span>
+                    <span className="text-xs text-slate-500">{p.go_count} predicted</span>
                   </div>
-                  <div className="flex gap-4 text-xs text-gray-500">
+                  <div className="flex gap-4 text-xs text-slate-500">
                     <span>dist: {p.min_distance?.toFixed(4) ?? "—"}</span>
                     <span>known/pred: {p.annotation_count}/{p.go_count}</span>
                   </div>
@@ -1065,7 +1065,7 @@ export default function PredictionSetDetailPage({ params }: { params: Promise<{
 
           {/* Desktop table */}
           <div className="hidden lg:block overflow-x-auto rounded-lg border bg-white shadow-sm">
-            <div className="grid grid-cols-[160px_90px_120px_120px] gap-2 border-b bg-gray-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
+            <div className="grid grid-cols-[160px_90px_120px_120px] gap-2 border-b bg-slate-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
               <div>Accession</div>
               <div>Predicted</div>
               <div>Min Distance</div>
@@ -1075,20 +1075,20 @@ export default function PredictionSetDetailPage({ params }: { params: Promise<{
             {loadingProteins && Array.from({ length: 8 }).map((_, i) => <SkeletonTableRow key={i} cols={5} />)}
 
             {!loadingProteins && proteins.length === 0 && (
-              <div className="px-4 py-12 text-center text-sm text-gray-400">No proteins found.</div>
+              <div className="px-4 py-12 text-center text-sm text-slate-400">No proteins found.</div>
             )}
 
             {!loadingProteins && proteins.map((p) => (
               <div key={p.accession}>
                 <div
                   className={`grid grid-cols-[160px_90px_120px_120px] gap-2 border-b px-4 py-3 text-sm items-center cursor-pointer transition-colors ${
-                    selectedAccession === p.accession ? "bg-blue-50" : "hover:bg-gray-50"
+                    selectedAccession === p.accession ? "bg-blue-50" : "hover:bg-slate-50"
                   }`}
                   onClick={() => selectProtein(p.accession, p.in_db)}
                 >
                   <div className="flex items-center gap-2">
                     <span className={`inline-block w-2 h-2 rounded-full flex-shrink-0 ${
-                      p.min_distance == null ? "bg-gray-300"
+                      p.min_distance == null ? "bg-slate-300"
                       : p.min_distance < 0.3 ? "bg-green-500"
                       : p.min_distance < 0.6 ? "bg-amber-400"
                       : "bg-red-500"
@@ -1102,17 +1102,17 @@ export default function PredictionSetDetailPage({ params }: { params: Promise<{
                         {p.accession}
                       </Link>
                     ) : (
-                      <span className="font-mono text-xs text-gray-700">{p.accession}</span>
+                      <span className="font-mono text-xs text-slate-700">{p.accession}</span>
                     )}
                   </div>
-                  <div className="text-gray-700 font-medium">{p.go_count}</div>
-                  <div className="text-gray-600 font-mono text-xs">{p.min_distance?.toFixed(4) ?? "—"}</div>
+                  <div className="text-slate-700 font-medium">{p.go_count}</div>
+                  <div className="text-slate-600 font-mono text-xs">{p.min_distance?.toFixed(4) ?? "—"}</div>
                   <div className="text-sm font-mono">
                     {p.annotation_count > 0
-                      ? <span className="text-gray-700">{p.annotation_count}</span>
-                      : <span className="text-gray-300">0</span>}
-                    <span className="text-gray-300 mx-1">/</span>
-                    <span className="text-gray-700">{p.go_count}</span>
+                      ? <span className="text-slate-700">{p.annotation_count}</span>
+                      : <span className="text-slate-300">0</span>}
+                    <span className="text-slate-300 mx-1">/</span>
+                    <span className="text-slate-700">{p.go_count}</span>
                   </div>
                 </div>
 
@@ -1135,13 +1135,13 @@ export default function PredictionSetDetailPage({ params }: { params: Promise<{
           </div>
 
           {totalPages > 1 && (
-            <div className="mt-4 flex items-center justify-between text-sm text-gray-500">
+            <div className="mt-4 flex items-center justify-between text-sm text-slate-500">
               <span>Page {currentPage} of {totalPages}</span>
               <div className="flex gap-2">
                 <button onClick={() => loadProteins(proteinOffset - PAGE_SIZE)} disabled={proteinOffset === 0}
-                  className="rounded-md border bg-white px-3 py-1.5 hover:bg-gray-50 disabled:opacity-40">Previous</button>
+                  className="rounded-md border bg-white px-3 py-1.5 hover:bg-slate-50 disabled:opacity-40">Previous</button>
                 <button onClick={() => loadProteins(proteinOffset + PAGE_SIZE)} disabled={proteinOffset + PAGE_SIZE >= proteinTotal}
-                  className="rounded-md border bg-white px-3 py-1.5 hover:bg-gray-50 disabled:opacity-40">Next</button>
+                  className="rounded-md border bg-white px-3 py-1.5 hover:bg-slate-50 disabled:opacity-40">Next</button>
               </div>
             </div>
           )}
@@ -1151,18 +1151,18 @@ export default function PredictionSetDetailPage({ params }: { params: Promise<{
       {/* ── GO Distribution ── */}
       {activeTab === "distribution" && (
         <div>
-          {loadingDist && <p className="text-sm text-gray-400">Loading…</p>}
+          {loadingDist && <p className="text-sm text-slate-400">Loading…</p>}
 
           {distribution && (
             <div className="space-y-6">
               <div className="grid grid-cols-3 gap-3">
                 {(["F", "P", "C"] as const).map((asp) => (
                   <div key={asp} className="rounded-lg border bg-white p-4 shadow-sm">
-                    <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">{ASPECT_LABELS[asp]}</p>
-                    <p className="mt-1 text-2xl font-bold text-gray-900">
+                    <p className="text-xs font-semibold uppercase tracking-wide text-slate-400">{ASPECT_LABELS[asp]}</p>
+                    <p className="mt-1 text-2xl font-bold text-slate-900">
                       {(distribution.aspect_totals[asp] ?? 0).toLocaleString()}
                     </p>
-                    <p className="text-xs text-gray-400 mt-0.5">predictions</p>
+                    <p className="text-xs text-slate-400 mt-0.5">predictions</p>
                   </div>
                 ))}
               </div>
@@ -1173,23 +1173,23 @@ export default function PredictionSetDetailPage({ params }: { params: Promise<{
                 const maxCount = terms[0]?.count ?? 1;
                 return (
                   <div key={asp}>
-                    <p className="text-sm font-semibold text-gray-700 mb-3">
+                    <p className="text-sm font-semibold text-slate-700 mb-3">
                       {ASPECT_LABELS[asp]}
-                      <span className="ml-2 text-xs font-normal text-gray-400">top {terms.length} terms</span>
+                      <span className="ml-2 text-xs font-normal text-slate-400">top {terms.length} terms</span>
                     </p>
                     <div className="overflow-x-auto rounded-lg border bg-white shadow-sm">
                       {terms.map((t) => (
                         <div key={t.go_id} className="flex items-center gap-3 border-b px-4 py-2.5 last:border-0">
                           <span className="font-mono text-xs text-blue-600 w-24 shrink-0">{t.go_id}</span>
-                          <span className="text-xs text-gray-700 flex-1 truncate">{t.name ?? "—"}</span>
+                          <span className="text-xs text-slate-700 flex-1 truncate">{t.name ?? "—"}</span>
                           <div className="flex items-center gap-2 shrink-0">
-                            <div className="w-24 h-1.5 rounded-full bg-gray-100 overflow-hidden">
+                            <div className="w-24 h-1.5 rounded-full bg-slate-100 overflow-hidden">
                               <div
                                 className="h-1.5 rounded-full bg-blue-400"
                                 style={{ width: `${Math.round((t.count / maxCount) * 100)}%` }}
                               />
                             </div>
-                            <span className="text-xs text-gray-500 w-12 text-right">{t.count.toLocaleString()}</span>
+                            <span className="text-xs text-slate-500 w-12 text-right">{t.count.toLocaleString()}</span>
                           </div>
                         </div>
                       ))}
diff --git a/apps/web/app/[locale]/functional-annotation/page.tsx b/apps/web/app/[locale]/functional-annotation/page.tsx
index 92626b4..10b6ed9 100644
--- a/apps/web/app/[locale]/functional-annotation/page.tsx
+++ b/apps/web/app/[locale]/functional-annotation/page.tsx
@@ -33,7 +33,7 @@ function shortId(id: string) {
 }
 
 const inputClass = "w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";
-const labelClass = "block text-sm font-medium text-gray-700 mb-1";
+const labelClass = "block text-sm font-medium text-slate-700 mb-1";
 
 export default function FunctionalAnnotationPage() {
   const t = useTranslations("functionalAnnotation");
@@ -183,7 +183,7 @@ export default function FunctionalAnnotationPage() {
             className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
               activeTab === tab.key
                 ? "border-blue-600 text-blue-600"
-                : "border-transparent text-gray-500 hover:text-gray-700"
+                : "border-transparent text-slate-500 hover:text-slate-700"
             }`}
           >
             {tab.label}
@@ -197,7 +197,7 @@ export default function FunctionalAnnotationPage() {
           <div className="rounded-lg border bg-white p-6 shadow-sm">
             <h2 className="text-base font-semibold mb-4">{t("predictTab.title")}</h2>
             {loading ? (
-              <p className="text-sm text-gray-400">{t("predictTab.loading")}</p>
+              <p className="text-sm text-slate-400">{t("predictTab.loading")}</p>
             ) : (
               <form onSubmit={handlePredictSubmit} className="space-y-4">
                 <div>
@@ -214,7 +214,7 @@ export default function FunctionalAnnotationPage() {
 
                 <div>
                   <label className={labelClass}>
-                    {t("predictTab.querySetLabel")} <span className="font-normal text-gray-400">{t("predictTab.querySetHelper")}</span>
+                    {t("predictTab.querySetLabel")} <span className="font-normal text-slate-400">{t("predictTab.querySetHelper")}</span>
                   </label>
                   <select value={predQuerySetId} onChange={(e) => setPredQuerySetId(e.target.value)} className={inputClass}>
                     <option value="">{t("predictTab.allSequences")}</option>
@@ -272,7 +272,7 @@ export default function FunctionalAnnotationPage() {
                     />
                   </div>
                   <div>
-                    <label className={labelClass}>{t("predictTab.distanceThresholdLabel")} <span className="font-normal text-gray-400">{t("predictTab.distanceThresholdHelper")}</span></label>
+                    <label className={labelClass}>{t("predictTab.distanceThresholdLabel")} <span className="font-normal text-slate-400">{t("predictTab.distanceThresholdHelper")}</span></label>
                     <input
                       type="number"
                       step="any"
@@ -285,8 +285,8 @@ export default function FunctionalAnnotationPage() {
                 </div>
 
                 {/* KNN Strategy + Feature Engineering */}
-                <div className="rounded-md border border-gray-200 bg-gray-50 p-4 space-y-3">
-                  <p className="text-xs font-semibold uppercase tracking-wide text-gray-500">{t("predictTab.knnStrategy")}</p>
+                <div className="rounded-md border border-slate-200 bg-slate-50 p-4 space-y-3">
+                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">{t("predictTab.knnStrategy")}</p>
                   <div className="flex flex-col gap-2 mb-4">
                     <label className="flex items-start gap-2 cursor-pointer">
                       <input
@@ -295,15 +295,15 @@ export default function FunctionalAnnotationPage() {
                         onChange={(e) => setPredAspectSeparatedKnn(e.target.checked)}
                         className="mt-0.5 rounded"
                       />
-                      <span className="text-sm text-gray-700">
+                      <span className="text-sm text-slate-700">
                         {t("predictTab.aspectSeparatedKnn")}
-                        <span className="ml-1.5 text-xs text-gray-400">{t("predictTab.aspectSeparatedKnnHelper")}</span>
+                        <span className="ml-1.5 text-xs text-slate-400">{t("predictTab.aspectSeparatedKnnHelper")}</span>
                       </span>
                     </label>
                   </div>
 
-                  <p className="text-xs font-semibold uppercase tracking-wide text-gray-500">
-                    {t("predictTab.featureEngineering")} <span className="font-normal normal-case text-gray-400">{t("predictTab.featureEngineeringHelper")}</span>
+                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
+                    {t("predictTab.featureEngineering")} <span className="font-normal normal-case text-slate-400">{t("predictTab.featureEngineeringHelper")}</span>
                   </p>
                   <div className="flex flex-col gap-2">
                     <label className="flex items-start gap-2 cursor-pointer">
@@ -313,9 +313,9 @@ export default function FunctionalAnnotationPage() {
                         onChange={(e) => setPredComputeAlignments(e.target.checked)}
                         className="mt-0.5 rounded"
                       />
-                      <span className="text-sm text-gray-700">
+                      <span className="text-sm text-slate-700">
                         {t("predictTab.sequenceAlignments")}
-                        <span className="ml-1.5 text-xs text-gray-400">{t("predictTab.sequenceAlignmentsHelper")}</span>
+                        <span className="ml-1.5 text-xs text-slate-400">{t("predictTab.sequenceAlignmentsHelper")}</span>
                       </span>
                     </label>
                     <label className="flex items-start gap-2 cursor-pointer">
@@ -325,17 +325,17 @@ export default function FunctionalAnnotationPage() {
                         onChange={(e) => setPredComputeTaxonomy(e.target.checked)}
                         className="mt-0.5 rounded"
                       />
-                      <span className="text-sm text-gray-700">
+                      <span className="text-sm text-slate-700">
                         {t("predictTab.taxonomicDistance")}
-                        <span className="ml-1.5 text-xs text-gray-400">{t("predictTab.taxonomicDistanceHelper")}</span>
+                        <span className="ml-1.5 text-xs text-slate-400">{t("predictTab.taxonomicDistanceHelper")}</span>
                       </span>
                     </label>
                   </div>
                 </div>
 
                 {/* Search Backend */}
-                <div className="rounded-md border border-gray-200 bg-gray-50 p-4 space-y-3">
-                  <p className="text-xs font-semibold uppercase tracking-wide text-gray-500">{t("predictTab.searchBackend")}</p>
+                <div className="rounded-md border border-slate-200 bg-slate-50 p-4 space-y-3">
+                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">{t("predictTab.searchBackend")}</p>
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                     <div>
                       <label className={labelClass}>{t("predictTab.searchBackendLabel")}</label>
@@ -425,16 +425,16 @@ export default function FunctionalAnnotationPage() {
       {activeTab === "results" && (
         <div>
           <div className="flex items-center justify-between mb-3">
-            <p className="text-sm text-gray-500">
+            <p className="text-sm text-slate-500">
               {predictionSets.length} annotation result{predictionSets.length !== 1 ? "s" : ""}
             </p>
-            <button onClick={loadResults} className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-50">
+            <button onClick={loadResults} className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-slate-50">
               {t("resultsTab.refresh")}
             </button>
           </div>
 
           <div className="overflow-x-auto rounded-lg border bg-white shadow-sm">
-            <div className="grid grid-cols-[80px_100px_100px_100px_90px_80px_50px_160px_60px] gap-2 border-b bg-gray-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
+            <div className="grid grid-cols-[80px_100px_100px_100px_90px_80px_50px_160px_60px] gap-2 border-b bg-slate-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
               <div>{t("resultsTab.tableHeaders.id")}</div>
               <div>{t("resultsTab.tableHeaders.config")}</div>
               <div>{t("resultsTab.tableHeaders.annotationSet")}</div>
@@ -456,15 +456,15 @@ export default function FunctionalAnnotationPage() {
                     {shortId(ps.id)}…
                   </Link>
                 </div>
-                <div className="text-xs text-gray-700" title={ps.embedding_config_id}>{ps.embedding_config_name ?? shortId(ps.embedding_config_id)}</div>
-                <div className="text-xs text-gray-700" title={ps.annotation_set_id}>{ps.annotation_set_label ?? shortId(ps.annotation_set_id)}</div>
-                <div className="text-xs text-gray-700" title={ps.ontology_snapshot_id}>{ps.ontology_snapshot_version ?? shortId(ps.ontology_snapshot_id)}</div>
-                <div className="text-gray-700">{ps.prediction_count ?? 0}</div>
-                <div className="text-gray-600">
-                  {ps.distance_threshold != null ? ps.distance_threshold : <span className="text-gray-400">—</span>}
+                <div className="text-xs text-slate-700" title={ps.embedding_config_id}>{ps.embedding_config_name ?? shortId(ps.embedding_config_id)}</div>
+                <div className="text-xs text-slate-700" title={ps.annotation_set_id}>{ps.annotation_set_label ?? shortId(ps.annotation_set_id)}</div>
+                <div className="text-xs text-slate-700" title={ps.ontology_snapshot_id}>{ps.ontology_snapshot_version ?? shortId(ps.ontology_snapshot_id)}</div>
+                <div className="text-slate-700">{ps.prediction_count ?? 0}</div>
+                <div className="text-slate-600">
+                  {ps.distance_threshold != null ? ps.distance_threshold : <span className="text-slate-400">—</span>}
                 </div>
-                <div className="text-gray-600">{ps.limit_per_entry}</div>
-                <div className="text-xs text-gray-400">{formatDate(ps.created_at)}</div>
+                <div className="text-slate-600">{ps.limit_per_entry}</div>
+                <div className="text-xs text-slate-400">{formatDate(ps.created_at)}</div>
                 <div className="flex justify-end">
                   <button
                     onClick={() => handleDeleteResult(ps.id)}
@@ -477,7 +477,7 @@ export default function FunctionalAnnotationPage() {
             ))}
 
             {predictionSets.length === 0 && (
-              <div className="px-4 py-8 text-center text-sm text-gray-400">
+              <div className="px-4 py-8 text-center text-sm text-slate-400">
                 {t("resultsTab.noResults")}
               </div>
             )}
diff --git a/apps/web/app/[locale]/jobs/[id]/page.tsx b/apps/web/app/[locale]/jobs/[id]/page.tsx
index 08ec6bf..9ad4631 100644
--- a/apps/web/app/[locale]/jobs/[id]/page.tsx
+++ b/apps/web/app/[locale]/jobs/[id]/page.tsx
@@ -34,10 +34,10 @@ function ProgressBar({
   if (!total) {
     return (
       <div className="mt-2 space-y-1">
-        <div className="text-xs text-gray-500">
+        <div className="text-[13px] text-slate-500">
           <span className="font-medium">{(current ?? 0).toLocaleString()} {unit} processed</span>
         </div>
-        <div className="h-2.5 w-full overflow-hidden rounded-full bg-gray-100">
+        <div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-100">
           <div className="h-2.5 w-1/3 rounded-full bg-blue-400 animate-pulse" />
         </div>
       </div>
@@ -46,10 +46,10 @@ function ProgressBar({
   const pct = Math.min(100, Math.round(((current ?? 0) / total) * 100));
   return (
     <div className="mt-2 space-y-1">
-      <div className="flex justify-between text-xs text-gray-500">
+      <div className="flex justify-between text-[13px] text-slate-500">
         <span className="font-medium">{(current ?? 0).toLocaleString()} / {total.toLocaleString()} {unit} ({pct}%)</span>
       </div>
-      <div className="h-2.5 w-full overflow-hidden rounded-full bg-gray-100">
+      <div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-100">
         <div
           className="h-2.5 rounded-full bg-blue-500 transition-all duration-500"
           style={{ width: `${pct}%` }}
@@ -160,13 +160,13 @@ export default function JobDetail({ params }: { params: Promise<{ id: string }>
           </span>
         )}
         <div className="ml-auto flex gap-2">
-          <button onClick={refresh} className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-50">
+          <button onClick={refresh} className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-slate-50">
             {t("refresh")}
           </button>
           <button
             onClick={onCancel}
             disabled={isTerminal}
-            className="rounded-md border px-3 py-1.5 text-sm hover:bg-gray-50 disabled:opacity-40"
+            className="rounded-md border px-3 py-1.5 text-sm hover:bg-slate-50 disabled:opacity-40"
           >
             {t("jobDetail.cancel")}
           </button>
@@ -191,24 +191,24 @@ export default function JobDetail({ params }: { params: Promise<{ id: string }>
         <div className="mt-4 rounded-lg border bg-white p-4 shadow-sm space-y-3">
           <div className="flex items-center gap-3">
             <StatusBadge status={job.status} />
-            <span className="font-semibold text-gray-800">{job.operation}</span>
-            <span className="font-mono text-xs text-gray-400">{jobId}</span>
+            <span className="font-semibold text-slate-800">{job.operation}</span>
+            <span className="font-mono text-xs text-slate-400">{jobId}</span>
           </div>
 
           {job.operation_description && (
-            <p className="text-sm text-gray-600 leading-snug">{job.operation_description}</p>
+            <p className="text-sm text-slate-600 leading-snug">{job.operation_description}</p>
           )}
           {job.operation_summary && (
-            <p className="font-mono text-xs text-gray-700 break-words rounded bg-gray-50 px-2 py-1.5 border border-gray-100">
+            <p className="font-mono text-[13px] text-slate-700 break-words rounded bg-slate-50 px-2 py-1.5 border border-slate-100">
               {job.operation_summary}
             </p>
           )}
 
           <div className="grid grid-cols-2 gap-x-6 gap-y-1 text-sm">
-            <div><span className="text-gray-500">{t("jobDetail.queue")}</span> <span className="font-mono text-xs">{job.queue_name}</span></div>
-            <div><span className="text-gray-500">{t("jobDetail.created")}</span> {formatDate(job.created_at)}</div>
-            <div><span className="text-gray-500">{t("jobDetail.started")}</span> {formatDate(job.started_at)}</div>
-            <div><span className="text-gray-500">{t("jobDetail.finished")}</span> {formatDate(job.finished_at)}</div>
+            <div><span className="text-slate-500">{t("jobDetail.queue")}</span> <span className="font-mono text-xs">{job.queue_name}</span></div>
+            <div><span className="text-slate-500">{t("jobDetail.created")}</span> {formatDate(job.created_at)}</div>
+            <div><span className="text-slate-500">{t("jobDetail.started")}</span> {formatDate(job.started_at)}</div>
+            <div><span className="text-slate-500">{t("jobDetail.finished")}</span> {formatDate(job.finished_at)}</div>
             {job.error_code && (
               <div className="col-span-2 text-red-600">
                 <span className="font-medium">{job.error_code}:</span> {job.error_message}
@@ -230,8 +230,8 @@ export default function JobDetail({ params }: { params: Promise<{ id: string }>
 
           {job.payload && Object.keys(job.payload).length > 0 && (
             <details className="text-sm">
-              <summary className="cursor-pointer text-gray-500 hover:text-gray-700">{t("jobDetail.payloadLabel")}</summary>
-              <pre className="mt-1 rounded bg-gray-50 p-2 text-xs overflow-auto">{JSON.stringify(job.payload, null, 2)}</pre>
+              <summary className="cursor-pointer text-slate-500 hover:text-slate-700">{t("jobDetail.payloadLabel")}</summary>
+              <pre className="mt-1 rounded bg-slate-50 p-2 text-xs overflow-auto">{JSON.stringify(job.payload, null, 2)}</pre>
             </details>
           )}
         </div>
@@ -242,16 +242,16 @@ export default function JobDetail({ params }: { params: Promise<{ id: string }>
         <div className="mt-6">
           <div className="mb-3 flex items-center gap-4 flex-wrap">
             <h2 className="text-base font-semibold">
-              {t("jobDetail.childJobsTitle")} <span className="text-xs font-normal text-gray-400">{t("jobDetail.childJobsCount", { count: children.length })}</span>
+              {t("jobDetail.childJobsTitle")} <span className="text-xs font-normal text-slate-400">{t("jobDetail.childJobsCount", { count: children.length })}</span>
             </h2>
             {(["running", "queued", "succeeded", "failed", "cancelled"] as const).map((s) => {
               const n = children.filter((c) => c.status === s).length;
               if (!n) return null;
-              return <span key={s} className="text-xs text-gray-500">{s}: <strong>{n}</strong></span>;
+              return <span key={s} className="text-[13px] text-slate-500">{s}: <strong>{n}</strong></span>;
             })}
           </div>
           <div className="overflow-x-auto rounded-lg border bg-white shadow-sm">
-            <div className="grid grid-cols-[120px_1fr_160px] gap-2 border-b bg-gray-50 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-gray-500">
+            <div className="grid grid-cols-[120px_1fr_160px] gap-2 border-b bg-slate-50 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
               <div>{t("status")}</div>
               <div>{t("jobId")}</div>
               <div>{t("jobDetail.finished")}</div>
@@ -268,8 +268,8 @@ export default function JobDetail({ params }: { params: Promise<{ id: string }>
                 className="grid grid-cols-[120px_1fr_160px] gap-2 border-b px-4 py-2.5 text-sm hover:bg-blue-50 transition-colors last:border-0"
               >
                 <div><StatusBadge status={c.status} /></div>
-                <div className="font-mono text-xs text-gray-400 truncate">{c.id}</div>
-                <div className="text-xs text-gray-400">{formatDate(c.finished_at)}</div>
+                <div className="font-mono text-xs text-slate-400 truncate">{c.id}</div>
+                <div className="text-xs text-slate-400">{formatDate(c.finished_at)}</div>
               </Link>
             ))}
           </div>
@@ -279,7 +279,7 @@ export default function JobDetail({ params }: { params: Promise<{ id: string }>
       {/* Events */}
       <div className="mt-6">
         <h2 className="mb-3 text-base font-semibold">
-          {t("jobDetail.eventsTitle")} <span className="text-xs font-normal text-gray-400">{t("jobDetail.eventsCount", { count: events.length })}</span>
+          {t("jobDetail.eventsTitle")} <span className="text-xs font-normal text-slate-400">{t("jobDetail.eventsCount", { count: events.length })}</span>
         </h2>
         <EventTimeline events={events} />
       </div>
diff --git a/apps/web/app/[locale]/jobs/page.tsx b/apps/web/app/[locale]/jobs/page.tsx
index 3138a81..14d6d93 100644
--- a/apps/web/app/[locale]/jobs/page.tsx
+++ b/apps/web/app/[locale]/jobs/page.tsx
@@ -25,23 +25,23 @@ function InlineProgress({
   if (!total) {
     return (
       <div className="mt-1 flex items-center gap-2">
-        <div className="h-1.5 w-24 overflow-hidden rounded-full bg-gray-100">
+        <div className="h-1.5 w-24 overflow-hidden rounded-full bg-slate-100">
           <div className="h-1.5 w-8 rounded-full bg-blue-400 animate-pulse" />
         </div>
-        <span className="text-xs text-gray-400">{(current ?? 0).toLocaleString()}</span>
+        <span className="text-xs text-slate-400">{(current ?? 0).toLocaleString()}</span>
       </div>
     );
   }
   const pct = Math.min(100, Math.round(((current ?? 0) / total) * 100));
   return (
     <div className="mt-1 flex items-center gap-2">
-      <div className="h-1.5 w-24 overflow-hidden rounded-full bg-gray-100">
+      <div className="h-1.5 w-24 overflow-hidden rounded-full bg-slate-100">
         <div
           className="h-1.5 rounded-full bg-blue-400 transition-all duration-500"
           style={{ width: `${pct}%` }}
         />
       </div>
-      <span className="text-xs text-gray-400">{pct}%</span>
+      <span className="text-xs text-slate-400">{pct}%</span>
     </div>
   );
 }
@@ -123,7 +123,7 @@ export default function JobsPage() {
             ))}
           </select>
 
-          <label className="flex items-center gap-1.5 text-sm text-gray-600 cursor-pointer select-none">
+          <label className="flex items-center gap-1.5 text-sm text-slate-600 cursor-pointer select-none">
             <input
               type="checkbox"
               checked={autoRefresh}
@@ -136,7 +136,7 @@ export default function JobsPage() {
 
           <button
             onClick={() => refresh(statusFilter)}
-            className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-50"
+            className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-slate-50"
           >
             {t("refresh")}
           </button>
@@ -153,35 +153,35 @@ export default function JobsPage() {
       <div className="mt-4 lg:hidden space-y-2">
         {loading && Array.from({ length: 5 }).map((_, i) => (
           <div key={i} className="rounded-lg border bg-white p-3 shadow-sm animate-pulse space-y-2">
-            <div className="h-4 bg-gray-200 rounded w-24" />
-            <div className="h-3 bg-gray-100 rounded w-40" />
+            <div className="h-4 bg-slate-200 rounded w-24" />
+            <div className="h-3 bg-slate-100 rounded w-40" />
           </div>
         ))}
         {!loading && jobs.length === 0 && (
-          <div className="rounded-lg border bg-white px-4 py-8 text-center text-sm text-gray-400 shadow-sm">{t("noJobsFound")}</div>
+          <div className="rounded-lg border bg-white px-4 py-8 text-center text-sm text-slate-400 shadow-sm">{t("noJobsFound")}</div>
         )}
         {!loading && jobs.map((j) => (
           <Link key={j.id} href={`/jobs/${j.id}`} className="block rounded-lg border bg-white p-3 shadow-sm hover:border-blue-200 hover:bg-blue-50 transition-colors">
             <div className="flex items-start justify-between gap-2">
               <StatusBadge status={j.status} />
-              <span className="text-xs text-gray-400">{formatDate(j.created_at)}</span>
+              <span className="text-xs text-slate-400">{formatDate(j.created_at)}</span>
             </div>
-            <p className="mt-1.5 text-sm font-medium text-gray-800">{j.operation}</p>
+            <p className="mt-1.5 text-sm font-medium text-slate-800">{j.operation}</p>
             {j.operation_description && (
-              <p className="text-xs text-gray-500 leading-snug">{j.operation_description}</p>
+              <p className="text-xs text-slate-500 leading-snug">{j.operation_description}</p>
             )}
             {j.operation_summary && (
-              <p className="mt-1 text-xs font-mono text-gray-700 break-words">{j.operation_summary}</p>
+              <p className="mt-1 text-xs font-mono text-slate-700 break-words">{j.operation_summary}</p>
             )}
             <InlineProgress current={j.progress_current} total={j.progress_total} />
-            <p className="mt-1 font-mono text-xs text-gray-400 truncate">{j.id}</p>
+            <p className="mt-1 font-mono text-xs text-slate-400 truncate">{j.id}</p>
           </Link>
         ))}
       </div>
 
       {/* Desktop table */}
       <div className="mt-4 hidden lg:block overflow-hidden rounded-lg border bg-white shadow-sm">
-        <div className="grid grid-cols-[140px_220px_1fr_180px] gap-2 border-b bg-gray-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
+        <div className="grid grid-cols-[140px_220px_1fr_180px] gap-2 border-b bg-slate-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
           <div>{t("status")}</div>
           <div>{t("operation")}</div>
           <div>{t("operationContext")}</div>
@@ -200,32 +200,32 @@ export default function JobsPage() {
           >
             <div><StatusBadge status={j.status} /></div>
             <div>
-              <span className="text-gray-700 font-medium block truncate">{j.operation}</span>
+              <span className="text-slate-700 font-medium block truncate">{j.operation}</span>
               {j.operation_description && (
-                <span className="text-xs text-gray-500 leading-snug line-clamp-2 block">{j.operation_description}</span>
+                <span className="text-xs text-slate-500 leading-snug line-clamp-2 block">{j.operation_description}</span>
               )}
               <InlineProgress current={j.progress_current} total={j.progress_total} />
             </div>
             <div className="space-y-0.5">
               {j.operation_summary ? (
-                <span className="text-xs font-mono text-gray-700 break-words block">{j.operation_summary}</span>
+                <span className="text-xs font-mono text-slate-700 break-words block">{j.operation_summary}</span>
               ) : (
-                <span className="text-xs text-gray-300">—</span>
+                <span className="text-xs text-slate-300">—</span>
               )}
-              <span className="font-mono text-[10px] text-gray-400 truncate block">{j.id}</span>
+              <span className="font-mono text-[10px] text-slate-400 truncate block">{j.id}</span>
             </div>
-            <div className="text-gray-500 text-xs">{formatDate(j.created_at)}</div>
+            <div className="text-slate-500 text-xs">{formatDate(j.created_at)}</div>
           </Link>
         ))}
 
         {!loading && jobs.length === 0 && (
-          <div className="px-4 py-8 text-center text-sm text-gray-400">
+          <div className="px-4 py-8 text-center text-sm text-slate-400">
             {t("noJobsFound")}
           </div>
         )}
       </div>
 
-      <p className="mt-2 text-xs text-gray-400">{jobs.length} job{jobs.length !== 1 ? "s" : ""} shown</p>
+      <p className="mt-2 text-xs text-slate-400">{jobs.length} job{jobs.length !== 1 ? "s" : ""} shown</p>
     </>
   );
 }
diff --git a/apps/web/app/[locale]/maintenance/page.tsx b/apps/web/app/[locale]/maintenance/page.tsx
index d573395..df6a295 100644
--- a/apps/web/app/[locale]/maintenance/page.tsx
+++ b/apps/web/app/[locale]/maintenance/page.tsx
@@ -14,9 +14,9 @@ import { useTranslations } from "next-intl";
 
 function StatRow({ label, value, highlight }: { label: string; value: number | null; highlight?: boolean }) {
   return (
-    <div className="flex justify-between items-center py-1.5 border-b border-gray-100 last:border-0">
-      <span className="text-sm text-gray-600">{label}</span>
-      <span className={`text-sm font-mono font-semibold ${highlight && value ? "text-amber-600" : "text-gray-800"}`}>
+    <div className="flex justify-between items-center py-1.5 border-b border-slate-100 last:border-0">
+      <span className="text-sm text-slate-600">{label}</span>
+      <span className={`text-sm font-mono font-semibold ${highlight && value ? "text-amber-600" : "text-slate-800"}`}>
         {value === null ? "—" : value.toLocaleString()}
       </span>
     </div>
@@ -60,11 +60,11 @@ function VacuumCard({
   const pct = totalValue ? Math.round(((orphanValue ?? 0) / totalValue) * 100) : 0;
 
   return (
-    <div className="border border-gray-200 rounded-lg p-5 bg-white shadow-sm">
+    <div className="border border-slate-200 rounded-lg p-5 bg-white shadow-sm">
       <div className="flex items-start justify-between gap-4 mb-3">
         <div>
-          <h2 className="font-semibold text-gray-900">{title}</h2>
-          <p className="text-xs text-gray-500 mt-0.5">{description}</p>
+          <h2 className="font-semibold text-slate-900">{title}</h2>
+          <p className="text-xs text-slate-500 mt-0.5">{description}</p>
         </div>
         {orphanValue !== null && (
           <span
@@ -79,11 +79,11 @@ function VacuumCard({
 
       {orphanValue !== null && totalValue !== null && totalValue > 0 && (
         <div className="mb-3">
-          <div className="flex justify-between text-xs text-gray-400 mb-1">
+          <div className="flex justify-between text-xs text-slate-400 mb-1">
             <span>{orphanLabel}</span>
             <span>{pct}%</span>
           </div>
-          <div className="h-1.5 bg-gray-100 rounded-full overflow-hidden">
+          <div className="h-1.5 bg-slate-100 rounded-full overflow-hidden">
             <div
               className={`h-full rounded-full transition-all ${hasOrphans ? "bg-amber-400" : "bg-green-400"}`}
               style={{ width: `${pct}%` }}
@@ -98,7 +98,7 @@ function VacuumCard({
         <button
           onClick={onPreview}
           disabled={loading}
-          className="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 transition-colors"
+          className="px-3 py-1.5 text-sm border border-slate-300 rounded hover:bg-slate-50 disabled:opacity-50 transition-colors"
         >
           {loading ? "Loading…" : labelRefresh}
         </button>
@@ -200,8 +200,8 @@ export default function MaintenancePage() {
   return (
     <main className="max-w-2xl mx-auto px-4 py-8 space-y-6">
       <div>
-        <h1 className="text-2xl font-bold text-gray-900">{t("title")}</h1>
-        <p className="text-sm text-gray-500 mt-1">{t("description")}</p>
+        <h1 className="text-2xl font-bold text-slate-900">{t("title")}</h1>
+        <p className="text-sm text-slate-500 mt-1">{t("description")}</p>
       </div>
 
       <VacuumCard
diff --git a/apps/web/app/[locale]/proteins/[accession]/page.tsx b/apps/web/app/[locale]/proteins/[accession]/page.tsx
index 5ca2158..7590266 100644
--- a/apps/web/app/[locale]/proteins/[accession]/page.tsx
+++ b/apps/web/app/[locale]/proteins/[accession]/page.tsx
@@ -18,9 +18,9 @@ const ASPECT_COLORS: Record<string, string> = {
 };
 
 function AspectBadge({ aspect }: { aspect?: string | null }) {
-  if (!aspect) return <span className="text-gray-300 text-xs">—</span>;
+  if (!aspect) return <span className="text-slate-300 text-xs">—</span>;
   return (
-    <span className={`rounded-full border px-2 py-0.5 text-xs font-medium ${ASPECT_COLORS[aspect] ?? "bg-gray-50 text-gray-600"}`}>
+    <span className={`rounded-full border px-2 py-0.5 text-xs font-medium ${ASPECT_COLORS[aspect] ?? "bg-slate-50 text-slate-600"}`}>
       {aspect}
     </span>
   );
@@ -30,8 +30,8 @@ function Field({ label, value }: { label: string; value?: string | null }) {
   if (!value) return null;
   return (
     <div>
-      <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-1">{label}</p>
-      <p className="text-sm text-gray-800 whitespace-pre-wrap">{value}</p>
+      <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-1">{label}</p>
+      <p className="text-sm text-slate-800 whitespace-pre-wrap">{value}</p>
     </div>
   );
 }
@@ -68,7 +68,7 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
     if (activeTab !== "annotations") { setShowGraph(false); setSubgraph(null); }
   }, [activeTab]);
 
-  if (loading) return <p className="text-sm text-gray-400 mt-8">Loading…</p>;
+  if (loading) return <p className="text-sm text-slate-400 mt-8">Loading…</p>;
   if (!protein) return <p className="text-sm text-red-500 mt-8">Protein not found.</p>;
 
   const meta = protein.metadata;
@@ -92,15 +92,15 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
         <Breadcrumbs />
         <div className="flex items-start gap-4 mt-2">
           <div>
-            <h1 className="text-2xl font-bold text-gray-900 font-mono">{protein.accession}</h1>
-            {protein.entry_name && <p className="text-sm text-gray-500 mt-0.5">{protein.entry_name}</p>}
+            <h1 className="text-2xl font-bold text-slate-900 font-mono">{protein.accession}</h1>
+            {protein.entry_name && <p className="text-sm text-slate-500 mt-0.5">{protein.entry_name}</p>}
           </div>
           <div className="ml-auto flex flex-wrap gap-2">
             {protein.reviewed === true && (
               <span className="rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700 border border-blue-100">Swiss-Prot</span>
             )}
             {protein.reviewed === false && (
-              <span className="rounded-full bg-gray-50 px-3 py-1 text-xs font-medium text-gray-500 border border-gray-200">TrEMBL</span>
+              <span className="rounded-full bg-slate-50 px-3 py-1 text-xs font-medium text-slate-500 border border-slate-200">TrEMBL</span>
             )}
             {!protein.is_canonical && (
               <span className="rounded-full bg-amber-50 px-3 py-1 text-xs font-medium text-amber-700 border border-amber-100">
@@ -120,7 +120,7 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
             className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
               activeTab === tab.key
                 ? "border-blue-600 text-blue-600"
-                : "border-transparent text-gray-500 hover:text-gray-700"
+                : "border-transparent text-slate-500 hover:text-slate-700"
             }`}
           >
             {tab.label}
@@ -134,41 +134,41 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
           {/* Left: core info + coverage */}
           <div className="space-y-4">
             <div className="rounded-lg border bg-white p-4 shadow-sm space-y-3">
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">{t("overviewTab.identity")}</p>
+              <p className="text-xs font-semibold uppercase tracking-wide text-slate-400">{t("overviewTab.identity")}</p>
               <div className="space-y-2 text-sm">
                 {protein.gene_name && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">{t("overviewTab.gene")}</span>
-                    <span className="font-medium text-gray-900">{protein.gene_name}</span>
+                    <span className="text-slate-500">{t("overviewTab.gene")}</span>
+                    <span className="font-medium text-slate-900">{protein.gene_name}</span>
                   </div>
                 )}
                 {protein.organism && (
                   <div className="flex justify-between gap-4">
-                    <span className="text-gray-500 shrink-0">{t("overviewTab.organism")}</span>
-                    <span className="text-gray-800 text-right">{protein.organism}</span>
+                    <span className="text-slate-500 shrink-0">{t("overviewTab.organism")}</span>
+                    <span className="text-slate-800 text-right">{protein.organism}</span>
                   </div>
                 )}
                 {protein.taxonomy_id && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">{t("overviewTab.taxonId")}</span>
-                    <span className="font-mono text-xs text-gray-700">{protein.taxonomy_id}</span>
+                    <span className="text-slate-500">{t("overviewTab.taxonId")}</span>
+                    <span className="font-mono text-[13px] text-slate-700">{protein.taxonomy_id}</span>
                   </div>
                 )}
                 {protein.length && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">{t("overviewTab.length")}</span>
-                    <span className="text-gray-800">{protein.length.toLocaleString()} {t("overviewTab.aa")}</span>
+                    <span className="text-slate-500">{t("overviewTab.length")}</span>
+                    <span className="text-slate-800">{protein.length.toLocaleString()} {t("overviewTab.aa")}</span>
                   </div>
                 )}
                 {protein.sequence_id && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">{t("overviewTab.sequenceId")}</span>
-                    <span className="font-mono text-xs text-gray-600">{protein.sequence_id}</span>
+                    <span className="text-slate-500">{t("overviewTab.sequenceId")}</span>
+                    <span className="font-mono text-[13px] text-slate-600">{protein.sequence_id}</span>
                   </div>
                 )}
                 {!protein.is_canonical && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">{t("overviewTab.canonical")}</span>
+                    <span className="text-slate-500">{t("overviewTab.canonical")}</span>
                     <Link href={`/proteins/${protein.canonical_accession}`} className="font-mono text-xs text-blue-600 hover:underline">
                       {protein.canonical_accession}
                     </Link>
@@ -178,33 +178,33 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
             </div>
 
             <div className="rounded-lg border bg-white p-4 shadow-sm space-y-3">
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">{t("overviewTab.coverage")}</p>
+              <p className="text-xs font-semibold uppercase tracking-wide text-slate-400">{t("overviewTab.coverage")}</p>
               <div className="space-y-2 text-sm">
                 <div className="flex justify-between">
-                  <span className="text-gray-500">{t("overviewTab.embeddings")}</span>
-                  <span className={protein.embedding_count > 0 ? "text-green-600 font-medium" : "text-gray-400"}>
+                  <span className="text-slate-500">{t("overviewTab.embeddings")}</span>
+                  <span className={protein.embedding_count > 0 ? "text-green-600 font-medium" : "text-slate-400"}>
                     {protein.embedding_count > 0 ? `${protein.embedding_count} config${protein.embedding_count !== 1 ? "s" : ""}` : t("overviewTab.none")}
                   </span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-500">{t("overviewTab.goAnnotations")}</span>
+                  <span className="text-slate-500">{t("overviewTab.goAnnotations")}</span>
                   <button
                     onClick={() => setActiveTab("annotations")}
-                    className={protein.go_annotation_count > 0 ? "text-green-600 font-medium hover:underline" : "text-gray-400 cursor-default"}
+                    className={protein.go_annotation_count > 0 ? "text-green-600 font-medium hover:underline" : "text-slate-400 cursor-default"}
                   >
                     {protein.go_annotation_count > 0 ? protein.go_annotation_count.toLocaleString() : t("overviewTab.none")}
                   </button>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-500">{t("overviewTab.metadata")}</span>
-                  <span className={meta ? "text-green-600 font-medium" : "text-gray-400"}>{meta ? t("overviewTab.yes") : t("overviewTab.none")}</span>
+                  <span className="text-slate-500">{t("overviewTab.metadata")}</span>
+                  <span className={meta ? "text-green-600 font-medium" : "text-slate-400"}>{meta ? t("overviewTab.yes") : t("overviewTab.none")}</span>
                 </div>
               </div>
             </div>
 
             {protein.isoforms.length > 0 && (
               <div className="rounded-lg border bg-white p-4 shadow-sm">
-                <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-3">{t("overviewTab.isoforms")}</p>
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-3">{t("overviewTab.isoforms")}</p>
                 <div className="space-y-1">
                   {protein.isoforms.map((iso) => (
                     <Link key={iso} href={`/proteins/${iso}`} className="block font-mono text-xs text-blue-600 hover:underline">
@@ -222,12 +222,12 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
               <>
                 {meta.function_cc && (
                   <div className="rounded-lg border bg-white p-4 shadow-sm">
-                    <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-2">{t("overviewTab.function")}</p>
-                    <p className="text-sm text-gray-800 whitespace-pre-wrap">{meta.function_cc}</p>
+                    <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-2">{t("overviewTab.function")}</p>
+                    <p className="text-sm text-slate-800 whitespace-pre-wrap">{meta.function_cc}</p>
                   </div>
                 )}
                 <div className="rounded-lg border bg-white p-4 shadow-sm space-y-4">
-                  <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">{t("overviewTab.biochemistry")}</p>
+                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-400">{t("overviewTab.biochemistry")}</p>
                   <Field label={t("overviewTab.ecNumber")} value={meta.ec_number} />
                   <Field label={t("overviewTab.catalyticActivity")} value={meta.catalytic_activity} />
                   <Field label={t("overviewTab.cofactor")} value={meta.cofactor} />
@@ -242,17 +242,17 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
                 </div>
                 {meta.keywords && (
                   <div className="rounded-lg border bg-white p-4 shadow-sm">
-                    <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-2">{t("overviewTab.keywords")}</p>
+                    <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-2">{t("overviewTab.keywords")}</p>
                     <div className="flex flex-wrap gap-1.5">
                       {meta.keywords.split(";").map((kw) => kw.trim()).filter(Boolean).map((kw) => (
-                        <span key={kw} className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">{kw}</span>
+                        <span key={kw} className="rounded bg-slate-100 px-2 py-0.5 text-[13px] text-slate-600">{kw}</span>
                       ))}
                     </div>
                   </div>
                 )}
               </>
             ) : (
-              <div className="rounded-lg border bg-white p-8 shadow-sm text-center text-sm text-gray-400">
+              <div className="rounded-lg border bg-white p-8 shadow-sm text-center text-sm text-slate-400">
                 {t("overviewTab.noFunctionalMetadata")}
               </div>
             )}
@@ -263,10 +263,10 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
       {/* ── GO Annotations ── */}
       {activeTab === "annotations" && (
         <div>
-          {loadingAnnotations && <p className="text-sm text-gray-400">Loading…</p>}
+          {loadingAnnotations && <p className="text-sm text-slate-400">Loading…</p>}
 
           {!loadingAnnotations && annotationsLoaded && annotations.length === 0 && (
-            <div className="rounded-lg border bg-white p-8 text-center text-sm text-gray-400">
+            <div className="rounded-lg border bg-white p-8 text-center text-sm text-slate-400">
               {t("overviewTab.noGoAnnotations")}
             </div>
           )}
@@ -294,11 +294,11 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
                       setLoadingGraph(false);
                     }
                   }}
-                  className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-50"
+                  className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-slate-50"
                 >
                   {showGraph ? t("overviewTab.hideGoGraph") : t("overviewTab.showGoGraph")}
                 </button>
-                {loadingGraph && <span className="text-xs text-gray-400">{t("overviewTab.loadingGraph")}</span>}
+                {loadingGraph && <span className="text-xs text-slate-400">{t("overviewTab.loadingGraph")}</span>}
               </div>
 
               {showGraph && subgraph && <GoGraph subgraph={subgraph} />}
@@ -307,9 +307,9 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
               <div className="grid grid-cols-3 gap-3">
                 {(["F", "P", "C"] as const).map((asp) => (
                   <div key={asp} className="rounded-lg border bg-white p-4 shadow-sm">
-                    <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">{t(`overviewTab.${asp === "F" ? "molecularFunction" : asp === "P" ? "biologicalProcess" : "cellularComponent"}`)}</p>
-                    <p className="mt-1 text-2xl font-bold text-gray-900">{byAspect[asp].length}</p>
-                    <p className="text-xs text-gray-400 mt-0.5">{t("overviewTab.annotations")}</p>
+                    <p className="text-xs font-semibold uppercase tracking-wide text-slate-400">{t(`overviewTab.${asp === "F" ? "molecularFunction" : asp === "P" ? "biologicalProcess" : "cellularComponent"}`)}</p>
+                    <p className="mt-1 text-2xl font-bold text-slate-900">{byAspect[asp].length}</p>
+                    <p className="text-xs text-slate-400 mt-0.5">{t("overviewTab.annotations")}</p>
                   </div>
                 ))}
               </div>
@@ -320,12 +320,12 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
                 if (terms.length === 0) return null;
                 return (
                   <div key={asp}>
-                    <p className="text-sm font-semibold text-gray-700 mb-3">
+                    <p className="text-sm font-semibold text-slate-700 mb-3">
                       {t(`overviewTab.${asp === "F" ? "molecularFunction" : asp === "P" ? "biologicalProcess" : "cellularComponent"}`)}
-                      <span className="ml-2 text-xs font-normal text-gray-400">{terms.length} term{terms.length !== 1 ? "s" : ""}</span>
+                      <span className="ml-2 text-xs font-normal text-slate-400">{terms.length} term{terms.length !== 1 ? "s" : ""}</span>
                     </p>
                     <div className="overflow-x-auto rounded-lg border bg-white shadow-sm">
-                      <div className="grid grid-cols-[100px_1fr_80px_100px_100px] gap-2 border-b bg-gray-50 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-gray-500">
+                      <div className="grid grid-cols-[100px_1fr_80px_100px_100px] gap-2 border-b bg-slate-50 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
                         <div>{t("overviewTab.goTableHeaders.goId")}</div>
                         <div>{t("overviewTab.goTableHeaders.name")}</div>
                         <div>{t("overviewTab.goTableHeaders.evidence")}</div>
@@ -335,10 +335,10 @@ export default function ProteinDetailPage({ params }: { params: Promise<{ access
                       {terms.map((ann, i) => (
                         <div key={i} className="grid grid-cols-[100px_1fr_80px_100px_100px] gap-2 border-b px-4 py-2.5 text-sm last:border-0 items-center">
                           <div className="font-mono text-xs text-blue-600">{ann.go_id}</div>
-                          <div className="text-xs text-gray-800 truncate" title={ann.name ?? ""}>{ann.name ?? "—"}</div>
-                          <div className="text-xs text-gray-500">{ann.evidence_code ?? "—"}</div>
-                          <div className="text-xs text-gray-500">{ann.qualifier ?? "—"}</div>
-                          <div className="text-xs text-gray-400">{ann.annotation_set_source}</div>
+                          <div className="text-xs text-slate-800 truncate" title={ann.name ?? ""}>{ann.name ?? "—"}</div>
+                          <div className="text-[13px] text-slate-500">{ann.evidence_code ?? "—"}</div>
+                          <div className="text-[13px] text-slate-500">{ann.qualifier ?? "—"}</div>
+                          <div className="text-xs text-slate-400">{ann.annotation_set_source}</div>
                         </div>
                       ))}
                     </div>
diff --git a/apps/web/app/[locale]/proteins/page.tsx b/apps/web/app/[locale]/proteins/page.tsx
index 6334e8e..224b1bc 100644
--- a/apps/web/app/[locale]/proteins/page.tsx
+++ b/apps/web/app/[locale]/proteins/page.tsx
@@ -16,7 +16,7 @@ import {
 type Tab = "browse" | "stats" | "insert" | "metadata";
 
 const inputClass = "w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";
-const labelClass = "block text-sm font-medium text-gray-700 mb-1";
+const labelClass = "block text-sm font-medium text-slate-700 mb-1";
 const PAGE_SIZE = 50;
 
 function ReviewedBadge({ reviewed }: { reviewed?: boolean | null }) {
@@ -24,16 +24,16 @@ function ReviewedBadge({ reviewed }: { reviewed?: boolean | null }) {
   if (reviewed === true)
     return <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 border border-blue-100">{t("sourceSwissProt")}</span>;
   if (reviewed === false)
-    return <span className="rounded-full bg-gray-50 px-2 py-0.5 text-xs font-medium text-gray-500 border border-gray-200">{t("sourceTrembl")}</span>;
-  return <span className="text-gray-300 text-xs">—</span>;
+    return <span className="rounded-full bg-slate-50 px-2 py-0.5 text-xs font-medium text-slate-500 border border-slate-200">{t("sourceTrembl")}</span>;
+  return <span className="text-slate-300 text-xs">—</span>;
 }
 
 function StatCard({ label, value, sub }: { label: string; value: number; sub?: string }) {
   return (
     <div className="rounded-lg border bg-white p-4 shadow-sm">
-      <p className="text-xs font-medium uppercase tracking-wide text-gray-500">{label}</p>
-      <p className="mt-1 text-2xl font-bold text-gray-900">{value.toLocaleString()}</p>
-      {sub && <p className="mt-0.5 text-xs text-gray-400">{sub}</p>}
+      <p className="text-xs font-medium uppercase tracking-wide text-slate-500">{label}</p>
+      <p className="mt-1 text-2xl font-bold text-slate-900">{value.toLocaleString()}</p>
+      {sub && <p className="mt-0.5 text-xs text-slate-400">{sub}</p>}
     </div>
   );
 }
@@ -178,7 +178,7 @@ export default function ProteinsPage() {
             className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
               activeTab === tab.key
                 ? "border-blue-600 text-blue-600"
-                : "border-transparent text-gray-500 hover:text-gray-700"
+                : "border-transparent text-slate-500 hover:text-slate-700"
             }`}
           >
             {tab.label}
@@ -199,14 +199,14 @@ export default function ProteinsPage() {
                 placeholder={t("browseTab.searchPlaceholder")}
                 className="rounded-md border px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full sm:w-64"
               />
-              <button type="submit" className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-50">
+              <button type="submit" className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-slate-50">
                 {t("browseTab.search")}
               </button>
               {search && (
                 <button
                   type="button"
                   onClick={() => { setSearchInput(""); setSearch(""); loadProteins(0, "", reviewedFilter, canonicalOnly); }}
-                  className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-50 text-gray-500"
+                  className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-slate-50 text-slate-500"
                 >
                   {t("browseTab.clear")}
                 </button>
@@ -223,7 +223,7 @@ export default function ProteinsPage() {
               <option value="unreviewed">{t("browseTab.trembl")}</option>
             </select>
 
-            <label className="flex items-center gap-1.5 text-sm text-gray-600 cursor-pointer select-none">
+            <label className="flex items-center gap-1.5 text-sm text-slate-600 cursor-pointer select-none">
               <input
                 type="checkbox"
                 checked={canonicalOnly}
@@ -233,19 +233,19 @@ export default function ProteinsPage() {
               {t("browseTab.canonicalOnly")}
             </label>
 
-            <span className="ml-auto text-sm text-gray-400">{t("browseTab.totalProteins", { count: total.toLocaleString() })}</span>
+            <span className="ml-auto text-sm text-slate-400">{t("browseTab.totalProteins", { count: total.toLocaleString() })}</span>
           </div>
 
           {/* Mobile card list */}
           <div className="lg:hidden space-y-2">
             {loadingBrowse && Array.from({ length: 4 }).map((_, i) => (
               <div key={i} className="rounded-lg border bg-white p-4 shadow-sm animate-pulse">
-                <div className="h-4 bg-gray-200 rounded w-1/3 mb-2" />
-                <div className="h-3 bg-gray-100 rounded w-2/3" />
+                <div className="h-4 bg-slate-200 rounded w-1/3 mb-2" />
+                <div className="h-3 bg-slate-100 rounded w-2/3" />
               </div>
             ))}
             {!loadingBrowse && proteins.length === 0 && (
-              <div className="rounded-lg border bg-white px-4 py-12 text-center text-sm text-gray-400 shadow-sm">
+              <div className="rounded-lg border bg-white px-4 py-12 text-center text-sm text-slate-400 shadow-sm">
                 {t("browseTab.noProteinsCta")}
               </div>
             )}
@@ -259,9 +259,9 @@ export default function ProteinsPage() {
                   <span className="font-mono text-sm text-blue-600">{p.accession}</span>
                   <ReviewedBadge reviewed={p.reviewed} />
                 </div>
-                <p className="text-sm font-medium text-gray-800 truncate">{p.gene_name ?? "—"}</p>
-                <p className="text-xs text-gray-500 truncate">{p.organism ?? "—"}</p>
-                <div className="mt-1 flex gap-3 text-xs text-gray-400">
+                <p className="text-sm font-medium text-slate-800 truncate">{p.gene_name ?? "—"}</p>
+                <p className="text-xs text-slate-500 truncate">{p.organism ?? "—"}</p>
+                <div className="mt-1 flex gap-3 text-xs text-slate-400">
                   <span>{p.entry_name ?? "—"}</span>
                   {p.length != null && <span>{p.length.toLocaleString()} aa</span>}
                 </div>
@@ -271,7 +271,7 @@ export default function ProteinsPage() {
 
           {/* Desktop table */}
           <div className="hidden lg:block overflow-x-auto rounded-lg border bg-white shadow-sm">
-            <div className="grid grid-cols-[130px_140px_120px_1fr_80px_110px] gap-2 border-b bg-gray-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
+            <div className="grid grid-cols-[130px_140px_120px_1fr_80px_110px] gap-2 border-b bg-slate-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
               <div>{t("browseTab.tableHeaders.accession")}</div>
               <div>{t("browseTab.tableHeaders.entryName")}</div>
               <div>{t("browseTab.tableHeaders.gene")}</div>
@@ -283,7 +283,7 @@ export default function ProteinsPage() {
             {loadingBrowse && Array.from({ length: 8 }).map((_, i) => <SkeletonTableRow key={i} cols={6} />)}
 
             {!loadingBrowse && proteins.length === 0 && (
-              <div className="px-4 py-12 text-center text-sm text-gray-400">
+              <div className="px-4 py-12 text-center text-sm text-slate-400">
                 {t("browseTab.noProteinsCta")}
               </div>
             )}
@@ -295,10 +295,10 @@ export default function ProteinsPage() {
                 className="grid grid-cols-[130px_140px_120px_1fr_80px_110px] gap-2 border-b px-4 py-3 text-sm hover:bg-blue-50 transition-colors last:border-0 items-center"
               >
                 <div className="font-mono text-xs text-blue-600">{p.accession}</div>
-                <div className="text-gray-700 truncate text-xs">{p.entry_name ?? "—"}</div>
-                <div className="font-medium text-gray-800 truncate">{p.gene_name ?? "—"}</div>
-                <div className="text-xs text-gray-500 truncate">{p.organism ?? "—"}</div>
-                <div className="text-xs text-gray-600">{p.length?.toLocaleString() ?? "—"}</div>
+                <div className="text-slate-700 truncate text-xs">{p.entry_name ?? "—"}</div>
+                <div className="font-medium text-slate-800 truncate">{p.gene_name ?? "—"}</div>
+                <div className="text-xs text-slate-500 truncate">{p.organism ?? "—"}</div>
+                <div className="text-xs text-slate-600">{p.length?.toLocaleString() ?? "—"}</div>
                 <div><ReviewedBadge reviewed={p.reviewed} /></div>
               </Link>
             ))}
@@ -306,20 +306,20 @@ export default function ProteinsPage() {
 
           {/* Pagination */}
           {totalPages > 1 && (
-            <div className="mt-4 flex items-center justify-between text-sm text-gray-500">
+            <div className="mt-4 flex items-center justify-between text-sm text-slate-500">
               <span>{t("browseTab.pagination.page", { current: currentPage, total: totalPages })}</span>
               <div className="flex gap-2">
                 <button
                   onClick={() => loadProteins(offset - PAGE_SIZE)}
                   disabled={offset === 0}
-                  className="rounded-md border bg-white px-3 py-1.5 hover:bg-gray-50 disabled:opacity-40"
+                  className="rounded-md border bg-white px-3 py-1.5 hover:bg-slate-50 disabled:opacity-40"
                 >
                   {t("browseTab.pagination.previous")}
                 </button>
                 <button
                   onClick={() => loadProteins(offset + PAGE_SIZE)}
                   disabled={offset + PAGE_SIZE >= total}
-                  className="rounded-md border bg-white px-3 py-1.5 hover:bg-gray-50 disabled:opacity-40"
+                  className="rounded-md border bg-white px-3 py-1.5 hover:bg-slate-50 disabled:opacity-40"
                 >
                   {t("browseTab.pagination.next")}
                 </button>
@@ -333,15 +333,15 @@ export default function ProteinsPage() {
       {activeTab === "stats" && (
         <div>
           <div className="flex justify-end mb-4">
-            <button onClick={loadStats} className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-50">
+            <button onClick={loadStats} className="rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-slate-50">
               {t("statsTab.refresh")}
             </button>
           </div>
-          {loadingStats && <p className="text-sm text-gray-400">{t("statsTab.loading")}</p>}
+          {loadingStats && <p className="text-sm text-slate-400">{t("statsTab.loading")}</p>}
           {stats && (
             <div className="space-y-6">
               <div>
-                <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-3">{t("statsTab.overview")}</p>
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-3">{t("statsTab.overview")}</p>
                 <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                   <StatCard label={t("statsTab.totalProteins")} value={stats.total} />
                   <StatCard label={t("statsTab.canonical")} value={stats.canonical} sub={t("statsTab.isoforms", { count: stats.isoforms.toLocaleString() })} />
@@ -350,7 +350,7 @@ export default function ProteinsPage() {
                 </div>
               </div>
               <div>
-                <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-3">{t("statsTab.coverage")}</p>
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-3">{t("statsTab.coverage")}</p>
                 <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                   <StatCard
                     label={t("statsTab.withMetadata")}
@@ -379,12 +379,12 @@ export default function ProteinsPage() {
         <div className="max-w-2xl">
           <div className="rounded-lg border bg-white p-6 shadow-sm">
             <h2 className="text-base font-semibold mb-1">{t("insertTab.title")}</h2>
-            <p className="text-sm text-gray-500 mb-4">{t("insertTab.description")}</p>
+            <p className="text-sm text-slate-500 mb-4">{t("insertTab.description")}</p>
             <form onSubmit={handleInsertSubmit} className="space-y-4">
               <div>
                 <label className={labelClass}>{t("insertTab.searchCriteriaLabel")}</label>
                 <input type="text" value={searchCriteria} onChange={(e) => setSearchCriteria(e.target.value)} required className={inputClass} placeholder="organism_id:9606 AND reviewed:true" />
-                <p className="mt-1 text-xs text-gray-400">{t("insertTab.searchCriteriaHelper")}</p>
+                <p className="mt-1 text-xs text-slate-400">{t("insertTab.searchCriteriaHelper")}</p>
               </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div>
@@ -392,7 +392,7 @@ export default function ProteinsPage() {
                   <input type="number" value={pageSize} onChange={(e) => setPageSize(parseInt(e.target.value, 10))} min={1} className={inputClass} />
                 </div>
                 <div>
-                  <label className={labelClass}>{t("insertTab.totalLimitLabel")} <span className="font-normal text-gray-400">{t("insertTab.totalLimitOptional")}</span></label>
+                  <label className={labelClass}>{t("insertTab.totalLimitLabel")} <span className="font-normal text-slate-400">{t("insertTab.totalLimitOptional")}</span></label>
                   <input type="number" value={totalLimit} onChange={(e) => setTotalLimit(e.target.value)} placeholder="all" className={inputClass} />
                 </div>
               </div>
@@ -421,12 +421,12 @@ export default function ProteinsPage() {
         <div className="max-w-2xl">
           <div className="rounded-lg border bg-white p-6 shadow-sm">
             <h2 className="text-base font-semibold mb-1">{t("metadataTab.title")}</h2>
-            <p className="text-sm text-gray-500 mb-4">{t("metadataTab.description")}</p>
+            <p className="text-sm text-slate-500 mb-4">{t("metadataTab.description")}</p>
             <form onSubmit={handleMetaSubmit} className="space-y-4">
               <div>
                 <label className={labelClass}>{t("metadataTab.searchCriteriaLabel")}</label>
                 <input type="text" value={metaCriteria} onChange={(e) => setMetaCriteria(e.target.value)} required className={inputClass} placeholder="organism_id:9606 AND reviewed:true" />
-                <p className="mt-1 text-xs text-gray-400">{t("metadataTab.searchCriteriaHelper")}</p>
+                <p className="mt-1 text-xs text-slate-400">{t("metadataTab.searchCriteriaHelper")}</p>
               </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div>
@@ -434,7 +434,7 @@ export default function ProteinsPage() {
                   <input type="number" value={metaPageSize} onChange={(e) => setMetaPageSize(parseInt(e.target.value, 10))} min={1} className={inputClass} />
                 </div>
                 <div>
-                  <label className={labelClass}>{t("metadataTab.totalLimitLabel")} <span className="font-normal text-gray-400">{t("metadataTab.totalLimitOptional")}</span></label>
+                  <label className={labelClass}>{t("metadataTab.totalLimitLabel")} <span className="font-normal text-slate-400">{t("metadataTab.totalLimitOptional")}</span></label>
                   <input type="number" value={metaLimit} onChange={(e) => setMetaLimit(e.target.value)} placeholder="all" className={inputClass} />
                 </div>
               </div>
diff --git a/apps/web/app/[locale]/query-sets/page.tsx b/apps/web/app/[locale]/query-sets/page.tsx
index 49b6c00..63f8418 100644
--- a/apps/web/app/[locale]/query-sets/page.tsx
+++ b/apps/web/app/[locale]/query-sets/page.tsx
@@ -95,7 +95,7 @@ export default function QuerySetsPage() {
   }
 
   const inputClass = "w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";
-  const labelClass = "block text-sm font-medium text-gray-700 mb-1";
+  const labelClass = "block text-sm font-medium text-slate-700 mb-1";
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function QuerySetsPage() {
 
       {/* List */}
       <div className="overflow-x-auto rounded-lg border bg-white shadow-sm">
-        <div className="grid grid-cols-[1fr_80px_140px_60px] gap-2 border-b bg-gray-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
+        <div className="grid grid-cols-[1fr_80px_140px_60px] gap-2 border-b bg-slate-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
           <div>{t("tableHeaders.name")}</div>
           <div>{t("tableHeaders.sequences")}</div>
           <div>{t("tableHeaders.created")}</div>
@@ -130,7 +130,7 @@ export default function QuerySetsPage() {
 
         {!loading && sets.length === 0 && (
           <div className="px-4 py-10 text-center">
-            <p className="text-sm text-gray-400 mb-2">{t("noQuerySets")}</p>
+            <p className="text-sm text-slate-400 mb-2">{t("noQuerySets")}</p>
             <button
               onClick={openModal}
               className="text-sm text-blue-600 underline"
@@ -147,14 +147,14 @@ export default function QuerySetsPage() {
               onClick={() => setExpandedId(expandedId === qs.id ? null : qs.id)}
             >
               <div>
-                <span className="font-medium text-gray-900">{qs.name}</span>
+                <span className="font-medium text-slate-900">{qs.name}</span>
                 {qs.description && (
-                  <span className="ml-2 text-xs text-gray-400">{qs.description}</span>
+                  <span className="ml-2 text-xs text-slate-400">{qs.description}</span>
                 )}
-                <div className="font-mono text-xs text-gray-300 mt-0.5">{qs.id}</div>
+                <div className="font-mono text-xs text-slate-300 mt-0.5">{qs.id}</div>
               </div>
-              <div className="text-gray-700">{qs.entry_count}</div>
-              <div className="text-xs text-gray-400">{formatDate(qs.created_at)}</div>
+              <div className="text-slate-700">{qs.entry_count}</div>
+              <div className="text-xs text-slate-400">{formatDate(qs.created_at)}</div>
               <div className="flex justify-end">
                 <button
                   onClick={(e) => { e.stopPropagation(); handleDelete(qs.id, qs.name); }}
@@ -166,15 +166,15 @@ export default function QuerySetsPage() {
             </div>
 
             {expandedId === qs.id && qs.entries && (
-              <div className="border-t bg-gray-50 px-6 py-3">
-                <p className="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">
+              <div className="border-t bg-slate-50 px-6 py-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500 mb-2">
                   {t("expandedEntries.title")} {t("expandedEntries.count", { count: qs.entries.length })}
                 </p>
                 <div className="max-h-48 overflow-y-auto space-y-1">
                   {qs.entries.map((entry) => (
-                    <div key={entry.accession} className="flex gap-4 text-xs text-gray-600 font-mono">
-                      <span className="text-gray-900">{entry.accession}</span>
-                      <span className="text-gray-400">seq_id={entry.sequence_id}</span>
+                    <div key={entry.accession} className="flex gap-4 text-xs text-slate-600 font-mono">
+                      <span className="text-slate-900">{entry.accession}</span>
+                      <span className="text-slate-400">seq_id={entry.sequence_id}</span>
                     </div>
                   ))}
                 </div>
@@ -192,7 +192,7 @@ export default function QuerySetsPage() {
               <h2 className="text-base font-semibold">{t("uploadModal.title")}</h2>
               <button
                 onClick={() => setShowModal(false)}
-                className="text-gray-400 hover:text-gray-600 text-xl leading-none"
+                className="text-slate-400 hover:text-slate-600 text-xl leading-none"
               >
                 {t("uploadModal.close")}
               </button>
@@ -240,7 +240,7 @@ export default function QuerySetsPage() {
                       ? "border-blue-400 bg-blue-50 text-blue-700"
                       : uploadFile
                       ? "border-green-300 bg-green-50 text-green-700"
-                      : "border-gray-200 bg-gray-50 text-gray-500 hover:border-gray-300 hover:bg-gray-100"
+                      : "border-slate-200 bg-slate-50 text-slate-500 hover:border-slate-300 hover:bg-slate-100"
                   }`}
                 >
                   {uploadFile ? (
@@ -282,7 +282,7 @@ export default function QuerySetsPage() {
                 <button
                   type="button"
                   onClick={() => setShowModal(false)}
-                  className="rounded-md border px-4 py-2 text-sm hover:bg-gray-50"
+                  className="rounded-md border px-4 py-2 text-sm hover:bg-slate-50"
                 >
                   {t("uploadModal.cancel")}
                 </button>
diff --git a/apps/web/app/[locale]/reranker/page.tsx b/apps/web/app/[locale]/reranker/page.tsx
index 1d1bd0c..a2e0a3b 100644
--- a/apps/web/app/[locale]/reranker/page.tsx
+++ b/apps/web/app/[locale]/reranker/page.tsx
@@ -55,9 +55,9 @@ function evalLabel(es: EvaluationSet, annotationSets: AnnotationSet[]) {
   return `${oldVer} → ${newVer} · ${delta} delta proteins (${shortId(es.id)}…)`;
 }
 
-const labelClass = "block text-sm font-medium text-gray-700 mb-1";
+const labelClass = "block text-sm font-medium text-slate-700 mb-1";
 const selectClass =
-  "w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";
+  "w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";
 const btnPrimary =
   "rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50 transition-colors";
 const btnDanger =
@@ -83,21 +83,21 @@ function FeatureImportanceChart({ importance }: { importance: Record<string, num
   const entries = Object.entries(importance)
     .sort(([, a], [, b]) => b - a)
     .filter(([, v]) => v > 0);
-  if (entries.length === 0) return <p className="text-xs text-gray-400">No feature importance data</p>;
+  if (entries.length === 0) return <p className="text-xs text-slate-400">No feature importance data</p>;
   const maxVal = entries[0][1];
 
   return (
     <div className="space-y-1">
       {entries.map(([name, val]) => (
         <div key={name} className="flex items-center gap-2 text-xs">
-          <span className="w-40 shrink-0 text-right text-gray-600 truncate" title={name}>{name}</span>
-          <div className="flex-1 h-4 bg-gray-100 rounded overflow-hidden">
+          <span className="w-40 shrink-0 text-right text-slate-600 truncate" title={name}>{name}</span>
+          <div className="flex-1 h-4 bg-slate-100 rounded overflow-hidden">
             <div
               className="h-4 bg-blue-400 rounded"
               style={{ width: `${Math.round((val / maxVal) * 100)}%` }}
             />
           </div>
-          <span className="w-20 shrink-0 font-mono text-gray-500 text-right">
+          <span className="w-20 shrink-0 font-mono text-slate-500 text-right">
             {val >= 1000 ? `${(val / 1000).toFixed(1)}k` : val.toFixed(0)}
           </span>
         </div>
@@ -115,8 +115,8 @@ function MetricsBadge({ label, value, suffix }: { label: string; value: number |
   const formatted = typeof value === "number" ? value.toFixed(4) : value;
   return (
     <div className="rounded-lg border bg-white p-3 shadow-sm text-center">
-      <p className="text-[10px] font-semibold uppercase tracking-wide text-gray-400">{label}</p>
-      <p className="text-lg font-bold text-gray-900 mt-0.5">{formatted}{suffix}</p>
+      <p className="text-[10px] font-semibold uppercase tracking-wide text-slate-400">{label}</p>
+      <p className="text-lg font-bold text-slate-900 mt-0.5">{formatted}{suffix}</p>
     </div>
   );
 }
@@ -180,12 +180,12 @@ function RerankerCard({
   return (
     <div className="rounded-lg border bg-white shadow-sm overflow-hidden">
       <div
-        className="px-4 py-3 cursor-pointer hover:bg-gray-50 transition-colors"
+        className="px-4 py-3 cursor-pointer hover:bg-slate-50 transition-colors"
         onClick={() => setExpanded(!expanded)}
       >
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <span className="font-semibold text-gray-900">{model.name}</span>
+            <span className="font-semibold text-slate-900">{model.name}</span>
             <span className="rounded-full border px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700 border-indigo-100 uppercase">
               {model.category}
             </span>
@@ -196,26 +196,26 @@ function RerankerCard({
             )}
           </div>
           <div className="flex items-center gap-3">
-            <span className="text-xs text-gray-400">{new Date(model.created_at).toLocaleDateString()}</span>
-            <span className="text-gray-300 text-xs">{expanded ? "▲" : "▼"}</span>
+            <span className="text-xs text-slate-400">{new Date(model.created_at).toLocaleDateString()}</span>
+            <span className="text-slate-300 text-xs">{expanded ? "▲" : "▼"}</span>
           </div>
         </div>
-        <div className="flex flex-wrap gap-4 mt-2 text-xs text-gray-500">
+        <div className="flex flex-wrap gap-4 mt-2 text-[13px] text-slate-500">
           {m.test_fmax != null ? (
             <>
-              <span>Test Fmax: <strong className="text-gray-700">{m.test_fmax.toFixed(4)}</strong></span>
-              <span>Best iter: <strong className="text-gray-700">{m.best_iteration ?? "—"}</strong></span>
+              <span>Test Fmax: <strong className="text-slate-700">{m.test_fmax.toFixed(4)}</strong></span>
+              <span>Best iter: <strong className="text-slate-700">{m.best_iteration ?? "—"}</strong></span>
               {m.positive_rate_train != null && (
-                <span>Train pos. rate: <strong className="text-gray-700">{(m.positive_rate_train * 100).toFixed(2)}%</strong></span>
+                <span>Train pos. rate: <strong className="text-slate-700">{(m.positive_rate_train * 100).toFixed(2)}%</strong></span>
               )}
             </>
           ) : (
             <>
-              <span>AUC: <strong className="text-gray-700">{m.val_auc?.toFixed(4) ?? "—"}</strong></span>
-              <span>F1: <strong className="text-gray-700">{m.val_f1?.toFixed(4) ?? "—"}</strong></span>
-              <span>Precision: <strong className="text-gray-700">{m.val_precision?.toFixed(4) ?? "—"}</strong></span>
-              <span>Recall: <strong className="text-gray-700">{m.val_recall?.toFixed(4) ?? "—"}</strong></span>
-              <span>Positive rate: <strong className="text-gray-700">{m.positive_rate != null ? `${(m.positive_rate * 100).toFixed(2)}%` : "—"}</strong></span>
+              <span>AUC: <strong className="text-slate-700">{m.val_auc?.toFixed(4) ?? "—"}</strong></span>
+              <span>F1: <strong className="text-slate-700">{m.val_f1?.toFixed(4) ?? "—"}</strong></span>
+              <span>Precision: <strong className="text-slate-700">{m.val_precision?.toFixed(4) ?? "—"}</strong></span>
+              <span>Recall: <strong className="text-slate-700">{m.val_recall?.toFixed(4) ?? "—"}</strong></span>
+              <span>Positive rate: <strong className="text-slate-700">{m.positive_rate != null ? `${(m.positive_rate * 100).toFixed(2)}%` : "—"}</strong></span>
             </>
           )}
         </div>
@@ -225,7 +225,7 @@ function RerankerCard({
         <div className="border-t px-4 py-4 space-y-5">
           {/* Training-time metrics */}
           <div>
-            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-2">Training-time metrics</p>
+            <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-2">Training-time metrics</p>
             <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
               <MetricsBadge label="Test Fmax" value={m.test_fmax} />
               <MetricsBadge label="Best iteration" value={m.best_iteration} />
@@ -233,7 +233,7 @@ function RerankerCard({
               <MetricsBadge label="Log-loss" value={m.val_logloss} />
               <MetricsBadge label="F1" value={m.val_f1} />
             </div>
-            <div className="flex flex-wrap gap-4 mt-2 text-xs text-gray-500">
+            <div className="flex flex-wrap gap-4 mt-2 text-[13px] text-slate-500">
               {m.train_samples != null && <span>Train samples: {m.train_samples.toLocaleString()}</span>}
               {m.val_samples != null && <span>Val samples: {m.val_samples.toLocaleString()}</span>}
               {m.positive_rate_train != null && (
@@ -244,18 +244,18 @@ function RerankerCard({
 
           {/* Feature importance */}
           <div>
-            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-2">Feature importance (gain)</p>
+            <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-2">Feature importance (gain)</p>
             <FeatureImportanceChart importance={model.feature_importance} />
           </div>
 
           {/* Download reranked TSV */}
           {model.prediction_set_id && (
             <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-2">Download re-ranked predictions</p>
+              <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-2">Download re-ranked predictions</p>
               <a
                 href={getRerankedTsvUrl(model.prediction_set_id, model.id)}
                 download={`reranked_${shortId(model.id)}.tsv`}
-                className="inline-flex items-center gap-1.5 rounded-md border bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
+                className="inline-flex items-center gap-1.5 rounded-md border bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50"
               >
                 ↓ Download reranked TSV
               </a>
@@ -264,10 +264,10 @@ function RerankerCard({
 
           {/* Compute CAFA metrics */}
           <div>
-            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-2">Compute CAFA metrics</p>
+            <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-2">Compute CAFA metrics</p>
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-2">
               <div>
-                <label className="text-xs text-gray-500 mb-0.5 block">Prediction set</label>
+                <label className="text-[13px] text-slate-500 mb-0.5 block">Prediction set</label>
                 <select value={metricsPsId} onChange={(e) => setMetricsPsId(e.target.value)} className={selectClass}>
                   <option value="">Select...</option>
                   {predictionSets.map((ps) => (
@@ -276,7 +276,7 @@ function RerankerCard({
                 </select>
               </div>
               <div>
-                <label className="text-xs text-gray-500 mb-0.5 block">Evaluation set</label>
+                <label className="text-[13px] text-slate-500 mb-0.5 block">Evaluation set</label>
                 <select value={metricsEsId} onChange={(e) => setMetricsEsId(e.target.value)} className={selectClass}>
                   <option value="">Select...</option>
                   {evaluationSets.map((es) => (
@@ -285,13 +285,13 @@ function RerankerCard({
                 </select>
               </div>
               <div>
-                <label className="text-xs text-gray-500 mb-0.5 block">Category</label>
+                <label className="text-[13px] text-slate-500 mb-0.5 block">Category</label>
                 <select value={metricsCategory} onChange={(e) => setMetricsCategory(e.target.value)} className={selectClass}>
                   <option value="nk">NK (No Knowledge)</option>
                   <option value="lk">LK (Limited Knowledge)</option>
                   <option value="pk">PK (Partial Knowledge)</option>
                 </select>
-                <p className="text-[10px] text-gray-400 mt-1 leading-snug">{CATEGORY_HINTS[metricsCategory]}</p>
+                <p className="text-[10px] text-slate-400 mt-1 leading-snug">{CATEGORY_HINTS[metricsCategory]}</p>
               </div>
             </div>
             <button
@@ -303,7 +303,7 @@ function RerankerCard({
             </button>
             {metricsError && <p className="text-xs text-red-500 mt-2">{metricsError}</p>}
             {metrics && (
-              <div className="mt-3 rounded-md border bg-gray-50 p-3">
+              <div className="mt-3 rounded-md border bg-slate-50 p-3">
                 <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2">
                   <MetricsBadge label="Fmax" value={metrics.fmax} />
                   <MetricsBadge label="AUC-PR" value={metrics.auc_pr} />
@@ -313,14 +313,14 @@ function RerankerCard({
                   <MetricsBadge label="Predictions" value={metrics.n_predictions} />
                 </div>
                 {metrics.curve && metrics.curve.length > 0 && (
-                  <p className="text-[10px] text-gray-400 mt-2">{metrics.curve.length} PR curve points computed</p>
+                  <p className="text-[10px] text-slate-400 mt-2">{metrics.curve.length} PR curve points computed</p>
                 )}
               </div>
             )}
           </div>
 
           {/* Source info */}
-          <div className="flex flex-wrap gap-4 text-xs text-gray-400 border-t pt-3">
+          <div className="flex flex-wrap gap-4 text-xs text-slate-400 border-t pt-3">
             <span>Prediction set: <span className="font-mono">{model.prediction_set_id ? shortId(model.prediction_set_id) : "—"}</span></span>
             <span>Evaluation set: <span className="font-mono">{model.evaluation_set_id ? shortId(model.evaluation_set_id) : "—"}</span></span>
             <span>ID: <span className="font-mono">{shortId(model.id)}</span></span>
@@ -423,7 +423,7 @@ export default function RerankerPage() {
         ]}
         nextStep={{ label: "Evaluation", href: "/evaluation" }}
       />
-      <p className="text-sm text-gray-500 mb-6">
+      <p className="text-sm text-slate-500 mb-6">
         LightGBM binary classifiers trained on temporal holdout data (CAFA protocol).
         A re-ranker uses alignment, taxonomy, and aggregate features to re-score GO predictions
         with calibrated probabilities, replacing the raw embedding distance ranking.
@@ -431,7 +431,7 @@ export default function RerankerPage() {
 
       {/* Train new reranker */}
       <div className="rounded-lg border bg-white p-5 shadow-sm mb-6">
-        <h2 className="text-sm font-semibold text-gray-700 mb-4">Train new re-ranker</h2>
+        <h2 className="text-sm font-semibold text-slate-700 mb-4">Train new re-ranker</h2>
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-3 mb-3">
           <div>
             <label className={labelClass}>Name</label>
@@ -440,7 +440,7 @@ export default function RerankerPage() {
               value={trainName}
               onChange={(e) => setTrainName(e.target.value)}
               placeholder="e.g. reranker-nk-bpo-v1"
-              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
           </div>
           <div>
@@ -468,7 +468,7 @@ export default function RerankerPage() {
               <option value="lk">LK (Limited Knowledge)</option>
               <option value="pk">PK (Partial Knowledge)</option>
             </select>
-            <p className="text-[10px] text-gray-400 mt-1 leading-snug">{CATEGORY_HINTS[trainCategory]}</p>
+            <p className="text-[10px] text-slate-400 mt-1 leading-snug">{CATEGORY_HINTS[trainCategory]}</p>
           </div>
           <div>
             <label className={labelClass}>Aspect</label>
@@ -485,7 +485,7 @@ export default function RerankerPage() {
               type="number" min="1" step="1" placeholder="all (no limit)"
               value={trainNegPosRatio}
               onChange={(e) => setTrainNegPosRatio(e.target.value)}
-              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
           </div>
         </div>
@@ -493,11 +493,11 @@ export default function RerankerPage() {
         {/* Extra training pairs */}
         <div className="mb-3">
           <div className="flex items-center gap-2 mb-2">
-            <label className="text-xs font-medium text-gray-600">Additional training pairs (multi-temporal)</label>
+            <label className="text-xs font-medium text-slate-600">Additional training pairs (multi-temporal)</label>
             <button
               type="button"
               onClick={() => setExtraPairs((prev) => [...prev, { psId: "", esId: "" }])}
-              className="rounded border border-gray-300 bg-white px-2 py-0.5 text-xs text-gray-600 hover:bg-gray-50"
+              className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[13px] text-slate-600 hover:bg-slate-50"
             >
               + Add pair
             </button>
@@ -534,7 +534,7 @@ export default function RerankerPage() {
             </div>
           ))}
           {extraPairs.length > 0 && (
-            <p className="text-[10px] text-gray-400 mt-1">
+            <p className="text-[10px] text-slate-400 mt-1">
               Data from all pairs will be concatenated before training a single model.
               {extraPairs.filter((p) => p.psId && p.esId).length > 0 &&
                 ` (${1 + extraPairs.filter((p) => p.psId && p.esId).length} pairs total)`}
@@ -564,11 +564,11 @@ export default function RerankerPage() {
       </div>
 
       {/* List of rerankers */}
-      {loading && <p className="text-sm text-gray-400">Loading...</p>}
+      {loading && <p className="text-sm text-slate-400">Loading...</p>}
       {error && <p className="text-sm text-red-500">{error}</p>}
 
       {!loading && rerankers.length === 0 && (
-        <div className="rounded-lg border bg-white px-4 py-12 text-center text-sm text-gray-400 shadow-sm">
+        <div className="rounded-lg border bg-white px-4 py-12 text-center text-sm text-slate-400 shadow-sm">
           No re-ranker models trained yet. Use the form above to train one.
         </div>
       )}
diff --git a/apps/web/app/[locale]/scoring/page.tsx b/apps/web/app/[locale]/scoring/page.tsx
index a0ce6a6..b97024d 100644
--- a/apps/web/app/[locale]/scoring/page.tsx
+++ b/apps/web/app/[locale]/scoring/page.tsx
@@ -74,8 +74,8 @@ function WeightBar({
 }) {
   return (
     <div className="flex items-center gap-2" title={hint}>
-      <span className="text-xs text-gray-500 w-40 shrink-0">{label}</span>
-      <div className="flex-1 h-1.5 rounded-full bg-gray-100 overflow-hidden">
+      <span className="text-[13px] text-slate-500 w-40 shrink-0">{label}</span>
+      <div className="flex-1 h-1.5 rounded-full bg-slate-100 overflow-hidden">
         <div
           className="h-1.5 rounded-full bg-blue-400 transition-all"
           style={{ width: `${value * 100}%` }}
@@ -83,7 +83,7 @@ function WeightBar({
       </div>
       <span
         className={`font-mono text-xs w-8 text-right ${
-          value > 0 ? "text-gray-700" : "text-gray-300"
+          value > 0 ? "text-slate-700" : "text-slate-300"
         }`}
       >
         {value.toFixed(2)}
@@ -127,7 +127,7 @@ function ConfigCard({
       {/* Header */}
       <div className="flex items-start justify-between gap-3 mb-3">
         <div>
-          <span className="font-semibold text-gray-900">{config.name}</span>
+          <span className="font-semibold text-slate-900">{config.name}</span>
           <span className="ml-2 rounded bg-blue-50 border border-blue-100 px-1.5 py-0.5 text-xs font-mono text-blue-700">
             {config.formula}
           </span>
@@ -137,7 +137,7 @@ function ConfigCard({
             </span>
           )}
           {config.description && (
-            <p className="mt-0.5 text-xs text-gray-400">{config.description}</p>
+            <p className="mt-0.5 text-xs text-slate-400">{config.description}</p>
           )}
         </div>
         <button
@@ -160,7 +160,7 @@ function ConfigCard({
       <div className="mt-3 border-t pt-2.5">
         <button
           onClick={() => setShowEvidenceWeights((v) => !v)}
-          className="text-xs text-gray-400 hover:text-gray-600"
+          className="text-xs text-slate-400 hover:text-slate-600"
         >
           {showEvidenceWeights ? t("configCard.collapse") : t("configCard.expand")} {t("configCard.evidenceCodeWeights")}{" "}
           {hasCustomEvidence ? t("configCard.custom") : t("configCard.systemDefaults")}
@@ -170,7 +170,7 @@ function ConfigCard({
           <div className="mt-3 space-y-4">
             {evidenceGroups.map((group) => (
               <div key={group.label}>
-                <p className="text-xs font-semibold text-gray-500 mb-1.5">
+                <p className="text-xs font-semibold text-slate-500 mb-1.5">
                   {group.label}
                 </p>
                 <div className="space-y-1">
@@ -184,23 +184,23 @@ function ConfigCard({
                       <div key={code} className="flex items-center gap-2">
                         <span
                           className={`font-mono text-xs w-10 shrink-0 ${
-                            isOverridden ? "text-amber-700 font-semibold" : "text-gray-500"
+                            isOverridden ? "text-amber-700 font-semibold" : "text-slate-500"
                           }`}
                         >
                           {code}
                         </span>
-                        <span className="text-xs text-gray-400 w-52 shrink-0 truncate" title={label}>
+                        <span className="text-xs text-slate-400 w-52 shrink-0 truncate" title={label}>
                           {label}
                         </span>
-                        <div className="flex-1 h-1.5 rounded-full bg-gray-100 overflow-hidden">
+                        <div className="flex-1 h-1.5 rounded-full bg-slate-100 overflow-hidden">
                           <div
                             className={`h-1.5 rounded-full transition-all ${
-                              isOverridden ? "bg-amber-400" : "bg-gray-300"
+                              isOverridden ? "bg-amber-400" : "bg-slate-300"
                             }`}
                             style={{ width: `${val * 100}%` }}
                           />
                         </div>
-                        <span className="font-mono text-xs w-8 text-right text-gray-600">
+                        <span className="font-mono text-xs w-8 text-right text-slate-600">
                           {val.toFixed(2)}
                         </span>
                       </div>
@@ -213,7 +213,7 @@ function ConfigCard({
         )}
       </div>
 
-      <p className="mt-2 text-xs text-gray-300">
+      <p className="mt-2 text-xs text-slate-300">
         Created {new Date(config.created_at).toLocaleDateString()}
       </p>
     </div>
@@ -292,7 +292,7 @@ function NewConfigForm({
     return (
       <button
         onClick={() => setOpen(true)}
-        className="rounded-md border border-dashed border-gray-300 bg-white px-4 py-3 text-sm text-gray-500 hover:border-blue-400 hover:text-blue-600 w-full text-center"
+        className="rounded-md border border-dashed border-slate-300 bg-white px-4 py-3 text-sm text-slate-500 hover:border-blue-400 hover:text-blue-600 w-full text-center"
       >
         {t("newConfigForm.newConfig")}
       </button>
@@ -306,11 +306,11 @@ function NewConfigForm({
     >
       {/* ── Header ── */}
       <div className="flex items-center justify-between">
-        <span className="text-sm font-semibold text-gray-700">{t("newConfigForm.formTitle")}</span>
+        <span className="text-sm font-semibold text-slate-700">{t("newConfigForm.formTitle")}</span>
         <button
           type="button"
           onClick={() => { setOpen(false); reset(); }}
-          className="text-gray-400 hover:text-gray-600 text-lg leading-none"
+          className="text-slate-400 hover:text-slate-600 text-lg leading-none"
         >
           {t("newConfigForm.close")}
         </button>
@@ -319,7 +319,7 @@ function NewConfigForm({
       {/* ── Name + formula ── */}
       <div className="grid grid-cols-2 gap-3">
         <div>
-          <label className="block text-xs font-medium text-gray-600 mb-1">{t("newConfigForm.nameLabel")}</label>
+          <label className="block text-xs font-medium text-slate-600 mb-1">{t("newConfigForm.nameLabel")}</label>
           <input
             type="text"
             value={name}
@@ -330,7 +330,7 @@ function NewConfigForm({
           />
         </div>
         <div>
-          <label className="block text-xs font-medium text-gray-600 mb-1">{t("newConfigForm.formulaLabel")}</label>
+          <label className="block text-xs font-medium text-slate-600 mb-1">{t("newConfigForm.formulaLabel")}</label>
           <select
             value={formula}
             onChange={(e) => setFormula(e.target.value)}
@@ -352,8 +352,8 @@ function NewConfigForm({
       )}
 
       <div>
-        <label className="block text-xs font-medium text-gray-600 mb-1">
-          {t("newConfigForm.descriptionLabel")} <span className="font-normal text-gray-400">{t("newConfigForm.descriptionHelper")}</span>
+        <label className="block text-xs font-medium text-slate-600 mb-1">
+          {t("newConfigForm.descriptionLabel")} <span className="font-normal text-slate-400">{t("newConfigForm.descriptionHelper")}</span>
         </label>
         <input
           type="text"
@@ -366,7 +366,7 @@ function NewConfigForm({
 
       {/* ── Signal weights ── */}
       <div>
-        <label className="block text-xs font-medium text-gray-600 mb-2">
+        <label className="block text-xs font-medium text-slate-600 mb-2">
           {t("newConfigForm.signalWeights")}
         </label>
         <div className="space-y-3">
@@ -374,7 +374,7 @@ function NewConfigForm({
             const val = weights[key] ?? 0;
             return (
               <div key={key} className="flex items-center gap-3" title={hint}>
-                <span className="text-xs text-gray-600 w-44 shrink-0">{label}</span>
+                <span className="text-[13px] text-slate-600 w-44 shrink-0">{label}</span>
                 <input
                   type="range"
                   min="0"
@@ -386,7 +386,7 @@ function NewConfigForm({
                   }
                   className="flex-1 accent-blue-500"
                 />
-                <span className="font-mono text-xs text-gray-700 w-10 text-right">
+                <span className="font-mono text-[13px] text-slate-700 w-10 text-right">
                   {val.toFixed(2)}
                 </span>
               </div>
@@ -405,13 +405,13 @@ function NewConfigForm({
             onChange={(e) => setUseCustomEvidence(e.target.checked)}
             className="accent-blue-500"
           />
-          <label htmlFor="custom-evidence" className="text-xs font-medium text-gray-700 cursor-pointer">
+          <label htmlFor="custom-evidence" className="text-xs font-medium text-slate-700 cursor-pointer">
             {t("newConfigForm.overrideCheckbox")}
           </label>
         </div>
 
         {!useCustomEvidence && (
-          <p className="text-xs text-gray-400">
+          <p className="text-xs text-slate-400">
             {t("newConfigForm.systemDefaultsNote")}
           </p>
         )}
@@ -422,8 +422,8 @@ function NewConfigForm({
               <div key={group.label}>
                 <div className="flex items-center justify-between mb-1.5">
                   <div>
-                    <p className="text-xs font-semibold text-gray-600">{group.label}</p>
-                    <p className="text-xs text-gray-400">{group.description}</p>
+                    <p className="text-xs font-semibold text-slate-600">{group.label}</p>
+                    <p className="text-xs text-slate-400">{group.description}</p>
                   </div>
                   {/* Group-level shortcuts */}
                   <div className="flex gap-1 shrink-0">
@@ -434,7 +434,7 @@ function NewConfigForm({
                         onClick={() =>
                           setGroupWeight(group.codes.map((c) => c.code), v)
                         }
-                        className="rounded border px-1.5 py-0.5 text-xs text-gray-500 hover:bg-gray-50"
+                        className="rounded border px-1.5 py-0.5 text-[13px] text-slate-500 hover:bg-slate-50"
                       >
                         {v === 0 ? t("newConfigForm.off") : v === 1 ? t("newConfigForm.max") : t("newConfigForm.groupShortcut")}
                       </button>
@@ -450,13 +450,13 @@ function NewConfigForm({
                       <div key={code} className="flex items-center gap-2">
                         <span
                           className={`font-mono text-xs w-10 shrink-0 ${
-                            isDefault ? "text-gray-500" : "text-amber-700 font-semibold"
+                            isDefault ? "text-slate-500" : "text-amber-700 font-semibold"
                           }`}
                           title={label}
                         >
                           {code}
                         </span>
-                        <span className="text-xs text-gray-400 w-48 shrink-0 truncate" title={label}>
+                        <span className="text-xs text-slate-400 w-48 shrink-0 truncate" title={label}>
                           {label}
                         </span>
                         <input
@@ -475,7 +475,7 @@ function NewConfigForm({
                         />
                         <span
                           className={`font-mono text-xs w-8 text-right ${
-                            isDefault ? "text-gray-500" : "text-amber-700 font-semibold"
+                            isDefault ? "text-slate-500" : "text-amber-700 font-semibold"
                           }`}
                         >
                           {val.toFixed(2)}
@@ -490,7 +490,7 @@ function NewConfigForm({
             <button
               type="button"
               onClick={() => setEvidenceWeights({ ...SYSTEM_EVIDENCE_DEFAULTS })}
-              className="text-xs text-gray-400 hover:text-gray-600 underline"
+              className="text-xs text-slate-400 hover:text-slate-600 underline"
             >
               {t("newConfigForm.resetEvidenceWeights")}
             </button>
@@ -510,7 +510,7 @@ function NewConfigForm({
         <button
           type="button"
           onClick={() => { setOpen(false); reset(); }}
-          className="rounded-md border px-4 py-2 text-sm text-gray-600 hover:bg-gray-50"
+          className="rounded-md border px-4 py-2 text-sm text-slate-600 hover:bg-slate-50"
         >
           {t("newConfigForm.cancel")}
         </button>
@@ -619,49 +619,49 @@ export default function ScoringPage() {
       {/* ── Page header ── */}
       <div className="mb-6">
         <div className="flex items-center justify-between gap-4 mb-1">
-          <h1 className="text-xl font-semibold text-gray-900">{t("title")}</h1>
+          <h1 className="text-xl font-semibold text-slate-900">{t("title")}</h1>
           <button
             onClick={handleLoadPresets}
             disabled={loadingPresets}
-            className="rounded-md border bg-white px-3 py-1.5 text-sm text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-40 shrink-0"
+            className="rounded-md border bg-white px-3 py-1.5 text-sm text-slate-700 shadow-sm hover:bg-slate-50 disabled:opacity-40 shrink-0"
           >
             {loadingPresets ? t("presetsLoading") : t("loadPresets")}
           </button>
         </div>
-        <p className="text-sm text-gray-500">
+        <p className="text-sm text-slate-500">
           {t("description")}
         </p>
       </div>
 
       {/* ── Reference card ── */}
       <div className="mb-6 rounded-lg border bg-white p-4 shadow-sm">
-        <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-3">
+        <p className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-3">
           {t("availableSignals")}
         </p>
         <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 mb-4">
           {signals.map(({ key, label, hint }) => (
             <div key={key} className="flex items-start gap-2">
-              <span className="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs text-gray-700 shrink-0">
+              <span className="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[13px] text-slate-700 shrink-0">
                 {label}
               </span>
-              <span className="text-xs text-gray-500">{hint}</span>
+              <span className="text-[13px] text-slate-500">{hint}</span>
             </div>
           ))}
         </div>
-        <div className="border-t pt-3 grid grid-cols-1 gap-1.5 sm:grid-cols-2 text-xs text-gray-500">
+        <div className="border-t pt-3 grid grid-cols-1 gap-1.5 sm:grid-cols-2 text-[13px] text-slate-500">
           <div>
-            <strong className="text-gray-700">linear:</strong>{" "}
+            <strong className="text-slate-700">linear:</strong>{" "}
             Σ(w_i · s_i) / Σ(w_i) over all active (w_i &gt; 0 and signal available) signals.
           </div>
           <div>
-            <strong className="text-gray-700">evidence_weighted:</strong>{" "}
+            <strong className="text-slate-700">evidence_weighted:</strong>{" "}
             Same as linear, then multiplied by the resolved evidence weight — down-ranks IEA
             even when other signals are strong.
           </div>
         </div>
       </div>
 
-      {loading && <p className="text-sm text-gray-400">Loading…</p>}
+      {loading && <p className="text-sm text-slate-400">Loading…</p>}
 
       {!loading && (
         <div className="space-y-3">
@@ -672,7 +672,7 @@ export default function ScoringPage() {
           />
 
           {configs.length === 0 && (
-            <p className="text-sm text-gray-400 text-center py-8">
+            <p className="text-sm text-slate-400 text-center py-8">
               {t("noConfigs")}
             </p>
           )}
diff --git a/apps/web/app/[locale]/stack/page.tsx b/apps/web/app/[locale]/stack/page.tsx
index fff6f72..d4b166f 100644
--- a/apps/web/app/[locale]/stack/page.tsx
+++ b/apps/web/app/[locale]/stack/page.tsx
@@ -13,7 +13,7 @@ import {
 const STATUS_STYLE: Record<string, string> = {
   active: "bg-green-100 text-green-800 ring-green-200",
   beta: "bg-blue-100 text-blue-800 ring-blue-200",
-  skeleton: "bg-gray-100 text-gray-700 ring-gray-200",
+  skeleton: "bg-slate-100 text-slate-700 ring-slate-200",
   archived: "bg-rose-100 text-rose-800 ring-rose-200",
 };
 
@@ -74,8 +74,8 @@ export default function StackPage() {
   return (
     <main className="mx-auto max-w-6xl px-4 py-8 space-y-10">
       <header>
-        <h1 className="text-2xl font-bold tracking-tight text-gray-900">{t("title")}</h1>
-        <p className="mt-2 max-w-3xl text-sm text-gray-600">{t("subtitle")}</p>
+        <h1 className="text-2xl font-bold tracking-tight text-slate-900">{t("title")}</h1>
+        <p className="mt-2 max-w-3xl text-sm text-slate-600">{t("subtitle")}</p>
       </header>
 
       {thesisPdfUrl && (
@@ -98,13 +98,13 @@ export default function StackPage() {
       )}
 
       <section>
-        <h2 className="text-lg font-semibold text-gray-900">{t("reposHeading")}</h2>
+        <h2 className="text-lg font-semibold text-slate-900">{t("reposHeading")}</h2>
         {reposError && (
           <p className="mt-3 text-sm text-rose-600">{reposError}</p>
         )}
         <div className="mt-4 overflow-hidden rounded-lg border bg-white">
           <table className="w-full text-sm">
-            <thead className="bg-gray-50 text-left text-xs uppercase tracking-wider text-gray-500">
+            <thead className="bg-slate-50 text-left text-xs uppercase tracking-wider text-slate-500">
               <tr>
                 <th className="px-4 py-2.5">{t("colRepo")}</th>
                 <th className="px-4 py-2.5">{t("colRole")}</th>
@@ -113,9 +113,9 @@ export default function StackPage() {
                 <th className="px-4 py-2.5">{t("colLinks")}</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100">
+            <tbody className="divide-y divide-slate-100">
               {repos.map((r) => (
-                <tr key={r.slug} className="hover:bg-gray-50">
+                <tr key={r.slug} className="hover:bg-slate-50">
                   <td className="px-4 py-3 align-top font-mono text-blue-700">
                     <a
                       href={r.github_url}
@@ -126,11 +126,11 @@ export default function StackPage() {
                       {r.name}
                     </a>
                   </td>
-                  <td className="px-4 py-3 align-top text-gray-600">{r.role_label}</td>
+                  <td className="px-4 py-3 align-top text-slate-600">{r.role_label}</td>
                   <td className="px-4 py-3 align-top">
                     <StatusPill status={r.status} />
                   </td>
-                  <td className="px-4 py-3 align-top text-gray-700">{r.summary}</td>
+                  <td className="px-4 py-3 align-top text-slate-700">{r.summary}</td>
                   <td className="px-4 py-3 align-top text-xs space-x-3 whitespace-nowrap">
                     <a href={r.github_url} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                       GitHub
@@ -155,7 +155,7 @@ export default function StackPage() {
               ))}
               {repos.length === 0 && !reposError && (
                 <tr>
-                  <td colSpan={5} className="px-4 py-6 text-center text-gray-400">
+                  <td colSpan={5} className="px-4 py-6 text-center text-slate-400">
                     {t("loading")}
                   </td>
                 </tr>
@@ -168,9 +168,9 @@ export default function StackPage() {
       <section>
         <div className="flex items-center justify-between gap-3">
           <div>
-            <h2 className="text-lg font-semibold text-gray-900">{t("pullsHeading")}</h2>
+            <h2 className="text-lg font-semibold text-slate-900">{t("pullsHeading")}</h2>
             {pullsFetchedAt && (
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="mt-1 text-xs text-slate-500">
                 {t("fetchedAt", { time: new Date(pullsFetchedAt * 1000).toLocaleString() })}
               </p>
             )}
@@ -178,7 +178,7 @@ export default function StackPage() {
           <button
             onClick={loadPulls}
             disabled={pullsLoading}
-            className="rounded-md border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-50"
+            className="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 disabled:opacity-50"
           >
             {pullsLoading ? t("refreshing") : t("refresh")}
           </button>
@@ -199,7 +199,7 @@ export default function StackPage() {
 
         <div className="mt-4 overflow-hidden rounded-lg border bg-white">
           <table className="w-full text-sm">
-            <thead className="bg-gray-50 text-left text-xs uppercase tracking-wider text-gray-500">
+            <thead className="bg-slate-50 text-left text-xs uppercase tracking-wider text-slate-500">
               <tr>
                 <th className="px-4 py-2.5">{t("prRepo")}</th>
                 <th className="px-4 py-2.5">{t("prTitle")}</th>
@@ -207,10 +207,10 @@ export default function StackPage() {
                 <th className="px-4 py-2.5">{t("prUpdated")}</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100">
+            <tbody className="divide-y divide-slate-100">
               {pulls.map((p) => (
-                <tr key={`${p.repo}#${p.number}`} className="hover:bg-gray-50">
-                  <td className="px-4 py-3 align-top text-xs font-mono text-gray-600">{p.repo}</td>
+                <tr key={`${p.repo}#${p.number}`} className="hover:bg-slate-50">
+                  <td className="px-4 py-3 align-top text-xs font-mono text-slate-600">{p.repo}</td>
                   <td className="px-4 py-3 align-top">
                     <a
                       href={p.url}
@@ -221,7 +221,7 @@ export default function StackPage() {
                       #{p.number} {p.title}
                     </a>
                     {p.draft && (
-                      <span className="ml-2 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600 ring-1 ring-gray-200">
+                      <span className="ml-2 inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600 ring-1 ring-slate-200">
                         draft
                       </span>
                     )}
@@ -234,22 +234,22 @@ export default function StackPage() {
                       </span>
                     ))}
                   </td>
-                  <td className="px-4 py-3 align-top text-xs text-gray-600">{p.author ?? "—"}</td>
-                  <td className="px-4 py-3 align-top text-xs text-gray-500" title={p.updated_at}>
+                  <td className="px-4 py-3 align-top text-xs text-slate-600">{p.author ?? "—"}</td>
+                  <td className="px-4 py-3 align-top text-xs text-slate-500" title={p.updated_at}>
                     {relativeTime(p.updated_at)}
                   </td>
                 </tr>
               ))}
               {pulls.length === 0 && !pullsLoading && (
                 <tr>
-                  <td colSpan={4} className="px-4 py-8 text-center text-gray-400">
+                  <td colSpan={4} className="px-4 py-8 text-center text-slate-400">
                     {t("noOpenPulls")}
                   </td>
                 </tr>
               )}
               {pullsLoading && pulls.length === 0 && (
                 <tr>
-                  <td colSpan={4} className="px-4 py-8 text-center text-gray-400">
+                  <td colSpan={4} className="px-4 py-8 text-center text-slate-400">
                     {t("loadingPulls")}
                   </td>
                 </tr>
diff --git a/apps/web/app/[locale]/support/page.tsx b/apps/web/app/[locale]/support/page.tsx
index 2a57462..69dd240 100644
--- a/apps/web/app/[locale]/support/page.tsx
+++ b/apps/web/app/[locale]/support/page.tsx
@@ -27,7 +27,7 @@ export default function SupportPage() {
       .finally(() => setLoading(false));
   }, []);
 
-  if (loading) return <div className="p-8 text-sm text-gray-400">Loading…</div>;
+  if (loading) return <div className="p-8 text-sm text-slate-400">Loading…</div>;
   if (!data) return <div className="p-8 text-sm text-red-500">Could not load support data.</div>;
 
   const withComments = data.comments.length;
@@ -49,17 +49,17 @@ export default function SupportPage() {
       {/* Comments */}
       {data.comments.length > 0 && (
         <section className="space-y-3">
-          <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-400">
+          <h2 className="text-sm font-semibold uppercase tracking-wide text-slate-400">
             {t("commentsSection.heading")}
           </h2>
           <div className="space-y-3">
             {data.comments.map((c) => (
               <div
                 key={c.id}
-                className="rounded-xl border border-gray-100 bg-white px-5 py-4 shadow-sm"
+                className="rounded-xl border border-slate-100 bg-white px-5 py-4 shadow-sm"
               >
-                <p className="text-sm text-gray-700 leading-relaxed">{c.comment}</p>
-                <p className="mt-2 text-xs text-gray-400">{timeAgo(c.created_at)}</p>
+                <p className="text-sm text-slate-700 leading-relaxed">{c.comment}</p>
+                <p className="mt-2 text-xs text-slate-400">{timeAgo(c.created_at)}</p>
               </div>
             ))}
           </div>
@@ -67,7 +67,7 @@ export default function SupportPage() {
       )}
 
       {data.comments.length === 0 && (
-        <p className="text-center text-sm text-gray-400">{t("commentsSection.noComments")}</p>
+        <p className="text-center text-sm text-slate-400">{t("commentsSection.noComments")}</p>
       )}
     </div>
   );
diff --git a/apps/web/components/AnnotateForm.tsx b/apps/web/components/AnnotateForm.tsx
index 2c17cc1..70e2c93 100644
--- a/apps/web/components/AnnotateForm.tsx
+++ b/apps/web/components/AnnotateForm.tsx
@@ -220,10 +220,10 @@ export function AnnotateForm() {
 
   return (
     <section className="rounded-2xl border-2 border-blue-100 bg-gradient-to-b from-blue-50/60 to-white p-6 sm:p-8">
-      <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-1">
+      <h2 className="text-xl sm:text-2xl font-bold text-slate-900 mb-1">
         {t("annotateTitle" as any)}
       </h2>
-      <p className="text-sm text-gray-500 mb-5">
+      <p className="text-sm text-slate-500 mb-5">
         {t("annotateDescription" as any)}
       </p>
 
@@ -267,7 +267,7 @@ export function AnnotateForm() {
         className={`relative rounded-lg border-2 transition-colors ${
           dragOver
             ? "border-blue-400 bg-blue-50"
-            : "border-gray-200 bg-white"
+            : "border-slate-200 bg-white"
         }`}
         onDragOver={(e) => {
           e.preventDefault();
@@ -282,7 +282,7 @@ export function AnnotateForm() {
           placeholder={t("annotatePlaceholder" as any)}
           rows={6}
           disabled={isRunning || isQueueBlocked}
-          className="w-full rounded-lg p-4 text-xs font-mono text-gray-700 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-300 resize-y disabled:opacity-50 disabled:cursor-not-allowed bg-transparent"
+          className="w-full rounded-lg p-4 text-xs font-mono text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-300 resize-y disabled:opacity-50 disabled:cursor-not-allowed bg-transparent"
         />
         {!fasta && !isRunning && !isQueueBlocked && (
           <div className="absolute bottom-3 right-3 flex gap-2">
@@ -296,7 +296,7 @@ export function AnnotateForm() {
             <button
               type="button"
               onClick={() => fileRef.current?.click()}
-              className="text-xs text-gray-500 hover:text-gray-700 underline"
+              className="text-xs text-slate-500 hover:text-slate-700 underline"
             >
               {t("annotateUploadFile" as any)}
             </button>
@@ -353,7 +353,7 @@ export function AnnotateForm() {
         </button>
 
         {isRunning && progress && (
-          <span className="text-sm text-gray-500 tabular-nums">{progress}</span>
+          <span className="text-sm text-slate-500 tabular-nums">{progress}</span>
         )}
 
         {stage === "done" && (
@@ -384,13 +384,13 @@ export function AnnotateForm() {
                       ? "bg-blue-500"
                       : active
                         ? "bg-blue-300 animate-pulse"
-                        : "bg-gray-200"
+                        : "bg-slate-200"
                   }`}
                 />
               );
             })}
           </div>
-          <div className="flex justify-between mt-1 text-[10px] text-gray-400">
+          <div className="flex justify-between mt-1 text-[10px] text-slate-400">
             <span>{t("annotateStepUpload" as any)}</span>
             <span>{t("annotateStepEmbed" as any)}</span>
             <span>{t("annotateStepPredict" as any)}</span>
diff --git a/apps/web/components/ContextBanner.tsx b/apps/web/components/ContextBanner.tsx
index b87a7e6..e27bae6 100644
--- a/apps/web/components/ContextBanner.tsx
+++ b/apps/web/components/ContextBanner.tsx
@@ -34,7 +34,7 @@ export function ContextBanner({ title, description, prerequisites, nextStep }: C
 
       {!collapsed && (
         <div className="px-4 pb-3 space-y-2">
-          <p className="text-sm text-gray-600">{description}</p>
+          <p className="text-sm text-slate-600">{description}</p>
 
           {prerequisites && prerequisites.length > 0 && (
             <div className="flex flex-wrap gap-x-4 gap-y-1">
@@ -48,7 +48,7 @@ export function ContextBanner({ title, description, prerequisites, nextStep }: C
                       {p.label}
                     </Link>
                   ) : (
-                    <span className={p.met ? "text-gray-600" : "text-amber-700"}>{p.label}</span>
+                    <span className={p.met ? "text-slate-600" : "text-amber-700"}>{p.label}</span>
                   )}
                 </span>
               ))}
@@ -56,7 +56,7 @@ export function ContextBanner({ title, description, prerequisites, nextStep }: C
           )}
 
           {nextStep && (
-            <div className="text-xs text-gray-500">
+            <div className="text-xs text-slate-500">
               Next:{" "}
               <Link href={nextStep.href} className="text-blue-600 underline hover:text-blue-800">
                 {nextStep.label} &rarr;
diff --git a/apps/web/components/DocLinks.tsx b/apps/web/components/DocLinks.tsx
index a16c7e7..ae3efd3 100644
--- a/apps/web/components/DocLinks.tsx
+++ b/apps/web/components/DocLinks.tsx
@@ -8,7 +8,7 @@ export function DocLinks() {
         href={`${base}/docs`}
         target="_blank"
         rel="noopener noreferrer"
-        className="hover:text-gray-900"
+        className="hover:text-slate-900"
       >
         Swagger
       </a>
@@ -16,7 +16,7 @@ export function DocLinks() {
         href="/sphinx/"
         target="_blank"
         rel="noopener noreferrer"
-        className="hover:text-gray-900"
+        className="hover:text-slate-900"
       >
         Docs
       </a>
@@ -24,7 +24,7 @@ export function DocLinks() {
         href={`${base}/static/thesis.pdf`}
         target="_blank"
         rel="noopener noreferrer"
-        className="hover:text-gray-900"
+        className="hover:text-slate-900"
       >
         Thesis
       </a>
diff --git a/apps/web/components/EventTimeline.tsx b/apps/web/components/EventTimeline.tsx
index 27ecdfe..cde18cc 100644
--- a/apps/web/components/EventTimeline.tsx
+++ b/apps/web/components/EventTimeline.tsx
@@ -22,10 +22,10 @@ function Fields({ fields }: { fields: Record<string, any> }) {
   const entries = Object.entries(fields ?? {});
   if (entries.length === 0) return null;
   return (
-    <dl className="mt-1 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs text-gray-500">
+    <dl className="mt-1 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs text-slate-500">
       {entries.map(([k, v]) => (
         <Fragment key={k}>
-          <dt className="font-medium text-gray-400">{k}</dt>
+          <dt className="font-medium text-slate-400">{k}</dt>
           <dd className="truncate">{typeof v === "object" ? JSON.stringify(v) : String(v)}</dd>
         </Fragment>
       ))}
@@ -36,7 +36,7 @@ function Fields({ fields }: { fields: Record<string, any> }) {
 export function EventTimeline({ events }: { events: JobEvent[] }) {
   const t = useTranslations("components.eventTimeline");
   if (events.length === 0) {
-    return <p className="text-sm text-gray-400">{t("noEvents")}</p>;
+    return <p className="text-sm text-slate-400">{t("noEvents")}</p>;
   }
 
   return (
@@ -49,14 +49,14 @@ export function EventTimeline({ events }: { events: JobEvent[] }) {
               <span className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border text-[9px] font-bold uppercase ${levelCls}`}>
                 {e.level[0]}
               </span>
-              <span className="mt-1 w-px grow bg-gray-100" />
+              <span className="mt-1 w-px grow bg-slate-100" />
             </div>
             <div className="pb-3 min-w-0 flex-1">
               <div className="flex items-baseline gap-2">
-                <span className="font-mono text-xs font-semibold text-gray-800">{e.event}</span>
-                <span className="text-xs text-gray-400">{formatTs(e.ts)}</span>
+                <span className="font-mono text-xs font-semibold text-slate-800">{e.event}</span>
+                <span className="text-xs text-slate-400">{formatTs(e.ts)}</span>
               </div>
-              {e.message && <p className="mt-0.5 text-sm text-gray-600">{e.message}</p>}
+              {e.message && <p className="mt-0.5 text-sm text-slate-600">{e.message}</p>}
               <Fields fields={e.fields} />
             </div>
           </li>
diff --git a/apps/web/components/GoGraph.tsx b/apps/web/components/GoGraph.tsx
index dab1ced..1afb54e 100644
--- a/apps/web/components/GoGraph.tsx
+++ b/apps/web/components/GoGraph.tsx
@@ -263,7 +263,7 @@ export default function GoGraph({ subgraph, knownGoIds, predictedGoIds, height =
 
   if (subgraph.nodes.length === 0) {
     return (
-      <div className="flex items-center justify-center h-24 text-sm text-gray-400">
+      <div className="flex items-center justify-center h-24 text-sm text-slate-400">
         No graph data available.
       </div>
     );
@@ -281,7 +281,7 @@ export default function GoGraph({ subgraph, knownGoIds, predictedGoIds, height =
               className={`px-3 py-1.5 text-xs font-medium border-b-2 transition-colors ${
                 activeAspect === asp
                   ? (ASPECT_TAB_COLORS[asp] ?? "border-blue-600 text-blue-600")
-                  : "border-transparent text-gray-400 hover:text-gray-600"
+                  : "border-transparent text-slate-400 hover:text-slate-600"
               }`}
             >
               {ASPECT_LABELS[asp] ?? asp}
@@ -300,15 +300,15 @@ export default function GoGraph({ subgraph, knownGoIds, predictedGoIds, height =
             style={{ left: tooltip.x + 12, top: tooltip.y + 12 }}
           >
             <p className="font-mono font-semibold text-blue-600">{tooltip.goId}</p>
-            {tooltip.name && <p className="text-gray-700 mt-0.5">{tooltip.name}</p>}
-            <p className="mt-1 text-gray-400 capitalize">{tooltip.kind.replace(/_/g, " ")}</p>
+            {tooltip.name && <p className="text-slate-700 mt-0.5">{tooltip.name}</p>}
+            <p className="mt-1 text-slate-400 capitalize">{tooltip.kind.replace(/_/g, " ")}</p>
           </div>
         )}
       </div>
 
       {/* Legend */}
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2 border-t bg-gray-50 text-xs text-gray-500">
-        <span className="font-medium text-gray-600">Nodes:</span>
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2 border-t bg-slate-50 text-xs text-slate-500">
+        <span className="font-medium text-slate-600">Nodes:</span>
         {NODE_LEGEND.map(({ kind, label, bg, border }) => (
           <span key={kind} className="flex items-center gap-1.5">
             <span className="inline-block w-3 h-3 rounded-sm border"
@@ -318,7 +318,7 @@ export default function GoGraph({ subgraph, knownGoIds, predictedGoIds, height =
         ))}
         <span className="ml-auto flex items-center gap-3">
           <span className="flex items-center gap-1">
-            <span className="inline-block w-4 h-0.5 bg-gray-400 rounded" /> is_a
+            <span className="inline-block w-4 h-0.5 bg-slate-400 rounded" /> is_a
           </span>
           <span className="flex items-center gap-1">
             <span className="inline-block w-4 border-t border-dashed border-yellow-400" /> part_of
diff --git a/apps/web/components/ResetDbButton.tsx b/apps/web/components/ResetDbButton.tsx
index 2fdb39a..7309340 100644
--- a/apps/web/components/ResetDbButton.tsx
+++ b/apps/web/components/ResetDbButton.tsx
@@ -48,13 +48,13 @@ export function ResetDbButton() {
       {showConfirm && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
           <div className="w-full max-w-sm rounded-xl border bg-white shadow-xl p-6">
-            <h2 className="text-base font-semibold text-gray-900">{t("confirmTitle")}</h2>
-            <p className="mt-2 text-sm text-gray-500">{t("confirmMessage")}</p>
+            <h2 className="text-base font-semibold text-slate-900">{t("confirmTitle")}</h2>
+            <p className="mt-2 text-sm text-slate-500">{t("confirmMessage")}</p>
             <div className="mt-5 flex justify-end gap-2">
               <button
                 onClick={() => setShowConfirm(false)}
                 disabled={loading}
-                className="rounded-md border px-4 py-2 text-sm hover:bg-gray-50 disabled:opacity-50"
+                className="rounded-md border px-4 py-2 text-sm hover:bg-slate-50 disabled:opacity-50"
               >
                 {t("cancel")}
               </button>
diff --git a/apps/web/components/Skeleton.tsx b/apps/web/components/Skeleton.tsx
index 3ac76e6..2e4a24f 100644
--- a/apps/web/components/Skeleton.tsx
+++ b/apps/web/components/Skeleton.tsx
@@ -1,5 +1,5 @@
 export function Skeleton({ className = "" }: { className?: string }) {
-  return <div className={`animate-pulse rounded bg-gray-200 ${className}`} />;
+  return <div className={`animate-pulse rounded bg-slate-200 ${className}`} />;
 }
 
 export function SkeletonTableRow({ cols = 4 }: { cols?: number }) {
diff --git a/apps/web/components/StatusBadge.tsx b/apps/web/components/StatusBadge.tsx
index da45929..62c89b1 100644
--- a/apps/web/components/StatusBadge.tsx
+++ b/apps/web/components/StatusBadge.tsx
@@ -9,7 +9,7 @@ const STYLES: Record<string, string> = {
   running: "bg-blue-100 text-blue-800 border-blue-200",
   succeeded: "bg-green-100 text-green-800 border-green-200",
   failed: "bg-red-100 text-red-800 border-red-200",
-  cancelled: "bg-gray-100 text-gray-600 border-gray-200",
+  cancelled: "bg-slate-100 text-slate-600 border-slate-200",
 };
 
 const KNOWN_STATUSES = ["queued", "running", "succeeded", "failed", "cancelled"] as const;
@@ -18,7 +18,7 @@ type KnownStatus = typeof KNOWN_STATUSES[number];
 export function StatusBadge({ status }: { status: Status }) {
   const t = useTranslations("components.statusBadge");
   const key = status.toLowerCase();
-  const cls = STYLES[key] ?? "bg-gray-100 text-gray-600 border-gray-200";
+  const cls = STYLES[key] ?? "bg-slate-100 text-slate-600 border-slate-200";
   const isKnown = KNOWN_STATUSES.includes(key as KnownStatus);
   const label = isKnown ? t(key as KnownStatus) : status.toUpperCase();
   return (
diff --git a/apps/web/components/SupportButton.tsx b/apps/web/components/SupportButton.tsx
index bc9a2cc..ea19970 100644
--- a/apps/web/components/SupportButton.tsx
+++ b/apps/web/components/SupportButton.tsx
@@ -72,14 +72,14 @@ export function SupportButton() {
             </span>
           )}
         </button>
-        <span className="pointer-events-none absolute bottom-full right-0 mb-2 z-20 hidden group-hover:block w-64 rounded-md border border-gray-200 bg-white px-3 py-2 text-xs text-gray-500 shadow-lg leading-relaxed">
+        <span className="pointer-events-none absolute bottom-full right-0 mb-2 z-20 hidden group-hover:block w-64 rounded-md border border-slate-200 bg-white px-3 py-2 text-xs text-slate-500 shadow-lg leading-relaxed">
           {t("tooltip")}
         </span>
       </div>
 
       {/* Popover */}
       {open && (
-        <div className="absolute right-0 top-full mt-2 z-30 w-80 max-w-[calc(100vw-2rem)] rounded-xl border border-gray-200 bg-white shadow-xl">
+        <div className="absolute right-0 top-full mt-2 z-30 w-80 max-w-[calc(100vw-2rem)] rounded-xl border border-slate-200 bg-white shadow-xl">
           <div className="p-4 space-y-3">
             {submitted ? (
               <p className="text-center text-sm font-medium text-green-600 py-2">
@@ -87,16 +87,16 @@ export function SupportButton() {
               </p>
             ) : (
               <>
-                <p className="text-sm font-semibold text-gray-800">{t("projectSupport")}</p>
+                <p className="text-sm font-semibold text-slate-800">{t("projectSupport")}</p>
                 <textarea
                   value={comment}
                   onChange={(e) => setComment(e.target.value)}
                   placeholder={t("commentPlaceholder")}
                   maxLength={500}
                   rows={3}
-                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
                 />
-                <p className="text-xs text-gray-400">
+                <p className="text-xs text-slate-400">
                   {t("publicNote")}
                 </p>
                 <button
@@ -112,16 +112,16 @@ export function SupportButton() {
 
           {/* Recent comments */}
           {data && data.comments?.length > 0 && (
-            <div className="border-t border-gray-100 px-4 py-3 space-y-2 max-h-48 overflow-y-auto">
+            <div className="border-t border-slate-100 px-4 py-3 space-y-2 max-h-48 overflow-y-auto">
               <div className="flex items-center justify-between">
-                <p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t("recentComments")}</p>
+                <p className="text-xs font-medium text-slate-400 uppercase tracking-wide">{t("recentComments")}</p>
                 <Link href="/support" className="text-xs text-blue-500 hover:underline" onClick={() => setOpen(false)}>
                   {t("viewAll")}
                 </Link>
               </div>
               {data.comments.map((c) => (
-                <div key={c.id} className="text-xs text-gray-600 leading-relaxed">
-                  <span className="text-gray-400 mr-1">{new Date(c.created_at).toLocaleDateString()}</span>
+                <div key={c.id} className="text-xs text-slate-600 leading-relaxed">
+                  <span className="text-slate-400 mr-1">{new Date(c.created_at).toLocaleDateString()}</span>
                   {c.comment}
                 </div>
               ))}
diff --git a/apps/web/components/Tooltip.tsx b/apps/web/components/Tooltip.tsx
index c36fcd1..e6aeae2 100644
--- a/apps/web/components/Tooltip.tsx
+++ b/apps/web/components/Tooltip.tsx
@@ -4,7 +4,7 @@ export function Tooltip({ text, children }: { text: string; children: React.Reac
   return (
     <span className="relative inline-block group">
       {children}
-      <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 z-20 hidden group-hover:block w-56 rounded-md border border-gray-200 bg-white px-3 py-2 text-xs text-gray-600 shadow-lg leading-relaxed">
+      <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 z-20 hidden group-hover:block w-56 rounded-md border border-slate-200 bg-white px-3 py-2 text-xs text-slate-600 shadow-lg leading-relaxed">
         {text}
       </span>
     </span>
@@ -14,7 +14,7 @@ export function Tooltip({ text, children }: { text: string; children: React.Reac
 export function HelpDot({ text }: { text: string }) {
   return (
     <Tooltip text={text}>
-      <span className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 text-gray-500 text-[10px] font-bold cursor-help select-none ml-1 align-middle">
+      <span className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-slate-200 text-slate-500 text-[10px] font-bold cursor-help select-none ml-1 align-middle">
         ?
       </span>
     </Tooltip>
diff --git a/apps/web/components/UsagePolicyModal.tsx b/apps/web/components/UsagePolicyModal.tsx
index b39e15a..24dffbf 100644
--- a/apps/web/components/UsagePolicyModal.tsx
+++ b/apps/web/components/UsagePolicyModal.tsx
@@ -27,12 +27,12 @@ export function UsagePolicyModal() {
       <div className="relative mx-4 w-full max-w-lg rounded-xl bg-white shadow-2xl">
         {/* Header */}
         <div className="border-b px-6 py-4">
-          <h2 className="text-lg font-semibold text-gray-900">{t("title")}</h2>
-          <p className="mt-0.5 text-sm text-gray-500">{t("subtitle")}</p>
+          <h2 className="text-lg font-semibold text-slate-900">{t("title")}</h2>
+          <p className="mt-0.5 text-sm text-slate-500">{t("subtitle")}</p>
         </div>
 
         {/* Body */}
-        <div className="px-6 py-5 text-sm text-gray-700 space-y-3">
+        <div className="px-6 py-5 text-sm text-slate-700 space-y-3">
           <p>{t("intro")}</p>
           <ul className="space-y-2 list-none">
             {(["rule1", "rule2", "rule3", "rule4", "rule5", "rule6"] as const).map((key) => (
@@ -48,7 +48,7 @@ export function UsagePolicyModal() {
               </li>
             ))}
           </ul>
-          <p className="text-xs text-gray-400 pt-1">{t("dataPublicNote")}</p>
+          <p className="text-xs text-slate-400 pt-1">{t("dataPublicNote")}</p>
         </div>
 
         {/* Footer */}