diff --git a/frontend/src/app/activity/page.tsx b/frontend/src/app/activity/page.tsx
index c83c2a5..0344fe5 100644
--- a/frontend/src/app/activity/page.tsx
+++ b/frontend/src/app/activity/page.tsx
@@ -242,7 +242,7 @@ const eventLabel = (eventType: FeedEventType): string => {
 
 const eventPillClass = (eventType: FeedEventType): string => {
   if (eventType === "task.comment") {
-    return "border-blue-200 bg-blue-50 text-blue-700";
+    return "border-primary/30 bg-primary/10 text-primary";
   }
   if (eventType === "task.created") {
     return "border-emerald-200 bg-emerald-50 text-emerald-700";
@@ -263,7 +263,7 @@ const eventPillClass = (eventType: FeedEventType): string => {
     return "border-lime-200 bg-lime-50 text-lime-700";
   }
   if (eventType === "agent.offline") {
-    return "border-slate-300 bg-slate-100 text-slate-700";
+    return "border-input bg-accent text-muted-foreground";
   }
   if (eventType === "agent.updated") {
     return "border-indigo-200 bg-indigo-50 text-indigo-700";
@@ -280,7 +280,7 @@ const eventPillClass = (eventType: FeedEventType): string => {
   if (eventType === "approval.rejected") {
     return "border-rose-200 bg-rose-50 text-rose-700";
   }
-  return "border-slate-200 bg-slate-100 text-slate-700";
+  return "border-border bg-accent text-muted-foreground";
 };
 
 const FeedCard = memo(function FeedCard({
@@ -297,14 +297,14 @@ const FeedCard = memo(function FeedCard({
     <div
       id={feedItemElementId(item.id)}
       className={cn(
-        "scroll-mt-28 rounded-xl border bg-white p-4 transition",
+        "scroll-mt-28 rounded-xl border bg-card p-4 transition",
         isHighlighted
-          ? "border-blue-300 ring-2 ring-blue-200"
-          : "border-slate-200 hover:border-slate-300",
+          ? "border-primary/40 ring-2 ring-primary/20"
+          : "border-border hover:border-input",
       )}
     >
       <div className="flex items-start gap-3">
-        <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-700">
+        <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-accent text-xs font-semibold text-muted-foreground">
           {authorAvatar}
         </div>
         <div className="min-w-0 flex-1">
@@ -312,7 +312,7 @@ const FeedCard = memo(function FeedCard({
             {item.context_href ? (
               <Link
                 href={item.context_href}
-                className="block text-sm font-semibold leading-snug text-slate-900 transition hover:text-slate-950 hover:underline"
+                className="block text-sm font-semibold leading-snug text-foreground transition hover:text-foreground hover:underline"
                 title={item.title}
                 style={{
                   display: "-webkit-box",
@@ -324,11 +324,11 @@ const FeedCard = memo(function FeedCard({
                 {item.title}
               </Link>
             ) : (
-              <p className="text-sm font-semibold leading-snug text-slate-900">
+              <p className="text-sm font-semibold leading-snug text-foreground">
                 {item.title}
               </p>
             )}
-            <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-slate-500">
+            <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground">
               <span
                 className={cn(
                   "rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide",
@@ -340,29 +340,29 @@ const FeedCard = memo(function FeedCard({
               {item.board_href && item.board_name ? (
                 <Link
                   href={item.board_href}
-                  className="font-semibold text-slate-700 hover:text-slate-900 hover:underline"
+                  className="font-semibold text-muted-foreground hover:text-foreground hover:underline"
                 >
                   {item.board_name}
                 </Link>
               ) : item.board_name ? (
-                <span className="font-semibold text-slate-700">
+                <span className="font-semibold text-muted-foreground">
                   {item.board_name}
                 </span>
               ) : null}
               {item.board_name ? (
-                <span className="text-slate-300">·</span>
+                <span className="text-muted-foreground/50">·</span>
               ) : null}
-              <span className="font-medium text-slate-700">
+              <span className="font-medium text-muted-foreground">
                 {item.actor_name}
               </span>
               {item.actor_role ? (
                 <>
-                  <span className="text-slate-300">·</span>
-                  <span className="text-slate-500">{item.actor_role}</span>
+                  <span className="text-muted-foreground/50">·</span>
+                  <span className="text-muted-foreground">{item.actor_role}</span>
                 </>
               ) : null}
-              <span className="text-slate-300">·</span>
-              <span className="text-slate-400">
+              <span className="text-muted-foreground/50">·</span>
+              <span className="text-muted-foreground/70">
                 {formatShortTimestamp(item.created_at)}
               </span>
             </div>
@@ -370,11 +370,11 @@ const FeedCard = memo(function FeedCard({
         </div>
       </div>
       {message ? (
-        <div className="mt-3 select-text cursor-text text-sm leading-relaxed text-slate-900 break-words">
+        <div className="mt-3 select-text cursor-text text-sm leading-relaxed text-foreground break-words">
           <Markdown content={message} variant="basic" />
         </div>
       ) : (
-        <p className="mt-3 text-sm text-slate-500">—</p>
+        <p className="mt-3 text-sm text-muted-foreground">—</p>
       )}
     </div>
   );
@@ -1506,18 +1506,18 @@ export default function ActivityPage() {
           </SignedOut>
           <SignedIn>
             <DashboardSidebar />
-            <main className="flex-1 overflow-y-auto bg-slate-50">
-              <div className="sticky top-0 z-30 border-b border-slate-200 bg-white">
+            <main className="flex-1 overflow-y-auto bg-muted">
+              <div className="sticky top-0 z-30 border-b border-border bg-card">
                 <div className="px-4 py-4 md:px-8 md:py-6">
                   <div className="flex flex-wrap items-center justify-between gap-4">
                     <div>
                       <div className="flex items-center gap-2">
-                        <ActivityIcon className="h-5 w-5 text-slate-600" />
-                        <h1 className="text-2xl font-semibold tracking-tight text-slate-900">
+                        <ActivityIcon className="h-5 w-5 text-muted-foreground" />
+                        <h1 className="text-2xl font-semibold tracking-tight text-foreground">
                           Live feed
                         </h1>
                       </div>
-                      <p className="mt-1 text-sm text-slate-500">
+                      <p className="mt-1 text-sm text-muted-foreground">
                         Realtime task, approval, agent, and board-chat activity
                         across all boards.
                       </p>
diff --git a/frontend/src/app/agents/[agentId]/edit/page.tsx b/frontend/src/app/agents/[agentId]/edit/page.tsx
index e80d035..7abcfe9 100644
--- a/frontend/src/app/agents/[agentId]/edit/page.tsx
+++ b/frontend/src/app/agents/[agentId]/edit/page.tsx
@@ -258,16 +258,16 @@ export default function EditAgentPage() {
     >
       <form
         onSubmit={handleSubmit}
-        className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
+        className="rounded-xl border border-border bg-card p-6 shadow-sm space-y-6"
       >
         <div>
-          <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
             Basic configuration
           </p>
           <div className="mt-4 space-y-6">
             <div className="grid gap-6 md:grid-cols-2">
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-900">
+                <label className="text-sm font-medium text-foreground">
                   Agent name <span className="text-red-500">*</span>
                 </label>
                 <Input
@@ -278,7 +278,7 @@ export default function EditAgentPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-900">
+                <label className="text-sm font-medium text-foreground">
                   Role
                 </label>
                 <Input
@@ -297,10 +297,10 @@ export default function EditAgentPage() {
             <div className="grid gap-6 md:grid-cols-2">
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
-                  <label className="text-sm font-medium text-slate-900">
+                  <label className="text-sm font-medium text-foreground">
                     Board
                     {resolvedIsGatewayMain ? (
-                      <span className="ml-2 text-xs font-normal text-slate-500">
+                      <span className="ml-2 text-xs font-normal text-muted-foreground">
                         optional
                       </span>
                     ) : (
@@ -310,7 +310,7 @@ export default function EditAgentPage() {
                   {resolvedBoardId ? (
                     <button
                       type="button"
-                      className="text-xs font-medium text-slate-600 hover:text-slate-900"
+                      className="text-xs font-medium text-muted-foreground hover:text-foreground"
                       onClick={() => {
                         setBoardId("");
                       }}
@@ -338,19 +338,19 @@ export default function EditAgentPage() {
                   disabled={boards.length === 0}
                 />
                 {resolvedIsGatewayMain ? (
-                  <p className="text-xs text-slate-500">
+                  <p className="text-xs text-muted-foreground">
                     Main agents are not attached to a board. If a board is
                     selected, it is only used to resolve the gateway main
                     session key and will be cleared on save.
                   </p>
                 ) : boards.length === 0 ? (
-                  <p className="text-xs text-slate-500">
+                  <p className="text-xs text-muted-foreground">
                     Create a board before assigning agents.
                   </p>
                 ) : null}
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-900">
+                <label className="text-sm font-medium text-foreground">
                   Emoji
                 </label>
                 <Select
@@ -377,20 +377,20 @@ export default function EditAgentPage() {
               </div>
             </div>
           </div>
-          <div className="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-4">
-            <label className="flex items-start gap-3 text-sm text-slate-700">
+          <div className="mt-6 rounded-xl border border-border bg-muted p-4">
+            <label className="flex items-start gap-3 text-sm text-muted-foreground">
               <input
                 type="checkbox"
-                className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-200"
+                className="mt-1 h-4 w-4 rounded border-input text-primary focus:ring-ring/30"
                 checked={resolvedIsGatewayMain}
                 onChange={(event) => setIsGatewayMain(event.target.checked)}
                 disabled={isLoading}
               />
               <span>
-                <span className="block font-medium text-slate-900">
+                <span className="block font-medium text-foreground">
                   Gateway main agent
                 </span>
-                <span className="block text-xs text-slate-500">
+                <span className="block text-xs text-muted-foreground">
                   Uses the gateway main session key and is not tied to a single
                   board.
                 </span>
@@ -400,12 +400,12 @@ export default function EditAgentPage() {
         </div>
 
         <div>
-          <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
             Personality & behavior
           </p>
           <div className="mt-4">
             <div className="space-y-2">
-              <label className="text-sm font-medium text-slate-900">
+              <label className="text-sm font-medium text-foreground">
                 Communication style
               </label>
               <Input
@@ -423,12 +423,12 @@ export default function EditAgentPage() {
         </div>
 
         <div>
-          <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
             Schedule & notifications
           </p>
           <div className="mt-4">
             <div className="space-y-2">
-              <label className="text-sm font-medium text-slate-900">
+              <label className="text-sm font-medium text-foreground">
                 Interval
               </label>
               <Input
@@ -437,7 +437,7 @@ export default function EditAgentPage() {
                 placeholder="e.g. 10m"
                 disabled={isLoading}
               />
-              <p className="text-xs text-slate-500">
+              <p className="text-xs text-muted-foreground">
                 Set how often this agent runs HEARTBEAT.md.
               </p>
             </div>
@@ -445,7 +445,7 @@ export default function EditAgentPage() {
         </div>
 
         {errorMessage ? (
-          <div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
+          <div className="rounded-lg border border-border bg-card p-3 text-sm text-muted-foreground shadow-sm">
             {errorMessage}
           </div>
         ) : null}
diff --git a/frontend/src/app/agents/new/page.tsx b/frontend/src/app/agents/new/page.tsx
index c385540..b54f812 100644
--- a/frontend/src/app/agents/new/page.tsx
+++ b/frontend/src/app/agents/new/page.tsx
@@ -142,16 +142,16 @@ export default function NewAgentPage() {
     >
       <form
         onSubmit={handleSubmit}
-        className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
+        className="rounded-xl border border-border bg-card p-6 shadow-sm space-y-6"
       >
         <div>
-          <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
             Basic configuration
           </p>
           <div className="mt-4 space-y-6">
             <div className="grid gap-6 md:grid-cols-2">
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-900">
+                <label className="text-sm font-medium text-foreground">
                   Agent name <span className="text-red-500">*</span>
                 </label>
                 <Input
@@ -162,7 +162,7 @@ export default function NewAgentPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-900">
+                <label className="text-sm font-medium text-foreground">
                   Role
                 </label>
                 <Input
@@ -180,7 +180,7 @@ export default function NewAgentPage() {
             </div>
             <div className="grid gap-6 md:grid-cols-2">
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-900">
+                <label className="text-sm font-medium text-foreground">
                   Board <span className="text-red-500">*</span>
                 </label>
                 <SearchableSelect
@@ -197,13 +197,13 @@ export default function NewAgentPage() {
                   disabled={boards.length === 0}
                 />
                 {boards.length === 0 ? (
-                  <p className="text-xs text-slate-500">
+                  <p className="text-xs text-muted-foreground">
                     Create a board before adding agents.
                   </p>
                 ) : null}
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-900">
+                <label className="text-sm font-medium text-foreground">
                   Emoji
                 </label>
                 <Select
@@ -233,12 +233,12 @@ export default function NewAgentPage() {
         </div>
 
         <div>
-          <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
             Personality & behavior
           </p>
           <div className="mt-4">
             <div className="space-y-2">
-              <label className="text-sm font-medium text-slate-900">
+              <label className="text-sm font-medium text-foreground">
                 Communication style
               </label>
               <Input
@@ -256,12 +256,12 @@ export default function NewAgentPage() {
         </div>
 
         <div>
-          <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
             Schedule & notifications
           </p>
           <div className="mt-4">
             <div className="space-y-2">
-              <label className="text-sm font-medium text-slate-900">
+              <label className="text-sm font-medium text-foreground">
                 Interval
               </label>
               <Input
@@ -270,7 +270,7 @@ export default function NewAgentPage() {
                 placeholder="e.g. 10m"
                 disabled={isLoading}
               />
-              <p className="text-xs text-slate-500">
+              <p className="text-xs text-muted-foreground">
                 How often this agent runs HEARTBEAT.md (10m, 30m, 2h).
               </p>
             </div>
@@ -278,7 +278,7 @@ export default function NewAgentPage() {
         </div>
 
         {errorMessage ? (
-          <div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
+          <div className="rounded-lg border border-border bg-card p-3 text-sm text-muted-foreground shadow-sm">
             {errorMessage}
           </div>
         ) : null}
diff --git a/frontend/src/app/agents/page.tsx b/frontend/src/app/agents/page.tsx
index fdffc91..7c7ad7e 100644
--- a/frontend/src/app/agents/page.tsx
+++ b/frontend/src/app/agents/page.tsx
@@ -142,7 +142,7 @@ export default function AgentsPage() {
         adminOnlyMessage="Only organization owners and admins can access agents."
         stickyHeader
       >
-        <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
           <AgentsTable
             agents={agents}
             boards={boards}
diff --git a/frontend/src/app/approvals/page.tsx b/frontend/src/app/approvals/page.tsx
index fe03486..6117740 100644
--- a/frontend/src/app/approvals/page.tsx
+++ b/frontend/src/app/approvals/page.tsx
@@ -166,7 +166,7 @@ function GlobalApprovalsInner() {
   }, [errorText, warnings]);
 
   return (
-    <main className="flex-1 overflow-y-auto bg-gradient-to-br from-slate-50 to-slate-100">
+    <main className="flex-1 overflow-y-auto bg-background">
       <div className="p-4 md:p-6">
         <div className="h-[calc(100vh-160px)] min-h-[300px] sm:min-h-[520px]">
           <BoardApprovalsPanel
diff --git a/frontend/src/app/board-groups/[groupId]/edit/page.tsx b/frontend/src/app/board-groups/[groupId]/edit/page.tsx
index 375b0cd..6087702 100644
--- a/frontend/src/app/board-groups/[groupId]/edit/page.tsx
+++ b/frontend/src/app/board-groups/[groupId]/edit/page.tsx
@@ -288,7 +288,7 @@ export default function EditBoardGroupPage() {
     >
       <form
         onSubmit={handleSubmit}
-        className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
+        className="space-y-6 rounded-xl border border-border bg-card p-6 shadow-sm"
       >
         {assignFailedCount && Number.isFinite(assignFailedCount) ? (
           <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 shadow-sm">
@@ -298,7 +298,7 @@ export default function EditBoardGroupPage() {
         ) : null}
         <div className="grid gap-6 md:grid-cols-2">
           <div className="space-y-2">
-            <label className="text-sm font-medium text-slate-900">
+            <label className="text-sm font-medium text-foreground">
               Group name <span className="text-red-500">*</span>
             </label>
             <Input
@@ -311,7 +311,7 @@ export default function EditBoardGroupPage() {
         </div>
 
         <div className="space-y-2">
-          <label className="text-sm font-medium text-slate-900">
+          <label className="text-sm font-medium text-foreground">
             Description
           </label>
           <Textarea
@@ -323,16 +323,16 @@ export default function EditBoardGroupPage() {
           />
         </div>
 
-        <div className="space-y-2 border-t border-slate-100 pt-6">
+        <div className="space-y-2 border-t border-border pt-6">
           <div className="flex flex-wrap items-center justify-between gap-2">
             <div>
-              <p className="text-sm font-medium text-slate-900">Boards</p>
-              <p className="mt-1 text-xs text-slate-500">
+              <p className="text-sm font-medium text-foreground">Boards</p>
+              <p className="mt-1 text-xs text-muted-foreground">
                 Assign boards to this group to share context across related
                 work.
               </p>
             </div>
-            <span className="text-xs text-slate-500">
+            <span className="text-xs text-muted-foreground">
               {selectedBoardIds.size} selected
             </span>
           </div>
@@ -344,9 +344,9 @@ export default function EditBoardGroupPage() {
             disabled={isLoading || !baseGroup}
           />
 
-          <div className="max-h-64 overflow-auto rounded-xl border border-slate-200 bg-slate-50/40">
+          <div className="max-h-64 overflow-auto rounded-xl border border-border bg-muted/40">
             {boardsLoading && boards.length === 0 ? (
-              <div className="px-4 py-6 text-sm text-slate-500">
+              <div className="px-4 py-6 text-sm text-muted-foreground">
                 Loading boards…
               </div>
             ) : boardsError ? (
@@ -354,7 +354,7 @@ export default function EditBoardGroupPage() {
                 {boardsError.message}
               </div>
             ) : boards.length === 0 ? (
-              <div className="px-4 py-6 text-sm text-slate-500">
+              <div className="px-4 py-6 text-sm text-muted-foreground">
                 No boards found.
               </div>
             ) : (
@@ -378,7 +378,7 @@ export default function EditBoardGroupPage() {
                         <label className="flex cursor-pointer items-start gap-3">
                           <input
                             type="checkbox"
-                            className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600"
+                            className="mt-1 h-4 w-4 rounded border-input text-primary"
                             checked={checked}
                             onChange={() => {
                               setSelectedBoardIds((prev) => {
@@ -394,11 +394,11 @@ export default function EditBoardGroupPage() {
                             disabled={isLoading || !baseGroup}
                           />
                           <div className="min-w-0">
-                            <p className="truncate text-sm font-medium text-slate-900">
+                            <p className="truncate text-sm font-medium text-foreground">
                               {board.name}
                             </p>
-                            <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
-                              <span className="font-mono text-[11px] text-slate-400">
+                            <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                              <span className="font-mono text-[11px] text-muted-foreground/70">
                                 {board.id}
                               </span>
                               {isAlreadyGrouped ? (
@@ -420,7 +420,7 @@ export default function EditBoardGroupPage() {
             <p className="text-sm text-rose-700">{assignmentsError}</p>
           ) : null}
           {assignmentsResult ? (
-            <p className="text-sm text-slate-700">
+            <p className="text-sm text-muted-foreground">
               Updated {assignmentsResult.updated} board
               {assignmentsResult.updated === 1 ? "" : "s"}, failed{" "}
               {assignmentsResult.failed}.
diff --git a/frontend/src/app/board-groups/[groupId]/page.tsx b/frontend/src/app/board-groups/[groupId]/page.tsx
index 7f52d24..bb47429 100644
--- a/frontend/src/app/board-groups/[groupId]/page.tsx
+++ b/frontend/src/app/board-groups/[groupId]/page.tsx
@@ -78,9 +78,9 @@ const statusTone = (value?: string | null) => {
     case "review":
       return "bg-amber-50 text-amber-800 border-amber-200";
     case "done":
-      return "bg-slate-50 text-slate-600 border-slate-200";
+      return "bg-muted text-muted-foreground border-border";
     default:
-      return "bg-blue-50 text-blue-700 border-blue-200";
+      return "bg-primary/10 text-primary border-primary/30";
   }
 };
 
@@ -89,7 +89,7 @@ const priorityTone = (value?: string | null) => {
     case "high":
       return "bg-rose-50 text-rose-700 border-rose-200";
     case "low":
-      return "bg-slate-50 text-slate-600 border-slate-200";
+      return "bg-muted text-muted-foreground border-border";
     default:
       return "bg-indigo-50 text-indigo-700 border-indigo-200";
   }
@@ -112,24 +112,24 @@ const canWriteGroupBoards = (
 
 function GroupChatMessageCard({ message }: { message: BoardGroupMemoryRead }) {
   return (
-    <div className="rounded-2xl border border-slate-200 bg-slate-50/60 p-4">
+    <div className="rounded-2xl border border-border bg-muted/60 p-4">
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <p className="text-sm font-semibold text-slate-900">
+        <p className="text-sm font-semibold text-foreground">
           {message.source ?? "User"}
         </p>
-        <span className="text-xs text-slate-400">
+        <span className="text-xs text-muted-foreground/70">
           {formatTimestamp(message.created_at)}
         </span>
       </div>
-      <div className="mt-2 select-text cursor-text text-sm leading-relaxed text-slate-900 break-words">
+      <div className="mt-2 select-text cursor-text text-sm leading-relaxed text-foreground break-words">
         <Markdown content={message.content} variant="basic" />
       </div>
       {message.tags?.length ? (
-        <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-slate-600">
+        <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-muted-foreground">
           {message.tags.map((tag) => (
             <span
               key={tag}
-              className="rounded-full border border-slate-200 bg-white px-2 py-0.5"
+              className="rounded-full border border-border bg-card px-2 py-0.5"
             >
               {tag}
             </span>
@@ -749,23 +749,23 @@ export default function BoardGroupDetailPage() {
       </SignedOut>
       <SignedIn>
         <DashboardSidebar />
-        <main className="flex-1 overflow-y-auto bg-slate-50">
-          <div className="sticky top-0 z-30 border-b border-slate-200 bg-white shadow-sm">
+        <main className="flex-1 overflow-y-auto bg-muted">
+          <div className="sticky top-0 z-30 border-b border-border bg-card shadow-sm">
             <div className="px-4 py-4 md:px-8 md:py-6">
               <div className="flex flex-wrap items-start justify-between gap-4">
                 <div className="min-w-0">
-                  <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                  <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                     Board group
                   </p>
-                  <h1 className="mt-2 text-2xl font-semibold tracking-tight text-slate-900">
+                  <h1 className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
                     {group?.name ?? "Group"}
                   </h1>
                   {group?.description ? (
-                    <p className="mt-2 max-w-2xl text-sm text-slate-600">
+                    <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
                       {group.description}
                     </p>
                   ) : (
-                    <p className="mt-2 text-sm text-slate-400">
+                    <p className="mt-2 text-sm text-muted-foreground/70">
                       No description
                     </p>
                   )}
@@ -824,18 +824,18 @@ export default function BoardGroupDetailPage() {
               </div>
 
               <div className="mt-5 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
-                <label className="inline-flex items-center gap-2 text-sm text-slate-700">
+                <label className="inline-flex items-center gap-2 text-sm text-muted-foreground">
                   <input
                     type="checkbox"
-                    className="h-4 w-4 rounded border-slate-300 text-blue-600"
+                    className="h-4 w-4 rounded border-input text-primary"
                     checked={includeDone}
                     onChange={(event) => setIncludeDone(event.target.checked)}
                   />
                   Include done
                 </label>
-                <div className="flex items-center gap-2 text-sm text-slate-700">
-                  <span className="text-slate-500">Top tasks per board</span>
-                  <div className="flex items-center gap-1 rounded-lg border border-slate-200 bg-white p-1">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <span className="text-muted-foreground">Top tasks per board</span>
+                  <div className="flex items-center gap-1 rounded-lg border border-border bg-card p-1">
                     {[0, 3, 5, 10].map((value) => (
                       <button
                         key={value}
@@ -843,8 +843,8 @@ export default function BoardGroupDetailPage() {
                         className={cn(
                           "rounded-md px-2.5 py-1 text-xs font-semibold transition-colors",
                           perBoardLimit === value
-                            ? "bg-slate-900 text-white"
-                            : "text-slate-600 hover:bg-slate-100 hover:text-slate-900",
+                            ? "bg-foreground text-background"
+                            : "text-muted-foreground hover:bg-accent hover:text-foreground",
                         )}
                         onClick={() => setPerBoardLimit(value)}
                       >
@@ -854,9 +854,9 @@ export default function BoardGroupDetailPage() {
                   </div>
                 </div>
 
-                <div className="flex flex-wrap items-center gap-2 text-sm text-slate-700">
-                  <span className="text-slate-500">Agent pace</span>
-                  <div className="flex flex-wrap items-center gap-1 rounded-lg border border-slate-200 bg-white p-1">
+                <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+                  <span className="text-muted-foreground">Agent pace</span>
+                  <div className="flex flex-wrap items-center gap-1 rounded-lg border border-border bg-card p-1">
                     {HEARTBEAT_PRESETS.map((preset) => {
                       const value = `${preset.amount}${preset.unit}`;
                       return (
@@ -866,8 +866,8 @@ export default function BoardGroupDetailPage() {
                           className={cn(
                             "rounded-md px-2.5 py-1 text-xs font-semibold transition-colors",
                             heartbeatEvery === value
-                              ? "bg-slate-900 text-white"
-                              : "text-slate-600 hover:bg-slate-100 hover:text-slate-900",
+                              ? "bg-foreground text-background"
+                              : "text-muted-foreground hover:bg-accent hover:text-foreground",
                             !canManageHeartbeat &&
                               "opacity-50 cursor-not-allowed",
                           )}
@@ -886,9 +886,9 @@ export default function BoardGroupDetailPage() {
                     value={heartbeatAmount}
                     onChange={(event) => setHeartbeatAmount(event.target.value)}
                     className={cn(
-                      "h-8 w-20 rounded-md border bg-white px-2 text-xs text-slate-900 shadow-sm",
+                      "h-8 w-20 rounded-md border bg-card px-2 text-xs text-foreground shadow-sm",
                       heartbeatEvery
-                        ? "border-slate-200"
+                        ? "border-border"
                         : "border-rose-300 focus:border-rose-400 focus:ring-2 focus:ring-rose-100",
                       !canManageHeartbeat && "opacity-60 cursor-not-allowed",
                     )}
@@ -921,10 +921,10 @@ export default function BoardGroupDetailPage() {
                       <SelectItem value="d">day</SelectItem>
                     </SelectContent>
                   </Select>
-                  <label className="inline-flex items-center gap-2 text-xs text-slate-700">
+                  <label className="inline-flex items-center gap-2 text-xs text-muted-foreground">
                     <input
                       type="checkbox"
-                      className="h-4 w-4 rounded border-slate-300 text-blue-600"
+                      className="h-4 w-4 rounded border-input text-primary"
                       checked={includeBoardLeads}
                       onChange={(event) =>
                         setIncludeBoardLeads(event.target.checked)
@@ -952,7 +952,7 @@ export default function BoardGroupDetailPage() {
                   </Button>
                 </div>
                 {!canManageHeartbeat ? (
-                  <p className="text-xs text-slate-500">
+                  <p className="text-xs text-muted-foreground">
                     Read-only access. You cannot change agent pace for this
                     group.
                   </p>
@@ -969,11 +969,11 @@ export default function BoardGroupDetailPage() {
                 </div>
               ) : null}
               {heartbeatApplyResult ? (
-                <div className="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm">
-                  <p className="font-semibold text-slate-900">
+                <div className="rounded-xl border border-border bg-card p-4 text-sm text-muted-foreground shadow-sm">
+                  <p className="font-semibold text-foreground">
                     Heartbeat applied
                   </p>
-                  <p className="mt-1 text-slate-600">
+                  <p className="mt-1 text-muted-foreground">
                     Updated {heartbeatApplyResult.updated_agent_ids.length}{" "}
                     agents, failed{" "}
                     {heartbeatApplyResult.failed_agent_ids.length}.
@@ -982,7 +982,7 @@ export default function BoardGroupDetailPage() {
               ) : null}
 
               {snapshotQuery.isLoading ? (
-                <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-600 shadow-sm">
+                <div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
                   Loading group snapshot…
                 </div>
               ) : snapshotQuery.error ? (
@@ -990,7 +990,7 @@ export default function BoardGroupDetailPage() {
                   {snapshotQuery.error.message}
                 </div>
               ) : boards.length === 0 ? (
-                <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-600 shadow-sm">
+                <div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
                   No boards in this group yet. Assign boards from the board
                   settings page.
                 </div>
@@ -999,9 +999,9 @@ export default function BoardGroupDetailPage() {
                   {boards.map((item) => (
                     <div
                       key={item.board.id}
-                      className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm"
+                      className="overflow-hidden rounded-xl border border-border bg-card shadow-sm"
                     >
-                      <div className="border-b border-slate-200 px-6 py-4">
+                      <div className="border-b border-border px-6 py-4">
                         <div className="flex items-start justify-between gap-4">
                           <div className="min-w-0">
                             <Link
@@ -1009,17 +1009,17 @@ export default function BoardGroupDetailPage() {
                               className="group inline-flex items-center gap-2"
                               title="Open board"
                             >
-                              <p className="truncate text-sm font-semibold text-slate-900 group-hover:text-blue-600">
+                              <p className="truncate text-sm font-semibold text-foreground group-hover:text-primary">
                                 {item.board.name}
                               </p>
-                              <ArrowUpRight className="h-4 w-4 text-slate-400 group-hover:text-blue-600" />
+                              <ArrowUpRight className="h-4 w-4 text-muted-foreground/70 group-hover:text-primary" />
                             </Link>
-                            <p className="mt-1 text-xs text-slate-500">
+                            <p className="mt-1 text-xs text-muted-foreground">
                               Updated {formatTimestamp(item.board.updated_at)}
                             </p>
                           </div>
                           <div className="flex flex-wrap items-center justify-end gap-2 text-xs">
-                            <span className="rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-slate-700">
+                            <span className="rounded-full border border-border bg-muted px-2 py-0.5 text-muted-foreground">
                               Inbox {safeCount(item, "inbox")}
                             </span>
                             <span className="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-emerald-800">
@@ -1042,7 +1042,7 @@ export default function BoardGroupDetailPage() {
                                     pathname: `/boards/${item.board.id}`,
                                     query: { taskId: task.id },
                                   }}
-                                  className="block rounded-lg border border-slate-200 bg-slate-50/40 p-3 transition hover:border-blue-200 hover:bg-blue-50/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                                  className="block rounded-lg border border-border bg-muted/40 p-3 transition hover:border-primary/30 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                                   title="Open task on board"
                                 >
                                   <div className="flex flex-wrap items-center justify-between gap-2">
@@ -1063,22 +1063,22 @@ export default function BoardGroupDetailPage() {
                                       >
                                         {task.priority}
                                       </span>
-                                      <p className="truncate text-sm font-medium text-slate-900">
+                                      <p className="truncate text-sm font-medium text-foreground">
                                         {task.title}
                                       </p>
                                     </div>
-                                    <p className="text-xs text-slate-500">
+                                    <p className="text-xs text-muted-foreground">
                                       {formatTimestamp(task.updated_at)}
                                     </p>
                                   </div>
-                                  <div className="mt-2 flex flex-wrap items-center justify-between gap-2 text-xs text-slate-600">
+                                  <div className="mt-2 flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground">
                                     <p className="truncate">
                                       Assignee:{" "}
-                                      <span className="font-medium text-slate-900">
+                                      <span className="font-medium text-foreground">
                                         {task.assignee ?? "Unassigned"}
                                       </span>
                                     </p>
-                                    <p className="font-mono text-[11px] text-slate-400">
+                                    <p className="font-mono text-[11px] text-muted-foreground/70">
                                       {task.id}
                                     </p>
                                   </div>
@@ -1087,7 +1087,7 @@ export default function BoardGroupDetailPage() {
                             ))}
                           </ul>
                         ) : (
-                          <p className="text-sm text-slate-500">
+                          <p className="text-sm text-muted-foreground">
                             No tasks in this snapshot.
                           </p>
                         )}
@@ -1102,7 +1102,7 @@ export default function BoardGroupDetailPage() {
       </SignedIn>
       {isChatOpen || isNotesOpen ? (
         <div
-          className="fixed inset-0 z-40 bg-slate-900/20"
+          className="fixed inset-0 z-40 bg-foreground/20"
           onClick={() => {
             setIsChatOpen(false);
             setChatError(null);
@@ -1113,17 +1113,17 @@ export default function BoardGroupDetailPage() {
       ) : null}
       <aside
         className={cn(
-          "fixed right-0 top-0 z-50 h-full w-[560px] max-w-[96vw] transform border-l border-slate-200 bg-white shadow-2xl transition-transform",
+          "fixed right-0 top-0 z-50 h-full w-[560px] max-w-[96vw] transform border-l border-border bg-card shadow-2xl transition-transform",
           isChatOpen ? "transform-none" : "translate-x-full",
         )}
       >
         <div className="flex h-full flex-col">
-          <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4">
+          <div className="flex items-center justify-between border-b border-border px-6 py-4">
             <div className="min-w-0">
-              <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Group chat
               </p>
-              <p className="mt-1 truncate text-sm font-medium text-slate-900">
+              <p className="mt-1 truncate text-sm font-medium text-foreground">
                 Shared across linked boards. Tag @lead, @name, or @all.
               </p>
             </div>
@@ -1133,7 +1133,7 @@ export default function BoardGroupDetailPage() {
                 setIsChatOpen(false);
                 setChatError(null);
               }}
-              className="rounded-lg border border-slate-200 p-2 text-slate-500 transition hover:bg-slate-50"
+              className="rounded-lg border border-border p-2 text-muted-foreground transition hover:bg-muted"
               aria-label="Close group chat"
             >
               <X className="h-4 w-4" />
@@ -1141,24 +1141,24 @@ export default function BoardGroupDetailPage() {
           </div>
           <div className="flex flex-1 flex-col overflow-hidden px-6 py-4">
             <div className="flex flex-wrap items-center justify-between gap-3 pb-3">
-              <label className="inline-flex items-center gap-2 text-sm text-slate-700">
+              <label className="inline-flex items-center gap-2 text-sm text-muted-foreground">
                 <input
                   type="checkbox"
-                  className="h-4 w-4 rounded border-slate-300 text-blue-600"
+                  className="h-4 w-4 rounded border-input text-primary"
                   checked={chatBroadcast}
                   onChange={(event) => setChatBroadcast(event.target.checked)}
                   disabled={!canWriteGroup}
                 />
                 Broadcast
               </label>
-              <p className="text-xs text-slate-500">
+              <p className="text-xs text-muted-foreground">
                 {chatBroadcast
                   ? "Notifies every agent in the group."
                   : "Notifies leads + mentions."}
               </p>
             </div>
 
-            <div className="flex-1 space-y-4 overflow-y-auto rounded-2xl border border-slate-200 bg-white p-4">
+            <div className="flex-1 space-y-4 overflow-y-auto rounded-2xl border border-border bg-card p-4">
               {chatHistoryQuery.error ? (
                 <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                   {chatHistoryQuery.error.message}
@@ -1170,9 +1170,9 @@ export default function BoardGroupDetailPage() {
                 </div>
               ) : null}
               {chatHistoryQuery.isLoading && chatMessages.length === 0 ? (
-                <p className="text-sm text-slate-500">Loading…</p>
+                <p className="text-sm text-muted-foreground">Loading…</p>
               ) : chatMessages.length === 0 ? (
-                <p className="text-sm text-slate-500">
+                <p className="text-sm text-muted-foreground">
                   No messages yet. Start the conversation with a broadcast or a
                   mention.
                 </p>
@@ -1200,17 +1200,17 @@ export default function BoardGroupDetailPage() {
       </aside>
       <aside
         className={cn(
-          "fixed right-0 top-0 z-50 h-full w-[560px] max-w-[96vw] transform border-l border-slate-200 bg-white shadow-2xl transition-transform",
+          "fixed right-0 top-0 z-50 h-full w-[560px] max-w-[96vw] transform border-l border-border bg-card shadow-2xl transition-transform",
           isNotesOpen ? "transform-none" : "translate-x-full",
         )}
       >
         <div className="flex h-full flex-col">
-          <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4">
+          <div className="flex items-center justify-between border-b border-border px-6 py-4">
             <div className="min-w-0">
-              <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Group notes
               </p>
-              <p className="mt-1 truncate text-sm font-medium text-slate-900">
+              <p className="mt-1 truncate text-sm font-medium text-foreground">
                 Shared across linked boards. Tag @lead, @name, or @all.
               </p>
             </div>
@@ -1220,7 +1220,7 @@ export default function BoardGroupDetailPage() {
                 setIsNotesOpen(false);
                 setNoteSendError(null);
               }}
-              className="rounded-lg border border-slate-200 p-2 text-slate-500 transition hover:bg-slate-50"
+              className="rounded-lg border border-border p-2 text-muted-foreground transition hover:bg-muted"
               aria-label="Close group notes"
             >
               <X className="h-4 w-4" />
@@ -1228,24 +1228,24 @@ export default function BoardGroupDetailPage() {
           </div>
           <div className="flex flex-1 flex-col overflow-hidden px-6 py-4">
             <div className="flex flex-wrap items-center justify-between gap-3 pb-3">
-              <label className="inline-flex items-center gap-2 text-sm text-slate-700">
+              <label className="inline-flex items-center gap-2 text-sm text-muted-foreground">
                 <input
                   type="checkbox"
-                  className="h-4 w-4 rounded border-slate-300 text-blue-600"
+                  className="h-4 w-4 rounded border-input text-primary"
                   checked={notesBroadcast}
                   onChange={(event) => setNotesBroadcast(event.target.checked)}
                   disabled={!canWriteGroup}
                 />
                 Broadcast
               </label>
-              <p className="text-xs text-slate-500">
+              <p className="text-xs text-muted-foreground">
                 {notesBroadcast
                   ? "Notifies every agent in the group."
                   : "Notifies leads + mentions."}
               </p>
             </div>
 
-            <div className="flex-1 space-y-4 overflow-y-auto rounded-2xl border border-slate-200 bg-white p-4">
+            <div className="flex-1 space-y-4 overflow-y-auto rounded-2xl border border-border bg-card p-4">
               {notesHistoryQuery.error ? (
                 <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                   {notesHistoryQuery.error.message}
@@ -1257,9 +1257,9 @@ export default function BoardGroupDetailPage() {
                 </div>
               ) : null}
               {notesHistoryQuery.isLoading && notesMessages.length === 0 ? (
-                <p className="text-sm text-slate-500">Loading…</p>
+                <p className="text-sm text-muted-foreground">Loading…</p>
               ) : notesMessages.length === 0 ? (
-                <p className="text-sm text-slate-500">
+                <p className="text-sm text-muted-foreground">
                   No notes yet. Post a note or a broadcast to share context
                   across boards.
                 </p>
diff --git a/frontend/src/app/board-groups/new/page.tsx b/frontend/src/app/board-groups/new/page.tsx
index 7fc7ebf..a46e487 100644
--- a/frontend/src/app/board-groups/new/page.tsx
+++ b/frontend/src/app/board-groups/new/page.tsx
@@ -133,11 +133,11 @@ export default function NewBoardGroupPage() {
     >
       <form
         onSubmit={handleSubmit}
-        className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
+        className="space-y-6 rounded-xl border border-border bg-card p-6 shadow-sm"
       >
         <div className="grid gap-6 md:grid-cols-2">
           <div className="space-y-2">
-            <label className="text-sm font-medium text-slate-900">
+            <label className="text-sm font-medium text-foreground">
               Group name <span className="text-red-500">*</span>
             </label>
             <Input
@@ -150,7 +150,7 @@ export default function NewBoardGroupPage() {
         </div>
 
         <div className="space-y-2">
-          <label className="text-sm font-medium text-slate-900">
+          <label className="text-sm font-medium text-foreground">
             Description
           </label>
           <Textarea
@@ -164,8 +164,8 @@ export default function NewBoardGroupPage() {
 
         <div className="space-y-2">
           <div className="flex flex-wrap items-center justify-between gap-2">
-            <label className="text-sm font-medium text-slate-900">Boards</label>
-            <span className="text-xs text-slate-500">
+            <label className="text-sm font-medium text-foreground">Boards</label>
+            <span className="text-xs text-muted-foreground">
               {selectedBoardIds.size} selected
             </span>
           </div>
@@ -175,9 +175,9 @@ export default function NewBoardGroupPage() {
             placeholder="Search boards..."
             disabled={isCreating}
           />
-          <div className="max-h-64 overflow-auto rounded-xl border border-slate-200 bg-slate-50/40">
+          <div className="max-h-64 overflow-auto rounded-xl border border-border bg-muted/40">
             {boardsQuery.isLoading ? (
-              <div className="px-4 py-6 text-sm text-slate-500">
+              <div className="px-4 py-6 text-sm text-muted-foreground">
                 Loading boards…
               </div>
             ) : boardsQuery.error ? (
@@ -185,7 +185,7 @@ export default function NewBoardGroupPage() {
                 {boardsQuery.error.message}
               </div>
             ) : boards.length === 0 ? (
-              <div className="px-4 py-6 text-sm text-slate-500">
+              <div className="px-4 py-6 text-sm text-muted-foreground">
                 No boards found.
               </div>
             ) : (
@@ -207,7 +207,7 @@ export default function NewBoardGroupPage() {
                         <label className="flex cursor-pointer items-start gap-3">
                           <input
                             type="checkbox"
-                            className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600"
+                            className="mt-1 h-4 w-4 rounded border-input text-primary"
                             checked={checked}
                             onChange={() => {
                               setSelectedBoardIds((prev) => {
@@ -223,11 +223,11 @@ export default function NewBoardGroupPage() {
                             disabled={isCreating}
                           />
                           <div className="min-w-0">
-                            <p className="truncate text-sm font-medium text-slate-900">
+                            <p className="truncate text-sm font-medium text-foreground">
                               {board.name}
                             </p>
-                            <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
-                              <span className="font-mono text-[11px] text-slate-400">
+                            <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                              <span className="font-mono text-[11px] text-muted-foreground/70">
                                 {board.id}
                               </span>
                               {isAlreadyGrouped ? (
@@ -244,7 +244,7 @@ export default function NewBoardGroupPage() {
               </ul>
             )}
           </div>
-          <p className="text-xs text-slate-500">
+          <p className="text-xs text-muted-foreground">
             Optional. Selected boards will be assigned to this group after
             creation. You can change membership later in group edit or board
             settings.
@@ -267,11 +267,11 @@ export default function NewBoardGroupPage() {
           </Button>
         </div>
 
-        <div className="border-t border-slate-100 pt-4 text-xs text-slate-500">
+        <div className="border-t border-border pt-4 text-xs text-muted-foreground">
           Want to assign boards later? Update each board in{" "}
           <Link
             href="/boards"
-            className="font-medium text-blue-600 hover:text-blue-700"
+            className="font-medium text-primary hover:text-primary"
           >
             Boards
           </Link>{" "}
diff --git a/frontend/src/app/board-groups/page.tsx b/frontend/src/app/board-groups/page.tsx
index c05f893..bec8a9b 100644
--- a/frontend/src/app/board-groups/page.tsx
+++ b/frontend/src/app/board-groups/page.tsx
@@ -102,7 +102,7 @@ export default function BoardGroupsPage() {
         }
         stickyHeader
       >
-        <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
           <BoardGroupsTable
             groups={groups}
             isLoading={groupsQuery.isLoading}
diff --git a/frontend/src/app/boards/[boardId]/TaskCustomFieldsEditor.tsx b/frontend/src/app/boards/[boardId]/TaskCustomFieldsEditor.tsx
index c0e3104..b35ae69 100644
--- a/frontend/src/app/boards/[boardId]/TaskCustomFieldsEditor.tsx
+++ b/frontend/src/app/boards/[boardId]/TaskCustomFieldsEditor.tsx
@@ -38,9 +38,9 @@ export function TaskCustomFieldsEditor({
   emptyMessage = "No custom fields configured for this board.",
 }: TaskCustomFieldsEditorProps) {
   if (isLoading)
-    return <p className="text-xs text-slate-500">{loadingMessage}</p>;
+    return <p className="text-xs text-muted-foreground">{loadingMessage}</p>;
   if (definitions.length === 0) {
-    return <p className="text-xs text-slate-500">{emptyMessage}</p>;
+    return <p className="text-xs text-muted-foreground">{emptyMessage}</p>;
   }
 
   return (
@@ -51,7 +51,7 @@ export function TaskCustomFieldsEditor({
 
         return (
           <div key={definition.id} className="space-y-1">
-            <label className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
               {definition.label || definition.field_key}
               {definition.required === true ? (
                 <span className="ml-1 text-rose-600">*</span>
@@ -145,7 +145,7 @@ export function TaskCustomFieldsEditor({
             )}
 
             {definition.description ? (
-              <p className="text-xs text-slate-500">{definition.description}</p>
+              <p className="text-xs text-muted-foreground">{definition.description}</p>
             ) : null}
           </div>
         );
diff --git a/frontend/src/app/boards/[boardId]/approvals/page.tsx b/frontend/src/app/boards/[boardId]/approvals/page.tsx
index 0a2fb8c..1b3ec1d 100644
--- a/frontend/src/app/boards/[boardId]/approvals/page.tsx
+++ b/frontend/src/app/boards/[boardId]/approvals/page.tsx
@@ -32,7 +32,7 @@ export default function BoardApprovalsPage() {
       </SignedOut>
       <SignedIn>
         <DashboardSidebar />
-        <main className="flex-1 overflow-y-auto bg-gradient-to-br from-slate-50 to-slate-100">
+        <main className="flex-1 overflow-y-auto bg-background">
           <div className="p-4 md:p-6">
             {boardId ? (
               <div className="h-[calc(100vh-160px)] min-h-[300px] sm:min-h-[520px]">
diff --git a/frontend/src/app/boards/[boardId]/custom-field-utils.tsx b/frontend/src/app/boards/[boardId]/custom-field-utils.tsx
index a9ffb26..2e2d02e 100644
--- a/frontend/src/app/boards/[boardId]/custom-field-utils.tsx
+++ b/frontend/src/app/boards/[boardId]/custom-field-utils.tsx
@@ -142,7 +142,7 @@ export const formatCustomFieldDetailValue = (
           href={parsedUrl.toString()}
           target="_blank"
           rel="noreferrer"
-          className="inline-flex items-center gap-1 text-blue-700 underline decoration-blue-300 underline-offset-2 hover:text-blue-800"
+          className="inline-flex items-center gap-1 text-primary underline decoration-primary/40 underline-offset-2 hover:text-primary"
         >
           <span className="break-all">{parsedUrl.toString()}</span>
           <ArrowUpRight className="h-3.5 w-3.5 flex-shrink-0" />
@@ -157,7 +157,7 @@ export const formatCustomFieldDetailValue = (
     try {
       const normalized = typeof value === "string" ? JSON.parse(value) : value;
       return (
-        <pre className="whitespace-pre-wrap break-words rounded border border-slate-200 bg-white px-2 py-1 font-mono text-xs leading-relaxed text-slate-800">
+        <pre className="whitespace-pre-wrap break-words rounded border border-border bg-card px-2 py-1 font-mono text-xs leading-relaxed text-foreground">
           {JSON.stringify(normalized, null, 2)}
         </pre>
       );
diff --git a/frontend/src/app/boards/[boardId]/edit/page.tsx b/frontend/src/app/boards/[boardId]/edit/page.tsx
index d7b0fd8..6bc4d5a 100644
--- a/frontend/src/app/boards/[boardId]/edit/page.tsx
+++ b/frontend/src/app/boards/[boardId]/edit/page.tsx
@@ -137,10 +137,10 @@ function WebhookCard({
   return (
     <div
       key={webhook.id}
-      className="space-y-3 rounded-lg border border-slate-200 px-4 py-4"
+      className="space-y-3 rounded-lg border border-border px-4 py-4"
     >
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <span className="text-sm font-semibold text-slate-900">
+        <span className="text-sm font-semibold text-foreground">
           Webhook {webhook.id.slice(0, 8)}
         </span>
         <div className="flex items-center gap-2">
@@ -218,7 +218,7 @@ function WebhookCard({
             disabled={isBusy}
           />
           <div className="space-y-2">
-            <label className="text-sm font-medium text-slate-900">Agent</label>
+            <label className="text-sm font-medium text-foreground">Agent</label>
             <Select
               value={draftAgentValue}
               onValueChange={setDraftAgentValue}
@@ -243,19 +243,19 @@ function WebhookCard({
         </>
       ) : (
         <>
-          <div className="text-sm text-slate-700">
+          <div className="text-sm text-muted-foreground">
             <Markdown
               content={webhook.description || ""}
               variant="description"
             />
           </div>
-          <p className="text-xs text-slate-600">
+          <p className="text-xs text-muted-foreground">
             Recipient: {mappedAgent?.name ?? "Lead agent"}
           </p>
         </>
       )}
-      <div className="rounded-md bg-slate-50 px-3 py-2">
-        <code className="break-all text-xs text-slate-700">
+      <div className="rounded-md bg-muted px-3 py-2">
+        <code className="break-all text-xs text-muted-foreground">
           {webhook.endpoint_url ?? webhook.endpoint_path}
         </code>
       </div>
@@ -770,7 +770,7 @@ export default function EditBoardPage() {
         <div className="space-y-6">
           <form
             onSubmit={handleSubmit}
-            className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
+            className="space-y-6 rounded-xl border border-border bg-card p-6 shadow-sm"
           >
             {resolvedBoardType !== "general" &&
             baseBoard &&
@@ -796,7 +796,7 @@ export default function EditBoardPage() {
             ) : null}
             <div className="grid gap-6 md:grid-cols-2">
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-900">
+                <label className="text-sm font-medium text-foreground">
                   Board name <span className="text-red-500">*</span>
                 </label>
                 <Input
@@ -807,7 +807,7 @@ export default function EditBoardPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-900">
+                <label className="text-sm font-medium text-foreground">
                   Gateway <span className="text-red-500">*</span>
                 </label>
                 <SearchableSelect
@@ -827,7 +827,7 @@ export default function EditBoardPage() {
 
             <div className="grid gap-6 md:grid-cols-2">
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-900">
+                <label className="text-sm font-medium text-foreground">
                   Board type
                 </label>
                 <Select value={resolvedBoardType} onValueChange={setBoardType}>
@@ -840,7 +840,7 @@ export default function EditBoardPage() {
                   </SelectContent>
                 </Select>
                 <div className="space-y-2 pt-1">
-                  <label className="text-sm font-medium text-slate-900">
+                  <label className="text-sm font-medium text-foreground">
                     Max worker agents
                   </label>
                   <Input
@@ -861,7 +861,7 @@ export default function EditBoardPage() {
                 </div>
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-900">
+                <label className="text-sm font-medium text-foreground">
                   Board group
                 </label>
                 <SearchableSelect
@@ -877,14 +877,14 @@ export default function EditBoardPage() {
                   itemClassName="px-4 py-3"
                   disabled={isLoading}
                 />
-                <p className="text-xs text-slate-500">
+                <p className="text-xs text-muted-foreground">
                   Boards in the same group can share cross-board context for
                   agents.
                 </p>
               </div>
               {resolvedBoardType !== "general" ? (
                 <div className="space-y-2">
-                  <label className="text-sm font-medium text-slate-900">
+                  <label className="text-sm font-medium text-foreground">
                     Target date
                   </label>
                   <Input
@@ -898,7 +898,7 @@ export default function EditBoardPage() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium text-slate-900">
+              <label className="text-sm font-medium text-foreground">
                 Description <span className="text-red-500">*</span>
               </label>
               <Textarea
@@ -913,7 +913,7 @@ export default function EditBoardPage() {
             {resolvedBoardType !== "general" ? (
               <>
                 <div className="space-y-2">
-                  <label className="text-sm font-medium text-slate-900">
+                  <label className="text-sm font-medium text-foreground">
                     Objective
                     {isGoalFieldsRequired && (
                       <span className="text-red-500"> *</span>
@@ -929,7 +929,7 @@ export default function EditBoardPage() {
                 </div>
 
                 <div className="space-y-2">
-                  <label className="text-sm font-medium text-slate-900">
+                  <label className="text-sm font-medium text-foreground">
                     Success metrics (JSON)
                     {isGoalFieldsRequired && (
                       <span className="text-red-500"> *</span>
@@ -942,7 +942,7 @@ export default function EditBoardPage() {
                     className="min-h-[140px] font-mono text-xs"
                     disabled={isLoading}
                   />
-                  <p className="text-xs text-slate-500">
+                  <p className="text-xs text-muted-foreground">
                     Add key outcomes so the lead agent can measure progress.
                   </p>
                   {metricsError ? (
@@ -952,16 +952,16 @@ export default function EditBoardPage() {
               </>
             ) : null}
 
-            <section className="space-y-3 border-t border-slate-200 pt-4">
+            <section className="space-y-3 border-t border-border pt-4">
               <div>
-                <h2 className="text-base font-semibold text-slate-900">
+                <h2 className="text-base font-semibold text-foreground">
                   Rules
                 </h2>
-                <p className="text-xs text-slate-600">
+                <p className="text-xs text-muted-foreground">
                   Configure board-level workflow enforcement.
                 </p>
               </div>
-              <div className="flex items-start gap-3 rounded-lg border border-slate-200 px-3 py-3">
+              <div className="flex items-start gap-3 rounded-lg border border-border px-3 py-3">
                 <button
                   type="button"
                   role="switch"
@@ -974,11 +974,11 @@ export default function EditBoardPage() {
                   className={`mt-0.5 inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition ${
                     resolvedRequireApprovalForDone
                       ? "border-emerald-600 bg-emerald-600"
-                      : "border-slate-300 bg-slate-200"
+                      : "border-input bg-border"
                   } ${isLoading ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`}
                 >
                   <span
-                    className={`inline-block h-5 w-5 rounded-full bg-white shadow-sm transition ${
+                    className={`inline-block h-5 w-5 rounded-full bg-card shadow-sm transition ${
                       resolvedRequireApprovalForDone
                         ? "translate-x-5"
                         : "translate-x-0.5"
@@ -986,17 +986,17 @@ export default function EditBoardPage() {
                   />
                 </button>
                 <span className="space-y-1">
-                  <span className="block text-sm font-medium text-slate-900">
+                  <span className="block text-sm font-medium text-foreground">
                     Require approval
                   </span>
-                  <span className="block text-xs text-slate-600">
+                  <span className="block text-xs text-muted-foreground">
                     Require at least one linked approval in{" "}
                     <code>approved</code> state before a task can be marked{" "}
                     <code>done</code>.
                   </span>
                 </span>
               </div>
-              <div className="flex items-start gap-3 rounded-lg border border-slate-200 px-3 py-3">
+              <div className="flex items-start gap-3 rounded-lg border border-border px-3 py-3">
                 <button
                   type="button"
                   role="switch"
@@ -1009,11 +1009,11 @@ export default function EditBoardPage() {
                   className={`mt-0.5 inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition ${
                     resolvedRequireReviewBeforeDone
                       ? "border-emerald-600 bg-emerald-600"
-                      : "border-slate-300 bg-slate-200"
+                      : "border-input bg-border"
                   } ${isLoading ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`}
                 >
                   <span
-                    className={`inline-block h-5 w-5 rounded-full bg-white shadow-sm transition ${
+                    className={`inline-block h-5 w-5 rounded-full bg-card shadow-sm transition ${
                       resolvedRequireReviewBeforeDone
                         ? "translate-x-5"
                         : "translate-x-0.5"
@@ -1021,16 +1021,16 @@ export default function EditBoardPage() {
                   />
                 </button>
                 <span className="space-y-1">
-                  <span className="block text-sm font-medium text-slate-900">
+                  <span className="block text-sm font-medium text-foreground">
                     Require review before done
                   </span>
-                  <span className="block text-xs text-slate-600">
+                  <span className="block text-xs text-muted-foreground">
                     Tasks must move to <code>review</code> before they can be
                     marked <code>done</code>.
                   </span>
                 </span>
               </div>
-              <div className="flex items-start gap-3 rounded-lg border border-slate-200 px-3 py-3">
+              <div className="flex items-start gap-3 rounded-lg border border-border px-3 py-3">
                 <button
                   type="button"
                   role="switch"
@@ -1045,11 +1045,11 @@ export default function EditBoardPage() {
                   className={`mt-0.5 inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition ${
                     resolvedCommentRequiredForReview
                       ? "border-emerald-600 bg-emerald-600"
-                      : "border-slate-300 bg-slate-200"
+                      : "border-input bg-border"
                   } ${isLoading ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`}
                 >
                   <span
-                    className={`inline-block h-5 w-5 rounded-full bg-white shadow-sm transition ${
+                    className={`inline-block h-5 w-5 rounded-full bg-card shadow-sm transition ${
                       resolvedCommentRequiredForReview
                         ? "translate-x-5"
                         : "translate-x-0.5"
@@ -1057,16 +1057,16 @@ export default function EditBoardPage() {
                   />
                 </button>
                 <span className="space-y-1">
-                  <span className="block text-sm font-medium text-slate-900">
+                  <span className="block text-sm font-medium text-foreground">
                     Require comment for review
                   </span>
-                  <span className="block text-xs text-slate-600">
+                  <span className="block text-xs text-muted-foreground">
                     Require a task comment when moving status to{" "}
                     <code>review</code>.
                   </span>
                 </span>
               </div>
-              <div className="flex items-start gap-3 rounded-lg border border-slate-200 px-3 py-3">
+              <div className="flex items-start gap-3 rounded-lg border border-border px-3 py-3">
                 <button
                   type="button"
                   role="switch"
@@ -1081,11 +1081,11 @@ export default function EditBoardPage() {
                   className={`mt-0.5 inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition ${
                     resolvedBlockStatusChangesWithPendingApproval
                       ? "border-emerald-600 bg-emerald-600"
-                      : "border-slate-300 bg-slate-200"
+                      : "border-input bg-border"
                   } ${isLoading ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`}
                 >
                   <span
-                    className={`inline-block h-5 w-5 rounded-full bg-white shadow-sm transition ${
+                    className={`inline-block h-5 w-5 rounded-full bg-card shadow-sm transition ${
                       resolvedBlockStatusChangesWithPendingApproval
                         ? "translate-x-5"
                         : "translate-x-0.5"
@@ -1093,16 +1093,16 @@ export default function EditBoardPage() {
                   />
                 </button>
                 <span className="space-y-1">
-                  <span className="block text-sm font-medium text-slate-900">
+                  <span className="block text-sm font-medium text-foreground">
                     Block status changes with pending approval
                   </span>
-                  <span className="block text-xs text-slate-600">
+                  <span className="block text-xs text-muted-foreground">
                     Prevent status transitions while any linked approval is in{" "}
                     <code>pending</code> state.
                   </span>
                 </span>
               </div>
-              <div className="flex items-start gap-3 rounded-lg border border-slate-200 px-3 py-3">
+              <div className="flex items-start gap-3 rounded-lg border border-border px-3 py-3">
                 <button
                   type="button"
                   role="switch"
@@ -1115,11 +1115,11 @@ export default function EditBoardPage() {
                   className={`mt-0.5 inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition ${
                     resolvedOnlyLeadCanChangeStatus
                       ? "border-emerald-600 bg-emerald-600"
-                      : "border-slate-300 bg-slate-200"
+                      : "border-input bg-border"
                   } ${isLoading ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`}
                 >
                   <span
-                    className={`inline-block h-5 w-5 rounded-full bg-white shadow-sm transition ${
+                    className={`inline-block h-5 w-5 rounded-full bg-card shadow-sm transition ${
                       resolvedOnlyLeadCanChangeStatus
                         ? "translate-x-5"
                         : "translate-x-0.5"
@@ -1127,10 +1127,10 @@ export default function EditBoardPage() {
                   />
                 </button>
                 <span className="space-y-1">
-                  <span className="block text-sm font-medium text-slate-900">
+                  <span className="block text-sm font-medium text-foreground">
                     Only lead can change status
                   </span>
-                  <span className="block text-xs text-slate-600">
+                  <span className="block text-xs text-muted-foreground">
                     Restrict status changes to the board lead.
                   </span>
                 </span>
@@ -1138,7 +1138,7 @@ export default function EditBoardPage() {
             </section>
 
             {gateways.length === 0 ? (
-              <div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+              <div className="rounded-lg border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
                 <p>
                   No gateways available. Create one in Gateways to continue.
                 </p>
@@ -1166,18 +1166,18 @@ export default function EditBoardPage() {
               </Button>
             </div>
 
-            <section className="space-y-4 border-t border-slate-200 pt-4">
+            <section className="space-y-4 border-t border-border pt-4">
               <div>
-                <h2 className="text-base font-semibold text-slate-900">
+                <h2 className="text-base font-semibold text-foreground">
                   Webhooks
                 </h2>
-                <p className="text-xs text-slate-600">
+                <p className="text-xs text-muted-foreground">
                   Add inbound webhook endpoints so the lead agent can react to
                   external events.
                 </p>
               </div>
-              <div className="space-y-3 rounded-lg border border-slate-200 px-4 py-4">
-                <label className="text-sm font-medium text-slate-900">
+              <div className="space-y-3 rounded-lg border border-border px-4 py-4">
+                <label className="text-sm font-medium text-foreground">
                   Lead agent instruction
                 </label>
                 <Textarea
@@ -1190,7 +1190,7 @@ export default function EditBoardPage() {
                   disabled={isLoading || isWebhookBusy}
                 />
                 <div className="space-y-2">
-                  <label className="text-sm font-medium text-slate-900">
+                  <label className="text-sm font-medium text-foreground">
                     Agent
                   </label>
                   <Select
@@ -1237,11 +1237,11 @@ export default function EditBoardPage() {
               ) : null}
 
               {webhooksQuery.isLoading ? (
-                <p className="text-sm text-slate-500">Loading webhooks…</p>
+                <p className="text-sm text-muted-foreground">Loading webhooks…</p>
               ) : null}
 
               {!webhooksQuery.isLoading && webhooks.length === 0 ? (
-                <p className="rounded-lg border border-dashed border-slate-300 px-4 py-3 text-sm text-slate-600">
+                <p className="rounded-lg border border-dashed border-input px-4 py-3 text-sm text-muted-foreground">
                   No webhooks configured yet.
                 </p>
               ) : null}
@@ -1282,7 +1282,7 @@ export default function EditBoardPage() {
             <DialogClose asChild>
               <button
                 type="button"
-                className="sticky top-4 z-10 ml-auto rounded-lg border border-slate-200 bg-[color:var(--surface)] p-2 text-slate-500 transition hover:bg-slate-50"
+                className="sticky top-4 z-10 ml-auto rounded-lg border border-border bg-[color:var(--surface)] p-2 text-muted-foreground transition hover:bg-muted"
                 aria-label="Close onboarding"
               >
                 <X className="h-4 w-4" />
@@ -1295,7 +1295,7 @@ export default function EditBoardPage() {
               onConfirmed={handleOnboardingConfirmed}
             />
           ) : (
-            <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm text-slate-600">
+            <div className="rounded-lg border border-border bg-muted p-3 text-sm text-muted-foreground">
               Unable to start onboarding.
             </div>
           )}
diff --git a/frontend/src/app/boards/[boardId]/page.tsx b/frontend/src/app/boards/[boardId]/page.tsx
index e4dd34c..42017c5 100644
--- a/frontend/src/app/boards/[boardId]/page.tsx
+++ b/frontend/src/app/boards/[boardId]/page.tsx
@@ -443,7 +443,7 @@ const liveFeedEventLabel = (eventType: LiveFeedEventType): string => {
 
 const liveFeedEventPillClass = (eventType: LiveFeedEventType): string => {
   if (eventType === "task.comment") {
-    return "border-blue-200 bg-blue-50 text-blue-700";
+    return "border-primary/30 bg-primary/10 text-primary";
   }
   if (eventType === "task.created") {
     return "border-emerald-200 bg-emerald-50 text-emerald-700";
@@ -464,7 +464,7 @@ const liveFeedEventPillClass = (eventType: LiveFeedEventType): string => {
     return "border-lime-200 bg-lime-50 text-lime-700";
   }
   if (eventType === "agent.offline") {
-    return "border-slate-300 bg-slate-100 text-slate-700";
+    return "border-input bg-accent text-muted-foreground";
   }
   if (eventType === "agent.updated") {
     return "border-indigo-200 bg-indigo-50 text-indigo-700";
@@ -481,7 +481,7 @@ const liveFeedEventPillClass = (eventType: LiveFeedEventType): string => {
   if (eventType === "approval.rejected") {
     return "border-rose-200 bg-rose-50 text-rose-700";
   }
-  return "border-slate-200 bg-slate-100 text-slate-700";
+  return "border-border bg-accent text-muted-foreground";
 };
 
 const normalizeTask = (task: TaskCardRead): Task => ({
@@ -598,22 +598,22 @@ const TaskCommentCard = memo(function TaskCommentCard({
     <div
       id={commentElementId(comment.id)}
       className={cn(
-        "scroll-mt-28 rounded-xl border bg-white p-3 transition",
+        "scroll-mt-28 rounded-xl border bg-card p-3 transition",
         isHighlighted
-          ? "border-blue-300 ring-2 ring-blue-200"
-          : "border-slate-200",
+          ? "border-primary/40 ring-2 ring-primary/20"
+          : "border-border",
       )}
     >
-      <div className="flex items-center justify-between text-xs text-slate-500">
+      <div className="flex items-center justify-between text-xs text-muted-foreground">
         <span>{authorLabel}</span>
         <span>{formatShortTimestamp(comment.created_at)}</span>
       </div>
       {message ? (
-        <div className="mt-2 select-text cursor-text text-sm leading-relaxed text-slate-900 break-words">
+        <div className="mt-2 select-text cursor-text text-sm leading-relaxed text-foreground break-words">
           <Markdown content={message} variant="comment" />
         </div>
       ) : (
-        <p className="mt-2 text-sm text-slate-900">—</p>
+        <p className="mt-2 text-sm text-foreground">—</p>
       )}
     </div>
   );
@@ -630,14 +630,14 @@ const ChatMessageCard = memo(function ChatMessageCard({
 }) {
   const sourceLabel = resolveHumanActorName(message.source, fallbackSource);
   return (
-    <div className="rounded-2xl border border-slate-200 bg-slate-50/60 p-4">
+    <div className="rounded-2xl border border-border bg-muted/60 p-4">
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <p className="text-sm font-semibold text-slate-900">{sourceLabel}</p>
-        <span className="text-xs text-slate-400">
+        <p className="text-sm font-semibold text-foreground">{sourceLabel}</p>
+        <span className="text-xs text-muted-foreground/70">
           {formatShortTimestamp(message.created_at)}
         </span>
       </div>
-      <div className="mt-2 select-text cursor-text text-sm leading-relaxed text-slate-900 break-words">
+      <div className="mt-2 select-text cursor-text text-sm leading-relaxed text-foreground break-words">
         <Markdown content={message.content} variant="basic" />
       </div>
     </div>
@@ -671,12 +671,12 @@ const LiveFeedCard = memo(function LiveFeedCard({
       className={cn(
         "rounded-xl border p-3 transition-colors duration-300",
         isNew
-          ? "border-blue-200 bg-blue-50/70 shadow-sm hover:border-blue-300 motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 motion-safe:slide-in-from-right-2 motion-safe:duration-300"
-          : "border-slate-200 bg-white hover:border-slate-300",
+          ? "border-primary/30 bg-primary/10 shadow-sm hover:border-primary/40 motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 motion-safe:slide-in-from-right-2 motion-safe:duration-300"
+          : "border-border bg-card hover:border-input",
       )}
     >
       <div className="flex items-start gap-3">
-        <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-700">
+        <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-accent text-xs font-semibold text-muted-foreground">
           {authorAvatar}
         </div>
         <div className="min-w-0 flex-1">
@@ -686,9 +686,9 @@ const LiveFeedCard = memo(function LiveFeedCard({
               onClick={onViewTask}
               disabled={!onViewTask}
               className={cn(
-                "text-left text-sm font-semibold leading-snug text-slate-900",
+                "text-left text-sm font-semibold leading-snug text-foreground",
                 onViewTask
-                  ? "cursor-pointer transition hover:text-slate-950 hover:underline"
+                  ? "cursor-pointer transition hover:text-foreground hover:underline"
                   : "cursor-default",
               )}
               title={taskTitle}
@@ -702,7 +702,7 @@ const LiveFeedCard = memo(function LiveFeedCard({
               {taskTitle}
             </button>
           </div>
-          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-slate-500">
+          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground">
             <span
               className={cn(
                 "rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide",
@@ -711,26 +711,26 @@ const LiveFeedCard = memo(function LiveFeedCard({
             >
               {eventLabel}
             </span>
-            <span className="font-medium text-slate-700">{authorName}</span>
+            <span className="font-medium text-muted-foreground">{authorName}</span>
             {authorRole ? (
               <>
-                <span className="text-slate-300">·</span>
-                <span className="text-slate-500">{authorRole}</span>
+                <span className="text-muted-foreground/50">·</span>
+                <span className="text-muted-foreground">{authorRole}</span>
               </>
             ) : null}
-            <span className="text-slate-300">·</span>
-            <span className="text-slate-400">
+            <span className="text-muted-foreground/50">·</span>
+            <span className="text-muted-foreground/70">
               {formatShortTimestamp(item.created_at)}
             </span>
           </div>
         </div>
       </div>
       {message ? (
-        <div className="mt-3 select-text cursor-text text-sm leading-relaxed text-slate-900 break-words">
+        <div className="mt-3 select-text cursor-text text-sm leading-relaxed text-foreground break-words">
           <Markdown content={message} variant="basic" />
         </div>
       ) : (
-        <p className="mt-3 text-sm text-slate-500">—</p>
+        <p className="mt-3 text-sm text-muted-foreground">—</p>
       )}
     </div>
   );
@@ -2938,7 +2938,7 @@ export default function BoardDetailPage() {
       case "done":
         return "bg-emerald-100 text-emerald-700";
       default:
-        return "bg-slate-100 text-slate-600";
+        return "bg-accent text-muted-foreground";
     }
   };
 
@@ -2951,7 +2951,7 @@ export default function BoardDetailPage() {
       case "low":
         return "bg-emerald-100 text-emerald-700";
       default:
-        return "bg-slate-100 text-slate-600";
+        return "bg-accent text-muted-foreground";
     }
   };
 
@@ -3102,18 +3102,18 @@ export default function BoardDetailPage() {
         <DashboardSidebar />
         <main
           className={cn(
-            "flex-1 bg-gradient-to-br from-slate-50 to-slate-100",
+            "flex-1 bg-background",
             isSidePanelOpen ? "overflow-hidden" : "overflow-y-auto",
           )}
         >
-          <div className="sticky top-0 z-30 border-b border-slate-200 bg-white shadow-sm">
+          <div className="sticky top-0 z-30 border-b border-border bg-card shadow-sm">
             <div className="px-4 py-4 md:px-8 md:py-6">
               <div className="flex flex-wrap items-center justify-between gap-4">
                 <div>
-                  <h1 className="mt-2 text-2xl font-semibold text-slate-900 tracking-tight">
+                  <h1 className="mt-2 text-2xl font-semibold text-foreground tracking-tight">
                     {board?.name ?? "Board"}
                   </h1>
-                  <p className="mt-1 text-sm text-slate-500">
+                  <p className="mt-1 text-sm text-muted-foreground">
                     Keep tasks moving through your workflow.
                   </p>
                   {isBoardLeadProvisioning ? (
@@ -3124,13 +3124,13 @@ export default function BoardDetailPage() {
                   ) : null}
                 </div>
                 <div className="flex flex-wrap items-center gap-3">
-                  <div className="flex items-center gap-1 rounded-lg bg-slate-100 p-1">
+                  <div className="flex items-center gap-1 rounded-lg bg-accent p-1">
                     <button
                       className={cn(
                         "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
                         viewMode === "board"
-                          ? "bg-slate-900 text-white"
-                          : "text-slate-600 hover:bg-slate-200 hover:text-slate-900",
+                          ? "bg-foreground text-background"
+                          : "text-muted-foreground hover:bg-border hover:text-foreground",
                       )}
                       onClick={() => setViewMode("board")}
                     >
@@ -3140,8 +3140,8 @@ export default function BoardDetailPage() {
                       className={cn(
                         "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
                         viewMode === "list"
-                          ? "bg-slate-900 text-white"
-                          : "text-slate-600 hover:bg-slate-200 hover:text-slate-900",
+                          ? "bg-foreground text-background"
+                          : "text-muted-foreground hover:bg-border hover:text-foreground",
                       )}
                       onClick={() => setViewMode("list")}
                     >
@@ -3166,7 +3166,7 @@ export default function BoardDetailPage() {
                   >
                     <ShieldCheck className="h-4 w-4" />
                     {pendingApprovals.length > 0 ? (
-                      <span className="absolute -right-1 -top-1 inline-flex min-w-[18px] items-center justify-center rounded-full bg-slate-900 px-1.5 py-0.5 text-[10px] font-semibold text-white">
+                      <span className="absolute -right-1 -top-1 inline-flex min-w-[18px] items-center justify-center rounded-full bg-foreground px-1.5 py-0.5 text-[10px] font-semibold text-background">
                         {pendingApprovals.length}
                       </span>
                     ) : null}
@@ -3231,7 +3231,7 @@ export default function BoardDetailPage() {
                     <button
                       type="button"
                       onClick={() => router.push(`/boards/${boardId}/edit`)}
-                      className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-600 transition hover:border-slate-300 hover:bg-slate-50"
+                      className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border text-muted-foreground transition hover:border-input hover:bg-muted"
                       aria-label="Board settings"
                       title="Board settings"
                     >
@@ -3251,27 +3251,27 @@ export default function BoardDetailPage() {
 
           <div className="relative flex flex-col gap-4 p-4 md:flex-row md:gap-6 md:p-6">
             {isOrgAdmin ? (
-              <aside className="flex w-full flex-col rounded-xl border border-slate-200 bg-white shadow-sm md:h-full md:w-64">
-                <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
+              <aside className="flex w-full flex-col rounded-xl border border-border bg-card shadow-sm md:h-full md:w-64">
+                <div className="flex items-center justify-between border-b border-border px-4 py-3">
                   <div>
-                    <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                    <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                       Agents
                     </p>
-                    <p className="text-xs text-slate-400">
+                    <p className="text-xs text-muted-foreground/70">
                       {sortedAgents.length} total
                     </p>
                   </div>
                   <button
                     type="button"
                     onClick={() => router.push("/agents/new")}
-                    className="rounded-md border border-slate-200 px-2.5 py-1 text-xs font-semibold text-slate-600 transition hover:border-slate-300 hover:bg-slate-50"
+                    className="rounded-md border border-border px-2.5 py-1 text-xs font-semibold text-muted-foreground transition hover:border-input hover:bg-muted"
                   >
                     Add
                   </button>
                 </div>
                 <div className="flex-1 space-y-2 overflow-y-auto p-3">
                   {sortedAgents.length === 0 ? (
-                    <div className="rounded-lg border border-dashed border-slate-200 p-3 text-xs text-slate-500">
+                    <div className="rounded-lg border border-dashed border-border p-3 text-xs text-muted-foreground">
                       No agents assigned yet.
                     </div>
                   ) : (
@@ -3282,26 +3282,26 @@ export default function BoardDetailPage() {
                           key={agent.id}
                           type="button"
                           className={cn(
-                            "flex w-full items-center gap-3 rounded-lg border border-transparent px-2 py-2 text-left transition hover:border-slate-200 hover:bg-slate-50",
+                            "flex w-full items-center gap-3 rounded-lg border border-transparent px-2 py-2 text-left transition hover:border-border hover:bg-muted",
                           )}
                           onClick={() => router.push(`/agents/${agent.id}`)}
                         >
-                          <div className="relative flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-700">
+                          <div className="relative flex h-9 w-9 items-center justify-center rounded-full bg-accent text-xs font-semibold text-muted-foreground">
                             {agentAvatarLabel(agent)}
                             <StatusDot
                               status={agent.status}
                               variant="agent"
                               className={cn(
-                                "absolute -right-0.5 -bottom-0.5 h-2.5 w-2.5 rounded-full border-2 border-white",
+                                "absolute -right-0.5 -bottom-0.5 h-2.5 w-2.5 rounded-full border-2 border-background",
                                 isWorking && "ring-2 ring-emerald-200",
                               )}
                             />
                           </div>
                           <div className="min-w-0 flex-1">
-                            <p className="truncate text-sm font-medium text-slate-900">
+                            <p className="truncate text-sm font-medium text-foreground">
                               {agent.name}
                             </p>
-                            <p className="text-[11px] text-slate-500">
+                            <p className="text-[11px] text-muted-foreground">
                               {agentRoleLabel(agent)}
                             </p>
                           </div>
@@ -3315,13 +3315,13 @@ export default function BoardDetailPage() {
 
             <div className="min-w-0 flex-1 space-y-6">
               {error && (
-                <div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
+                <div className="rounded-lg border border-border bg-card p-3 text-sm text-muted-foreground shadow-sm">
                   {error}
                 </div>
               )}
 
               {isLoading ? (
-                <div className="flex min-h-[50vh] items-center justify-center text-sm text-slate-500">
+                <div className="flex min-h-[50vh] items-center justify-center text-sm text-muted-foreground">
                   Loading {titleLabel}…
                 </div>
               ) : (
@@ -3335,18 +3335,18 @@ export default function BoardDetailPage() {
                       ) : null}
 
                       {groupSnapshot?.group ? (
-                        <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-                          <div className="border-b border-slate-200 px-5 py-4">
+                        <div className="rounded-xl border border-border bg-card shadow-sm">
+                          <div className="border-b border-border px-5 py-4">
                             <div className="flex flex-wrap items-center justify-between gap-3">
                               <div className="min-w-0">
-                                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                                   Related boards
                                 </p>
-                                <p className="mt-1 truncate text-sm font-semibold text-slate-900">
+                                <p className="mt-1 truncate text-sm font-semibold text-foreground">
                                   {groupSnapshot.group.name}
                                 </p>
                                 {groupSnapshot.group.description ? (
-                                  <p className="mt-1 max-w-3xl text-xs text-slate-500 line-clamp-2">
+                                  <p className="mt-1 max-w-3xl text-xs text-muted-foreground line-clamp-2">
                                     {groupSnapshot.group.description}
                                   </p>
                                 ) : null}
@@ -3386,7 +3386,7 @@ export default function BoardDetailPage() {
                                 {groupSnapshot.boards.map((item) => (
                                   <div
                                     key={item.board.id}
-                                    className="rounded-xl border border-slate-200 bg-slate-50/40 p-4"
+                                    className="rounded-xl border border-border bg-muted/40 p-4"
                                   >
                                     <button
                                       type="button"
@@ -3396,28 +3396,28 @@ export default function BoardDetailPage() {
                                       }
                                     >
                                       <div className="min-w-0">
-                                        <p className="truncate text-sm font-semibold text-slate-900 group-hover:text-blue-600">
+                                        <p className="truncate text-sm font-semibold text-foreground group-hover:text-primary">
                                           {item.board.name}
                                         </p>
-                                        <p className="mt-1 text-xs text-slate-500">
+                                        <p className="mt-1 text-xs text-muted-foreground">
                                           Updated{" "}
                                           {formatTaskTimestamp(
                                             item.board.updated_at,
                                           )}
                                         </p>
                                       </div>
-                                      <ArrowUpRight className="mt-0.5 h-4 w-4 flex-shrink-0 text-slate-400 group-hover:text-blue-600" />
+                                      <ArrowUpRight className="mt-0.5 h-4 w-4 flex-shrink-0 text-muted-foreground/70 group-hover:text-primary" />
                                     </button>
 
                                     <div className="mt-3 flex flex-wrap gap-2 text-xs">
-                                      <span className="rounded-full border border-slate-200 bg-white px-2 py-0.5 text-slate-700">
+                                      <span className="rounded-full border border-border bg-card px-2 py-0.5 text-muted-foreground">
                                         Inbox {item.task_counts?.inbox ?? 0}
                                       </span>
-                                      <span className="rounded-full border border-slate-200 bg-white px-2 py-0.5 text-slate-700">
+                                      <span className="rounded-full border border-border bg-card px-2 py-0.5 text-muted-foreground">
                                         In progress{" "}
                                         {item.task_counts?.in_progress ?? 0}
                                       </span>
-                                      <span className="rounded-full border border-slate-200 bg-white px-2 py-0.5 text-slate-700">
+                                      <span className="rounded-full border border-border bg-card px-2 py-0.5 text-muted-foreground">
                                         Review {item.task_counts?.review ?? 0}
                                       </span>
                                     </div>
@@ -3427,7 +3427,7 @@ export default function BoardDetailPage() {
                                         {item.tasks.slice(0, 3).map((task) => (
                                           <li
                                             key={task.id}
-                                            className="rounded-lg border border-slate-200 bg-white p-3"
+                                            className="rounded-lg border border-border bg-card p-3"
                                           >
                                             <div className="flex flex-wrap items-center justify-between gap-2">
                                               <div className="flex min-w-0 items-center gap-2">
@@ -3454,19 +3454,19 @@ export default function BoardDetailPage() {
                                                 >
                                                   {task.priority}
                                                 </span>
-                                                <p className="truncate text-sm font-medium text-slate-900">
+                                                <p className="truncate text-sm font-medium text-foreground">
                                                   {task.title}
                                                 </p>
                                               </div>
-                                              <p className="text-xs text-slate-500">
+                                              <p className="text-xs text-muted-foreground">
                                                 {formatTaskTimestamp(
                                                   task.updated_at,
                                                 )}
                                               </p>
                                             </div>
-                                            <p className="mt-2 truncate text-xs text-slate-600">
+                                            <p className="mt-2 truncate text-xs text-muted-foreground">
                                               Assignee:{" "}
-                                              <span className="font-medium text-slate-900">
+                                              <span className="font-medium text-foreground">
                                                 {task.assignee ?? "Unassigned"}
                                               </span>
                                             </p>
@@ -3477,7 +3477,7 @@ export default function BoardDetailPage() {
                                                   .map((tag) => (
                                                     <span
                                                       key={tag.id}
-                                                      className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-0.5 text-[10px] font-semibold text-slate-700"
+                                                      className="inline-flex items-center gap-1 rounded-full border border-border bg-card px-2 py-0.5 text-[10px] font-semibold text-muted-foreground"
                                                     >
                                                       <span
                                                         className="h-1.5 w-1.5 rounded-full"
@@ -3495,13 +3495,13 @@ export default function BoardDetailPage() {
                                           </li>
                                         ))}
                                         {item.tasks.length > 3 ? (
-                                          <li className="text-xs text-slate-500">
+                                          <li className="text-xs text-muted-foreground">
                                             +{item.tasks.length - 3} more…
                                           </li>
                                         ) : null}
                                       </ul>
                                     ) : (
-                                      <p className="mt-3 text-sm text-slate-500">
+                                      <p className="mt-3 text-sm text-muted-foreground">
                                         No tasks in this snapshot.
                                       </p>
                                     )}
@@ -3509,18 +3509,18 @@ export default function BoardDetailPage() {
                                 ))}
                               </div>
                             ) : (
-                              <p className="text-sm text-slate-500">
+                              <p className="text-sm text-muted-foreground">
                                 No other boards in this group yet.
                               </p>
                             )}
                           </div>
                         </div>
                       ) : groupSnapshot ? (
-                        <div className="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-600 shadow-sm">
-                          <p className="font-semibold text-slate-900">
+                        <div className="rounded-xl border border-border bg-card p-4 text-sm text-muted-foreground shadow-sm">
+                          <p className="font-semibold text-foreground">
                             No board group configured
                           </p>
-                          <p className="mt-1 text-sm text-slate-600">
+                          <p className="mt-1 text-sm text-muted-foreground">
                             Assign this board to a group to give agents
                             visibility into related work.
                           </p>
@@ -3556,14 +3556,14 @@ export default function BoardDetailPage() {
                       readOnly={!canWrite}
                     />
                   ) : (
-                    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-                      <div className="border-b border-slate-200 px-5 py-4">
+                    <div className="rounded-xl border border-border bg-card shadow-sm">
+                      <div className="border-b border-border px-5 py-4">
                         <div className="flex items-center justify-between">
                           <div>
-                            <p className="text-sm font-semibold text-slate-900">
+                            <p className="text-sm font-semibold text-foreground">
                               All tasks
                             </p>
-                            <p className="text-xs text-slate-500">
+                            <p className="text-xs text-muted-foreground">
                               {tasks.length} tasks in this board
                             </p>
                           </div>
@@ -3580,7 +3580,7 @@ export default function BoardDetailPage() {
                       </div>
                       <div className="divide-y divide-slate-100">
                         {tasks.length === 0 ? (
-                          <div className="px-5 py-8 text-sm text-slate-500">
+                          <div className="px-5 py-8 text-sm text-muted-foreground">
                             No tasks yet. Create your first task to get started.
                           </div>
                         ) : (
@@ -3588,15 +3588,15 @@ export default function BoardDetailPage() {
                             <button
                               key={task.id}
                               type="button"
-                              className="w-full px-5 py-4 text-left transition hover:bg-slate-50"
+                              className="w-full px-5 py-4 text-left transition hover:bg-muted"
                               onClick={() => openComments(task)}
                             >
                               <div className="flex flex-wrap items-center justify-between gap-3">
                                 <div className="min-w-0">
-                                  <p className="truncate text-sm font-semibold text-slate-900">
+                                  <p className="truncate text-sm font-semibold text-foreground">
                                     {task.title}
                                   </p>
-                                  <p className="mt-1 text-xs text-slate-500">
+                                  <p className="mt-1 text-xs text-muted-foreground">
                                     {task.description
                                       ? task.description
                                           .toString()
@@ -3605,7 +3605,7 @@ export default function BoardDetailPage() {
                                       : "No description"}
                                   </p>
                                 </div>
-                                <div className="flex flex-wrap items-center gap-3 text-xs text-slate-500">
+                                <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
                                   {task.approvals_pending_count ? (
                                     <span className="inline-flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wide text-amber-700">
                                       <span className="h-1.5 w-1.5 rounded-full bg-amber-500" />
@@ -3634,7 +3634,7 @@ export default function BoardDetailPage() {
                                       {task.tags.slice(0, 2).map((tag) => (
                                         <span
                                           key={tag.id}
-                                          className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-0.5 text-[10px] font-semibold text-slate-700"
+                                          className="inline-flex items-center gap-1 rounded-full border border-border bg-card px-2 py-0.5 text-[10px] font-semibold text-muted-foreground"
                                         >
                                           <span
                                             className="h-1.5 w-1.5 rounded-full"
@@ -3648,16 +3648,16 @@ export default function BoardDetailPage() {
                                         </span>
                                       ))}
                                       {task.tags.length > 2 ? (
-                                        <span className="text-[10px] font-semibold text-slate-500">
+                                        <span className="text-[10px] font-semibold text-muted-foreground">
                                           +{task.tags.length - 2}
                                         </span>
                                       ) : null}
                                     </div>
                                   ) : null}
-                                  <span className="text-xs text-slate-500">
+                                  <span className="text-xs text-muted-foreground">
                                     {task.assignee ?? "Unassigned"}
                                   </span>
-                                  <span className="text-xs text-slate-500">
+                                  <span className="text-xs text-muted-foreground">
                                     {formatTaskTimestamp(
                                       task.updated_at ?? task.created_at,
                                     )}
@@ -3678,7 +3678,7 @@ export default function BoardDetailPage() {
       </SignedIn>
       {isDetailOpen || isChatOpen || isLiveFeedOpen ? (
         <div
-          className="fixed inset-0 z-40 bg-slate-900/20"
+          className="fixed inset-0 z-40 bg-foreground/20"
           onClick={() => {
             if (isChatOpen) {
               closeBoardChat();
@@ -3692,17 +3692,17 @@ export default function BoardDetailPage() {
       ) : null}
       <aside
         className={cn(
-          "fixed right-0 top-0 z-50 h-full w-full max-w-[99vw] transform bg-white shadow-2xl transition-transform md:w-[max(760px,45vw)]",
+          "fixed right-0 top-0 z-50 h-full w-full max-w-[99vw] transform bg-card shadow-2xl transition-transform md:w-[max(760px,45vw)]",
           isDetailOpen ? "transform-none" : "translate-x-full",
         )}
       >
         <div className="flex h-full flex-col">
-          <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3 md:px-6 md:py-4">
+          <div className="flex items-center justify-between border-b border-border px-4 py-3 md:px-6 md:py-4">
             <div>
-              <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Task detail
               </p>
-              <p className="mt-1 text-sm font-medium text-slate-900">
+              <p className="mt-1 text-sm font-medium text-foreground">
                 {selectedTask?.title ?? "Task"}
               </p>
             </div>
@@ -3710,7 +3710,7 @@ export default function BoardDetailPage() {
               <button
                 type="button"
                 onClick={() => setIsEditDialogOpen(true)}
-                className="rounded-lg border border-slate-200 p-2 text-slate-500 transition hover:bg-slate-50"
+                className="rounded-lg border border-border p-2 text-muted-foreground transition hover:bg-muted"
                 disabled={!selectedTask || !canWrite}
                 title={canWrite ? "Edit task" : "Read-only access"}
               >
@@ -3719,7 +3719,7 @@ export default function BoardDetailPage() {
               <button
                 type="button"
                 onClick={closeComments}
-                className="rounded-lg border border-slate-200 p-2 text-slate-500 transition hover:bg-slate-50"
+                className="rounded-lg border border-border p-2 text-muted-foreground transition hover:bg-muted"
               >
                 <X className="h-4 w-4" />
               </button>
@@ -3727,30 +3727,30 @@ export default function BoardDetailPage() {
           </div>
           <div className="flex-1 space-y-6 overflow-y-auto px-6 py-5">
             <div className="space-y-2">
-              <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Description
               </p>
               {selectedTask?.description ? (
-                <div className="prose prose-sm max-w-none text-slate-700">
+                <div className="prose prose-sm max-w-none text-muted-foreground">
                   <Markdown
                     content={selectedTask.description}
                     variant="description"
                   />
                 </div>
               ) : (
-                <p className="text-sm text-slate-500">
+                <p className="text-sm text-muted-foreground">
                   No description provided.
                 </p>
               )}
             </div>
             <div className="space-y-2">
-              <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Custom fields
               </p>
               {customFieldDefinitionsQuery.isLoading ? (
-                <p className="text-sm text-slate-500">Loading custom fields…</p>
+                <p className="text-sm text-muted-foreground">Loading custom fields…</p>
               ) : boardCustomFieldDefinitions.length > 0 ? (
-                <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
+                <div className="rounded-lg border border-border bg-muted p-3">
                   <dl className="space-y-2">
                     {boardCustomFieldDefinitions.map((definition) => {
                       const value =
@@ -3763,13 +3763,13 @@ export default function BoardDetailPage() {
                           key={definition.id}
                           className="grid grid-cols-1 gap-2 sm:grid-cols-[160px_1fr] sm:gap-3"
                         >
-                          <dt className="text-xs font-semibold text-slate-600">
+                          <dt className="text-xs font-semibold text-muted-foreground">
                             {definition.label || definition.field_key}
                             {definition.required === true ? (
                               <span className="ml-1 text-rose-600">*</span>
                             ) : null}
                           </dt>
-                          <dd className="text-xs text-slate-800">
+                          <dd className="text-xs text-foreground">
                             {formatCustomFieldDetailValue(definition, value)}
                           </dd>
                         </div>
@@ -3778,11 +3778,11 @@ export default function BoardDetailPage() {
                   </dl>
                 </div>
               ) : (
-                <p className="text-sm text-slate-500">No custom fields.</p>
+                <p className="text-sm text-muted-foreground">No custom fields.</p>
               )}
             </div>
             <div className="space-y-2">
-              <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Tags
               </p>
               {selectedTask?.tags?.length ? (
@@ -3790,7 +3790,7 @@ export default function BoardDetailPage() {
                   {selectedTask.tags.map((tag) => (
                     <span
                       key={tag.id}
-                      className="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-700"
+                      className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-2.5 py-1 text-xs font-semibold text-muted-foreground"
                     >
                       <span
                         className="h-2 w-2 rounded-full"
@@ -3803,11 +3803,11 @@ export default function BoardDetailPage() {
                   ))}
                 </div>
               ) : (
-                <p className="text-sm text-slate-500">No tags assigned.</p>
+                <p className="text-sm text-muted-foreground">No tags assigned.</p>
               )}
             </div>
             <div className="space-y-2">
-              <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Dependencies
               </p>
               {(() => {
@@ -3850,7 +3850,7 @@ export default function BoardDetailPage() {
             </div>
             <div className="space-y-3">
               <div className="flex items-center justify-between">
-                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                   Approvals
                 </p>
                 <Button
@@ -3862,13 +3862,13 @@ export default function BoardDetailPage() {
                 </Button>
               </div>
               {approvalsError ? (
-                <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs text-slate-500">
+                <div className="rounded-lg border border-border bg-muted p-3 text-xs text-muted-foreground">
                   {approvalsError}
                 </div>
               ) : isApprovalsLoading ? (
-                <p className="text-sm text-slate-500">Loading approvals…</p>
+                <p className="text-sm text-muted-foreground">Loading approvals…</p>
               ) : taskApprovals.length === 0 ? (
-                <p className="text-sm text-slate-500">
+                <p className="text-sm text-muted-foreground">
                   No approvals tied to this task.{" "}
                   {pendingApprovals.length > 0
                     ? `${pendingApprovals.length} pending on this board.`
@@ -3879,30 +3879,30 @@ export default function BoardDetailPage() {
                   {taskApprovals.map((approval) => (
                     <div
                       key={approval.id}
-                      className="rounded-xl border border-slate-200 bg-white p-3"
+                      className="rounded-xl border border-border bg-card p-3"
                     >
-                      <div className="flex flex-wrap items-start justify-between gap-2 text-xs text-slate-500">
+                      <div className="flex flex-wrap items-start justify-between gap-2 text-xs text-muted-foreground">
                         <div>
-                          <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                             {humanizeApprovalAction(approval.action_type)}
                           </p>
-                          <p className="mt-1 text-xs text-slate-500">
+                          <p className="mt-1 text-xs text-muted-foreground">
                             Requested{" "}
                             {formatApprovalTimestamp(approval.created_at)}
                           </p>
                         </div>
-                        <span className="text-xs font-semibold text-slate-700">
+                        <span className="text-xs font-semibold text-muted-foreground">
                           {approval.confidence}% confidence · {approval.status}
                         </span>
                       </div>
                       {approvalRows(approval).length > 0 ? (
-                        <div className="mt-2 grid gap-2 text-xs text-slate-600 sm:grid-cols-2">
+                        <div className="mt-2 grid gap-2 text-xs text-muted-foreground sm:grid-cols-2">
                           {approvalRows(approval).map((row) => (
                             <div key={`${approval.id}-${row.label}`}>
-                              <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+                              <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">
                                 {row.label}
                               </p>
-                              <p className="mt-1 text-xs text-slate-700">
+                              <p className="mt-1 text-xs text-muted-foreground">
                                 {row.value}
                               </p>
                             </div>
@@ -3910,7 +3910,7 @@ export default function BoardDetailPage() {
                         </div>
                       ) : null}
                       {approvalReason(approval) ? (
-                        <p className="mt-2 text-xs text-slate-600">
+                        <p className="mt-2 text-xs text-muted-foreground">
                           {approvalReason(approval)}
                         </p>
                       ) : null}
@@ -3938,7 +3938,7 @@ export default function BoardDetailPage() {
                               approvalsUpdatingId === approval.id || !canWrite
                             }
                             title={canWrite ? "Reject" : "Read-only access"}
-                            className="border-slate-300 text-slate-700"
+                            className="border-input text-muted-foreground"
                           >
                             Reject
                           </Button>
@@ -3950,10 +3950,10 @@ export default function BoardDetailPage() {
               )}
             </div>
             <div className="space-y-3">
-              <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Comments
               </p>
-              <div className="space-y-2 rounded-xl border border-slate-200 bg-slate-50 p-3">
+              <div className="space-y-2 rounded-xl border border-border bg-muted p-3">
                 <BoardChatComposer
                   placeholder={
                     canWrite
@@ -3969,19 +3969,19 @@ export default function BoardDetailPage() {
                   <p className="text-xs text-rose-600">{postCommentError}</p>
                 ) : null}
                 {!canWrite ? (
-                  <p className="text-xs text-slate-500">
+                  <p className="text-xs text-muted-foreground">
                     Read-only access. You cannot post comments on this board.
                   </p>
                 ) : null}
               </div>
               {isCommentsLoading ? (
-                <p className="text-sm text-slate-500">Loading comments…</p>
+                <p className="text-sm text-muted-foreground">Loading comments…</p>
               ) : commentsError ? (
-                <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs text-slate-500">
+                <div className="rounded-lg border border-border bg-muted p-3 text-xs text-muted-foreground">
                   {commentsError}
                 </div>
               ) : comments.length === 0 ? (
-                <p className="text-sm text-slate-500">No comments yet.</p>
+                <p className="text-sm text-muted-foreground">No comments yet.</p>
               ) : (
                 <div className="space-y-3">
                   {comments.map((comment) => (
@@ -4005,38 +4005,38 @@ export default function BoardDetailPage() {
 
       <aside
         className={cn(
-          "fixed right-0 top-0 z-50 h-full w-full max-w-[96vw] transform border-l border-slate-200 bg-white shadow-2xl transition-transform md:w-[560px]",
+          "fixed right-0 top-0 z-50 h-full w-full max-w-[96vw] transform border-l border-border bg-card shadow-2xl transition-transform md:w-[560px]",
           isChatOpen ? "transform-none" : "translate-x-full",
         )}
       >
         <div className="flex h-full flex-col">
-          <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3 md:px-6 md:py-4">
+          <div className="flex items-center justify-between border-b border-border px-4 py-3 md:px-6 md:py-4">
             <div>
-              <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Board chat
               </p>
-              <p className="mt-1 text-sm font-medium text-slate-900">
+              <p className="mt-1 text-sm font-medium text-foreground">
                 Talk to the lead agent. Tag others with @name.
               </p>
             </div>
             <button
               type="button"
               onClick={closeBoardChat}
-              className="rounded-lg border border-slate-200 p-2 text-slate-500 transition hover:bg-slate-50"
+              className="rounded-lg border border-border p-2 text-muted-foreground transition hover:bg-muted"
               aria-label="Close board chat"
             >
               <X className="h-4 w-4" />
             </button>
           </div>
           <div className="flex flex-1 flex-col overflow-hidden px-6 py-4">
-            <div className="flex-1 space-y-4 overflow-y-auto rounded-2xl border border-slate-200 bg-white p-4">
+            <div className="flex-1 space-y-4 overflow-y-auto rounded-2xl border border-border bg-card p-4">
               {chatError ? (
                 <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                   {chatError}
                 </div>
               ) : null}
               {chatMessages.length === 0 ? (
-                <p className="text-sm text-slate-500">
+                <p className="text-sm text-muted-foreground">
                   No messages yet. Start the conversation with your lead agent.
                 </p>
               ) : (
@@ -4067,24 +4067,24 @@ export default function BoardDetailPage() {
 
       <aside
         className={cn(
-          "fixed right-0 top-0 z-50 h-full w-full max-w-[96vw] transform border-l border-slate-200 bg-white shadow-2xl transition-transform md:w-[520px]",
+          "fixed right-0 top-0 z-50 h-full w-full max-w-[96vw] transform border-l border-border bg-card shadow-2xl transition-transform md:w-[520px]",
           isLiveFeedOpen ? "transform-none" : "translate-x-full",
         )}
       >
         <div className="flex h-full flex-col">
-          <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3 md:px-6 md:py-4">
+          <div className="flex items-center justify-between border-b border-border px-4 py-3 md:px-6 md:py-4">
             <div>
-              <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Live feed
               </p>
-              <p className="mt-1 text-sm font-medium text-slate-900">
+              <p className="mt-1 text-sm font-medium text-foreground">
                 Realtime task, approval, agent, and board-chat activity.
               </p>
             </div>
             <button
               type="button"
               onClick={closeLiveFeed}
-              className="rounded-lg border border-slate-200 p-2 text-slate-500 transition hover:bg-slate-50"
+              className="rounded-lg border border-border p-2 text-muted-foreground transition hover:bg-muted"
               aria-label="Close live feed"
             >
               <X className="h-4 w-4" />
@@ -4092,13 +4092,13 @@ export default function BoardDetailPage() {
           </div>
           <div className="flex-1 overflow-y-auto px-6 py-4">
             {isLiveFeedHistoryLoading && orderedLiveFeed.length === 0 ? (
-              <p className="text-sm text-slate-500">Loading feed…</p>
+              <p className="text-sm text-muted-foreground">Loading feed…</p>
             ) : liveFeedHistoryError ? (
-              <div className="rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm">
+              <div className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground shadow-sm">
                 {liveFeedHistoryError}
               </div>
             ) : orderedLiveFeed.length === 0 ? (
-              <p className="text-sm text-slate-500">
+              <p className="text-sm text-muted-foreground">
                 Waiting for new activity…
               </p>
             ) : (
@@ -4158,7 +4158,7 @@ export default function BoardDetailPage() {
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">
-              <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Title
               </label>
               <Input
@@ -4169,7 +4169,7 @@ export default function BoardDetailPage() {
               />
             </div>
             <div className="space-y-2">
-              <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Description
               </label>
               <Textarea
@@ -4181,7 +4181,7 @@ export default function BoardDetailPage() {
               />
             </div>
             <div className="space-y-2">
-              <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Custom fields
               </label>
               <TaskCustomFieldsEditor
@@ -4194,7 +4194,7 @@ export default function BoardDetailPage() {
             </div>
             <div className="grid gap-4 md:grid-cols-2">
               <div className="space-y-2">
-                <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                   Status
                 </label>
                 <Select
@@ -4215,7 +4215,7 @@ export default function BoardDetailPage() {
                 </Select>
               </div>
               <div className="space-y-2">
-                <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                   Priority
                 </label>
                 <Select
@@ -4236,7 +4236,7 @@ export default function BoardDetailPage() {
                 </Select>
               </div>
               <div className="space-y-2">
-                <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                   Due date
                 </label>
                 <Input
@@ -4248,7 +4248,7 @@ export default function BoardDetailPage() {
               </div>
             </div>
             <div className="space-y-2">
-              <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Assignee
               </label>
               <Select
@@ -4271,20 +4271,20 @@ export default function BoardDetailPage() {
                 </SelectContent>
               </Select>
               {assignableAgents.length === 0 ? (
-                <p className="text-xs text-slate-500">
+                <p className="text-xs text-muted-foreground">
                   Add agents to assign tasks.
                 </p>
               ) : null}
             </div>
             <div className="space-y-2">
               <div className="flex items-center justify-between gap-2">
-                <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                   Tags
                 </label>
                 <button
                   type="button"
                   onClick={() => router.push("/tags")}
-                  className="text-xs font-medium text-slate-500 underline underline-offset-2 transition hover:text-slate-700"
+                  className="text-xs font-medium text-muted-foreground underline underline-offset-2 transition hover:text-muted-foreground"
                 >
                   Manage tags
                 </button>
@@ -4298,7 +4298,7 @@ export default function BoardDetailPage() {
                 emptyMessage="No tags configured."
               />
               {editTagIds.length === 0 ? (
-                <p className="text-xs text-slate-500">No tags assigned.</p>
+                <p className="text-xs text-muted-foreground">No tags assigned.</p>
               ) : (
                 <div className="flex flex-wrap gap-2">
                   {editTagIds.map((tagId) => {
@@ -4308,7 +4308,7 @@ export default function BoardDetailPage() {
                     return (
                       <span
                         key={tagId}
-                        className="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs text-slate-700"
+                        className="inline-flex items-center gap-1.5 rounded-full border border-border bg-muted px-3 py-1 text-xs text-muted-foreground"
                       >
                         <span
                           className="h-1.5 w-1.5 rounded-full"
@@ -4319,9 +4319,9 @@ export default function BoardDetailPage() {
                           type="button"
                           onClick={() => removeEditTag(tagId)}
                           className={cn(
-                            "rounded-full p-0.5 text-slate-500 transition",
+                            "rounded-full p-0.5 text-muted-foreground transition",
                             canWrite
-                              ? "hover:bg-white hover:text-slate-700"
+                              ? "hover:bg-card hover:text-muted-foreground"
                               : "opacity-50 cursor-not-allowed",
                           )}
                           aria-label="Remove tag"
@@ -4336,10 +4336,10 @@ export default function BoardDetailPage() {
               )}
             </div>
             <div className="space-y-2">
-              <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Dependencies
               </label>
-              <p className="text-xs text-slate-500">
+              <p className="text-xs text-muted-foreground">
                 Tasks stay blocked until every dependency is marked done.
               </p>
               <DropdownSelect
@@ -4356,12 +4356,12 @@ export default function BoardDetailPage() {
                 emptyMessage="No other tasks found."
               />
               {selectedTask?.status === "done" ? (
-                <p className="text-xs text-slate-500">
+                <p className="text-xs text-muted-foreground">
                   Dependencies can only be edited until the task is done.
                 </p>
               ) : null}
               {editDependsOnTaskIds.length === 0 ? (
-                <p className="text-xs text-slate-500">No dependencies.</p>
+                <p className="text-xs text-muted-foreground">No dependencies.</p>
               ) : (
                 <div className="flex flex-wrap gap-2">
                   {editDependsOnTaskIds.map((depId) => {
@@ -4378,12 +4378,12 @@ export default function BoardDetailPage() {
                           "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs",
                           isDone
                             ? "border-emerald-200 bg-emerald-50 text-emerald-800"
-                            : "border-slate-200 bg-slate-50 text-slate-700",
+                            : "border-border bg-muted text-muted-foreground",
                         )}
                       >
                         <span className="max-w-[18rem] truncate">{label}</span>
                         {statusLabel ? (
-                          <span className="text-[10px] font-semibold uppercase tracking-wide text-slate-400">
+                          <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
                             {statusLabel}
                           </span>
                         ) : null}
@@ -4392,9 +4392,9 @@ export default function BoardDetailPage() {
                             type="button"
                             onClick={() => removeTaskDependency(depId)}
                             className={cn(
-                              "rounded-full p-0.5 text-slate-500 transition",
+                              "rounded-full p-0.5 text-muted-foreground transition",
                               canWrite
-                                ? "hover:bg-white hover:text-slate-700"
+                                ? "hover:bg-card hover:text-muted-foreground"
                                 : "opacity-50 cursor-not-allowed",
                             )}
                             aria-label="Remove dependency"
@@ -4410,7 +4410,7 @@ export default function BoardDetailPage() {
               )}
             </div>
             {saveTaskError ? (
-              <div className="rounded-lg border border-slate-200 bg-white p-3 text-xs text-slate-600">
+              <div className="rounded-lg border border-border bg-card p-3 text-xs text-muted-foreground">
                 {saveTaskError}
               </div>
             ) : null}
@@ -4470,7 +4470,7 @@ export default function BoardDetailPage() {
             <Button
               onClick={handleDeleteTask}
               disabled={isDeletingTask || !canWrite}
-              className="bg-rose-600 text-white hover:bg-rose-700"
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
               {isDeletingTask ? "Deleting…" : "Delete task"}
             </Button>
@@ -4566,7 +4566,7 @@ export default function BoardDetailPage() {
                 <button
                   type="button"
                   onClick={() => router.push("/tags")}
-                  className="text-xs font-medium text-slate-500 underline underline-offset-2 transition hover:text-slate-700"
+                  className="text-xs font-medium text-muted-foreground underline underline-offset-2 transition hover:text-muted-foreground"
                 >
                   Manage tags
                 </button>
@@ -4587,7 +4587,7 @@ export default function BoardDetailPage() {
                     return (
                       <span
                         key={tagId}
-                        className="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs text-slate-700"
+                        className="inline-flex items-center gap-1.5 rounded-full border border-border bg-muted px-3 py-1 text-xs text-muted-foreground"
                       >
                         <span
                           className="h-1.5 w-1.5 rounded-full"
@@ -4597,7 +4597,7 @@ export default function BoardDetailPage() {
                         <button
                           type="button"
                           onClick={() => removeCreateTag(tagId)}
-                          className="rounded-full p-0.5 text-slate-500 transition hover:bg-white hover:text-slate-700"
+                          className="rounded-full p-0.5 text-muted-foreground transition hover:bg-card hover:text-muted-foreground"
                           aria-label="Remove tag"
                           disabled={!canWrite || isCreating}
                         >
@@ -4608,7 +4608,7 @@ export default function BoardDetailPage() {
                   })}
                 </div>
               ) : (
-                <p className="text-xs text-slate-500">No tags assigned.</p>
+                <p className="text-xs text-muted-foreground">No tags assigned.</p>
               )}
             </div>
             {createError ? (
@@ -4661,8 +4661,8 @@ export default function BoardDetailPage() {
               </div>
             ) : null}
 
-            <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm text-slate-700">
-              <p className="font-semibold text-slate-900">What happens</p>
+            <div className="rounded-lg border border-border bg-muted p-3 text-sm text-muted-foreground">
+              <p className="font-semibold text-foreground">What happens</p>
               <ul className="mt-2 list-disc space-y-1 pl-5">
                 <li>
                   This posts{" "}
@@ -4704,7 +4704,7 @@ export default function BoardDetailPage() {
             <div
               key={toast.id}
               className={cn(
-                "rounded-xl border bg-white px-4 py-3 text-sm shadow-lush",
+                "rounded-xl border bg-card px-4 py-3 text-sm shadow-lush",
                 toast.tone === "error"
                   ? "border-rose-200 text-rose-700"
                   : "border-emerald-200 text-emerald-700",
@@ -4717,10 +4717,10 @@ export default function BoardDetailPage() {
                     toast.tone === "error" ? "bg-rose-500" : "bg-emerald-500",
                   )}
                 />
-                <p className="flex-1 text-sm text-slate-700">{toast.message}</p>
+                <p className="flex-1 text-sm text-muted-foreground">{toast.message}</p>
                 <button
                   type="button"
-                  className="text-xs text-slate-400 hover:text-slate-600"
+                  className="text-xs text-muted-foreground/70 hover:text-muted-foreground"
                   onClick={() => dismissToast(toast.id)}
                 >
                   Dismiss
diff --git a/frontend/src/app/boards/[boardId]/webhooks/[webhookId]/payloads/page.tsx b/frontend/src/app/boards/[boardId]/webhooks/[webhookId]/payloads/page.tsx
index 8a45bc7..e19edde 100644
--- a/frontend/src/app/boards/[boardId]/webhooks/[webhookId]/payloads/page.tsx
+++ b/frontend/src/app/boards/[boardId]/webhooks/[webhookId]/payloads/page.tsx
@@ -111,13 +111,13 @@ export default function WebhookPayloadsPage() {
       isAdmin={isAdmin}
       adminOnlyMessage="Only organization owners and admins can view webhook payloads."
     >
-      <div className="space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-4 rounded-xl border border-border bg-card p-6 shadow-sm">
         <div className="flex flex-wrap items-start justify-between gap-3">
           <div className="space-y-1">
-            <h2 className="text-base font-semibold text-slate-900">
+            <h2 className="text-base font-semibold text-foreground">
               {payloadTitle}
             </h2>
-            <p className="text-sm text-slate-600">
+            <p className="text-sm text-muted-foreground">
               {webhook?.description ?? "Loading webhook details..."}
             </p>
           </div>
@@ -131,15 +131,15 @@ export default function WebhookPayloadsPage() {
         </div>
 
         {webhook ? (
-          <div className="rounded-md bg-slate-50 px-3 py-2">
-            <code className="break-all text-xs text-slate-700">
+          <div className="rounded-md bg-muted px-3 py-2">
+            <code className="break-all text-xs text-muted-foreground">
               {webhook.endpoint_url ?? webhook.endpoint_path}
             </code>
           </div>
         ) : null}
 
-        <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-slate-200 px-3 py-2">
-          <p className="text-sm text-slate-700">
+        <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border px-3 py-2">
+          <p className="text-sm text-muted-foreground">
             {total} payload{total === 1 ? "" : "s"} total
           </p>
           <div className="flex items-center gap-2">
@@ -153,7 +153,7 @@ export default function WebhookPayloadsPage() {
             >
               Previous
             </Button>
-            <span className="text-xs text-slate-600">
+            <span className="text-xs text-muted-foreground">
               Page {currentPage} of {pageCount}
             </span>
             <Button
@@ -172,11 +172,11 @@ export default function WebhookPayloadsPage() {
         ) : null}
 
         {isLoading ? (
-          <p className="text-sm text-slate-500">Loading payloads...</p>
+          <p className="text-sm text-muted-foreground">Loading payloads...</p>
         ) : null}
 
         {!isLoading && payloads.length === 0 ? (
-          <p className="rounded-lg border border-dashed border-slate-300 px-4 py-3 text-sm text-slate-600">
+          <p className="rounded-lg border border-dashed border-input px-4 py-3 text-sm text-muted-foreground">
             No payloads received for this webhook yet.
           </p>
         ) : null}
@@ -185,17 +185,17 @@ export default function WebhookPayloadsPage() {
           {payloads.map((payload: BoardWebhookPayloadRead) => (
             <div
               key={payload.id}
-              className="space-y-3 rounded-lg border border-slate-200 px-4 py-4"
+              className="space-y-3 rounded-lg border border-border px-4 py-4"
             >
               <div className="flex flex-wrap items-center justify-between gap-2">
-                <span className="text-sm font-semibold text-slate-900">
+                <span className="text-sm font-semibold text-foreground">
                   Payload {payload.id.slice(0, 8)}
                 </span>
-                <span className="text-xs text-slate-500">
+                <span className="text-xs text-muted-foreground">
                   {new Date(payload.received_at).toLocaleString()}
                 </span>
               </div>
-              <div className="grid gap-2 text-xs text-slate-600 md:grid-cols-2">
+              <div className="grid gap-2 text-xs text-muted-foreground md:grid-cols-2">
                 <p>
                   Content type:{" "}
                   <code>{payload.content_type ?? "not provided"}</code>
@@ -204,7 +204,7 @@ export default function WebhookPayloadsPage() {
                   Source IP: <code>{payload.source_ip ?? "not provided"}</code>
                 </p>
               </div>
-              <pre className="max-h-96 overflow-auto rounded-md bg-slate-900/95 p-3 text-xs text-slate-100">
+              <pre className="max-h-96 overflow-auto rounded-md bg-foreground/95 p-3 text-xs text-background">
                 {stringifyPayload(payload.payload)}
               </pre>
             </div>
diff --git a/frontend/src/app/boards/new/page.tsx b/frontend/src/app/boards/new/page.tsx
index d5d5121..3bb5ad9 100644
--- a/frontend/src/app/boards/new/page.tsx
+++ b/frontend/src/app/boards/new/page.tsx
@@ -161,12 +161,12 @@ export default function NewBoardPage() {
     >
       <form
         onSubmit={handleSubmit}
-        className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
+        className="space-y-6 rounded-xl border border-border bg-card p-6 shadow-sm"
       >
         <div className="space-y-4">
           <div className="grid gap-6 md:grid-cols-2">
             <div className="space-y-2">
-              <label className="text-sm font-medium text-slate-900">
+              <label className="text-sm font-medium text-foreground">
                 Board name <span className="text-red-500">*</span>
               </label>
               <Input
@@ -177,7 +177,7 @@ export default function NewBoardPage() {
               />
             </div>
             <div className="space-y-2">
-              <label className="text-sm font-medium text-slate-900">
+              <label className="text-sm font-medium text-foreground">
                 Gateway <span className="text-red-500">*</span>
               </label>
               <SearchableSelect
@@ -197,7 +197,7 @@ export default function NewBoardPage() {
 
           <div className="grid gap-6 md:grid-cols-2">
             <div className="space-y-2">
-              <label className="text-sm font-medium text-slate-900">
+              <label className="text-sm font-medium text-foreground">
                 Board group
               </label>
               <SearchableSelect
@@ -213,14 +213,14 @@ export default function NewBoardPage() {
                 itemClassName="px-4 py-3"
                 disabled={isLoading}
               />
-              <p className="text-xs text-slate-500">
+              <p className="text-xs text-muted-foreground">
                 Optional. Groups increase cross-board visibility.
               </p>
             </div>
           </div>
 
           <div className="space-y-2">
-            <label className="text-sm font-medium text-slate-900">
+            <label className="text-sm font-medium text-foreground">
               Description <span className="text-red-500">*</span>
             </label>
             <Textarea
@@ -234,12 +234,12 @@ export default function NewBoardPage() {
         </div>
 
         {gateways.length === 0 ? (
-          <div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+          <div className="rounded-lg border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
             <p>
               No gateways available. Create one in{" "}
               <Link
                 href="/gateways"
-                className="font-medium text-blue-600 hover:text-blue-700"
+                className="font-medium text-primary hover:text-primary"
               >
                 Gateways
               </Link>{" "}
diff --git a/frontend/src/app/boards/page.tsx b/frontend/src/app/boards/page.tsx
index a01bba3..6ab4e5c 100644
--- a/frontend/src/app/boards/page.tsx
+++ b/frontend/src/app/boards/page.tsx
@@ -134,7 +134,7 @@ export default function BoardsPage() {
         }
         stickyHeader
       >
-        <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
           <BoardsTable
             boards={boards}
             boardGroups={groups}
diff --git a/frontend/src/app/custom-fields/[fieldId]/edit/page.tsx b/frontend/src/app/custom-fields/[fieldId]/edit/page.tsx
index 8d9ca41..ffc8f6d 100644
--- a/frontend/src/app/custom-fields/[fieldId]/edit/page.tsx
+++ b/frontend/src/app/custom-fields/[fieldId]/edit/page.tsx
@@ -129,7 +129,7 @@ export default function EditCustomFieldPage() {
       stickyHeader
     >
       {customFieldsQuery.isLoading ? (
-        <div className="max-w-3xl rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
+        <div className="max-w-3xl rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
           Loading custom field…
         </div>
       ) : null}
diff --git a/frontend/src/app/custom-fields/page.tsx b/frontend/src/app/custom-fields/page.tsx
index b3a96f5..b28bfc9 100644
--- a/frontend/src/app/custom-fields/page.tsx
+++ b/frontend/src/app/custom-fields/page.tsx
@@ -101,7 +101,7 @@ export default function CustomFieldsPage() {
         adminOnlyMessage="Only organization owners and admins can manage custom fields."
         stickyHeader
       >
-        <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
           <CustomFieldsTable
             fields={customFields}
             isLoading={customFieldsQuery.isLoading}
diff --git a/frontend/src/app/gateways/[gatewayId]/page.tsx b/frontend/src/app/gateways/[gatewayId]/page.tsx
index 577e0f3..5b2cd2c 100644
--- a/frontend/src/app/gateways/[gatewayId]/page.tsx
+++ b/frontend/src/app/gateways/[gatewayId]/page.tsx
@@ -185,7 +185,7 @@ export default function GatewayDetailPage() {
         adminOnlyMessage="Only organization owners and admins can access gateways."
       >
         {gatewayQuery.isLoading ? (
-          <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
+          <div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
             Loading gateway…
           </div>
         ) : gatewayQuery.error ? (
@@ -195,16 +195,16 @@ export default function GatewayDetailPage() {
         ) : gateway ? (
           <div className="space-y-6">
             <div className="grid gap-6 lg:grid-cols-2">
-              <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+              <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
                 <div className="flex items-center justify-between">
-                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
+                  <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                     Connection
                   </p>
-                  <div className="flex items-center gap-2 text-xs text-slate-500">
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                     <span
                       className={`h-2 w-2 rounded-full ${
                         statusQuery.isLoading
-                          ? "bg-slate-300"
+                          ? "bg-muted-foreground/40"
                           : isConnected
                             ? "bg-emerald-500"
                             : "bg-rose-500"
@@ -219,59 +219,59 @@ export default function GatewayDetailPage() {
                     </span>
                   </div>
                 </div>
-                <div className="mt-4 space-y-3 text-sm text-slate-700">
+                <div className="mt-4 space-y-3 text-sm text-muted-foreground">
                   <div>
-                    <p className="text-xs uppercase text-slate-400">
+                    <p className="text-xs uppercase text-muted-foreground/70">
                       Gateway URL
                     </p>
-                    <p className="mt-1 text-sm font-medium text-slate-900">
+                    <p className="mt-1 text-sm font-medium text-foreground">
                       {gateway.url}
                     </p>
                   </div>
                   <div>
-                    <p className="text-xs uppercase text-slate-400">Token</p>
-                    <p className="mt-1 text-sm font-medium text-slate-900">
+                    <p className="text-xs uppercase text-muted-foreground/70">Token</p>
+                    <p className="mt-1 text-sm font-medium text-foreground">
                       {maskToken(gateway.token)}
                     </p>
                   </div>
                   <div>
-                    <p className="text-xs uppercase text-slate-400">
+                    <p className="text-xs uppercase text-muted-foreground/70">
                       Device pairing
                     </p>
-                    <p className="mt-1 text-sm font-medium text-slate-900">
+                    <p className="mt-1 text-sm font-medium text-foreground">
                       {gateway.disable_device_pairing ? "Disabled" : "Required"}
                     </p>
                   </div>
                 </div>
               </div>
 
-              <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
+              <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
+                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                   Runtime
                 </p>
-                <div className="mt-4 space-y-3 text-sm text-slate-700">
+                <div className="mt-4 space-y-3 text-sm text-muted-foreground">
                   <div>
-                    <p className="text-xs uppercase text-slate-400">
+                    <p className="text-xs uppercase text-muted-foreground/70">
                       Workspace root
                     </p>
-                    <p className="mt-1 text-sm font-medium text-slate-900">
+                    <p className="mt-1 text-sm font-medium text-foreground">
                       {gateway.workspace_root}
                     </p>
                   </div>
                   <div className="grid gap-3 sm:grid-cols-2">
                     <div>
-                      <p className="text-xs uppercase text-slate-400">
+                      <p className="text-xs uppercase text-muted-foreground/70">
                         Created
                       </p>
-                      <p className="mt-1 text-sm font-medium text-slate-900">
+                      <p className="mt-1 text-sm font-medium text-foreground">
                         {formatTimestamp(gateway.created_at)}
                       </p>
                     </div>
                     <div>
-                      <p className="text-xs uppercase text-slate-400">
+                      <p className="text-xs uppercase text-muted-foreground/70">
                         Updated
                       </p>
-                      <p className="mt-1 text-sm font-medium text-slate-900">
+                      <p className="mt-1 text-sm font-medium text-foreground">
                         {formatTimestamp(gateway.updated_at)}
                       </p>
                     </div>
@@ -280,15 +280,15 @@ export default function GatewayDetailPage() {
               </div>
             </div>
 
-            <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+            <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
               <div className="flex items-center justify-between">
-                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
+                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                   Agents
                 </p>
                 {agentsQuery.isLoading ? (
-                  <span className="text-xs text-slate-500">Loading…</span>
+                  <span className="text-xs text-muted-foreground">Loading…</span>
                 ) : (
-                  <span className="text-xs text-slate-500">
+                  <span className="text-xs text-muted-foreground">
                     {agents.length} total
                   </span>
                 )}
diff --git a/frontend/src/app/gateways/page.tsx b/frontend/src/app/gateways/page.tsx
index 2965063..e4dc868 100644
--- a/frontend/src/app/gateways/page.tsx
+++ b/frontend/src/app/gateways/page.tsx
@@ -113,7 +113,7 @@ export default function GatewaysPage() {
         adminOnlyMessage="Only organization owners and admins can access gateways."
         stickyHeader
       >
-        <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
           <GatewaysTable
             gateways={gateways}
             isLoading={gatewaysQuery.isLoading}
diff --git a/frontend/src/app/git-projects/connections/[connectionId]/edit/page.tsx b/frontend/src/app/git-projects/connections/[connectionId]/edit/page.tsx
index e23e234..bb222a8 100644
--- a/frontend/src/app/git-projects/connections/[connectionId]/edit/page.tsx
+++ b/frontend/src/app/git-projects/connections/[connectionId]/edit/page.tsx
@@ -170,7 +170,7 @@ export default function ForgejoConnectionsEditPage({
         errorMessage={deleteError}
         confirmLabel="Delete Connection"
         confirmingLabel="Deleting…"
-        confirmClassName="bg-[color:var(--danger)] text-white hover:bg-[color:var(--danger)]/90"
+        confirmClassName="bg-destructive text-destructive-foreground hover:bg-destructive/90"
         cancelLabel="Keep Connection"
       />
     </DashboardPageLayout>
diff --git a/frontend/src/app/git-projects/connections/page.tsx b/frontend/src/app/git-projects/connections/page.tsx
index 181aaa2..c3625fa 100644
--- a/frontend/src/app/git-projects/connections/page.tsx
+++ b/frontend/src/app/git-projects/connections/page.tsx
@@ -175,7 +175,7 @@ export default function ForgejoConnectionsPage() {
         errorMessage={deleteError}
         confirmLabel="Delete Connection"
         confirmingLabel="Deleting…"
-        confirmClassName="bg-[color:var(--danger)] text-white hover:bg-[color:var(--danger)]/90"
+        confirmClassName="bg-destructive text-destructive-foreground hover:bg-destructive/90"
         cancelLabel="Keep Connection"
       />
     </>
diff --git a/frontend/src/app/git-projects/repositories/[repositoryId]/edit/page.tsx b/frontend/src/app/git-projects/repositories/[repositoryId]/edit/page.tsx
index 3c492a8..412d1f2 100644
--- a/frontend/src/app/git-projects/repositories/[repositoryId]/edit/page.tsx
+++ b/frontend/src/app/git-projects/repositories/[repositoryId]/edit/page.tsx
@@ -177,7 +177,7 @@ export default function ForgejoRepositoriesEditPage({
         errorMessage={deleteError}
         confirmLabel="Delete Repository"
         confirmingLabel="Deleting…"
-        confirmClassName="bg-[color:var(--danger)] text-white hover:bg-[color:var(--danger)]/90"
+        confirmClassName="bg-destructive text-destructive-foreground hover:bg-destructive/90"
         cancelLabel="Keep Repository"
       />
     </DashboardPageLayout>
diff --git a/frontend/src/app/git-projects/repositories/page.tsx b/frontend/src/app/git-projects/repositories/page.tsx
index 67b7c6a..c2d1609 100644
--- a/frontend/src/app/git-projects/repositories/page.tsx
+++ b/frontend/src/app/git-projects/repositories/page.tsx
@@ -201,7 +201,7 @@ export default function ForgejoRepositoriesPage() {
         errorMessage={deleteError}
         confirmLabel="Delete Repository"
         confirmingLabel="Deleting…"
-        confirmClassName="bg-[color:var(--danger)] text-white hover:bg-[color:var(--danger)]/90"
+        confirmClassName="bg-destructive text-destructive-foreground hover:bg-destructive/90"
         cancelLabel="Keep Repository"
       />
     </>
diff --git a/frontend/src/app/invite/page.tsx b/frontend/src/app/invite/page.tsx
index 5892cc0..e458525 100644
--- a/frontend/src/app/invite/page.tsx
+++ b/frontend/src/app/invite/page.tsx
@@ -152,7 +152,7 @@ export default function InvitePage() {
     <Suspense
       fallback={
         <div className="min-h-screen bg-app text-strong">
-          <header className="border-b border-[color:var(--border)] bg-white">
+          <header className="border-b border-[color:var(--border)] bg-card">
             <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
               <BrandMark />
             </div>
diff --git a/frontend/src/app/loading.tsx b/frontend/src/app/loading.tsx
index c7bda84..ad5de31 100644
--- a/frontend/src/app/loading.tsx
+++ b/frontend/src/app/loading.tsx
@@ -5,8 +5,8 @@ export default function Loading() {
       className="flex min-h-screen items-center justify-center bg-app px-6"
     >
       <div className="flex flex-col items-center gap-3">
-        <div className="h-10 w-10 animate-spin rounded-full border-2 border-slate-200 border-t-[var(--accent)]" />
-        <p className="text-sm text-slate-500">Loading pipeline...</p>
+        <div className="h-10 w-10 animate-spin rounded-full border-2 border-border border-t-[var(--accent)]" />
+        <p className="text-sm text-muted-foreground">Loading pipeline...</p>
       </div>
     </div>
   );
diff --git a/frontend/src/app/onboarding/page.tsx b/frontend/src/app/onboarding/page.tsx
index 311167a..8fb2a28 100644
--- a/frontend/src/app/onboarding/page.tsx
+++ b/frontend/src/app/onboarding/page.tsx
@@ -115,12 +115,12 @@ export default function OnboardingPage() {
     <DashboardShell>
       <SignedOut>
         <div className="lg:col-span-2 flex min-h-[70vh] items-center justify-center">
-          <div className="w-full max-w-2xl rounded-xl border border-slate-200 bg-white shadow-sm">
-            <div className="border-b border-slate-100 px-6 py-5">
-              <h1 className="text-2xl font-semibold tracking-tight text-slate-900">
+          <div className="w-full max-w-2xl rounded-xl border border-border bg-card shadow-sm">
+            <div className="border-b border-border px-6 py-5">
+              <h1 className="text-2xl font-semibold tracking-tight text-foreground">
                 Pipeline profile
               </h1>
-              <p className="mt-1 text-sm text-slate-600">
+              <p className="mt-1 text-sm text-muted-foreground">
                 Sign in to configure your profile and timezone.
               </p>
             </div>
@@ -138,12 +138,12 @@ export default function OnboardingPage() {
       </SignedOut>
       <SignedIn>
         <div className="lg:col-span-2 flex min-h-[70vh] items-center justify-center">
-          <section className="w-full max-w-2xl rounded-xl border border-slate-200 bg-white shadow-sm">
-            <div className="border-b border-slate-100 px-6 py-5">
-              <h1 className="text-2xl font-semibold tracking-tight text-slate-900">
+          <section className="w-full max-w-2xl rounded-xl border border-border bg-card shadow-sm">
+            <div className="border-b border-border px-6 py-5">
+              <h1 className="text-2xl font-semibold tracking-tight text-foreground">
                 Pipeline profile
               </h1>
-              <p className="mt-1 text-sm text-slate-600">
+              <p className="mt-1 text-sm text-muted-foreground">
                 Configure your Pipeline settings and preferences.
               </p>
             </div>
@@ -151,8 +151,8 @@ export default function OnboardingPage() {
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div className="grid gap-6 md:grid-cols-2">
                   <div className="space-y-2">
-                    <label className="text-sm font-medium text-slate-700 flex items-center gap-2">
-                      <User className="h-4 w-4 text-slate-500" />
+                    <label className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                      <User className="h-4 w-4 text-muted-foreground" />
                       Name
                       <span className="text-red-500">*</span>
                     </label>
@@ -161,12 +161,12 @@ export default function OnboardingPage() {
                       onChange={(event) => setName(event.target.value)}
                       placeholder="Enter your name"
                       disabled={isLoading}
-                      className="border-slate-300 text-slate-900 focus-visible:ring-blue-500"
+                      className="border-input text-foreground focus-visible:ring-ring"
                     />
                   </div>
                   <div className="space-y-2">
-                    <label className="text-sm font-medium text-slate-700 flex items-center gap-2">
-                      <Globe className="h-4 w-4 text-slate-500" />
+                    <label className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                      <Globe className="h-4 w-4 text-muted-foreground" />
                       Timezone
                       <span className="text-red-500">*</span>
                     </label>
@@ -185,8 +185,8 @@ export default function OnboardingPage() {
                   </div>
                 </div>
 
-                <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 text-sm text-blue-800 flex items-start gap-3">
-                  <Info className="mt-0.5 h-4 w-4 text-blue-600" />
+                <div className="flex items-start gap-3 rounded-lg border border-border bg-muted p-4 text-sm text-muted-foreground">
+                  <Info className="mt-0.5 h-4 w-4 text-primary" />
                   <p>
                     <strong>Note:</strong> Your timezone is used to display all
                     timestamps and schedule mission-critical events accurately.
@@ -194,7 +194,7 @@ export default function OnboardingPage() {
                 </div>
 
                 {errorMessage ? (
-                  <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs text-slate-600">
+                  <div className="rounded-lg border border-border bg-muted p-3 text-xs text-muted-foreground">
                     {errorMessage}
                   </div>
                 ) : null}
@@ -202,26 +202,27 @@ export default function OnboardingPage() {
                 <div className="flex flex-wrap gap-3 pt-2">
                   <Button
                     type="submit"
-                    className="flex-1 bg-blue-600 text-white hover:bg-blue-700 py-2.5"
+                    className="flex-1 py-2.5"
                     disabled={isLoading || requiredMissing}
                   >
                     <Save className="h-4 w-4" />
                     {isLoading ? "Saving…" : "Save Profile"}
                   </Button>
-                  <button
+                  <Button
                     type="button"
+                    variant="outline"
                     onClick={() => {
                       setName("");
                       setTimezone("");
                       setError(null);
                     }}
-                    className="flex-1 rounded-md border border-slate-300 px-4 py-2.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+                    className="flex-1 py-2.5"
                   >
                     <span className="inline-flex items-center gap-2">
                       <RotateCcw className="h-4 w-4" />
                       Reset
                     </span>
-                  </button>
+                  </Button>
                 </div>
               </form>
             </div>
diff --git a/frontend/src/app/organization/page.tsx b/frontend/src/app/organization/page.tsx
index d4de3c2..bda7a73 100644
--- a/frontend/src/app/organization/page.tsx
+++ b/frontend/src/app/organization/page.tsx
@@ -157,17 +157,17 @@ function BoardAccessEditor({
   return (
     <div className="space-y-3">
       <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
           Board access
         </p>
-        <div className="mt-3 inline-flex rounded-xl border border-slate-200 bg-slate-100 p-1">
+        <div className="mt-3 inline-flex rounded-xl border border-border bg-accent p-1">
           <button
             type="button"
             className={cn(
               "rounded-md px-3 py-1.5 text-xs font-semibold transition",
               scope === "all"
-                ? "bg-white text-slate-900 shadow-sm"
-                : "text-slate-500 hover:text-slate-700",
+                ? "bg-card text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-muted-foreground",
             )}
             onClick={() => onScopeChange("all")}
             disabled={disabled}
@@ -179,8 +179,8 @@ function BoardAccessEditor({
             className={cn(
               "rounded-md px-3 py-1.5 text-xs font-semibold transition",
               scope === "custom"
-                ? "bg-white text-slate-900 shadow-sm"
-                : "text-slate-500 hover:text-slate-700",
+                ? "bg-card text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-muted-foreground",
             )}
             onClick={() => onScopeChange("custom")}
             disabled={disabled}
@@ -191,8 +191,8 @@ function BoardAccessEditor({
       </div>
 
       {scope === "all" ? (
-        <div className="flex flex-wrap items-center gap-6 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm">
-          <label className="flex items-center gap-2 text-slate-600">
+        <div className="flex flex-wrap items-center gap-6 rounded-xl border border-border bg-card px-4 py-2.5 text-sm">
+          <label className="flex items-center gap-2 text-muted-foreground">
             <input
               type="checkbox"
               className="h-4 w-4"
@@ -202,7 +202,7 @@ function BoardAccessEditor({
             />
             Read
           </label>
-          <label className="flex items-center gap-2 text-slate-600">
+          <label className="flex items-center gap-2 text-muted-foreground">
             <input
               type="checkbox"
               className="h-4 w-4"
@@ -212,18 +212,18 @@ function BoardAccessEditor({
             />
             Write
           </label>
-          <span className="text-xs text-slate-500">
+          <span className="text-xs text-muted-foreground">
             Write access implies read permissions.
           </span>
         </div>
       ) : (
         <div>
           {boards.length === 0 ? (
-            <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500">
+            <div className="rounded-xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
               {emptyMessage ?? "No boards available yet."}
             </div>
           ) : (
-            <div className="overflow-hidden rounded-xl border border-slate-200">
+            <div className="overflow-hidden rounded-xl border border-border">
               <BoardAccessTable
                 boards={boards}
                 access={access}
@@ -702,13 +702,13 @@ export default function OrganizationPage() {
       </SignedOut>
       <SignedIn>
         <DashboardSidebar />
-        <main className="flex-1 overflow-y-auto bg-slate-50">
-          <div className="sticky top-0 z-30 border-b border-slate-200 bg-white">
+        <main className="flex-1 overflow-y-auto bg-muted">
+          <div className="sticky top-0 z-30 border-b border-border bg-card">
             <div className="px-4 py-4 md:px-8 md:py-6">
               <div className="flex flex-wrap items-center justify-between gap-6">
                 <div>
                   <div className="flex flex-wrap items-center gap-3">
-                    <h1 className="text-2xl font-semibold tracking-tight text-slate-900">
+                    <h1 className="text-2xl font-semibold tracking-tight text-foreground">
                       Organization
                     </h1>
                     <Badge
@@ -719,24 +719,24 @@ export default function OrganizationPage() {
                       {orgName}
                     </Badge>
                   </div>
-                  <p className="mt-1 text-sm text-slate-500">
+                  <p className="mt-1 text-sm text-muted-foreground">
                     Manage members and board access across your workspace.
                   </p>
-                  <div className="mt-3 flex flex-wrap items-center gap-4 text-xs text-slate-500">
+                  <div className="mt-3 flex flex-wrap items-center gap-4 text-xs text-muted-foreground">
                     <span>
-                      <strong className="text-slate-900">
+                      <strong className="text-foreground">
                         {members.length}
                       </strong>{" "}
                       members
                     </span>
                     <span>
-                      <strong className="text-slate-900">
+                      <strong className="text-foreground">
                         {boards.length}
                       </strong>{" "}
                       boards
                     </span>
                     <span>
-                      <strong className="text-slate-900">
+                      <strong className="text-foreground">
                         {invites.length}
                       </strong>{" "}
                       pending
@@ -776,17 +776,17 @@ export default function OrganizationPage() {
           </div>
 
           <div className="px-4 py-4 md:px-8 md:py-8">
-            <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white">
-              <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-4">
+            <div className="overflow-hidden rounded-2xl border border-border bg-card">
+              <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border px-5 py-4">
                 <div>
-                  <h2 className="text-sm font-semibold text-slate-900">
+                  <h2 className="text-sm font-semibold text-foreground">
                     Members & invites
                   </h2>
-                  <p className="text-xs text-slate-500">
+                  <p className="text-xs text-muted-foreground">
                     Invite teammates and tune their board permissions.
                   </p>
                 </div>
-                <div className="flex items-center gap-2 text-xs text-slate-500">
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                   <Users className="h-4 w-4" />
                   {members.length + invites.length} total
                 </div>
@@ -829,7 +829,7 @@ export default function OrganizationPage() {
             <form className="space-y-5" onSubmit={handleInviteSubmit}>
               <div className="grid gap-4 sm:grid-cols-[1fr_200px]">
                 <div className="space-y-2">
-                  <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                  <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                     Email address
                   </label>
                   <Input
@@ -841,7 +841,7 @@ export default function OrganizationPage() {
                   />
                 </div>
                 <div className="space-y-2">
-                  <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                  <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                     Role
                   </label>
                   <Select value={inviteRole} onValueChange={setInviteRole}>
@@ -893,7 +893,7 @@ export default function OrganizationPage() {
               </DialogFooter>
             </form>
           ) : (
-            <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500">
+            <div className="rounded-xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
               Only organization admins can invite new members.
             </div>
           )}
@@ -910,26 +910,26 @@ export default function OrganizationPage() {
           </DialogHeader>
 
           {memberDetailsQuery.isLoading ? (
-            <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500">
+            <div className="rounded-xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
               Loading member access...
             </div>
           ) : memberDetailsQuery.data?.status === 200 ? (
             <div className="space-y-6">
-              <div className="rounded-xl border border-slate-200 bg-white px-5 py-4">
-                <p className="text-sm font-semibold text-slate-900">
+              <div className="rounded-xl border border-border bg-card px-5 py-4">
+                <p className="text-sm font-semibold text-foreground">
                   {memberDetailsQuery.data.data.user?.name ||
                     memberDetailsQuery.data.data.user?.preferred_name ||
                     memberDetailsQuery.data.data.user?.email ||
                     memberDetailsQuery.data.data.user_id}
                 </p>
-                <p className="mt-1 text-xs text-slate-500">
+                <p className="mt-1 text-xs text-muted-foreground">
                   {memberDetailsQuery.data.data.user?.email ??
                     "No email on file"}
                 </p>
               </div>
 
               <div className="space-y-3">
-                <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                   Role
                 </label>
                 <Select
@@ -967,7 +967,7 @@ export default function OrganizationPage() {
               ) : null}
             </div>
           ) : (
-            <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500">
+            <div className="rounded-xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
               Unable to load member access.
             </div>
           )}
diff --git a/frontend/src/app/settings/git-projects/page.tsx b/frontend/src/app/settings/git-projects/page.tsx
index f050de4..cccfdee 100644
--- a/frontend/src/app/settings/git-projects/page.tsx
+++ b/frontend/src/app/settings/git-projects/page.tsx
@@ -683,7 +683,7 @@ export default function GitProjectSettingsPage() {
         errorMessage={deleteError}
         confirmLabel="Delete"
         confirmingLabel="Deleting…"
-        confirmClassName="bg-[color:var(--danger)] text-white hover:bg-[color:var(--danger)]/90"
+        confirmClassName="bg-destructive text-destructive-foreground hover:bg-destructive/90"
         cancelLabel="Keep"
       />
     </>
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index 60ebc1f..2c2064b 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -161,17 +161,17 @@ export default function SettingsPage() {
         description="Update your profile and account preferences."
       >
         <div className="space-y-6">
-          <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-            <h2 className="text-base font-semibold text-slate-900">Profile</h2>
-            <p className="mt-1 text-sm text-slate-500">
+          <section className="rounded-xl border border-border bg-card p-6 shadow-sm">
+            <h2 className="text-base font-semibold text-foreground">Profile</h2>
+            <p className="mt-1 text-sm text-muted-foreground">
               Keep your identity and timezone up to date.
             </p>
 
             <form onSubmit={handleSave} className="mt-6 space-y-5">
               <div className="grid gap-5 md:grid-cols-2">
                 <div className="space-y-2">
-                  <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
-                    <User className="h-4 w-4 text-slate-500" />
+                  <label className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                    <User className="h-4 w-4 text-muted-foreground" />
                     Name
                   </label>
                   <Input
@@ -182,12 +182,12 @@ export default function SettingsPage() {
                     }}
                     placeholder="Your name"
                     disabled={isSaving}
-                    className="border-slate-300 [--input-bg:#fff] [--input-text:#0f172a] placeholder:text-slate-500 focus-visible:ring-blue-500"
+                    className="border-input [--input-bg:var(--card)] [--input-text:var(--card-foreground)] placeholder:text-muted-foreground focus-visible:ring-ring"
                   />
                 </div>
                 <div className="space-y-2">
-                  <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
-                    <Globe className="h-4 w-4 text-slate-500" />
+                  <label className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                    <Globe className="h-4 w-4 text-muted-foreground" />
                     Timezone
                   </label>
                   <SearchableSelect
@@ -210,15 +210,15 @@ export default function SettingsPage() {
               </div>
 
               <div className="space-y-2">
-                <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
-                  <Mail className="h-4 w-4 text-slate-500" />
+                <label className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                  <Mail className="h-4 w-4 text-muted-foreground" />
                   Email
                 </label>
                 <Input
                   value={displayEmail}
                   readOnly
                   disabled
-                  className="border-slate-200 [--input-bg:#f8fafc] [--input-text:#475569]"
+                  className="border-border [--input-bg:var(--muted)] [--input-text:var(--muted-foreground)]"
                 />
               </div>
 
@@ -251,14 +251,14 @@ export default function SettingsPage() {
             </form>
           </section>
 
-          <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+          <section className="rounded-xl border border-border bg-card p-6 shadow-sm">
             <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
               <div className="min-w-0">
-                <h2 className="flex items-center gap-2 text-base font-semibold text-slate-900">
-                  <GitBranch className="h-4 w-4 text-slate-500" />
+                <h2 className="flex items-center gap-2 text-base font-semibold text-foreground">
+                  <GitBranch className="h-4 w-4 text-muted-foreground" />
                   Git Projects
                 </h2>
-                <p className="mt-1 text-sm text-slate-500">
+                <p className="mt-1 text-sm text-muted-foreground">
                   Manage Forgejo connections, tracked repositories, and issue
                   sync.
                 </p>
@@ -283,7 +283,7 @@ export default function SettingsPage() {
             <div className="mt-4">
               <Button
                 type="button"
-                className="bg-rose-600 text-white hover:bg-rose-700"
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                 onClick={() => {
                   setDeleteError(null);
                   setDeleteDialogOpen(true);
diff --git a/frontend/src/app/sign-in/[[...rest]]/page.tsx b/frontend/src/app/sign-in/[[...rest]]/page.tsx
index ce55bcd..ed1cedc 100644
--- a/frontend/src/app/sign-in/[[...rest]]/page.tsx
+++ b/frontend/src/app/sign-in/[[...rest]]/page.tsx
@@ -21,7 +21,7 @@ export default function SignInPage() {
   // Dedicated sign-in route for Cypress E2E.
   // Avoids modal/iframe auth flows and gives Cypress a stable top-level page.
   return (
-    <main className="flex min-h-screen items-center justify-center bg-slate-50 p-6">
+    <main className="flex min-h-screen items-center justify-center bg-muted p-6">
       <SignIn
         routing="path"
         path="/sign-in"
diff --git a/frontend/src/app/skills/marketplace/page.tsx b/frontend/src/app/skills/marketplace/page.tsx
index bd76a4d..f637761 100644
--- a/frontend/src/app/skills/marketplace/page.tsx
+++ b/frontend/src/app/skills/marketplace/page.tsx
@@ -788,8 +788,8 @@ export default function SkillsMarketplacePage() {
       >
         <div className="space-y-6">
           {gateways.length === 0 ? (
-            <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-600 shadow-sm">
-              <p className="font-medium text-slate-900">
+            <div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
+              <p className="font-medium text-foreground">
                 No gateways available yet.
               </p>
               <p className="mt-2">
@@ -804,12 +804,12 @@ export default function SkillsMarketplacePage() {
             </div>
           ) : (
             <>
-              <div className="mb-5 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+              <div className="mb-5 rounded-xl border border-border bg-card p-4 shadow-sm">
                 <div className="grid gap-4 md:grid-cols-[1fr_240px_240px]">
                   <div>
                     <label
                       htmlFor="marketplace-search"
-                      className="mb-1 block text-sm font-medium text-slate-700"
+                      className="mb-1 block text-sm font-medium text-muted-foreground"
                     >
                       Search
                     </label>
@@ -824,7 +824,7 @@ export default function SkillsMarketplacePage() {
                   <div>
                     <label
                       htmlFor="marketplace-category-filter"
-                      className="mb-1 block text-sm font-medium text-slate-700"
+                      className="mb-1 block text-sm font-medium text-muted-foreground"
                     >
                       Category
                     </label>
@@ -854,7 +854,7 @@ export default function SkillsMarketplacePage() {
                   <div>
                     <label
                       htmlFor="marketplace-risk-filter"
-                      className="mb-1 block text-sm font-medium text-slate-700"
+                      className="mb-1 block text-sm font-medium text-muted-foreground"
                     >
                       Risk
                     </label>
@@ -880,7 +880,7 @@ export default function SkillsMarketplacePage() {
                   </div>
                 </div>
               </div>
-              <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+              <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
                 <MarketplaceSkillsTable
                   skills={filteredSkills}
                   installedGatewayNamesBySkillId={
@@ -901,13 +901,13 @@ export default function SkillsMarketplacePage() {
                   }}
                 />
               </div>
-              <div className="flex items-center justify-between rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-600 shadow-sm">
+              <div className="flex items-center justify-between rounded-xl border border-border bg-card px-4 py-3 text-sm text-muted-foreground shadow-sm">
                 <div className="flex items-center gap-3">
                   <p>
                     Showing {rangeStart}-{rangeEnd} of {totalSkills}
                   </p>
                   <div className="flex items-center gap-2">
-                    <span className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                    <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                       Rows
                     </span>
                     <Select
@@ -951,7 +951,7 @@ export default function SkillsMarketplacePage() {
                   >
                     Previous
                   </Button>
-                  <span className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                  <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                     {totalCountInfo.hasKnownTotal
                       ? `Page ${currentPage} of ${totalPages}`
                       : `Page ${currentPage}`}
diff --git a/frontend/src/app/skills/packs/[packId]/edit/page.tsx b/frontend/src/app/skills/packs/[packId]/edit/page.tsx
index 76f46af..095924f 100644
--- a/frontend/src/app/skills/packs/[packId]/edit/page.tsx
+++ b/frontend/src/app/skills/packs/[packId]/edit/page.tsx
@@ -54,7 +54,7 @@ export default function EditSkillPackPage() {
       stickyHeader
     >
       {packQuery.isLoading ? (
-        <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
+        <div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
           Loading pack...
         </div>
       ) : packQuery.error ? (
@@ -62,7 +62,7 @@ export default function EditSkillPackPage() {
           {packQuery.error.message}
         </div>
       ) : !pack ? (
-        <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
+        <div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
           Pack not found.
         </div>
       ) : (
diff --git a/frontend/src/app/skills/packs/page.tsx b/frontend/src/app/skills/packs/page.tsx
index 2f07a56..551dce5 100644
--- a/frontend/src/app/skills/packs/page.tsx
+++ b/frontend/src/app/skills/packs/page.tsx
@@ -231,7 +231,7 @@ export default function SkillsPacksPage() {
         stickyHeader
       >
         <div className="space-y-6">
-          <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+          <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
             <SkillPacksTable
               packs={packs}
               isLoading={packsQuery.isLoading}
diff --git a/frontend/src/app/tags/[tagId]/edit/page.tsx b/frontend/src/app/tags/[tagId]/edit/page.tsx
index 466a28c..6c06246 100644
--- a/frontend/src/app/tags/[tagId]/edit/page.tsx
+++ b/frontend/src/app/tags/[tagId]/edit/page.tsx
@@ -60,7 +60,7 @@ export default function EditTagPage() {
       adminOnlyMessage="Only organization owners and admins can manage tags."
     >
       {tagQuery.isLoading ? (
-        <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
+        <div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
           Loading tag…
         </div>
       ) : tagQuery.error ? (
@@ -68,7 +68,7 @@ export default function EditTagPage() {
           {tagQuery.error.message}
         </div>
       ) : !tag ? (
-        <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
+        <div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
           Tag not found.
         </div>
       ) : (
diff --git a/frontend/src/app/tags/page.tsx b/frontend/src/app/tags/page.tsx
index ca5df69..c09861a 100644
--- a/frontend/src/app/tags/page.tsx
+++ b/frontend/src/app/tags/page.tsx
@@ -100,7 +100,7 @@ export default function TagsPage() {
         adminOnlyMessage="Only organization owners and admins can manage tags."
         stickyHeader
       >
-        <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
           <TagsTable
             tags={tags}
             isLoading={tagsQuery.isLoading}
diff --git a/frontend/src/components/BoardApprovalsPanel.tsx b/frontend/src/components/BoardApprovalsPanel.tsx
index 16c4687..8649288 100644
--- a/frontend/src/components/BoardApprovalsPanel.tsx
+++ b/frontend/src/components/BoardApprovalsPanel.tsx
@@ -134,14 +134,14 @@ const formatRubricTooltipValue = (
 
   return (
     <div className="flex w-full items-center justify-between gap-3">
-      <span className="flex items-center gap-2 text-slate-600">
+      <span className="flex items-center gap-2 text-muted-foreground">
         <span
           className="h-2.5 w-2.5 rounded-[2px]"
           style={{ backgroundColor: indicatorColor }}
         />
         <span>{label}</span>
       </span>
-      <span className="font-mono font-medium tabular-nums text-slate-900">
+      <span className="font-mono font-medium tabular-nums text-foreground">
         {displayValue}
       </span>
     </div>
@@ -554,11 +554,11 @@ export function BoardApprovalsPanel({
         </div>
       ) : null}
       {loadingState ? (
-        <p className="text-sm text-slate-500">Loading approvals…</p>
+        <p className="text-sm text-muted-foreground">Loading approvals…</p>
       ) : pendingCount === 0 && resolvedCount === 0 ? (
         <div
           className={cn(
-            "rounded-xl border border-dashed border-slate-200 bg-white px-6 py-10 text-center",
+            "rounded-xl border border-dashed border-border bg-card px-6 py-10 text-center",
             scrollable && "flex h-full items-center justify-center",
           )}
         >
@@ -566,10 +566,10 @@ export function BoardApprovalsPanel({
             <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
               <CheckCircle2 className="h-6 w-6" />
             </div>
-            <p className="mt-4 text-sm font-semibold text-slate-900">
+            <p className="mt-4 text-sm font-semibold text-foreground">
               All clear
             </p>
-            <p className="mt-2 text-sm text-slate-500">
+            <p className="mt-2 text-sm text-muted-foreground">
               No approvals to review right now. New approvals will show up here
               as soon as they arrive.
             </p>
@@ -584,15 +584,15 @@ export function BoardApprovalsPanel({
         >
           <div
             className={cn(
-              "overflow-hidden rounded-xl border border-slate-200 bg-white",
+              "overflow-hidden rounded-xl border border-border bg-card",
               scrollable && "flex min-h-0 flex-col",
             )}
           >
-            <div className="border-b border-slate-200 bg-slate-50 px-4 py-3">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+            <div className="border-b border-border bg-muted px-4 py-3">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                 Unapproved tasks
               </p>
-              <p className="mt-1 text-xs text-slate-500">
+              <p className="mt-1 text-xs text-muted-foreground">
                 {pendingCount} pending · {resolvedCount} resolved
               </p>
             </div>
@@ -632,13 +632,13 @@ export function BoardApprovalsPanel({
                     type="button"
                     onClick={() => setSelectedId(approval.id)}
                     className={cn(
-                      "w-full px-4 py-4 text-left transition hover:bg-slate-50",
+                      "w-full px-4 py-4 text-left transition hover:bg-muted",
                       isSelected && "bg-amber-50 border-l-2 border-amber-500",
                       !isPending && "opacity-60",
                     )}
                   >
                     <div className="flex items-start justify-between gap-3">
-                      <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">
+                      <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                         {humanizeAction(approval.action_type)}
                       </span>
                       <span
@@ -650,16 +650,16 @@ export function BoardApprovalsPanel({
                         {formatStatusLabel(approval.status)}
                       </span>
                     </div>
-                    <p className="mt-2 text-sm font-semibold text-slate-900">
+                    <p className="mt-2 text-sm font-semibold text-foreground">
                       {primaryLabel}
                     </p>
                     {boardText ? (
-                      <p className="mt-1 text-xs text-slate-500">
+                      <p className="mt-1 text-xs text-muted-foreground">
                         Board · {boardText}
                       </p>
                     ) : null}
-                    <div className="mt-2 flex items-center gap-2 text-xs text-slate-500">
-                      <span className="rounded bg-slate-100 px-1.5 py-0.5 font-semibold text-slate-700">
+                    <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
+                      <span className="rounded bg-accent px-1.5 py-0.5 font-semibold text-muted-foreground">
                         {approval.confidence}% score
                       </span>
                       <Clock className="h-3.5 w-3.5 opacity-60" />
@@ -673,19 +673,19 @@ export function BoardApprovalsPanel({
 
           <div
             className={cn(
-              "overflow-hidden rounded-xl border border-slate-200 bg-white",
+              "overflow-hidden rounded-xl border border-border bg-card",
               scrollable && "flex min-h-0 flex-col",
             )}
           >
-            <div className="border-b border-slate-200 bg-slate-50 px-4 py-3">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+            <div className="border-b border-border bg-muted px-4 py-3">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                 {selectedApproval?.status === "pending"
                   ? "Latest unapproved task"
                   : "Approval detail"}
               </p>
             </div>
             {!selectedApproval ? (
-              <div className="flex h-full items-center justify-center px-6 py-10 text-sm text-slate-500">
+              <div className="flex h-full items-center justify-center px-6 py-10 text-sm text-muted-foreground">
                 Select an approval to review details.
               </div>
             ) : (
@@ -755,10 +755,10 @@ export function BoardApprovalsPanel({
                   <div className="flex h-full flex-col gap-6 px-6 py-6">
                     <div className="flex flex-wrap items-start justify-between gap-3">
                       <div>
-                        <p className="text-lg font-semibold text-slate-900">
+                        <p className="text-lg font-semibold text-foreground">
                           {humanizeAction(selectedApproval.action_type)}
                         </p>
-                        <p className="mt-1 text-xs text-slate-500">
+                        <p className="mt-1 text-xs text-muted-foreground">
                           Requested{" "}
                           {formatTimestamp(selectedApproval.created_at)}
                         </p>
@@ -781,7 +781,7 @@ export function BoardApprovalsPanel({
                                 handleDecision(selectedApproval.id, "approved")
                               }
                               disabled={updatingId === selectedApproval.id}
-                              className="bg-slate-900 text-white hover:bg-slate-800"
+                              className="bg-foreground text-background hover:bg-foreground/90"
                             >
                               Approve
                             </Button>
@@ -792,7 +792,7 @@ export function BoardApprovalsPanel({
                                 handleDecision(selectedApproval.id, "rejected")
                               }
                               disabled={updatingId === selectedApproval.id}
-                              className="border-slate-300 text-slate-700 hover:bg-slate-100"
+                              className="border-input text-muted-foreground hover:bg-accent"
                             >
                               Reject
                             </Button>
@@ -801,17 +801,17 @@ export function BoardApprovalsPanel({
                       </div>
                     </div>
 
-                    <div className="flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
+                    <div className="flex items-center gap-3 rounded-lg border border-border bg-muted px-4 py-3">
                       <StatusDot
                         status={selectedApproval.status}
                         variant="approval"
                         className={cn("h-2 w-2 rounded-full")}
                       />
                       <div>
-                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                           Status
                         </p>
-                        <p className="text-sm font-medium text-slate-700">
+                        <p className="text-sm font-medium text-muted-foreground">
                           {formatStatusLabel(selectedApproval.status)} ·{" "}
                           {selectedApproval.status === "pending"
                             ? "Awaiting your decision"
@@ -822,10 +822,10 @@ export function BoardApprovalsPanel({
 
                     {titleText ? (
                       <div className="space-y-2">
-                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                           Title
                         </p>
-                        <div className="text-sm font-medium text-slate-900">
+                        <div className="text-sm font-medium text-foreground">
                           {titleText}
                         </div>
                       </div>
@@ -833,10 +833,10 @@ export function BoardApprovalsPanel({
 
                     {descriptionText ? (
                       <div className="space-y-2">
-                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                           Description
                         </p>
-                        <div className="rounded-lg border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700">
+                        <div className="rounded-lg border border-border bg-card px-4 py-3 text-sm text-muted-foreground">
                           {descriptionText}
                         </div>
                       </div>
@@ -844,10 +844,10 @@ export function BoardApprovalsPanel({
 
                     {reasoningText ? (
                       <div className="space-y-2">
-                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                           Lead reasoning
                         </p>
-                        <div className="rounded-lg border border-slate-200 bg-white px-4 py-3 text-sm text-slate-600">
+                        <div className="rounded-lg border border-border bg-card px-4 py-3 text-sm text-muted-foreground">
                           <p>{reasoningText}</p>
                         </div>
                       </div>
@@ -855,7 +855,7 @@ export function BoardApprovalsPanel({
 
                     {relatedTasks.length > 0 ? (
                       <div className="space-y-2">
-                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                           Related tasks
                         </p>
                         <div className="flex flex-wrap gap-2">
@@ -866,7 +866,7 @@ export function BoardApprovalsPanel({
                                 selectedApproval.board_id,
                                 task.id,
                               )}
-                              className="rounded-md border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 underline-offset-2 transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 hover:underline"
+                              className="rounded-md border border-border bg-card px-2 py-1 text-xs text-muted-foreground underline-offset-2 transition hover:border-input hover:bg-muted hover:text-foreground hover:underline"
                             >
                               {task.title}
                             </Link>
@@ -877,19 +877,19 @@ export function BoardApprovalsPanel({
 
                     {extraRows.length > 0 ? (
                       <div className="space-y-2">
-                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                           Details
                         </p>
                         <div className="grid gap-3 sm:grid-cols-2">
                           {extraRows.map((row) => (
                             <div
                               key={`${selectedApproval.id}-${row.label}`}
-                              className="rounded-lg border border-slate-200 bg-white px-3 py-2"
+                              className="rounded-lg border border-border bg-card px-3 py-2"
                             >
-                              <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">
+                              <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                                 {row.label}
                               </p>
-                              <p className="mt-1 text-sm font-medium text-slate-900">
+                              <p className="mt-1 text-sm font-medium text-foreground">
                                 {row.value}
                               </p>
                             </div>
@@ -900,7 +900,7 @@ export function BoardApprovalsPanel({
 
                     {hasRubric ? (
                       <div className="space-y-4">
-                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                           Rubric scores
                         </p>
                         <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
@@ -915,11 +915,11 @@ export function BoardApprovalsPanel({
                                     className="h-2.5 w-2.5 rounded-full"
                                     style={{ backgroundColor: entry.fill }}
                                   />
-                                  <span className="text-slate-700">
+                                  <span className="text-muted-foreground">
                                     {entry.name}
                                   </span>
                                 </div>
-                                <span className="font-medium tabular-nums text-slate-900">
+                                <span className="font-medium tabular-nums text-foreground">
                                   {entry.percentLabel}
                                 </span>
                               </div>
diff --git a/frontend/src/components/BoardChatComposer.tsx b/frontend/src/components/BoardChatComposer.tsx
index 3111130..bfc6a0d 100644
--- a/frontend/src/components/BoardChatComposer.tsx
+++ b/frontend/src/components/BoardChatComposer.tsx
@@ -227,7 +227,7 @@ function BoardChatComposerImpl({
           disabled={isSending || disabled}
         />
         {mentionTarget && filteredMentionOptions.length > 0 ? (
-          <div className="absolute bottom-full left-0 z-20 mb-2 w-full overflow-hidden rounded-xl border border-slate-200 bg-white shadow-lg">
+          <div className="absolute bottom-full left-0 z-20 mb-2 w-full overflow-hidden rounded-xl border border-border bg-card shadow-lg">
             <div className="max-h-52 overflow-y-auto py-1">
               {filteredMentionOptions.map((option, index) => (
                 <button
@@ -239,12 +239,12 @@ function BoardChatComposerImpl({
                   }}
                   className={`flex w-full items-center justify-between px-3 py-2 text-left text-sm transition ${
                     index === activeIndex
-                      ? "bg-slate-100 text-slate-900"
-                      : "text-slate-700 hover:bg-slate-50"
+                      ? "bg-accent text-foreground"
+                      : "text-muted-foreground hover:bg-muted"
                   }`}
                 >
                   <span className="font-mono">@{option}</span>
-                  <span className="text-xs text-slate-400">mention</span>
+                  <span className="text-xs text-muted-foreground/70">mention</span>
                 </button>
               ))}
             </div>
diff --git a/frontend/src/components/BoardOnboardingChat.tsx b/frontend/src/components/BoardOnboardingChat.tsx
index 66047dd..b3e78d2 100644
--- a/frontend/src/components/BoardOnboardingChat.tsx
+++ b/frontend/src/components/BoardOnboardingChat.tsx
@@ -392,13 +392,13 @@ export function BoardOnboardingChat({
 
       {draft ? (
         <div className="space-y-3">
-          <p className="text-sm text-slate-600">
+          <p className="text-sm text-muted-foreground">
             Review the lead agent draft and confirm.
           </p>
           {isAwaitingAgent ? (
-            <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
-              <div className="flex items-center gap-2 font-medium text-slate-900">
-                <RefreshCcw className="h-4 w-4 animate-spin text-slate-500" />
+            <div className="rounded-xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
+              <div className="flex items-center gap-2 font-medium text-foreground">
+                <RefreshCcw className="h-4 w-4 animate-spin text-muted-foreground" />
                 <span>
                   {awaitingKind === "extra_context"
                     ? "Updating the draft…"
@@ -406,80 +406,80 @@ export function BoardOnboardingChat({
                 </span>
               </div>
               {lastSubmittedAnswer ? (
-                <p className="mt-2 text-xs text-slate-600">
+                <p className="mt-2 text-xs text-muted-foreground">
                   Sent:{" "}
-                  <span className="font-medium text-slate-900">
+                  <span className="font-medium text-foreground">
                     {lastSubmittedAnswer}
                   </span>
                 </p>
               ) : null}
-              <p className="mt-1 text-xs text-slate-500">
+              <p className="mt-1 text-xs text-muted-foreground">
                 This usually takes a few seconds.
               </p>
             </div>
           ) : null}
-          <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm">
-            <p className="font-semibold text-slate-900">Objective</p>
-            <p className="text-slate-700">{draft.objective || "—"}</p>
-            <p className="mt-3 font-semibold text-slate-900">Success metrics</p>
-            <pre className="mt-1 whitespace-pre-wrap text-xs text-slate-600">
+          <div className="rounded-lg border border-border bg-muted p-3 text-sm">
+            <p className="font-semibold text-foreground">Objective</p>
+            <p className="text-muted-foreground">{draft.objective || "—"}</p>
+            <p className="mt-3 font-semibold text-foreground">Success metrics</p>
+            <pre className="mt-1 whitespace-pre-wrap text-xs text-muted-foreground">
               {JSON.stringify(draft.success_metrics ?? {}, null, 2)}
             </pre>
-            <p className="mt-3 font-semibold text-slate-900">Target date</p>
-            <p className="text-slate-700">{draft.target_date || "—"}</p>
-            <p className="mt-3 font-semibold text-slate-900">Board type</p>
-            <p className="text-slate-700">{draft.board_type || "goal"}</p>
+            <p className="mt-3 font-semibold text-foreground">Target date</p>
+            <p className="text-muted-foreground">{draft.target_date || "—"}</p>
+            <p className="mt-3 font-semibold text-foreground">Board type</p>
+            <p className="text-muted-foreground">{draft.board_type || "goal"}</p>
             {draft.user_profile ? (
               <>
-                <p className="mt-4 font-semibold text-slate-900">
+                <p className="mt-4 font-semibold text-foreground">
                   User profile
                 </p>
-                <p className="text-slate-700">
-                  <span className="font-medium text-slate-900">
+                <p className="text-muted-foreground">
+                  <span className="font-medium text-foreground">
                     Preferred name:
                   </span>{" "}
                   {draft.user_profile.preferred_name || "—"}
                 </p>
-                <p className="text-slate-700">
-                  <span className="font-medium text-slate-900">Pronouns:</span>{" "}
+                <p className="text-muted-foreground">
+                  <span className="font-medium text-foreground">Pronouns:</span>{" "}
                   {draft.user_profile.pronouns || "—"}
                 </p>
-                <p className="text-slate-700">
-                  <span className="font-medium text-slate-900">Timezone:</span>{" "}
+                <p className="text-muted-foreground">
+                  <span className="font-medium text-foreground">Timezone:</span>{" "}
                   {draft.user_profile.timezone || "—"}
                 </p>
               </>
             ) : null}
             {draft.lead_agent ? (
               <>
-                <p className="mt-4 font-semibold text-slate-900">
+                <p className="mt-4 font-semibold text-foreground">
                   Lead agent preferences
                 </p>
-                <p className="text-slate-700">
-                  <span className="font-medium text-slate-900">Name:</span>{" "}
+                <p className="text-muted-foreground">
+                  <span className="font-medium text-foreground">Name:</span>{" "}
                   {draft.lead_agent.name || "—"}
                 </p>
-                <p className="text-slate-700">
-                  <span className="font-medium text-slate-900">Role:</span>{" "}
+                <p className="text-muted-foreground">
+                  <span className="font-medium text-foreground">Role:</span>{" "}
                   {draft.lead_agent.identity_profile?.role || "—"}
                 </p>
-                <p className="text-slate-700">
-                  <span className="font-medium text-slate-900">
+                <p className="text-muted-foreground">
+                  <span className="font-medium text-foreground">
                     Communication:
                   </span>{" "}
                   {draft.lead_agent.identity_profile?.communication_style ||
                     "—"}
                 </p>
-                <p className="text-slate-700">
-                  <span className="font-medium text-slate-900">Emoji:</span>{" "}
+                <p className="text-muted-foreground">
+                  <span className="font-medium text-foreground">Emoji:</span>{" "}
                   {draft.lead_agent.identity_profile?.emoji || "—"}
                 </p>
               </>
             ) : null}
           </div>
-          <div className="rounded-lg border border-slate-200 bg-white p-3">
+          <div className="rounded-lg border border-border bg-card p-3">
             <div className="flex items-center justify-between gap-2">
-              <p className="text-sm font-semibold text-slate-900">
+              <p className="text-sm font-semibold text-foreground">
                 Extra context (optional)
               </p>
               <Button
@@ -527,12 +527,12 @@ export function BoardOnboardingChat({
                         : "Send context"}
                   </Button>
                 </div>
-                <p className="text-xs text-slate-500">
+                <p className="text-xs text-muted-foreground">
                   Tip: press Enter to send. Shift+Enter for a newline.
                 </p>
               </div>
             ) : (
-              <p className="mt-2 text-xs text-slate-600">
+              <p className="mt-2 text-xs text-muted-foreground">
                 Add anything that wasn&apos;t covered in the agent&apos;s
                 questions.
               </p>
@@ -550,13 +550,13 @@ export function BoardOnboardingChat({
         </div>
       ) : question ? (
         <div className="space-y-3">
-          <p className="text-sm font-medium text-slate-900">
+          <p className="text-sm font-medium text-foreground">
             {question.question}
           </p>
           {isAwaitingAgent ? (
-            <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
-              <div className="flex items-center gap-2 font-medium text-slate-900">
-                <RefreshCcw className="h-4 w-4 animate-spin text-slate-500" />
+            <div className="rounded-xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
+              <div className="flex items-center gap-2 font-medium text-foreground">
+                <RefreshCcw className="h-4 w-4 animate-spin text-muted-foreground" />
                 <span>
                   {awaitingKind === "extra_context"
                     ? "Updating the draft…"
@@ -564,14 +564,14 @@ export function BoardOnboardingChat({
                 </span>
               </div>
               {lastSubmittedAnswer ? (
-                <p className="mt-2 text-xs text-slate-600">
+                <p className="mt-2 text-xs text-muted-foreground">
                   Sent:{" "}
-                  <span className="font-medium text-slate-900">
+                  <span className="font-medium text-foreground">
                     {lastSubmittedAnswer}
                   </span>
                 </p>
               ) : null}
-              <p className="mt-1 text-xs text-slate-500">
+              <p className="mt-1 text-xs text-muted-foreground">
                 This usually takes a few seconds.
               </p>
             </div>
@@ -611,7 +611,7 @@ export function BoardOnboardingChat({
                 }}
                 disabled={loading || isAwaitingAgent}
               />
-              <p className="text-xs text-slate-500">
+              <p className="text-xs text-muted-foreground">
                 Tip: press Enter to send. Shift+Enter for a newline.
               </p>
             </div>
@@ -631,16 +631,16 @@ export function BoardOnboardingChat({
               {loading ? "Sending..." : isAwaitingAgent ? "Waiting..." : "Next"}
             </Button>
             {loading ? (
-              <p className="text-xs text-slate-500">Sending your answer…</p>
+              <p className="text-xs text-muted-foreground">Sending your answer…</p>
             ) : isAwaitingAgent ? (
-              <p className="text-xs text-slate-500">
+              <p className="text-xs text-muted-foreground">
                 Waiting for the agent to respond…
               </p>
             ) : null}
           </div>
         </div>
       ) : (
-        <div className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm text-slate-600">
+        <div className="rounded-lg border border-border bg-muted p-3 text-sm text-muted-foreground">
           {loading
             ? "Waiting for the lead agent..."
             : "Preparing onboarding..."}
diff --git a/frontend/src/components/activity/ActivityFeed.tsx b/frontend/src/components/activity/ActivityFeed.tsx
index efdaa4f..a05d483 100644
--- a/frontend/src/components/activity/ActivityFeed.tsx
+++ b/frontend/src/components/activity/ActivityFeed.tsx
@@ -18,13 +18,13 @@ export function ActivityFeed<TItem extends FeedItem>({
   renderItem,
 }: ActivityFeedProps<TItem>) {
   if (isLoading && items.length === 0) {
-    return <p className="text-sm text-slate-500">Loading feed…</p>;
+    return <p className="text-sm text-muted-foreground">Loading feed…</p>;
   }
 
   const hasError = errorMessage !== null && errorMessage !== undefined;
   if (hasError) {
     return (
-      <div className="rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm">
+      <div className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground shadow-sm">
         {errorMessage || "Unable to load feed."}
       </div>
     );
@@ -32,11 +32,11 @@ export function ActivityFeed<TItem extends FeedItem>({
 
   if (items.length === 0) {
     return (
-      <div className="rounded-xl border border-slate-200 bg-white p-10 text-center shadow-sm">
-        <p className="text-sm font-medium text-slate-900">
+      <div className="rounded-xl border border-border bg-card p-10 text-center shadow-sm">
+        <p className="text-sm font-medium text-foreground">
           Waiting for new activity…
         </p>
-        <p className="mt-1 text-sm text-slate-500">
+        <p className="mt-1 text-sm text-muted-foreground">
           When updates happen, they will show up here.
         </p>
       </div>
diff --git a/frontend/src/components/agents/AgentsTable.tsx b/frontend/src/components/agents/AgentsTable.tsx
index 9123ad8..e96888f 100644
--- a/frontend/src/components/agents/AgentsTable.tsx
+++ b/frontend/src/components/agents/AgentsTable.tsx
@@ -46,7 +46,7 @@ type AgentsTableProps = {
 
 const DEFAULT_EMPTY_ICON = (
   <svg
-    className="h-16 w-16 text-slate-300"
+    className="h-16 w-16 text-muted-foreground/50"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
@@ -120,7 +120,7 @@ export function AgentsTable({
         accessorKey: "openclaw_session_id",
         header: "Session",
         cell: ({ row }) => (
-          <span className="text-sm text-slate-700">
+          <span className="text-sm text-muted-foreground">
             {truncate(row.original.openclaw_session_id)}
           </span>
         ),
@@ -131,7 +131,7 @@ export function AgentsTable({
         cell: ({ row }) => {
           const boardId = row.original.board_id;
           if (!boardId) {
-            return <span className="text-sm text-slate-700">—</span>;
+            return <span className="text-sm text-muted-foreground">—</span>;
           }
           const boardName = boardNameById.get(boardId) ?? boardId;
           return linkifyCell({
@@ -186,7 +186,7 @@ export function AgentsTable({
             }
           : undefined
       }
-      rowClassName="hover:bg-slate-50"
+      rowClassName="hover:bg-muted"
       cellClassName="px-6 py-4"
       emptyState={
         emptyState
diff --git a/frontend/src/components/atoms/Markdown.tsx b/frontend/src/components/atoms/Markdown.tsx
index afefb92..20ca503 100644
--- a/frontend/src/components/atoms/Markdown.tsx
+++ b/frontend/src/components/atoms/Markdown.tsx
@@ -108,7 +108,7 @@ const MARKDOWN_CODE_COMPONENTS: Components = {
   pre: ({ node: _node, className, ...props }) => (
     <pre
       className={cn(
-        "my-3 overflow-x-auto rounded-lg bg-slate-950 p-3 text-xs leading-relaxed text-slate-100",
+        "my-3 overflow-x-auto rounded-lg bg-foreground p-3 text-xs leading-relaxed text-background",
         className,
       )}
       {...props}
@@ -134,7 +134,7 @@ const MARKDOWN_CODE_COMPONENTS: Components = {
       return (
         <code
           className={cn(
-            "rounded bg-slate-100 px-1 py-0.5 font-mono text-[0.85em] text-slate-900",
+            "rounded bg-accent px-1 py-0.5 font-mono text-[0.85em] text-foreground",
             className,
           )}
           {...props}
@@ -160,7 +160,7 @@ const MARKDOWN_TABLE_COMPONENTS: Components = {
     </div>
   ),
   thead: ({ node: _node, className, ...props }) => (
-    <thead className={cn("bg-slate-50", className)} {...props} />
+    <thead className={cn("bg-muted", className)} {...props} />
   ),
   tbody: ({ node: _node, className, ...props }) => (
     <tbody className={cn("divide-y divide-slate-100", className)} {...props} />
@@ -171,7 +171,7 @@ const MARKDOWN_TABLE_COMPONENTS: Components = {
   th: ({ node: _node, className, children, ...props }) => (
     <th
       className={cn(
-        "border border-slate-200 px-3 py-2 text-left text-xs font-semibold",
+        "border border-border px-3 py-2 text-left text-xs font-semibold",
         className,
       )}
       {...props}
@@ -181,7 +181,7 @@ const MARKDOWN_TABLE_COMPONENTS: Components = {
   ),
   td: ({ node: _node, className, children, ...props }) => (
     <td
-      className={cn("border border-slate-200 px-3 py-2 align-top", className)}
+      className={cn("border border-border px-3 py-2 align-top", className)}
       {...props}
     >
       {renderMentions(children)}
diff --git a/frontend/src/components/atoms/PipelineIcon.tsx b/frontend/src/components/atoms/PipelineIcon.tsx
index a885184..d04a8e6 100644
--- a/frontend/src/components/atoms/PipelineIcon.tsx
+++ b/frontend/src/components/atoms/PipelineIcon.tsx
@@ -9,7 +9,7 @@ export function PipelineIcon({ className }: PipelineIconProps) {
     <div
       className={
         className ??
-        "grid h-10 w-10 place-items-center rounded-lg bg-[color:var(--accent)] text-white shadow-sm"
+        "grid h-10 w-10 place-items-center rounded-lg bg-primary text-primary-foreground shadow-sm"
       }
       aria-hidden="true"
     >
diff --git a/frontend/src/components/atoms/StatusDot.tsx b/frontend/src/components/atoms/StatusDot.tsx
index 552d949..51237d0 100644
--- a/frontend/src/components/atoms/StatusDot.tsx
+++ b/frontend/src/components/atoms/StatusDot.tsx
@@ -8,7 +8,7 @@ const AGENT_STATUS_DOT_CLASS_BY_STATUS: Record<string, string> = {
   provisioning: "bg-amber-500",
   updating: "bg-sky-500",
   deleting: "bg-rose-500",
-  offline: "bg-slate-400",
+  offline: "bg-muted-foreground",
 };
 
 const APPROVAL_STATUS_DOT_CLASS_BY_STATUS: Record<string, string> = {
@@ -18,7 +18,7 @@ const APPROVAL_STATUS_DOT_CLASS_BY_STATUS: Record<string, string> = {
 };
 
 const TASK_STATUS_DOT_CLASS_BY_STATUS: Record<string, string> = {
-  inbox: "bg-slate-400",
+  inbox: "bg-muted-foreground",
   in_progress: "bg-purple-500",
   review: "bg-indigo-500",
   done: "bg-emerald-500",
@@ -34,9 +34,9 @@ const STATUS_DOT_CLASS_BY_VARIANT: Record<
 };
 
 const DEFAULT_STATUS_DOT_CLASS: Record<StatusDotVariant, string> = {
-  agent: "bg-slate-300",
+  agent: "bg-muted-foreground/40",
   approval: "bg-amber-500",
-  task: "bg-slate-300",
+  task: "bg-muted-foreground/40",
 };
 
 export const statusDotClass = (
diff --git a/frontend/src/components/auth/AdminOnlyNotice.tsx b/frontend/src/components/auth/AdminOnlyNotice.tsx
index 26a73b7..f37c064 100644
--- a/frontend/src/components/auth/AdminOnlyNotice.tsx
+++ b/frontend/src/components/auth/AdminOnlyNotice.tsx
@@ -4,7 +4,7 @@ type AdminOnlyNoticeProps = {
 
 export function AdminOnlyNotice({ message }: AdminOnlyNoticeProps) {
   return (
-    <div className="rounded-xl border border-slate-200 bg-white px-6 py-5 text-sm text-slate-600 shadow-sm">
+    <div className="rounded-xl border border-border bg-card px-6 py-5 text-sm text-muted-foreground shadow-sm">
       {message}
     </div>
   );
diff --git a/frontend/src/components/auth/SignedOutPanel.tsx b/frontend/src/components/auth/SignedOutPanel.tsx
index f3912cf..6819540 100644
--- a/frontend/src/components/auth/SignedOutPanel.tsx
+++ b/frontend/src/components/auth/SignedOutPanel.tsx
@@ -20,9 +20,9 @@ export function SignedOutPanel({
   buttonTestId,
 }: SignedOutPanelProps) {
   return (
-    <div className="col-span-1 md:col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
-      <div className="rounded-xl border border-slate-200 bg-white px-4 py-4 md:px-8 md:py-6 shadow-sm">
-        <p className="text-sm text-slate-600">{message}</p>
+    <div className="col-span-1 md:col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-muted p-10 text-center">
+      <div className="rounded-xl border border-border bg-card px-4 py-4 md:px-8 md:py-6 shadow-sm">
+        <p className="text-sm text-muted-foreground">{message}</p>
         <SignInButton
           mode={mode}
           forceRedirectUrl={forceRedirectUrl}
diff --git a/frontend/src/components/board-groups/BoardGroupsTable.tsx b/frontend/src/components/board-groups/BoardGroupsTable.tsx
index 3d1bd9f..64993f2 100644
--- a/frontend/src/components/board-groups/BoardGroupsTable.tsx
+++ b/frontend/src/components/board-groups/BoardGroupsTable.tsx
@@ -37,7 +37,7 @@ type BoardGroupsTableProps = {
 
 const DEFAULT_EMPTY_ICON = (
   <svg
-    className="h-16 w-16 text-slate-300"
+    className="h-16 w-16 text-muted-foreground/50"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
@@ -94,8 +94,8 @@ export function BoardGroupsTable({
             label: row.original.name,
             subtitle: row.original.description ?? "No description",
             subtitleClassName: row.original.description
-              ? "mt-1 line-clamp-2 text-xs text-slate-500"
-              : "mt-1 text-xs text-slate-400",
+              ? "mt-1 line-clamp-2 text-xs text-muted-foreground"
+              : "mt-1 text-xs text-muted-foreground/70",
           }),
       },
       {
@@ -129,7 +129,7 @@ export function BoardGroupsTable({
       isLoading={isLoading}
       stickyHeader={stickyHeader}
       emptyMessage={emptyMessage}
-      rowClassName="transition hover:bg-slate-50"
+      rowClassName="transition hover:bg-muted"
       cellClassName="px-3 py-3 md:px-6 md:py-4 align-top"
       rowActions={
         showActions
diff --git a/frontend/src/components/boards/BoardsTable.tsx b/frontend/src/components/boards/BoardsTable.tsx
index ebe956a..70388b9 100644
--- a/frontend/src/components/boards/BoardsTable.tsx
+++ b/frontend/src/components/boards/BoardsTable.tsx
@@ -38,7 +38,7 @@ type BoardsTableProps = {
 
 const DEFAULT_EMPTY_ICON = (
   <svg
-    className="h-16 w-16 text-slate-300"
+    className="h-16 w-16 text-muted-foreground/50"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
@@ -117,7 +117,7 @@ export function BoardsTable({
         cell: ({ row }) => {
           const groupId = row.original.board_group_id;
           if (!groupId) {
-            return <span className="text-sm text-slate-400">—</span>;
+            return <span className="text-sm text-muted-foreground/70">—</span>;
           }
           const group = groupById.get(groupId);
           const label = group?.name ?? compactId(groupId);
@@ -161,7 +161,7 @@ export function BoardsTable({
       isLoading={isLoading}
       stickyHeader={stickyHeader}
       emptyMessage={emptyMessage}
-      rowClassName="transition hover:bg-slate-50"
+      rowClassName="transition hover:bg-muted"
       cellClassName="px-3 py-3 md:px-6 md:py-4 align-top"
       rowActions={
         showActions
diff --git a/frontend/src/components/charts/chart.tsx b/frontend/src/components/charts/chart.tsx
index 46ebfc1..1cd2c5e 100644
--- a/frontend/src/components/charts/chart.tsx
+++ b/frontend/src/components/charts/chart.tsx
@@ -314,10 +314,10 @@ function ChartTooltipCard({
     <ChartTooltipContent
       {...props}
       className={cn(
-        "border border-gray-200 bg-white px-3 py-2 text-sm shadow-lg",
+        "border border-border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-lg",
         className,
       )}
-      labelClassName={cn("text-sm font-semibold text-gray-900", labelClassName)}
+      labelClassName={cn("text-sm font-semibold text-foreground", labelClassName)}
     />
   );
 }
@@ -439,7 +439,7 @@ function ChartLegendItem({
       aria-pressed={!isHidden}
       onClick={handleClick}
       className={cn(
-        "flex items-center gap-2 text-gray-600 transition-opacity [&>svg]:h-3 [&>svg]:w-3 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60",
+        "flex items-center gap-2 text-muted-foreground transition-opacity [&>svg]:h-3 [&>svg]:w-3 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60",
         isHidden && "opacity-50",
         className,
       )}
@@ -453,7 +453,7 @@ function ChartLegendItem({
           style={{ backgroundColor: resolvedColor }}
         />
       )}
-      <span className={cn(isHidden && "line-through text-gray-400")}>
+      <span className={cn(isHidden && "line-through text-muted-foreground/70")}>
         {resolvedLabel}
       </span>
     </button>
diff --git a/frontend/src/components/charts/metric-sparkline.tsx b/frontend/src/components/charts/metric-sparkline.tsx
index 783c9ea..ab55788 100644
--- a/frontend/src/components/charts/metric-sparkline.tsx
+++ b/frontend/src/components/charts/metric-sparkline.tsx
@@ -65,7 +65,7 @@ const SparklineTooltip = ({
           : "Day";
   const prefix = resolvedLabel ?? (dayIndex ? `${label} ${dayIndex}` : "");
   return (
-    <div className="rounded-md border border-gray-200 bg-white px-2 py-1 text-xs font-medium text-gray-700 shadow-sm">
+    <div className="rounded-md border border-border bg-popover px-2 py-1 text-xs font-medium text-popover-foreground shadow-sm">
       {prefix ? `${prefix}: ` : ""}
       {formatSparkValue(rawValue)}
     </div>
@@ -85,8 +85,8 @@ export default function MetricSparkline({
   }
 
   const data = buildSparkData(values);
-  const strokeColor = "#60a5fa";
-  const fillColor = "#bfdbfe";
+  const strokeColor = "var(--accent)";
+  const fillColor = "var(--accent-soft)";
 
   return (
     <div className={cn("h-8 w-full", className)}>
diff --git a/frontend/src/components/custom-fields/CustomFieldForm.tsx b/frontend/src/components/custom-fields/CustomFieldForm.tsx
index 80c4d2f..d31fccd 100644
--- a/frontend/src/components/custom-fields/CustomFieldForm.tsx
+++ b/frontend/src/components/custom-fields/CustomFieldForm.tsx
@@ -93,15 +93,15 @@ export function CustomFieldForm({
   return (
     <form
       onSubmit={handleSubmit}
-      className="max-w-3xl rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
+      className="max-w-3xl rounded-xl border border-border bg-card p-6 shadow-sm space-y-6"
     >
       <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
           Basic configuration
         </p>
         <div className="mt-4 grid gap-6 md:grid-cols-2">
           <label className="space-y-1">
-            <span className="text-sm font-semibold text-slate-900">
+            <span className="text-sm font-semibold text-foreground">
               Field key
             </span>
             <Input
@@ -118,14 +118,14 @@ export function CustomFieldForm({
               required={mode === "create"}
             />
             {mode === "edit" ? (
-              <span className="text-xs text-slate-500">
+              <span className="text-xs text-muted-foreground">
                 Field key cannot be changed after creation.
               </span>
             ) : null}
           </label>
 
           <label className="space-y-1">
-            <span className="text-sm font-semibold text-slate-900">Label</span>
+            <span className="text-sm font-semibold text-foreground">Label</span>
             <Input
               value={formState.label}
               onChange={(event) =>
@@ -138,7 +138,7 @@ export function CustomFieldForm({
           </label>
 
           <label className="space-y-1">
-            <span className="text-sm font-semibold text-slate-900">
+            <span className="text-sm font-semibold text-foreground">
               Field type
             </span>
             <Select
@@ -165,7 +165,7 @@ export function CustomFieldForm({
           </label>
 
           <label className="space-y-1">
-            <span className="text-sm font-semibold text-slate-900">
+            <span className="text-sm font-semibold text-foreground">
               UI visible
             </span>
             <Select
@@ -192,7 +192,7 @@ export function CustomFieldForm({
           </label>
         </div>
 
-        <label className="mt-4 flex items-center gap-2 text-sm text-slate-700">
+        <label className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
           <input
             type="checkbox"
             checked={formState.required}
@@ -209,12 +209,12 @@ export function CustomFieldForm({
       </div>
 
       <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
           Validation and defaults
         </p>
         <div className="mt-4 space-y-4">
           <label className="space-y-1">
-            <span className="text-sm font-semibold text-slate-900">
+            <span className="text-sm font-semibold text-foreground">
               Validation regex
             </span>
             <Input
@@ -231,13 +231,13 @@ export function CustomFieldForm({
                 !STRING_VALIDATION_FIELD_TYPES.has(formState.fieldType)
               }
             />
-            <p className="text-xs text-slate-500">
+            <p className="text-xs text-muted-foreground">
               Supported for text/date/date-time/url fields.
             </p>
           </label>
 
           <label className="space-y-1">
-            <span className="text-sm font-semibold text-slate-900">
+            <span className="text-sm font-semibold text-foreground">
               Default value
             </span>
             <Textarea
@@ -255,7 +255,7 @@ export function CustomFieldForm({
           </label>
 
           <label className="space-y-1">
-            <span className="text-sm font-semibold text-slate-900">
+            <span className="text-sm font-semibold text-foreground">
               Description
             </span>
             <Textarea
@@ -276,10 +276,10 @@ export function CustomFieldForm({
 
       <div>
         <div className="flex flex-wrap items-center justify-between gap-2">
-          <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
             Board bindings
           </p>
-          <span className="text-xs text-slate-500">
+          <span className="text-xs text-muted-foreground">
             {selectedBoardIds.size} selected
           </span>
         </div>
@@ -290,9 +290,9 @@ export function CustomFieldForm({
             placeholder="Search boards..."
             disabled={isSubmitting}
           />
-          <div className="max-h-64 overflow-auto rounded-xl border border-slate-200 bg-slate-50/40">
+          <div className="max-h-64 overflow-auto rounded-xl border border-border bg-muted/40">
             {boardsLoading ? (
-              <div className="px-4 py-6 text-sm text-slate-500">
+              <div className="px-4 py-6 text-sm text-muted-foreground">
                 Loading boards…
               </div>
             ) : boardsError ? (
@@ -300,7 +300,7 @@ export function CustomFieldForm({
                 {boardsError}
               </div>
             ) : filteredBoards.length === 0 ? (
-              <div className="px-4 py-6 text-sm text-slate-500">
+              <div className="px-4 py-6 text-sm text-muted-foreground">
                 No boards found.
               </div>
             ) : (
@@ -312,7 +312,7 @@ export function CustomFieldForm({
                       <label className="flex cursor-pointer items-start gap-3">
                         <input
                           type="checkbox"
-                          className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600"
+                          className="mt-1 h-4 w-4 rounded border-input text-primary"
                           checked={checked}
                           onChange={() => {
                             setSelectedBoardIds((prev) => {
@@ -328,10 +328,10 @@ export function CustomFieldForm({
                           disabled={isSubmitting}
                         />
                         <div className="min-w-0">
-                          <p className="truncate text-sm font-medium text-slate-900">
+                          <p className="truncate text-sm font-medium text-foreground">
                             {board.name}
                           </p>
-                          <p className="mt-1 text-xs text-slate-500">
+                          <p className="mt-1 text-xs text-muted-foreground">
                             {board.slug}
                           </p>
                         </div>
@@ -342,7 +342,7 @@ export function CustomFieldForm({
               </ul>
             )}
           </div>
-          <p className="text-xs text-slate-500">
+          <p className="text-xs text-muted-foreground">
             Required. The custom field appears on tasks in selected boards.
           </p>
         </div>
diff --git a/frontend/src/components/custom-fields/CustomFieldsTable.tsx b/frontend/src/components/custom-fields/CustomFieldsTable.tsx
index 1fd3baf..7589b5b 100644
--- a/frontend/src/components/custom-fields/CustomFieldsTable.tsx
+++ b/frontend/src/components/custom-fields/CustomFieldsTable.tsx
@@ -33,7 +33,7 @@ type CustomFieldsTableProps = {
 
 const DEFAULT_EMPTY_ICON = (
   <svg
-    className="h-16 w-16 text-slate-300"
+    className="h-16 w-16 text-muted-foreground/50"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
@@ -77,13 +77,13 @@ export function CustomFieldsTable({
         header: "Field",
         cell: ({ row }) => (
           <div>
-            <p className="text-sm font-semibold text-slate-900">
+            <p className="text-sm font-semibold text-foreground">
               {row.original.label || row.original.field_key}
             </p>
-            <p className="mt-1 font-mono text-xs text-slate-500">
+            <p className="mt-1 font-mono text-xs text-muted-foreground">
               key: {row.original.field_key}
             </p>
-            <p className="mt-1 text-xs text-slate-500">
+            <p className="mt-1 text-xs text-muted-foreground">
               {row.original.description || "No description"}
             </p>
           </div>
@@ -93,7 +93,7 @@ export function CustomFieldsTable({
         accessorKey: "required",
         header: "Required",
         cell: ({ row }) => (
-          <span className="text-sm text-slate-700">
+          <span className="text-sm text-muted-foreground">
             {row.original.required === true ? "Required" : "Optional"}
           </span>
         ),
@@ -102,7 +102,7 @@ export function CustomFieldsTable({
         accessorKey: "field_type",
         header: "Type",
         cell: ({ row }) => (
-          <span className="text-sm text-slate-700">
+          <span className="text-sm text-muted-foreground">
             {row.original.field_type}
           </span>
         ),
@@ -111,7 +111,7 @@ export function CustomFieldsTable({
         accessorKey: "ui_visibility",
         header: "UI visible",
         cell: ({ row }) => (
-          <span className="text-sm text-slate-700">
+          <span className="text-sm text-muted-foreground">
             {row.original.ui_visibility}
           </span>
         ),
@@ -121,7 +121,7 @@ export function CustomFieldsTable({
         header: "Default value",
         enableSorting: false,
         cell: ({ row }) => (
-          <p className="font-mono text-xs break-all text-slate-700">
+          <p className="font-mono text-xs break-all text-muted-foreground">
             {formatCustomFieldDefaultValue(row.original.default_value) || "—"}
           </p>
         ),
@@ -152,7 +152,7 @@ export function CustomFieldsTable({
       table={table}
       isLoading={isLoading}
       stickyHeader={stickyHeader}
-      rowClassName="transition hover:bg-slate-50"
+      rowClassName="transition hover:bg-muted"
       cellClassName="px-6 py-4 align-top"
       rowActions={
         editHref || onDelete
diff --git a/frontend/src/components/gateways/GatewayForm.tsx b/frontend/src/components/gateways/GatewayForm.tsx
index 5e36599..58a6977 100644
--- a/frontend/src/components/gateways/GatewayForm.tsx
+++ b/frontend/src/components/gateways/GatewayForm.tsx
@@ -60,10 +60,10 @@ export function GatewayForm({
   return (
     <form
       onSubmit={onSubmit}
-      className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
+      className="space-y-6 rounded-xl border border-border bg-card p-6 shadow-sm"
     >
       <div className="space-y-2">
-        <label className="text-sm font-medium text-slate-900">
+        <label className="text-sm font-medium text-foreground">
           Gateway name <span className="text-red-500">*</span>
         </label>
         <Input
@@ -76,7 +76,7 @@ export function GatewayForm({
 
       <div className="grid gap-6 md:grid-cols-2">
         <div className="space-y-2">
-          <label className="text-sm font-medium text-slate-900">
+          <label className="text-sm font-medium text-foreground">
             Gateway URL <span className="text-red-500">*</span>
           </label>
           <div className="relative">
@@ -95,7 +95,7 @@ export function GatewayForm({
           ) : null}
         </div>
         <div className="space-y-2">
-          <label className="text-sm font-medium text-slate-900">
+          <label className="text-sm font-medium text-foreground">
             Gateway token
           </label>
           <Input
@@ -109,7 +109,7 @@ export function GatewayForm({
 
       <div className="grid gap-6 md:grid-cols-2">
         <div className="space-y-2">
-          <label className="text-sm font-medium text-slate-900">
+          <label className="text-sm font-medium text-foreground">
             Workspace root <span className="text-red-500">*</span>
           </label>
           <Input
@@ -121,10 +121,10 @@ export function GatewayForm({
         </div>
 
         <div className="space-y-2">
-          <label className="text-sm font-medium text-slate-900">
+          <label className="text-sm font-medium text-foreground">
             Disable device pairing
           </label>
-          <label className="flex h-10 items-center gap-3 px-1 text-sm text-slate-900">
+          <label className="flex h-10 items-center gap-3 px-1 text-sm text-foreground">
             <button
               type="button"
               role="switch"
@@ -137,11 +137,11 @@ export function GatewayForm({
               className={`inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition ${
                 disableDevicePairing
                   ? "border-emerald-600 bg-emerald-600"
-                  : "border-slate-300 bg-slate-200"
+                  : "border-input bg-border"
               } ${isLoading ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`}
             >
               <span
-                className={`inline-block h-5 w-5 rounded-full bg-white shadow-sm transition ${
+                className={`inline-block h-5 w-5 rounded-full bg-card shadow-sm transition ${
                   disableDevicePairing ? "translate-x-5" : "translate-x-0.5"
                 }`}
               />
@@ -151,10 +151,10 @@ export function GatewayForm({
       </div>
 
       <div className="space-y-2">
-        <label className="text-sm font-medium text-slate-900">
+        <label className="text-sm font-medium text-foreground">
           Allow self-signed TLS certificates
         </label>
-        <label className="flex h-10 items-center gap-3 px-1 text-sm text-slate-900">
+        <label className="flex h-10 items-center gap-3 px-1 text-sm text-foreground">
           <button
             type="button"
             role="switch"
@@ -165,11 +165,11 @@ export function GatewayForm({
             className={`inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition ${
               allowInsecureTls
                 ? "border-emerald-600 bg-emerald-600"
-                : "border-slate-300 bg-slate-200"
+                : "border-input bg-border"
             } ${isLoading ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`}
           >
             <span
-              className={`inline-block h-5 w-5 rounded-full bg-white shadow-sm transition ${
+              className={`inline-block h-5 w-5 rounded-full bg-card shadow-sm transition ${
                 allowInsecureTls ? "translate-x-5" : "translate-x-0.5"
               }`}
             />
diff --git a/frontend/src/components/gateways/GatewaysTable.tsx b/frontend/src/components/gateways/GatewaysTable.tsx
index e2a4abd..a6aaf3b 100644
--- a/frontend/src/components/gateways/GatewaysTable.tsx
+++ b/frontend/src/components/gateways/GatewaysTable.tsx
@@ -38,7 +38,7 @@ type GatewaysTableProps = {
 
 const DEFAULT_EMPTY_ICON = (
   <svg
-    className="h-16 w-16 text-slate-300"
+    className="h-16 w-16 text-muted-foreground/50"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
@@ -100,7 +100,7 @@ export function GatewaysTable({
         accessorKey: "workspace_root",
         header: "Workspace root",
         cell: ({ row }) => (
-          <span className="text-sm text-slate-700">
+          <span className="text-sm text-muted-foreground">
             {truncate(row.original.workspace_root, 28)}
           </span>
         ),
diff --git a/frontend/src/components/git/BoardForgejoRepositoryLinks.tsx b/frontend/src/components/git/BoardForgejoRepositoryLinks.tsx
index b147f28..fe26024 100644
--- a/frontend/src/components/git/BoardForgejoRepositoryLinks.tsx
+++ b/frontend/src/components/git/BoardForgejoRepositoryLinks.tsx
@@ -385,7 +385,7 @@ export function BoardForgejoRepositoryLinks({
         errorMessage={unlinkError}
         confirmLabel="Unlink Repository"
         confirmingLabel="Unlinking..."
-        confirmClassName="bg-[color:var(--danger)] text-white hover:bg-[color:var(--danger)]/90"
+        confirmClassName="bg-destructive text-destructive-foreground hover:bg-destructive/90"
         cancelLabel="Keep Linked"
       />
     </>
diff --git a/frontend/src/components/molecules/DependencyBanner.tsx b/frontend/src/components/molecules/DependencyBanner.tsx
index 01bbea3..47d74bf 100644
--- a/frontend/src/components/molecules/DependencyBanner.tsx
+++ b/frontend/src/components/molecules/DependencyBanner.tsx
@@ -24,7 +24,7 @@ type DependencyBannerVariant = "blocked" | "resolved";
 
 const toneClassByVariant: Record<DependencyBannerVariant, string> = {
   blocked: "border-rose-200 bg-rose-50 text-rose-700",
-  resolved: "border-blue-200 bg-blue-50 text-blue-700",
+  resolved: "border-primary/30 bg-primary/10 text-primary",
 };
 
 export function DependencyBanner({
@@ -52,12 +52,12 @@ export function DependencyBanner({
                   ? "border-rose-200 bg-rose-50 hover:bg-rose-100/40"
                   : isDone
                     ? "border-emerald-200 bg-emerald-50 hover:bg-emerald-100/40"
-                    : "border-slate-200 bg-white hover:bg-slate-50",
+                    : "border-border bg-card hover:bg-muted",
                 dependency.disabled && "cursor-not-allowed opacity-60",
               )}
             >
               <div className="flex items-center justify-between gap-3">
-                <p className="truncate text-sm font-medium text-slate-900">
+                <p className="truncate text-sm font-medium text-foreground">
                   {dependency.title}
                 </p>
                 <span
@@ -67,7 +67,7 @@ export function DependencyBanner({
                       ? "text-rose-700"
                       : isDone
                         ? "text-emerald-700"
-                        : "text-slate-500",
+                        : "text-muted-foreground",
                   )}
                 >
                   {dependency.statusLabel}
@@ -77,7 +77,7 @@ export function DependencyBanner({
           );
         })
       ) : (
-        <p className="text-sm text-slate-500">{emptyMessage}</p>
+        <p className="text-sm text-muted-foreground">{emptyMessage}</p>
       )}
       {children ? (
         <div
diff --git a/frontend/src/components/molecules/TaskCard.tsx b/frontend/src/components/molecules/TaskCard.tsx
index 83f3d9e..51d2fd9 100644
--- a/frontend/src/components/molecules/TaskCard.tsx
+++ b/frontend/src/components/molecules/TaskCard.tsx
@@ -61,7 +61,7 @@ export function TaskCard({
     if (normalized === "low") {
       return "bg-emerald-100 text-emerald-700";
     }
-    return "bg-slate-100 text-slate-600";
+    return "bg-accent text-muted-foreground";
   };
 
   const priorityLabel = priority ? priority.toUpperCase() : "MEDIUM";
@@ -70,7 +70,7 @@ export function TaskCard({
   return (
     <div
       className={cn(
-        "group relative cursor-pointer rounded-lg border border-slate-200 bg-white p-4 shadow-sm transition-all hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md",
+        "group relative cursor-pointer rounded-lg border border-border bg-card p-4 shadow-sm transition-all hover:-translate-y-0.5 hover:border-input hover:shadow-md",
         isDragging && "opacity-60 shadow-none",
         hasPendingApproval && "border-amber-200 bg-amber-50/40",
         isBlocked && "border-rose-200 bg-rose-50/50",
@@ -99,7 +99,7 @@ export function TaskCard({
       ) : null}
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0 space-y-2">
-          <p className="text-sm font-medium text-slate-900 line-clamp-2 break-words">
+          <p className="text-sm font-medium text-foreground line-clamp-2 break-words">
             {title}
           </p>
           {isBlocked ? (
@@ -125,7 +125,7 @@ export function TaskCard({
               {visibleTags.map((tag) => (
                 <span
                   key={tag.id}
-                  className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-0.5 text-[10px] font-semibold text-slate-700"
+                  className="inline-flex items-center gap-1 rounded-full border border-border bg-card px-2 py-0.5 text-[10px] font-semibold text-muted-foreground"
                 >
                   <span
                     className="h-1.5 w-1.5 rounded-full"
@@ -135,7 +135,7 @@ export function TaskCard({
                 </span>
               ))}
               {tags.length > visibleTags.length ? (
-                <span className="text-[10px] font-semibold text-slate-500">
+                <span className="text-[10px] font-semibold text-muted-foreground">
                   +{tags.length - visibleTags.length}
                 </span>
               ) : null}
@@ -146,16 +146,16 @@ export function TaskCard({
           <span
             className={cn(
               "inline-flex items-center rounded-full px-2 py-1 text-[10px] font-semibold uppercase tracking-wide",
-              priorityBadge(priority) ?? "bg-slate-100 text-slate-600",
+              priorityBadge(priority) ?? "bg-accent text-muted-foreground",
             )}
           >
             {priorityLabel}
           </span>
         </div>
       </div>
-      <div className="mt-3 flex items-center justify-between text-xs text-slate-500">
+      <div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
         <div className="flex items-center gap-2">
-          <UserCircle className="h-4 w-4 text-slate-400" />
+          <UserCircle className="h-4 w-4 text-muted-foreground/70" />
           <span>{assignee ?? "Unassigned"}</span>
         </div>
         {due ? (
@@ -168,7 +168,7 @@ export function TaskCard({
             <CalendarClock
               className={cn(
                 "h-4 w-4",
-                isOverdue ? "text-rose-500" : "text-slate-400",
+                isOverdue ? "text-rose-500" : "text-muted-foreground/70",
               )}
             />
             <span>{due}</span>
diff --git a/frontend/src/components/organisms/TaskBoard.tsx b/frontend/src/components/organisms/TaskBoard.tsx
index 6eb6ebe..afef68a 100644
--- a/frontend/src/components/organisms/TaskBoard.tsx
+++ b/frontend/src/components/organisms/TaskBoard.tsx
@@ -51,17 +51,17 @@ const columns: Array<{
   {
     title: "Inbox",
     status: "inbox",
-    dot: "bg-slate-400",
-    accent: "hover:border-slate-400 hover:bg-slate-50",
-    text: "group-hover:text-slate-700 text-slate-500",
-    badge: "bg-slate-100 text-slate-600",
+    dot: "bg-muted-foreground",
+    accent: "hover:border-muted-foreground hover:bg-muted",
+    text: "group-hover:text-muted-foreground text-muted-foreground",
+    badge: "bg-accent text-muted-foreground",
   },
   {
     title: "In Progress",
     status: "in_progress",
     dot: "bg-purple-500",
     accent: "hover:border-purple-400 hover:bg-purple-50",
-    text: "group-hover:text-purple-600 text-slate-500",
+    text: "group-hover:text-purple-600 text-muted-foreground",
     badge: "bg-purple-100 text-purple-700",
   },
   {
@@ -69,7 +69,7 @@ const columns: Array<{
     status: "review",
     dot: "bg-indigo-500",
     accent: "hover:border-indigo-400 hover:bg-indigo-50",
-    text: "group-hover:text-indigo-600 text-slate-500",
+    text: "group-hover:text-indigo-600 text-muted-foreground",
     badge: "bg-indigo-100 text-indigo-700",
   },
   {
@@ -77,7 +77,7 @@ const columns: Array<{
     status: "done",
     dot: "bg-green-500",
     accent: "hover:border-green-400 hover:bg-green-50",
-    text: "group-hover:text-green-600 text-slate-500",
+    text: "group-hover:text-green-600 text-muted-foreground",
     badge: "bg-emerald-100 text-emerald-700",
   },
 ];
@@ -424,17 +424,17 @@ export const TaskBoard = memo(function TaskBoard({
               "sm:min-h-[calc(100vh-260px)]",
               activeColumn === column.status &&
                 !readOnly &&
-                "ring-2 ring-slate-200",
+                "ring-2 ring-border",
             )}
             onDrop={readOnly ? undefined : handleDrop(column.status)}
             onDragOver={readOnly ? undefined : handleDragOver(column.status)}
             onDragLeave={readOnly ? undefined : handleDragLeave(column.status)}
           >
-            <div className="column-header z-10 rounded-t-xl border border-b-0 border-slate-200 bg-white px-4 py-3 sm:sticky sm:top-0 sm:bg-white/80 sm:backdrop-blur">
+            <div className="column-header z-10 rounded-t-xl border border-b-0 border-border bg-card px-4 py-3 sm:sticky sm:top-0 sm:bg-card/80 sm:backdrop-blur">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
                   <span className={cn("h-2 w-2 rounded-full", column.dot)} />
-                  <h3 className="text-sm font-semibold text-slate-900">
+                  <h3 className="text-sm font-semibold text-foreground">
                     {column.title}
                   </h3>
                 </div>
@@ -448,7 +448,7 @@ export const TaskBoard = memo(function TaskBoard({
                 </span>
               </div>
               {column.status === "review" && reviewCounts ? (
-                <div className="mt-2 flex flex-wrap items-center gap-2 text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+                <div className="mt-2 flex flex-wrap items-center gap-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
                   {(
                     [
                       { key: "all", label: "All", count: reviewCounts.all },
@@ -476,8 +476,8 @@ export const TaskBoard = memo(function TaskBoard({
                       className={cn(
                         "rounded-full border px-2.5 py-1 transition",
                         reviewBucket === option.key
-                          ? "border-slate-900 bg-slate-900 text-white"
-                          : "border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50",
+                          ? "border-foreground bg-foreground text-background"
+                          : "border-border bg-card text-muted-foreground hover:border-input hover:bg-muted",
                       )}
                       aria-pressed={reviewBucket === option.key}
                     >
@@ -487,7 +487,7 @@ export const TaskBoard = memo(function TaskBoard({
                 </div>
               ) : null}
             </div>
-            <div className="rounded-b-xl border border-t-0 border-slate-200 bg-white p-3">
+            <div className="rounded-b-xl border border-t-0 border-border bg-card p-3">
               <div className="space-y-3">
                 {filteredTasks.map((task) => {
                   const dueState = resolveDueState(task);
diff --git a/frontend/src/components/organisms/UserMenu.tsx b/frontend/src/components/organisms/UserMenu.tsx
index 2779250..258d940 100644
--- a/frontend/src/components/organisms/UserMenu.tsx
+++ b/frontend/src/components/organisms/UserMenu.tsx
@@ -69,7 +69,7 @@ export function UserMenu({
         >
           <span
             className={cn(
-              "relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-[10px] text-xs font-semibold text-white shadow-sm",
+              "relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-[10px] text-xs font-semibold text-primary-foreground shadow-sm",
               avatarUrl
                 ? "bg-[color:var(--neutral-200,var(--surface-muted))]"
                 : "bg-gradient-to-br from-[color:var(--primary-navy,var(--accent))] to-[color:var(--secondary-navy,var(--accent-strong))]",
@@ -99,7 +99,7 @@ export function UserMenu({
           <div className="flex items-center gap-3">
             <span
               className={cn(
-                "flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl text-sm font-semibold text-white",
+                "flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl text-sm font-semibold text-primary-foreground",
                 avatarUrl
                   ? "bg-[color:var(--neutral-200,var(--surface-muted))]"
                   : "bg-gradient-to-br from-[color:var(--primary-navy,var(--accent))] to-[color:var(--secondary-navy,var(--accent-strong))]",
@@ -141,7 +141,7 @@ export function UserMenu({
             </Link>
             <Link
               href="/boards/new"
-              className="flex w-full items-center justify-center gap-2 rounded-xl bg-[color:var(--primary-navy,var(--accent))] px-3 py-2 text-sm font-semibold text-white shadow-[0_2px_8px_rgba(10,22,40,0.15)] transition hover:bg-[color:var(--secondary-navy,var(--accent-strong))] hover:translate-y-[-1px] hover:shadow-[0_4px_12px_rgba(10,22,40,0.20)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent-teal,var(--accent))] focus-visible:ring-offset-2"
+              className="flex w-full items-center justify-center gap-2 rounded-xl bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground shadow-[0_2px_8px_rgba(10,22,40,0.15)] transition hover:bg-[color:var(--accent-strong)] hover:translate-y-[-1px] hover:shadow-[0_4px_12px_rgba(10,22,40,0.20)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               onClick={() => setOpen(false)}
             >
               <Plus className="h-4 w-4 opacity-90" />
diff --git a/frontend/src/components/organization/BoardAccessTable.tsx b/frontend/src/components/organization/BoardAccessTable.tsx
index 6b74f8f..9abe6d3 100644
--- a/frontend/src/components/organization/BoardAccessTable.tsx
+++ b/frontend/src/components/organization/BoardAccessTable.tsx
@@ -37,7 +37,7 @@ export function BoardAccessTable({
             href: `/boards/${row.original.id}`,
             label: row.original.name,
             subtitle: row.original.slug,
-            subtitleClassName: "mt-1 text-xs text-slate-500",
+            subtitleClassName: "mt-1 text-xs text-muted-foreground",
           }),
       },
       {
@@ -97,8 +97,8 @@ export function BoardAccessTable({
   return (
     <DataTable
       table={table}
-      rowClassName="border-t border-slate-200 hover:bg-slate-50"
-      headerClassName="bg-slate-50 text-[11px] uppercase tracking-wide text-slate-500"
+      rowClassName="border-t border-border hover:bg-muted"
+      headerClassName="bg-muted text-[11px] uppercase tracking-wide text-muted-foreground"
       headerCellClassName="px-4 py-2 font-medium"
       cellClassName="px-4 py-3"
     />
diff --git a/frontend/src/components/organization/MembersInvitesTable.tsx b/frontend/src/components/organization/MembersInvitesTable.tsx
index 82e64f3..3709e46 100644
--- a/frontend/src/components/organization/MembersInvitesTable.tsx
+++ b/frontend/src/components/organization/MembersInvitesTable.tsx
@@ -97,14 +97,14 @@ export function MembersInvitesTable({
             const display = memberDisplay(row.original.member);
             return (
               <div className="flex items-center gap-3">
-                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-500 text-xs font-semibold text-white">
+                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-xs font-semibold text-primary-foreground">
                   {display.initials}
                 </div>
                 <div>
-                  <div className="text-sm font-semibold text-slate-900">
+                  <div className="text-sm font-semibold text-foreground">
                     {display.primary}
                   </div>
-                  <div className="text-xs text-slate-500">
+                  <div className="text-xs text-muted-foreground">
                     {display.secondary}
                   </div>
                 </div>
@@ -114,14 +114,14 @@ export function MembersInvitesTable({
 
           return (
             <div className="flex items-center gap-3">
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-200 text-xs font-semibold text-slate-600">
+              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-border text-xs font-semibold text-muted-foreground">
                 {initialsFrom(row.original.invite.invited_email)}
               </div>
               <div>
-                <div className="text-sm font-semibold text-slate-900">
+                <div className="text-sm font-semibold text-foreground">
                   {row.original.invite.invited_email}
                 </div>
-                <div className="text-xs text-slate-500">
+                <div className="text-xs text-muted-foreground">
                   Invited {formatTimestamp(row.original.invite.created_at)}
                 </div>
               </div>
@@ -155,7 +155,7 @@ export function MembersInvitesTable({
         id: "access",
         header: "Access",
         cell: ({ row }) => (
-          <span className="text-slate-600">
+          <span className="text-muted-foreground">
             {row.original.kind === "member"
               ? summarizeAccess(
                   row.original.member.all_boards_read,
@@ -175,7 +175,7 @@ export function MembersInvitesTable({
           if (row.original.kind === "member") {
             const member = row.original.member;
             if (!isAdmin) {
-              return <span className="text-xs text-slate-400">Admin only</span>;
+              return <span className="text-xs text-muted-foreground/70">Admin only</span>;
             }
             return (
               <div className="flex justify-end">
@@ -241,13 +241,13 @@ export function MembersInvitesTable({
       isLoading={isLoading}
       loadingLabel="Loading members..."
       emptyMessage="No members or invites yet."
-      headerClassName="bg-slate-50 text-[11px] uppercase tracking-wide text-slate-500"
+      headerClassName="bg-muted text-[11px] uppercase tracking-wide text-muted-foreground"
       headerCellClassName="px-5 py-3 text-left font-medium"
       cellClassName="px-5 py-4"
       rowClassName={(row) =>
         row.original.kind === "invite"
-          ? "border-t border-slate-200 bg-slate-50/60"
-          : "border-t border-slate-200 hover:bg-slate-50"
+          ? "border-t border-border bg-muted/60"
+          : "border-t border-border hover:bg-muted"
       }
     />
   );
diff --git a/frontend/src/components/skills/MarketplaceSkillForm.tsx b/frontend/src/components/skills/MarketplaceSkillForm.tsx
index 89e31c2..d6ddb16 100644
--- a/frontend/src/components/skills/MarketplaceSkillForm.tsx
+++ b/frontend/src/components/skills/MarketplaceSkillForm.tsx
@@ -138,13 +138,13 @@ export function MarketplaceSkillForm({
   return (
     <form
       onSubmit={handleSubmit}
-      className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
+      className="space-y-6 rounded-xl border border-border bg-card p-6 shadow-sm"
     >
       <div className="space-y-5">
         <div className="space-y-2">
           <label
             htmlFor="source-url"
-            className="text-xs font-semibold uppercase tracking-wider text-slate-500"
+            className="text-xs font-semibold uppercase tracking-wider text-muted-foreground"
           >
             {sourceLabel}
           </label>
@@ -158,7 +158,7 @@ export function MarketplaceSkillForm({
             disabled={isSubmitting || sourceUrlReadOnly}
           />
           {sourceUrlHelpText ? (
-            <p className="text-xs text-slate-500">{sourceUrlHelpText}</p>
+            <p className="text-xs text-muted-foreground">{sourceUrlHelpText}</p>
           ) : null}
         </div>
 
@@ -166,7 +166,7 @@ export function MarketplaceSkillForm({
           <div className="space-y-2">
             <label
               htmlFor="skill-branch"
-              className="text-xs font-semibold uppercase tracking-wider text-slate-500"
+              className="text-xs font-semibold uppercase tracking-wider text-muted-foreground"
             >
               {branchLabel}
             </label>
@@ -183,7 +183,7 @@ export function MarketplaceSkillForm({
         <div className="space-y-2">
           <label
             htmlFor="skill-name"
-            className="text-xs font-semibold uppercase tracking-wider text-slate-500"
+            className="text-xs font-semibold uppercase tracking-wider text-muted-foreground"
           >
             {nameLabel}
           </label>
@@ -199,7 +199,7 @@ export function MarketplaceSkillForm({
         <div className="space-y-2">
           <label
             htmlFor="skill-description"
-            className="text-xs font-semibold uppercase tracking-wider text-slate-500"
+            className="text-xs font-semibold uppercase tracking-wider text-muted-foreground"
           >
             {descriptionLabel}
           </label>
diff --git a/frontend/src/components/skills/MarketplaceSkillsTable.tsx b/frontend/src/components/skills/MarketplaceSkillsTable.tsx
index 9e5b8aa..d796459 100644
--- a/frontend/src/components/skills/MarketplaceSkillsTable.tsx
+++ b/frontend/src/components/skills/MarketplaceSkillsTable.tsx
@@ -68,7 +68,7 @@ function riskPillClassName(risk: string | null | undefined) {
     case "critical":
       return "bg-[color:rgba(244,63,94,0.16)] text-rose-800 border border-rose-200/70";
     case "unknown":
-      return "bg-[color:rgba(148,163,184,0.16)] text-slate-700 border border-slate-200/80";
+      return "bg-[color:rgba(148,163,184,0.16)] text-muted-foreground border border-border/80";
     default:
       return "bg-[color:rgba(99,102,241,0.16)] text-indigo-800 border border-indigo-200/70";
   }
@@ -129,17 +129,17 @@ export function MarketplaceSkillsTable({
               <button
                 type="button"
                 onClick={() => onSkillClick(row.original)}
-                className="text-sm font-medium text-blue-700 hover:text-blue-600 hover:underline"
+                className="text-sm font-medium text-primary hover:text-primary hover:underline"
               >
                 {row.original.name}
               </button>
             ) : (
-              <p className="text-sm font-medium text-slate-900">
+              <p className="text-sm font-medium text-foreground">
                 {row.original.name}
               </p>
             )}
             <p
-              className="mt-1 line-clamp-2 text-xs text-slate-500"
+              className="mt-1 line-clamp-2 text-xs text-muted-foreground"
               title={row.original.description || "No description provided."}
             >
               {row.original.description || "No description provided."}
@@ -155,7 +155,7 @@ export function MarketplaceSkillsTable({
           return (
             <Link
               href={packsHrefFromPackUrl(packUrl)}
-              className="inline-flex items-center gap-1 text-sm font-medium text-slate-700 hover:text-blue-600"
+              className="inline-flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-primary"
             >
               {truncate(packLabelFromUrl(packUrl), 40)}
             </Link>
@@ -166,7 +166,7 @@ export function MarketplaceSkillsTable({
         accessorKey: "category",
         header: "Category",
         cell: ({ row }) => (
-          <span className="text-sm text-slate-700">
+          <span className="text-sm text-muted-foreground">
             {row.original.category || "uncategorized"}
           </span>
         ),
@@ -190,7 +190,7 @@ export function MarketplaceSkillsTable({
           const sourceHref = row.original.source || row.original.source_url;
 
           if (!sourceHref) {
-            return <span className="text-sm text-slate-400">No source</span>;
+            return <span className="text-sm text-muted-foreground/70">No source</span>;
           }
 
           return (
@@ -198,7 +198,7 @@ export function MarketplaceSkillsTable({
               href={sourceHref}
               target="_blank"
               rel="noreferrer"
-              className="text-sm font-medium text-slate-700 hover:text-blue-600 hover:underline"
+              className="text-sm font-medium text-muted-foreground hover:text-primary hover:underline"
               title={sourceHref}
             >
               {truncate(sourceHref, 36)}
@@ -214,7 +214,7 @@ export function MarketplaceSkillsTable({
           const installedOn =
             installedGatewayNamesBySkillId?.[row.original.id] ?? [];
           if (installedOn.length === 0) {
-            return <span className="text-sm text-slate-500">-</span>;
+            return <span className="text-sm text-muted-foreground">-</span>;
           }
           return (
             <div className="flex flex-wrap gap-1">
@@ -223,12 +223,12 @@ export function MarketplaceSkillsTable({
                 return (
                   <span
                     key={`${gateway.id}-${index}`}
-                    className="inline-flex items-center gap-1 text-sm text-slate-700"
+                    className="inline-flex items-center gap-1 text-sm text-muted-foreground"
                     title={gateway.name}
                   >
                     <Link
                       href={`/gateways/${gateway.id}`}
-                      className="text-blue-700 hover:text-blue-600 hover:underline"
+                      className="text-primary hover:text-primary hover:underline"
                     >
                       {gateway.name}
                     </Link>
@@ -302,7 +302,7 @@ export function MarketplaceSkillsTable({
       table={table}
       isLoading={isLoading}
       stickyHeader={stickyHeader}
-      rowClassName="transition hover:bg-slate-50"
+      rowClassName="transition hover:bg-muted"
       cellClassName="px-6 py-4 align-top"
       emptyState={
         emptyState
diff --git a/frontend/src/components/skills/SkillInstallDialog.tsx b/frontend/src/components/skills/SkillInstallDialog.tsx
index 53a276c..0137741 100644
--- a/frontend/src/components/skills/SkillInstallDialog.tsx
+++ b/frontend/src/components/skills/SkillInstallDialog.tsx
@@ -58,7 +58,7 @@ export function SkillInstallDialog({
 
         <div className="mt-2 space-y-3.5">
           {isGatewayStatusLoading ? (
-            <p className="text-sm text-slate-500">Loading gateways...</p>
+            <p className="text-sm text-muted-foreground">Loading gateways...</p>
           ) : (
             gateways.map((gateway) => {
               const isInstalled = gatewayInstalledById[gateway.id] === true;
@@ -67,10 +67,10 @@ export function SkillInstallDialog({
               return (
                 <div
                   key={gateway.id}
-                  className="flex items-center justify-between rounded-xl border border-slate-200 bg-white p-4"
+                  className="flex items-center justify-between rounded-xl border border-border bg-card p-4"
                 >
                   <div>
-                    <p className="text-sm font-medium text-slate-900">
+                    <p className="text-sm font-medium text-foreground">
                       {gateway.name}
                     </p>
                   </div>
@@ -101,7 +101,7 @@ export function SkillInstallDialog({
           ) : null}
         </div>
 
-        <DialogFooter className="mt-6 border-t border-slate-200 pt-4">
+        <DialogFooter className="mt-6 border-t border-border pt-4">
           <Button
             variant="outline"
             onClick={() => onOpenChange(false)}
diff --git a/frontend/src/components/skills/SkillPacksTable.tsx b/frontend/src/components/skills/SkillPacksTable.tsx
index 2c070dd..9461253 100644
--- a/frontend/src/components/skills/SkillPacksTable.tsx
+++ b/frontend/src/components/skills/SkillPacksTable.tsx
@@ -65,10 +65,10 @@ export function SkillPacksTable({
         header: "Pack",
         cell: ({ row }) => (
           <div>
-            <p className="text-sm font-medium text-slate-900">
+            <p className="text-sm font-medium text-foreground">
               {row.original.name}
             </p>
-            <p className="mt-1 line-clamp-2 text-xs text-slate-500">
+            <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
               {row.original.description || "No description provided."}
             </p>
           </div>
@@ -82,7 +82,7 @@ export function SkillPacksTable({
             href={row.original.source_url}
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center gap-1 text-sm font-medium text-slate-700 hover:text-blue-600"
+            className="inline-flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-primary"
           >
             {truncate(row.original.source_url, 48)}
           </Link>
@@ -92,7 +92,7 @@ export function SkillPacksTable({
         accessorKey: "branch",
         header: "Branch",
         cell: ({ row }) => (
-          <p className="text-sm text-slate-900">
+          <p className="text-sm text-foreground">
             {row.original.branch || "main"}
           </p>
         ),
@@ -103,7 +103,7 @@ export function SkillPacksTable({
         cell: ({ row }) => (
           <Link
             href={`/skills/marketplace?packId=${encodeURIComponent(row.original.id)}`}
-            className="text-sm font-medium text-blue-700 hover:text-blue-600 hover:underline"
+            className="text-sm font-medium text-primary hover:text-primary hover:underline"
           >
             {row.original.skill_count ?? 0}
           </Link>
@@ -159,7 +159,7 @@ export function SkillPacksTable({
       table={table}
       isLoading={isLoading}
       stickyHeader={stickyHeader}
-      rowClassName="transition hover:bg-slate-50"
+      rowClassName="transition hover:bg-muted"
       cellClassName="px-6 py-4 align-top"
       rowActions={
         getEditHref || onDelete
diff --git a/frontend/src/components/skills/table-helpers.tsx b/frontend/src/components/skills/table-helpers.tsx
index 241275c..1d77618 100644
--- a/frontend/src/components/skills/table-helpers.tsx
+++ b/frontend/src/components/skills/table-helpers.tsx
@@ -10,7 +10,7 @@ import {
 
 export const SKILLS_TABLE_EMPTY_ICON = (
   <svg
-    className="h-16 w-16 text-slate-300"
+    className="h-16 w-16 text-muted-foreground/50"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
diff --git a/frontend/src/components/tags/TagForm.tsx b/frontend/src/components/tags/TagForm.tsx
index 2b590ac..5087338 100644
--- a/frontend/src/components/tags/TagForm.tsx
+++ b/frontend/src/components/tags/TagForm.tsx
@@ -101,13 +101,13 @@ export function TagForm({
   return (
     <form
       onSubmit={handleSubmit}
-      className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
+      className="space-y-6 rounded-xl border border-border bg-card p-6 shadow-sm"
     >
       <div className="space-y-5">
-        <div className="rounded-xl border border-slate-200 bg-slate-50/40 p-4">
+        <div className="rounded-xl border border-border bg-muted/40 p-4">
           <div className="grid gap-4 md:grid-cols-2">
             <div className="space-y-2">
-              <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 Name
               </label>
               <Input
@@ -119,13 +119,13 @@ export function TagForm({
             </div>
             <div className="space-y-2">
               <div className="flex items-center justify-between gap-2">
-                <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                   Slug
                 </label>
                 <button
                   type="button"
                   onClick={() => setSlug(suggestedSlug)}
-                  className="text-xs font-medium text-slate-500 underline underline-offset-2 transition hover:text-slate-700 disabled:cursor-not-allowed disabled:opacity-50"
+                  className="text-xs font-medium text-muted-foreground underline underline-offset-2 transition hover:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
                   disabled={!suggestedSlug || isSubmitting}
                 >
                   Use from name
@@ -139,18 +139,18 @@ export function TagForm({
               />
             </div>
           </div>
-          <p className="mt-2 text-xs text-slate-500">
+          <p className="mt-2 text-xs text-muted-foreground">
             Leave slug blank to auto-generate from the tag name.
           </p>
         </div>
 
         <div className="grid gap-4 md:grid-cols-[1fr_auto]">
           <div className="space-y-2">
-            <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+            <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
               Color
             </label>
-            <div className="flex items-center rounded-lg border border-slate-200 bg-white px-3">
-              <span className="text-sm font-medium text-slate-400">#</span>
+            <div className="flex items-center rounded-lg border border-border bg-card px-3">
+              <span className="text-sm font-medium text-muted-foreground/70">#</span>
               <Input
                 value={color}
                 onChange={(event) => setColor(event.target.value)}
@@ -161,15 +161,15 @@ export function TagForm({
             </div>
           </div>
           <div className="space-y-2">
-            <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+            <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
               Preview
             </label>
-            <div className="inline-flex h-[42px] items-center gap-2 rounded-lg border border-slate-200 bg-white px-3">
+            <div className="inline-flex h-[42px] items-center gap-2 rounded-lg border border-border bg-card px-3">
               <span
-                className="h-4 w-4 rounded border border-slate-300"
+                className="h-4 w-4 rounded border border-input"
                 style={{ backgroundColor: `#${previewColor}` }}
               />
-              <span className="text-xs font-semibold text-slate-700">
+              <span className="text-xs font-semibold text-muted-foreground">
                 #{previewColor.toUpperCase()}
               </span>
             </div>
@@ -177,7 +177,7 @@ export function TagForm({
         </div>
 
         <div className="space-y-2">
-          <label className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+          <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
             Description
           </label>
           <Textarea
diff --git a/frontend/src/components/tags/TagsTable.tsx b/frontend/src/components/tags/TagsTable.tsx
index 97cb855..449b7c1 100644
--- a/frontend/src/components/tags/TagsTable.tsx
+++ b/frontend/src/components/tags/TagsTable.tsx
@@ -32,7 +32,7 @@ type TagsTableProps = {
 
 const DEFAULT_EMPTY_ICON = (
   <svg
-    className="h-16 w-16 text-slate-300"
+    className="h-16 w-16 text-muted-foreground/50"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
@@ -81,14 +81,14 @@ export function TagsTable({
           const color = normalizeColor(row.original.color);
           return (
             <div className="space-y-1">
-              <div className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-800">
+              <div className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-2.5 py-1 text-xs font-semibold text-foreground">
                 <span
                   className="h-2 w-2 rounded-full"
                   style={{ backgroundColor: `#${color}` }}
                 />
                 {row.original.name}
               </div>
-              <p className="text-xs text-slate-500">
+              <p className="text-xs text-muted-foreground">
                 {row.original.slug}
                 {row.original.description
                   ? ` · ${row.original.description}`
@@ -104,9 +104,9 @@ export function TagsTable({
         cell: ({ row }) => {
           const color = normalizeColor(row.original.color);
           return (
-            <div className="inline-flex items-center gap-2 text-xs text-slate-700">
+            <div className="inline-flex items-center gap-2 text-xs text-muted-foreground">
               <span
-                className="h-4 w-4 rounded border border-slate-300"
+                className="h-4 w-4 rounded border border-input"
                 style={{ backgroundColor: `#${color}` }}
               />
               #{color.toUpperCase()}
@@ -118,7 +118,7 @@ export function TagsTable({
         accessorKey: "task_count",
         header: "Tasks",
         cell: ({ row }) => (
-          <span className="text-sm font-medium text-slate-700">
+          <span className="text-sm font-medium text-muted-foreground">
             {row.original.task_count ?? 0}
           </span>
         ),
@@ -149,7 +149,7 @@ export function TagsTable({
       table={table}
       isLoading={isLoading}
       stickyHeader={stickyHeader}
-      rowClassName="transition hover:bg-slate-50"
+      rowClassName="transition hover:bg-muted"
       cellClassName="px-6 py-4 align-top"
       rowActions={
         onEdit || onDelete
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 41a673e..e47f535 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -11,7 +11,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "bg-[color:var(--accent)] text-white shadow-sm hover:bg-[color:var(--accent-strong)]",
+          "bg-primary text-primary-foreground shadow-sm hover:bg-[color:var(--accent-strong)]",
         secondary:
           "border border-[color:var(--border)] bg-[color:var(--surface)] text-strong hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]",
         outline:
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 2b5badb..a4be827 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -17,7 +17,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-slate-950/40 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-foreground/40 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index 7fab65b..68802fd 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "rounded-full px-4 py-2 text-xs font-semibold text-muted transition data-[state=active]:bg-[color:var(--accent)] data-[state=active]:text-white",
+      "rounded-full px-4 py-2 text-xs font-semibold text-muted transition data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
       className,
     )}
     {...props}
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
index 124ee8d..e6acfeb 100644
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white shadow-lg",
+      "rounded-lg bg-foreground px-3 py-2 text-xs font-semibold text-background shadow-lg",
       className,
     )}
     {...props}