diff --git a/dashboards/tracker-web/src/app/roadmap/page.tsx b/dashboards/tracker-web/src/app/roadmap/page.tsx
index 4d7b469c..5ed5dd87 100644
--- a/dashboards/tracker-web/src/app/roadmap/page.tsx
+++ b/dashboards/tracker-web/src/app/roadmap/page.tsx
@@ -1,7 +1,18 @@
 'use client';
 
 import { useEffect, useState, useCallback } from 'react';
-import { SegmentedControl } from '@/components/ui/Primitives';
+import {
+  SegmentedControl,
+  Button,
+  Input,
+  Select,
+  Badge,
+  StatusDot,
+  MetricCard,
+  AlertBanner,
+  type BadgeProps,
+  type StatusTone,
+} from '@/components/ui/Primitives';
 import {
   getRoadmapItems,
   getRoadmapStats,
@@ -11,57 +22,26 @@ import {
   type PublicRoadmapStats,
 } from '@/lib/tracker-client';
 
+type BadgeVariant = NonNullable<BadgeProps['variant']>;
+
 // ── Status column config ────────────────────────────────────────────
 const STATUS_COLUMNS = [
-  {
-    key: 'open',
-    label: 'Planned',
-    color: 'bg-blue-500',
-    textColor: 'text-blue-700 dark:text-blue-300',
-  },
-  {
-    key: 'in_progress',
-    label: 'In Progress',
-    color: 'bg-amber-500',
-    textColor: 'text-amber-700 dark:text-amber-300',
-  },
-  {
-    key: 'done',
-    label: 'Complete',
-    color: 'bg-emerald-500',
-    textColor: 'text-emerald-700 dark:text-emerald-300',
-  },
+  { key: 'open', label: 'Planned', tone: 'info' as StatusTone },
+  { key: 'in_progress', label: 'In Progress', tone: 'warning' as StatusTone },
+  { key: 'done', label: 'Complete', tone: 'success' as StatusTone },
 ] as const;
 
-const TYPE_BADGES: Record<string, { label: string; className: string }> = {
-  feature: {
-    label: 'Feature',
-    className: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300',
-  },
-  bug: { label: 'Bug', className: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300' },
-  task: {
-    label: 'Task',
-    className: 'bg-gray-100 text-gray-700 dark:bg-gray-900 dark:text-gray-300',
-  },
+const TYPE_BADGES: Record<string, { label: string; variant: BadgeVariant }> = {
+  feature: { label: 'Feature', variant: 'info' },
+  bug: { label: 'Bug', variant: 'danger' },
+  task: { label: 'Task', variant: 'neutral' },
 };
 
-const PRIORITY_BADGES: Record<string, { label: string; className: string }> = {
-  critical: {
-    label: 'Critical',
-    className: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
-  },
-  high: {
-    label: 'High',
-    className: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
-  },
-  medium: {
-    label: 'Medium',
-    className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
-  },
-  low: {
-    label: 'Low',
-    className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
-  },
+const PRIORITY_BADGES: Record<string, { label: string; variant: BadgeVariant }> = {
+  critical: { label: 'Critical', variant: 'danger' },
+  high: { label: 'High', variant: 'warning' },
+  medium: { label: 'Medium', variant: 'neutral' },
+  low: { label: 'Low', variant: 'success' },
 };
 
 export default function RoadmapPage() {
@@ -196,26 +176,21 @@ export default function RoadmapPage() {
   const itemsByStatus = (status: string) => items.filter(i => i.status === status);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900">
+    <div className="min-h-screen bg-background">
       {/* Header */}
-      <header className="border-b border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm sticky top-0 z-20">
+      <header className="border-b border-border bg-card/80 backdrop-blur-sm sticky top-0 z-20">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">Product Roadmap</h1>
-            <p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
+            <h1 className="text-2xl font-bold text-foreground">Product Roadmap</h1>
+            <p className="text-sm text-muted-foreground mt-0.5">
               Vote on features, report bugs, and shape what we build next
             </p>
           </div>
           <div className="flex items-center gap-3">
-            <button
-              onClick={() => setShowSubmit(true)}
-              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors"
-            >
-              + Submit Idea
-            </button>
+            <Button onClick={() => setShowSubmit(true)}>+ Submit Idea</Button>
             <a
               href="/login"
-              className="text-sm text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
             >
               Admin →
             </a>
@@ -225,46 +200,47 @@ export default function RoadmapPage() {
 
       <main className="max-w-7xl mx-auto px-4 sm:px-6 py-6">
         {loadError ? (
-          <div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900 dark:bg-red-900/20 dark:text-red-300">
+          <AlertBanner tone="error" title="Couldn't load the roadmap" className="mb-4">
             {loadError}
-          </div>
+          </AlertBanner>
         ) : null}
         {voteError ? (
-          <div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900 dark:bg-red-900/20 dark:text-red-300">
+          <AlertBanner tone="error" title="Vote failed" className="mb-4">
             {voteError}
-          </div>
+          </AlertBanner>
         ) : null}
 
         {/* Stats bar */}
         {stats && (
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
-            <StatCard label="Total Items" value={stats.total} />
-            <StatCard label="Total Votes" value={stats.totalVotes} />
-            <StatCard label="In Progress" value={stats.byStatus?.in_progress || 0} />
-            <StatCard label="Completed" value={stats.byStatus?.done || 0} />
+            <MetricCard label="Total Items" value={stats.total} />
+            <MetricCard label="Total Votes" value={stats.totalVotes} />
+            <MetricCard label="In Progress" value={stats.byStatus?.in_progress || 0} />
+            <MetricCard label="Completed" value={stats.byStatus?.done || 0} />
           </div>
         )}
 
         {/* Filters */}
         <div className="flex flex-col sm:flex-row gap-3 mb-6">
-          <input
+          <Input
             type="text"
             placeholder="Search items..."
+            aria-label="Search items"
+            className="flex-1"
             value={search}
             onChange={e => setSearch(e.target.value)}
-            className="flex-1 px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
-          <select
+          <Select
             value={typeFilter}
             onChange={e => setTypeFilter(e.target.value)}
             aria-label="Filter by type"
-            className="px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-sm"
-          >
-            <option value="">All Types</option>
-            <option value="feature">Features</option>
-            <option value="bug">Bugs</option>
-            <option value="task">Tasks</option>
-          </select>
+            options={[
+              { value: '', label: 'All Types' },
+              { value: 'feature', label: 'Features' },
+              { value: 'bug', label: 'Bugs' },
+              { value: 'task', label: 'Tasks' },
+            ]}
+          />
           <SegmentedControl
             aria-label="Roadmap view"
             value={view}
@@ -282,27 +258,22 @@ export default function RoadmapPage() {
               {STATUS_COLUMNS.map(col => (
                 <div key={col.key} className="space-y-3">
                   <div className="flex items-center gap-2 mb-2">
-                    <span className={`w-3 h-3 rounded-full ${col.color} animate-pulse`} />
-                    <h2
-                      className={`font-semibold ${col.textColor} h-5 w-24 bg-slate-200 dark:bg-slate-700 rounded animate-pulse`}
-                    />
+                    <StatusDot tone={col.tone} className="animate-pulse" />
+                    <h2 className="h-5 w-24 bg-muted rounded animate-pulse" />
                   </div>
                   {[1, 2, 3].map(i => (
-                    <div
-                      key={i}
-                      className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4"
-                    >
+                    <div key={i} className="bg-card rounded-xl border border-border p-4">
                       <div className="flex items-start gap-3">
                         <div className="flex flex-col items-center min-w-[44px] py-1.5 px-2">
-                          <div className="h-4 w-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
-                          <div className="h-4 w-6 bg-slate-200 dark:bg-slate-700 rounded mt-1 animate-pulse" />
+                          <div className="h-4 w-4 bg-muted rounded animate-pulse" />
+                          <div className="h-4 w-6 bg-muted rounded mt-1 animate-pulse" />
                         </div>
                         <div className="flex-1 min-w-0 space-y-2">
-                          <div className="h-4 w-full bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
-                          <div className="h-3 w-3/4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
+                          <div className="h-4 w-full bg-muted rounded animate-pulse" />
+                          <div className="h-3 w-3/4 bg-muted rounded animate-pulse" />
                           <div className="flex gap-2 pt-2">
-                            <div className="h-5 w-12 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse" />
-                            <div className="h-5 w-12 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse" />
+                            <div className="h-5 w-12 bg-muted rounded-full animate-pulse" />
+                            <div className="h-5 w-12 bg-muted rounded-full animate-pulse" />
                           </div>
                         </div>
                       </div>
@@ -316,19 +287,19 @@ export default function RoadmapPage() {
               {[1, 2, 3, 4, 5].map(i => (
                 <div
                   key={i}
-                  className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 flex items-center gap-4"
+                  className="bg-card rounded-xl border border-border p-4 flex items-center gap-4"
                 >
                   <div className="flex flex-col items-center min-w-[44px] py-1.5 px-2">
-                    <div className="h-4 w-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
-                    <div className="h-4 w-6 bg-slate-200 dark:bg-slate-700 rounded mt-1 animate-pulse" />
+                    <div className="h-4 w-4 bg-muted rounded animate-pulse" />
+                    <div className="h-4 w-6 bg-muted rounded mt-1 animate-pulse" />
                   </div>
                   <div className="flex-1 min-w-0 space-y-2">
-                    <div className="h-4 w-full bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
-                    <div className="h-3 w-1/2 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
+                    <div className="h-4 w-full bg-muted rounded animate-pulse" />
+                    <div className="h-3 w-1/2 bg-muted rounded animate-pulse" />
                   </div>
                   <div className="flex items-center gap-2 shrink-0">
-                    <div className="h-5 w-12 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse" />
-                    <div className="h-4 w-16 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
+                    <div className="h-5 w-12 bg-muted rounded-full animate-pulse" />
+                    <div className="h-4 w-16 bg-muted rounded animate-pulse" />
                   </div>
                 </div>
               ))}
@@ -340,14 +311,14 @@ export default function RoadmapPage() {
             {STATUS_COLUMNS.map(col => (
               <div key={col.key} className="space-y-3">
                 <div className="flex items-center gap-2 mb-2">
-                  <span className={`w-3 h-3 rounded-full ${col.color}`} />
-                  <h2 className={`font-semibold ${col.textColor}`}>{col.label}</h2>
-                  <span className="text-xs text-slate-400 ml-auto">
+                  <StatusDot tone={col.tone} />
+                  <h2 className="font-semibold text-foreground">{col.label}</h2>
+                  <span className="text-xs text-muted-foreground ml-auto">
                     {itemsByStatus(col.key).length}
                   </span>
                 </div>
                 {itemsByStatus(col.key).length === 0 ? (
-                  <p className="text-sm text-slate-400 italic py-4 text-center">No items</p>
+                  <p className="text-sm text-muted-foreground italic py-4 text-center">No items</p>
                 ) : (
                   itemsByStatus(col.key).map(item => (
                     <ItemCard
@@ -365,7 +336,7 @@ export default function RoadmapPage() {
           /* List View */
           <div className="space-y-3">
             {items.length === 0 ? (
-              <p className="text-center py-10 text-slate-400">No items found</p>
+              <p className="text-center py-10 text-muted-foreground">No items found</p>
             ) : (
               items.map(item => (
                 <ItemRow
@@ -508,14 +479,12 @@ export default function RoadmapPage() {
 
 // ── Sub-components ──────────────────────────────────────────────────
 
-function StatCard({ label, value }: { label: string; value: number }) {
-  return (
-    <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4">
-      <p className="text-2xl font-bold text-slate-900 dark:text-white">{value}</p>
-      <p className="text-xs text-slate-500 dark:text-slate-400">{label}</p>
-    </div>
-  );
-}
+const voteButtonClass = (hasVoted: boolean) =>
+  `flex flex-col items-center min-w-[44px] py-1.5 px-2 rounded-lg border text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+    hasVoted
+      ? 'border-primary bg-primary/10 text-primary'
+      : 'border-border bg-muted/50 text-muted-foreground hover:border-primary hover:text-primary'
+  }`;
 
 function ItemCard({
   item,
@@ -531,45 +500,29 @@ function ItemCard({
   const hasVoted = votedItems.has(item.id);
 
   return (
-    <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 hover:shadow-md transition-shadow">
+    <div className="bg-card rounded-xl border border-border p-4 hover:shadow-md transition-shadow">
       <div className="flex items-start gap-3">
         <button
           onClick={() => onVote(item.id)}
           type="button"
           aria-pressed={hasVoted}
           aria-label={hasVoted ? `Remove vote from ${item.title}` : `Upvote ${item.title}`}
-          className={`flex flex-col items-center min-w-[44px] py-1.5 px-2 rounded-lg border text-sm font-semibold transition-colors ${
-            hasVoted
-              ? 'bg-blue-50 border-blue-300 text-blue-700 dark:bg-blue-900/30 dark:border-blue-700 dark:text-blue-300'
-              : 'bg-slate-50 border-slate-200 text-slate-500 hover:border-blue-300 hover:text-blue-600 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300'
-          }`}
+          className={voteButtonClass(hasVoted)}
           title={hasVoted ? 'Remove vote' : 'Upvote'}
         >
           <span className="text-xs">▲</span>
           <span>{item.voteCount}</span>
         </button>
         <div className="flex-1 min-w-0">
-          <h3 className="font-medium text-slate-900 dark:text-white text-sm leading-snug">
-            {item.title}
-          </h3>
+          <h3 className="font-medium text-foreground text-sm leading-snug">{item.title}</h3>
           {item.description && (
-            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">
-              {item.description}
-            </p>
+            <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{item.description}</p>
           )}
-          <div className="flex flex-wrap gap-1.5 mt-2">
-            <span
-              className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${typeBadge.className}`}
-            >
-              {typeBadge.label}
-            </span>
-            <span
-              className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${priorityBadge.className}`}
-            >
-              {priorityBadge.label}
-            </span>
+          <div className="flex flex-wrap items-center gap-1.5 mt-2">
+            <Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
+            <Badge variant={priorityBadge.variant}>{priorityBadge.label}</Badge>
             {item.commentCount > 0 && (
-              <span className="text-[10px] text-slate-400">💬 {item.commentCount}</span>
+              <span className="text-[10px] text-muted-foreground">💬 {item.commentCount}</span>
             )}
           </div>
         </div>
@@ -592,44 +545,34 @@ function ItemRow({
   const hasVoted = votedItems.has(item.id);
 
   return (
-    <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 flex items-center gap-4 hover:shadow-md transition-shadow">
+    <div className="bg-card rounded-xl border border-border p-4 flex items-center gap-4 hover:shadow-md transition-shadow">
       <button
         onClick={() => onVote(item.id)}
         type="button"
         aria-pressed={hasVoted}
         aria-label={hasVoted ? `Remove vote from ${item.title}` : `Upvote ${item.title}`}
         title={hasVoted ? 'Remove vote' : 'Upvote'}
-        className={`flex flex-col items-center min-w-[44px] py-1.5 px-2 rounded-lg border text-sm font-semibold transition-colors ${
-          hasVoted
-            ? 'bg-blue-50 border-blue-300 text-blue-700 dark:bg-blue-900/30 dark:border-blue-700 dark:text-blue-300'
-            : 'bg-slate-50 border-slate-200 text-slate-500 hover:border-blue-300 hover:text-blue-600 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300'
-        }`}
+        className={voteButtonClass(hasVoted)}
       >
         <span className="text-xs">▲</span>
         <span>{item.voteCount}</span>
       </button>
       <div className="flex-1 min-w-0">
-        <h3 className="font-medium text-slate-900 dark:text-white text-sm">{item.title}</h3>
+        <h3 className="font-medium text-foreground text-sm">{item.title}</h3>
         {item.description && (
-          <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-1">
-            {item.description}
-          </p>
+          <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{item.description}</p>
         )}
       </div>
       <div className="flex items-center gap-2 shrink-0">
-        <span
-          className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${typeBadge.className}`}
-        >
-          {typeBadge.label}
-        </span>
+        <Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
         {statusCol && (
-          <span className="flex items-center gap-1 text-xs text-slate-500">
-            <span className={`w-2 h-2 rounded-full ${statusCol.color}`} />
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+            <StatusDot tone={statusCol.tone} />
             {statusCol.label}
           </span>
         )}
         {item.commentCount > 0 && (
-          <span className="text-xs text-slate-400">💬 {item.commentCount}</span>
+          <span className="text-xs text-muted-foreground">💬 {item.commentCount}</span>
         )}
       </div>
     </div>