diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 39087a5b..18a610db 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -59,7 +59,7 @@ function StatCounter({ label, value }: { label: string; value: number }) {
 
   return (
     <div className="rounded-xl border border-white/10 bg-card/40 p-6 text-center">
-      <p className="text-4xl font-bold text-[#06D6A0]">{count.toLocaleString()}+</p>
+      <p className="text-4xl font-bold text-primary">{count.toLocaleString()}+</p>
       <p className="mt-2 text-sm text-muted-foreground">{label}</p>
     </div>
   );
@@ -67,7 +67,7 @@ function StatCounter({ label, value }: { label: string; value: number }) {
 
 function LoadingState() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-foreground">
+    <div className="min-h-screen bg-background text-foreground">
       <section className="max-w-4xl mx-auto px-4 py-24">
         <div className="space-y-4 animate-pulse">
           <div className="h-12 rounded-lg bg-white/10" />
@@ -81,7 +81,7 @@ function LoadingState() {
 
 function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-foreground flex items-center justify-center px-4">
+    <div className="min-h-screen bg-background text-foreground flex items-center justify-center px-4">
       <Card className="max-w-xl w-full bg-card/60 border-red-400/30">
         <CardHeader>
           <CardTitle className="text-red-300">Couldn't load the About page</CardTitle>
@@ -91,7 +91,7 @@ function ErrorState({ message, onRetry }: { message: string; onRetry: () => void
           <button
             type="button"
             onClick={onRetry}
-            className="inline-flex rounded-lg bg-[#06D6A0] px-4 py-2 text-[#0a0a0a] font-semibold hover:brightness-110"
+            className="inline-flex rounded-lg bg-primary px-4 py-2 text-background font-semibold hover:brightness-110"
           >
             Try again
           </button>
@@ -140,9 +140,9 @@ export default function AboutPage() {
   if (error || !data) return <ErrorState message={error ?? "Unknown error"} onRetry={fetchAboutData} />;
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-foreground">
+    <div className="min-h-screen bg-background text-foreground">
       <section className="max-w-5xl mx-auto px-4 py-24 text-center">
-        <Badge variant="outline" className="mb-4 border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10">
+        <Badge variant="outline" className="mb-4 border-primary/30 text-primary bg-primary/10">
           Live platform data
         </Badge>
         <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">Built by agents, for agents</h1>
@@ -195,7 +195,7 @@ export default function AboutPage() {
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
           {data.team.map((member) => (
-            <Card key={member.name} className="bg-card/50 border-white/10 hover:border-[#06D6A0]/30 transition-all">
+            <Card key={member.name} className="bg-card/50 border-white/10 hover:border-primary/30 transition-all">
               <CardHeader>
                 <div className="flex items-center gap-4">
                   <div
@@ -204,7 +204,7 @@ export default function AboutPage() {
                   />
                   <div>
                     <CardTitle className="text-xl">{member.name}</CardTitle>
-                    <p className="text-sm text-[#06D6A0]">{member.role}</p>
+                    <p className="text-sm text-primary">{member.role}</p>
                   </div>
                 </div>
               </CardHeader>
@@ -217,7 +217,7 @@ export default function AboutPage() {
                       href={url}
                       target="_blank"
                       rel="noreferrer"
-                      className="text-xs rounded-md border border-white/15 px-2 py-1 text-muted-foreground hover:text-[#06D6A0] hover:border-[#06D6A0]/40"
+                      className="text-xs rounded-md border border-white/15 px-2 py-1 text-muted-foreground hover:text-primary hover:border-primary/40"
                     >
                       {platform}
                     </a>
@@ -240,9 +240,9 @@ export default function AboutPage() {
         <div className="relative border-l border-white/15 pl-8 space-y-8">
           {data.milestones.map((milestone) => (
             <div key={`${milestone.date}-${milestone.title}`} className="relative">
-              <span className="absolute -left-[39px] top-1 h-3 w-3 rounded-full bg-[#06D6A0]" />
+              <span className="absolute -left-[39px] top-1 h-3 w-3 rounded-full bg-primary" />
               <div className="rounded-xl border border-white/10 bg-card/40 p-6">
-                <p className="text-xs text-[#06D6A0] mb-2">{new Date(milestone.date).toLocaleDateString()}</p>
+                <p className="text-xs text-primary mb-2">{new Date(milestone.date).toLocaleDateString()}</p>
                 <h3 className="text-xl font-semibold mb-2">{milestone.title}</h3>
                 <p className="text-muted-foreground">{milestone.description}</p>
               </div>
@@ -261,7 +261,7 @@ export default function AboutPage() {
         <div className="flex flex-col sm:flex-row gap-4 items-center justify-center">
           <Link
             href="/submit"
-            className="inline-flex items-center justify-center gap-2 px-7 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold hover:brightness-110"
+            className="inline-flex items-center justify-center gap-2 px-7 py-3 rounded-lg bg-primary text-background font-semibold hover:brightness-110"
           >
             Submit a Skill
           </Link>
@@ -269,7 +269,7 @@ export default function AboutPage() {
             href="https://github.com/reflectt/foragents.dev"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center justify-center gap-2 px-7 py-3 rounded-lg border border-[#06D6A0]/40 text-[#06D6A0] font-semibold hover:bg-[#06D6A0]/10"
+            className="inline-flex items-center justify-center gap-2 px-7 py-3 rounded-lg border border-primary/40 text-primary font-semibold hover:bg-primary/10"
           >
             Contribute on GitHub
           </Link>
diff --git a/src/app/accessibility/accessibility-page-client.tsx b/src/app/accessibility/accessibility-page-client.tsx
index 0db5210f..b8868bfa 100644
--- a/src/app/accessibility/accessibility-page-client.tsx
+++ b/src/app/accessibility/accessibility-page-client.tsx
@@ -98,8 +98,8 @@ export function AccessibilityPageClient() {
 
   if (loading) {
     return (
-      <Card className="bg-[#0f0f0f] border-white/10 p-10 text-center">
-        <Loader2 className="w-7 h-7 mx-auto mb-4 animate-spin text-[#06D6A0]" />
+      <Card className="bg-background border-white/10 p-10 text-center">
+        <Loader2 className="w-7 h-7 mx-auto mb-4 animate-spin text-primary" />
         <p className="text-gray-300">Loading accessibility audit results...</p>
       </Card>
     );
@@ -123,7 +123,7 @@ export function AccessibilityPageClient() {
 
   return (
     <div className="space-y-8">
-      <Card className="bg-[#0f0f0f] border-white/10 p-8">
+      <Card className="bg-background border-white/10 p-8">
         <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
           <div>
             <h2 className="text-2xl font-semibold mb-2">Accessibility Compliance Snapshot</h2>
@@ -148,11 +148,11 @@ export function AccessibilityPageClient() {
         </div>
       </Card>
 
-      <Card className="bg-[#0f0f0f] border-white/10 p-8">
+      <Card className="bg-background border-white/10 p-8">
         <h3 className="text-xl font-semibold mb-5">Audit Checks</h3>
         <div className="space-y-4">
           {data.auditChecks.map((check: AccessibilityAuditCheck) => (
-            <div key={check.name} className="rounded-lg border border-white/10 bg-[#141414] p-4">
+            <div key={check.name} className="rounded-lg border border-white/10 bg-background p-4">
               <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-2">
                 <p className="font-medium">{check.name}</p>
                 <Badge className={`border capitalize ${statusStyles(check.status)}`}>
@@ -166,7 +166,7 @@ export function AccessibilityPageClient() {
         </div>
       </Card>
 
-      <Card className="bg-[#0f0f0f] border-white/10 p-8">
+      <Card className="bg-background border-white/10 p-8">
         <h3 className="text-xl font-semibold mb-5">Priority Recommendations</h3>
         {failedChecks.length === 0 ? (
           <div className="rounded-lg border border-emerald-400/30 bg-emerald-500/10 p-4 text-emerald-200">
diff --git a/src/app/accessibility/page.tsx b/src/app/accessibility/page.tsx
index d82b18a0..9ee1ae35 100644
--- a/src/app/accessibility/page.tsx
+++ b/src/app/accessibility/page.tsx
@@ -18,10 +18,10 @@ export const metadata: Metadata = {
 
 export default function AccessibilityPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <div className="max-w-6xl mx-auto px-6 py-16">
         <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold mb-3 text-[#06D6A0]">Accessibility</h1>
+          <h1 className="text-4xl font-bold mb-3 text-primary">Accessibility</h1>
           <p className="text-gray-400 max-w-3xl mx-auto">
             We're publishing real accessibility audit data sourced from persistent records through the /api/accessibility endpoint.
           </p>
diff --git a/src/app/acp/acp-directory-client.tsx b/src/app/acp/acp-directory-client.tsx
index 77e921cb..7f377a64 100644
--- a/src/app/acp/acp-directory-client.tsx
+++ b/src/app/acp/acp-directory-client.tsx
@@ -18,17 +18,17 @@ export type AcpProtocol = {
 };
 
 const statusStyles: Record<AcpProtocol["status"], { bg: string; text: string; border: string }> = {
-  stable: { bg: "bg-[#06D6A0]/10", text: "text-[#06D6A0]", border: "border-[#06D6A0]/20" },
-  beta: { bg: "bg-[#3B82F6]/10", text: "text-[#3B82F6]", border: "border-[#3B82F6]/20" },
-  draft: { bg: "bg-[#F59E0B]/10", text: "text-[#F59E0B]", border: "border-[#F59E0B]/20" },
-  deprecated: { bg: "bg-[#EF4444]/10", text: "text-[#EF4444]", border: "border-[#EF4444]/20" },
+  stable: { bg: "bg-primary/10", text: "text-primary", border: "border-primary/20" },
+  beta: { bg: "bg-electric-blue/10", text: "text-electric-blue", border: "border-electric-blue/20" },
+  draft: { bg: "bg-solar/10", text: "text-solar", border: "border-solar/20" },
+  deprecated: { bg: "bg-destructive/10", text: "text-destructive", border: "border-destructive/20" },
 };
 
 const categoryStyles: Record<AcpProtocol["category"], { bg: string; text: string }> = {
   messaging: { bg: "bg-cyan/10", text: "text-cyan" },
-  discovery: { bg: "bg-[#8B5CF6]/10", text: "text-[#8B5CF6]" },
-  auth: { bg: "bg-[#EC4899]/10", text: "text-[#EC4899]" },
-  data: { bg: "bg-[#F59E0B]/10", text: "text-[#F59E0B]" },
+  discovery: { bg: "bg-purple/10", text: "text-purple" },
+  auth: { bg: "bg-aurora-pink/10", text: "text-aurora-pink" },
+  data: { bg: "bg-solar/10", text: "text-solar" },
 };
 
 export function AcpDirectoryClient({ initialProtocols }: { initialProtocols: AcpProtocol[] }) {
diff --git a/src/app/acp/page.tsx b/src/app/acp/page.tsx
index 21247611..c70628e6 100644
--- a/src/app/acp/page.tsx
+++ b/src/app/acp/page.tsx
@@ -32,7 +32,7 @@ export default function AcpPage() {
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-[32px] md:text-[42px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-3">
+          <h1 className="text-[32px] md:text-[42px] font-bold tracking-[-0.02em] text-foreground mb-3">
             🛰️ ACP Protocol Directory
           </h1>
           <p className="text-lg text-foreground/80 mb-2">
diff --git a/src/app/agent-playground/page.tsx b/src/app/agent-playground/page.tsx
index 3f7feb3a..c3287a4d 100644
--- a/src/app/agent-playground/page.tsx
+++ b/src/app/agent-playground/page.tsx
@@ -166,7 +166,7 @@ export default function AgentPlaygroundPage() {
   }, [runs]);
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden py-12">
         <div className="absolute inset-0">
           <div className="absolute top-0 left-1/2 -translate-x-1/2 h-[600px] w-[600px] rounded-full bg-purple-500/5 blur-[120px]" />
@@ -237,7 +237,7 @@ export default function AgentPlaygroundPage() {
                   <SelectTrigger id="agent-select" className="border-white/10 bg-white/5 text-white">
                     <SelectValue placeholder="Select agent" />
                   </SelectTrigger>
-                  <SelectContent className="border-white/10 bg-[#1a1a1a]">
+                  <SelectContent className="border-white/10 bg-background">
                     {AGENT_OPTIONS.map((agent) => (
                       <SelectItem key={agent} value={agent} className="text-white focus:bg-white/10 focus:text-white">
                         {agent === "all" ? "All agents (filter off)" : agent}
@@ -253,7 +253,7 @@ export default function AgentPlaygroundPage() {
                   <SelectTrigger id="model-select" className="border-white/10 bg-white/5 text-white">
                     <SelectValue placeholder="Select model" />
                   </SelectTrigger>
-                  <SelectContent className="border-white/10 bg-[#1a1a1a]">
+                  <SelectContent className="border-white/10 bg-background">
                     {MODEL_OPTIONS.map((model) => (
                       <SelectItem key={model} value={model} className="text-white focus:bg-white/10 focus:text-white">
                         {model}
@@ -311,7 +311,7 @@ export default function AgentPlaygroundPage() {
                     </Badge>
                   </div>
 
-                  <div className="rounded-lg border border-white/10 bg-[#0a0a0a] p-4">
+                  <div className="rounded-lg border border-white/10 bg-background p-4">
                     <p className="mb-2 text-xs text-muted-foreground">Prompt</p>
                     <p className="mb-4 whitespace-pre-wrap text-sm text-white">{currentRun.prompt}</p>
                     <p className="mb-2 text-xs text-muted-foreground">Response</p>
diff --git a/src/app/agents/AgentsDirectoryClient.tsx b/src/app/agents/AgentsDirectoryClient.tsx
index dee73f8a..bd5c2914 100644
--- a/src/app/agents/AgentsDirectoryClient.tsx
+++ b/src/app/agents/AgentsDirectoryClient.tsx
@@ -23,11 +23,11 @@ export type AgentDirectoryCard = {
 };
 
 const platformColors: Record<string, string> = {
-  openclaw: "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20",
+  openclaw: "bg-primary/10 text-primary border-primary/20",
   discord: "bg-[#5865F2]/10 text-[#5865F2] border-[#5865F2]/20",
-  moltbook: "bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20",
+  moltbook: "bg-solar/10 text-solar border-solar/20",
   twitter: "bg-[#1DA1F2]/10 text-[#1DA1F2] border-[#1DA1F2]/20",
-  github: "bg-[#8B5CF6]/10 text-[#8B5CF6] border-[#8B5CF6]/20",
+  github: "bg-purple/10 text-purple border-purple/20",
 };
 
 function formatHandle(handle: string, domain: string) {
@@ -71,7 +71,7 @@ export function AgentsDirectoryClient({ agents }: { agents: AgentDirectoryCard[]
             <div className="flex items-start gap-4">
               <span className="text-4xl">{agent.avatar}</span>
               <div className="flex-1 min-w-0">
-                <h3 className="text-lg font-semibold text-[#F8FAFC] group-hover:text-cyan transition-colors flex items-center gap-1.5">
+                <h3 className="text-lg font-semibold text-foreground group-hover:text-cyan transition-colors flex items-center gap-1.5">
                   {agent.name}
                   {agent.verifiedAgentJson && (
                     <Image
@@ -94,7 +94,7 @@ export function AgentsDirectoryClient({ agents }: { agents: AgentDirectoryCard[]
                 {agent.installedSkillCount} skills
               </Badge>
               {agent.activityCount7d > 0 ? (
-                <Badge variant="outline" className="text-[10px] bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20">
+                <Badge variant="outline" className="text-[10px] bg-primary/10 text-primary border-primary/20">
                   Active
                 </Badge>
               ) : (
@@ -103,7 +103,7 @@ export function AgentsDirectoryClient({ agents }: { agents: AgentDirectoryCard[]
                 </Badge>
               )}
               {agent.featured && (
-                <Badge variant="outline" className="text-[10px] bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20">
+                <Badge variant="outline" className="text-[10px] bg-solar/10 text-solar border-solar/20">
                   ⭐ Featured
                 </Badge>
               )}
diff --git a/src/app/agents/[handle]/page.tsx b/src/app/agents/[handle]/page.tsx
index 5b7bd204..4bf6e18b 100644
--- a/src/app/agents/[handle]/page.tsx
+++ b/src/app/agents/[handle]/page.tsx
@@ -102,11 +102,11 @@ export async function generateMetadata({ params }: { params: Promise<{ handle: s
 }
 
 const platformColors: Record<string, string> = {
-  openclaw: "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20",
+  openclaw: "bg-primary/10 text-primary border-primary/20",
   discord: "bg-[#5865F2]/10 text-[#5865F2] border-[#5865F2]/20",
-  moltbook: "bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20",
+  moltbook: "bg-solar/10 text-solar border-solar/20",
   twitter: "bg-[#1DA1F2]/10 text-[#1DA1F2] border-[#1DA1F2]/20",
-  github: "bg-[#8B5CF6]/10 text-[#8B5CF6] border-[#8B5CF6]/20",
+  github: "bg-purple/10 text-purple border-purple/20",
 };
 
 export default async function AgentProfilePage({ params }: { params: Promise<{ handle: string }> }) {
@@ -176,7 +176,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
         <div className="relative rounded-2xl border border-cyan/20 bg-gradient-to-br from-cyan/5 to-purple/5 p-8 mb-8">
           {agent.featured && (
             <div className="absolute top-4 right-4">
-              <Badge className="bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20">⭐ Featured</Badge>
+              <Badge className="bg-solar/10 text-solar border-solar/20">⭐ Featured</Badge>
             </div>
           )}
 
@@ -184,7 +184,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
             <AgentAvatar handle={agent.handle} fallback={agent.avatar} />
 
             <div className="flex-1">
-              <h1 className="text-3xl font-bold text-[#F8FAFC] mb-1 flex items-center gap-2">
+              <h1 className="text-3xl font-bold text-foreground mb-1 flex items-center gap-2">
                 {agent.name}
                 {(agent.verified || agent.links?.agentJson) && <VerifiedBadge className="w-5 h-5 text-xs" />}
               </h1>
@@ -250,7 +250,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
         {/* Installed skills */}
         <section className="mb-8">
           <div className="flex items-center justify-between gap-4 mb-4">
-            <h2 className="text-lg font-semibold text-[#F8FAFC]">🛠️ Installed Skills</h2>
+            <h2 className="text-lg font-semibold text-foreground">🛠️ Installed Skills</h2>
             {installedSkills.length > 0 && (
               <span className="text-xs text-muted-foreground font-mono">{installedSkills.length} skills</span>
             )}
@@ -268,7 +268,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
                 >
                   <div className="flex items-start justify-between gap-3">
                     <div>
-                      <h3 className="font-semibold text-[#F8FAFC]">{skill.name}</h3>
+                      <h3 className="font-semibold text-foreground">{skill.name}</h3>
                       <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{skill.description}</p>
                     </div>
                     <div className="flex flex-col items-end gap-1">
@@ -286,7 +286,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
 
         {/* Platforms */}
         <section className="mb-8">
-          <h2 className="text-lg font-semibold text-[#F8FAFC] mb-4">📡 Platforms</h2>
+          <h2 className="text-lg font-semibold text-foreground mb-4">📡 Platforms</h2>
           <div className="flex flex-wrap gap-2">
             {agent.platforms.map((platform) => (
               <Badge
@@ -304,7 +304,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
 
         {/* Activity */}
         <section className="mb-8">
-          <h2 className="text-lg font-semibold text-[#F8FAFC] mb-4">🗞️ Activity</h2>
+          <h2 className="text-lg font-semibold text-foreground mb-4">🗞️ Activity</h2>
           {activity.items.length === 0 ? (
             <p className="text-sm text-muted-foreground">No recent comments or ratings yet.</p>
           ) : (
@@ -347,7 +347,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
           <>
             <Separator className="opacity-10 my-8" />
             <section className="mb-8">
-              <h2 className="text-lg font-semibold text-[#F8FAFC] mb-4">📊 Recent Milestones</h2>
+              <h2 className="text-lg font-semibold text-foreground mb-4">📊 Recent Milestones</h2>
               <div className="space-y-4">
                 {agent.activity.map((item, index) => {
                   const activityIcons: Record<string, string> = {
@@ -389,7 +389,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
         {Object.keys(agent.links).length > 0 && (
           <>
             <section className="mb-8">
-              <h2 className="text-lg font-semibold text-[#F8FAFC] mb-4">🔗 Links</h2>
+              <h2 className="text-lg font-semibold text-foreground mb-4">🔗 Links</h2>
               <div className="flex flex-col gap-3">
                 {agent.links.agentJson && (
                   <a
@@ -439,7 +439,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
 
         {/* API */}
         <section className="mb-8">
-          <h2 className="text-lg font-semibold text-[#F8FAFC] mb-4">🔌 API</h2>
+          <h2 className="text-lg font-semibold text-foreground mb-4">🔌 API</h2>
           <div className="flex flex-col gap-2">
             <Link
               href={`/api/agents/${agent.handle}.json`}
@@ -455,7 +455,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
         {/* Related Agents */}
         {relatedAgents.length > 0 && (
           <section>
-            <h2 className="text-lg font-semibold text-[#F8FAFC] mb-4">👥 Other Agents</h2>
+            <h2 className="text-lg font-semibold text-foreground mb-4">👥 Other Agents</h2>
             <div className="grid gap-3">
               {relatedAgents.map((other) => (
                 <Link
diff --git a/src/app/agents/agents-page-client.tsx b/src/app/agents/agents-page-client.tsx
index a6db745f..6624d56d 100644
--- a/src/app/agents/agents-page-client.tsx
+++ b/src/app/agents/agents-page-client.tsx
@@ -174,7 +174,7 @@ export function AgentsPageClient({ agents: initialAgents }: AgentsPageClientProp
 
       {featuredAgents.length > 0 && (
         <div className="mb-10">
-          <h2 className="text-2xl font-bold text-[#F8FAFC] mb-4 flex items-center gap-2">
+          <h2 className="text-2xl font-bold text-foreground mb-4 flex items-center gap-2">
             <span>⭐</span>
             <span>Top Trust Agents</span>
           </h2>
@@ -188,7 +188,7 @@ export function AgentsPageClient({ agents: initialAgents }: AgentsPageClientProp
 
       {otherAgents.length > 0 && (
         <div>
-          <h2 className="text-2xl font-bold text-[#F8FAFC] mb-4">All Agents</h2>
+          <h2 className="text-2xl font-bold text-foreground mb-4">All Agents</h2>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {otherAgents.map((agent) => (
               <AgentCard key={agent.id} agent={agent} />
@@ -215,7 +215,7 @@ function AgentCard({ agent }: { agent: DirectoryAgent }) {
           <div className="flex items-start gap-3 mb-3">
             <div className="text-3xl">🤖</div>
             <div className="flex-1 min-w-0">
-              <h3 className="font-bold text-[#F8FAFC] group-hover:text-cyan transition-colors">
+              <h3 className="font-bold text-foreground group-hover:text-cyan transition-colors">
                 {agent.name}
               </h3>
               <p className="text-xs text-muted-foreground">@{agent.handle}</p>
diff --git a/src/app/agents/page.tsx b/src/app/agents/page.tsx
index 5469a722..125c7726 100644
--- a/src/app/agents/page.tsx
+++ b/src/app/agents/page.tsx
@@ -55,7 +55,7 @@ export default function AgentsIndexPage() {
       <main className="max-w-6xl mx-auto px-4 py-12">
         {/* Header */}
         <div className="mb-10">
-          <h1 className="text-4xl font-bold text-[#F8FAFC] mb-3">
+          <h1 className="text-4xl font-bold text-foreground mb-3">
             🤖 Agent Directory
           </h1>
           <p className="text-lg text-foreground/80 mb-4">
diff --git a/src/app/auth/callback/page.tsx b/src/app/auth/callback/page.tsx
index e45d7b07..c096f4ec 100644
--- a/src/app/auth/callback/page.tsx
+++ b/src/app/auth/callback/page.tsx
@@ -4,7 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 
 export default function AuthCallbackPage() {
   return (
-    <main id="main-content" className="min-h-screen bg-[#0A0E17] text-slate-100">
+    <main id="main-content" className="min-h-screen bg-background text-slate-100">
       <div className="mx-auto flex min-h-[calc(100vh-4rem)] w-full max-w-6xl items-center justify-center px-4 py-16 sm:px-6 lg:px-8">
         <Card className="w-full max-w-lg border-white/10 bg-white/[0.03] shadow-2xl shadow-cyan-900/20">
           <CardHeader className="space-y-2 text-center">
@@ -14,7 +14,7 @@ export default function AuthCallbackPage() {
             </CardDescription>
           </CardHeader>
           <CardContent className="flex justify-center">
-            <Button asChild className="bg-cyan-400 text-[#0A0E17] hover:bg-cyan-300">
+            <Button asChild className="bg-cyan-400 text-background hover:bg-cyan-300">
               <Link href="/auth/signin">Go to sign in</Link>
             </Button>
           </CardContent>
diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx
index 8d062fd1..ad839a32 100644
--- a/src/app/auth/signin/page.tsx
+++ b/src/app/auth/signin/page.tsx
@@ -7,7 +7,7 @@ import { Label } from "@/components/ui/label";
 
 export default function SignInPage() {
   return (
-    <main id="main-content" className="min-h-screen bg-[#0A0E17] text-slate-100">
+    <main id="main-content" className="min-h-screen bg-background text-slate-100">
       <div className="mx-auto flex min-h-[calc(100vh-4rem)] w-full max-w-6xl items-center justify-center px-4 py-16 sm:px-6 lg:px-8">
         <div className="grid w-full max-w-5xl gap-10 lg:grid-cols-2 lg:items-center">
           <section>
@@ -27,7 +27,7 @@ export default function SignInPage() {
               <CardDescription className="text-slate-400">Use GitHub or your email to enter the platform.</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
-              <Button className="h-11 w-full bg-cyan-400 text-[#0A0E17] hover:bg-cyan-300" type="button">
+              <Button className="h-11 w-full bg-cyan-400 text-background hover:bg-cyan-300" type="button">
                 <Github className="h-4 w-4" aria-hidden="true" />
                 Sign in with GitHub
               </Button>
diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx
index 0a00ee53..eac709c9 100644
--- a/src/app/auth/signup/page.tsx
+++ b/src/app/auth/signup/page.tsx
@@ -5,7 +5,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 
 export default function SignUpPage() {
   return (
-    <main id="main-content" className="min-h-screen bg-[#0A0E17] text-slate-100">
+    <main id="main-content" className="min-h-screen bg-background text-slate-100">
       <div className="mx-auto flex min-h-[calc(100vh-4rem)] w-full max-w-6xl items-center justify-center px-4 py-16 sm:px-6 lg:px-8">
         <Card className="w-full max-w-lg border-white/10 bg-white/[0.03] shadow-2xl shadow-cyan-900/20">
           <CardHeader className="space-y-2 text-center">
@@ -15,7 +15,7 @@ export default function SignUpPage() {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
-            <Button className="h-11 w-full bg-cyan-400 text-[#0A0E17] hover:bg-cyan-300" type="button">
+            <Button className="h-11 w-full bg-cyan-400 text-background hover:bg-cyan-300" type="button">
               <Github className="h-4 w-4" aria-hidden="true" />
               Continue with GitHub
             </Button>
diff --git a/src/app/badges/page.tsx b/src/app/badges/page.tsx
index 96e2f4ff..d5be3522 100644
--- a/src/app/badges/page.tsx
+++ b/src/app/badges/page.tsx
@@ -223,15 +223,15 @@ export default function BadgesPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-[#06D6A0]/5 rounded-full blur-[120px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-primary/5 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-7xl mx-auto px-4 py-16">
           <div className="text-center mb-8">
-            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC] mb-4">
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
               🏅 Badges & Achievements
             </h1>
             <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
@@ -254,7 +254,7 @@ export default function BadgesPage() {
                 id="badge-category"
                 value={category}
                 onChange={(event) => setCategory(event.target.value as "all" | BadgeCategory)}
-                className="w-full h-10 rounded-md border border-white/10 bg-[#0f0f0f] px-3 text-sm"
+                className="w-full h-10 rounded-md border border-white/10 bg-background px-3 text-sm"
               >
                 <option value="all">All categories</option>
                 {categories.map((item) => (
@@ -274,7 +274,7 @@ export default function BadgesPage() {
                 value={search}
                 onChange={(event) => setSearch(event.target.value)}
                 placeholder="Search badges by name, criteria, or description"
-                className="bg-[#0f0f0f] border-white/10"
+                className="bg-background border-white/10"
               />
             </div>
 
@@ -287,7 +287,7 @@ export default function BadgesPage() {
                 value={agentHandle}
                 onChange={(event) => setAgentHandle(event.target.value)}
                 placeholder="agent-handle"
-                className="bg-[#0f0f0f] border-white/10"
+                className="bg-background border-white/10"
               />
             </div>
           </CardContent>
@@ -300,7 +300,7 @@ export default function BadgesPage() {
           {awardMessage ? (
             <>
               <span>•</span>
-              <span className="text-[#06D6A0]">{awardMessage}</span>
+              <span className="text-primary">{awardMessage}</span>
             </>
           ) : null}
         </div>
@@ -308,9 +308,9 @@ export default function BadgesPage() {
 
       <section className="max-w-7xl mx-auto px-4 pb-14">
         {isLoading ? (
-          <Card className="bg-[#0f0f0f] border-white/10 p-10 text-center text-muted-foreground">Loading badges...</Card>
+          <Card className="bg-background border-white/10 p-10 text-center text-muted-foreground">Loading badges...</Card>
         ) : error ? (
-          <Card className="bg-[#0f0f0f] border-white/10 p-10 text-center">
+          <Card className="bg-background border-white/10 p-10 text-center">
             <p className="text-red-400 mb-4">{error}</p>
             <Button
               variant="outline"
@@ -324,7 +324,7 @@ export default function BadgesPage() {
             </Button>
           </Card>
         ) : badges.length === 0 ? (
-          <Card className="bg-[#0f0f0f] border-white/10 p-10 text-center text-muted-foreground">
+          <Card className="bg-background border-white/10 p-10 text-center text-muted-foreground">
             No badges found for your current filters.
           </Card>
         ) : (
@@ -359,7 +359,7 @@ export default function BadgesPage() {
                       Details
                     </Button>
                     <Button
-                      className="flex-1 bg-[#06D6A0] hover:bg-[#06D6A0]/90 text-black"
+                      className="flex-1 bg-primary hover:bg-primary/90 text-black"
                       disabled={awardState[badge.id]}
                       onClick={() => void awardBadge(badge.id)}
                     >
@@ -381,7 +381,7 @@ export default function BadgesPage() {
           }
         }}
       >
-        <DialogContent className="bg-[#0f0f0f] border-white/10 sm:max-w-xl">
+        <DialogContent className="bg-background border-white/10 sm:max-w-xl">
           {detailLoading ? (
             <p className="text-muted-foreground">Loading badge detail...</p>
           ) : detailError ? (
@@ -405,12 +405,12 @@ export default function BadgesPage() {
                 </div>
 
                 <div>
-                  <h3 className="text-sm font-semibold text-[#F8FAFC] mb-1">Criteria</h3>
+                  <h3 className="text-sm font-semibold text-foreground mb-1">Criteria</h3>
                   <p className="text-sm text-muted-foreground">{badgeDetail.criteria}</p>
                 </div>
 
                 <div>
-                  <h3 className="text-sm font-semibold text-[#F8FAFC] mb-2">Earners</h3>
+                  <h3 className="text-sm font-semibold text-foreground mb-2">Earners</h3>
                   {badgeDetail.earners.length === 0 ? (
                     <p className="text-sm text-muted-foreground">No earners yet.</p>
                   ) : (
@@ -425,7 +425,7 @@ export default function BadgesPage() {
                 </div>
 
                 <Button
-                  className="w-full bg-[#06D6A0] hover:bg-[#06D6A0]/90 text-black"
+                  className="w-full bg-primary hover:bg-primary/90 text-black"
                   disabled={awardState[badgeDetail.id]}
                   onClick={() => void awardBadge(badgeDetail.id)}
                 >
diff --git a/src/app/benchmarks/benchmarks-client.tsx b/src/app/benchmarks/benchmarks-client.tsx
index 4ce93eb8..20085a34 100644
--- a/src/app/benchmarks/benchmarks-client.tsx
+++ b/src/app/benchmarks/benchmarks-client.tsx
@@ -148,7 +148,7 @@ export function BenchmarksClient({ initialCategory }: BenchmarksClientProps) {
   }
 
   return (
-    <div className="min-h-screen bg-[#0b1020] text-slate-100">
+    <div className="min-h-screen bg-background text-slate-100">
       <main className="mx-auto max-w-6xl px-4 py-12 md:px-6">
         <section className="mb-8 rounded-2xl border border-white/10 bg-white/5 p-6">
           <h1 className="text-3xl font-bold tracking-tight md:text-4xl">Benchmarks</h1>
diff --git a/src/app/benchmarks/submit/submit-client.tsx b/src/app/benchmarks/submit/submit-client.tsx
index e0d27544..3e11bce2 100644
--- a/src/app/benchmarks/submit/submit-client.tsx
+++ b/src/app/benchmarks/submit/submit-client.tsx
@@ -116,7 +116,7 @@ export function BenchmarkSubmitClient() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0b1020] text-slate-100">
+    <div className="min-h-screen bg-background text-slate-100">
       <main className="mx-auto grid max-w-6xl gap-6 px-4 py-12 md:grid-cols-2 md:px-6">
         <section className="rounded-xl border border-white/10 bg-white/[0.03] p-5">
           <h1 className="text-2xl font-bold">Submit Benchmark Results</h1>
diff --git a/src/app/bookmarks/page.tsx b/src/app/bookmarks/page.tsx
index a897c292..d8a68b3a 100644
--- a/src/app/bookmarks/page.tsx
+++ b/src/app/bookmarks/page.tsx
@@ -47,11 +47,11 @@ const ITEM_TYPES: Array<{ value: BookmarkItemType; label: string }> = [
 ];
 
 const badgeClassByType: Record<BookmarkItemType, string> = {
-  skill: "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/30",
-  mcp: "bg-[#7C3AED]/10 text-[#A78BFA] border-[#7C3AED]/30",
-  collection: "bg-[#E879F9]/10 text-[#F5D0FE] border-[#E879F9]/30",
-  guide: "bg-[#0EA5E9]/10 text-[#67E8F9] border-[#0EA5E9]/30",
-  connector: "bg-[#F59E0B]/10 text-[#FCD34D] border-[#F59E0B]/30",
+  skill: "bg-primary/10 text-primary border-primary/30",
+  mcp: "bg-purple/10 text-purple/80 border-purple/30",
+  collection: "bg-purple/60/10 text-purple/60 border-purple/60/30",
+  guide: "bg-cyan/10 text-cyan/70 border-cyan/30",
+  connector: "bg-solar/10 text-solar border-solar/30",
 };
 
 const routeSegmentByType: Record<BookmarkItemType, string> = {
@@ -209,15 +209,15 @@ export default function BookmarksPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-[#06D6A0]/5 rounded-full blur-[120px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-primary/5 rounded-full blur-[120px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[400px] max-h-[400px] bg-purple/3 rounded-full blur-[100px]" />
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC] mb-4">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
             🔖 Saved Bookmarks
           </h1>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
@@ -271,7 +271,7 @@ export default function BookmarksPage() {
                 <Button
                   type="button"
                   variant={tagFilter === "all" ? "default" : "outline"}
-                  className={tagFilter === "all" ? "bg-[#06D6A0] text-black hover:brightness-110" : ""}
+                  className={tagFilter === "all" ? "bg-primary text-black hover:brightness-110" : ""}
                   onClick={() => setTagFilter("all")}
                 >
                   All tags
@@ -281,7 +281,7 @@ export default function BookmarksPage() {
                     key={tag}
                     type="button"
                     variant={tagFilter === tag ? "default" : "outline"}
-                    className={tagFilter === tag ? "bg-[#06D6A0] text-black hover:brightness-110" : ""}
+                    className={tagFilter === tag ? "bg-primary text-black hover:brightness-110" : ""}
                     onClick={() => setTagFilter(tag)}
                   >
                     #{tag}
@@ -376,7 +376,7 @@ export default function BookmarksPage() {
                 <Button
                   type="submit"
                   disabled={isSubmitting}
-                  className="bg-[#06D6A0] text-black hover:brightness-110"
+                  className="bg-primary text-black hover:brightness-110"
                 >
                   {isSubmitting ? "Adding..." : "Save Bookmark"}
                 </Button>
@@ -459,7 +459,7 @@ export default function BookmarksPage() {
                             <div className="flex flex-wrap gap-2">
                               <Link
                                 href={`/${routeSegmentByType[bookmark.itemType]}/${bookmark.itemSlug}`}
-                                className="inline-flex items-center justify-center h-9 px-4 rounded-md bg-[#06D6A0] text-black text-sm font-medium hover:brightness-110"
+                                className="inline-flex items-center justify-center h-9 px-4 rounded-md bg-primary text-black text-sm font-medium hover:brightness-110"
                               >
                                 Open Item
                               </Link>
diff --git a/src/app/bootstrap/BootstrapApiDocsClient.tsx b/src/app/bootstrap/BootstrapApiDocsClient.tsx
index 195dd8db..ee9ada85 100644
--- a/src/app/bootstrap/BootstrapApiDocsClient.tsx
+++ b/src/app/bootstrap/BootstrapApiDocsClient.tsx
@@ -44,7 +44,7 @@ export default function BootstrapApiDocsClient() {
   }
 
   return (
-    <main className="min-h-screen bg-[#0a0a0a] px-4 py-10 text-white">
+    <main className="min-h-screen bg-background px-4 py-10 text-white">
       <div className="mx-auto max-w-4xl space-y-8">
         <section className="space-y-3">
           <h1 className="text-3xl font-bold md:text-4xl">Agent Bootstrap API</h1>
@@ -77,7 +77,7 @@ export default function BootstrapApiDocsClient() {
             <button
               type="button"
               onClick={tryEndpoint}
-              className="rounded-lg bg-[#06D6A0] px-4 py-2 text-sm font-semibold text-black hover:bg-[#06D6A0]/90 disabled:cursor-not-allowed disabled:opacity-60"
+              className="rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-black hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60"
               disabled={loading}
             >
               {loading ? "Calling..." : "Try it"}
diff --git a/src/app/bounties/[id]/bounty-detail-client.tsx b/src/app/bounties/[id]/bounty-detail-client.tsx
index 85676cf7..81b05c4f 100644
--- a/src/app/bounties/[id]/bounty-detail-client.tsx
+++ b/src/app/bounties/[id]/bounty-detail-client.tsx
@@ -47,7 +47,7 @@ function statusLabel(status: BountyStatus) {
 function statusBadgeClass(status: BountyStatus) {
   switch (status) {
     case "open":
-      return "border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10";
+      return "border-primary/30 text-primary bg-primary/10";
     case "claimed":
       return "border-purple/30 text-purple bg-purple/10";
     case "submitted":
@@ -168,7 +168,7 @@ export function BountyDetailClient({ bountyId }: { bountyId: string }) {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center">
+      <div className="min-h-screen bg-background flex items-center justify-center">
         <div className="text-sm text-white/70">Loading bounty details…</div>
       </div>
     );
@@ -176,9 +176,9 @@ export function BountyDetailClient({ bountyId }: { bountyId: string }) {
 
   if (!bounty) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a]">
+      <div className="min-h-screen bg-background">
         <div className="max-w-3xl mx-auto px-4 py-10">
-          <Link href="/bounties" className="text-sm text-white/60 hover:text-[#06D6A0] transition-colors">
+          <Link href="/bounties" className="text-sm text-white/60 hover:text-primary transition-colors">
             ← Back to bounties
           </Link>
           <Card className="mt-6 bg-card/30 border-white/10">
@@ -195,10 +195,10 @@ export function BountyDetailClient({ bountyId }: { bountyId: string }) {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <div className="max-w-6xl mx-auto px-4 py-10">
         <div className="mb-8">
-          <Link href="/bounties" className="text-sm text-white/60 hover:text-[#06D6A0] transition-colors">
+          <Link href="/bounties" className="text-sm text-white/60 hover:text-primary transition-colors">
             ← Back to bounties
           </Link>
         </div>
@@ -236,7 +236,7 @@ export function BountyDetailClient({ bountyId }: { bountyId: string }) {
                 <ul className="space-y-3">
                   {bounty.acceptanceCriteria.map((c) => (
                     <li key={c} className="flex items-start gap-3">
-                      <div className="mt-0.5 w-5 h-5 rounded-md border border-white/15 bg-white/5 flex items-center justify-center text-xs text-[#06D6A0]">
+                      <div className="mt-0.5 w-5 h-5 rounded-md border border-white/15 bg-white/5 flex items-center justify-center text-xs text-primary">
                         ✓
                       </div>
                       <div className="text-sm text-white/80">{c}</div>
@@ -306,7 +306,7 @@ export function BountyDetailClient({ bountyId }: { bountyId: string }) {
                   <Button
                     onClick={() => void runAction("submit")}
                     disabled={actionBusy}
-                    className="w-full bg-[#06D6A0] text-[#0a0a0a] hover:brightness-110 font-semibold"
+                    className="w-full bg-primary text-background hover:brightness-110 font-semibold"
                   >
                     Submit Work
                   </Button>
@@ -333,7 +333,7 @@ export function BountyDetailClient({ bountyId }: { bountyId: string }) {
               <CardContent className="space-y-3">
                 {timeline.map((event, index) => (
                   <div key={`${event.label}-${event.at}-${index}`} className="flex gap-3">
-                    <div className="w-2 h-2 rounded-full mt-2 bg-[#06D6A0]" />
+                    <div className="w-2 h-2 rounded-full mt-2 bg-primary" />
                     <div className="min-w-0">
                       <div className="text-sm text-white/90">{event.label}</div>
                       <div className="text-xs text-white/50">{formatDate(event.at)}</div>
diff --git a/src/app/bounties/bounties-client.tsx b/src/app/bounties/bounties-client.tsx
index 88189f62..15cc1ea3 100644
--- a/src/app/bounties/bounties-client.tsx
+++ b/src/app/bounties/bounties-client.tsx
@@ -51,7 +51,7 @@ function statusLabel(status: BountyStatus) {
 function statusBadgeClass(status: BountyStatus) {
   switch (status) {
     case "open":
-      return "border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10";
+      return "border-primary/30 text-primary bg-primary/10";
     case "claimed":
       return "border-purple/30 text-purple bg-purple/10";
     case "submitted":
@@ -210,7 +210,7 @@ export function BountiesClient({ initialBounties }: { initialBounties: Bounty[]
 
         <Button
           onClick={() => setShowCreateForm((prev) => !prev)}
-          className="bg-gradient-to-r from-[#06D6A0] to-purple text-[#0a0a0a] font-semibold hover:brightness-110"
+          className="bg-gradient-to-r from-primary to-purple text-background font-semibold hover:brightness-110"
         >
           {showCreateForm ? "Cancel" : "Post Bounty"}
         </Button>
@@ -254,7 +254,7 @@ export function BountiesClient({ initialBounties }: { initialBounties: Bounty[]
             />
           </div>
 
-          <Button type="submit" className="bg-[#06D6A0] text-[#0a0a0a] hover:brightness-110 font-semibold">
+          <Button type="submit" className="bg-primary text-background hover:brightness-110 font-semibold">
             Submit bounty
           </Button>
         </form>
@@ -267,7 +267,7 @@ export function BountiesClient({ initialBounties }: { initialBounties: Bounty[]
           <select
             value={status}
             onChange={(e) => setStatus(e.target.value as BountyStatus | "all")}
-            className="mt-1 w-full px-3 py-2 rounded-lg bg-card border border-white/10 text-foreground focus:outline-none focus:border-[#06D6A0]/40"
+            className="mt-1 w-full px-3 py-2 rounded-lg bg-card border border-white/10 text-foreground focus:outline-none focus:border-primary/40"
           >
             <option value="open">Open</option>
             <option value="claimed">Claimed</option>
@@ -282,7 +282,7 @@ export function BountiesClient({ initialBounties }: { initialBounties: Bounty[]
           <select
             value={tag}
             onChange={(e) => setTag(e.target.value)}
-            className="mt-1 w-full px-3 py-2 rounded-lg bg-card border border-white/10 text-foreground focus:outline-none focus:border-[#06D6A0]/40"
+            className="mt-1 w-full px-3 py-2 rounded-lg bg-card border border-white/10 text-foreground focus:outline-none focus:border-primary/40"
           >
             <option value="all">All</option>
             {allTags.map((t) => (
@@ -320,7 +320,7 @@ export function BountiesClient({ initialBounties }: { initialBounties: Bounty[]
           <select
             value={sort}
             onChange={(e) => setSort(e.target.value as SortKey)}
-            className="mt-1 w-full px-3 py-2 rounded-lg bg-card border border-white/10 text-foreground focus:outline-none focus:border-[#06D6A0]/40"
+            className="mt-1 w-full px-3 py-2 rounded-lg bg-card border border-white/10 text-foreground focus:outline-none focus:border-primary/40"
           >
             <option value="recent">Most recent</option>
             <option value="budget">Highest bounty</option>
@@ -344,7 +344,7 @@ export function BountiesClient({ initialBounties }: { initialBounties: Bounty[]
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0">
                   <CardTitle className="text-lg text-white/90 truncate">
-                    <Link href={`/bounties/${encodeURIComponent(b.id)}`} className="hover:text-[#06D6A0] transition-colors">
+                    <Link href={`/bounties/${encodeURIComponent(b.id)}`} className="hover:text-primary transition-colors">
                       {b.title}
                     </Link>
                   </CardTitle>
@@ -354,7 +354,7 @@ export function BountiesClient({ initialBounties }: { initialBounties: Bounty[]
                     </Badge>
                     <Badge
                       variant="outline"
-                      className="border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10"
+                      className="border-primary/30 text-primary bg-primary/10"
                       title={b.currency}
                     >
                       {formatMoney(b.budget, b.currency)}
diff --git a/src/app/bounties/page.tsx b/src/app/bounties/page.tsx
index 29170498..0ae0a0bd 100644
--- a/src/app/bounties/page.tsx
+++ b/src/app/bounties/page.tsx
@@ -42,16 +42,16 @@ export default async function BountiesPage() {
   const bounties = await getBounties();
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero */}
       <section className="relative overflow-hidden">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/10 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-6xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Fund-a-Kit Bounties
           </h1>
           <p className="text-xl text-foreground/80 max-w-3xl mx-auto">
diff --git a/src/app/brand-kit/page.tsx b/src/app/brand-kit/page.tsx
index 0a97d8bd..731fe558 100644
--- a/src/app/brand-kit/page.tsx
+++ b/src/app/brand-kit/page.tsx
@@ -51,9 +51,9 @@ export default async function BrandKitPage({
   });
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-foreground">
+    <div className="min-h-screen bg-background text-foreground">
       <section className="max-w-6xl mx-auto px-4 py-16 text-center">
-        <Badge variant="outline" className="mb-4 border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10">
+        <Badge variant="outline" className="mb-4 border-primary/30 text-primary bg-primary/10">
           Persistent JSON + API
         </Badge>
         <h1 className="text-4xl md:text-6xl font-bold tracking-tight mb-3">forAgents.dev Brand Kit</h1>
@@ -66,7 +66,7 @@ export default async function BrandKitPage({
 
       <section className="max-w-6xl mx-auto px-4 py-10 space-y-6">
         <div className="flex flex-wrap gap-2 justify-center">
-          <Button asChild variant={!selectedType ? "default" : "outline"} className={!selectedType ? "bg-[#06D6A0] text-black" : ""}>
+          <Button asChild variant={!selectedType ? "default" : "outline"} className={!selectedType ? "bg-primary text-black" : ""}>
             <Link href="/brand-kit">All</Link>
           </Button>
           {brandKitTypes.map((type) => (
@@ -74,7 +74,7 @@ export default async function BrandKitPage({
               key={type}
               asChild
               variant={selectedType === type ? "default" : "outline"}
-              className={selectedType === type ? "bg-[#06D6A0] text-black" : ""}
+              className={selectedType === type ? "bg-primary text-black" : ""}
             >
               <Link href={`/brand-kit?type=${type}${search ? `&search=${encodeURIComponent(search)}` : ""}`}>
                 {titleForType(type)}
@@ -110,7 +110,7 @@ export default async function BrandKitPage({
                 <p className="text-sm text-muted-foreground">{item.description}</p>
                 <p className="text-xs text-muted-foreground">Format: {item.format.toUpperCase()}</p>
                 <p className="text-xs text-muted-foreground">Updated: {new Date(item.updatedAt).toLocaleString()}</p>
-                <Button asChild className="bg-[#06D6A0] text-black hover:brightness-110">
+                <Button asChild className="bg-primary text-black hover:brightness-110">
                   <a href={item.url} target="_blank" rel="noreferrer">
                     Open asset
                   </a>
diff --git a/src/app/brand/brand-client.tsx b/src/app/brand/brand-client.tsx
index 20b6555f..1eab544a 100644
--- a/src/app/brand/brand-client.tsx
+++ b/src/app/brand/brand-client.tsx
@@ -159,7 +159,7 @@ export function BrandClientPage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a] text-foreground">
+      <div className="min-h-screen bg-background text-foreground">
         <section className="max-w-5xl mx-auto px-4 py-20 space-y-4 animate-pulse">
           <div className="h-10 rounded-lg bg-white/10" />
           <div className="h-6 rounded-lg bg-white/10 w-2/3" />
@@ -171,7 +171,7 @@ export function BrandClientPage() {
 
   if (error || !data) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a] text-foreground flex items-center justify-center px-4">
+      <div className="min-h-screen bg-background text-foreground flex items-center justify-center px-4">
         <Card className="max-w-lg w-full bg-card/60 border-red-400/30">
           <CardHeader>
             <CardTitle className="text-red-300">Couldn't load brand kit</CardTitle>
@@ -185,9 +185,9 @@ export function BrandClientPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-foreground">
+    <div className="min-h-screen bg-background text-foreground">
       <section className="max-w-6xl mx-auto px-4 py-16 text-center">
-        <Badge variant="outline" className="mb-4 border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10">
+        <Badge variant="outline" className="mb-4 border-primary/30 text-primary bg-primary/10">
           Press kit · persistent API data
         </Badge>
         <h1 className="text-4xl md:text-6xl font-bold tracking-tight mb-3">forAgents.dev Brand Center</h1>
@@ -226,7 +226,7 @@ export function BrandClientPage() {
                       <CardContent className="space-y-3">
                         <p className="text-sm text-muted-foreground">{asset.description}</p>
                         <p className="text-xs text-muted-foreground">{asset.usageGuidelines}</p>
-                        <Button asChild className="bg-[#06D6A0] text-[#0a0a0a] hover:brightness-110">
+                        <Button asChild className="bg-primary text-background hover:brightness-110">
                           <a href={asset.downloadUrl} target="_blank" rel="noreferrer">
                             Download
                           </a>
@@ -257,7 +257,7 @@ export function BrandClientPage() {
                 <p className="font-medium">{color.name}</p>
                 <p className="text-xs text-muted-foreground">{color.usage}</p>
                 <div className="flex items-center justify-between">
-                  <code className="text-sm text-[#06D6A0]">{color.hex}</code>
+                  <code className="text-sm text-primary">{color.hex}</code>
                   <Button variant="outline" className="border-white/20" onClick={() => void handleCopyHex(color.hex)}>
                     {copiedHex === color.hex ? "Copied" : "Copy"}
                   </Button>
@@ -305,7 +305,7 @@ export function BrandClientPage() {
             <ul className="space-y-3 text-sm text-muted-foreground">
               {data.usageGuidelines.map((rule) => (
                 <li key={rule} className="flex items-start gap-2">
-                  <span className="text-[#06D6A0] shrink-0">•</span>
+                  <span className="text-primary shrink-0">•</span>
                   <span>{rule}</span>
                 </li>
               ))}
@@ -359,7 +359,7 @@ export function BrandClientPage() {
                 />
               </div>
 
-              <Button type="submit" disabled={submitting} className="bg-[#06D6A0] text-[#0a0a0a] hover:brightness-110">
+              <Button type="submit" disabled={submitting} className="bg-primary text-background hover:brightness-110">
                 {submitting ? "Submitting..." : "Submit request"}
               </Button>
 
diff --git a/src/app/builder/page.tsx b/src/app/builder/page.tsx
index 9b017c61..67e4a925 100644
--- a/src/app/builder/page.tsx
+++ b/src/app/builder/page.tsx
@@ -279,7 +279,7 @@ export default function BuilderPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <div className="max-w-7xl mx-auto px-4 py-10">
         <div className="mb-6 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
           <div>
diff --git a/src/app/calculator/page.tsx b/src/app/calculator/page.tsx
index 10c1f246..ef902fdf 100644
--- a/src/app/calculator/page.tsx
+++ b/src/app/calculator/page.tsx
@@ -204,16 +204,16 @@ export default function CalculatorPage() {
   const chartMax = Math.max(results?.monthlyCost ?? 0, results?.monthlySavings ?? 0, 1);
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden py-20">
         <div className="absolute inset-0">
-          <div className="absolute top-0 left-1/2 h-[700px] w-[700px] -translate-x-1/2 rounded-full bg-[#06D6A0]/5 blur-[140px]" />
+          <div className="absolute top-0 left-1/2 h-[700px] w-[700px] -translate-x-1/2 rounded-full bg-primary/5 blur-[140px]" />
         </div>
 
         <div className="relative mx-auto max-w-4xl px-4 text-center">
           <Badge
             variant="outline"
-            className="mb-4 border-[#06D6A0]/30 bg-[#06D6A0]/10 text-xs text-[#06D6A0]"
+            className="mb-4 border-primary/30 bg-primary/10 text-xs text-primary"
           >
             <TrendingUp className="mr-1 inline h-3 w-3" />
             ROI Calculator
@@ -331,7 +331,7 @@ export default function CalculatorPage() {
           </CardContent>
         </Card>
 
-        <Card className="border-[#06D6A0]/30 bg-gradient-to-br from-[#06D6A0]/10 via-card/80 to-purple/5">
+        <Card className="border-primary/30 bg-gradient-to-br from-primary/10 via-card/80 to-purple/5">
           <CardHeader>
             <CardTitle className="text-white">Computed ROI</CardTitle>
             <CardDescription>Live values from the calculator API.</CardDescription>
@@ -376,7 +376,7 @@ export default function CalculatorPage() {
                       Human value / month: <span className="text-white">{formatCurrency(results.monthlySavings)}</span>
                     </div>
                     <div>
-                      Net monthly impact: <span className={netMonthly >= 0 ? "text-[#06D6A0]" : "text-red-400"}>{formatCurrency(netMonthly)}</span>
+                      Net monthly impact: <span className={netMonthly >= 0 ? "text-primary" : "text-red-400"}>{formatCurrency(netMonthly)}</span>
                     </div>
                     <div>
                       ROI: <span className="text-white">{results.roiPercentage.toFixed(2)}%</span>
@@ -396,7 +396,7 @@ export default function CalculatorPage() {
                     label="Monthly Savings"
                     value={results.monthlySavings}
                     max={chartMax}
-                    colorClass="bg-[#06D6A0]/80"
+                    colorClass="bg-primary/80"
                   />
                 </div>
 
@@ -449,7 +449,7 @@ function InputRow({ label, value, min, max, step, onChange, displayValue }: Inpu
         step={step}
         value={value}
         onChange={(event) => onChange(Number(event.target.value))}
-        className="w-full accent-[#06D6A0]"
+        className="w-full accent-primary"
       />
       <Input
         type="number"
@@ -474,11 +474,11 @@ function MetricTile({ label, value, accent }: MetricTileProps) {
   return (
     <div
       className={`rounded-lg border p-4 ${
-        accent ? "border-[#06D6A0]/35 bg-[#06D6A0]/10" : "border-white/10 bg-white/5"
+        accent ? "border-primary/35 bg-primary/10" : "border-white/10 bg-white/5"
       }`}
     >
       <div className="mb-1 text-sm text-muted-foreground">{label}</div>
-      <div className={accent ? "text-3xl font-bold text-[#06D6A0]" : "text-2xl font-bold text-white"}>
+      <div className={accent ? "text-3xl font-bold text-primary" : "text-2xl font-bold text-white"}>
         {value}
       </div>
     </div>
diff --git a/src/app/canary/page.tsx b/src/app/canary/page.tsx
index 50ec4aa3..70e8b1bf 100644
--- a/src/app/canary/page.tsx
+++ b/src/app/canary/page.tsx
@@ -120,7 +120,7 @@ export default async function CanaryPage({ searchParams }: CanaryPageProps) {
       : 0;
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="max-w-6xl mx-auto px-4 py-12">
         <div className="mb-8">
           <h1 className="text-3xl font-bold">Canary Runs</h1>
diff --git a/src/app/careers/page.tsx b/src/app/careers/page.tsx
index 9a776e9c..4b3fdbcf 100644
--- a/src/app/careers/page.tsx
+++ b/src/app/careers/page.tsx
@@ -230,7 +230,7 @@ export default function CareersPage() {
   }));
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jobPostingsJsonLd) }}
@@ -238,7 +238,7 @@ export default function CareersPage() {
 
       <section className="relative mx-auto max-w-6xl space-y-10 px-4 py-16">
         <div className="space-y-4 text-center">
-          <h1 className="text-[40px] font-bold tracking-[-0.02em] text-[#F8FAFC] md:text-[56px]">
+          <h1 className="text-[40px] font-bold tracking-[-0.02em] text-foreground md:text-[56px]">
             Build the Future of Agent Infrastructure
           </h1>
           <p className="mx-auto max-w-2xl text-xl text-foreground/80">
@@ -246,7 +246,7 @@ export default function CareersPage() {
           </p>
         </div>
 
-        <div className="grid grid-cols-1 gap-4 rounded-2xl border border-white/10 bg-[#0f0f0f] p-4 md:grid-cols-2 lg:grid-cols-4">
+        <div className="grid grid-cols-1 gap-4 rounded-2xl border border-white/10 bg-background p-4 md:grid-cols-2 lg:grid-cols-4">
           <div className="space-y-2 lg:col-span-4">
             <Label htmlFor="career-search">Search roles</Label>
             <div className="relative">
@@ -311,7 +311,7 @@ export default function CareersPage() {
         </div>
 
         {loading && (
-          <div className="rounded-xl border border-white/10 bg-[#0f0f0f] p-6 text-sm text-muted-foreground">
+          <div className="rounded-xl border border-white/10 bg-background p-6 text-sm text-muted-foreground">
             Loading careers...
           </div>
         )}
@@ -330,7 +330,7 @@ export default function CareersPage() {
             </div>
 
             {jobs.length === 0 ? (
-              <div className="rounded-xl border border-white/10 bg-[#0f0f0f] p-6 text-sm text-muted-foreground">
+              <div className="rounded-xl border border-white/10 bg-background p-6 text-sm text-muted-foreground">
                 No roles match your current filters.
               </div>
             ) : (
@@ -340,7 +340,7 @@ export default function CareersPage() {
                 const isOpen = job.status === "open";
 
                 return (
-                  <Card key={job.id} className="border-white/10 bg-[#0f0f0f]">
+                  <Card key={job.id} className="border-white/10 bg-background">
                     <CardHeader className="space-y-3">
                       <div className="flex flex-wrap items-center justify-between gap-3">
                         <CardTitle>{job.title}</CardTitle>
@@ -385,7 +385,7 @@ export default function CareersPage() {
                           type="button"
                           onClick={() => handleOpenApplication(job.id)}
                           disabled={!isOpen}
-                          className="bg-[#06D6A0] text-black hover:bg-[#06D6A0]/90"
+                          className="bg-primary text-black hover:bg-primary/90"
                         >
                           {isApplyOpen ? "Close application form" : "Apply"}
                         </Button>
diff --git a/src/app/changelog/changelog-content.tsx b/src/app/changelog/changelog-content.tsx
index 337fbf58..f1f5610c 100644
--- a/src/app/changelog/changelog-content.tsx
+++ b/src/app/changelog/changelog-content.tsx
@@ -118,7 +118,7 @@ export function ChangelogContent({ entries }: ChangelogContentProps) {
             onClick={() => setSelectedFilter(filter.id)}
             className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
               selectedFilter === filter.id
-                ? "bg-cyan text-[#0A0E17]"
+                ? "bg-cyan text-background"
                 : "bg-white/5 text-muted-foreground hover:bg-white/10"
             }`}
           >
diff --git a/src/app/changelog/page.tsx b/src/app/changelog/page.tsx
index f219567b..00026f31 100644
--- a/src/app/changelog/page.tsx
+++ b/src/app/changelog/page.tsx
@@ -88,7 +88,7 @@ export default async function ChangelogPage() {
           </p>
           <Link
             href="#newsletter"
-            className="inline-flex items-center justify-center h-10 px-6 rounded-lg bg-cyan text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all"
+            className="inline-flex items-center justify-center h-10 px-6 rounded-lg bg-cyan text-background font-semibold text-sm hover:brightness-110 transition-all"
           >
             Subscribe
           </Link>
diff --git a/src/app/community/[id]/discussion-detail-client.tsx b/src/app/community/[id]/discussion-detail-client.tsx
index f2b31568..cbb17c93 100644
--- a/src/app/community/[id]/discussion-detail-client.tsx
+++ b/src/app/community/[id]/discussion-detail-client.tsx
@@ -28,7 +28,7 @@ function categoryBadgeClass(category: CommunityCategory) {
     help: "border-amber-500/30 text-amber-400 bg-amber-500/10",
     showcase: "border-purple/30 text-purple bg-purple/10",
     feedback: "border-cyan-500/30 text-cyan-300 bg-cyan-500/10",
-    ideas: "border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10",
+    ideas: "border-primary/30 text-primary bg-primary/10",
   };
 
   return classes[category];
@@ -128,7 +128,7 @@ export function DiscussionDetailClient({ id }: { id: string }) {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a]">
+      <div className="min-h-screen bg-background">
         <div className="max-w-4xl mx-auto px-4 py-10">
           <Card className="bg-card/20 border-white/10">
             <CardContent className="py-12 text-center text-muted-foreground">Loading thread...</CardContent>
@@ -140,9 +140,9 @@ export function DiscussionDetailClient({ id }: { id: string }) {
 
   if (error && !thread) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a]">
+      <div className="min-h-screen bg-background">
         <div className="max-w-4xl mx-auto px-4 py-10">
-          <Link href="/community" className="text-sm text-white/60 hover:text-[#06D6A0] transition-colors">
+          <Link href="/community" className="text-sm text-white/60 hover:text-primary transition-colors">
             ← Back to discussions
           </Link>
 
@@ -162,10 +162,10 @@ export function DiscussionDetailClient({ id }: { id: string }) {
   if (!thread) return null;
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <div className="max-w-4xl mx-auto px-4 py-10">
         <div className="mb-8">
-          <Link href="/community" className="text-sm text-white/60 hover:text-[#06D6A0] transition-colors">
+          <Link href="/community" className="text-sm text-white/60 hover:text-primary transition-colors">
             ← Back to discussions
           </Link>
         </div>
@@ -260,7 +260,7 @@ export function DiscussionDetailClient({ id }: { id: string }) {
                 <Button
                   type="submit"
                   disabled={replySubmitting}
-                  className="bg-gradient-to-r from-[#06D6A0] to-purple text-[#0a0a0a] font-semibold hover:brightness-110"
+                  className="bg-gradient-to-r from-primary to-purple text-background font-semibold hover:brightness-110"
                 >
                   {replySubmitting ? "Posting..." : "Post Reply"}
                 </Button>
diff --git a/src/app/community/community-client.tsx b/src/app/community/community-client.tsx
index 540dfca1..862f6a1f 100644
--- a/src/app/community/community-client.tsx
+++ b/src/app/community/community-client.tsx
@@ -55,7 +55,7 @@ function categoryBadgeClass(category: CommunityCategory) {
     help: "border-amber-500/30 text-amber-400 bg-amber-500/10",
     showcase: "border-purple/30 text-purple bg-purple/10",
     feedback: "border-cyan-500/30 text-cyan-300 bg-cyan-500/10",
-    ideas: "border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10",
+    ideas: "border-primary/30 text-primary bg-primary/10",
   };
 
   return classes[category];
@@ -165,7 +165,7 @@ export function CommunityClient() {
 
         <Button
           onClick={() => setShowNewThread((current) => !current)}
-          className="bg-gradient-to-r from-[#06D6A0] to-purple text-[#0a0a0a] font-semibold hover:brightness-110"
+          className="bg-gradient-to-r from-primary to-purple text-background font-semibold hover:brightness-110"
         >
           + New Thread
         </Button>
@@ -245,7 +245,7 @@ export function CommunityClient() {
                 <Button
                   type="submit"
                   disabled={submitting}
-                  className="bg-gradient-to-r from-[#06D6A0] to-purple text-[#0a0a0a] font-semibold hover:brightness-110"
+                  className="bg-gradient-to-r from-primary to-purple text-background font-semibold hover:brightness-110"
                 >
                   {submitting ? "Posting..." : "Post Thread"}
                 </Button>
@@ -299,7 +299,7 @@ export function CommunityClient() {
         <div className="space-y-4">
           {threads.map((thread) => (
             <Link key={thread.id} href={`/community/${encodeURIComponent(thread.id)}`} className="block">
-              <Card className="bg-card/30 border-white/10 hover:border-[#06D6A0]/30 transition-colors">
+              <Card className="bg-card/30 border-white/10 hover:border-primary/30 transition-colors">
                 <CardHeader className="pb-3">
                   <div className="flex items-start justify-between gap-4">
                     <div className="min-w-0 flex-1">
diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx
index 61ec2807..5d029ab5 100644
--- a/src/app/community/page.tsx
+++ b/src/app/community/page.tsx
@@ -130,7 +130,7 @@ export default function CommunityPage() {
   ];
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Header */}
       <header className="border-b border-white/5 backdrop-blur-sm sticky top-0 z-50 bg-background/80">
         <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
@@ -147,12 +147,12 @@ export default function CommunityPage() {
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         {/* Subtle aurora background */}
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-3xl mx-auto px-4 py-20 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Join the Agent Community
           </h1>
           <p className="text-xl text-foreground/80 mb-2">
@@ -169,14 +169,14 @@ export default function CommunityPage() {
           {stats.map((stat, index) => (
             <Card
               key={index}
-              className="bg-card/50 border-white/5 hover:border-[#06D6A0]/20 transition-all group"
+              className="bg-card/50 border-white/5 hover:border-primary/20 transition-all group"
             >
               <CardContent className="pt-6">
                 <div className="flex flex-col items-center text-center">
                   <div className="text-4xl mb-3 group-hover:scale-110 transition-transform">
                     {stat.icon}
                   </div>
-                  <div className="text-3xl font-bold text-[#06D6A0] mb-1">
+                  <div className="text-3xl font-bold text-primary mb-1">
                     {stat.value}
                   </div>
                   <div className="text-sm font-semibold text-foreground mb-1">
@@ -207,9 +207,9 @@ export default function CommunityPage() {
           {contributions.map((contribution, index) => (
             <div
               key={index}
-              className="relative overflow-hidden rounded-xl border border-white/10 bg-card/30 p-6 hover:border-[#06D6A0]/30 transition-all group"
+              className="relative overflow-hidden rounded-xl border border-white/10 bg-card/30 p-6 hover:border-primary/30 transition-all group"
             >
-              <div className="absolute top-0 right-0 w-32 h-32 bg-[#06D6A0]/5 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity" />
+              <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity" />
               <div className="relative">
                 <div className="text-3xl mb-4">{contribution.icon}</div>
                 <h3 className="text-xl font-bold mb-2">{contribution.title}</h3>
@@ -221,14 +221,14 @@ export default function CommunityPage() {
                     href={contribution.link}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center gap-2 text-sm font-semibold text-[#06D6A0] hover:underline"
+                    className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:underline"
                   >
                     {contribution.linkText}
                   </a>
                 ) : (
                   <Link
                     href={contribution.link}
-                    className="inline-flex items-center gap-2 text-sm font-semibold text-[#06D6A0] hover:underline"
+                    className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:underline"
                   >
                     {contribution.linkText}
                   </Link>
@@ -254,7 +254,7 @@ export default function CommunityPage() {
           {featuredMembers.map((member, index) => (
             <Card
               key={index}
-              className="bg-card/50 border-white/5 hover:border-[#06D6A0]/20 transition-all group"
+              className="bg-card/50 border-white/5 hover:border-primary/20 transition-all group"
             >
               <CardHeader>
                 <div className="flex items-start justify-between">
@@ -271,7 +271,7 @@ export default function CommunityPage() {
                   </div>
                   <Badge
                     variant="outline"
-                    className="text-xs bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/30"
+                    className="text-xs bg-primary/10 text-primary border-primary/30"
                   >
                     {member.badge}
                   </Badge>
@@ -282,7 +282,7 @@ export default function CommunityPage() {
                   {member.description}
                 </p>
                 <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                  <span className="text-[#06D6A0]">⚡</span>
+                  <span className="text-primary">⚡</span>
                   <span>{member.skills} skills published</span>
                 </div>
               </CardContent>
@@ -295,8 +295,8 @@ export default function CommunityPage() {
 
       {/* Discord CTA */}
       <section className="max-w-3xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-[#06D6A0]/20 bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/10 rounded-full blur-[80px]" />
+        <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/5 via-card/80 to-purple/5">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[80px]" />
           <div className="absolute bottom-0 left-0 w-48 h-48 bg-purple/10 rounded-full blur-[60px]" />
 
           <div className="relative p-8 md:p-12 text-center">
@@ -308,15 +308,15 @@ export default function CommunityPage() {
 
             <div className="space-y-3 mb-8">
               <div className="flex items-center justify-center gap-2 text-sm">
-                <span className="text-[#06D6A0]">✓</span>
+                <span className="text-primary">✓</span>
                 <span className="text-muted-foreground">Real-time support and collaboration</span>
               </div>
               <div className="flex items-center justify-center gap-2 text-sm">
-                <span className="text-[#06D6A0]">✓</span>
+                <span className="text-primary">✓</span>
                 <span className="text-muted-foreground">Early access to new features</span>
               </div>
               <div className="flex items-center justify-center gap-2 text-sm">
-                <span className="text-[#06D6A0]">✓</span>
+                <span className="text-primary">✓</span>
                 <span className="text-muted-foreground">Weekly community events and AMAs</span>
               </div>
             </div>
@@ -325,7 +325,7 @@ export default function CommunityPage() {
               href="https://discord.gg/foragents"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-bold text-base hover:brightness-110 transition-all shadow-lg shadow-[#06D6A0]/20"
+              className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-lg bg-primary text-background font-bold text-base hover:brightness-110 transition-all shadow-lg shadow-primary/20"
             >
               Join Discord Server ↗
             </a>
diff --git a/src/app/compatibility/compatibility-matrix-client.tsx b/src/app/compatibility/compatibility-matrix-client.tsx
index 336a2cb2..c5228dcf 100644
--- a/src/app/compatibility/compatibility-matrix-client.tsx
+++ b/src/app/compatibility/compatibility-matrix-client.tsx
@@ -137,7 +137,7 @@ export function CompatibilityMatrixClient() {
 
   return (
     <div className="space-y-6">
-      <Card className="border-white/10 bg-[#0D1322]">
+      <Card className="border-white/10 bg-card">
         <CardHeader className="pb-3">
           <CardTitle className="text-lg text-slate-100">Filters</CardTitle>
         </CardHeader>
@@ -146,7 +146,7 @@ export function CompatibilityMatrixClient() {
             <div className="space-y-2">
               <p className="text-xs uppercase tracking-wide text-slate-400">Client</p>
               <Select value={clientFilter} onValueChange={setClientFilter}>
-                <SelectTrigger className="w-full border-white/10 bg-[#0A0E17] text-slate-100">
+                <SelectTrigger className="w-full border-white/10 bg-background text-slate-100">
                   <SelectValue placeholder="Select client" />
                 </SelectTrigger>
                 <SelectContent>
@@ -166,7 +166,7 @@ export function CompatibilityMatrixClient() {
                 value={statusFilter}
                 onValueChange={(value) => setStatusFilter(value as "all" | CompatibilityStatus)}
               >
-                <SelectTrigger className="w-full border-white/10 bg-[#0A0E17] text-slate-100">
+                <SelectTrigger className="w-full border-white/10 bg-background text-slate-100">
                   <SelectValue placeholder="Select status" />
                 </SelectTrigger>
                 <SelectContent>
@@ -184,7 +184,7 @@ export function CompatibilityMatrixClient() {
             <p className="text-xs text-slate-400">
               Showing {filteredRows.length} of {data.rows.length} servers
             </p>
-            <Button asChild size="sm" className="bg-cyan-500 text-[#071019] hover:bg-cyan-400">
+            <Button asChild size="sm" className="bg-cyan-500 text-background hover:bg-cyan-400">
               <Link
                 href="https://github.com/reflectt/foragents.dev/issues/new?template=blank.yml&title=%5BCompatibility%5D%20Client%20x%20Server%20report"
                 target="_blank"
@@ -197,11 +197,11 @@ export function CompatibilityMatrixClient() {
         </CardContent>
       </Card>
 
-      <div className="overflow-x-auto rounded-xl border border-white/10 bg-[#0D1322]">
+      <div className="overflow-x-auto rounded-xl border border-white/10 bg-card">
         <table className="min-w-[900px] w-full border-collapse text-sm">
           <thead>
             <tr className="border-b border-white/10 bg-white/[0.02]">
-              <th className="sticky left-0 z-10 bg-[#0F1526] px-4 py-3 text-left font-semibold text-slate-200">Server</th>
+              <th className="sticky left-0 z-10 bg-card px-4 py-3 text-left font-semibold text-slate-200">Server</th>
               {visibleClients.map((client) => (
                 <th key={client.id} className="px-4 py-3 text-left font-semibold text-slate-200">
                   <div>{client.name}</div>
@@ -213,7 +213,7 @@ export function CompatibilityMatrixClient() {
           <tbody>
             {filteredRows.map((row) => (
               <tr key={row.slug} className="border-b border-white/5 align-top">
-                <td className="sticky left-0 bg-[#0D1322] px-4 py-3">
+                <td className="sticky left-0 bg-card px-4 py-3">
                   <div className="font-medium text-slate-100">{row.name}</div>
                   <div className="mt-1 text-xs capitalize text-slate-400">{row.category}</div>
                   {row.notes ? <div className="mt-2 text-xs text-slate-500">{row.notes}</div> : null}
@@ -234,13 +234,13 @@ export function CompatibilityMatrixClient() {
         </table>
       </div>
 
-      <Card className="border-white/10 bg-[#0D1322]">
+      <Card className="border-white/10 bg-card">
         <CardHeader>
           <CardTitle className="text-lg text-slate-100">Known issues</CardTitle>
         </CardHeader>
         <CardContent className="space-y-3">
           {data.knownIssues.map((issue) => (
-            <div key={issue.id} className="rounded-lg border border-white/10 bg-[#0A0E17] p-3">
+            <div key={issue.id} className="rounded-lg border border-white/10 bg-background p-3">
               <div className="flex flex-wrap items-center gap-2">
                 <Badge variant="outline" className={ISSUE_SEVERITY_STYLES[issue.severity]}>
                   {issue.severity}
diff --git a/src/app/compatibility/page.tsx b/src/app/compatibility/page.tsx
index b87d4176..07f77807 100644
--- a/src/app/compatibility/page.tsx
+++ b/src/app/compatibility/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 
 export default function CompatibilityPage() {
   return (
-    <div className="min-h-screen bg-[#0A0E17]">
+    <div className="min-h-screen bg-background">
       <div className="mx-auto max-w-7xl px-4 py-12 md:px-6">
         <Link href="/mcp" className="text-sm text-cyan-400 hover:underline">
           ← Back to MCP Hub
diff --git a/src/app/compliance/audit/audit-compliance-client.tsx b/src/app/compliance/audit/audit-compliance-client.tsx
index 6b88a416..c9174e60 100644
--- a/src/app/compliance/audit/audit-compliance-client.tsx
+++ b/src/app/compliance/audit/audit-compliance-client.tsx
@@ -231,21 +231,21 @@ export default function AuditComplianceClient() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden min-h-[280px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-6xl mx-auto px-4 py-16 w-full">
           <Link
             href="/compliance"
-            className="text-sm text-foreground/60 hover:text-[#06D6A0] transition-colors mb-4 inline-block"
+            className="text-sm text-foreground/60 hover:text-primary transition-colors mb-4 inline-block"
           >
             ← Back to Compliance Hub
           </Link>
-          <Badge className="mb-4 bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20">Persistent Audit Data</Badge>
-          <h1 className="text-[36px] md:text-[48px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-3">Compliance Audit Tracker</h1>
+          <Badge className="mb-4 bg-primary/10 text-primary border-primary/20">Persistent Audit Data</Badge>
+          <h1 className="text-[36px] md:text-[48px] font-bold tracking-[-0.02em] text-foreground mb-3">Compliance Audit Tracker</h1>
           <p className="text-lg text-foreground/80 max-w-3xl">
             Review framework controls, filter findings, and submit new audit entries backed by persistent data.
           </p>
@@ -392,7 +392,7 @@ export default function AuditComplianceClient() {
                                 href={audit.evidence}
                                 target="_blank"
                                 rel="noreferrer"
-                                className="text-[#06D6A0] hover:underline break-all"
+                                className="text-primary hover:underline break-all"
                               >
                                 View evidence
                               </a>
@@ -533,7 +533,7 @@ export default function AuditComplianceClient() {
               </div>
 
               <div className="md:col-span-2 flex flex-col gap-2">
-                <Button type="submit" disabled={submitting} className="w-fit bg-[#06D6A0] text-[#04140e] hover:bg-[#05c790]">
+                <Button type="submit" disabled={submitting} className="w-fit bg-primary text-background hover:bg-primary/90">
                   {submitting ? "Submitting..." : "Submit finding"}
                 </Button>
 
diff --git a/src/app/compliance/compliance-hub-client.tsx b/src/app/compliance/compliance-hub-client.tsx
index bd2ef926..0bee95ce 100644
--- a/src/app/compliance/compliance-hub-client.tsx
+++ b/src/app/compliance/compliance-hub-client.tsx
@@ -145,15 +145,15 @@ export default function ComplianceHubClient() {
   }, []);
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden min-h-[300px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-6xl mx-auto px-4 py-16 w-full">
-          <Badge className="mb-4 bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20">Live Aggregated Compliance Data</Badge>
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">Compliance Hub</h1>
+          <Badge className="mb-4 bg-primary/10 text-primary border-primary/20">Live Aggregated Compliance Data</Badge>
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">Compliance Hub</h1>
           <p className="text-lg text-foreground/80 max-w-2xl">
             Unified view across audits and governance policies with framework-level scores, policy status totals, and recent findings.
           </p>
@@ -187,7 +187,7 @@ export default function ComplianceHubClient() {
               <CardContent>
                 <div className="grid gap-6 md:grid-cols-[1fr_2fr] md:items-center">
                   <div className="space-y-2">
-                    <p className="text-5xl font-bold text-[#F8FAFC]">{data.overallComplianceScore}%</p>
+                    <p className="text-5xl font-bold text-foreground">{data.overallComplianceScore}%</p>
                     <p className="text-sm text-foreground/70">
                       {data.summary.totalFrameworks} frameworks · {data.summary.totalAudits} audits · {data.policyStatusCounts.total} policies
                     </p>
@@ -215,7 +215,7 @@ export default function ComplianceHubClient() {
                   {data.frameworkBreakdown.map((framework) => (
                     <article key={framework.framework} className="rounded-lg border border-white/10 bg-black/20 p-4 space-y-3">
                       <div className="flex items-center justify-between gap-3">
-                        <h3 className="font-semibold text-[#F8FAFC]">{framework.framework}</h3>
+                        <h3 className="font-semibold text-foreground">{framework.framework}</h3>
                         <Badge variant="secondary">{framework.score}%</Badge>
                       </div>
 
@@ -263,7 +263,7 @@ export default function ComplianceHubClient() {
                         <Badge variant="outline" className={`uppercase ${statusChipClass(audit.status)}`}>{audit.status}</Badge>
                         <span className="text-xs text-foreground/60">{formatDate(audit.auditDate)}</span>
                       </div>
-                      <p className="text-sm font-medium text-[#F8FAFC]">{audit.controlName}</p>
+                      <p className="text-sm font-medium text-foreground">{audit.controlName}</p>
                       <p className="text-xs text-foreground/60 mt-1">{audit.controlId} · Auditor: {audit.auditor}</p>
                     </article>
                   ))}
@@ -278,10 +278,10 @@ export default function ComplianceHubClient() {
               <CardContent>
                 <div className="grid gap-4 md:grid-cols-3">
                   {SUB_PAGE_LINKS.map((link) => (
-                    <Link key={link.href} href={link.href} className="rounded-lg border border-white/10 bg-black/20 p-4 hover:border-[#06D6A0]/40 transition-colors block">
+                    <Link key={link.href} href={link.href} className="rounded-lg border border-white/10 bg-black/20 p-4 hover:border-primary/40 transition-colors block">
                       <div className="flex items-center justify-between gap-3 mb-2">
-                        <h3 className="font-semibold text-[#F8FAFC]">{link.title}</h3>
-                        <ArrowRight className="h-4 w-4 text-[#06D6A0]" />
+                        <h3 className="font-semibold text-foreground">{link.title}</h3>
+                        <ArrowRight className="h-4 w-4 text-primary" />
                       </div>
                       <p className="text-sm text-foreground/70">{link.description}</p>
                     </Link>
diff --git a/src/app/compliance/governance/page.tsx b/src/app/compliance/governance/page.tsx
index cf8a2527..58e9c0f4 100644
--- a/src/app/compliance/governance/page.tsx
+++ b/src/app/compliance/governance/page.tsx
@@ -60,21 +60,21 @@ export default async function GovernanceFrameworkPage() {
   const policies = await getPolicies();
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden min-h-[300px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 w-full">
           <Link
             href="/compliance"
-            className="text-sm text-foreground/60 hover:text-[#06D6A0] transition-colors mb-4 inline-block"
+            className="text-sm text-foreground/60 hover:text-primary transition-colors mb-4 inline-block"
           >
             ← Back to Compliance Hub
           </Link>
-          <Badge className="mb-4 bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20">Live Policy Data</Badge>
-          <h1 className="text-[40px] md:text-[48px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <Badge className="mb-4 bg-primary/10 text-primary border-primary/20">Live Policy Data</Badge>
+          <h1 className="text-[40px] md:text-[48px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Governance Framework
           </h1>
           <p className="text-xl text-foreground/80">Policies are now loaded from persistent governance data.</p>
@@ -96,7 +96,7 @@ export default async function GovernanceFrameworkPage() {
               {policies.map((policy) => (
                 <article key={policy.id} className="rounded-lg border border-white/10 bg-black/20 p-4">
                   <div className="flex flex-wrap items-center gap-2 mb-2">
-                    <h3 className="font-semibold text-base text-[#F8FAFC]">{policy.title}</h3>
+                    <h3 className="font-semibold text-base text-foreground">{policy.title}</h3>
                     <Badge className={`capitalize border ${statusVariant(policy.status)}`}>{policy.status}</Badge>
                     <Badge className="capitalize border border-white/20 bg-white/5 text-foreground/80">
                       {policy.category.replace("-", " ")}
@@ -132,10 +132,10 @@ export default async function GovernanceFrameworkPage() {
 
       <div className="max-w-5xl mx-auto px-4 py-12">
         <div className="flex gap-4 justify-between">
-          <Link href="/compliance" className="text-sm text-foreground/60 hover:text-[#06D6A0] transition-colors">
+          <Link href="/compliance" className="text-sm text-foreground/60 hover:text-primary transition-colors">
             ← Back to Compliance Hub
           </Link>
-          <Link href="/compliance/responsible-ai" className="text-sm text-[#06D6A0] hover:underline">
+          <Link href="/compliance/responsible-ai" className="text-sm text-primary hover:underline">
             Responsible AI →
           </Link>
         </div>
diff --git a/src/app/compliance/responsible-ai/page.tsx b/src/app/compliance/responsible-ai/page.tsx
index 2b906514..08005137 100644
--- a/src/app/compliance/responsible-ai/page.tsx
+++ b/src/app/compliance/responsible-ai/page.tsx
@@ -78,21 +78,21 @@ export default async function ResponsibleAIPage() {
   const ethicsPolicies = await getEthicsPolicies();
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden min-h-[300px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 w-full">
           <Link
             href="/compliance"
-            className="text-sm text-foreground/60 hover:text-[#06D6A0] transition-colors mb-4 inline-block"
+            className="text-sm text-foreground/60 hover:text-primary transition-colors mb-4 inline-block"
           >
             ← Back to Compliance Hub
           </Link>
-          <Badge className="mb-4 bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20">Ethics Policies (Live)</Badge>
-          <h1 className="text-[40px] md:text-[48px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <Badge className="mb-4 bg-primary/10 text-primary border-primary/20">Ethics Policies (Live)</Badge>
+          <h1 className="text-[40px] md:text-[48px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Responsible AI Playbook
           </h1>
           <p className="text-xl text-foreground/80">Ethics-focused governance data is loaded from persistent policy records.</p>
@@ -110,7 +110,7 @@ export default async function ResponsibleAIPage() {
             <div className="grid md:grid-cols-2 gap-4">
               {principles.map((principle) => (
                 <div key={principle.title} className="rounded-lg border border-white/10 bg-black/20 p-4">
-                  <h3 className="font-semibold mb-2 text-[#F8FAFC]">{principle.title}</h3>
+                  <h3 className="font-semibold mb-2 text-foreground">{principle.title}</h3>
                   <p className="text-sm text-foreground/70">{principle.description}</p>
                 </div>
               ))}
@@ -132,7 +132,7 @@ export default async function ResponsibleAIPage() {
               {ethicsPolicies.map((policy) => (
                 <article key={policy.id} className="rounded-lg border border-white/10 bg-black/20 p-4">
                   <div className="flex flex-wrap items-center gap-2 mb-2">
-                    <h3 className="font-semibold text-base text-[#F8FAFC]">{policy.title}</h3>
+                    <h3 className="font-semibold text-base text-foreground">{policy.title}</h3>
                     <Badge className={`capitalize border ${statusClass(policy.status)}`}>{policy.status}</Badge>
                   </div>
                   <p className="text-sm text-foreground/70 mb-3">{policy.description}</p>
@@ -160,10 +160,10 @@ export default async function ResponsibleAIPage() {
 
       <div className="max-w-5xl mx-auto px-4 py-12">
         <div className="flex gap-4 justify-between">
-          <Link href="/compliance" className="text-sm text-foreground/60 hover:text-[#06D6A0] transition-colors">
+          <Link href="/compliance" className="text-sm text-foreground/60 hover:text-primary transition-colors">
             ← Back to Compliance Hub
           </Link>
-          <Link href="/compliance/governance" className="text-sm text-[#06D6A0] hover:underline">
+          <Link href="/compliance/governance" className="text-sm text-primary hover:underline">
             Governance Framework →
           </Link>
         </div>
diff --git a/src/app/connectors/[slug]/page.tsx b/src/app/connectors/[slug]/page.tsx
index e933495d..a261cc0f 100644
--- a/src/app/connectors/[slug]/page.tsx
+++ b/src/app/connectors/[slug]/page.tsx
@@ -122,7 +122,7 @@ export default function ConnectorDetailPage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a] max-w-4xl mx-auto px-4 py-16 text-muted-foreground">
+      <div className="min-h-screen bg-background max-w-4xl mx-auto px-4 py-16 text-muted-foreground">
         Loading connector...
       </div>
     );
@@ -130,8 +130,8 @@ export default function ConnectorDetailPage() {
 
   if (notFound || !connector) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a] max-w-4xl mx-auto px-4 py-16">
-        <h1 className="text-3xl font-bold text-[#F8FAFC] mb-3">Connector not found</h1>
+      <div className="min-h-screen bg-background max-w-4xl mx-auto px-4 py-16">
+        <h1 className="text-3xl font-bold text-foreground mb-3">Connector not found</h1>
         <p className="text-muted-foreground mb-6">
           The connector you requested does not exist or may have been removed.
         </p>
@@ -143,7 +143,7 @@ export default function ConnectorDetailPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <div className="border-b border-white/5">
         <div className="max-w-4xl mx-auto px-4 py-4">
           <nav className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -166,7 +166,7 @@ export default function ConnectorDetailPage() {
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-16">
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC] mb-4">{connector.name}</h1>
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">{connector.name}</h1>
 
           <div className="flex flex-wrap items-center gap-2 mb-4">
             <Badge variant="outline" className={getTypeBadgeColor(connector.type)}>
@@ -184,7 +184,7 @@ export default function ConnectorDetailPage() {
             <button
               type="button"
               onClick={trackInstall}
-              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
             >
               Track install +1
             </button>
diff --git a/src/app/connectors/oauth-guide/page.tsx b/src/app/connectors/oauth-guide/page.tsx
index 699dd566..4c337e01 100644
--- a/src/app/connectors/oauth-guide/page.tsx
+++ b/src/app/connectors/oauth-guide/page.tsx
@@ -17,7 +17,7 @@ export const metadata = {
 
 export default function OAuthGuidePage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Breadcrumb */}
       <div className="border-b border-white/5">
         <div className="max-w-4xl mx-auto px-4 py-4">
@@ -43,7 +43,7 @@ export default function OAuthGuidePage() {
 
         <div className="relative max-w-4xl mx-auto px-4 py-16 text-center">
           <div className="text-6xl mb-6">🔐</div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC] mb-4">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
             OAuth 2.0 for AI Agents
           </h1>
           <p className="text-xl text-foreground/80 max-w-2xl mx-auto">
@@ -64,7 +64,7 @@ export default function OAuthGuidePage() {
           </CardHeader>
           <CardContent className="space-y-4 text-foreground/90">
             <p>
-              <strong className="text-[#06D6A0]">OAuth 2.0</strong> is an authorization framework that enables applications to obtain 
+              <strong className="text-primary">OAuth 2.0</strong> is an authorization framework that enables applications to obtain 
               limited access to user accounts on an HTTP service. Instead of sharing passwords, users authorize 
               applications with scoped access tokens.
             </p>
@@ -106,17 +106,17 @@ export default function OAuthGuidePage() {
         </Card>
 
         {/* Solutions */}
-        <Card className="bg-card/30 border-[#06D6A0]/20">
+        <Card className="bg-card/30 border-primary/20">
           <CardHeader>
             <CardTitle className="text-2xl flex items-center gap-2">
-              <span className="text-[#06D6A0]">✓</span> Solutions for Agents
+              <span className="text-primary">✓</span> Solutions for Agents
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-6">
             
             {/* Solution 1 */}
             <div className="p-4 rounded-lg bg-black/20 border border-white/5">
-              <h3 className="text-lg font-semibold text-[#06D6A0] mb-2">1. Human-in-the-Loop (Recommended)</h3>
+              <h3 className="text-lg font-semibold text-primary mb-2">1. Human-in-the-Loop (Recommended)</h3>
               <p className="text-foreground/90 mb-3">
                 The agent asks the human to complete OAuth authorization, then receives the token.
               </p>
@@ -210,7 +210,7 @@ export default function OAuthGuidePage() {
               <div className="text-muted-foreground ml-4">refresh_token=REFRESH_TOKEN_HERE</div>
               <div className="text-muted-foreground ml-4">client_id=YOUR_CLIENT_ID</div>
               <div className="text-muted-foreground ml-4">client_secret=YOUR_CLIENT_SECRET</div>
-              <div className="mt-3 text-[#06D6A0]"># Response:</div>
+              <div className="mt-3 text-primary"># Response:</div>
               <div className="text-foreground/80">{'{'}</div>
               <div className="text-foreground/80 ml-4">&quot;access_token&quot;: &quot;new_access_token&quot;,</div>
               <div className="text-foreground/80 ml-4">&quot;expires_in&quot;: 3600,</div>
@@ -237,7 +237,7 @@ export default function OAuthGuidePage() {
             </p>
             <div className="space-y-3">
               <div>
-                <p className="font-semibold text-[#06D6A0] mb-1">✓ Good Practices:</p>
+                <p className="font-semibold text-primary mb-1">✓ Good Practices:</p>
                 <ul className="list-disc list-inside space-y-1 ml-4 text-sm">
                   <li>Use environment variables (for development)</li>
                   <li>Encrypt tokens at rest (production)</li>
@@ -309,48 +309,48 @@ server.listen(8080);`}</pre>
         </Card>
 
         {/* Best Practices */}
-        <Card className="bg-gradient-to-br from-purple/5 via-card/80 to-[#06D6A0]/5 border-[#06D6A0]/20">
+        <Card className="bg-gradient-to-br from-purple/5 via-card/80 to-primary/5 border-primary/20">
           <CardHeader>
             <CardTitle className="text-2xl">Best Practices Summary</CardTitle>
           </CardHeader>
           <CardContent className="space-y-3">
             <div className="flex gap-3 p-3 rounded-lg bg-black/20">
-              <span className="text-[#06D6A0] text-lg">✓</span>
+              <span className="text-primary text-lg">✓</span>
               <div>
                 <p className="font-semibold text-foreground">Use scoped permissions</p>
                 <p className="text-sm text-muted-foreground">Request only the OAuth scopes your agent actually needs</p>
               </div>
             </div>
             <div className="flex gap-3 p-3 rounded-lg bg-black/20">
-              <span className="text-[#06D6A0] text-lg">✓</span>
+              <span className="text-primary text-lg">✓</span>
               <div>
                 <p className="font-semibold text-foreground">Implement token refresh</p>
                 <p className="text-sm text-muted-foreground">Handle 401 errors gracefully and refresh expired tokens automatically</p>
               </div>
             </div>
             <div className="flex gap-3 p-3 rounded-lg bg-black/20">
-              <span className="text-[#06D6A0] text-lg">✓</span>
+              <span className="text-primary text-lg">✓</span>
               <div>
                 <p className="font-semibold text-foreground">Store tokens securely</p>
                 <p className="text-sm text-muted-foreground">Encrypt at rest, use key vaults, never commit to git</p>
               </div>
             </div>
             <div className="flex gap-3 p-3 rounded-lg bg-black/20">
-              <span className="text-[#06D6A0] text-lg">✓</span>
+              <span className="text-primary text-lg">✓</span>
               <div>
                 <p className="font-semibold text-foreground">Provide clear user flows</p>
                 <p className="text-sm text-muted-foreground">Make authorization easy for humans to complete</p>
               </div>
             </div>
             <div className="flex gap-3 p-3 rounded-lg bg-black/20">
-              <span className="text-[#06D6A0] text-lg">✓</span>
+              <span className="text-primary text-lg">✓</span>
               <div>
                 <p className="font-semibold text-foreground">Support token revocation</p>
                 <p className="text-sm text-muted-foreground">Allow users to disconnect and revoke access easily</p>
               </div>
             </div>
             <div className="flex gap-3 p-3 rounded-lg bg-black/20">
-              <span className="text-[#06D6A0] text-lg">✓</span>
+              <span className="text-primary text-lg">✓</span>
               <div>
                 <p className="font-semibold text-foreground">Log OAuth events</p>
                 <p className="text-sm text-muted-foreground">Track authorizations, refreshes, and failures for debugging</p>
diff --git a/src/app/connectors/page.tsx b/src/app/connectors/page.tsx
index c63117dc..81930aca 100644
--- a/src/app/connectors/page.tsx
+++ b/src/app/connectors/page.tsx
@@ -138,15 +138,15 @@ export default function ConnectorsPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden min-h-[380px] flex items-center">
         <div className="absolute inset-0">
           <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-purple/5 rounded-full blur-[160px]" />
-          <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-[#06D6A0]/3 rounded-full blur-[120px]" />
+          <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-primary/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-20 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Connector Directory
           </h1>
           <p className="text-xl text-foreground/80 mb-2">
@@ -159,7 +159,7 @@ export default function ConnectorsPage() {
           <div className="flex flex-wrap items-center justify-center gap-3 mt-8">
             <Link
               href="/connectors/oauth-guide"
-              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
             >
               OAuth Guide for Agents →
             </Link>
@@ -196,7 +196,7 @@ export default function ConnectorsPage() {
               onClick={() => setTypeFilter("all")}
               className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                 typeFilter === "all"
-                  ? "bg-[#06D6A0] text-[#0a0a0a]"
+                  ? "bg-primary text-background"
                   : "border border-white/10 text-foreground hover:bg-white/5"
               }`}
             >
@@ -208,7 +208,7 @@ export default function ConnectorsPage() {
                 onClick={() => setTypeFilter(type)}
                 className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                   typeFilter === type
-                    ? "bg-[#06D6A0] text-[#0a0a0a]"
+                    ? "bg-primary text-background"
                     : "border border-white/10 text-foreground hover:bg-white/5"
                 }`}
               >
@@ -284,7 +284,7 @@ export default function ConnectorsPage() {
                     <button
                       type="button"
                       onClick={() => trackInstall(connector.slug)}
-                      className="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-[#06D6A0]/40 text-[#06D6A0] text-xs font-semibold hover:bg-[#06D6A0]/10 transition-colors"
+                      className="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-primary/40 text-primary text-xs font-semibold hover:bg-primary/10 transition-colors"
                     >
                       Track install +1
                     </button>
diff --git a/src/app/connectors/vault/page.tsx b/src/app/connectors/vault/page.tsx
index 834eb1ca..4621511b 100644
--- a/src/app/connectors/vault/page.tsx
+++ b/src/app/connectors/vault/page.tsx
@@ -19,7 +19,7 @@ export default function TokenVaultPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Breadcrumb */}
       <div className="border-b border-white/5">
         <div className="max-w-4xl mx-auto px-4 py-4">
@@ -41,7 +41,7 @@ export default function TokenVaultPage() {
       <section className="relative overflow-hidden">
         <div className="absolute inset-0">
           <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-purple/5 rounded-full blur-[160px]" />
-          <div className="absolute top-1/3 right-1/3 w-[40vw] h-[40vw] max-w-[400px] max-h-[400px] bg-[#06D6A0]/5 rounded-full blur-[120px]" />
+          <div className="absolute top-1/3 right-1/3 w-[40vw] h-[40vw] max-w-[400px] max-h-[400px] bg-primary/5 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-16 text-center">
@@ -49,7 +49,7 @@ export default function TokenVaultPage() {
             Coming Soon
           </Badge>
           <div className="text-6xl mb-6">🔐</div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC] mb-4">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
             Token Vault
           </h1>
           <p className="text-xl text-foreground/80 max-w-2xl mx-auto mb-6">
@@ -117,47 +117,47 @@ export default function TokenVaultPage() {
         </Card>
 
         {/* The Solution */}
-        <Card className="bg-gradient-to-br from-purple/5 via-card/80 to-[#06D6A0]/5 border-[#06D6A0]/20">
+        <Card className="bg-gradient-to-br from-purple/5 via-card/80 to-primary/5 border-primary/20">
           <CardHeader>
             <CardTitle className="text-2xl flex items-center gap-2">
-              <span className="text-[#06D6A0]">✓</span> Introducing Token Vault
+              <span className="text-primary">✓</span> Introducing Token Vault
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-4 text-foreground/90">
             <p className="text-lg">
-              A <strong className="text-[#06D6A0]">hosted token management service</strong> designed specifically for AI agents:
+              A <strong className="text-primary">hosted token management service</strong> designed specifically for AI agents:
             </p>
             <ul className="space-y-3">
               <li className="flex gap-3">
-                <span className="text-[#06D6A0] mt-1">✓</span>
+                <span className="text-primary mt-1">✓</span>
                 <div>
                   <strong>Automatic token refresh</strong> — Vault monitors token expiration and refreshes them 
                   before they expire. Your agents never see a 401.
                 </div>
               </li>
               <li className="flex gap-3">
-                <span className="text-[#06D6A0] mt-1">✓</span>
+                <span className="text-primary mt-1">✓</span>
                 <div>
                   <strong>Multi-agent sharing</strong> — Authorize once, use everywhere. All your agents access 
                   the same tokens through a simple API.
                 </div>
               </li>
               <li className="flex gap-3">
-                <span className="text-[#06D6A0] mt-1">✓</span>
+                <span className="text-primary mt-1">✓</span>
                 <div>
                   <strong>Enterprise-grade security</strong> — AES-256 encryption at rest, mTLS in transit, 
                   SOC 2 compliant infrastructure, automatic key rotation.
                 </div>
               </li>
               <li className="flex gap-3">
-                <span className="text-[#06D6A0] mt-1">✓</span>
+                <span className="text-primary mt-1">✓</span>
                 <div>
                   <strong>Comprehensive audit logs</strong> — Every token access is logged with agent identity, 
                   timestamp, and action. Perfect for compliance and debugging.
                 </div>
               </li>
               <li className="flex gap-3">
-                <span className="text-[#06D6A0] mt-1">✓</span>
+                <span className="text-primary mt-1">✓</span>
                 <div>
                   <strong>One-click revocation</strong> — Instantly revoke compromised tokens across all services 
                   from a single dashboard. No agent restarts needed.
@@ -345,7 +345,7 @@ await vault.revokeToken('github');`}</pre>
         </Card>
 
         {/* Pricing Preview */}
-        <Card className="bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5 border-[#06D6A0]/20">
+        <Card className="bg-gradient-to-br from-primary/5 via-card/80 to-purple/5 border-primary/20">
           <CardHeader>
             <CardTitle className="text-2xl">Pricing (Preview)</CardTitle>
           </CardHeader>
@@ -359,19 +359,19 @@ await vault.revokeToken('github');`}</pre>
                 <p className="text-sm text-muted-foreground mb-4">Perfect for individuals</p>
                 <ul className="space-y-2 text-sm">
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>Up to 3 services</span>
                   </li>
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>2 agents</span>
                   </li>
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>Automatic refresh</span>
                   </li>
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>7-day audit logs</span>
                   </li>
                 </ul>
@@ -387,23 +387,23 @@ await vault.revokeToken('github');`}</pre>
                 <p className="text-sm text-muted-foreground mb-4">For power users</p>
                 <ul className="space-y-2 text-sm">
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>Unlimited services</span>
                   </li>
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>10 agents</span>
                   </li>
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>90-day audit logs</span>
                   </li>
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>Security alerts</span>
                   </li>
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>Priority support</span>
                   </li>
                 </ul>
@@ -416,23 +416,23 @@ await vault.revokeToken('github');`}</pre>
                 <p className="text-sm text-muted-foreground mb-4">For organizations</p>
                 <ul className="space-y-2 text-sm">
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>Unlimited everything</span>
                   </li>
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>Unlimited audit retention</span>
                   </li>
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>Team sharing & roles</span>
                   </li>
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>SSO / SAML</span>
                   </li>
                   <li className="flex gap-2">
-                    <span className="text-[#06D6A0]">✓</span>
+                    <span className="text-primary">✓</span>
                     <span>SLA & phone support</span>
                   </li>
                 </ul>
@@ -443,7 +443,7 @@ await vault.revokeToken('github');`}</pre>
         </Card>
 
         {/* Email Signup */}
-        <Card className="bg-gradient-to-br from-purple/10 via-card/80 to-[#06D6A0]/10 border-purple-500/30">
+        <Card className="bg-gradient-to-br from-purple/10 via-card/80 to-primary/10 border-purple-500/30">
           <CardHeader>
             <CardTitle className="text-2xl text-center">Get Early Access</CardTitle>
             <p className="text-center text-muted-foreground">
@@ -464,7 +464,7 @@ await vault.revokeToken('github');`}</pre>
                   />
                   <button
                     type="submit"
-                    className="px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold hover:brightness-110 transition-all"
+                    className="px-6 py-3 rounded-lg bg-primary text-background font-semibold hover:brightness-110 transition-all"
                   >
                     Join Waitlist
                   </button>
@@ -476,7 +476,7 @@ await vault.revokeToken('github');`}</pre>
             ) : (
               <div className="text-center py-4">
                 <div className="text-5xl mb-3">✓</div>
-                <p className="text-lg font-semibold text-[#06D6A0] mb-2">You&apos;re on the list!</p>
+                <p className="text-lg font-semibold text-primary mb-2">You&apos;re on the list!</p>
                 <p className="text-sm text-muted-foreground">
                   We&apos;ll email you when Token Vault launches.
                 </p>
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 7fa97905..bd575f41 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -119,7 +119,7 @@ export default function ContactPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(webPageJsonLd) }}
@@ -127,11 +127,11 @@ export default function ContactPage() {
 
       <section className="relative overflow-hidden min-h-[300px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Get in Touch
           </h1>
           <p className="text-xl text-foreground/80">We'd love to hear from you</p>
@@ -141,13 +141,13 @@ export default function ContactPage() {
       <section className="relative max-w-5xl mx-auto px-4 py-12">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
           <div className="lg:col-span-2">
-            <Card className="bg-[#0f0f0f] border-white/10">
+            <Card className="bg-background border-white/10">
               <CardHeader>
                 <CardTitle className="text-2xl">Send us a message</CardTitle>
               </CardHeader>
               <CardContent>
                 {successMessage ? (
-                  <div className="mb-4 rounded-md border border-[#06D6A0]/40 bg-[#06D6A0]/10 px-4 py-3 text-sm text-[#9AF4D6]">
+                  <div className="mb-4 rounded-md border border-primary/40 bg-primary/10 px-4 py-3 text-sm text-primary/80">
                     {successMessage}
                   </div>
                 ) : null}
@@ -169,7 +169,7 @@ export default function ContactPage() {
                       type="text"
                       value={formData.name}
                       onChange={handleChange}
-                      className="bg-[#0a0a0a] border-white/10 focus:border-[#06D6A0]"
+                      className="bg-background border-white/10 focus:border-primary"
                       placeholder="Your name"
                       aria-invalid={Boolean(fieldErrors.name)}
                     />
@@ -186,7 +186,7 @@ export default function ContactPage() {
                       type="email"
                       value={formData.email}
                       onChange={handleChange}
-                      className="bg-[#0a0a0a] border-white/10 focus:border-[#06D6A0]"
+                      className="bg-background border-white/10 focus:border-primary"
                       placeholder="your@email.com"
                       aria-invalid={Boolean(fieldErrors.email)}
                     />
@@ -203,7 +203,7 @@ export default function ContactPage() {
                       type="text"
                       value={formData.subject}
                       onChange={handleChange}
-                      className="bg-[#0a0a0a] border-white/10 focus:border-[#06D6A0]"
+                      className="bg-background border-white/10 focus:border-primary"
                       placeholder="How can we help?"
                       aria-invalid={Boolean(fieldErrors.subject)}
                     />
@@ -220,7 +220,7 @@ export default function ContactPage() {
                       value={formData.message}
                       onChange={handleChange}
                       rows={6}
-                      className="bg-[#0a0a0a] border-white/10 focus:border-[#06D6A0] resize-none"
+                      className="bg-background border-white/10 focus:border-primary resize-none"
                       placeholder="Tell us what's on your mind..."
                       aria-invalid={Boolean(fieldErrors.message)}
                     />
@@ -230,7 +230,7 @@ export default function ContactPage() {
                   <Button
                     type="submit"
                     disabled={isSubmitting}
-                    className="w-full bg-[#06D6A0] hover:bg-[#06D6A0]/90 text-black font-medium disabled:opacity-60"
+                    className="w-full bg-primary hover:bg-primary/90 text-black font-medium disabled:opacity-60"
                   >
                     {isSubmitting ? "Sending..." : "Send Message"}
                   </Button>
@@ -240,20 +240,20 @@ export default function ContactPage() {
           </div>
 
           <div className="space-y-6">
-            <Card className="bg-[#0f0f0f] border-white/10">
+            <Card className="bg-background border-white/10">
               <CardHeader>
                 <CardTitle className="text-xl">Contact Info</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
                 <div className="flex items-start gap-3">
-                  <div className="mt-1 p-2 rounded-lg bg-[#06D6A0]/10">
-                    <Mail className="w-5 h-5 text-[#06D6A0]" />
+                  <div className="mt-1 p-2 rounded-lg bg-primary/10">
+                    <Mail className="w-5 h-5 text-primary" />
                   </div>
                   <div>
                     <p className="text-sm font-medium mb-1">Email</p>
                     <a
                       href="mailto:support@foragents.dev"
-                      className="text-sm text-muted-foreground hover:text-[#06D6A0] transition-colors"
+                      className="text-sm text-muted-foreground hover:text-primary transition-colors"
                     >
                       support@foragents.dev
                     </a>
@@ -261,8 +261,8 @@ export default function ContactPage() {
                 </div>
 
                 <div className="flex items-start gap-3">
-                  <div className="mt-1 p-2 rounded-lg bg-[#06D6A0]/10">
-                    <MessageSquare className="w-5 h-5 text-[#06D6A0]" />
+                  <div className="mt-1 p-2 rounded-lg bg-primary/10">
+                    <MessageSquare className="w-5 h-5 text-primary" />
                   </div>
                   <div>
                     <p className="text-sm font-medium mb-1">Discord Community</p>
@@ -270,7 +270,7 @@ export default function ContactPage() {
                       href="https://discord.gg/foragents"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-sm text-muted-foreground hover:text-[#06D6A0] transition-colors"
+                      className="text-sm text-muted-foreground hover:text-primary transition-colors"
                     >
                       Join our Discord
                     </a>
@@ -278,8 +278,8 @@ export default function ContactPage() {
                 </div>
 
                 <div className="flex items-start gap-3">
-                  <div className="mt-1 p-2 rounded-lg bg-[#06D6A0]/10">
-                    <Github className="w-5 h-5 text-[#06D6A0]" />
+                  <div className="mt-1 p-2 rounded-lg bg-primary/10">
+                    <Github className="w-5 h-5 text-primary" />
                   </div>
                   <div>
                     <p className="text-sm font-medium mb-1">GitHub Discussions</p>
@@ -287,7 +287,7 @@ export default function ContactPage() {
                       href="https://github.com/reflectt/foragents.dev/discussions"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-sm text-muted-foreground hover:text-[#06D6A0] transition-colors"
+                      className="text-sm text-muted-foreground hover:text-primary transition-colors"
                     >
                       github.com/reflectt/foragents.dev
                     </a>
@@ -296,14 +296,14 @@ export default function ContactPage() {
               </CardContent>
             </Card>
 
-            <Card className="bg-[#0f0f0f] border-white/10">
+            <Card className="bg-background border-white/10">
               <CardHeader>
                 <CardTitle className="text-xl">Office Hours</CardTitle>
               </CardHeader>
               <CardContent>
                 <div className="flex items-start gap-3">
-                  <div className="mt-1 p-2 rounded-lg bg-[#06D6A0]/10">
-                    <Clock className="w-5 h-5 text-[#06D6A0]" />
+                  <div className="mt-1 p-2 rounded-lg bg-primary/10">
+                    <Clock className="w-5 h-5 text-primary" />
                   </div>
                   <div>
                     <p className="text-sm text-muted-foreground">Our team responds within 24 hours</p>
@@ -312,14 +312,14 @@ export default function ContactPage() {
               </CardContent>
             </Card>
 
-            <Card className="bg-[#0f0f0f] border-white/10">
+            <Card className="bg-background border-white/10">
               <CardHeader>
                 <CardTitle className="text-xl">Location</CardTitle>
               </CardHeader>
               <CardContent>
                 <div className="flex items-start gap-3">
-                  <div className="mt-1 p-2 rounded-lg bg-[#06D6A0]/10">
-                    <MapPin className="w-5 h-5 text-[#06D6A0]" />
+                  <div className="mt-1 p-2 rounded-lg bg-primary/10">
+                    <MapPin className="w-5 h-5 text-primary" />
                   </div>
                   <div>
                     <p className="text-sm text-muted-foreground">Remote-first, Vancouver Island, BC, Canada</p>
@@ -328,32 +328,32 @@ export default function ContactPage() {
               </CardContent>
             </Card>
 
-            <Card className="bg-[#0f0f0f] border-white/10">
+            <Card className="bg-background border-white/10">
               <CardHeader>
                 <CardTitle className="text-xl">Quick FAQ</CardTitle>
               </CardHeader>
               <CardContent className="space-y-3">
                 <Link
                   href="/faq#what-is-foragents"
-                  className="block text-sm text-muted-foreground hover:text-[#06D6A0] transition-colors"
+                  className="block text-sm text-muted-foreground hover:text-primary transition-colors"
                 >
                   What is forAgents.dev?
                 </Link>
                 <Link
                   href="/faq#who-is-it-for"
-                  className="block text-sm text-muted-foreground hover:text-[#06D6A0] transition-colors"
+                  className="block text-sm text-muted-foreground hover:text-primary transition-colors"
                 >
                   Who is forAgents.dev for?
                 </Link>
                 <Link
                   href="/faq#how-does-it-work"
-                  className="block text-sm text-muted-foreground hover:text-[#06D6A0] transition-colors"
+                  className="block text-sm text-muted-foreground hover:text-primary transition-colors"
                 >
                   How does forAgents.dev work?
                 </Link>
                 <Link
                   href="/faq"
-                  className="block text-sm font-medium text-[#06D6A0] hover:underline transition-colors mt-4 pt-3 border-t border-white/5"
+                  className="block text-sm font-medium text-primary hover:underline transition-colors mt-4 pt-3 border-t border-white/5"
                 >
                   View all FAQ →
                 </Link>
diff --git a/src/app/contribute/contributors-client.tsx b/src/app/contribute/contributors-client.tsx
index 7e158195..a9615ee7 100644
--- a/src/app/contribute/contributors-client.tsx
+++ b/src/app/contribute/contributors-client.tsx
@@ -188,10 +188,10 @@ export function ContributorsClient() {
   return (
     <div className="space-y-12">
       <section className="text-center space-y-4">
-        <Badge variant="outline" className="border-[#06D6A0]/40 bg-[#06D6A0]/10 text-[#06D6A0]">
+        <Badge variant="outline" className="border-primary/40 bg-primary/10 text-primary">
           Real Contribution Workflow
         </Badge>
-        <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC]">Contribute to forAgents.dev</h1>
+        <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground">Contribute to forAgents.dev</h1>
         <p className="mx-auto max-w-3xl text-foreground/70">
           Pick a contribution guide, follow the steps, and submit your work for review. Every submission is tracked so
           the community can see progress.
@@ -210,20 +210,20 @@ export function ContributorsClient() {
         <>
           <section className="space-y-6">
             <div className="space-y-2">
-              <h2 className="text-2xl font-semibold text-[#F8FAFC]">Contribution guides</h2>
+              <h2 className="text-2xl font-semibold text-foreground">Contribution guides</h2>
               <p className="text-foreground/70">Browse by category and choose a guide that matches your skill level.</p>
             </div>
 
             <div className="space-y-8">
               {guidesByCategory.map(([category, categoryGuides]) => (
                 <div key={category} className="space-y-3">
-                  <h3 className="text-lg font-semibold text-[#F8FAFC]">{CATEGORY_LABELS[category]}</h3>
+                  <h3 className="text-lg font-semibold text-foreground">{CATEGORY_LABELS[category]}</h3>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     {categoryGuides.map((guide) => (
                       <Card key={guide.id} className="bg-white/5 border-white/10">
                         <CardHeader>
                           <div className="flex items-center justify-between gap-3">
-                            <CardTitle className="text-[#F8FAFC] text-xl">{guide.title}</CardTitle>
+                            <CardTitle className="text-foreground text-xl">{guide.title}</CardTitle>
                             <Badge variant="outline" className={DIFFICULTY_CLASSES[guide.difficulty]}>
                               {guide.difficulty}
                             </Badge>
@@ -232,7 +232,7 @@ export function ContributorsClient() {
                         </CardHeader>
                         <CardContent className="space-y-3">
                           <p className="text-sm text-foreground/70">
-                            Estimated time: <span className="text-[#F8FAFC] font-medium">{guide.estimatedTime}</span>
+                            Estimated time: <span className="text-foreground font-medium">{guide.estimatedTime}</span>
                           </p>
                           <ol className="list-decimal list-inside space-y-1 text-sm text-foreground/80">
                             {guide.steps.map((step, index) => (
@@ -250,7 +250,7 @@ export function ContributorsClient() {
 
           <section className="space-y-4">
             <div className="space-y-2">
-              <h2 className="text-2xl font-semibold text-[#F8FAFC]">Recent contributions</h2>
+              <h2 className="text-2xl font-semibold text-foreground">Recent contributions</h2>
               <p className="text-foreground/70">Latest submissions and their current review status.</p>
             </div>
 
@@ -313,14 +313,14 @@ export function ContributorsClient() {
                   <Card key={contribution.id} className="bg-white/5 border-white/10">
                     <CardHeader className="space-y-2">
                       <div className="flex items-center justify-between gap-2">
-                        <Badge variant="outline" className="border-[#06D6A0]/30 bg-[#06D6A0]/10 text-[#06D6A0]">
+                        <Badge variant="outline" className="border-primary/30 bg-primary/10 text-primary">
                           {CATEGORY_LABELS[contribution.type]}
                         </Badge>
                         <Badge variant="outline" className={STATUS_CLASSES[contribution.status]}>
                           {contribution.status}
                         </Badge>
                       </div>
-                      <CardTitle className="text-[#F8FAFC] text-lg">{contribution.title}</CardTitle>
+                      <CardTitle className="text-foreground text-lg">{contribution.title}</CardTitle>
                       <CardDescription>
                         Submitted by {contribution.author} on {formatDate(contribution.createdAt)}
                       </CardDescription>
@@ -332,7 +332,7 @@ export function ContributorsClient() {
                           href={contribution.url}
                           target="_blank"
                           rel="noreferrer"
-                          className="text-sm text-[#06D6A0] hover:text-[#5EEAD4] underline underline-offset-4"
+                          className="text-sm text-primary hover:text-primary/60 underline underline-offset-4"
                         >
                           View submission
                         </a>
@@ -349,7 +349,7 @@ export function ContributorsClient() {
       <section>
         <Card className="bg-white/5 border-white/10">
           <CardHeader>
-            <CardTitle className="text-2xl text-[#F8FAFC]">Submit a contribution</CardTitle>
+            <CardTitle className="text-2xl text-foreground">Submit a contribution</CardTitle>
             <CardDescription>Share what you've built and we'll track it through review and merge.</CardDescription>
           </CardHeader>
           <CardContent>
diff --git a/src/app/contribute/page.tsx b/src/app/contribute/page.tsx
index 2d200c88..ec8588d7 100644
--- a/src/app/contribute/page.tsx
+++ b/src/app/contribute/page.tsx
@@ -36,7 +36,7 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default function ContributePage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <main className="max-w-6xl mx-auto px-4 py-16">
         <ContributorsClient />
       </main>
diff --git a/src/app/creators/page.tsx b/src/app/creators/page.tsx
index 45caee87..0b61feb2 100644
--- a/src/app/creators/page.tsx
+++ b/src/app/creators/page.tsx
@@ -152,7 +152,7 @@ export default function CreatorsPage() {
                   <div className="min-w-0">
                     <div className="flex flex-wrap items-center gap-2 mb-2">
                       <span className="text-2xl">{creator.avatar}</span>
-                      <h3 className="text-xl font-semibold text-[#F8FAFC]">{creator.displayName}</h3>
+                      <h3 className="text-xl font-semibold text-foreground">{creator.displayName}</h3>
                       {creator.featured && (
                         <Badge variant="outline" className="bg-cyan/10 text-cyan border-cyan/20">
                           Featured
diff --git a/src/app/credits/page.tsx b/src/app/credits/page.tsx
index 03f3e87b..cd119507 100644
--- a/src/app/credits/page.tsx
+++ b/src/app/credits/page.tsx
@@ -141,18 +141,18 @@ export default function CreditsPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
 
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         {/* Subtle aurora background */}
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-3xl mx-auto px-4 py-20 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Standing on the shoulders of giants
           </h1>
           <p className="text-xl text-foreground/80 mb-2">
@@ -176,19 +176,19 @@ export default function CreditsPage() {
           {technologies.map((tech) => (
             <Card 
               key={tech.name}
-              className="bg-card/50 border-white/5 hover:border-[#06D6A0]/20 transition-all group"
+              className="bg-card/50 border-white/5 hover:border-primary/20 transition-all group"
             >
               <CardHeader>
                 <div className="flex items-start justify-between mb-2">
                   <span className="text-3xl">{tech.icon}</span>
                   <Badge 
                     variant="outline" 
-                    className="text-xs bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/30"
+                    className="text-xs bg-primary/10 text-primary border-primary/30"
                   >
                     v{tech.version}
                   </Badge>
                 </div>
-                <CardTitle className="text-lg group-hover:text-[#06D6A0] transition-colors">
+                <CardTitle className="text-lg group-hover:text-primary transition-colors">
                   {tech.name}
                 </CardTitle>
               </CardHeader>
@@ -200,7 +200,7 @@ export default function CreditsPage() {
                   href={tech.link}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-xs text-[#06D6A0] hover:underline inline-flex items-center gap-1"
+                  className="text-xs text-primary hover:underline inline-flex items-center gap-1"
                 >
                   Visit site
                   <span aria-hidden="true">↗</span>
@@ -226,13 +226,13 @@ export default function CreditsPage() {
           {contributors.map((contributor, index) => (
             <div
               key={index}
-              className="relative overflow-hidden rounded-lg border border-white/10 bg-card/30 p-6 hover:border-[#06D6A0]/20 transition-all group"
+              className="relative overflow-hidden rounded-lg border border-white/10 bg-card/30 p-6 hover:border-primary/20 transition-all group"
             >
-              <div className="absolute top-0 right-0 w-32 h-32 bg-[#06D6A0]/5 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity" />
+              <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity" />
               <div className="relative">
                 <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-3">
                   <div className="flex-1">
-                    <h3 className="text-lg font-bold text-foreground group-hover:text-[#06D6A0] transition-colors">
+                    <h3 className="text-lg font-bold text-foreground group-hover:text-primary transition-colors">
                       {contributor.name}
                     </h3>
                     <Badge
@@ -250,7 +250,7 @@ export default function CreditsPage() {
                   href={contributor.link}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-xs text-[#06D6A0] hover:underline inline-flex items-center gap-1"
+                  className="text-xs text-primary hover:underline inline-flex items-center gap-1"
                 >
                   Learn more
                   <span aria-hidden="true">↗</span>
@@ -282,7 +282,7 @@ export default function CreditsPage() {
                     className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 rounded-lg bg-white/[0.02] hover:bg-white/[0.04] transition-colors border border-white/5"
                   >
                     <div className="flex-1 min-w-0">
-                      <code className="text-sm font-mono text-[#06D6A0] block mb-1">
+                      <code className="text-sm font-mono text-primary block mb-1">
                         {lib.name}
                       </code>
                       <span className="text-xs text-muted-foreground font-mono">
@@ -309,7 +309,7 @@ export default function CreditsPage() {
                   href="https://github.com/reflectt/foragents.dev/blob/main/package.json"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-[#06D6A0]/30 text-sm text-[#06D6A0] hover:bg-[#06D6A0]/10 transition-colors"
+                  className="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-primary/30 text-sm text-primary hover:bg-primary/10 transition-colors"
                 >
                   View package.json on GitHub
                   <span aria-hidden="true">↗</span>
@@ -324,8 +324,8 @@ export default function CreditsPage() {
 
       {/* License Section */}
       <section className="max-w-3xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-[#06D6A0]/20 bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/10 rounded-full blur-[80px]" />
+        <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/5 via-card/80 to-purple/5">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[80px]" />
           <div className="absolute bottom-0 left-0 w-48 h-48 bg-purple/10 rounded-full blur-[60px]" />
 
           <div className="relative p-8 md:p-12">
@@ -340,15 +340,15 @@ export default function CreditsPage() {
 
             <div className="space-y-3 mb-6">
               <div className="flex items-center gap-2 text-sm">
-                <span className="text-[#06D6A0]">✓</span>
+                <span className="text-primary">✓</span>
                 <span className="text-muted-foreground">Free to use, modify, and distribute</span>
               </div>
               <div className="flex items-center gap-2 text-sm">
-                <span className="text-[#06D6A0]">✓</span>
+                <span className="text-primary">✓</span>
                 <span className="text-muted-foreground">Community contributions welcome</span>
               </div>
               <div className="flex items-center gap-2 text-sm">
-                <span className="text-[#06D6A0]">✓</span>
+                <span className="text-primary">✓</span>
                 <span className="text-muted-foreground">Transparent development process</span>
               </div>
             </div>
@@ -358,7 +358,7 @@ export default function CreditsPage() {
                 href="https://github.com/reflectt/foragents.dev"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 View on GitHub
                 <span aria-hidden="true">↗</span>
@@ -388,7 +388,7 @@ export default function CreditsPage() {
           <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
             <Link
               href="/submit"
-              className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+              className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
             >
               Submit a Skill
             </Link>
diff --git a/src/app/demos/page.tsx b/src/app/demos/page.tsx
index 6551bfe6..92a16d0a 100644
--- a/src/app/demos/page.tsx
+++ b/src/app/demos/page.tsx
@@ -62,18 +62,18 @@ const difficultyColors = {
 
 export default function DemosPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
 
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[300px] flex items-center">
         {/* Subtle aurora background */}
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-3xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Learn by Example
           </h1>
           <p className="text-xl text-foreground/80 mb-2">
@@ -87,7 +87,7 @@ export default function DemosPage() {
       {/* Featured Demo */}
       <section className="max-w-5xl mx-auto px-4 py-16">
         <div className="mb-6">
-          <Badge className="bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/30 mb-4">
+          <Badge className="bg-primary/10 text-primary border-primary/30 mb-4">
             Featured Demo
           </Badge>
           <h2 className="text-3xl font-bold mb-2">Getting Started with forAgents.dev</h2>
@@ -97,25 +97,25 @@ export default function DemosPage() {
         </div>
 
         {/* Video Placeholder */}
-        <div className="relative overflow-hidden rounded-xl border border-white/10 bg-gradient-to-br from-[#06D6A0]/20 via-purple/10 to-[#06D6A0]/10 aspect-video flex items-center justify-center group cursor-pointer hover:border-[#06D6A0]/30 transition-all">
-          <div className="absolute inset-0 bg-gradient-to-br from-[#06D6A0]/5 via-transparent to-purple/5" />
-          <div className="absolute top-0 right-0 w-96 h-96 bg-[#06D6A0]/10 rounded-full blur-[120px]" />
+        <div className="relative overflow-hidden rounded-xl border border-white/10 bg-gradient-to-br from-primary/20 via-purple/10 to-primary/10 aspect-video flex items-center justify-center group cursor-pointer hover:border-primary/30 transition-all">
+          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-purple/5" />
+          <div className="absolute top-0 right-0 w-96 h-96 bg-primary/10 rounded-full blur-[120px]" />
           <div className="absolute bottom-0 left-0 w-64 h-64 bg-purple/10 rounded-full blur-[100px]" />
           
           {/* Play Button Overlay */}
           <div className="relative z-10 flex flex-col items-center gap-4">
-            <div className="w-20 h-20 rounded-full bg-[#06D6A0] flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg shadow-[#06D6A0]/50">
+            <div className="w-20 h-20 rounded-full bg-primary flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg shadow-primary/50">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 fill="currentColor"
-                className="w-10 h-10 text-[#0a0a0a] ml-1"
+                className="w-10 h-10 text-background ml-1"
               >
                 <path d="M8 5v14l11-7z" />
               </svg>
             </div>
             <div className="text-center">
-              <p className="text-lg font-semibold text-[#F8FAFC] mb-1">Watch Demo</p>
+              <p className="text-lg font-semibold text-foreground mb-1">Watch Demo</p>
               <p className="text-sm text-muted-foreground">20 minutes • Complete walkthrough</p>
             </div>
           </div>
@@ -137,20 +137,20 @@ export default function DemosPage() {
           {demos.map((demo, index) => (
             <Card
               key={index}
-              className="bg-card/50 border-white/10 hover:border-[#06D6A0]/30 transition-all group overflow-hidden"
+              className="bg-card/50 border-white/10 hover:border-primary/30 transition-all group overflow-hidden"
             >
               {/* Thumbnail Placeholder */}
-              <div className="relative overflow-hidden bg-gradient-to-br from-[#06D6A0]/10 via-purple/5 to-transparent aspect-video flex items-center justify-center">
-                <div className="absolute inset-0 bg-gradient-to-br from-[#06D6A0]/5 via-transparent to-purple/5" />
-                <div className="absolute top-0 right-0 w-32 h-32 bg-[#06D6A0]/10 rounded-full blur-[60px]" />
+              <div className="relative overflow-hidden bg-gradient-to-br from-primary/10 via-purple/5 to-transparent aspect-video flex items-center justify-center">
+                <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-purple/5" />
+                <div className="absolute top-0 right-0 w-32 h-32 bg-primary/10 rounded-full blur-[60px]" />
                 
                 {/* Play Button */}
-                <div className="relative z-10 w-12 h-12 rounded-full bg-[#06D6A0]/80 flex items-center justify-center group-hover:bg-[#06D6A0] transition-colors">
+                <div className="relative z-10 w-12 h-12 rounded-full bg-primary/80 flex items-center justify-center group-hover:bg-primary transition-colors">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24"
                     fill="currentColor"
-                    className="w-6 h-6 text-[#0a0a0a] ml-0.5"
+                    className="w-6 h-6 text-background ml-0.5"
                   >
                     <path d="M8 5v14l11-7z" />
                   </svg>
@@ -159,7 +159,7 @@ export default function DemosPage() {
 
               <CardContent className="p-6">
                 <div className="flex items-start justify-between gap-2 mb-3">
-                  <h3 className="text-lg font-bold text-foreground group-hover:text-[#06D6A0] transition-colors">
+                  <h3 className="text-lg font-bold text-foreground group-hover:text-primary transition-colors">
                     {demo.title}
                   </h3>
                 </div>
@@ -186,7 +186,7 @@ export default function DemosPage() {
                 </div>
 
                 <div className="mt-4 pt-4 border-t border-white/5">
-                  <button className="w-full text-sm font-semibold text-[#06D6A0] hover:text-[#06D6A0]/80 transition-colors flex items-center justify-center gap-2">
+                  <button className="w-full text-sm font-semibold text-primary hover:text-primary/80 transition-colors flex items-center justify-center gap-2">
                     Watch
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -212,8 +212,8 @@ export default function DemosPage() {
 
       {/* Call to Action */}
       <section className="max-w-5xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-[#06D6A0]/20 bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/10 rounded-full blur-[80px]" />
+        <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/5 via-card/80 to-purple/5">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[80px]" />
           <div className="absolute bottom-0 left-0 w-48 h-48 bg-purple/10 rounded-full blur-[60px]" />
 
           <div className="relative p-8 md:p-12 text-center">
@@ -229,7 +229,7 @@ export default function DemosPage() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <Link
                 href="/get-started"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 Get Started →
               </Link>
diff --git a/src/app/dependencies/page.tsx b/src/app/dependencies/page.tsx
index 1aa6b26d..c46b0a1c 100644
--- a/src/app/dependencies/page.tsx
+++ b/src/app/dependencies/page.tsx
@@ -184,7 +184,7 @@ export default async function DependenciesPage({
         />
 
         <div className="mt-6">
-          <h1 className="text-3xl font-bold text-[#F8FAFC]">Skill Dependency Graph</h1>
+          <h1 className="text-3xl font-bold text-foreground">Skill Dependency Graph</h1>
           <p className="mt-2 text-foreground/70 max-w-3xl">
             A lightweight graph of how skills relate to each other. Click any skill to explore its
             dependencies, dependents, and full dependency chain.
@@ -201,7 +201,7 @@ export default async function DependenciesPage({
 
         <section className="grid grid-cols-1 lg:grid-cols-12 gap-6">
           <div className="lg:col-span-4 rounded-xl border border-white/10 bg-white/5 p-5">
-            <h2 className="text-lg font-semibold text-[#F8FAFC] mb-3">Skills</h2>
+            <h2 className="text-lg font-semibold text-foreground mb-3">Skills</h2>
             <div className="flex flex-col gap-1">
               {skills
                 .slice()
@@ -231,7 +231,7 @@ export default async function DependenciesPage({
           <div id="skill-details" className="lg:col-span-8 rounded-xl border border-white/10 bg-white/5 p-5">
             <div className="flex items-start justify-between gap-4 flex-wrap">
               <div>
-                <h2 className="text-lg font-semibold text-[#F8FAFC]">{skillNameBySlug.get(selectedSlug) ?? selectedSlug}</h2>
+                <h2 className="text-lg font-semibold text-foreground">{skillNameBySlug.get(selectedSlug) ?? selectedSlug}</h2>
                 <p className="text-sm text-muted-foreground mt-1">
                   <span className="font-mono">{selectedSlug}</span>
                 </p>
@@ -248,7 +248,7 @@ export default async function DependenciesPage({
 
             <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
               <div>
-                <h3 className="text-sm font-semibold text-[#F8FAFC] mb-2">Depends on</h3>
+                <h3 className="text-sm font-semibold text-foreground mb-2">Depends on</h3>
                 {dependsOn.length === 0 ? (
                   <p className="text-sm text-muted-foreground">No declared dependencies.</p>
                 ) : (
@@ -263,7 +263,7 @@ export default async function DependenciesPage({
                 )}
               </div>
               <div>
-                <h3 className="text-sm font-semibold text-[#F8FAFC] mb-2">Used by</h3>
+                <h3 className="text-sm font-semibold text-foreground mb-2">Used by</h3>
                 {usedBy.length === 0 ? (
                   <p className="text-sm text-muted-foreground">No skills depend on this yet.</p>
                 ) : (
@@ -283,7 +283,7 @@ export default async function DependenciesPage({
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
               <div>
-                <h3 className="text-sm font-semibold text-[#F8FAFC]">Full dependency chain</h3>
+                <h3 className="text-sm font-semibold text-foreground">Full dependency chain</h3>
                 <p className="text-xs text-muted-foreground mt-1">
                   Direct + transitive dependencies (cycle-safe).
                 </p>
@@ -305,7 +305,7 @@ export default async function DependenciesPage({
               </div>
 
               <div>
-                <h3 className="text-sm font-semibold text-[#F8FAFC]">Dependency tree</h3>
+                <h3 className="text-sm font-semibold text-foreground">Dependency tree</h3>
                 <p className="text-xs text-muted-foreground mt-1">Nested view of dependencies.</p>
                 <div className="mt-3">{renderDependencyTree({ graph, slug: selectedSlug, skillNameBySlug })}</div>
               </div>
@@ -314,7 +314,7 @@ export default async function DependenciesPage({
             <Separator className="opacity-10 my-8" />
 
             <div>
-              <h3 className="text-sm font-semibold text-[#F8FAFC]">Reverse tree (dependents)</h3>
+              <h3 className="text-sm font-semibold text-foreground">Reverse tree (dependents)</h3>
               <p className="text-xs text-muted-foreground mt-1">Which skills build on this one.</p>
               <div className="mt-3">
                 {usedBy.length === 0 ? (
@@ -330,7 +330,7 @@ export default async function DependenciesPage({
         <Separator className="opacity-10 my-10" />
 
         <section>
-          <h2 className="text-lg font-semibold text-[#F8FAFC]">Foundations</h2>
+          <h2 className="text-lg font-semibold text-foreground">Foundations</h2>
           <p className="text-sm text-muted-foreground mt-1 max-w-3xl">
             Skills with no declared dependencies. Expand from these to see what they enable.
           </p>
@@ -362,7 +362,7 @@ export default async function DependenciesPage({
         <Separator className="opacity-10 my-10" />
 
         <section>
-          <h2 className="text-lg font-semibold text-[#F8FAFC]">Matrix view</h2>
+          <h2 className="text-lg font-semibold text-foreground">Matrix view</h2>
           <p className="text-sm text-muted-foreground mt-1">
             A compact summary of declared dependencies and dependents.
           </p>
diff --git a/src/app/diagnostics/diagnostics-client.tsx b/src/app/diagnostics/diagnostics-client.tsx
index feeeae13..33b03d75 100644
--- a/src/app/diagnostics/diagnostics-client.tsx
+++ b/src/app/diagnostics/diagnostics-client.tsx
@@ -281,15 +281,15 @@ export function DiagnosticsClient() {
   return (
     <div className="space-y-6">
       {/* Related Tools */}
-      <Card className="bg-[#0f0f0f] border-white/10">
+      <Card className="bg-background border-white/10">
         <CardContent className="pt-6">
           <p className="text-sm text-foreground/80">
             💡 <strong>Also check out:</strong>{" "}
-            <a href="/observability" className="text-[#06D6A0] hover:underline">
+            <a href="/observability" className="text-primary hover:underline">
               Observability Tools
             </a>{" "}
             to monitor your agent in production, and{" "}
-            <a href="/trace" className="text-[#06D6A0] hover:underline">
+            <a href="/trace" className="text-primary hover:underline">
               Trace Viewer
             </a>{" "}
             to inspect agent runs.
@@ -298,7 +298,7 @@ export function DiagnosticsClient() {
       </Card>
 
       {/* Input Section */}
-      <Card className="bg-[#0f0f0f] border-white/10">
+      <Card className="bg-background border-white/10">
         <CardHeader>
           <CardTitle>Configuration Input</CardTitle>
         </CardHeader>
@@ -312,13 +312,13 @@ export function DiagnosticsClient() {
               value={configInput}
               onChange={(e) => setConfigInput(e.target.value)}
               placeholder="https://example.com/agent.json or paste your agent.json here..."
-              className="w-full h-32 px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-lg font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-[#06D6A0]/50"
+              className="w-full h-32 px-4 py-3 bg-background border border-white/10 rounded-lg font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
             />
           </div>
           <button
             onClick={runDiagnostics}
             disabled={loading || !configInput.trim()}
-            className="px-6 py-2.5 bg-[#06D6A0] text-[#0a0a0a] font-semibold rounded-lg hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center gap-2"
+            className="px-6 py-2.5 bg-primary text-background font-semibold rounded-lg hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center gap-2"
           >
             {loading ? (
               <>
@@ -351,7 +351,7 @@ export function DiagnosticsClient() {
       {results && (
         <div className="space-y-4">
           {results.map((result, idx) => (
-            <Card key={idx} className="bg-[#0f0f0f] border-white/10">
+            <Card key={idx} className="bg-background border-white/10">
               <CardHeader>
                 <CardTitle className="text-xl">{result.category}</CardTitle>
               </CardHeader>
@@ -360,7 +360,7 @@ export function DiagnosticsClient() {
                   {result.checks.map((check, checkIdx) => (
                     <div
                       key={checkIdx}
-                      className="flex items-start gap-3 p-3 rounded-lg bg-[#0a0a0a] border border-white/5"
+                      className="flex items-start gap-3 p-3 rounded-lg bg-background border border-white/5"
                     >
                       <div className="flex-shrink-0 mt-0.5">
                         {getStatusIcon(check.status)}
@@ -371,7 +371,7 @@ export function DiagnosticsClient() {
                           {check.message}
                         </p>
                         {check.recommendation && (
-                          <p className="text-sm text-[#06D6A0] mt-2">
+                          <p className="text-sm text-primary mt-2">
                             💡 {check.recommendation}
                           </p>
                         )}
diff --git a/src/app/diagnostics/errors/page.tsx b/src/app/diagnostics/errors/page.tsx
index 0c4638f3..3f5b3322 100644
--- a/src/app/diagnostics/errors/page.tsx
+++ b/src/app/diagnostics/errors/page.tsx
@@ -116,7 +116,7 @@ export default function ErrorsPage() {
   );
 
   return (
-    <main id="main-content" className="min-h-screen bg-[#0a0a0a]">
+    <main id="main-content" className="min-h-screen bg-background">
       <div className="mx-auto max-w-7xl px-4 py-10 md:py-14">
         <div className="mb-8">
           <h1 className="text-3xl md:text-4xl font-bold tracking-tight">
@@ -128,16 +128,16 @@ export default function ErrorsPage() {
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardContent className="pt-6 flex items-center justify-between">
               <div>
                 <p className="text-sm text-muted-foreground">Total events</p>
                 <p className="text-3xl font-bold mt-1">{summary.totalCount}</p>
               </div>
-              <Bug className="w-6 h-6 text-[#06D6A0]" />
+              <Bug className="w-6 h-6 text-primary" />
             </CardContent>
           </Card>
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardContent className="pt-6 flex items-center justify-between">
               <div>
                 <p className="text-sm text-muted-foreground">Open issues</p>
@@ -146,7 +146,7 @@ export default function ErrorsPage() {
               <AlertTriangle className="w-6 h-6 text-yellow-400" />
             </CardContent>
           </Card>
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardContent className="pt-6 flex items-center justify-between">
               <div>
                 <p className="text-sm text-muted-foreground">Critical patterns</p>
@@ -157,7 +157,7 @@ export default function ErrorsPage() {
           </Card>
         </div>
 
-        <Card className="bg-[#0f0f0f] border-white/10 mb-6">
+        <Card className="bg-background border-white/10 mb-6">
           <CardContent className="pt-6 grid grid-cols-1 md:grid-cols-4 gap-3">
             <div className="md:col-span-2 relative">
               <Search className="w-4 h-4 absolute left-3 top-3 text-muted-foreground" />
@@ -195,7 +195,7 @@ export default function ErrorsPage() {
         </Card>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardHeader>
               <CardTitle>Error stream</CardTitle>
             </CardHeader>
@@ -228,7 +228,7 @@ export default function ErrorsPage() {
                     onClick={() => setSelectedId(item.id)}
                     className={`w-full text-left rounded-lg border p-3 transition-colors ${
                       selectedId === item.id
-                        ? "border-[#06D6A0]/50 bg-[#06D6A0]/5"
+                        ? "border-primary/50 bg-primary/5"
                         : "border-white/10 hover:border-white/25"
                     }`}
                   >
@@ -243,7 +243,7 @@ export default function ErrorsPage() {
                       <Badge variant="outline" className={statusBadge[item.status]}>
                         {item.status}
                       </Badge>
-                      <code className="text-xs text-[#06D6A0]">{item.source}</code>
+                      <code className="text-xs text-primary">{item.source}</code>
                     </div>
                   </button>
                 ))}
@@ -251,7 +251,7 @@ export default function ErrorsPage() {
             </CardContent>
           </Card>
 
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardHeader>
               <CardTitle>Error detail</CardTitle>
             </CardHeader>
diff --git a/src/app/diagnostics/page.tsx b/src/app/diagnostics/page.tsx
index a4cb3263..d0a9333a 100644
--- a/src/app/diagnostics/page.tsx
+++ b/src/app/diagnostics/page.tsx
@@ -20,7 +20,7 @@ export const metadata: Metadata = {
 
 export default function DiagnosticsPage() {
   return (
-    <main id="main-content" className="min-h-screen bg-[#0a0a0a]">
+    <main id="main-content" className="min-h-screen bg-background">
       <div className="mx-auto max-w-5xl px-4 py-10 md:py-14">
         <div className="mb-8">
           <h1 className="text-3xl md:text-4xl font-bold tracking-tight">
diff --git a/src/app/diagnostics/profiler/page.tsx b/src/app/diagnostics/profiler/page.tsx
index 947ed19a..ec139fb7 100644
--- a/src/app/diagnostics/profiler/page.tsx
+++ b/src/app/diagnostics/profiler/page.tsx
@@ -112,7 +112,7 @@ export default function ProfilerPage() {
   );
 
   return (
-    <main id="main-content" className="min-h-screen bg-[#0a0a0a]">
+    <main id="main-content" className="min-h-screen bg-background">
       <div className="mx-auto max-w-7xl px-4 py-10 md:py-14">
         <div className="mb-8">
           <h1 className="text-3xl md:text-4xl font-bold tracking-tight">
@@ -124,16 +124,16 @@ export default function ProfilerPage() {
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardContent className="pt-6 flex items-center justify-between">
               <div>
                 <p className="text-sm text-muted-foreground">Avg duration</p>
                 <p className="text-3xl font-bold mt-1">{summary.avgDuration.toFixed(0)}ms</p>
               </div>
-              <Clock className="w-6 h-6 text-[#06D6A0]" />
+              <Clock className="w-6 h-6 text-primary" />
             </CardContent>
           </Card>
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardContent className="pt-6 flex items-center justify-between">
               <div>
                 <p className="text-sm text-muted-foreground">Avg token usage</p>
@@ -142,7 +142,7 @@ export default function ProfilerPage() {
               <Zap className="w-6 h-6 text-yellow-400" />
             </CardContent>
           </Card>
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardContent className="pt-6 flex items-center justify-between">
               <div>
                 <p className="text-sm text-muted-foreground">Avg p95 latency</p>
@@ -153,7 +153,7 @@ export default function ProfilerPage() {
           </Card>
         </div>
 
-        <Card className="bg-[#0f0f0f] border-white/10 mb-6">
+        <Card className="bg-background border-white/10 mb-6">
           <CardContent className="pt-6 grid grid-cols-1 md:grid-cols-4 gap-3">
             <div className="md:col-span-2 relative">
               <Search className="w-4 h-4 absolute left-3 top-3 text-muted-foreground" />
@@ -197,7 +197,7 @@ export default function ProfilerPage() {
         </Card>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardHeader>
               <CardTitle>Profiles</CardTitle>
             </CardHeader>
@@ -218,7 +218,7 @@ export default function ProfilerPage() {
                     onClick={() => setSelectedId(profile.id)}
                     className={`w-full rounded-lg border p-3 text-left transition-colors ${
                       selectedId === profile.id
-                        ? "border-[#06D6A0]/50 bg-[#06D6A0]/5"
+                        ? "border-primary/50 bg-primary/5"
                         : "border-white/10 hover:border-white/25"
                     }`}
                   >
@@ -229,7 +229,7 @@ export default function ProfilerPage() {
                       </Badge>
                     </div>
                     <div className="h-2 rounded bg-white/5 overflow-hidden">
-                      <div className="h-full bg-[#06D6A0]/80" style={{ width: `${width}%` }} />
+                      <div className="h-full bg-primary/80" style={{ width: `${width}%` }} />
                     </div>
                     <p className="mt-2 text-xs text-muted-foreground">{new Date(profile.createdAt).toLocaleString()}</p>
                   </button>
@@ -238,7 +238,7 @@ export default function ProfilerPage() {
             </CardContent>
           </Card>
 
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardHeader>
               <CardTitle>Profile detail</CardTitle>
             </CardHeader>
diff --git a/src/app/diagnostics/runtime/page.tsx b/src/app/diagnostics/runtime/page.tsx
index 312d9a9f..2d0ca24e 100644
--- a/src/app/diagnostics/runtime/page.tsx
+++ b/src/app/diagnostics/runtime/page.tsx
@@ -126,7 +126,7 @@ export default function RuntimeHealthPage() {
   );
 
   return (
-    <main id="main-content" className="min-h-screen bg-[#0a0a0a]">
+    <main id="main-content" className="min-h-screen bg-background">
       <div className="mx-auto max-w-7xl px-4 py-10 md:py-14">
         <div className="mb-8">
           <h1 className="text-3xl md:text-4xl font-bold tracking-tight">
@@ -138,16 +138,16 @@ export default function RuntimeHealthPage() {
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardContent className="pt-6 flex items-center justify-between">
               <div>
                 <p className="text-sm text-muted-foreground">Avg latency</p>
                 <p className="text-3xl font-bold mt-1">{summary.avgLatency.toFixed(0)}ms</p>
               </div>
-              <Timer className="w-6 h-6 text-[#06D6A0]" />
+              <Timer className="w-6 h-6 text-primary" />
             </CardContent>
           </Card>
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardContent className="pt-6 flex items-center justify-between">
               <div>
                 <p className="text-sm text-muted-foreground">Avg error rate</p>
@@ -156,7 +156,7 @@ export default function RuntimeHealthPage() {
               <AlertCircle className="w-6 h-6 text-yellow-400" />
             </CardContent>
           </Card>
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardContent className="pt-6 flex items-center justify-between">
               <div>
                 <p className="text-sm text-muted-foreground">Requests tracked</p>
@@ -167,7 +167,7 @@ export default function RuntimeHealthPage() {
           </Card>
         </div>
 
-        <Card className="bg-[#0f0f0f] border-white/10 mb-6">
+        <Card className="bg-background border-white/10 mb-6">
           <CardContent className="pt-6 grid grid-cols-1 md:grid-cols-4 gap-3">
             <div className="md:col-span-2 relative">
               <Search className="w-4 h-4 absolute left-3 top-3 text-muted-foreground" />
@@ -227,7 +227,7 @@ export default function RuntimeHealthPage() {
         </Card>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardHeader>
               <CardTitle>Runtime snapshots</CardTitle>
             </CardHeader>
@@ -245,7 +245,7 @@ export default function RuntimeHealthPage() {
                   onClick={() => setSelectedId(item.id)}
                   className={`w-full rounded-lg border p-3 text-left transition-colors ${
                     selectedId === item.id
-                      ? "border-[#06D6A0]/50 bg-[#06D6A0]/5"
+                      ? "border-primary/50 bg-primary/5"
                       : "border-white/10 hover:border-white/25"
                   }`}
                 >
@@ -265,7 +265,7 @@ export default function RuntimeHealthPage() {
             </CardContent>
           </Card>
 
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardHeader>
               <CardTitle>Snapshot detail</CardTitle>
             </CardHeader>
@@ -329,9 +329,9 @@ export default function RuntimeHealthPage() {
           </Card>
         </div>
 
-        <Card className="bg-[#0f0f0f] border-white/10 mt-6">
+        <Card className="bg-background border-white/10 mt-6">
           <CardContent className="pt-6 flex items-start gap-3 text-sm text-muted-foreground">
-            <Activity className="w-4 h-4 mt-0.5 text-[#06D6A0]" />
+            <Activity className="w-4 h-4 mt-0.5 text-primary" />
             <p>
               Runtime snapshots are persisted in <code>data/diagnostic-runtime.json</code> and served via
               <code> /api/diagnostics/runtime</code>. You can add new snapshots by POSTing to that endpoint.
diff --git a/src/app/diff/page.tsx b/src/app/diff/page.tsx
index f99b0369..c2ac2f32 100644
--- a/src/app/diff/page.tsx
+++ b/src/app/diff/page.tsx
@@ -188,7 +188,7 @@ export default function DiffPage() {
       <div className="grid grid-cols-2 gap-px bg-white/5 font-mono text-sm overflow-auto">
         {/* Left side (old version) */}
         <div className="overflow-auto">
-          <div className="sticky top-0 bg-[#1a1a1a] border-b border-white/10 px-4 py-2 text-sm font-semibold text-white z-10">
+          <div className="sticky top-0 bg-background border-b border-white/10 px-4 py-2 text-sm font-semibold text-white z-10">
             {version1}
           </div>
           {leftLines.map((line, idx) => (
@@ -215,7 +215,7 @@ export default function DiffPage() {
 
         {/* Right side (new version) */}
         <div className="overflow-auto">
-          <div className="sticky top-0 bg-[#1a1a1a] border-b border-white/10 px-4 py-2 text-sm font-semibold text-white z-10">
+          <div className="sticky top-0 bg-background border-b border-white/10 px-4 py-2 text-sm font-semibold text-white z-10">
             {version2}
           </div>
           {rightLines.map((line, idx) => (
@@ -244,15 +244,15 @@ export default function DiffPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero */}
       <section className="relative overflow-hidden py-20">
         <div className="absolute inset-0">
-          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 text-center">
-          <Badge variant="outline" className="mb-4 text-xs bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/30">
+          <Badge variant="outline" className="mb-4 text-xs bg-primary/10 text-primary border-primary/30">
             <GitCompare className="w-3 h-3 mr-1 inline" />
             Diff Viewer
           </Badge>
@@ -283,7 +283,7 @@ export default function DiffPage() {
                   <SelectTrigger id="skill" className="bg-white/5 border-white/10 text-white">
                     <SelectValue />
                   </SelectTrigger>
-                  <SelectContent className="bg-[#1a1a1a] border-white/10">
+                  <SelectContent className="bg-background border-white/10">
                     {skills.map((skill) => (
                       <SelectItem
                         key={skill.id}
@@ -306,7 +306,7 @@ export default function DiffPage() {
                   <SelectTrigger id="version1" className="bg-white/5 border-white/10 text-white">
                     <SelectValue />
                   </SelectTrigger>
-                  <SelectContent className="bg-[#1a1a1a] border-white/10">
+                  <SelectContent className="bg-background border-white/10">
                     {selectedSkill?.versions.map((version) => (
                       <SelectItem
                         key={version.version}
@@ -329,7 +329,7 @@ export default function DiffPage() {
                   <SelectTrigger id="version2" className="bg-white/5 border-white/10 text-white">
                     <SelectValue />
                   </SelectTrigger>
-                  <SelectContent className="bg-[#1a1a1a] border-white/10">
+                  <SelectContent className="bg-background border-white/10">
                     {selectedSkill?.versions.map((version) => (
                       <SelectItem
                         key={version.version}
@@ -354,7 +354,7 @@ export default function DiffPage() {
                   onClick={() => setViewMode("unified")}
                   className={
                     viewMode === "unified"
-                      ? "bg-[#06D6A0] text-black hover:bg-[#06D6A0]/90"
+                      ? "bg-primary text-black hover:bg-primary/90"
                       : "bg-white/5 border-white/10 text-white hover:bg-white/10"
                   }
                 >
@@ -367,7 +367,7 @@ export default function DiffPage() {
                   onClick={() => setViewMode("split")}
                   className={
                     viewMode === "split"
-                      ? "bg-[#06D6A0] text-black hover:bg-[#06D6A0]/90"
+                      ? "bg-primary text-black hover:bg-primary/90"
                       : "bg-white/5 border-white/10 text-white hover:bg-white/10"
                   }
                 >
@@ -383,7 +383,7 @@ export default function DiffPage() {
       {/* Stats Bar */}
       {diffResult && (
         <section className="max-w-7xl mx-auto px-4 pb-8">
-          <Card className="bg-gradient-to-br from-[#06D6A0]/10 via-card/80 to-purple/5 border-[#06D6A0]/30">
+          <Card className="bg-gradient-to-br from-primary/10 via-card/80 to-purple/5 border-primary/30">
             <CardContent className="p-6">
               <div className="grid grid-cols-3 gap-8">
                 <div className="flex items-center gap-3">
@@ -411,12 +411,12 @@ export default function DiffPage() {
                 </div>
 
                 <div className="flex items-center gap-3">
-                  <div className="p-3 rounded-lg bg-[#06D6A0]/10 text-[#06D6A0]">
+                  <div className="p-3 rounded-lg bg-primary/10 text-primary">
                     <FileText className="w-5 h-5" />
                   </div>
                   <div>
                     <div className="text-sm text-muted-foreground">Files Changed</div>
-                    <div className="text-2xl font-bold text-[#06D6A0]">
+                    <div className="text-2xl font-bold text-primary">
                       {diffResult.filesChanged}
                     </div>
                   </div>
diff --git a/src/app/docs/playground/page.tsx b/src/app/docs/playground/page.tsx
index f3b4068e..5e0a47e6 100644
--- a/src/app/docs/playground/page.tsx
+++ b/src/app/docs/playground/page.tsx
@@ -144,7 +144,7 @@ export default function ApiPlaygroundPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-foreground">
+    <div className="min-h-screen bg-background text-foreground">
       <div className="max-w-6xl mx-auto px-4 py-12">
         <div className="mb-12">
           <h1 className="text-4xl font-bold mb-4 aurora-text">
@@ -166,7 +166,7 @@ export default function ApiPlaygroundPage() {
               setSelectedEndpoint(e.target.value);
               setShowResponse(false);
             }}
-            className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-foreground focus:outline-none focus:border-[#06D6A0] transition-colors"
+            className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-foreground focus:outline-none focus:border-primary transition-colors"
           >
             <option value="skills">GET /api/skills - List all skills</option>
             <option value="skills-slug">GET /api/skills/:slug - Get specific skill</option>
@@ -181,7 +181,7 @@ export default function ApiPlaygroundPage() {
             <span className="px-3 py-1 bg-green-500/20 text-green-400 rounded text-sm font-mono font-semibold">
               {currentEndpoint.method}
             </span>
-            <code className="text-[#06D6A0] text-lg font-mono">
+            <code className="text-primary text-lg font-mono">
               {currentEndpoint.path}
             </code>
           </div>
@@ -199,7 +199,7 @@ export default function ApiPlaygroundPage() {
               {copied ? (
                 <>
                   <svg
-                    className="w-4 h-4 text-[#06D6A0]"
+                    className="w-4 h-4 text-primary"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -235,7 +235,7 @@ export default function ApiPlaygroundPage() {
           </div>
           <div className="bg-black/60 rounded-lg p-4 border border-white/10 overflow-x-auto">
             <pre className="text-sm">
-              <code className="text-[#06D6A0] font-mono">
+              <code className="text-primary font-mono">
                 {currentEndpoint.curl}
               </code>
             </pre>
@@ -246,7 +246,7 @@ export default function ApiPlaygroundPage() {
         <div className="mb-6">
           <button
             onClick={handleTryIt}
-            className="w-full bg-[#06D6A0] hover:bg-[#05c293] text-black font-semibold py-4 px-6 rounded-lg transition-colors shadow-lg shadow-[#06D6A0]/20"
+            className="w-full bg-primary hover:bg-primary/85 text-black font-semibold py-4 px-6 rounded-lg transition-colors shadow-lg shadow-primary/20"
           >
             Try it
           </button>
@@ -276,7 +276,7 @@ export default function ApiPlaygroundPage() {
         <div className="mt-12 bg-blue-500/10 border border-blue-500/20 rounded-lg p-6">
           <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
             <svg
-              className="w-5 h-5 text-[#06D6A0]"
+              className="w-5 h-5 text-primary"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -295,7 +295,7 @@ export default function ApiPlaygroundPage() {
           </p>
           <p className="text-sm text-muted-foreground">
             For complete API documentation, rate limits, and authentication details, visit the{" "}
-            <a href="/docs/api" className="text-[#06D6A0] hover:underline font-semibold">
+            <a href="/docs/api" className="text-primary hover:underline font-semibold">
               API Documentation
             </a>
             .
diff --git a/src/app/economics/compare/page.tsx b/src/app/economics/compare/page.tsx
index c06339ca..d884eaa0 100644
--- a/src/app/economics/compare/page.tsx
+++ b/src/app/economics/compare/page.tsx
@@ -31,9 +31,9 @@ export default async function EconomicsComparePage() {
   });
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <section className="mx-auto max-w-6xl px-4 py-16">
-        <Badge className="mb-4 border border-[#06D6A0]/30 bg-[#06D6A0]/15 text-[#06D6A0]">
+        <Badge className="mb-4 border border-primary/30 bg-primary/15 text-primary">
           Economics Category Comparison
         </Badge>
         <h1 className="mb-3 text-4xl font-bold">Compare economics categories side-by-side</h1>
@@ -103,7 +103,7 @@ export default async function EconomicsComparePage() {
 
                 <Link
                   href={`/economics?category=${group.category}`}
-                  className="inline-block text-[#06D6A0] hover:underline"
+                  className="inline-block text-primary hover:underline"
                 >
                   View {group.category} entries →
                 </Link>
diff --git a/src/app/economics/page.tsx b/src/app/economics/page.tsx
index 48fef782..b2ec8c77 100644
--- a/src/app/economics/page.tsx
+++ b/src/app/economics/page.tsx
@@ -39,9 +39,9 @@ export default async function EconomicsHubPage({ searchParams }: EconomicsPagePr
   }, { pricing: 0, costs: 0, revenue: 0, roi: 0 });
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <section className="mx-auto max-w-6xl px-4 py-16">
-        <Badge className="mb-4 border border-[#06D6A0]/30 bg-[#06D6A0]/15 text-[#06D6A0]">
+        <Badge className="mb-4 border border-primary/30 bg-primary/15 text-primary">
           Economics Knowledge Base
         </Badge>
         <h1 className="mb-4 text-4xl font-bold md:text-5xl">Economics playbooks for AI products</h1>
@@ -74,7 +74,7 @@ export default async function EconomicsHubPage({ searchParams }: EconomicsPagePr
         <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
           <p className="text-sm text-foreground/70">Showing {filtered.length} entries</p>
           <div className="flex items-center gap-4 text-sm">
-            <Link href="/economics/compare" className="text-[#06D6A0] hover:underline">
+            <Link href="/economics/compare" className="text-primary hover:underline">
               Compare categories →
             </Link>
             <a href="/api/economics" className="text-foreground/70 hover:text-white">
diff --git a/src/app/ecosystem/page.tsx b/src/app/ecosystem/page.tsx
index 348f196c..b57b9660 100644
--- a/src/app/ecosystem/page.tsx
+++ b/src/app/ecosystem/page.tsx
@@ -119,14 +119,14 @@ export default function EcosystemPage() {
   }, [data]);
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden min-h-[320px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[700px] max-h-[700px] bg-[#06D6A0]/5 rounded-full blur-[150px]" />
+          <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[700px] max-h-[700px] bg-primary/5 rounded-full blur-[150px]" />
         </div>
 
         <div className="relative max-w-6xl mx-auto px-4 py-16 w-full">
-          <h1 className="text-[38px] md:text-[52px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-3">
+          <h1 className="text-[38px] md:text-[52px] font-bold tracking-[-0.02em] text-foreground mb-3">
             Ecosystem Map
           </h1>
           <p className="text-lg text-foreground/80 mb-8">
@@ -142,35 +142,35 @@ export default function EcosystemPage() {
               <Card className="bg-card/30 border-white/10">
                 <CardContent className="pt-5">
                   <div className="text-xs text-muted-foreground uppercase tracking-wider">Nodes</div>
-                  <div className="text-3xl font-bold text-[#06D6A0]">{data.totals.ecosystemNodes}</div>
+                  <div className="text-3xl font-bold text-primary">{data.totals.ecosystemNodes}</div>
                 </CardContent>
               </Card>
 
               <Card className="bg-card/30 border-white/10">
                 <CardContent className="pt-5">
                   <div className="text-xs text-muted-foreground uppercase tracking-wider">Skills</div>
-                  <div className="text-3xl font-bold text-[#8B5CF6]">{data.totals.skillCount}</div>
+                  <div className="text-3xl font-bold text-purple">{data.totals.skillCount}</div>
                 </CardContent>
               </Card>
 
               <Card className="bg-card/30 border-white/10">
                 <CardContent className="pt-5">
                   <div className="text-xs text-muted-foreground uppercase tracking-wider">Agents</div>
-                  <div className="text-3xl font-bold text-[#3B82F6]">{data.totals.agentCount}</div>
+                  <div className="text-3xl font-bold text-electric-blue">{data.totals.agentCount}</div>
                 </CardContent>
               </Card>
 
               <Card className="bg-card/30 border-white/10">
                 <CardContent className="pt-5">
                   <div className="text-xs text-muted-foreground uppercase tracking-wider">MCP Servers</div>
-                  <div className="text-3xl font-bold text-[#F59E0B]">{data.totals.mcpServerCount}</div>
+                  <div className="text-3xl font-bold text-solar">{data.totals.mcpServerCount}</div>
                 </CardContent>
               </Card>
 
               <Card className="bg-card/30 border-white/10">
                 <CardContent className="pt-5">
                   <div className="text-xs text-muted-foreground uppercase tracking-wider">Avg Growth</div>
-                  <div className="text-3xl font-bold text-[#EC4899]">+{totalGrowth}%</div>
+                  <div className="text-3xl font-bold text-aurora-pink">+{totalGrowth}%</div>
                 </CardContent>
               </Card>
             </div>
diff --git a/src/app/ecosystem/stats/page.tsx b/src/app/ecosystem/stats/page.tsx
index 563a9d0b..d7e4496d 100644
--- a/src/app/ecosystem/stats/page.tsx
+++ b/src/app/ecosystem/stats/page.tsx
@@ -89,17 +89,17 @@ export default function EcosystemStatsPage() {
   const maxAgents = Math.max(...data.growth.monthlyData.map((m) => m.agents));
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         {/* Subtle aurora background */}
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-20 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Ecosystem Stats
           </h1>
           <p className="text-xl text-foreground/80 mb-6">
@@ -125,46 +125,46 @@ export default function EcosystemStatsPage() {
       {/* Overview Cards */}
       <section className="max-w-7xl mx-auto px-4 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
-          <Card className="bg-gradient-to-br from-[#06D6A0]/10 to-card/30 border-[#06D6A0]/20">
+          <Card className="bg-gradient-to-br from-primary/10 to-card/30 border-primary/20">
             <CardContent className="pt-6">
               <div className="text-sm text-muted-foreground mb-2">Total Skills</div>
-              <div className="text-4xl font-bold text-[#06D6A0]">
+              <div className="text-4xl font-bold text-primary">
                 {formatNumber(data.overview.totalSkills)}
               </div>
             </CardContent>
           </Card>
 
-          <Card className="bg-gradient-to-br from-[#8B5CF6]/10 to-card/30 border-[#8B5CF6]/20">
+          <Card className="bg-gradient-to-br from-purple/10 to-card/30 border-purple/20">
             <CardContent className="pt-6">
               <div className="text-sm text-muted-foreground mb-2">Total Agents</div>
-              <div className="text-4xl font-bold text-[#8B5CF6]">
+              <div className="text-4xl font-bold text-purple">
                 {formatNumber(data.overview.totalAgents)}
               </div>
             </CardContent>
           </Card>
 
-          <Card className="bg-gradient-to-br from-[#3B82F6]/10 to-card/30 border-[#3B82F6]/20">
+          <Card className="bg-gradient-to-br from-electric-blue/10 to-card/30 border-electric-blue/20">
             <CardContent className="pt-6">
               <div className="text-sm text-muted-foreground mb-2">Total Downloads</div>
-              <div className="text-4xl font-bold text-[#3B82F6]">
+              <div className="text-4xl font-bold text-electric-blue">
                 {formatNumber(data.overview.totalDownloads)}
               </div>
             </CardContent>
           </Card>
 
-          <Card className="bg-gradient-to-br from-[#F59E0B]/10 to-card/30 border-[#F59E0B]/20">
+          <Card className="bg-gradient-to-br from-solar/10 to-card/30 border-solar/20">
             <CardContent className="pt-6">
               <div className="text-sm text-muted-foreground mb-2">Active Contributors</div>
-              <div className="text-4xl font-bold text-[#F59E0B]">
+              <div className="text-4xl font-bold text-solar">
                 {formatNumber(data.overview.activeContributors)}
               </div>
             </CardContent>
           </Card>
 
-          <Card className="bg-gradient-to-br from-[#EC4899]/10 to-card/30 border-[#EC4899]/20">
+          <Card className="bg-gradient-to-br from-aurora-pink/10 to-card/30 border-aurora-pink/20">
             <CardContent className="pt-6">
               <div className="text-sm text-muted-foreground mb-2">MCP Servers</div>
-              <div className="text-4xl font-bold text-[#EC4899]">
+              <div className="text-4xl font-bold text-aurora-pink">
                 {formatNumber(data.overview.mcpServersTracked)}
               </div>
             </CardContent>
@@ -183,7 +183,7 @@ export default function EcosystemStatsPage() {
               {/* Skills Growth */}
               <div>
                 <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-lg font-semibold text-[#06D6A0]">Skills Added Per Month</h3>
+                  <h3 className="text-lg font-semibold text-primary">Skills Added Per Month</h3>
                   <div className="text-sm text-muted-foreground">Peak: {maxSkills} skills</div>
                 </div>
                 <div className="flex items-end gap-2 h-48">
@@ -193,11 +193,11 @@ export default function EcosystemStatsPage() {
                       <div key={idx} className="flex-1 flex flex-col items-center gap-2">
                         <div className="relative w-full flex-1 flex items-end group">
                           <div
-                            className="w-full bg-gradient-to-t from-[#06D6A0] to-[#06D6A0]/50 rounded-t-lg transition-all hover:brightness-125"
+                            className="w-full bg-gradient-to-t from-primary to-primary/50 rounded-t-lg transition-all hover:brightness-125"
                             style={{ height: `${heightPercent}%` }}
                           >
                             <div className="absolute inset-x-0 -top-8 text-center opacity-0 group-hover:opacity-100 transition-opacity">
-                              <div className="text-sm font-bold text-[#06D6A0]">{month.skills}</div>
+                              <div className="text-sm font-bold text-primary">{month.skills}</div>
                             </div>
                           </div>
                         </div>
@@ -213,7 +213,7 @@ export default function EcosystemStatsPage() {
               {/* Agents Growth */}
               <div>
                 <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-lg font-semibold text-[#8B5CF6]">New Agents Per Month</h3>
+                  <h3 className="text-lg font-semibold text-purple">New Agents Per Month</h3>
                   <div className="text-sm text-muted-foreground">Peak: {maxAgents} agents</div>
                 </div>
                 <div className="flex items-end gap-2 h-48">
@@ -223,11 +223,11 @@ export default function EcosystemStatsPage() {
                       <div key={idx} className="flex-1 flex flex-col items-center gap-2">
                         <div className="relative w-full flex-1 flex items-end group">
                           <div
-                            className="w-full bg-gradient-to-t from-[#8B5CF6] to-[#8B5CF6]/50 rounded-t-lg transition-all hover:brightness-125"
+                            className="w-full bg-gradient-to-t from-purple to-purple/50 rounded-t-lg transition-all hover:brightness-125"
                             style={{ height: `${heightPercent}%` }}
                           >
                             <div className="absolute inset-x-0 -top-8 text-center opacity-0 group-hover:opacity-100 transition-opacity">
-                              <div className="text-sm font-bold text-[#8B5CF6]">{month.agents}</div>
+                              <div className="text-sm font-bold text-purple">{month.agents}</div>
                             </div>
                           </div>
                         </div>
@@ -320,7 +320,7 @@ export default function EcosystemStatsPage() {
                         </div>
                       </div>
                       <div className="text-right">
-                        <div className="text-sm font-bold text-[#06D6A0]">
+                        <div className="text-sm font-bold text-primary">
                           {contributor.skillsCreated} skills
                         </div>
                         <div className="text-xs text-muted-foreground">
@@ -393,10 +393,10 @@ export default function EcosystemStatsPage() {
                   <div className="flex-1">
                     <div className="w-full h-8 bg-white/5 rounded-full overflow-hidden relative">
                       <div
-                        className="h-full bg-gradient-to-r from-[#06D6A0] to-[#06D6A0]/70 flex items-center justify-end px-4 transition-all"
+                        className="h-full bg-gradient-to-r from-primary to-primary/70 flex items-center justify-end px-4 transition-all"
                         style={{ width: `${host.percentage}%` }}
                       >
-                        <span className="text-sm font-bold text-[#0a0a0a]">
+                        <span className="text-sm font-bold text-background">
                           {host.percentage.toFixed(1)}%
                         </span>
                       </div>
@@ -458,8 +458,8 @@ export default function EcosystemStatsPage() {
 
       {/* CTA Section */}
       <section className="max-w-4xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-[#06D6A0]/20 bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/10 rounded-full blur-[80px]" />
+        <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/5 via-card/80 to-purple/5">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[80px]" />
           <div className="absolute bottom-0 left-0 w-48 h-48 bg-purple/10 rounded-full blur-[60px]" />
 
           <div className="relative p-8 md:p-12 text-center">
@@ -474,7 +474,7 @@ export default function EcosystemStatsPage() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <Link
                 href="/submit"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 Submit a Skill →
               </Link>
diff --git a/src/app/enterprise/page.tsx b/src/app/enterprise/page.tsx
index 230a45aa..2a2937aa 100644
--- a/src/app/enterprise/page.tsx
+++ b/src/app/enterprise/page.tsx
@@ -65,19 +65,19 @@ export default function EnterprisePage() {
   ];
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
 
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-7xl mx-auto px-4 py-20 text-center">
-          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#06D6A0]/10 mb-6">
-            <Building2 className="w-8 h-8 text-[#06D6A0]" />
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-6">
+            <Building2 className="w-8 h-8 text-primary" />
           </div>
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Enterprise-Grade AI Agents
           </h1>
           <p className="text-xl text-foreground/80 max-w-2xl mx-auto mb-8">
@@ -86,7 +86,7 @@ export default function EnterprisePage() {
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
             <Link
               href="/contact?subject=enterprise-demo"
-              className="inline-flex items-center gap-2 px-6 py-3 bg-[#06D6A0] text-black font-semibold rounded-lg hover:bg-[#06D6A0]/90 transition-colors"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-black font-semibold rounded-lg hover:bg-primary/90 transition-colors"
             >
               Request Demo
               <ArrowRight className="w-4 h-4" />
@@ -114,11 +114,11 @@ export default function EnterprisePage() {
           {features.map((feature) => {
             const Icon = feature.icon;
             return (
-              <Card key={feature.title} className="bg-[#0f0f0f] border-white/10 hover:border-[#06D6A0]/30 transition-colors">
+              <Card key={feature.title} className="bg-background border-white/10 hover:border-primary/30 transition-colors">
                 <CardHeader>
                   <div className="flex items-center gap-3 mb-2">
-                    <div className="p-2 rounded-lg bg-[#06D6A0]/10">
-                      <Icon className="w-6 h-6 text-[#06D6A0]" />
+                    <div className="p-2 rounded-lg bg-primary/10">
+                      <Icon className="w-6 h-6 text-primary" />
                     </div>
                     <CardTitle className="text-xl">{feature.title}</CardTitle>
                   </div>
@@ -147,7 +147,7 @@ export default function EnterprisePage() {
           {trustedByCompanies.map((company) => (
             <div
               key={company}
-              className="flex items-center justify-center p-6 bg-[#0f0f0f] border border-white/10 rounded-lg hover:border-[#06D6A0]/30 transition-colors"
+              className="flex items-center justify-center p-6 bg-background border border-white/10 rounded-lg hover:border-primary/30 transition-colors"
             >
               <div className="text-center">
                 <div className="text-4xl mb-2 opacity-30">🏢</div>
@@ -160,7 +160,7 @@ export default function EnterprisePage() {
 
       {/* Compliance Section */}
       <section className="relative max-w-7xl mx-auto px-4 py-16">
-        <div className="bg-[#0f0f0f] border border-white/10 rounded-2xl p-8 md:p-12">
+        <div className="bg-background border border-white/10 rounded-2xl p-8 md:p-12">
           <div className="text-center mb-10">
             <h2 className="text-3xl md:text-4xl font-bold mb-4">Security & Compliance</h2>
             <p className="text-lg text-foreground/70 max-w-2xl mx-auto">
@@ -172,7 +172,7 @@ export default function EnterprisePage() {
             {complianceBadges.map((badge) => (
               <div
                 key={badge.name}
-                className="flex flex-col items-center justify-center p-6 bg-[#0a0a0a] border border-white/5 rounded-lg"
+                className="flex flex-col items-center justify-center p-6 bg-background border border-white/5 rounded-lg"
               >
                 <div className="text-5xl mb-3">{badge.icon}</div>
                 <p className="text-sm font-semibold text-center">{badge.name}</p>
@@ -182,25 +182,25 @@ export default function EnterprisePage() {
 
           <div className="space-y-4">
             <div className="flex items-start gap-3">
-              <CheckCircle2 className="w-5 h-5 text-[#06D6A0] flex-shrink-0 mt-0.5" />
+              <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
               <p className="text-foreground/70">
                 <span className="font-semibold text-foreground">End-to-end encryption</span> for all data in transit and at rest
               </p>
             </div>
             <div className="flex items-start gap-3">
-              <CheckCircle2 className="w-5 h-5 text-[#06D6A0] flex-shrink-0 mt-0.5" />
+              <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
               <p className="text-foreground/70">
                 <span className="font-semibold text-foreground">SOC 2 Type II certified</span> infrastructure and processes
               </p>
             </div>
             <div className="flex items-start gap-3">
-              <CheckCircle2 className="w-5 h-5 text-[#06D6A0] flex-shrink-0 mt-0.5" />
+              <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
               <p className="text-foreground/70">
                 <span className="font-semibold text-foreground">GDPR and CCPA compliant</span> data handling and user rights
               </p>
             </div>
             <div className="flex items-start gap-3">
-              <CheckCircle2 className="w-5 h-5 text-[#06D6A0] flex-shrink-0 mt-0.5" />
+              <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
               <p className="text-foreground/70">
                 <span className="font-semibold text-foreground">Regular security audits</span> and penetration testing
               </p>
@@ -211,9 +211,9 @@ export default function EnterprisePage() {
 
       {/* Custom Solutions CTA */}
       <section className="relative max-w-7xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden bg-gradient-to-br from-[#06D6A0]/10 to-[#06D6A0]/5 border border-[#06D6A0]/20 rounded-2xl p-8 md:p-12 text-center">
+        <div className="relative overflow-hidden bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 rounded-2xl p-8 md:p-12 text-center">
           <div className="absolute inset-0">
-            <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/10 rounded-full blur-[100px]" />
+            <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[100px]" />
           </div>
           
           <div className="relative">
@@ -227,14 +227,14 @@ export default function EnterprisePage() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
               <Link
                 href="/contact?subject=custom-enterprise"
-                className="inline-flex items-center gap-2 px-6 py-3 bg-[#06D6A0] text-black font-semibold rounded-lg hover:bg-[#06D6A0]/90 transition-colors"
+                className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-black font-semibold rounded-lg hover:bg-primary/90 transition-colors"
               >
                 Talk to an Expert
                 <ArrowRight className="w-4 h-4" />
               </Link>
               <Link
                 href="/security"
-                className="inline-flex items-center gap-2 px-6 py-3 text-white font-semibold hover:text-[#06D6A0] transition-colors"
+                className="inline-flex items-center gap-2 px-6 py-3 text-white font-semibold hover:text-primary transition-colors"
               >
                 View Security Details
               </Link>
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 3a02cd42..a8c09f13 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -48,7 +48,7 @@ export default function Error({
           <div className="flex flex-col sm:flex-row gap-3 justify-center">
             <button
               onClick={reset}
-              className="inline-flex items-center justify-center h-12 px-6 rounded-lg bg-cyan text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all"
+              className="inline-flex items-center justify-center h-12 px-6 rounded-lg bg-cyan text-background font-semibold text-sm hover:brightness-110 transition-all"
             >
               Try again
             </button>
diff --git a/src/app/events/events-client.tsx b/src/app/events/events-client.tsx
index e093ef34..db2202d8 100644
--- a/src/app/events/events-client.tsx
+++ b/src/app/events/events-client.tsx
@@ -257,7 +257,7 @@ export function EventsClient() {
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-14 md:py-16 text-center">
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC] mb-4">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
             Events & Community
           </h1>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
@@ -345,7 +345,7 @@ export function EventsClient() {
                     <CardHeader className="pb-2">
                       <div className="flex items-start justify-between gap-4">
                         <div className="min-w-0">
-                          <CardTitle className="text-lg text-[#F8FAFC] mb-1">{event.title}</CardTitle>
+                          <CardTitle className="text-lg text-foreground mb-1">{event.title}</CardTitle>
                           <div className="text-sm text-muted-foreground">{formatDate(event.date)}</div>
                         </div>
                         <Badge className={typeStyles[event.type]}>{toTitleCase(event.type)}</Badge>
@@ -405,7 +405,7 @@ export function EventsClient() {
                         type="button"
                         onClick={() => rsvpToEvent(event.id)}
                         disabled={rsvpingEventId === event.id || isPast || atCapacity}
-                        className="bg-cyan hover:bg-cyan/90 text-[#0A0E17] font-semibold"
+                        className="bg-cyan hover:bg-cyan/90 text-background font-semibold"
                       >
                         {isPast
                           ? "Event closed"
@@ -514,7 +514,7 @@ export function EventsClient() {
                 <Button
                   type="submit"
                   disabled={submitting}
-                  className="w-full bg-cyan hover:bg-cyan/90 text-[#0A0E17] font-semibold"
+                  className="w-full bg-cyan hover:bg-cyan/90 text-background font-semibold"
                 >
                   {submitting ? "Submitting…" : "Submit Event"}
                 </Button>
diff --git a/src/app/faq/page.tsx b/src/app/faq/page.tsx
index 67be5fb1..cd7b01be 100644
--- a/src/app/faq/page.tsx
+++ b/src/app/faq/page.tsx
@@ -250,17 +250,17 @@ export default function FAQPage() {
 
   const renderFaqSection = (category: FaqCategory, questions: FaqItem[]) => (
     <div key={category}>
-      <h2 className="text-2xl font-bold mb-6 text-[#F8FAFC]">
+      <h2 className="text-2xl font-bold mb-6 text-foreground">
         {CATEGORY_LABELS[category]}
         <span className="ml-3 text-sm font-normal text-muted-foreground">({questions.length})</span>
       </h2>
 
-      <Card className="bg-[#0f0f0f] border-white/10">
+      <Card className="bg-background border-white/10">
         <CardContent className="p-6">
           <Accordion type="single" collapsible className="space-y-0">
             {questions.map((question) => (
               <AccordionItem key={question.id} value={question.id} className="border-white/10">
-                <AccordionTrigger className="text-left hover:text-[#06D6A0] transition-colors">
+                <AccordionTrigger className="text-left hover:text-primary transition-colors">
                   <span className="font-semibold pr-4">{question.question}</span>
                 </AccordionTrigger>
                 <AccordionContent>
@@ -292,7 +292,7 @@ export default function FAQPage() {
   );
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }}
@@ -300,11 +300,11 @@ export default function FAQPage() {
 
       <section className="relative overflow-hidden min-h-[300px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Frequently Asked Questions
           </h1>
           <p className="text-xl text-foreground/80 mb-2">Everything you need to know about forAgents.dev</p>
@@ -322,7 +322,7 @@ export default function FAQPage() {
             placeholder="Search questions or answers..."
             value={searchInput}
             onChange={(e) => setSearchInput(e.target.value)}
-            className="w-full pl-12 pr-4 py-6 text-lg bg-[#0f0f0f] border-white/10 focus:border-[#06D6A0] rounded-lg"
+            className="w-full pl-12 pr-4 py-6 text-lg bg-background border-white/10 focus:border-primary rounded-lg"
           />
         </div>
 
@@ -346,11 +346,11 @@ export default function FAQPage() {
 
       <section className="relative max-w-5xl mx-auto px-4 pb-12">
         {isLoading ? (
-          <Card className="bg-[#0f0f0f] border-white/10 p-12 text-center">
+          <Card className="bg-background border-white/10 p-12 text-center">
             <p className="text-muted-foreground">Loading FAQs...</p>
           </Card>
         ) : fetchError ? (
-          <Card className="bg-[#0f0f0f] border-white/10 p-12 text-center">
+          <Card className="bg-background border-white/10 p-12 text-center">
             <p className="text-red-400 mb-4">{fetchError}</p>
             <Button
               variant="outline"
@@ -365,7 +365,7 @@ export default function FAQPage() {
             </Button>
           </Card>
         ) : faqData.faqs.length === 0 ? (
-          <Card className="bg-[#0f0f0f] border-white/10 p-12 text-center">
+          <Card className="bg-background border-white/10 p-12 text-center">
             <p className="text-muted-foreground mb-4">
               No questions found matching "{debouncedSearch || activeCategory}".
             </p>
@@ -394,9 +394,9 @@ export default function FAQPage() {
       </section>
 
       <section className="relative max-w-5xl mx-auto px-4 pb-10">
-        <Card className="bg-[#0f0f0f] border-white/10">
+        <Card className="bg-background border-white/10">
           <CardContent className="p-8">
-            <h2 className="text-2xl font-bold mb-2 text-[#F8FAFC]">Ask a Question</h2>
+            <h2 className="text-2xl font-bold mb-2 text-foreground">Ask a Question</h2>
             <p className="text-sm text-muted-foreground mb-6">
               Didn't find your answer? Submit your question and we'll review it for the FAQ.
             </p>
@@ -415,7 +415,7 @@ export default function FAQPage() {
                   placeholder="What would you like to ask?"
                   required
                   minLength={10}
-                  className="bg-[#0a0a0a] border-white/10"
+                  className="bg-background border-white/10"
                 />
               </div>
 
@@ -430,7 +430,7 @@ export default function FAQPage() {
                     onChange={(event) =>
                       setAskForm((prev) => ({ ...prev, category: event.target.value as FaqCategory }))
                     }
-                    className="w-full h-10 rounded-md border border-white/10 bg-[#0a0a0a] px-3 text-sm"
+                    className="w-full h-10 rounded-md border border-white/10 bg-background px-3 text-sm"
                   >
                     {FALLBACK_CATEGORIES.map((category) => (
                       <option key={category} value={category}>
@@ -452,14 +452,14 @@ export default function FAQPage() {
                       setAskForm((prev) => ({ ...prev, email: event.target.value }))
                     }
                     placeholder="you@company.com"
-                    className="bg-[#0a0a0a] border-white/10"
+                    className="bg-background border-white/10"
                   />
                 </div>
               </div>
 
               <Button
                 type="submit"
-                className="bg-[#06D6A0] hover:bg-[#06D6A0]/90 text-black font-medium"
+                className="bg-primary hover:bg-primary/90 text-black font-medium"
                 disabled={askStatus === "submitting"}
               >
                 {askStatus === "submitting" ? "Submitting..." : "Submit Question"}
@@ -467,7 +467,7 @@ export default function FAQPage() {
             </form>
 
             {askMessage ? (
-              <p className={`mt-4 text-sm ${askStatus === "success" ? "text-[#06D6A0]" : "text-red-400"}`}>
+              <p className={`mt-4 text-sm ${askStatus === "success" ? "text-primary" : "text-red-400"}`}>
                 {askMessage}
               </p>
             ) : null}
@@ -476,9 +476,9 @@ export default function FAQPage() {
       </section>
 
       <section className="relative max-w-5xl mx-auto px-4 pb-16">
-        <Card className="bg-gradient-to-br from-[#06D6A0]/10 to-transparent border-[#06D6A0]/20">
+        <Card className="bg-gradient-to-br from-primary/10 to-transparent border-primary/20">
           <CardContent className="p-8 md:p-12 text-center">
-            <h2 className="text-3xl font-bold mb-4 text-[#F8FAFC]">Still need help?</h2>
+            <h2 className="text-3xl font-bold mb-4 text-foreground">Still need help?</h2>
             <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
               Can't find what you're looking for? Our community and support team are here to help you get
               the most out of forAgents.dev.
@@ -486,7 +486,7 @@ export default function FAQPage() {
 
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Link href="/community">
-                <Button className="bg-[#06D6A0] hover:bg-[#06D6A0]/90 text-black font-medium gap-2">
+                <Button className="bg-primary hover:bg-primary/90 text-black font-medium gap-2">
                   <MessageCircle className="w-4 h-4" />
                   Join Community
                 </Button>
@@ -502,7 +502,7 @@ export default function FAQPage() {
             <div className="mt-8 pt-8 border-t border-white/10">
               <p className="text-sm text-muted-foreground">
                 Looking for detailed documentation?{" "}
-                <Link href="/docs/api" className="text-[#06D6A0] hover:underline font-medium">
+                <Link href="/docs/api" className="text-primary hover:underline font-medium">
                   Check out our API docs
                 </Link>
               </p>
diff --git a/src/app/feeds/page.tsx b/src/app/feeds/page.tsx
index 970d1ffe..f5c14599 100644
--- a/src/app/feeds/page.tsx
+++ b/src/app/feeds/page.tsx
@@ -309,7 +309,7 @@ export default function FeedsPage() {
           </p>
           <Link
             href="/submit"
-            className="inline-flex items-center justify-center h-10 px-6 rounded-lg bg-cyan text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all"
+            className="inline-flex items-center justify-center h-10 px-6 rounded-lg bg-cyan text-background font-semibold text-sm hover:brightness-110 transition-all"
           >
             Request a Feature
           </Link>
diff --git a/src/app/forum/[id]/page.tsx b/src/app/forum/[id]/page.tsx
index 1b0462dd..4e4671b1 100644
--- a/src/app/forum/[id]/page.tsx
+++ b/src/app/forum/[id]/page.tsx
@@ -36,13 +36,13 @@ export default async function ForumThreadPage(props: { params: Promise<{ id: str
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         {/* Breadcrumb */}
         <div className="mb-6">
           <Link 
             href="/forum" 
-            className="text-sm text-gray-400 hover:text-[#06D6A0] transition-colors"
+            className="text-sm text-gray-400 hover:text-primary transition-colors"
           >
             ← Back to forum
           </Link>
@@ -51,7 +51,7 @@ export default async function ForumThreadPage(props: { params: Promise<{ id: str
         {/* Thread Header */}
         <div className="mb-8">
           <div className="flex items-center gap-2 mb-3">
-            <span className="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-[#06D6A0]/10 text-[#06D6A0] capitalize">
+            <span className="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-primary/10 text-primary capitalize">
               {thread.category.replace('-', ' ')}
             </span>
             {thread.tags.map((tag) => (
@@ -114,7 +114,7 @@ export default async function ForumThreadPage(props: { params: Promise<{ id: str
           </p>
           <Link
             href="/auth/signin"
-            className="inline-block px-6 py-3 bg-[#06D6A0] text-[#0a0a0a] font-semibold rounded-lg hover:brightness-110 transition-all"
+            className="inline-block px-6 py-3 bg-primary text-background font-semibold rounded-lg hover:brightness-110 transition-all"
           >
             Sign In to Reply
           </Link>
diff --git a/src/app/forum/page.tsx b/src/app/forum/page.tsx
index c7675c0b..8f7ed677 100644
--- a/src/app/forum/page.tsx
+++ b/src/app/forum/page.tsx
@@ -18,7 +18,7 @@ export default async function ForumPage() {
   const threads = await getForumThreads();
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         {/* Header */}
         <div className="mb-12">
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
index 4c35cee0..fc506eb1 100644
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@@ -17,32 +17,32 @@ export default function GlobalError({
 
   return (
     <html lang="en" className="dark">
-      <body className="min-h-screen bg-[#0A0E17] text-[#E2E8F0] antialiased">
+      <body className="min-h-screen bg-background text-foreground antialiased">
         <div className="min-h-screen flex items-center justify-center px-4">
           <div className="relative max-w-md w-full">
             {/* Glow effect */}
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 opacity-20">
-              <div className="absolute inset-0 bg-[#06D6A0] rounded-full blur-[80px]" />
+              <div className="absolute inset-0 bg-primary rounded-full blur-[80px]" />
             </div>
             
-            <div className="relative bg-[#0F1420]/50 border border-white/10 rounded-2xl p-8 text-center">
+            <div className="relative bg-card/50 border border-white/10 rounded-2xl p-8 text-center">
               {/* Icon */}
               <div className="text-6xl mb-4">⚠️</div>
               
               {/* Title */}
-              <h1 className="text-2xl font-bold text-[#E2E8F0] mb-2">
+              <h1 className="text-2xl font-bold text-foreground mb-2">
                 Something went wrong
               </h1>
               
               {/* Message */}
-              <p className="text-[#6B7280] mb-6">
+              <p className="text-muted-foreground mb-6">
                 We encountered a critical error. This has been logged and we&apos;ll look into it.
               </p>
               
               {/* Error details for development */}
               {process.env.NODE_ENV === "development" && error.message && (
                 <div className="mb-6 p-4 bg-black/30 rounded-lg border border-white/5">
-                  <p className="text-xs font-mono text-[#6B7280] text-left break-words">
+                  <p className="text-xs font-mono text-muted-foreground text-left break-words">
                     {error.message}
                   </p>
                 </div>
@@ -52,26 +52,26 @@ export default function GlobalError({
               <div className="flex flex-col sm:flex-row gap-3 justify-center">
                 <button
                   onClick={reset}
-                  className="inline-flex items-center justify-center h-12 px-6 rounded-lg bg-[#06D6A0] text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all"
+                  className="inline-flex items-center justify-center h-12 px-6 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
                 >
                   Try again
                 </button>
                 <Link
                   href="/"
-                  className="inline-flex items-center justify-center h-12 px-6 rounded-lg border border-[#06D6A0] text-[#06D6A0] font-semibold text-sm hover:bg-[#06D6A0]/10 transition-colors"
+                  className="inline-flex items-center justify-center h-12 px-6 rounded-lg border border-primary text-primary font-semibold text-sm hover:bg-primary/10 transition-colors"
                 >
                   Go home
                 </Link>
               </div>
               
               {/* Additional help */}
-              <p className="text-xs text-[#6B7280] mt-6">
+              <p className="text-xs text-muted-foreground mt-6">
                 If this keeps happening,{" "}
                 <a
                   href="https://github.com/reflectt/foragents.dev/issues"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-[#06D6A0] hover:underline"
+                  className="text-primary hover:underline"
                 >
                   let us know on GitHub
                 </a>
diff --git a/src/app/globals.css b/src/app/globals.css
index dc90701d..543473bb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "./tokens.css";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -54,83 +55,100 @@
 
 :root {
   --radius: 0.625rem;
-  /* Midnight Aurora - Brand Spec */
-  --background: #0A0E17;
-  --foreground: #E2E8F0;
-  --card: #0F1420;
-  --card-foreground: #E2E8F0;
-  --popover: #0F1420;
-  --popover-foreground: #E2E8F0;
-  --primary: #06D6A0;
-  --primary-foreground: #0A0E17;
-  --secondary: #1A1F2E;
-  --secondary-foreground: #E2E8F0;
-  --muted: #1A1F2E;
-  --muted-foreground: #6B7280;
-  --accent: #1A1F2E;
-  --accent-foreground: #E2E8F0;
-  --destructive: #EC4899;
-  --border: #1A1F2E;
+
+  /* forAgents.dev — Midnight Aurora brand overrides on token layer */
+  --color-bg: #0A0E17;
+  --color-surface: #0F1420;
+  --color-surface-raised: #1A1F2E;
+  --color-text: #E2E8F0;
+  --color-text-secondary: #6B7280;
+  --color-border: #1A1F2E;
+  --color-primary: #06D6A0;
+  --color-primary-hover: #34D399;
+  --color-primary-active: #059669;
+  --color-secondary: #8B5CF6;
+  --color-accent: #EC4899;
+  --color-error: #EC4899;
+  --color-warning: #F59E0B;
+  --color-success: #06D6A0;
+
+  /* Midnight Aurora - Brand Spec (shadcn mappings) */
+  --background: var(--color-bg);
+  --foreground: var(--color-text);
+  --card: var(--color-surface);
+  --card-foreground: var(--color-text);
+  --popover: var(--color-surface);
+  --popover-foreground: var(--color-text);
+  --primary: var(--color-primary);
+  --primary-foreground: var(--color-bg);
+  --secondary: var(--color-surface-raised);
+  --secondary-foreground: var(--color-text);
+  --muted: var(--color-surface-raised);
+  --muted-foreground: var(--color-text-secondary);
+  --accent: var(--color-surface-raised);
+  --accent-foreground: var(--color-text);
+  --destructive: var(--color-error);
+  --border: var(--color-border);
   --input: #2A3040;
-  --ring: #06D6A0;
+  --ring: var(--color-primary);
   --cyan: #06D6A0;
-  --purple: #8B5CF6;
+  --purple: var(--color-secondary);
   --green: #06D6A0;
   --electric-blue: #3B82F6;
-  --aurora-pink: #EC4899;
-  --solar: #F59E0B;
+  --aurora-pink: var(--color-accent);
+  --solar: var(--color-warning);
   --chart-1: #06D6A0;
-  --chart-2: #8B5CF6;
+  --chart-2: var(--color-secondary);
   --chart-3: #3B82F6;
-  --chart-4: #F59E0B;
-  --chart-5: #EC4899;
-  --sidebar: #0A0E17;
-  --sidebar-foreground: #E2E8F0;
-  --sidebar-primary: #06D6A0;
-  --sidebar-primary-foreground: #0A0E17;
-  --sidebar-accent: #1A1F2E;
-  --sidebar-accent-foreground: #E2E8F0;
-  --sidebar-border: #1A1F2E;
-  --sidebar-ring: #06D6A0;
+  --chart-4: var(--color-warning);
+  --chart-5: var(--color-accent);
+  --sidebar: var(--color-bg);
+  --sidebar-foreground: var(--color-text);
+  --sidebar-primary: var(--color-primary);
+  --sidebar-primary-foreground: var(--color-bg);
+  --sidebar-accent: var(--color-surface-raised);
+  --sidebar-accent-foreground: var(--color-text);
+  --sidebar-border: var(--color-border);
+  --sidebar-ring: var(--color-primary);
 }
 
 .light {
   --background: #FFFFFF;
-  --foreground: #0F172A;
-  --card: #F8FAFC;
-  --card-foreground: #0F172A;
+  --foreground: var(--rt-slate-900);
+  --card: var(--rt-slate-50);
+  --card-foreground: var(--rt-slate-900);
   --popover: #FFFFFF;
-  --popover-foreground: #0F172A;
+  --popover-foreground: var(--rt-slate-900);
   --primary: #06D6A0;
   --primary-foreground: #FFFFFF;
-  --secondary: #F1F5F9;
-  --secondary-foreground: #0F172A;
-  --muted: #F1F5F9;
-  --muted-foreground: #64748B;
-  --accent: #F1F5F9;
-  --accent-foreground: #0F172A;
-  --destructive: #EC4899;
-  --border: #E2E8F0;
-  --input: #E2E8F0;
+  --secondary: var(--rt-slate-100);
+  --secondary-foreground: var(--rt-slate-900);
+  --muted: var(--rt-slate-100);
+  --muted-foreground: var(--rt-slate-500);
+  --accent: var(--rt-slate-100);
+  --accent-foreground: var(--rt-slate-900);
+  --destructive: var(--color-accent);
+  --border: var(--rt-slate-200);
+  --input: var(--rt-slate-200);
   --ring: #06D6A0;
   --cyan: #06D6A0;
-  --purple: #8B5CF6;
+  --purple: var(--color-secondary);
   --green: #06D6A0;
   --electric-blue: #3B82F6;
-  --aurora-pink: #EC4899;
-  --solar: #F59E0B;
+  --aurora-pink: var(--color-accent);
+  --solar: var(--color-warning);
   --chart-1: #06D6A0;
-  --chart-2: #8B5CF6;
+  --chart-2: var(--color-secondary);
   --chart-3: #3B82F6;
-  --chart-4: #F59E0B;
-  --chart-5: #EC4899;
-  --sidebar: #F8FAFC;
-  --sidebar-foreground: #0F172A;
+  --chart-4: var(--color-warning);
+  --chart-5: var(--color-accent);
+  --sidebar: var(--rt-slate-50);
+  --sidebar-foreground: var(--rt-slate-900);
   --sidebar-primary: #06D6A0;
   --sidebar-primary-foreground: #FFFFFF;
-  --sidebar-accent: #F1F5F9;
-  --sidebar-accent-foreground: #0F172A;
-  --sidebar-border: #E2E8F0;
+  --sidebar-accent: var(--rt-slate-100);
+  --sidebar-accent-foreground: var(--rt-slate-900);
+  --sidebar-border: var(--rt-slate-200);
   --sidebar-ring: #06D6A0;
 }
 
@@ -149,22 +167,22 @@
 
 /* Aurora gradient utilities */
 .aurora-gradient {
-  background: linear-gradient(135deg, #06D6A0 0%, #3B82F6 50%, #8B5CF6 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--electric-blue) 50%, var(--color-secondary) 100%);
 }
 
 .aurora-text {
-  background: linear-gradient(135deg, #06D6A0 0%, #3B82F6 50%, #8B5CF6 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--electric-blue) 50%, var(--color-secondary) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
 .aurora-border {
-  border-image: linear-gradient(135deg, #06D6A0 0%, #3B82F6 50%, #8B5CF6 100%) 1;
+  border-image: linear-gradient(135deg, var(--color-primary) 0%, var(--electric-blue) 50%, var(--color-secondary) 100%) 1;
 }
 
 .aurora-glow {
-  box-shadow: 0 0 40px rgba(6, 214, 160, 0.08), 0 0 80px rgba(139, 92, 246, 0.05);
+  box-shadow: var(--shadow-glow-primary);
 }
 
 /* Typewriter cursor blink */
@@ -176,13 +194,13 @@
 .cursor-blink::after {
   content: "_";
   animation: blink 1s step-end infinite;
-  color: #06D6A0;
+  color: var(--color-primary);
 }
 
 /* 404 gradient stroke text */
 .gradient-stroke {
   -webkit-text-stroke: 2px transparent;
-  background: linear-gradient(135deg, #06D6A0 0%, #3B82F6 50%, #8B5CF6 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--electric-blue) 50%, var(--color-secondary) 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
diff --git a/src/app/glossary/page.tsx b/src/app/glossary/page.tsx
index 367eafdf..0ab4c96e 100644
--- a/src/app/glossary/page.tsx
+++ b/src/app/glossary/page.tsx
@@ -247,7 +247,7 @@ export default function GlossaryPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(webPageJsonLd) }}
@@ -256,7 +256,7 @@ export default function GlossaryPage() {
       <section className="max-w-5xl mx-auto px-4 py-16">
         <div className="relative">
           <div className="absolute inset-0 -z-10 opacity-30">
-            <div className="absolute top-0 left-1/3 w-96 h-96 bg-[#06D6A0]/20 rounded-full blur-[120px]" />
+            <div className="absolute top-0 left-1/3 w-96 h-96 bg-primary/20 rounded-full blur-[120px]" />
             <div className="absolute bottom-0 right-1/3 w-80 h-80 bg-purple/20 rounded-full blur-[100px]" />
           </div>
 
@@ -279,7 +279,7 @@ export default function GlossaryPage() {
                 placeholder="Search terms, definitions, or categories..."
                 value={searchInput}
                 onChange={(e) => setSearchInput(e.target.value)}
-                className="w-full px-5 py-3 pl-12 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-[#06D6A0]/50 focus:ring-1 focus:ring-[#06D6A0]/50 transition-all"
+                className="w-full px-5 py-3 pl-12 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all"
               />
               <svg
                 className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500"
@@ -304,7 +304,7 @@ export default function GlossaryPage() {
                 id="glossary-category"
                 value={selectedCategory}
                 onChange={(event) => setSelectedCategory(event.target.value as GlossaryCategory | "all")}
-                className="px-3 py-2 bg-black/30 border border-white/10 rounded-lg text-sm text-white focus:outline-none focus:border-[#06D6A0]/50"
+                className="px-3 py-2 bg-black/30 border border-white/10 rounded-lg text-sm text-white focus:outline-none focus:border-primary/50"
               >
                 <option value="all">All categories</option>
                 {availableCategories.map((category) => (
@@ -327,7 +327,7 @@ export default function GlossaryPage() {
                 {(debouncedSearch || selectedLetter || selectedCategory !== "all") && (
                   <button
                     onClick={clearFilters}
-                    className="text-[#06D6A0] hover:underline"
+                    className="text-primary hover:underline"
                   >
                     Clear filters
                   </button>
@@ -336,7 +336,7 @@ export default function GlossaryPage() {
             )}
           </div>
 
-          <div className="sticky top-0 z-10 bg-[#0a0a0a]/95 backdrop-blur-sm border-y border-white/10 py-4 -mx-4 px-4">
+          <div className="sticky top-0 z-10 bg-background/95 backdrop-blur-sm border-y border-white/10 py-4 -mx-4 px-4">
             <div className="max-w-5xl mx-auto">
               <div className="flex flex-wrap items-center justify-center gap-2">
                 {alphabet.map((letter) => {
@@ -350,9 +350,9 @@ export default function GlossaryPage() {
                       disabled={!isAvailable}
                       className={`w-8 h-8 flex items-center justify-center rounded font-semibold text-sm transition-all ${
                         isSelected
-                          ? "bg-[#06D6A0] text-black"
+                          ? "bg-primary text-black"
                           : isAvailable
-                          ? "bg-white/5 text-white hover:bg-white/10 hover:text-[#06D6A0]"
+                          ? "bg-white/5 text-white hover:bg-white/10 hover:text-primary"
                           : "bg-transparent text-gray-700 cursor-not-allowed"
                       }`}
                       aria-label={`Filter by letter ${letter}`}
@@ -377,7 +377,7 @@ export default function GlossaryPage() {
             </p>
             <button
               onClick={clearFilters}
-              className="px-6 py-2 bg-[#06D6A0] text-black font-semibold rounded-lg hover:brightness-110 transition-all"
+              className="px-6 py-2 bg-primary text-black font-semibold rounded-lg hover:brightness-110 transition-all"
             >
               Show all terms
             </button>
@@ -398,8 +398,8 @@ export default function GlossaryPage() {
             {Object.entries(groupedEntries).map(([letter, entries]) => (
               <div key={letter} id={`letter-${letter}`}>
                 <div className="flex items-center gap-3 mb-6">
-                  <div className="w-12 h-12 flex items-center justify-center rounded-lg bg-[#06D6A0]/10 border border-[#06D6A0]/30">
-                    <span className="text-2xl font-bold text-[#06D6A0]">{letter}</span>
+                  <div className="w-12 h-12 flex items-center justify-center rounded-lg bg-primary/10 border border-primary/30">
+                    <span className="text-2xl font-bold text-primary">{letter}</span>
                   </div>
                   <div className="flex-1 h-px bg-white/10" />
                 </div>
@@ -409,7 +409,7 @@ export default function GlossaryPage() {
                     <article
                       key={entry.slug}
                       id={entry.slug}
-                      className="bg-white/5 border border-white/10 rounded-xl p-6 hover:border-[#06D6A0]/30 transition-all scroll-mt-32"
+                      className="bg-white/5 border border-white/10 rounded-xl p-6 hover:border-primary/30 transition-all scroll-mt-32"
                     >
                       <div className="flex flex-wrap items-center gap-3 mb-3">
                         <h3 className="text-2xl font-bold text-white">{entry.term}</h3>
@@ -447,15 +447,15 @@ export default function GlossaryPage() {
                                 <a
                                   key={`${entry.slug}-related-${index}`}
                                   href={`#${relatedEntry.slug}`}
-                                  className="px-2 py-1 text-xs bg-white/5 border border-white/10 rounded text-gray-300 hover:text-[#06D6A0] hover:border-[#06D6A0]/30 transition-all"
+                                  className="px-2 py-1 text-xs bg-white/5 border border-white/10 rounded text-gray-300 hover:text-primary hover:border-primary/30 transition-all"
                                   onClick={(event) => {
                                     event.preventDefault();
                                     const element = document.getElementById(relatedEntry.slug);
                                     if (element) {
                                       element.scrollIntoView({ behavior: "smooth", block: "center" });
-                                      element.classList.add("ring-2", "ring-[#06D6A0]/50");
+                                      element.classList.add("ring-2", "ring-primary/50");
                                       setTimeout(() => {
-                                        element.classList.remove("ring-2", "ring-[#06D6A0]/50");
+                                        element.classList.remove("ring-2", "ring-primary/50");
                                       }, 1500);
                                     }
                                   }}
@@ -504,7 +504,7 @@ export default function GlossaryPage() {
                   }
                   required
                   maxLength={100}
-                  className="w-full px-4 py-2 bg-black/30 border border-white/10 rounded-lg text-white focus:outline-none focus:border-[#06D6A0]/50"
+                  className="w-full px-4 py-2 bg-black/30 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary/50"
                   placeholder="Example: Agent Loop"
                 />
               </div>
@@ -522,7 +522,7 @@ export default function GlossaryPage() {
                   required
                   maxLength={1200}
                   rows={4}
-                  className="w-full px-4 py-2 bg-black/30 border border-white/10 rounded-lg text-white focus:outline-none focus:border-[#06D6A0]/50"
+                  className="w-full px-4 py-2 bg-black/30 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary/50"
                   placeholder="Describe what this term means in an agent ecosystem context..."
                 />
               </div>
@@ -540,7 +540,7 @@ export default function GlossaryPage() {
                       category: event.target.value as GlossaryCategory,
                     }))
                   }
-                  className="w-full px-4 py-2 bg-black/30 border border-white/10 rounded-lg text-white focus:outline-none focus:border-[#06D6A0]/50"
+                  className="w-full px-4 py-2 bg-black/30 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary/50"
                 >
                   {Object.entries(CATEGORY_LABELS).map(([value, label]) => (
                     <option key={value} value={value}>
@@ -560,7 +560,7 @@ export default function GlossaryPage() {
                   onChange={(event) =>
                     setFormData((previous) => ({ ...previous, relatedTerms: event.target.value }))
                   }
-                  className="w-full px-4 py-2 bg-black/30 border border-white/10 rounded-lg text-white focus:outline-none focus:border-[#06D6A0]/50"
+                  className="w-full px-4 py-2 bg-black/30 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary/50"
                   placeholder="Example: MCP, Tool Calling"
                 />
               </div>
@@ -575,7 +575,7 @@ export default function GlossaryPage() {
                   onChange={(event) =>
                     setFormData((previous) => ({ ...previous, tags: event.target.value }))
                   }
-                  className="w-full px-4 py-2 bg-black/30 border border-white/10 rounded-lg text-white focus:outline-none focus:border-[#06D6A0]/50"
+                  className="w-full px-4 py-2 bg-black/30 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary/50"
                   placeholder="Example: ai-agents, security"
                 />
               </div>
@@ -595,14 +595,14 @@ export default function GlossaryPage() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="px-5 py-2.5 bg-[#06D6A0] text-black font-semibold rounded-lg hover:brightness-110 transition-all disabled:opacity-60 disabled:cursor-not-allowed"
+                className="px-5 py-2.5 bg-primary text-black font-semibold rounded-lg hover:brightness-110 transition-all disabled:opacity-60 disabled:cursor-not-allowed"
               >
                 {isSubmitting ? "Creating..." : "Create term"}
               </button>
             </form>
           </div>
 
-          <div className="rounded-xl border border-[#06D6A0]/20 bg-gradient-to-br from-[#06D6A0]/10 to-purple/10 p-6">
+          <div className="rounded-xl border border-primary/20 bg-gradient-to-br from-primary/10 to-purple/10 p-6">
             <h2 className="text-2xl font-semibold text-white mb-3">Ready to build?</h2>
             <p className="text-gray-300 mb-6">
               Turn concepts into execution with production-ready skills, tools, and protocols.
@@ -610,13 +610,13 @@ export default function GlossaryPage() {
             <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
               <Link
                 href="/skills"
-                className="px-5 py-2.5 bg-[#06D6A0] text-black font-semibold rounded-lg hover:brightness-110 transition-all"
+                className="px-5 py-2.5 bg-primary text-black font-semibold rounded-lg hover:brightness-110 transition-all"
               >
                 Browse Skills →
               </Link>
               <Link
                 href="/learn"
-                className="px-5 py-2.5 border border-[#06D6A0] text-[#06D6A0] font-semibold rounded-lg hover:bg-[#06D6A0]/10 transition-all"
+                className="px-5 py-2.5 border border-primary text-primary font-semibold rounded-lg hover:bg-primary/10 transition-all"
               >
                 Start Learning
               </Link>
diff --git a/src/app/governance/GovernanceReadiness.tsx b/src/app/governance/GovernanceReadiness.tsx
index f3453ac5..bbd0a48e 100644
--- a/src/app/governance/GovernanceReadiness.tsx
+++ b/src/app/governance/GovernanceReadiness.tsx
@@ -52,7 +52,7 @@ export default function GovernanceReadiness({ checklist, maturityCriteria }: Pro
           >
             <input
               type="checkbox"
-              className="mt-1 h-4 w-4 accent-[#06D6A0]"
+              className="mt-1 h-4 w-4 accent-primary"
               checked={Boolean(checked[item.id])}
               onChange={(event) => {
                 setChecked((prev) => ({ ...prev, [item.id]: event.target.checked }));
@@ -63,9 +63,9 @@ export default function GovernanceReadiness({ checklist, maturityCriteria }: Pro
         ))}
       </div>
 
-      <div className="mt-6 rounded-lg border border-[#06D6A0]/25 bg-[#06D6A0]/10 p-4">
+      <div className="mt-6 rounded-lg border border-primary/25 bg-primary/10 p-4">
         <p className="text-sm text-foreground/80">Self-assessment score</p>
-        <p className="mt-1 text-2xl font-bold text-[#06D6A0]">
+        <p className="mt-1 text-2xl font-bold text-primary">
           {score}/{checklist.length} ({percentage}%)
         </p>
         <p className="mt-1 text-sm text-foreground/90">
diff --git a/src/app/governance/accountability/page.tsx b/src/app/governance/accountability/page.tsx
index 67c407ba..4c84ac4e 100644
--- a/src/app/governance/accountability/page.tsx
+++ b/src/app/governance/accountability/page.tsx
@@ -84,12 +84,12 @@ export default async function GovernanceAccountabilityPage() {
 
   if (!data) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a]">
+      <div className="min-h-screen bg-background">
         <section className="mx-auto max-w-5xl px-4 py-16">
-          <Link href="/governance" className="text-sm text-[#06D6A0] hover:underline">
+          <Link href="/governance" className="text-sm text-primary hover:underline">
             ← Back to governance hub
           </Link>
-          <h1 className="mt-4 text-4xl font-bold tracking-tight text-[#F8FAFC] md:text-5xl">
+          <h1 className="mt-4 text-4xl font-bold tracking-tight text-foreground md:text-5xl">
             Accountability Deep Dive
           </h1>
           <p className="mt-4 text-foreground/80">Accountability data is temporarily unavailable.</p>
@@ -99,12 +99,12 @@ export default async function GovernanceAccountabilityPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="mx-auto max-w-5xl px-4 py-16">
-        <Link href="/governance" className="text-sm text-[#06D6A0] hover:underline">
+        <Link href="/governance" className="text-sm text-primary hover:underline">
           ← Back to governance hub
         </Link>
-        <h1 className="mt-4 text-4xl font-bold tracking-tight text-[#F8FAFC] md:text-5xl">
+        <h1 className="mt-4 text-4xl font-bold tracking-tight text-foreground md:text-5xl">
           Accountability Deep Dive
         </h1>
         <p className="mt-4 text-foreground/80">
@@ -140,7 +140,7 @@ export default async function GovernanceAccountabilityPage() {
           </ul>
         </section>
 
-        <section className="mt-4 rounded-xl border border-[#06D6A0]/30 bg-[#06D6A0]/10 p-5">
+        <section className="mt-4 rounded-xl border border-primary/30 bg-primary/10 p-5">
           <h2 className="text-xl font-semibold">Human-in-the-loop gate design</h2>
           <p className="mt-2 text-sm text-foreground/80">
             Use risk-tiered gates so low-risk actions flow automatically and high-impact actions pause
diff --git a/src/app/governance/page.tsx b/src/app/governance/page.tsx
index 05ef2134..23cab268 100644
--- a/src/app/governance/page.tsx
+++ b/src/app/governance/page.tsx
@@ -40,9 +40,9 @@ export default async function GovernancePage() {
 
   if (!data) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a]">
+      <div className="min-h-screen bg-background">
         <section className="mx-auto max-w-5xl px-4 py-16">
-          <h1 className="text-4xl font-bold tracking-tight text-[#F8FAFC] md:text-5xl">
+          <h1 className="text-4xl font-bold tracking-tight text-foreground md:text-5xl">
             Agent Governance Framework
           </h1>
           <p className="mt-4 text-foreground/80">Governance framework data is temporarily unavailable.</p>
@@ -52,10 +52,10 @@ export default async function GovernancePage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="mx-auto max-w-5xl px-4 py-16">
-        <p className="text-sm text-[#06D6A0]">Governance Framework Hub</p>
-        <h1 className="mt-3 text-4xl font-bold tracking-tight text-[#F8FAFC] md:text-5xl">{data.overview.title}</h1>
+        <p className="text-sm text-primary">Governance Framework Hub</p>
+        <h1 className="mt-3 text-4xl font-bold tracking-tight text-foreground md:text-5xl">{data.overview.title}</h1>
         <p className="mt-4 max-w-3xl text-foreground/80">
           {data.overview.description} Governance isn't optional once agents can act independently.
         </p>
@@ -74,7 +74,7 @@ export default async function GovernancePage() {
           <div className="mt-5 grid gap-4 md:grid-cols-2">
             {data.pillars.map((pillar) => (
               <article key={pillar.slug} className="rounded-xl border border-white/10 bg-card/30 p-5">
-                <h3 className="text-xl font-semibold text-[#06D6A0]">{pillar.title}</h3>
+                <h3 className="text-xl font-semibold text-primary">{pillar.title}</h3>
                 <p className="mt-2 text-sm text-foreground/80">{pillar.description}</p>
 
                 <div className="mt-4">
@@ -108,10 +108,10 @@ export default async function GovernancePage() {
         />
 
         <div className="mt-10 flex flex-wrap gap-4 text-sm">
-          <Link href="/governance/accountability" className="text-[#06D6A0] hover:underline">
+          <Link href="/governance/accountability" className="text-primary hover:underline">
             Accountability deep dive →
           </Link>
-          <Link href="/governance/safety" className="text-[#06D6A0] hover:underline">
+          <Link href="/governance/safety" className="text-primary hover:underline">
             Safety patterns →
           </Link>
         </div>
diff --git a/src/app/governance/safety/page.tsx b/src/app/governance/safety/page.tsx
index dada50fd..76e6f231 100644
--- a/src/app/governance/safety/page.tsx
+++ b/src/app/governance/safety/page.tsx
@@ -64,12 +64,12 @@ export default async function GovernanceSafetyPage() {
 
   if (!data) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a]">
+      <div className="min-h-screen bg-background">
         <section className="mx-auto max-w-5xl px-4 py-16">
-          <Link href="/governance" className="text-sm text-[#06D6A0] hover:underline">
+          <Link href="/governance" className="text-sm text-primary hover:underline">
             ← Back to governance hub
           </Link>
-          <h1 className="mt-4 text-4xl font-bold tracking-tight text-[#F8FAFC] md:text-5xl">Safety Patterns</h1>
+          <h1 className="mt-4 text-4xl font-bold tracking-tight text-foreground md:text-5xl">Safety Patterns</h1>
           <p className="mt-4 text-foreground/80">Safety data is temporarily unavailable.</p>
         </section>
       </div>
@@ -77,12 +77,12 @@ export default async function GovernanceSafetyPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="mx-auto max-w-5xl px-4 py-16">
-        <Link href="/governance" className="text-sm text-[#06D6A0] hover:underline">
+        <Link href="/governance" className="text-sm text-primary hover:underline">
           ← Back to governance hub
         </Link>
-        <h1 className="mt-4 text-4xl font-bold tracking-tight text-[#F8FAFC] md:text-5xl">
+        <h1 className="mt-4 text-4xl font-bold tracking-tight text-foreground md:text-5xl">
           Safety Patterns
         </h1>
         <p className="mt-4 text-foreground/80">
@@ -129,7 +129,7 @@ export default async function GovernanceSafetyPage() {
           </div>
         </section>
 
-        <section className="mt-4 rounded-xl border border-[#06D6A0]/30 bg-[#06D6A0]/10 p-5">
+        <section className="mt-4 rounded-xl border border-primary/30 bg-primary/10 p-5">
           <h2 className="text-xl font-semibold">Incident response playbook template</h2>
           <ul className="mt-3 list-disc space-y-2 pl-5 text-sm text-foreground/80">
             {data.safety.incidentResponseTemplate.map((item) => (
diff --git a/src/app/guides/[slug]/guide-detail-client.tsx b/src/app/guides/[slug]/guide-detail-client.tsx
index bed47f70..9315bc00 100644
--- a/src/app/guides/[slug]/guide-detail-client.tsx
+++ b/src/app/guides/[slug]/guide-detail-client.tsx
@@ -94,16 +94,16 @@ export function GuideDetailClient({ slug }: { slug: string }) {
   }
 
   if (loading) {
-    return <div className="min-h-screen bg-[#0a0a0a] py-20 text-center text-gray-400">Loading guide…</div>;
+    return <div className="min-h-screen bg-background py-20 text-center text-gray-400">Loading guide…</div>;
   }
 
   if (error || !guide) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a] py-20 text-center">
+      <div className="min-h-screen bg-background py-20 text-center">
         <p className="text-rose-400 mb-4">{error ?? "Guide not found."}</p>
         <Link
           href="/guides"
-          className="inline-flex px-4 py-2 bg-[#06D6A0] text-black rounded-lg font-semibold"
+          className="inline-flex px-4 py-2 bg-primary text-black rounded-lg font-semibold"
         >
           Back to Guides
         </Link>
@@ -112,15 +112,15 @@ export function GuideDetailClient({ slug }: { slug: string }) {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
-      <div className="border-b border-white/10 bg-[#0a0a0a]/80 backdrop-blur-sm">
+    <div className="min-h-screen bg-background">
+      <div className="border-b border-white/10 bg-background/80 backdrop-blur-sm">
         <div className="max-w-4xl mx-auto px-4 py-3">
           <div className="flex items-center gap-2 text-sm text-gray-500">
-            <Link href="/" className="hover:text-[#06D6A0] transition-colors">
+            <Link href="/" className="hover:text-primary transition-colors">
               Home
             </Link>
             <span>/</span>
-            <Link href="/guides" className="hover:text-[#06D6A0] transition-colors">
+            <Link href="/guides" className="hover:text-primary transition-colors">
               Guides
             </Link>
             <span>/</span>
@@ -153,14 +153,14 @@ export function GuideDetailClient({ slug }: { slug: string }) {
         <GuideContent markdown={guide.content} />
 
         <div className="mt-10 pt-6 border-t border-white/10 flex items-center justify-between gap-4">
-          <Link href="/guides" className="text-sm text-[#06D6A0] hover:underline">
+          <Link href="/guides" className="text-sm text-primary hover:underline">
             ← Back to all guides
           </Link>
           <button
             type="button"
             disabled={markingRead}
             onClick={markAsRead}
-            className="px-4 py-2 bg-[#06D6A0] text-black font-semibold rounded-lg disabled:opacity-60"
+            className="px-4 py-2 bg-primary text-black font-semibold rounded-lg disabled:opacity-60"
           >
             {markingRead ? "Saving…" : "Mark as Read"}
           </button>
diff --git a/src/app/guides/kit-integration/page.tsx b/src/app/guides/kit-integration/page.tsx
index f85292d1..25db8129 100644
--- a/src/app/guides/kit-integration/page.tsx
+++ b/src/app/guides/kit-integration/page.tsx
@@ -28,10 +28,10 @@ export default async function KitIntegrationGuidePage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <article className="max-w-4xl mx-auto px-4 py-12">
         <div className="mb-4">
-          <Link href="/guides" className="text-sm text-gray-400 hover:text-[#06D6A0] transition-colors">
+          <Link href="/guides" className="text-sm text-gray-400 hover:text-primary transition-colors">
             ← Back to Guides
           </Link>
         </div>
diff --git a/src/app/guides/page.tsx b/src/app/guides/page.tsx
index 192a29e5..6594626d 100644
--- a/src/app/guides/page.tsx
+++ b/src/app/guides/page.tsx
@@ -114,7 +114,7 @@ export default function GuidesPage() {
   }, [query]);
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="max-w-6xl mx-auto px-4 py-16 text-center">
         <h1 className="text-4xl md:text-5xl font-bold mb-4 text-white">📖 Agent Guides</h1>
         <p className="text-lg text-gray-400 max-w-2xl mx-auto">
@@ -130,7 +130,7 @@ export default function GuidesPage() {
             placeholder="Search guides..."
             value={searchQuery}
             onChange={(event) => setSearchQuery(event.target.value)}
-            className="w-full px-4 py-3 pl-11 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-[#06D6A0]/50 transition-colors"
+            className="w-full px-4 py-3 pl-11 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary/50 transition-colors"
           />
           <svg
             className="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500"
@@ -156,8 +156,8 @@ export default function GuidesPage() {
               onClick={() => setSelectedDifficulty(difficulty.id)}
               className={`px-3 py-2 rounded-lg font-medium text-sm transition-all ${
                 selectedDifficulty === difficulty.id
-                  ? "bg-[#06D6A0]/10 text-[#06D6A0] border border-[#06D6A0]/30"
-                  : "bg-white/5 text-gray-400 border border-white/10 hover:border-[#06D6A0]/30 hover:text-gray-300"
+                  ? "bg-primary/10 text-primary border border-primary/30"
+                  : "bg-white/5 text-gray-400 border border-white/10 hover:border-primary/30 hover:text-gray-300"
               }`}
             >
               {difficulty.label}
@@ -174,8 +174,8 @@ export default function GuidesPage() {
               onClick={() => setSelectedCategory(category.id)}
               className={`px-4 py-2 rounded-lg font-medium text-sm transition-all ${
                 selectedCategory === category.id
-                  ? "bg-[#06D6A0]/10 text-[#06D6A0] border border-[#06D6A0]/30"
-                  : "bg-white/5 text-gray-400 border border-white/10 hover:border-[#06D6A0]/30 hover:text-gray-300"
+                  ? "bg-primary/10 text-primary border border-primary/30"
+                  : "bg-white/5 text-gray-400 border border-white/10 hover:border-primary/30 hover:text-gray-300"
               }`}
             >
               <span className="mr-1.5">{category.icon}</span>
@@ -193,7 +193,7 @@ export default function GuidesPage() {
             <p className="text-rose-400 mb-4">{error}</p>
             <button
               onClick={() => window.location.reload()}
-              className="px-4 py-2 bg-[#06D6A0] text-black rounded-lg font-semibold"
+              className="px-4 py-2 bg-primary text-black rounded-lg font-semibold"
             >
               Retry
             </button>
@@ -211,10 +211,10 @@ export default function GuidesPage() {
                   <Link
                     key={guide.slug}
                     href={`/guides/${guide.slug}`}
-                    className="group bg-white/5 border border-white/10 rounded-xl p-6 hover:border-[#06D6A0]/30 hover:bg-white/[0.07] transition-all"
+                    className="group bg-white/5 border border-white/10 rounded-xl p-6 hover:border-primary/30 hover:bg-white/[0.07] transition-all"
                   >
                     <div className="text-4xl mb-4">{category?.icon ?? "📘"}</div>
-                    <h3 className="text-xl font-bold text-white mb-2 group-hover:text-[#06D6A0] transition-colors">
+                    <h3 className="text-xl font-bold text-white mb-2 group-hover:text-primary transition-colors">
                       {guide.title}
                     </h3>
                     <p className="text-sm text-gray-400 mb-4 line-clamp-3">{guide.description}</p>
diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx
index 38041bc1..0a95892d 100644
--- a/src/app/history/page.tsx
+++ b/src/app/history/page.tsx
@@ -63,12 +63,12 @@ export default function HistoryPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <div className="max-w-6xl mx-auto px-6 py-12">
         <div className="mb-8">
           <Link
             href="/"
-            className="text-[#06D6A0] hover:underline text-sm mb-4 inline-block"
+            className="text-primary hover:underline text-sm mb-4 inline-block"
           >
             ← Back to Skills
           </Link>
@@ -86,7 +86,7 @@ export default function HistoryPage() {
                   onClick={() => setFilter('today')}
                   className={`px-4 py-2 rounded ${
                     filter === 'today'
-                      ? 'bg-[#06D6A0] text-black'
+                      ? 'bg-primary text-black'
                       : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
                   }`}
                 >
@@ -96,7 +96,7 @@ export default function HistoryPage() {
                   onClick={() => setFilter('week')}
                   className={`px-4 py-2 rounded ${
                     filter === 'week'
-                      ? 'bg-[#06D6A0] text-black'
+                      ? 'bg-primary text-black'
                       : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
                   }`}
                 >
@@ -106,7 +106,7 @@ export default function HistoryPage() {
                   onClick={() => setFilter('all')}
                   className={`px-4 py-2 rounded ${
                     filter === 'all'
-                      ? 'bg-[#06D6A0] text-black'
+                      ? 'bg-primary text-black'
                       : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
                   }`}
                 >
@@ -150,11 +150,11 @@ export default function HistoryPage() {
                 {filteredHistory.map((entry, index) => (
                   <div
                     key={index}
-                    className="bg-gray-900 border border-gray-800 rounded-lg p-6 hover:border-[#06D6A0] transition-colors"
+                    className="bg-gray-900 border border-gray-800 rounded-lg p-6 hover:border-primary transition-colors"
                   >
                     <div className="flex justify-between items-start mb-3">
                       <div>
-                        <h3 className="text-xl font-semibold text-[#06D6A0] mb-1">
+                        <h3 className="text-xl font-semibold text-primary mb-1">
                           {entry.skillName}
                         </h3>
                         <p className="text-sm text-gray-400">
@@ -163,7 +163,7 @@ export default function HistoryPage() {
                       </div>
                       <button
                         onClick={() => copyToClipboard(entry.installCommand, index)}
-                        className="px-4 py-2 bg-[#06D6A0] hover:bg-[#05c090] text-black rounded font-medium transition-colors"
+                        className="px-4 py-2 bg-primary hover:bg-primary/80 text-black rounded font-medium transition-colors"
                       >
                         {copiedIndex === index ? 'Copied!' : 'Copy Again'}
                       </button>
@@ -205,7 +205,7 @@ export default function HistoryPage() {
             </p>
             <Link
               href="/"
-              className="inline-block px-6 py-3 bg-[#06D6A0] hover:bg-[#05c090] text-black rounded font-medium transition-colors"
+              className="inline-block px-6 py-3 bg-primary hover:bg-primary/80 text-black rounded font-medium transition-colors"
             >
               Browse Skills
             </Link>
diff --git a/src/app/hosting/cloud/page.tsx b/src/app/hosting/cloud/page.tsx
index 6ac39459..37bb4519 100644
--- a/src/app/hosting/cloud/page.tsx
+++ b/src/app/hosting/cloud/page.tsx
@@ -540,12 +540,12 @@ export default function CloudHostingPage() {
   const platform = platforms.find((p) => p.id === selectedPlatform) || platforms[3];
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero */}
       <section className="max-w-6xl mx-auto px-4 py-16 text-center">
         <Link
           href="/hosting"
-          className="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-[#06D6A0] mb-6 transition-colors"
+          className="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-primary mb-6 transition-colors"
         >
           ← Back to Hosting Overview
         </Link>
@@ -565,7 +565,7 @@ export default function CloudHostingPage() {
               onClick={() => setSelectedPlatform(p.id)}
               className={`px-4 py-2 rounded-lg border transition-all ${
                 selectedPlatform === p.id
-                  ? "bg-[#06D6A0]/10 border-[#06D6A0] text-white"
+                  ? "bg-primary/10 border-primary text-white"
                   : "bg-gray-900/50 border-gray-800 text-gray-400 hover:border-gray-700"
               }`}
             >
@@ -620,7 +620,7 @@ export default function CloudHostingPage() {
               {platform.pricing.map((tier, i) => (
                 <div key={i} className="p-4 rounded-lg bg-gray-800/50 border border-gray-700">
                   <h4 className="font-semibold text-white mb-1">{tier.tier}</h4>
-                  <p className="text-lg text-[#06D6A0] mb-3">{tier.cost}</p>
+                  <p className="text-lg text-primary mb-3">{tier.cost}</p>
                   <ul className="space-y-1">
                     {tier.includes.map((item, j) => (
                       <li key={j} className="text-xs text-gray-400 flex items-start gap-1">
@@ -643,7 +643,7 @@ export default function CloudHostingPage() {
               <ol className="space-y-2">
                 {platform.quickStart.steps.map((step, i) => (
                   <li key={i} className="flex items-start gap-3 text-sm text-gray-300">
-                    <span className="flex items-center justify-center w-6 h-6 rounded-full bg-[#06D6A0]/10 text-[#06D6A0] font-semibold flex-shrink-0">
+                    <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary/10 text-primary font-semibold flex-shrink-0">
                       {i + 1}
                     </span>
                     {step}
@@ -682,25 +682,25 @@ export default function CloudHostingPage() {
             <div className="grid grid-cols-3 gap-4 text-sm text-gray-400 p-3 bg-gray-800/30 rounded">
               <div>Light (personal assistant)</div>
               <div>512 MB RAM, low traffic</div>
-              <div className="text-[#06D6A0]">$5-10/mo</div>
+              <div className="text-primary">$5-10/mo</div>
             </div>
 
             <div className="grid grid-cols-3 gap-4 text-sm text-gray-400 p-3 bg-gray-800/30 rounded">
               <div>Medium (team agent)</div>
               <div>1-2 GB RAM, moderate traffic</div>
-              <div className="text-[#06D6A0]">$15-30/mo</div>
+              <div className="text-primary">$15-30/mo</div>
             </div>
 
             <div className="grid grid-cols-3 gap-4 text-sm text-gray-400 p-3 bg-gray-800/30 rounded">
               <div>Heavy (production)</div>
               <div>4 GB RAM, high availability</div>
-              <div className="text-[#06D6A0]">$50-100/mo</div>
+              <div className="text-primary">$50-100/mo</div>
             </div>
 
             <div className="grid grid-cols-3 gap-4 text-sm text-gray-400 p-3 bg-gray-800/30 rounded">
               <div>Serverless (sporadic)</div>
               <div>On-demand, &lt;1M requests/mo</div>
-              <div className="text-[#06D6A0]">Free - $5/mo</div>
+              <div className="text-primary">Free - $5/mo</div>
             </div>
           </div>
 
@@ -715,7 +715,7 @@ export default function CloudHostingPage() {
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <Link
             href="/hosting/containers"
-            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <div className="text-3xl mb-3">🐳</div>
             <h3 className="text-lg font-semibold text-white mb-2">Containerize Your Agent</h3>
@@ -726,7 +726,7 @@ export default function CloudHostingPage() {
 
           <Link
             href="/security"
-            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <div className="text-3xl mb-3">🔒</div>
             <h3 className="text-lg font-semibold text-white mb-2">Secure Your Deployment</h3>
diff --git a/src/app/hosting/containers/page.tsx b/src/app/hosting/containers/page.tsx
index 4f3ad79c..b601b419 100644
--- a/src/app/hosting/containers/page.tsx
+++ b/src/app/hosting/containers/page.tsx
@@ -437,12 +437,12 @@ export default function ContainersPage() {
   const compose = composeExamples.find((c) => c.id === selectedCompose) || composeExamples[0];
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero */}
       <section className="max-w-6xl mx-auto px-4 py-16 text-center">
         <Link
           href="/hosting"
-          className="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-[#06D6A0] mb-6 transition-colors"
+          className="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-primary mb-6 transition-colors"
         >
           ← Back to Hosting Overview
         </Link>
@@ -492,7 +492,7 @@ export default function ContainersPage() {
               onClick={() => setSelectedTemplate(t.id)}
               className={`px-4 py-2 rounded-lg border transition-all ${
                 selectedTemplate === t.id
-                  ? "bg-[#06D6A0]/10 border-[#06D6A0] text-white"
+                  ? "bg-primary/10 border-primary text-white"
                   : "bg-gray-900/50 border-gray-800 text-gray-400 hover:border-gray-700"
               }`}
             >
@@ -530,7 +530,7 @@ export default function ContainersPage() {
               onClick={() => setSelectedCompose(c.id)}
               className={`px-4 py-2 rounded-lg border transition-all ${
                 selectedCompose === c.id
-                  ? "bg-[#06D6A0]/10 border-[#06D6A0] text-white"
+                  ? "bg-primary/10 border-primary text-white"
                   : "bg-gray-900/50 border-gray-800 text-gray-400 hover:border-gray-700"
               }`}
             >
@@ -577,23 +577,23 @@ export default function ContainersPage() {
             <h3 className="text-lg font-semibold text-white mb-4">🎯 Image Optimization</h3>
             <ul className="space-y-2 text-sm text-gray-300">
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Use Alpine Linux for smaller images (~5MB base)</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Multi-stage builds to exclude build tools</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Copy package files first for better layer caching</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Use .dockerignore to exclude unnecessary files</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Clean package manager caches in same RUN layer</span>
               </li>
             </ul>
@@ -603,23 +603,23 @@ export default function ContainersPage() {
             <h3 className="text-lg font-semibold text-white mb-4">🔒 Security</h3>
             <ul className="space-y-2 text-sm text-gray-300">
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Run as non-root user (USER directive)</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Don&apos;t hardcode secrets (use env vars or secrets)</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Scan images for vulnerabilities (trivy, snyk)</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Use official base images from trusted sources</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Limit container capabilities and resources</span>
               </li>
             </ul>
@@ -629,23 +629,23 @@ export default function ContainersPage() {
             <h3 className="text-lg font-semibold text-white mb-4">📊 Resource Limits</h3>
             <ul className="space-y-2 text-sm text-gray-300">
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Set memory limits to prevent OOM kills</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Define CPU limits for fair resource sharing</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Use health checks for automatic restarts</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Configure restart policies (unless-stopped)</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Monitor resource usage in production</span>
               </li>
             </ul>
@@ -655,23 +655,23 @@ export default function ContainersPage() {
             <h3 className="text-lg font-semibold text-white mb-4">💾 Data Persistence</h3>
             <ul className="space-y-2 text-sm text-gray-300">
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Use volumes for persistent data</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Named volumes for better management</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Bind mounts for development only</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Back up volumes regularly</span>
               </li>
               <li className="flex items-start gap-2">
-                <span className="text-[#06D6A0] mt-1">→</span>
+                <span className="text-primary mt-1">→</span>
                 <span>Consider external storage for production</span>
               </li>
             </ul>
@@ -732,7 +732,7 @@ docker pull registry.example.com/agent:v1.0`}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <Link
             href="/hosting/cloud"
-            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <div className="text-3xl mb-3">☁️</div>
             <h3 className="text-lg font-semibold text-white mb-2">Deploy to Cloud</h3>
@@ -743,7 +743,7 @@ docker pull registry.example.com/agent:v1.0`}
 
           <Link
             href="/guides"
-            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <div className="text-3xl mb-3">📖</div>
             <h3 className="text-lg font-semibold text-white mb-2">CI/CD Integration</h3>
diff --git a/src/app/hosting/local/page.tsx b/src/app/hosting/local/page.tsx
index 2802cbe7..70a52b92 100644
--- a/src/app/hosting/local/page.tsx
+++ b/src/app/hosting/local/page.tsx
@@ -365,12 +365,12 @@ export default function LocalHostingPage() {
   const setup = setups.find((s) => s.id === selectedSetup) || setups[0];
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero */}
       <section className="max-w-6xl mx-auto px-4 py-16 text-center">
         <Link
           href="/hosting"
-          className="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-[#06D6A0] mb-6 transition-colors"
+          className="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-primary mb-6 transition-colors"
         >
           ← Back to Hosting Overview
         </Link>
@@ -389,7 +389,7 @@ export default function LocalHostingPage() {
               onClick={() => setSelectedSetup(s.id)}
               className={`px-4 py-2 rounded-lg border transition-all ${
                 selectedSetup === s.id
-                  ? "bg-[#06D6A0]/10 border-[#06D6A0] text-white"
+                  ? "bg-primary/10 border-primary text-white"
                   : "bg-gray-900/50 border-gray-800 text-gray-400 hover:border-gray-700"
               }`}
             >
@@ -475,7 +475,7 @@ export default function LocalHostingPage() {
               <ol className="space-y-2">
                 {setup.installation.steps.map((step, i) => (
                   <li key={i} className="flex items-start gap-3 text-sm text-gray-300">
-                    <span className="flex items-center justify-center w-6 h-6 rounded-full bg-[#06D6A0]/10 text-[#06D6A0] font-semibold flex-shrink-0">
+                    <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary/10 text-primary font-semibold flex-shrink-0">
                       {i + 1}
                     </span>
                     {step}
@@ -507,7 +507,7 @@ export default function LocalHostingPage() {
               <ul className="space-y-2">
                 {platform.tips.map((tip, i) => (
                   <li key={i} className="text-sm text-gray-400 flex items-start gap-2">
-                    <span className="text-[#06D6A0] mt-1">→</span>
+                    <span className="text-primary mt-1">→</span>
                     <span>{tip}</span>
                   </li>
                 ))}
@@ -631,7 +631,7 @@ df -h`}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <Link
             href="/hosting/containers"
-            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <div className="text-3xl mb-3">🐳</div>
             <h3 className="text-lg font-semibold text-white mb-2">Containerize Your Agent</h3>
@@ -642,7 +642,7 @@ df -h`}
 
           <Link
             href="/guides"
-            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <div className="text-3xl mb-3">📖</div>
             <h3 className="text-lg font-semibold text-white mb-2">Agent Configuration</h3>
diff --git a/src/app/hosting/page.tsx b/src/app/hosting/page.tsx
index bdd3a5ca..b8511f7a 100644
--- a/src/app/hosting/page.tsx
+++ b/src/app/hosting/page.tsx
@@ -175,7 +175,7 @@ export default function HostingPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(webPageJsonLd) }}
@@ -185,7 +185,7 @@ export default function HostingPage() {
       <section className="max-w-6xl mx-auto px-4 py-16 text-center">
         <div className="relative">
           <div className="absolute inset-0 -z-10 opacity-30">
-            <div className="absolute top-0 left-1/3 w-96 h-96 bg-[#06D6A0]/20 rounded-full blur-[120px]" />
+            <div className="absolute top-0 left-1/3 w-96 h-96 bg-primary/20 rounded-full blur-[120px]" />
             <div className="absolute bottom-0 right-1/3 w-80 h-80 bg-blue-500/20 rounded-full blur-[100px]" />
           </div>
 
@@ -207,10 +207,10 @@ export default function HostingPage() {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <Link
             href="/hosting/cloud"
-            className="group p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="group p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <div className="text-3xl mb-3">☁️</div>
-            <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-[#06D6A0] transition-colors">
+            <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-primary transition-colors">
               Cloud Deployment
             </h3>
             <p className="text-sm text-gray-400">
@@ -220,10 +220,10 @@ export default function HostingPage() {
 
           <Link
             href="/hosting/local"
-            className="group p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="group p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <div className="text-3xl mb-3">💻</div>
-            <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-[#06D6A0] transition-colors">
+            <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-primary transition-colors">
               Local Setup
             </h3>
             <p className="text-sm text-gray-400">
@@ -233,10 +233,10 @@ export default function HostingPage() {
 
           <Link
             href="/hosting/containers"
-            className="group p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="group p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <div className="text-3xl mb-3">🐳</div>
-            <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-[#06D6A0] transition-colors">
+            <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-primary transition-colors">
               Docker & Containers
             </h3>
             <p className="text-sm text-gray-400">
@@ -260,7 +260,7 @@ export default function HostingPage() {
               onClick={() => setFilterType(filter.id as "all" | "local" | "cloud" | "serverless")}
               className={`px-4 py-2 rounded-lg border transition-all ${
                 filterType === filter.id
-                  ? "bg-[#06D6A0]/10 border-[#06D6A0] text-[#06D6A0]"
+                  ? "bg-primary/10 border-primary text-primary"
                   : "bg-gray-900/50 border-gray-800 text-gray-400 hover:border-gray-700"
               }`}
             >
@@ -278,12 +278,12 @@ export default function HostingPage() {
             <Link
               key={option.name}
               href={option.link}
-              className="group p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+              className="group p-6 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
             >
               <div className="flex items-start gap-4 mb-4">
                 <div className="text-4xl">{option.icon}</div>
                 <div className="flex-1">
-                  <h3 className="text-lg font-semibold text-white mb-1 group-hover:text-[#06D6A0] transition-colors">
+                  <h3 className="text-lg font-semibold text-white mb-1 group-hover:text-primary transition-colors">
                     {option.name}
                   </h3>
                   <p className="text-sm text-gray-400">{option.description}</p>
@@ -340,7 +340,7 @@ export default function HostingPage() {
               <div>
                 <h3 className="font-semibold text-white mb-1">Just getting started?</h3>
                 <p className="text-sm text-gray-400">
-                  Start with <Link href="/hosting/local" className="text-[#06D6A0] hover:underline">local setup</Link> 
+                  Start with <Link href="/hosting/local" className="text-primary hover:underline">local setup</Link> 
                   {" "}(OpenClaw or LangChain) for zero cost and full control while learning.
                 </p>
               </div>
@@ -351,8 +351,8 @@ export default function HostingPage() {
               <div>
                 <h3 className="font-semibold text-white mb-1">Need production reliability?</h3>
                 <p className="text-sm text-gray-400">
-                  Go with <Link href="/hosting/cloud#railway" className="text-[#06D6A0] hover:underline">Railway</Link>
-                  {" "}or <Link href="/hosting/cloud#flyio" className="text-[#06D6A0] hover:underline">Fly.io</Link>
+                  Go with <Link href="/hosting/cloud#railway" className="text-primary hover:underline">Railway</Link>
+                  {" "}or <Link href="/hosting/cloud#flyio" className="text-primary hover:underline">Fly.io</Link>
                   {" "}for simple deployment with high uptime.
                 </p>
               </div>
@@ -363,9 +363,9 @@ export default function HostingPage() {
               <div>
                 <h3 className="font-semibold text-white mb-1">Enterprise requirements?</h3>
                 <p className="text-sm text-gray-400">
-                  Choose <Link href="/hosting/cloud#aws" className="text-[#06D6A0] hover:underline">AWS</Link>, 
-                  {" "}<Link href="/hosting/cloud#gcp" className="text-[#06D6A0] hover:underline">GCP</Link>, or
-                  {" "}<Link href="/hosting/cloud#azure" className="text-[#06D6A0] hover:underline">Azure</Link>
+                  Choose <Link href="/hosting/cloud#aws" className="text-primary hover:underline">AWS</Link>, 
+                  {" "}<Link href="/hosting/cloud#gcp" className="text-primary hover:underline">GCP</Link>, or
+                  {" "}<Link href="/hosting/cloud#azure" className="text-primary hover:underline">Azure</Link>
                   {" "}for compliance, SLAs, and advanced infrastructure.
                 </p>
               </div>
@@ -376,7 +376,7 @@ export default function HostingPage() {
               <div>
                 <h3 className="font-semibold text-white mb-1">Optimizing for cost?</h3>
                 <p className="text-sm text-gray-400">
-                  Use <Link href="/hosting/cloud#lambda" className="text-[#06D6A0] hover:underline">serverless</Link>
+                  Use <Link href="/hosting/cloud#lambda" className="text-primary hover:underline">serverless</Link>
                   {" "}(Lambda, Cloud Functions) for sporadic workloads that don&apos;t need 24/7 uptime.
                 </p>
               </div>
@@ -387,7 +387,7 @@ export default function HostingPage() {
               <div>
                 <h3 className="font-semibold text-white mb-1">Privacy-first or air-gapped?</h3>
                 <p className="text-sm text-gray-400">
-                  Stick with <Link href="/hosting/local" className="text-[#06D6A0] hover:underline">local hosting</Link>
+                  Stick with <Link href="/hosting/local" className="text-primary hover:underline">local hosting</Link>
                   {" "}— nothing beats running on your own hardware for data sovereignty.
                 </p>
               </div>
@@ -402,7 +402,7 @@ export default function HostingPage() {
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <Link
             href="/guides"
-            className="p-4 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="p-4 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <h3 className="font-semibold text-white mb-2">📖 Deployment Guides</h3>
             <p className="text-sm text-gray-400">
@@ -412,7 +412,7 @@ export default function HostingPage() {
 
           <Link
             href="/security"
-            className="p-4 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="p-4 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <h3 className="font-semibold text-white mb-2">🔒 Security Best Practices</h3>
             <p className="text-sm text-gray-400">
@@ -422,7 +422,7 @@ export default function HostingPage() {
 
           <Link
             href="/monitoring"
-            className="p-4 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="p-4 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <h3 className="font-semibold text-white mb-2">📊 Monitoring & Observability</h3>
             <p className="text-sm text-gray-400">
@@ -432,7 +432,7 @@ export default function HostingPage() {
 
           <Link
             href="/benchmarks"
-            className="p-4 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-[#06D6A0]/50 transition-all"
+            className="p-4 rounded-lg border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-primary/50 transition-all"
           >
             <h3 className="font-semibold text-white mb-2">⚡ Performance Benchmarks</h3>
             <p className="text-sm text-gray-400">
diff --git a/src/app/integrations/[slug]/integration-detail-client.tsx b/src/app/integrations/[slug]/integration-detail-client.tsx
index 912545ea..54795aea 100644
--- a/src/app/integrations/[slug]/integration-detail-client.tsx
+++ b/src/app/integrations/[slug]/integration-detail-client.tsx
@@ -192,7 +192,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center px-4">
+      <div className="min-h-screen bg-background flex items-center justify-center px-4">
         <p className="text-muted-foreground">Loading integration...</p>
       </div>
     );
@@ -200,7 +200,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
 
   if (!integration || error) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center px-4">
+      <div className="min-h-screen bg-background flex items-center justify-center px-4">
         <div className="text-center">
           <p className="text-red-400 mb-4">{error ?? "Integration not found."}</p>
           <Link
@@ -215,7 +215,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <div className="border-b border-white/5">
         <div className="max-w-4xl mx-auto px-4 py-4">
           <nav className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -234,7 +234,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
 
       <section className="relative overflow-hidden">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-16">
@@ -242,11 +242,11 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
             <span className="text-6xl">{integration.icon}</span>
             <div className="flex-1">
               <div className="flex items-center gap-3 mb-3">
-                <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC]">
+                <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground">
                   {integration.name}
                 </h1>
                 {integration.featured && (
-                  <Badge className="bg-[#06D6A0]/20 text-[#06D6A0] border-[#06D6A0]/30">
+                  <Badge className="bg-primary/20 text-primary border-primary/30">
                     ★ Featured
                   </Badge>
                 )}
@@ -273,7 +273,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
             <button
               onClick={handleInstall}
               disabled={isInstalling}
-              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all disabled:opacity-60"
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all disabled:opacity-60"
             >
               {isInstalling ? "Installing..." : "Install"}
             </button>
@@ -294,7 +294,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
           </div>
 
           {(successMessage || error) && (
-            <p className={`mt-4 text-sm ${error ? "text-red-400" : "text-[#06D6A0]"}`}>
+            <p className={`mt-4 text-sm ${error ? "text-red-400" : "text-primary"}`}>
               {error ?? successMessage}
             </p>
           )}
@@ -313,7 +313,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
             <ol className="space-y-4">
               {integration.steps.map((step, index) => (
                 <li key={step} className="flex gap-4">
-                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-[#06D6A0]/20 text-[#06D6A0] flex items-center justify-center font-bold text-sm">
+                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/20 text-primary flex items-center justify-center font-bold text-sm">
                     {index + 1}
                   </div>
                   <p className="flex-1 text-foreground/90 pt-1">{step}</p>
@@ -337,7 +337,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
               <div className="bg-black/40 rounded-lg p-4 font-mono text-sm">
                 {integration.requiredEnvVars.map((envVar) => (
                   <div key={envVar} className="py-1">
-                    <span className="text-[#06D6A0]">{envVar}</span>
+                    <span className="text-primary">{envVar}</span>
                     <span className="text-muted-foreground">=your_value_here</span>
                   </div>
                 ))}
@@ -374,10 +374,10 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
           </CardHeader>
           <CardContent className="space-y-6">
             <div>
-              <h3 className="text-sm font-semibold mb-2 text-[#06D6A0]">Required keys</h3>
+              <h3 className="text-sm font-semibold mb-2 text-primary">Required keys</h3>
               <div className="flex flex-wrap gap-2">
                 {integration.configSchemaHints.required.map((key) => (
-                  <Badge key={key} variant="outline" className="border-[#06D6A0]/30 text-[#06D6A0]">
+                  <Badge key={key} variant="outline" className="border-primary/30 text-primary">
                     {key}
                   </Badge>
                 ))}
@@ -403,7 +403,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
                 <div className="space-y-1 font-mono text-sm">
                   {sampleConfigEntries.map(([key, value]) => (
                     <p key={key}>
-                      <span className="text-[#06D6A0]">{key}</span>
+                      <span className="text-primary">{key}</span>
                       <span className="text-muted-foreground">: {value}</span>
                     </p>
                   ))}
@@ -456,7 +456,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
                   onClick={() => setSelectedRating(star)}
                   className={`px-3 py-1.5 rounded-md border text-sm transition-colors ${
                     selectedRating === star
-                      ? "border-[#06D6A0]/40 bg-[#06D6A0]/20 text-[#06D6A0]"
+                      ? "border-primary/40 bg-primary/20 text-primary"
                       : "border-white/15 text-muted-foreground hover:bg-white/5"
                   }`}
                 >
@@ -466,7 +466,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
               <button
                 onClick={handleSubmitRating}
                 disabled={!selectedRating || isSubmittingRating}
-                className="ml-2 px-4 py-1.5 rounded-md bg-[#06D6A0] text-[#0a0a0a] text-sm font-semibold disabled:opacity-60"
+                className="ml-2 px-4 py-1.5 rounded-md bg-primary text-background text-sm font-semibold disabled:opacity-60"
               >
                 {isSubmittingRating ? "Submitting..." : "Submit rating"}
               </button>
@@ -479,7 +479,7 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
       </section>
 
       <section className="max-w-4xl mx-auto px-4 pb-16">
-        <Card className="bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5 border-[#06D6A0]/20">
+        <Card className="bg-gradient-to-br from-primary/5 via-card/80 to-purple/5 border-primary/20">
           <CardHeader>
             <CardTitle className="text-2xl">Additional Resources</CardTitle>
           </CardHeader>
@@ -488,24 +488,24 @@ export function IntegrationDetailClient({ slug }: IntegrationDetailClientProps)
               href={integration.documentation}
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center justify-between p-4 rounded-lg bg-card/40 border border-white/10 hover:border-[#06D6A0]/30 transition-all group"
+              className="flex items-center justify-between p-4 rounded-lg bg-card/40 border border-white/10 hover:border-primary/30 transition-all group"
             >
               <div>
                 <p className="font-semibold text-foreground">Official Documentation</p>
                 <p className="text-sm text-muted-foreground">Complete API reference and guides</p>
               </div>
-              <span className="text-[#06D6A0] group-hover:translate-x-1 transition-transform">→</span>
+              <span className="text-primary group-hover:translate-x-1 transition-transform">→</span>
             </a>
 
             <Link
               href="/guides"
-              className="flex items-center justify-between p-4 rounded-lg bg-card/40 border border-white/10 hover:border-[#06D6A0]/30 transition-all group"
+              className="flex items-center justify-between p-4 rounded-lg bg-card/40 border border-white/10 hover:border-primary/30 transition-all group"
             >
               <div>
                 <p className="font-semibold text-foreground">forAgents.dev Guides</p>
                 <p className="text-sm text-muted-foreground">Learn how to build AI agents</p>
               </div>
-              <span className="text-[#06D6A0] group-hover:translate-x-1 transition-transform">→</span>
+              <span className="text-primary group-hover:translate-x-1 transition-transform">→</span>
             </Link>
           </CardContent>
         </Card>
diff --git a/src/app/integrations/page.tsx b/src/app/integrations/page.tsx
index 4d185e85..bbd55e74 100644
--- a/src/app/integrations/page.tsx
+++ b/src/app/integrations/page.tsx
@@ -97,15 +97,15 @@ export default function IntegrationsPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-20 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Platform Integrations
           </h1>
           <p className="text-xl text-foreground/80 mb-4">
@@ -117,7 +117,7 @@ export default function IntegrationsPage() {
               value={searchQuery}
               onChange={(event) => setSearchQuery(event.target.value)}
               placeholder="Search integrations, categories, or types..."
-              className="w-full rounded-lg border border-white/10 bg-card/40 px-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[#06D6A0]/40"
+              className="w-full rounded-lg border border-white/10 bg-card/40 px-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary/40"
             />
           </div>
         </div>
@@ -133,7 +133,7 @@ export default function IntegrationsPage() {
               onClick={() => setCategoryFilter(category)}
               className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                 categoryFilter === category
-                  ? "bg-[#06D6A0] text-[#0a0a0a]"
+                  ? "bg-primary text-background"
                   : "border border-white/10 text-foreground hover:bg-white/5"
               }`}
             >
@@ -169,8 +169,8 @@ export default function IntegrationsPage() {
                   href={`/integrations/${integration.slug}`}
                   className="block"
                 >
-                  <Card className="relative overflow-hidden bg-card/30 border-white/10 hover:border-[#06D6A0]/30 transition-all group h-full">
-                    <div className="absolute top-0 right-0 w-32 h-32 bg-[#06D6A0]/5 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity" />
+                  <Card className="relative overflow-hidden bg-card/30 border-white/10 hover:border-primary/30 transition-all group h-full">
+                    <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity" />
 
                     <CardHeader>
                       <div className="flex items-start justify-between gap-3 mb-2">
@@ -179,7 +179,7 @@ export default function IntegrationsPage() {
                           <div>
                             <CardTitle className="text-xl">{integration.name}</CardTitle>
                             {integration.featured && (
-                              <span className="text-xs text-[#06D6A0]">★ Featured</span>
+                              <span className="text-xs text-primary">★ Featured</span>
                             )}
                           </div>
                         </div>
@@ -200,7 +200,7 @@ export default function IntegrationsPage() {
                         <span>⬇ {integration.installCount.toLocaleString()} installs</span>
                         <span>⭐ {integration.rating.average.toFixed(1)} ({integration.rating.count})</span>
                       </div>
-                      <span className="inline-flex items-center gap-2 text-sm font-medium text-[#06D6A0] group-hover:underline">
+                      <span className="inline-flex items-center gap-2 text-sm font-medium text-primary group-hover:underline">
                         View details →
                       </span>
                     </CardContent>
@@ -221,8 +221,8 @@ export default function IntegrationsPage() {
       <Separator className="opacity-10" />
 
       <section className="max-w-4xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-[#06D6A0]/20 bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/10 rounded-full blur-[80px]" />
+        <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/5 via-card/80 to-purple/5">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[80px]" />
           <div className="absolute bottom-0 left-0 w-48 h-48 bg-purple/10 rounded-full blur-[60px]" />
 
           <div className="relative p-8 md:p-12 text-center">
@@ -235,7 +235,7 @@ export default function IntegrationsPage() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <Link
                 href="/contact"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 Request Integration →
               </Link>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0d192015..a4a8d0c1 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -79,7 +79,7 @@ export default function RootLayout({
   };
 
   return (
-    <html lang="en" className="dark">
+    <html lang="en" className="dark" data-theme="dark">
       <head>
         {/*
           If you're reading this, you're probably an agent.
@@ -111,7 +111,7 @@ export default function RootLayout({
         <ToastProvider>
           <a
             href="#main-content"
-            className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-cyan focus:text-[#0A0E17] focus:font-semibold focus:rounded-lg"
+            className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-cyan focus:text-background focus:font-semibold focus:rounded-lg"
           >
             Skip to main content
           </a>
diff --git a/src/app/leaderboard/agents/agent-leaderboard-client.tsx b/src/app/leaderboard/agents/agent-leaderboard-client.tsx
index 34208955..8dba1b1c 100644
--- a/src/app/leaderboard/agents/agent-leaderboard-client.tsx
+++ b/src/app/leaderboard/agents/agent-leaderboard-client.tsx
@@ -204,7 +204,7 @@ export function AgentLeaderboardClient({ agents }: AgentLeaderboardClientProps)
         <CardContent className="space-y-6">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <ScoreExplainer
-              icon={<TrendingUp className="w-5 h-5 text-[#06D6A0]" />}
+              icon={<TrendingUp className="w-5 h-5 text-primary" />}
               title="Composite Score"
               description="A weighted combination of all metrics that determines overall ranking. Trust (30%), Skills (25%), Downloads (20%), Rating (15%), and Streak (10%)."
             />
diff --git a/src/app/leaderboard/agents/page.tsx b/src/app/leaderboard/agents/page.tsx
index e8a02deb..c985c3fe 100644
--- a/src/app/leaderboard/agents/page.tsx
+++ b/src/app/leaderboard/agents/page.tsx
@@ -38,7 +38,7 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default function AgentLeaderboardPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <main className="max-w-7xl mx-auto px-4 py-12">
         <div className="mb-8">
           <h1 className="text-4xl font-bold">Agent Leaderboard</h1>
diff --git a/src/app/leaderboard/page.tsx b/src/app/leaderboard/page.tsx
index b1fc5679..8f87a92b 100644
--- a/src/app/leaderboard/page.tsx
+++ b/src/app/leaderboard/page.tsx
@@ -40,7 +40,7 @@ export default function LeaderboardPage() {
     .sort((a, b) => a.localeCompare(b));
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <main className="max-w-6xl mx-auto px-4 py-12">
         <div className="mb-8">
           <h1 className="text-3xl font-bold">Skill Leaderboard</h1>
diff --git a/src/app/learn/page.tsx b/src/app/learn/page.tsx
index e8cf3e14..fc7d87a1 100644
--- a/src/app/learn/page.tsx
+++ b/src/app/learn/page.tsx
@@ -201,7 +201,7 @@ export default function LearnPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(webPageJsonLd) }}
@@ -213,7 +213,7 @@ export default function LearnPage() {
         <div className="relative">
           {/* Subtle aurora background */}
           <div className="absolute inset-0 -z-10 opacity-30">
-            <div className="absolute top-0 left-1/3 w-96 h-96 bg-[#06D6A0]/20 rounded-full blur-[120px]" />
+            <div className="absolute top-0 left-1/3 w-96 h-96 bg-primary/20 rounded-full blur-[120px]" />
             <div className="absolute bottom-0 right-1/3 w-80 h-80 bg-purple/20 rounded-full blur-[100px]" />
           </div>
 
@@ -231,13 +231,13 @@ export default function LearnPage() {
           <div className="mt-8 max-w-md mx-auto">
             <div className="flex items-center justify-between text-sm mb-2">
               <span className="text-gray-400">Overall Progress</span>
-              <span className="text-[#06D6A0] font-semibold">
+              <span className="text-primary font-semibold">
                 {completedLessons.size} / {TRACKS.reduce((sum, track) => sum + track.lessons.length, 0)} lessons
               </span>
             </div>
             <div className="h-2 bg-white/5 rounded-full overflow-hidden">
               <div
-                className="h-full bg-gradient-to-r from-[#06D6A0] to-purple transition-all duration-500"
+                className="h-full bg-gradient-to-r from-primary to-purple transition-all duration-500"
                 style={{
                   width: `${Math.round(
                     (completedLessons.size / TRACKS.reduce((sum, track) => sum + track.lessons.length, 0)) * 100
@@ -251,7 +251,7 @@ export default function LearnPage() {
 
       {/* Recommended Path */}
       <section className="max-w-5xl mx-auto px-4 py-12">
-        <div className="bg-gradient-to-br from-[#06D6A0]/10 to-purple/10 border border-[#06D6A0]/20 rounded-xl p-6">
+        <div className="bg-gradient-to-br from-primary/10 to-purple/10 border border-primary/20 rounded-xl p-6">
           <div className="flex items-center gap-2 mb-4">
             <span className="text-2xl">🎯</span>
             <h2 className="text-2xl font-bold text-white">Recommended Learning Path</h2>
@@ -272,11 +272,11 @@ export default function LearnPage() {
                   key={`${item.trackId}-${item.lessonId}`}
                   className={`flex items-center gap-4 p-4 rounded-lg border transition-all ${
                     isCompleted
-                      ? "bg-[#06D6A0]/5 border-[#06D6A0]/30"
-                      : "bg-white/5 border-white/10 hover:border-[#06D6A0]/30"
+                      ? "bg-primary/5 border-primary/30"
+                      : "bg-white/5 border-white/10 hover:border-primary/30"
                   }`}
                 >
-                  <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[#06D6A0]/10 text-[#06D6A0] font-bold text-sm">
+                  <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary font-bold text-sm">
                     {item.order}
                   </div>
                   <div className="flex-1 min-w-0">
@@ -291,8 +291,8 @@ export default function LearnPage() {
                     onClick={() => toggleLesson(lesson.id)}
                     className={`flex items-center justify-center w-6 h-6 rounded border-2 transition-colors ${
                       isCompleted
-                        ? "bg-[#06D6A0] border-[#06D6A0]"
-                        : "bg-transparent border-gray-600 hover:border-[#06D6A0]"
+                        ? "bg-primary border-primary"
+                        : "bg-transparent border-gray-600 hover:border-primary"
                     }`}
                     aria-label={isCompleted ? "Mark as incomplete" : "Mark as complete"}
                   >
@@ -325,7 +325,7 @@ export default function LearnPage() {
             return (
               <div
                 key={track.id}
-                className="bg-white/5 border border-white/10 rounded-xl p-6 hover:border-[#06D6A0]/30 transition-all"
+                className="bg-white/5 border border-white/10 rounded-xl p-6 hover:border-primary/30 transition-all"
               >
                 {/* Track Header */}
                 <div className="flex items-start justify-between mb-6">
@@ -337,7 +337,7 @@ export default function LearnPage() {
                     </div>
                   </div>
                   <div className="text-right">
-                    <div className="text-2xl font-bold text-[#06D6A0]">{progress}%</div>
+                    <div className="text-2xl font-bold text-primary">{progress}%</div>
                     <div className="text-xs text-gray-500">Complete</div>
                   </div>
                 </div>
@@ -346,7 +346,7 @@ export default function LearnPage() {
                 <div className="mb-6">
                   <div className="h-2 bg-white/5 rounded-full overflow-hidden">
                     <div
-                      className="h-full bg-[#06D6A0] transition-all duration-500"
+                      className="h-full bg-primary transition-all duration-500"
                       style={{ width: `${progress}%` }}
                     />
                   </div>
@@ -363,16 +363,16 @@ export default function LearnPage() {
                         key={lesson.id}
                         className={`flex items-start gap-4 p-4 rounded-lg border transition-all ${
                           isCompleted
-                            ? "bg-[#06D6A0]/5 border-[#06D6A0]/30"
-                            : "bg-black/30 border-white/10 hover:border-[#06D6A0]/20"
+                            ? "bg-primary/5 border-primary/30"
+                            : "bg-black/30 border-white/10 hover:border-primary/20"
                         }`}
                       >
                         <button
                           onClick={() => toggleLesson(lesson.id)}
                           className={`mt-1 flex items-center justify-center w-5 h-5 rounded border-2 transition-colors flex-shrink-0 ${
                             isCompleted
-                              ? "bg-[#06D6A0] border-[#06D6A0]"
-                              : "bg-transparent border-gray-600 hover:border-[#06D6A0]"
+                              ? "bg-primary border-primary"
+                              : "bg-transparent border-gray-600 hover:border-primary"
                           }`}
                           aria-label={isCompleted ? "Mark as incomplete" : "Mark as complete"}
                         >
@@ -392,7 +392,7 @@ export default function LearnPage() {
                           <div className="flex items-center gap-2 mb-2">
                             <h4 className="text-white font-semibold">{lesson.title}</h4>
                             {recommended && (
-                              <span className="px-2 py-0.5 text-xs font-semibold bg-[#06D6A0]/20 text-[#06D6A0] rounded border border-[#06D6A0]/30">
+                              <span className="px-2 py-0.5 text-xs font-semibold bg-primary/20 text-primary rounded border border-primary/30">
                                 #{recommended.order} Recommended
                               </span>
                             )}
@@ -429,8 +429,8 @@ export default function LearnPage() {
 
       {/* CTA Section */}
       <section className="max-w-5xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-[#06D6A0]/20 bg-gradient-to-br from-[#06D6A0]/10 to-purple/10 p-8 text-center">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/20 rounded-full blur-[80px]" />
+        <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/10 to-purple/10 p-8 text-center">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-[80px]" />
           <div className="absolute bottom-0 left-0 w-48 h-48 bg-purple/20 rounded-full blur-[60px]" />
 
           <div className="relative">
@@ -443,13 +443,13 @@ export default function LearnPage() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <Link
                 href="/skills"
-                className="px-6 py-3 bg-[#06D6A0] text-black font-semibold rounded-lg hover:brightness-110 transition-all"
+                className="px-6 py-3 bg-primary text-black font-semibold rounded-lg hover:brightness-110 transition-all"
               >
                 Browse Skills →
               </Link>
               <Link
                 href="/trending"
-                className="px-6 py-3 border border-[#06D6A0] text-[#06D6A0] font-semibold rounded-lg hover:bg-[#06D6A0]/10 transition-all"
+                className="px-6 py-3 border border-primary text-primary font-semibold rounded-lg hover:bg-primary/10 transition-all"
               >
                 View Trending
               </Link>
diff --git a/src/app/llms-txt/page.tsx b/src/app/llms-txt/page.tsx
index 312a1d38..94c3db33 100644
--- a/src/app/llms-txt/page.tsx
+++ b/src/app/llms-txt/page.tsx
@@ -40,7 +40,7 @@ export default function LlmsTxtPage() {
           <Badge className="mb-4 bg-cyan/10 text-cyan border-cyan/20 font-mono text-xs">
             FIRST ON THE WEB
           </Badge>
-          <h1 className="text-[32px] md:text-[42px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-3">
+          <h1 className="text-[32px] md:text-[42px] font-bold tracking-[-0.02em] text-foreground mb-3">
             📄 llms.txt Directory
           </h1>
           <p className="text-lg text-foreground/80 mb-2">
@@ -88,7 +88,7 @@ export default function LlmsTxtPage() {
             >
               <CardHeader className="pb-3">
                 <div className="flex items-center justify-between mb-1">
-                  <span className="inline-block font-mono text-[11px] font-bold uppercase tracking-[0.08em] px-2 py-1 rounded-md bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20 border">
+                  <span className="inline-block font-mono text-[11px] font-bold uppercase tracking-[0.08em] px-2 py-1 rounded-md bg-primary/10 text-primary border-primary/20 border">
                     {entry.sections.length} sections
                   </span>
                   <a
diff --git a/src/app/macros/page.tsx b/src/app/macros/page.tsx
index aea0ca1d..1ebe44c0 100644
--- a/src/app/macros/page.tsx
+++ b/src/app/macros/page.tsx
@@ -61,7 +61,7 @@ export default function MacrosPage() {
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC] mb-4">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
             🔗 Macro Tools
           </h1>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
diff --git a/src/app/marketplace/marketplace-client.tsx b/src/app/marketplace/marketplace-client.tsx
index d30f16d0..f9137986 100644
--- a/src/app/marketplace/marketplace-client.tsx
+++ b/src/app/marketplace/marketplace-client.tsx
@@ -114,7 +114,7 @@ export function MarketplaceClient({ agents }: MarketplaceClientProps) {
       {/* Featured Skills Banner */}
       {featuredAgents.length > 0 && (
         <div className="mb-10">
-          <h2 className="text-2xl font-bold text-[#F8FAFC] mb-4 flex items-center gap-2">
+          <h2 className="text-2xl font-bold text-foreground mb-4 flex items-center gap-2">
             ⭐ Editor&apos;s Picks
           </h2>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -210,7 +210,7 @@ function FeaturedAgentCard({ agent }: { agent: MarketplaceAgent }) {
           <div className="text-5xl">{agent.avatar}</div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1 flex-wrap">
-              <h3 className="font-bold text-[#F8FAFC] text-lg">{agent.name}</h3>
+              <h3 className="font-bold text-foreground text-lg">{agent.name}</h3>
               {agent.verified && (
                 <Badge className="bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 text-[10px] px-1.5 py-0">
                   ✓
@@ -277,7 +277,7 @@ function AgentCard({
           <div className="text-4xl">{agent.avatar}</div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1 flex-wrap">
-              <h3 className="font-bold text-[#F8FAFC] group-hover:text-cyan transition-colors">
+              <h3 className="font-bold text-foreground group-hover:text-cyan transition-colors">
                 {agent.name}
               </h3>
               {agent.verified && (
@@ -372,7 +372,7 @@ function AgentCard({
           <Button
             onClick={handleDeploy}
             disabled={deploying}
-            className="w-full bg-[#06D6A0] hover:bg-[#05c494] text-[#0a0a0a] font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full bg-primary hover:bg-primary/90 text-background font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {deploying ? "Installing..." : "Install Agent"}
           </Button>
@@ -442,7 +442,7 @@ function WriteReviewDialog({ agentName }: { agentName: string }) {
           Write a Review
         </Button>
       </DialogTrigger>
-      <DialogContent className="bg-[#0a0a0a] border-white/20 text-white">
+      <DialogContent className="bg-background border-white/20 text-white">
         <DialogHeader>
           <DialogTitle>Write a Review for {agentName}</DialogTitle>
           <DialogDescription className="text-white/60">
@@ -506,7 +506,7 @@ function WriteReviewDialog({ agentName }: { agentName: string }) {
           <Button
             onClick={handleSubmit}
             disabled={!reviewerName || !reviewText}
-            className="bg-[#06D6A0] hover:bg-[#05c494] text-[#0a0a0a] font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
+            className="bg-primary hover:bg-primary/90 text-background font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Submit Review
           </Button>
diff --git a/src/app/marketplace/page.tsx b/src/app/marketplace/page.tsx
index 9c2fb309..00a9587e 100644
--- a/src/app/marketplace/page.tsx
+++ b/src/app/marketplace/page.tsx
@@ -86,7 +86,7 @@ export default function MarketplacePage() {
       <main className="max-w-7xl mx-auto px-4 py-12">
         {/* Header */}
         <div className="mb-10">
-          <h1 className="text-4xl font-bold text-[#F8FAFC] mb-3">
+          <h1 className="text-4xl font-bold text-foreground mb-3">
             🏪 Agent Marketplace
           </h1>
           <p className="text-lg text-foreground/80 mb-4">
diff --git a/src/app/mcp/[slug]/page.tsx b/src/app/mcp/[slug]/page.tsx
index 805cbb5b..0bbd139a 100644
--- a/src/app/mcp/[slug]/page.tsx
+++ b/src/app/mcp/[slug]/page.tsx
@@ -45,7 +45,7 @@ export default async function McpServerDetailPage({ params }: PageProps) {
           <Badge variant="outline" className="bg-white/5 text-white/70 border-white/10">
             {server.category}
           </Badge>
-          <h1 className="text-3xl font-bold text-[#F8FAFC]">{server.name}</h1>
+          <h1 className="text-3xl font-bold text-foreground">{server.name}</h1>
           <p className="text-foreground/80 leading-relaxed">{server.description}</p>
         </div>
 
@@ -56,7 +56,7 @@ export default async function McpServerDetailPage({ params }: PageProps) {
         <Separator className="my-8 opacity-10" />
 
         <section>
-          <h2 className="text-lg font-semibold text-[#F8FAFC] mb-3">Repository</h2>
+          <h2 className="text-lg font-semibold text-foreground mb-3">Repository</h2>
           <a
             href={server.repo_url}
             target="_blank"
diff --git a/src/app/mcp/mcp-client.tsx b/src/app/mcp/mcp-client.tsx
index 3e57ad97..5ad1d63e 100644
--- a/src/app/mcp/mcp-client.tsx
+++ b/src/app/mcp/mcp-client.tsx
@@ -9,12 +9,12 @@ import { RunInReflecttButton } from "@/components/RunInReflecttButton";
 import Link from "next/link";
 
 const categoryStyles: Record<McpServerCategory, { bg: string; text: string; border: string }> = {
-  "file-system": { bg: "bg-[#F59E0B]/10", text: "text-[#F59E0B]", border: "border-[#F59E0B]/20" },
-  database: { bg: "bg-[#06D6A0]/10", text: "text-[#06D6A0]", border: "border-[#06D6A0]/20" },
-  API: { bg: "bg-[#3B82F6]/10", text: "text-[#3B82F6]", border: "border-[#3B82F6]/20" },
-  coding: { bg: "bg-[#8B5CF6]/10", text: "text-[#8B5CF6]", border: "border-[#8B5CF6]/20" },
+  "file-system": { bg: "bg-solar/10", text: "text-solar", border: "border-solar/20" },
+  database: { bg: "bg-primary/10", text: "text-primary", border: "border-primary/20" },
+  API: { bg: "bg-electric-blue/10", text: "text-electric-blue", border: "border-electric-blue/20" },
+  coding: { bg: "bg-purple/10", text: "text-purple", border: "border-purple/20" },
   search: { bg: "bg-cyan/10", text: "text-cyan", border: "border-cyan/20" },
-  communication: { bg: "bg-[#EC4899]/10", text: "text-[#EC4899]", border: "border-[#EC4899]/20" },
+  communication: { bg: "bg-aurora-pink/10", text: "text-aurora-pink", border: "border-aurora-pink/20" },
 };
 
 const categoryTabs: Array<{ key: "all" | McpServerCategory; label: string }> = [
diff --git a/src/app/mcp/page.tsx b/src/app/mcp/page.tsx
index a5fea9ad..8c5de088 100644
--- a/src/app/mcp/page.tsx
+++ b/src/app/mcp/page.tsx
@@ -95,7 +95,7 @@ export default function McpPage() {
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-[32px] md:text-[42px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-3">
+          <h1 className="text-[32px] md:text-[42px] font-bold tracking-[-0.02em] text-foreground mb-3">
             🔌 MCP Server Directory
           </h1>
           <p className="text-lg text-foreground/80 mb-2">
diff --git a/src/app/memory-patterns/[pattern]/page.tsx b/src/app/memory-patterns/[pattern]/page.tsx
index 4b15308b..a6d96b85 100644
--- a/src/app/memory-patterns/[pattern]/page.tsx
+++ b/src/app/memory-patterns/[pattern]/page.tsx
@@ -80,7 +80,7 @@ export default async function MemoryPatternDetailPage({
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <div className="border-b border-white/10">
         <div className="mx-auto max-w-6xl px-6 py-4 text-sm text-white/60">
           <Link href="/" className="hover:text-white">Home</Link>
@@ -149,7 +149,7 @@ export default async function MemoryPatternDetailPage({
               </ol>
             </div>
 
-            <div className="rounded-xl border border-white/10 bg-[#090d16] p-6">
+            <div className="rounded-xl border border-white/10 bg-background p-6">
               <h3 className="text-lg font-semibold">Code example ({entry.implementationGuide.codeExample.language})</h3>
               <pre className="mt-4 overflow-x-auto rounded bg-black/50 p-4 text-xs text-white/85">
                 <code>{entry.implementationGuide.codeExample.code}</code>
diff --git a/src/app/memory-patterns/cookbook/page.tsx b/src/app/memory-patterns/cookbook/page.tsx
index 2c0138af..4be3a967 100644
--- a/src/app/memory-patterns/cookbook/page.tsx
+++ b/src/app/memory-patterns/cookbook/page.tsx
@@ -31,7 +31,7 @@ export const metadata: Metadata = {
 
 export default function MemoryCookbookPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <section className="border-b border-white/10 bg-gradient-to-b from-white/5 to-transparent">
         <div className="mx-auto max-w-7xl px-6 py-16 lg:px-8">
           <h1 className="text-4xl font-bold tracking-tight">Memory Cookbook</h1>
diff --git a/src/app/memory-patterns/page.tsx b/src/app/memory-patterns/page.tsx
index 767f4497..3e90a0c1 100644
--- a/src/app/memory-patterns/page.tsx
+++ b/src/app/memory-patterns/page.tsx
@@ -56,7 +56,7 @@ const complexityClasses = {
 
 export default function MemoryPatternsHubPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <section className="border-b border-white/10 bg-gradient-to-b from-white/5 to-transparent">
         <div className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
           <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Agent Memory Patterns Guide</h1>
@@ -67,7 +67,7 @@ export default function MemoryPatternsHubPage() {
           <div className="mt-8 flex flex-wrap gap-3">
             <Link
               href="/memory-patterns/cookbook"
-              className="rounded-lg bg-[#06D6A0] px-4 py-2.5 text-sm font-semibold text-black hover:brightness-110"
+              className="rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-black hover:brightness-110"
             >
               Open Memory Cookbook
             </Link>
diff --git a/src/app/metrics/page.tsx b/src/app/metrics/page.tsx
index d0dbccc5..29f4a888 100644
--- a/src/app/metrics/page.tsx
+++ b/src/app/metrics/page.tsx
@@ -78,7 +78,7 @@ export default function MetricsPage() {
   };
 
   const getStatusColor = (statusCode: number) => {
-    if (statusCode >= 200 && statusCode < 300) return "text-[#06D6A0]";
+    if (statusCode >= 200 && statusCode < 300) return "text-primary";
     if (statusCode >= 400 && statusCode < 500) return "text-yellow-500";
     if (statusCode >= 500) return "text-red-500";
     return "text-foreground";
@@ -86,7 +86,7 @@ export default function MetricsPage() {
 
   const getStatusBadgeColor = (statusCode: number) => {
     if (statusCode >= 200 && statusCode < 300)
-      return "bg-[#06D6A0]/20 text-[#06D6A0] border-[#06D6A0]/30";
+      return "bg-primary/20 text-primary border-primary/30";
     if (statusCode >= 400 && statusCode < 500)
       return "bg-yellow-500/20 text-yellow-500 border-yellow-500/30";
     if (statusCode >= 500) return "bg-red-500/20 text-red-500 border-red-500/30";
@@ -94,19 +94,19 @@ export default function MetricsPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         {/* Subtle aurora background */}
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-7xl mx-auto px-4 py-20 w-full">
           <div className="flex items-center justify-between mb-6">
             <div>
-              <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-2">
+              <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-2">
                 API Metrics
               </h1>
               <p className="text-xl text-foreground/80">
@@ -119,13 +119,13 @@ export default function MetricsPage() {
               <div
                 className={`flex items-center gap-2 px-4 py-2 rounded-lg border ${
                   isRefreshing
-                    ? "border-[#06D6A0] bg-[#06D6A0]/10"
+                    ? "border-primary bg-primary/10"
                     : "border-white/10 bg-card/20"
                 }`}
               >
                 <div
                   className={`w-2 h-2 rounded-full ${
-                    isRefreshing ? "bg-[#06D6A0] animate-pulse" : "bg-[#06D6A0]"
+                    isRefreshing ? "bg-primary animate-pulse" : "bg-primary"
                   }`}
                 />
                 <span className="text-sm text-foreground/80">
@@ -143,14 +143,14 @@ export default function MetricsPage() {
       <section className="max-w-7xl mx-auto px-4 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           {/* Requests per minute */}
-          <Card className="bg-gradient-to-br from-[#06D6A0]/10 to-card/30 border-[#06D6A0]/20">
+          <Card className="bg-gradient-to-br from-primary/10 to-card/30 border-primary/20">
             <CardHeader className="pb-2">
               <CardTitle className="text-sm font-medium text-muted-foreground">
                 Requests / Minute
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="text-4xl font-bold text-[#06D6A0] mb-1">
+              <div className="text-4xl font-bold text-primary mb-1">
                 {data.currentMetrics.requestsPerMinute.toLocaleString()}
               </div>
               <p className="text-xs text-muted-foreground">
@@ -160,14 +160,14 @@ export default function MetricsPage() {
           </Card>
 
           {/* Average latency */}
-          <Card className="bg-gradient-to-br from-[#3B82F6]/10 to-card/30 border-[#3B82F6]/20">
+          <Card className="bg-gradient-to-br from-electric-blue/10 to-card/30 border-electric-blue/20">
             <CardHeader className="pb-2">
               <CardTitle className="text-sm font-medium text-muted-foreground">
                 Avg Latency
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="text-4xl font-bold text-[#3B82F6] mb-1">
+              <div className="text-4xl font-bold text-electric-blue mb-1">
                 {data.currentMetrics.avgLatencyMs}
                 <span className="text-2xl">ms</span>
               </div>
@@ -178,14 +178,14 @@ export default function MetricsPage() {
           </Card>
 
           {/* Error rate */}
-          <Card className="bg-gradient-to-br from-[#8B5CF6]/10 to-card/30 border-[#8B5CF6]/20">
+          <Card className="bg-gradient-to-br from-purple/10 to-card/30 border-purple/20">
             <CardHeader className="pb-2">
               <CardTitle className="text-sm font-medium text-muted-foreground">
                 Error Rate
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="text-4xl font-bold text-[#8B5CF6] mb-1">
+              <div className="text-4xl font-bold text-purple mb-1">
                 {data.currentMetrics.errorRate}
                 <span className="text-2xl">%</span>
               </div>
@@ -196,14 +196,14 @@ export default function MetricsPage() {
           </Card>
 
           {/* Active agents */}
-          <Card className="bg-gradient-to-br from-[#F59E0B]/10 to-card/30 border-[#F59E0B]/20">
+          <Card className="bg-gradient-to-br from-solar/10 to-card/30 border-solar/20">
             <CardHeader className="pb-2">
               <CardTitle className="text-sm font-medium text-muted-foreground">
                 Active Agents
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="text-4xl font-bold text-[#F59E0B] mb-1">
+              <div className="text-4xl font-bold text-solar mb-1">
                 {data.currentMetrics.activeAgents.toLocaleString()}
               </div>
               <p className="text-xs text-muted-foreground">
@@ -260,9 +260,9 @@ export default function MetricsPage() {
                         <span
                           className={`text-sm font-semibold ${
                             endpoint.avgResponseTime < 100
-                              ? "text-[#06D6A0]"
+                              ? "text-primary"
                               : endpoint.avgResponseTime < 200
-                                ? "text-[#3B82F6]"
+                                ? "text-electric-blue"
                                 : "text-yellow-500"
                           }`}
                         >
@@ -382,7 +382,7 @@ export default function MetricsPage() {
                         {isToday && (
                           <Badge
                             variant="outline"
-                            className="bg-[#06D6A0]/20 text-[#06D6A0] border-[#06D6A0]/30 text-xs"
+                            className="bg-primary/20 text-primary border-primary/30 text-xs"
                           >
                             Today
                           </Badge>
@@ -410,7 +410,7 @@ export default function MetricsPage() {
             <Separator className="opacity-10 my-6" />
             <div className="flex items-center justify-between">
               <span className="text-sm text-muted-foreground">7-day average</span>
-              <span className="text-2xl font-bold text-[#06D6A0]">
+              <span className="text-2xl font-bold text-primary">
                 {(
                   data.uptimeHistory.reduce((acc, day) => acc + day.uptime, 0) /
                   data.uptimeHistory.length
@@ -426,8 +426,8 @@ export default function MetricsPage() {
 
       {/* CTA Section */}
       <section className="max-w-4xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-[#06D6A0]/20 bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/10 rounded-full blur-[80px]" />
+        <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/5 via-card/80 to-purple/5">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[80px]" />
           <div className="absolute bottom-0 left-0 w-48 h-48 bg-purple/10 rounded-full blur-[60px]" />
 
           <div className="relative p-8 md:p-12 text-center">
@@ -442,7 +442,7 @@ export default function MetricsPage() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <a
                 href="/pricing"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 Upgrade to Premium →
               </a>
diff --git a/src/app/migrate/guide/page.tsx b/src/app/migrate/guide/page.tsx
index 0db209dc..28cb6aea 100644
--- a/src/app/migrate/guide/page.tsx
+++ b/src/app/migrate/guide/page.tsx
@@ -244,12 +244,12 @@ export default function MigrationGuidePage() {
     : 0
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       {/* Hero */}
       <section className="border-b border-white/10">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
           <div className="text-center">
-            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#06D6A0]/10 border border-[#06D6A0]/20 text-[#06D6A0] text-sm mb-6">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm mb-6">
               <span>🔄</span>
               <span>Skill Version Migration</span>
             </div>
@@ -347,8 +347,8 @@ export default function MigrationGuidePage() {
 
               {/* Migration Summary */}
               {selectedSkill && sourceVersion && targetVersion && (
-                <div className="p-4 rounded-lg bg-[#06D6A0]/10 border border-[#06D6A0]/30">
-                  <h3 className="font-semibold text-[#06D6A0] mb-2">Migration Summary</h3>
+                <div className="p-4 rounded-lg bg-primary/10 border border-primary/30">
+                  <h3 className="font-semibold text-primary mb-2">Migration Summary</h3>
                   <div className="space-y-2 text-sm text-white/70">
                     <p>
                       <span className="text-white/90">Skill:</span> {selectedSkillData?.name}
@@ -358,7 +358,7 @@ export default function MigrationGuidePage() {
                     </p>
                     <p>
                       <span className="text-white/90">Breaking Changes:</span>{" "}
-                      <span className={relevantChanges.length > 0 ? "text-yellow-400 font-semibold" : "text-[#06D6A0]"}>
+                      <span className={relevantChanges.length > 0 ? "text-yellow-400 font-semibold" : "text-primary"}>
                         {relevantChanges.length} {relevantChanges.length === 1 ? "issue" : "issues"} found
                       </span>
                     </p>
@@ -452,7 +452,7 @@ export default function MigrationGuidePage() {
                                 </div>
                                 <div>
                                   <div className="flex items-center justify-between mb-1">
-                                    <span className="text-xs text-[#06D6A0] flex items-center gap-1">
+                                    <span className="text-xs text-primary flex items-center gap-1">
                                       <span>✅</span> After
                                     </span>
                                     <Button
@@ -468,7 +468,7 @@ export default function MigrationGuidePage() {
                                       )}
                                     </Button>
                                   </div>
-                                  <pre className="bg-black/50 border border-[#06D6A0]/30 rounded p-3 overflow-x-auto text-xs">
+                                  <pre className="bg-black/50 border border-primary/30 rounded p-3 overflow-x-auto text-xs">
                                     <code className="text-white">{change.codeExample.after}</code>
                                   </pre>
                                 </div>
@@ -528,7 +528,7 @@ export default function MigrationGuidePage() {
                           <ul className="space-y-1">
                             {change.migration.map((step, idx) => (
                               <li key={idx} className="flex items-start gap-2 text-sm text-white/70">
-                                <span className="text-[#06D6A0] mt-0.5">•</span>
+                                <span className="text-primary mt-0.5">•</span>
                                 <span>{step}</span>
                               </li>
                             ))}
@@ -559,7 +559,7 @@ export default function MigrationGuidePage() {
                     onClick={copyChecklist}
                     variant="outline"
                     size="sm"
-                    className="border-[#06D6A0]/30 text-[#06D6A0] hover:bg-[#06D6A0]/10"
+                    className="border-primary/30 text-primary hover:bg-primary/10"
                   >
                     {copiedId === 'checklist' ? (
                       <><Check className="w-4 h-4 mr-2" /> Copied</>
@@ -585,13 +585,13 @@ export default function MigrationGuidePage() {
                   <div className="mb-6">
                     <div className="flex items-center justify-between mb-2">
                       <span className="text-sm text-white/70">Progress</span>
-                      <span className="text-sm font-medium text-[#06D6A0]">
+                      <span className="text-sm font-medium text-primary">
                         {checkedItems.size} / {migrationChecklist.length} steps ({progress}%)
                       </span>
                     </div>
                     <div className="w-full h-2 bg-white/10 rounded-full overflow-hidden">
                       <div
-                        className="h-full bg-[#06D6A0] transition-all duration-300"
+                        className="h-full bg-primary transition-all duration-300"
                         style={{ width: `${progress}%` }}
                       />
                     </div>
@@ -619,7 +619,7 @@ export default function MigrationGuidePage() {
                                 key={item.id}
                                 className={`flex items-start gap-3 p-3 rounded-lg border transition-all ${
                                   checkedItems.has(item.id)
-                                    ? "bg-[#06D6A0]/10 border-[#06D6A0]/30"
+                                    ? "bg-primary/10 border-primary/30"
                                     : "bg-white/5 border-white/10"
                                 }`}
                               >
@@ -643,9 +643,9 @@ export default function MigrationGuidePage() {
 
                   {/* Completion Message */}
                   {progress === 100 && (
-                    <div className="mt-6 p-4 rounded-lg bg-[#06D6A0]/10 border border-[#06D6A0]/30 text-center">
-                      <Check className="w-8 h-8 text-[#06D6A0] mx-auto mb-2" />
-                      <h3 className="text-lg font-semibold text-[#06D6A0] mb-1">
+                    <div className="mt-6 p-4 rounded-lg bg-primary/10 border border-primary/30 text-center">
+                      <Check className="w-8 h-8 text-primary mx-auto mb-2" />
+                      <h3 className="text-lg font-semibold text-primary mb-1">
                         Migration Complete!
                       </h3>
                       <p className="text-sm text-white/70">
@@ -961,9 +961,9 @@ export default function MigrationGuidePage() {
                         </div>
 
                         {/* Testimonial */}
-                        <div className="p-4 rounded-lg bg-[#06D6A0]/10 border border-[#06D6A0]/30">
+                        <div className="p-4 rounded-lg bg-primary/10 border border-primary/30">
                           <p className="text-white/80 italic mb-2">&ldquo;{story.testimonial}&rdquo;</p>
-                          <p className="text-sm text-[#06D6A0]">— {story.author}</p>
+                          <p className="text-sm text-primary">— {story.author}</p>
                         </div>
 
                         {/* Tags */}
@@ -983,15 +983,15 @@ export default function MigrationGuidePage() {
           </Card>
 
           {/* CTA */}
-          <Card className="bg-gradient-to-br from-[#06D6A0]/10 to-purple/10 border-[#06D6A0]/30">
+          <Card className="bg-gradient-to-br from-primary/10 to-purple/10 border-primary/30">
             <CardContent className="pt-6">
               <div className="text-center">
-                <Zap className="w-12 h-12 text-[#06D6A0] mx-auto mb-4" />
+                <Zap className="w-12 h-12 text-primary mx-auto mb-4" />
                 <h3 className="text-2xl font-bold text-white mb-2">Share Your Migration Story</h3>
                 <p className="text-white/60 mb-6 max-w-2xl mx-auto">
                   Did you successfully migrate a skill? Share your experience to help other agents.
                 </p>
-                <Button asChild className="bg-[#06D6A0] text-[#0a0a0a] hover:brightness-110">
+                <Button asChild className="bg-primary text-background hover:brightness-110">
                   <Link href="/submit">Submit Your Story</Link>
                 </Button>
               </div>
diff --git a/src/app/migrate/page.tsx b/src/app/migrate/page.tsx
index 157de6a6..190fb979 100644
--- a/src/app/migrate/page.tsx
+++ b/src/app/migrate/page.tsx
@@ -169,10 +169,10 @@ export default function MigratePage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <section className="max-w-6xl mx-auto px-4 py-16">
         <div className="mb-10 text-center">
-          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#06D6A0]/10 border border-[#06D6A0]/20 text-[#06D6A0] text-sm mb-6">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm mb-6">
             <span>🔄</span>
             <span>Migration Guide</span>
           </div>
@@ -246,8 +246,8 @@ export default function MigratePage() {
                   key={guide.id}
                   className={`border transition-colors cursor-pointer bg-white/5 ${
                     selectedGuideId === guide.id
-                      ? "border-[#06D6A0]/70"
-                      : "border-white/10 hover:border-[#06D6A0]/40"
+                      ? "border-primary/70"
+                      : "border-white/10 hover:border-primary/40"
                   }`}
                   onClick={() => setSelectedGuideId(guide.id)}
                 >
@@ -284,7 +284,7 @@ export default function MigratePage() {
             </div>
 
             {selectedGuide && (
-              <div className="rounded-xl border border-[#06D6A0]/20 bg-[#06D6A0]/5 p-6">
+              <div className="rounded-xl border border-primary/20 bg-primary/5 p-6">
                 <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
                   <div>
                     <h2 className="text-2xl md:text-3xl font-bold mb-2">{selectedGuide.title}</h2>
@@ -300,7 +300,7 @@ export default function MigratePage() {
                 <Accordion type="single" collapsible className="rounded-lg border border-white/10 bg-black/20 px-4">
                   {selectedGuide.steps.map((step, index) => (
                     <AccordionItem key={`${selectedGuide.id}-${index}`} value={`step-${index}`} className="border-white/10">
-                      <AccordionTrigger className="text-left hover:text-[#06D6A0]">
+                      <AccordionTrigger className="text-left hover:text-primary">
                         <span className="font-medium">
                           Step {index + 1}: {step.title}
                         </span>
@@ -321,7 +321,7 @@ export default function MigratePage() {
                   <Button
                     onClick={() => markComplete(selectedGuide.id)}
                     disabled={markingCompleteId === selectedGuide.id}
-                    className="bg-[#06D6A0] text-[#0a0a0a] hover:brightness-110"
+                    className="bg-primary text-background hover:brightness-110"
                   >
                     {markingCompleteId === selectedGuide.id
                       ? "Updating..."
diff --git a/src/app/monetization/calculator/page.tsx b/src/app/monetization/calculator/page.tsx
index 98bc8343..2393ccc8 100644
--- a/src/app/monetization/calculator/page.tsx
+++ b/src/app/monetization/calculator/page.tsx
@@ -54,21 +54,21 @@ export default function PricingCalculatorPage() {
   }, [tokenCostPer1M, avgTokensPerRequest, requestsPerUserPerMonth, monthlyUsers, targetMargin, marketplaceFee]);
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero */}
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 right-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-cyan-500/5 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-20 text-center">
           <Link href="/monetization">
-            <Badge className="mb-4 bg-[#06D6A0]/20 text-[#06D6A0] border-[#06D6A0]/30 cursor-pointer hover:bg-[#06D6A0]/30">
+            <Badge className="mb-4 bg-primary/20 text-primary border-primary/30 cursor-pointer hover:bg-primary/30">
               ← Back to Monetization Guide
             </Badge>
           </Link>
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             🧮 Pricing Calculator
           </h1>
           <p className="text-xl text-foreground/80 max-w-2xl mx-auto">
@@ -97,7 +97,7 @@ export default function PricingCalculatorPage() {
                     type="number"
                     value={tokenCostPer1M}
                     onChange={(e) => setTokenCostPer1M(Number(e.target.value))}
-                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-[#06D6A0]/50 focus:outline-none"
+                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-primary/50 focus:outline-none"
                   />
                   <p className="text-xs text-muted-foreground mt-1">
                     GPT-4: $15 | GPT-3.5: $2 | Claude Opus: $15 | Haiku: $0.80
@@ -112,7 +112,7 @@ export default function PricingCalculatorPage() {
                     type="number"
                     value={avgTokensPerRequest}
                     onChange={(e) => setAvgTokensPerRequest(Number(e.target.value))}
-                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-[#06D6A0]/50 focus:outline-none"
+                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-primary/50 focus:outline-none"
                   />
                   <p className="text-xs text-muted-foreground mt-1">
                     Include both input and output tokens
@@ -134,7 +134,7 @@ export default function PricingCalculatorPage() {
                     type="number"
                     value={requestsPerUserPerMonth}
                     onChange={(e) => setRequestsPerUserPerMonth(Number(e.target.value))}
-                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-[#06D6A0]/50 focus:outline-none"
+                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-primary/50 focus:outline-none"
                   />
                 </div>
 
@@ -146,7 +146,7 @@ export default function PricingCalculatorPage() {
                     type="number"
                     value={monthlyUsers}
                     onChange={(e) => setMonthlyUsers(Number(e.target.value))}
-                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-[#06D6A0]/50 focus:outline-none"
+                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-primary/50 focus:outline-none"
                   />
                 </div>
               </CardContent>
@@ -165,7 +165,7 @@ export default function PricingCalculatorPage() {
                     type="number"
                     value={targetMargin}
                     onChange={(e) => setTargetMargin(Number(e.target.value))}
-                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-[#06D6A0]/50 focus:outline-none"
+                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-primary/50 focus:outline-none"
                   />
                   <p className="text-xs text-muted-foreground mt-1">
                     Typical SaaS: 70-80%
@@ -180,7 +180,7 @@ export default function PricingCalculatorPage() {
                     type="number"
                     value={marketplaceFee}
                     onChange={(e) => setMarketplaceFee(Number(e.target.value))}
-                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-[#06D6A0]/50 focus:outline-none"
+                    className="w-full px-4 py-2 rounded-lg bg-black/40 border border-white/10 text-foreground focus:border-primary/50 focus:outline-none"
                   />
                   <p className="text-xs text-muted-foreground mt-1">
                     App stores: 30% | Self-hosted: 0% | Stripe: 2.9%
@@ -192,14 +192,14 @@ export default function PricingCalculatorPage() {
 
           {/* Results */}
           <div className="space-y-6">
-            <Card className="bg-gradient-to-br from-[#06D6A0]/10 to-cyan-500/5 border-[#06D6A0]/30">
+            <Card className="bg-gradient-to-br from-primary/10 to-cyan-500/5 border-primary/30">
               <CardHeader>
                 <CardTitle>💰 Recommended Pricing</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
                 <div>
                   <p className="text-sm text-foreground/70 mb-2">Price Per User (Monthly)</p>
-                  <div className="text-4xl font-bold text-[#06D6A0]">
+                  <div className="text-4xl font-bold text-primary">
                     ${calculations.pricePerUser.toFixed(2)}
                   </div>
                 </div>
@@ -255,7 +255,7 @@ export default function PricingCalculatorPage() {
                     <span className="text-xs text-foreground/60 w-16">Current:</span>
                     <div className="flex-1 h-8 bg-black/40 rounded-lg overflow-hidden relative">
                       <div 
-                        className="h-full bg-gradient-to-r from-cyan-500 to-[#06D6A0] transition-all duration-500 flex items-center justify-end pr-2"
+                        className="h-full bg-gradient-to-r from-cyan-500 to-primary transition-all duration-500 flex items-center justify-end pr-2"
                         style={{ width: `${Math.min((monthlyUsers / calculations.breakEvenUsers) * 100, 100)}%` }}
                       >
                         <span className="text-xs font-bold text-black">{monthlyUsers}</span>
@@ -302,13 +302,13 @@ export default function PricingCalculatorPage() {
                     </p>
                   </div>
 
-                  <div className="bg-[#06D6A0]/10 rounded-lg p-4 border border-[#06D6A0]/50 relative">
-                    <div className="absolute -top-2 -right-2 bg-[#06D6A0] text-black text-xs font-bold px-2 py-1 rounded-full">
+                  <div className="bg-primary/10 rounded-lg p-4 border border-primary/50 relative">
+                    <div className="absolute -top-2 -right-2 bg-primary text-black text-xs font-bold px-2 py-1 rounded-full">
                       RECOMMENDED
                     </div>
                     <div className="flex items-center justify-between mb-2">
-                      <span className="font-semibold text-[#06D6A0]">Pro</span>
-                      <span className="text-2xl font-bold text-[#06D6A0]">${calculations.tiers.pro}</span>
+                      <span className="font-semibold text-primary">Pro</span>
+                      <span className="text-2xl font-bold text-primary">${calculations.tiers.pro}</span>
                     </div>
                     <p className="text-xs text-foreground/60">
                       Full calculated price • {requestsPerUserPerMonth} requests/mo
@@ -367,7 +367,7 @@ export default function PricingCalculatorPage() {
                   </div>
                 )}
                 <div 
-                  className="bg-gradient-to-r from-[#06D6A0] to-green-400 flex items-center justify-center text-black font-bold text-sm transition-all duration-500"
+                  className="bg-gradient-to-r from-primary to-green-400 flex items-center justify-center text-black font-bold text-sm transition-all duration-500"
                   style={{ width: `${marketplaceFee > 0 ? calculations.actualMargin : targetMargin}%` }}
                   title={`Profit: $${(calculations.revenueAfterFees - calculations.totalMonthlyCost).toFixed(2)}`}
                 >
@@ -388,7 +388,7 @@ export default function PricingCalculatorPage() {
                 )}
                 <div>
                   <div className="text-sm text-foreground/60 mb-1">Net Profit</div>
-                  <div className="text-xl font-bold text-[#06D6A0]">
+                  <div className="text-xl font-bold text-primary">
                     ${(calculations.revenueAfterFees - calculations.totalMonthlyCost).toFixed(0)}
                   </div>
                 </div>
@@ -402,9 +402,9 @@ export default function PricingCalculatorPage() {
 
       {/* CTA */}
       <section className="max-w-4xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-purple-500/20 bg-gradient-to-br from-purple/5 via-card/80 to-[#06D6A0]/5">
+        <div className="relative overflow-hidden rounded-2xl border border-purple-500/20 bg-gradient-to-br from-purple/5 via-card/80 to-primary/5">
           <div className="absolute top-0 right-0 w-64 h-64 bg-purple/10 rounded-full blur-[80px]" />
-          <div className="absolute bottom-0 left-0 w-48 h-48 bg-[#06D6A0]/10 rounded-full blur-[60px]" />
+          <div className="absolute bottom-0 left-0 w-48 h-48 bg-primary/10 rounded-full blur-[60px]" />
 
           <div className="relative p-8 md:p-12 text-center">
             <h2 className="text-2xl md:text-3xl font-bold mb-4">
@@ -417,7 +417,7 @@ export default function PricingCalculatorPage() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <Link
                 href="/monetization/cases"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 View Case Studies →
               </Link>
diff --git a/src/app/monetization/cases/page.tsx b/src/app/monetization/cases/page.tsx
index b08bd1e9..6a5e6ad3 100644
--- a/src/app/monetization/cases/page.tsx
+++ b/src/app/monetization/cases/page.tsx
@@ -307,12 +307,12 @@ const caseStudies: CaseStudy[] = [
 
 export default function CaseStudiesPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero */}
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         <div className="absolute inset-0">
           <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-purple/5 rounded-full blur-[160px]" />
-          <div className="absolute top-1/3 right-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-[#06D6A0]/5 rounded-full blur-[120px]" />
+          <div className="absolute top-1/3 right-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-primary/5 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-20 text-center">
@@ -321,7 +321,7 @@ export default function CaseStudiesPage() {
               ← Back to Monetization Guide
             </Badge>
           </Link>
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             📊 Agent Revenue Case Studies
           </h1>
           <p className="text-xl text-foreground/80 max-w-2xl mx-auto">
@@ -474,14 +474,14 @@ export default function CaseStudiesPage() {
 
       {/* Summary */}
       <section className="max-w-4xl mx-auto px-4 py-16">
-        <Card className="bg-gradient-to-br from-purple/5 via-card/80 to-[#06D6A0]/5 border-[#06D6A0]/30">
+        <Card className="bg-gradient-to-br from-purple/5 via-card/80 to-primary/5 border-primary/30">
           <CardHeader>
             <CardTitle className="text-2xl">Key Takeaways Across All Cases</CardTitle>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="grid md:grid-cols-2 gap-4">
               <div className="bg-black/40 rounded-lg p-4">
-                <div className="font-semibold text-[#06D6A0] mb-2">✓ What Worked</div>
+                <div className="font-semibold text-primary mb-2">✓ What Worked</div>
                 <ul className="space-y-1.5 text-sm text-foreground/80">
                   <li>• Free tiers with clear usage limits drive conversion</li>
                   <li>• Value-based pricing beats cost-plus pricing</li>
@@ -519,8 +519,8 @@ export default function CaseStudiesPage() {
 
       {/* CTA */}
       <section className="max-w-4xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-[#06D6A0]/20 bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-cyan-500/5">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/10 rounded-full blur-[80px]" />
+        <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/5 via-card/80 to-cyan-500/5">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[80px]" />
           <div className="absolute bottom-0 left-0 w-48 h-48 bg-cyan-500/10 rounded-full blur-[60px]" />
 
           <div className="relative p-8 md:p-12 text-center">
@@ -534,7 +534,7 @@ export default function CaseStudiesPage() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <Link
                 href="/monetization/calculator"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 Open Pricing Calculator →
               </Link>
diff --git a/src/app/monetization/page.tsx b/src/app/monetization/page.tsx
index 3b85b5dc..fb94b90b 100644
--- a/src/app/monetization/page.tsx
+++ b/src/app/monetization/page.tsx
@@ -7,20 +7,20 @@ import { Separator } from "@/components/ui/separator";
 
 export default function MonetizationPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[500px] flex items-center">
         {/* Aurora background */}
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 right-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/5 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-20 text-center">
-          <Badge className="mb-4 bg-[#06D6A0]/20 text-[#06D6A0] border-[#06D6A0]/30">
+          <Badge className="mb-4 bg-primary/20 text-primary border-primary/30">
             💰 Agent Monetization
           </Badge>
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Agent Monetization Guide
           </h1>
           <p className="text-xl text-foreground/80 max-w-2xl mx-auto">
@@ -35,10 +35,10 @@ export default function MonetizationPage() {
       <section className="max-w-6xl mx-auto px-4 py-12">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
           <Link href="/monetization/calculator">
-            <Card className="bg-card/30 border-white/10 hover:border-[#06D6A0]/30 transition-all group h-full cursor-pointer">
+            <Card className="bg-card/30 border-white/10 hover:border-primary/30 transition-all group h-full cursor-pointer">
               <CardHeader>
                 <div className="text-4xl mb-3">🧮</div>
-                <CardTitle className="text-xl group-hover:text-[#06D6A0] transition-colors">
+                <CardTitle className="text-xl group-hover:text-primary transition-colors">
                   Pricing Calculator
                 </CardTitle>
               </CardHeader>
@@ -91,7 +91,7 @@ export default function MonetizationPage() {
         <article className="prose prose-invert prose-lg max-w-none">
           {/* Pricing Models */}
           <div className="mb-16">
-            <h2 className="text-3xl font-bold mb-6 text-[#F8FAFC]">Pricing Models for Agents</h2>
+            <h2 className="text-3xl font-bold mb-6 text-foreground">Pricing Models for Agents</h2>
             
             <Card className="bg-card/30 border-purple-500/20 mb-8">
               <CardHeader>
@@ -136,7 +136,7 @@ const session = await stripe.checkout.sessions.create({
               </CardContent>
             </Card>
 
-            <Card className="bg-card/30 border-[#06D6A0]/20 mb-8">
+            <Card className="bg-card/30 border-primary/20 mb-8">
               <CardHeader>
                 <CardTitle className="flex items-center gap-3">
                   <span className="text-2xl">👥</span>
@@ -161,8 +161,8 @@ const session = await stripe.checkout.sessions.create({
                     <li>Can get expensive fast</li>
                   </ul>
                 </div>
-                <div className="bg-[#06D6A0]/10 border border-[#06D6A0]/30 rounded-lg p-4">
-                  <p className="text-sm font-semibold text-[#06D6A0] mb-2">💡 Implementation Pattern</p>
+                <div className="bg-primary/10 border border-primary/30 rounded-lg p-4">
+                  <p className="text-sm font-semibold text-primary mb-2">💡 Implementation Pattern</p>
                   <pre className="text-xs overflow-x-auto bg-black/60 p-3 rounded">
 {`// Metered billing with Stripe
 const usageRecord = await stripe.subscriptionItems.createUsageRecord(
@@ -258,7 +258,7 @@ const trackUsage = async (userId: string, tokens: number) => {
 
           {/* Marketplace Listing Fees */}
           <div className="mb-16">
-            <h2 className="text-3xl font-bold mb-6 text-[#F8FAFC]">Marketplace Distribution</h2>
+            <h2 className="text-3xl font-bold mb-6 text-foreground">Marketplace Distribution</h2>
             
             <Card className="bg-card/30 border-white/10">
               <CardHeader>
@@ -278,9 +278,9 @@ const trackUsage = async (userId: string, tokens: number) => {
                     </p>
                   </div>
                   
-                  <div className="bg-[#06D6A0]/10 border border-[#06D6A0]/30 rounded-lg p-4">
-                    <div className="font-semibold text-[#06D6A0] mb-2">🤝 Creator-Friendly</div>
-                    <div className="text-2xl font-bold text-[#06D6A0] mb-1">10-15%</div>
+                  <div className="bg-primary/10 border border-primary/30 rounded-lg p-4">
+                    <div className="font-semibold text-primary mb-2">🤝 Creator-Friendly</div>
+                    <div className="text-2xl font-bold text-primary mb-1">10-15%</div>
                     <p className="text-sm text-foreground/70">
                       Lower takes for smaller platforms trying to attract developers
                     </p>
@@ -318,7 +318,7 @@ const trackUsage = async (userId: string, tokens: number) => {
 
           {/* Freemium Conversion */}
           <div className="mb-16">
-            <h2 className="text-3xl font-bold mb-6 text-[#F8FAFC]">Freemium Conversion Strategies</h2>
+            <h2 className="text-3xl font-bold mb-6 text-foreground">Freemium Conversion Strategies</h2>
             
             <Card className="bg-card/30 border-white/10 mb-6">
               <CardHeader>
@@ -326,7 +326,7 @@ const trackUsage = async (userId: string, tokens: number) => {
               </CardHeader>
               <CardContent className="space-y-6">
                 <div>
-                  <h3 className="text-lg font-semibold text-[#06D6A0] mb-3">1. Usage Limits</h3>
+                  <h3 className="text-lg font-semibold text-primary mb-3">1. Usage Limits</h3>
                   <p className="text-foreground/80 mb-2">
                     Free tier: 1,000 requests/month. Pro: Unlimited.
                   </p>
@@ -367,7 +367,7 @@ const trackUsage = async (userId: string, tokens: number) => {
               </CardContent>
             </Card>
 
-            <Card className="bg-gradient-to-br from-purple-500/10 to-[#06D6A0]/10 border-purple-500/30">
+            <Card className="bg-gradient-to-br from-purple-500/10 to-primary/10 border-purple-500/30">
               <CardHeader>
                 <CardTitle>Conversion Benchmarks</CardTitle>
               </CardHeader>
@@ -378,7 +378,7 @@ const trackUsage = async (userId: string, tokens: number) => {
                     <p className="text-sm text-foreground/70">Typical free → paid</p>
                   </div>
                   <div className="text-center">
-                    <div className="text-3xl font-bold text-[#06D6A0]">20-40%</div>
+                    <div className="text-3xl font-bold text-primary">20-40%</div>
                     <p className="text-sm text-foreground/70">Trial → paid</p>
                   </div>
                   <div className="text-center">
@@ -394,7 +394,7 @@ const trackUsage = async (userId: string, tokens: number) => {
 
           {/* Pricing Psychology */}
           <div className="mb-16">
-            <h2 className="text-3xl font-bold mb-6 text-[#F8FAFC]">Pricing Psychology for AI Products</h2>
+            <h2 className="text-3xl font-bold mb-6 text-foreground">Pricing Psychology for AI Products</h2>
             
             <div className="space-y-6">
               <Card className="bg-card/30 border-white/10">
@@ -453,13 +453,13 @@ const trackUsage = async (userId: string, tokens: number) => {
                       <div className="text-xl font-bold">Starter</div>
                       <div className="text-2xl font-bold text-foreground/80">$29</div>
                     </div>
-                    <div className="bg-[#06D6A0]/10 rounded-lg p-4 border border-[#06D6A0]/50 relative">
-                      <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[#06D6A0] text-black text-xs font-bold px-3 py-1 rounded-full">
+                    <div className="bg-primary/10 rounded-lg p-4 border border-primary/50 relative">
+                      <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-black text-xs font-bold px-3 py-1 rounded-full">
                         MOST POPULAR
                       </div>
-                      <div className="text-sm text-[#06D6A0] mb-2">Just right ✓</div>
+                      <div className="text-sm text-primary mb-2">Just right ✓</div>
                       <div className="text-xl font-bold">Pro</div>
-                      <div className="text-2xl font-bold text-[#06D6A0]">$99</div>
+                      <div className="text-2xl font-bold text-primary">$99</div>
                     </div>
                     <div className="bg-black/40 rounded-lg p-4 border border-white/10">
                       <div className="text-sm text-foreground/60 mb-2">Overkill</div>
@@ -505,8 +505,8 @@ const trackUsage = async (userId: string, tokens: number) => {
 
       {/* CTA Section */}
       <section className="max-w-4xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-[#06D6A0]/20 bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/10 rounded-full blur-[80px]" />
+        <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/5 via-card/80 to-purple/5">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[80px]" />
           <div className="absolute bottom-0 left-0 w-48 h-48 bg-purple/10 rounded-full blur-[60px]" />
 
           <div className="relative p-8 md:p-12 text-center">
@@ -521,7 +521,7 @@ const trackUsage = async (userId: string, tokens: number) => {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <Link
                 href="/monetization/calculator"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 Open Pricing Calculator →
               </Link>
diff --git a/src/app/monetization/x402/page.tsx b/src/app/monetization/x402/page.tsx
index 02276cba..ccf36c04 100644
--- a/src/app/monetization/x402/page.tsx
+++ b/src/app/monetization/x402/page.tsx
@@ -7,7 +7,7 @@ import { Separator } from "@/components/ui/separator";
 
 export default function X402Page() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero */}
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         <div className="absolute inset-0">
@@ -21,7 +21,7 @@ export default function X402Page() {
               ← Back to Monetization Guide
             </Badge>
           </Link>
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             ⚡ x402 Payment Protocol
           </h1>
           <p className="text-xl text-foreground/80 max-w-2xl mx-auto">
@@ -86,7 +86,7 @@ export default function X402Page() {
       {/* Implementation */}
       <section className="max-w-4xl mx-auto px-4 py-12 space-y-8">
         <div>
-          <h2 className="text-3xl font-bold mb-6 text-[#F8FAFC]">Implementation Guide</h2>
+          <h2 className="text-3xl font-bold mb-6 text-foreground">Implementation Guide</h2>
           
           {/* Server-Side */}
           <Card className="bg-card/30 border-purple-500/20 mb-8">
@@ -153,7 +153,7 @@ app.listen(3000);`}
           </Card>
 
           {/* Client-Side */}
-          <Card className="bg-card/30 border-[#06D6A0]/20 mb-8">
+          <Card className="bg-card/30 border-primary/20 mb-8">
             <CardHeader>
               <CardTitle className="flex items-center gap-3">
                 <span className="text-2xl">🤖</span>
@@ -165,8 +165,8 @@ app.listen(3000);`}
                 When your agent receives a 402, automatically deposit funds and retry.
               </p>
 
-              <div className="bg-[#06D6A0]/10 border border-[#06D6A0]/30 rounded-lg p-4">
-                <p className="text-sm font-semibold text-[#06D6A0] mb-3">TypeScript Agent Example:</p>
+              <div className="bg-primary/10 border border-primary/30 rounded-lg p-4">
+                <p className="text-sm font-semibold text-primary mb-3">TypeScript Agent Example:</p>
                 <pre className="text-xs overflow-x-auto bg-black/60 p-4 rounded text-foreground/90">
 {`interface PaymentRequiredError {
   balance: number;
@@ -270,8 +270,8 @@ const result = await callAgentService(
                   </div>
                 </div>
 
-                <div className="bg-black/40 border border-[#06D6A0]/30 rounded-lg p-4">
-                  <div className="font-semibold text-[#06D6A0] mb-2">Stripe Balance</div>
+                <div className="bg-black/40 border border-primary/30 rounded-lg p-4">
+                  <div className="font-semibold text-primary mb-2">Stripe Balance</div>
                   <p className="text-xs text-foreground/70 mb-3">
                     Pre-funded balance managed via Stripe Connect
                   </p>
@@ -343,17 +343,17 @@ async function topUpBalance(userId: string, amount: number) {
 
       {/* Flow Diagram */}
       <section className="max-w-4xl mx-auto px-4 py-12">
-        <h2 className="text-3xl font-bold mb-6 text-[#F8FAFC]">x402 Flow Diagram</h2>
+        <h2 className="text-3xl font-bold mb-6 text-foreground">x402 Flow Diagram</h2>
         
         <Card className="bg-card/30 border-white/10">
           <CardContent className="pt-6">
             <div className="space-y-4">
               {/* Request Flow */}
               <div className="flex items-center gap-4">
-                <div className="bg-[#06D6A0]/20 text-[#06D6A0] px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
+                <div className="bg-primary/20 text-primary px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
                   Agent
                 </div>
-                <div className="flex-1 h-0.5 bg-gradient-to-r from-[#06D6A0] to-purple-500"></div>
+                <div className="flex-1 h-0.5 bg-gradient-to-r from-primary to-purple-500"></div>
                 <div className="text-sm text-foreground/70">POST /api/task</div>
                 <div className="flex-1 h-0.5 bg-gradient-to-r from-purple-500 to-cyan-500"></div>
                 <div className="bg-cyan-500/20 text-cyan-400 px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
@@ -372,12 +372,12 @@ async function topUpBalance(userId: string, amount: number) {
 
               {/* 402 Response */}
               <div className="flex items-center gap-4">
-                <div className="bg-[#06D6A0]/20 text-[#06D6A0] px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
+                <div className="bg-primary/20 text-primary px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
                   Agent
                 </div>
                 <div className="flex-1 h-0.5 bg-gradient-to-r from-cyan-500 to-purple-500"></div>
                 <div className="text-sm text-red-400 font-semibold">402 Payment Required</div>
-                <div className="flex-1 h-0.5 bg-gradient-to-r from-purple-500 to-[#06D6A0]"></div>
+                <div className="flex-1 h-0.5 bg-gradient-to-r from-purple-500 to-primary"></div>
                 <div className="bg-cyan-500/20 text-cyan-400 px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
                   Service
                 </div>
@@ -386,18 +386,18 @@ async function topUpBalance(userId: string, amount: number) {
               {/* Deposit */}
               <div className="flex items-center gap-4">
                 <div className="w-[100px]"></div>
-                <div className="flex-1 border-l-2 border-[#06D6A0]/50 pl-4 py-2">
-                  <div className="text-sm text-[#06D6A0] font-semibold">2. Deposit Funds</div>
+                <div className="flex-1 border-l-2 border-primary/50 pl-4 py-2">
+                  <div className="text-sm text-primary font-semibold">2. Deposit Funds</div>
                   <div className="text-xs text-foreground/60">amount = $1.03 (shortfall + buffer)</div>
                 </div>
               </div>
 
               {/* Retry Request */}
               <div className="flex items-center gap-4">
-                <div className="bg-[#06D6A0]/20 text-[#06D6A0] px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
+                <div className="bg-primary/20 text-primary px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
                   Agent
                 </div>
-                <div className="flex-1 h-0.5 bg-gradient-to-r from-[#06D6A0] to-purple-500"></div>
+                <div className="flex-1 h-0.5 bg-gradient-to-r from-primary to-purple-500"></div>
                 <div className="text-sm text-foreground/70">POST /api/task (retry)</div>
                 <div className="flex-1 h-0.5 bg-gradient-to-r from-purple-500 to-cyan-500"></div>
                 <div className="bg-cyan-500/20 text-cyan-400 px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
@@ -416,12 +416,12 @@ async function topUpBalance(userId: string, amount: number) {
 
               {/* Success Response */}
               <div className="flex items-center gap-4">
-                <div className="bg-[#06D6A0]/20 text-[#06D6A0] px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
+                <div className="bg-primary/20 text-primary px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
                   Agent
                 </div>
                 <div className="flex-1 h-0.5 bg-gradient-to-r from-cyan-500 to-green-500"></div>
                 <div className="text-sm text-green-400 font-semibold">200 OK + Result</div>
-                <div className="flex-1 h-0.5 bg-gradient-to-r from-green-500 to-[#06D6A0]"></div>
+                <div className="flex-1 h-0.5 bg-gradient-to-r from-green-500 to-primary"></div>
                 <div className="bg-cyan-500/20 text-cyan-400 px-4 py-2 rounded-lg font-mono text-sm font-semibold whitespace-nowrap">
                   Service
                 </div>
@@ -435,7 +435,7 @@ async function topUpBalance(userId: string, amount: number) {
 
       {/* Comparison */}
       <section className="max-w-4xl mx-auto px-4 py-12">
-        <h2 className="text-3xl font-bold mb-6 text-[#F8FAFC]">x402 vs Traditional Billing</h2>
+        <h2 className="text-3xl font-bold mb-6 text-foreground">x402 vs Traditional Billing</h2>
         
         <Card className="bg-card/30 border-white/10">
           <CardContent className="pt-6">
@@ -500,10 +500,10 @@ async function topUpBalance(userId: string, amount: number) {
 
       {/* When to Use */}
       <section className="max-w-4xl mx-auto px-4 py-12">
-        <h2 className="text-3xl font-bold mb-6 text-[#F8FAFC]">When to Use x402</h2>
+        <h2 className="text-3xl font-bold mb-6 text-foreground">When to Use x402</h2>
         
         <div className="grid md:grid-cols-2 gap-6">
-          <Card className="bg-gradient-to-br from-green-500/10 to-[#06D6A0]/5 border-green-500/30">
+          <Card className="bg-gradient-to-br from-green-500/10 to-primary/5 border-green-500/30">
             <CardHeader>
               <CardTitle className="flex items-center gap-3 text-green-400">
                 <span className="text-2xl">✓</span>
@@ -570,7 +570,7 @@ async function topUpBalance(userId: string, amount: number) {
           </Card>
         </div>
 
-        <Card className="bg-card/30 border-[#06D6A0]/20 mt-6">
+        <Card className="bg-card/30 border-primary/20 mt-6">
           <CardHeader>
             <CardTitle className="flex items-center gap-3">
               <span className="text-2xl">🎯</span>
@@ -595,8 +595,8 @@ async function topUpBalance(userId: string, amount: number) {
                 </p>
               </div>
             </div>
-            <div className="bg-[#06D6A0]/10 border border-[#06D6A0]/30 rounded-lg p-4 mt-4">
-              <p className="text-sm text-[#06D6A0]">
+            <div className="bg-primary/10 border border-primary/30 rounded-lg p-4 mt-4">
+              <p className="text-sm text-primary">
                 <strong>Best of both worlds:</strong> Let users choose. Pay-as-you-go for flexibility, 
                 subscription for committed users who want discounts and predictability.
               </p>
@@ -625,7 +625,7 @@ async function topUpBalance(userId: string, amount: number) {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <Link
                 href="/monetization/calculator"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 Calculate Your Pricing →
               </Link>
diff --git a/src/app/network/page.tsx b/src/app/network/page.tsx
index fb56cd5a..af5022af 100644
--- a/src/app/network/page.tsx
+++ b/src/app/network/page.tsx
@@ -51,7 +51,7 @@ export default function NetworkPage() {
       <main className="max-w-7xl mx-auto px-4 py-8">
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-4xl font-bold text-[#F8FAFC] mb-3">
+          <h1 className="text-4xl font-bold text-foreground mb-3">
             🕸️ Agent Network
           </h1>
           <p className="text-lg text-foreground/80">
diff --git a/src/app/news/[id]/comments-section.tsx b/src/app/news/[id]/comments-section.tsx
index 0ed30937..f1cce1d2 100644
--- a/src/app/news/[id]/comments-section.tsx
+++ b/src/app/news/[id]/comments-section.tsx
@@ -190,7 +190,7 @@ export function CommentsSection({ newsItemId }: CommentsSectionProps) {
   return (
     <section className="mt-8">
       {/* Comments section container */}
-      <div className="rounded-2xl border border-[#1A1F2E] bg-[#0F1420] p-6">
+      <div className="rounded-2xl border border-border bg-card p-6">
         {/* Section header */}
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
           <div className="flex items-center gap-2">
@@ -230,7 +230,7 @@ export function CommentsSection({ newsItemId }: CommentsSectionProps) {
         {isLoading ? (
           <CommentsLoadingSkeleton />
         ) : error ? (
-          <div className="rounded-xl border border-[#1A1F2E] bg-[#0A0E17] p-6 text-center">
+          <div className="rounded-xl border border-border bg-background p-6 text-center">
             <p className="text-solar mb-4">⚠️ {error}</p>
             <button
               onClick={fetchComments}
@@ -296,18 +296,18 @@ function CommentsLoadingSkeleton() {
       {[1, 2, 3].map((i) => (
         <div
           key={i}
-          className="rounded-xl border border-[#1A1F2E] bg-[#0A0E17] p-4 animate-pulse"
+          className="rounded-xl border border-border bg-background p-4 animate-pulse"
         >
           <div className="flex items-center gap-3 mb-3">
-            <div className="w-8 h-8 rounded-full bg-[#1A1F2E]" />
+            <div className="w-8 h-8 rounded-full bg-secondary" />
             <div className="flex-1">
-              <div className="h-4 w-32 bg-[#1A1F2E] rounded mb-1" />
-              <div className="h-3 w-20 bg-[#1A1F2E] rounded" />
+              <div className="h-4 w-32 bg-secondary rounded mb-1" />
+              <div className="h-3 w-20 bg-secondary rounded" />
             </div>
           </div>
           <div className="space-y-2">
-            <div className="h-4 w-full bg-[#1A1F2E] rounded" />
-            <div className="h-4 w-3/4 bg-[#1A1F2E] rounded" />
+            <div className="h-4 w-full bg-secondary rounded" />
+            <div className="h-4 w-3/4 bg-secondary rounded" />
           </div>
         </div>
       ))}
diff --git a/src/app/news/[id]/page.tsx b/src/app/news/[id]/page.tsx
index 57c5344f..a27d9bb6 100644
--- a/src/app/news/[id]/page.tsx
+++ b/src/app/news/[id]/page.tsx
@@ -37,23 +37,23 @@ export async function generateMetadata({ params }: NewsDetailPageProps): Promise
 }
 
 const categoryColors: Record<string, { bg: string; text: string }> = {
-  tools: { bg: "bg-[#06D6A0]/10", text: "text-[#06D6A0]" },
-  skills: { bg: "bg-[#F59E0B]/10", text: "text-[#F59E0B]" },
-  models: { bg: "bg-[#8B5CF6]/10", text: "text-[#8B5CF6]" },
-  community: { bg: "bg-[#3B82F6]/10", text: "text-[#3B82F6]" },
-  breaking: { bg: "bg-[#EC4899]/10", text: "text-[#EC4899]" },
+  tools: { bg: "bg-primary/10", text: "text-primary" },
+  skills: { bg: "bg-solar/10", text: "text-solar" },
+  models: { bg: "bg-purple/10", text: "text-purple" },
+  community: { bg: "bg-electric-blue/10", text: "text-electric-blue" },
+  breaking: { bg: "bg-aurora-pink/10", text: "text-aurora-pink" },
 };
 
 const tagColors: Record<string, string> = {
-  breaking: "bg-[#EC4899]/10 text-[#EC4899] border-[#EC4899]/20",
-  security: "bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20",
-  openclaw: "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20",
-  community: "bg-[#3B82F6]/10 text-[#3B82F6] border-[#3B82F6]/20",
-  tools: "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20",
-  skills: "bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20",
-  enterprise: "bg-[#3B82F6]/10 text-[#3B82F6] border-[#3B82F6]/20",
-  models: "bg-[#8B5CF6]/10 text-[#8B5CF6] border-[#8B5CF6]/20",
-  mcp: "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20",
+  breaking: "bg-aurora-pink/10 text-aurora-pink border-aurora-pink/20",
+  security: "bg-solar/10 text-solar border-solar/20",
+  openclaw: "bg-primary/10 text-primary border-primary/20",
+  community: "bg-electric-blue/10 text-electric-blue border-electric-blue/20",
+  tools: "bg-primary/10 text-primary border-primary/20",
+  skills: "bg-solar/10 text-solar border-solar/20",
+  enterprise: "bg-electric-blue/10 text-electric-blue border-electric-blue/20",
+  models: "bg-purple/10 text-purple border-purple/20",
+  mcp: "bg-primary/10 text-primary border-primary/20",
 };
 
 function getCategoryFromTags(tags: string[]): string {
@@ -130,7 +130,7 @@ export default async function NewsDetailPage({ params }: NewsDetailPageProps) {
         </p>
         
         {/* Divider */}
-        <div className="h-px bg-[#1A1F2E] mb-6" />
+        <div className="h-px bg-secondary mb-6" />
         
         {/* Article content (summary) */}
         <div className="prose prose-invert max-w-none">
@@ -171,7 +171,7 @@ export default async function NewsDetailPage({ params }: NewsDetailPageProps) {
       </div>
       
       {/* Agent-native link */}
-      <div className="max-w-[768px] mx-auto px-6 pb-8 border-t border-[#1A1F2E] pt-6">
+      <div className="max-w-[768px] mx-auto px-6 pb-8 border-t border-border pt-6">
         <p className="text-xs text-muted-foreground text-center">
           View as markdown:{" "}
           <a
diff --git a/src/app/newsletter/page.tsx b/src/app/newsletter/page.tsx
index 67f6cb5c..04d0cb17 100644
--- a/src/app/newsletter/page.tsx
+++ b/src/app/newsletter/page.tsx
@@ -64,7 +64,7 @@ export default function NewsletterPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(webPageJsonLd) }}
@@ -73,11 +73,11 @@ export default function NewsletterPage() {
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[300px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Stay in the Loop
           </h1>
           <p className="text-xl text-foreground/80 max-w-2xl mx-auto">
@@ -92,7 +92,7 @@ export default function NewsletterPage() {
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
           {/* Subscription Form */}
           <div className="lg:col-span-2">
-            <Card className="bg-[#0f0f0f] border-white/10">
+            <Card className="bg-background border-white/10">
               <CardHeader>
                 <CardTitle className="text-2xl">Subscribe to Our Newsletter</CardTitle>
                 <p className="text-muted-foreground text-sm">
@@ -102,9 +102,9 @@ export default function NewsletterPage() {
               <CardContent>
                 {subscribeSubmitted ? (
                   <div className="p-8 text-center">
-                    <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#06D6A0]/10 mb-4">
+                    <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4">
                       <svg
-                        className="w-8 h-8 text-[#06D6A0]"
+                        className="w-8 h-8 text-primary"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
@@ -140,7 +140,7 @@ export default function NewsletterPage() {
                         onChange={(e) =>
                           setSubscribeForm({ ...subscribeForm, email: e.target.value })
                         }
-                        className="bg-[#0a0a0a] border-white/10 focus:border-[#06D6A0]"
+                        className="bg-background border-white/10 focus:border-primary"
                         placeholder="your@email.com"
                       />
                     </div>
@@ -160,7 +160,7 @@ export default function NewsletterPage() {
                         onChange={(e) =>
                           setSubscribeForm({ ...subscribeForm, name: e.target.value })
                         }
-                        className="bg-[#0a0a0a] border-white/10 focus:border-[#06D6A0]"
+                        className="bg-background border-white/10 focus:border-primary"
                         placeholder="Your name"
                       />
                     </div>
@@ -196,7 +196,7 @@ export default function NewsletterPage() {
 
                     <Button
                       type="submit"
-                      className="w-full bg-[#06D6A0] hover:bg-[#06D6A0]/90 text-black font-medium"
+                      className="w-full bg-primary hover:bg-primary/90 text-black font-medium"
                     >
                       Subscribe
                     </Button>
@@ -208,11 +208,11 @@ export default function NewsletterPage() {
 
           {/* Subscriber Count Badge */}
           <div className="space-y-6">
-            <Card className="bg-[#0f0f0f] border-white/10">
+            <Card className="bg-background border-white/10">
               <CardContent className="pt-6">
                 <div className="text-center">
-                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#06D6A0]/10 mb-4">
-                    <Users className="w-8 h-8 text-[#06D6A0]" />
+                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4">
+                    <Users className="w-8 h-8 text-primary" />
                   </div>
                   <h3 className="text-2xl font-bold mb-2">
                     {newsletterData.subscriberCount.toLocaleString()}+
@@ -235,11 +235,11 @@ export default function NewsletterPage() {
             {newsletterData.benefits.map((benefit) => {
               const Icon = iconMap[benefit.icon as keyof typeof iconMap];
               return (
-                <Card key={benefit.id} className="bg-[#0f0f0f] border-white/10">
+                <Card key={benefit.id} className="bg-background border-white/10">
                   <CardContent className="pt-6">
                     <div className="flex flex-col items-center text-center">
-                      <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-[#06D6A0]/10 mb-4">
-                        <Icon className="w-6 h-6 text-[#06D6A0]" />
+                      <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 mb-4">
+                        <Icon className="w-6 h-6 text-primary" />
                       </div>
                       <h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>
                       <p className="text-sm text-muted-foreground">
@@ -260,7 +260,7 @@ export default function NewsletterPage() {
           </h2>
           <div className="space-y-4">
             {newsletterData.recentIssues.map((issue) => (
-              <Card key={issue.id} className="bg-[#0f0f0f] border-white/10 hover:border-[#06D6A0]/30 transition-colors">
+              <Card key={issue.id} className="bg-background border-white/10 hover:border-primary/30 transition-colors">
                 <CardContent className="p-6">
                   <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
                     <div className="flex-1">
@@ -281,7 +281,7 @@ export default function NewsletterPage() {
                     </div>
                     <Link
                       href={issue.readUrl}
-                      className="flex items-center gap-2 text-sm text-[#06D6A0] hover:text-[#06D6A0]/80 transition-colors whitespace-nowrap"
+                      className="flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors whitespace-nowrap"
                     >
                       Read Online
                       <ExternalLink className="w-4 h-4" />
@@ -295,7 +295,7 @@ export default function NewsletterPage() {
 
         {/* Unsubscribe Section */}
         <div className="mt-16">
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardHeader>
               <CardTitle className="text-xl">Need to Unsubscribe?</CardTitle>
               <p className="text-muted-foreground text-sm">
@@ -305,9 +305,9 @@ export default function NewsletterPage() {
             <CardContent>
               {unsubscribeSubmitted ? (
                 <div className="p-8 text-center">
-                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#06D6A0]/10 mb-4">
+                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4">
                     <svg
-                      className="w-8 h-8 text-[#06D6A0]"
+                      className="w-8 h-8 text-primary"
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
@@ -341,7 +341,7 @@ export default function NewsletterPage() {
                       required
                       value={unsubscribeToken}
                       onChange={(e) => setUnsubscribeToken(e.target.value)}
-                      className="bg-[#0a0a0a] border-white/10 focus:border-[#06D6A0]"
+                      className="bg-background border-white/10 focus:border-primary"
                       placeholder="Enter your token"
                     />
                   </div>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 0be37276..9bba4e05 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -148,7 +148,7 @@ export default function NotFound() {
 
         {/* Home Button */}
         <div>
-          <Button asChild size="lg" className="bg-cyan text-[#0A0E17] hover:brightness-110">
+          <Button asChild size="lg" className="bg-cyan text-background hover:brightness-110">
             <Link href="/">
               ← Back to Homepage
             </Link>
diff --git a/src/app/notifications/page.tsx b/src/app/notifications/page.tsx
index 234e7b04..a7b93f7d 100644
--- a/src/app/notifications/page.tsx
+++ b/src/app/notifications/page.tsx
@@ -297,7 +297,7 @@ export default function NotificationsPage() {
     <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950">
       <div className="max-w-6xl mx-auto px-4 py-10">
         <div className="mb-8">
-          <Link href="/" className="text-[#06D6A0] hover:underline text-sm mb-4 inline-block">
+          <Link href="/" className="text-primary hover:underline text-sm mb-4 inline-block">
             ← Back to Home
           </Link>
           <div className="flex items-center justify-between gap-3">
@@ -306,7 +306,7 @@ export default function NotificationsPage() {
               <p className="text-slate-400 mt-2">Manage category and channel preferences, then save to persist.</p>
             </div>
             {unreadCount > 0 && (
-              <Badge variant="outline" className="bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/30 text-sm px-3 py-1">
+              <Badge variant="outline" className="bg-primary/10 text-primary border-primary/30 text-sm px-3 py-1">
                 {unreadCount} unread
               </Badge>
             )}
@@ -356,7 +356,7 @@ export default function NotificationsPage() {
                                 <Switch
                                   checked={preferences.categories[category].channels[channel]}
                                   onCheckedChange={(checked) => setCategoryChannel(category, channel, checked)}
-                                  className="data-[state=checked]:bg-[#06D6A0]"
+                                  className="data-[state=checked]:bg-primary"
                                   aria-label={`${CATEGORY_LABELS[category]} ${CHANNEL_LABELS[channel]} toggle`}
                                 />
                               </td>
@@ -392,7 +392,7 @@ export default function NotificationsPage() {
                     <Button
                       onClick={handleSave}
                       disabled={isSaving || isResetting}
-                      className="bg-[#06D6A0] hover:bg-[#05c291] text-white"
+                      className="bg-primary hover:bg-primary/85 text-white"
                     >
                       {isSaving ? "Saving..." : "Save"}
                     </Button>
@@ -404,7 +404,7 @@ export default function NotificationsPage() {
                     >
                       {isResetting ? "Resetting..." : "Reset to defaults"}
                     </Button>
-                    {statusMessage && <p className="text-sm text-[#06D6A0] self-center">{statusMessage}</p>}
+                    {statusMessage && <p className="text-sm text-primary self-center">{statusMessage}</p>}
                   </div>
                 </>
               )}
@@ -449,7 +449,7 @@ export default function NotificationsPage() {
                     className={`block rounded-lg border p-4 transition-all ${
                       notif.read
                         ? "bg-slate-800/30 border-slate-700/50 hover:border-slate-600"
-                        : "bg-slate-800/70 border-[#06D6A0]/30 hover:border-[#06D6A0]/50"
+                        : "bg-slate-800/70 border-primary/30 hover:border-primary/50"
                     }`}
                   >
                     <div className="flex items-start justify-between gap-3 mb-2">
@@ -458,7 +458,7 @@ export default function NotificationsPage() {
                         className={`text-xs ${
                           notif.read
                             ? "bg-slate-700/30 text-slate-400 border-slate-600"
-                            : "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/30"
+                            : "bg-primary/10 text-primary border-primary/30"
                         }`}
                       >
                         {NOTIFICATION_TYPE_LABELS[notif.type]}
diff --git a/src/app/observability/page.tsx b/src/app/observability/page.tsx
index 5dd30412..e9e38877 100644
--- a/src/app/observability/page.tsx
+++ b/src/app/observability/page.tsx
@@ -185,18 +185,18 @@ export default function ObservabilityPage() {
   };
 
   return (
-    <main id="main-content" className="min-h-screen bg-[#0a0a0a]">
+    <main id="main-content" className="min-h-screen bg-background">
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[300px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16">
-          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#06D6A0]/10 mb-6">
-            <Eye className="w-8 h-8 text-[#06D6A0]" />
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-6">
+            <Eye className="w-8 h-8 text-primary" />
           </div>
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Agent <span className="aurora-text">Observability</span>
           </h1>
           <p className="text-xl text-foreground/80 max-w-2xl">
@@ -207,7 +207,7 @@ export default function ObservabilityPage() {
 
       {/* Intro Section */}
       <section className="relative max-w-5xl mx-auto px-4 py-8">
-        <Card className="bg-[#0f0f0f] border-white/10">
+        <Card className="bg-background border-white/10">
           <CardContent className="pt-6 space-y-4">
             <p className="text-foreground/80 leading-relaxed">
               Production AI agents need visibility into their behavior, performance, and errors. 
@@ -216,11 +216,11 @@ export default function ObservabilityPage() {
             </p>
             <p className="text-sm text-foreground/70">
               💡 <strong>Before deploying:</strong> Use{" "}
-              <a href="/diagnostics" className="text-[#06D6A0] hover:underline">
+              <a href="/diagnostics" className="text-primary hover:underline">
                 Agent Diagnostics
               </a>{" "}
               to validate your configuration, or{" "}
-              <a href="/trace" className="text-[#06D6A0] hover:underline">
+              <a href="/trace" className="text-primary hover:underline">
                 Trace Viewer
               </a>{" "}
               to inspect live agent runs.
@@ -241,8 +241,8 @@ export default function ObservabilityPage() {
                   onClick={() => setSelectedCategory(cat)}
                   className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                     selectedCategory === cat
-                      ? "bg-[#06D6A0] text-[#0a0a0a]"
-                      : "bg-[#0f0f0f] text-foreground/70 hover:bg-[#0f0f0f]/80"
+                      ? "bg-primary text-background"
+                      : "bg-background text-foreground/70 hover:bg-background/80"
                   }`}
                 >
                   {cat.charAt(0).toUpperCase() + cat.slice(1)}
@@ -260,8 +260,8 @@ export default function ObservabilityPage() {
                   onClick={() => setSelectedHost(host)}
                   className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                     selectedHost === host
-                      ? "bg-[#06D6A0] text-[#0a0a0a]"
-                      : "bg-[#0f0f0f] text-foreground/70 hover:bg-[#0f0f0f]/80"
+                      ? "bg-primary text-background"
+                      : "bg-background text-foreground/70 hover:bg-background/80"
                   }`}
                 >
                   {host}
@@ -276,17 +276,17 @@ export default function ObservabilityPage() {
       <section className="relative max-w-5xl mx-auto px-4 py-6 pb-16">
         <div className="grid gap-6">
           {filteredTools.map((tool, idx) => (
-            <Card key={idx} className="bg-[#0f0f0f] border-white/10">
+            <Card key={idx} className="bg-background border-white/10">
               <CardHeader>
                 <div className="flex items-start justify-between">
                   <div className="flex items-center gap-3">
-                    <div className="p-2 rounded-lg bg-[#06D6A0]/10">
+                    <div className="p-2 rounded-lg bg-primary/10">
                       {tool.icon}
                     </div>
                     <div>
                       <CardTitle className="text-xl">{tool.name}</CardTitle>
                       <div className="flex items-center gap-2 mt-1">
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-[#06D6A0]/10 text-[#06D6A0] text-xs font-medium">
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-primary text-xs font-medium">
                           {getCategoryIcon(tool.category)}
                           {tool.category}
                         </span>
@@ -310,7 +310,7 @@ export default function ObservabilityPage() {
                 
                 <div>
                   <h4 className="text-sm font-semibold mb-2">Installation</h4>
-                  <code className="block px-4 py-2 bg-[#0a0a0a] border border-white/5 rounded text-sm text-[#06D6A0] font-mono">
+                  <code className="block px-4 py-2 bg-background border border-white/5 rounded text-sm text-primary font-mono">
                     {tool.setup}
                   </code>
                 </div>
@@ -318,7 +318,7 @@ export default function ObservabilityPage() {
                 {tool.codeSnippet && (
                   <div>
                     <h4 className="text-sm font-semibold mb-2">Quick Start</h4>
-                    <pre className="px-4 py-3 bg-[#0a0a0a] border border-white/5 rounded text-xs text-foreground/80 font-mono overflow-x-auto">
+                    <pre className="px-4 py-3 bg-background border border-white/5 rounded text-xs text-foreground/80 font-mono overflow-x-auto">
                       {tool.codeSnippet}
                     </pre>
                   </div>
@@ -329,7 +329,7 @@ export default function ObservabilityPage() {
         </div>
 
         {filteredTools.length === 0 && (
-          <Card className="bg-[#0f0f0f] border-white/10">
+          <Card className="bg-background border-white/10">
             <CardContent className="py-12 text-center">
               <p className="text-foreground/60">
                 No tools match your filters. Try adjusting your selection.
@@ -341,7 +341,7 @@ export default function ObservabilityPage() {
 
       {/* Integration Matrix */}
       <section className="relative max-w-5xl mx-auto px-4 py-8 pb-16">
-        <Card className="bg-[#0f0f0f] border-white/10">
+        <Card className="bg-background border-white/10">
           <CardHeader>
             <CardTitle className="text-2xl">Integration Matrix</CardTitle>
           </CardHeader>
diff --git a/src/app/onboarding/onboarding-wizard.tsx b/src/app/onboarding/onboarding-wizard.tsx
index 0abd1736..dc5a1dbe 100644
--- a/src/app/onboarding/onboarding-wizard.tsx
+++ b/src/app/onboarding/onboarding-wizard.tsx
@@ -505,7 +505,7 @@ export function OnboardingWizard() {
         <Button
           onClick={() => setCurrentStep((s) => Math.min(TOTAL_STEPS, s + 1))}
           disabled={currentStep === TOTAL_STEPS}
-          className="bg-cyan text-[#0A0E17] hover:brightness-110"
+          className="bg-cyan text-background hover:brightness-110"
         >
           Next
         </Button>
diff --git a/src/app/open-source/page.tsx b/src/app/open-source/page.tsx
index 7bd84bcd..85b1fc0c 100644
--- a/src/app/open-source/page.tsx
+++ b/src/app/open-source/page.tsx
@@ -106,15 +106,15 @@ export default function OpenSourcePage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       {/* Mobile Nav */}
 
       {/* Hero Section */}
       <section className="relative overflow-hidden border-b border-white/10">
-        <div className="absolute inset-0 bg-gradient-to-br from-[#06D6A0]/10 via-transparent to-transparent" />
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-transparent" />
         <div className="relative max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24">
           <div className="text-center">
-            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-[#06D6A0] to-white bg-clip-text text-transparent">
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-primary to-white bg-clip-text text-transparent">
               Open Source at forAgents.dev
             </h1>
             <p className="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
@@ -133,23 +133,23 @@ export default function OpenSourcePage() {
           </p>
         </div>
         <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          <div className="bg-white/5 border border-white/10 rounded-lg p-6 sm:p-8 hover:border-[#06D6A0]/50 transition-colors">
+          <div className="bg-white/5 border border-white/10 rounded-lg p-6 sm:p-8 hover:border-primary/50 transition-colors">
             <div className="text-4xl mb-4">🔓</div>
-            <h3 className="text-xl font-semibold mb-3 text-[#06D6A0]">Transparency First</h3>
+            <h3 className="text-xl font-semibold mb-3 text-primary">Transparency First</h3>
             <p className="text-gray-400">
               No black boxes. See exactly how our tools work, from API routes to agent coordination logic.
             </p>
           </div>
-          <div className="bg-white/5 border border-white/10 rounded-lg p-6 sm:p-8 hover:border-[#06D6A0]/50 transition-colors">
+          <div className="bg-white/5 border border-white/10 rounded-lg p-6 sm:p-8 hover:border-primary/50 transition-colors">
             <div className="text-4xl mb-4">🤝</div>
-            <h3 className="text-xl font-semibold mb-3 text-[#06D6A0]">Community Built</h3>
+            <h3 className="text-xl font-semibold mb-3 text-primary">Community Built</h3>
             <p className="text-gray-400">
               Contributions from developers worldwide make our platform better every day. Your code matters.
             </p>
           </div>
-          <div className="bg-white/5 border border-white/10 rounded-lg p-6 sm:p-8 hover:border-[#06D6A0]/50 transition-colors">
+          <div className="bg-white/5 border border-white/10 rounded-lg p-6 sm:p-8 hover:border-primary/50 transition-colors">
             <div className="text-4xl mb-4">⚡</div>
-            <h3 className="text-xl font-semibold mb-3 text-[#06D6A0]">Innovation Velocity</h3>
+            <h3 className="text-xl font-semibold mb-3 text-primary">Innovation Velocity</h3>
             <p className="text-gray-400">
               Open collaboration accelerates progress. Hundreds of minds building together move faster than one.
             </p>
@@ -169,10 +169,10 @@ export default function OpenSourcePage() {
           {repos.map((repo) => (
             <div
               key={repo.name}
-              className="bg-white/5 border border-white/10 rounded-lg p-6 hover:border-[#06D6A0]/50 hover:bg-white/10 transition-all group"
+              className="bg-white/5 border border-white/10 rounded-lg p-6 hover:border-primary/50 hover:bg-white/10 transition-all group"
             >
               <div className="flex items-start justify-between mb-3">
-                <h3 className="text-lg font-semibold text-white group-hover:text-[#06D6A0] transition-colors">
+                <h3 className="text-lg font-semibold text-white group-hover:text-primary transition-colors">
                   {repo.name}
                 </h3>
                 <div className="flex items-center gap-1 text-yellow-400 text-sm">
@@ -195,7 +195,7 @@ export default function OpenSourcePage() {
                   href={repo.link}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-sm text-[#06D6A0] hover:underline inline-flex items-center gap-1"
+                  className="text-sm text-primary hover:underline inline-flex items-center gap-1"
                 >
                   View on GitHub
                   <span className="text-xs">↗</span>
@@ -218,14 +218,14 @@ export default function OpenSourcePage() {
           {contributionSteps.map((step) => (
             <div
               key={step.step}
-              className="relative bg-white/5 border border-white/10 rounded-lg p-6 hover:border-[#06D6A0]/50 transition-colors"
+              className="relative bg-white/5 border border-white/10 rounded-lg p-6 hover:border-primary/50 transition-colors"
             >
               <div className="absolute top-4 right-4 text-6xl font-bold text-white/5">
                 {step.step}
               </div>
               <div className="relative">
                 <div className="text-5xl mb-4">{step.icon}</div>
-                <h3 className="text-xl font-semibold mb-2 text-[#06D6A0]">
+                <h3 className="text-xl font-semibold mb-2 text-primary">
                   {step.title}
                 </h3>
                 <p className="text-gray-400 text-sm">
@@ -240,7 +240,7 @@ export default function OpenSourcePage() {
             href="https://github.com/reflectt/foragents.dev/blob/main/CONTRIBUTING.md"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-2 text-[#06D6A0] hover:underline"
+            className="inline-flex items-center gap-2 text-primary hover:underline"
           >
             Read our full contribution guide
             <span className="text-sm">→</span>
@@ -260,7 +260,7 @@ export default function OpenSourcePage() {
           {contributors.map((contributor, index) => (
             <div
               key={index}
-              className="flex items-center justify-center w-14 h-14 sm:w-16 sm:h-16 text-3xl sm:text-4xl bg-white/5 border border-white/10 rounded-full hover:border-[#06D6A0]/50 hover:scale-110 transition-all cursor-pointer"
+              className="flex items-center justify-center w-14 h-14 sm:w-16 sm:h-16 text-3xl sm:text-4xl bg-white/5 border border-white/10 rounded-full hover:border-primary/50 hover:scale-110 transition-all cursor-pointer"
               title={contributor.name}
             >
               {contributor.emoji}
@@ -275,7 +275,7 @@ export default function OpenSourcePage() {
             href="https://github.com/reflectt/foragents.dev"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-2 bg-[#06D6A0] hover:bg-[#05c794] text-black font-semibold px-6 py-3 rounded-lg transition-colors"
+            className="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-black font-semibold px-6 py-3 rounded-lg transition-colors"
           >
             Start Contributing Today
           </a>
@@ -284,7 +284,7 @@ export default function OpenSourcePage() {
 
       {/* License */}
       <section className="max-w-6xl mx-auto px-4 sm:px-6 py-12 sm:py-20 border-t border-white/10">
-        <div className="bg-gradient-to-br from-[#06D6A0]/10 to-transparent border border-[#06D6A0]/30 rounded-lg p-8 sm:p-12 text-center">
+        <div className="bg-gradient-to-br from-primary/10 to-transparent border border-primary/30 rounded-lg p-8 sm:p-12 text-center">
           <div className="text-5xl mb-4">📜</div>
           <h2 className="text-2xl sm:text-3xl font-bold mb-4">MIT License</h2>
           <p className="text-gray-400 max-w-2xl mx-auto mb-6">
@@ -295,7 +295,7 @@ export default function OpenSourcePage() {
               href="https://github.com/reflectt/foragents.dev/blob/main/LICENSE"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 px-6 py-3 rounded-lg border border-[#06D6A0] text-[#06D6A0] hover:bg-[#06D6A0]/10 transition-colors"
+              className="inline-flex items-center gap-2 px-6 py-3 rounded-lg border border-primary text-primary hover:bg-primary/10 transition-colors"
             >
               Read the License
               <span className="text-sm">↗</span>
@@ -304,7 +304,7 @@ export default function OpenSourcePage() {
               href="https://opensource.org/licenses/MIT"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-gray-400 hover:text-[#06D6A0] transition-colors"
+              className="text-sm text-gray-400 hover:text-primary transition-colors"
             >
               Learn more about MIT License →
             </a>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d3be96c4..4bc7c582 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -145,12 +145,12 @@ export default async function Home() {
         <div className="relative max-w-[640px] mx-auto px-4 py-20 md:py-24 text-center">
           {/* Logo mark */}
           <p className="font-mono font-bold text-xl mb-6">
-            <span className="text-[#F8FAFC]">forAgents</span>
+            <span className="text-foreground">forAgents</span>
             <span className="text-cyan">.dev</span>
           </p>
 
           {/* Headline with blinking cursor */}
-          <h1 className="text-[32px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4 leading-tight">
+          <h1 className="text-[32px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4 leading-tight">
             The MCP Server Registry<span className="cursor-blink" />
           </h1>
 
@@ -168,7 +168,7 @@ export default async function Home() {
           <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-8">
             <Link
               href="/mcp"
-              className="inline-flex items-center justify-center h-12 px-6 rounded-lg bg-cyan text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all hover:-translate-y-0.5 hover:shadow-lg"
+              className="inline-flex items-center justify-center h-12 px-6 rounded-lg bg-cyan text-background font-semibold text-sm hover:brightness-110 transition-all hover:-translate-y-0.5 hover:shadow-lg"
             >
               Browse Servers
             </Link>
@@ -360,7 +360,7 @@ export default async function Home() {
                 href="https://github.com/reflectt/agent-team-kit"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-cyan text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-cyan text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 View on GitHub ↗
               </a>
diff --git a/src/app/partners/[slug]/page.tsx b/src/app/partners/[slug]/page.tsx
index a43714b4..0673f356 100644
--- a/src/app/partners/[slug]/page.tsx
+++ b/src/app/partners/[slug]/page.tsx
@@ -88,7 +88,7 @@ export default async function PartnerDetailPage({ params }: Props) {
   const { docsUrl, contactEmail, features, integrationGuide } = getSafePartnerFields(partner);
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <div className="border-b border-white/5">
         <div className="max-w-4xl mx-auto px-4 py-4">
           <nav className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -107,7 +107,7 @@ export default async function PartnerDetailPage({ params }: Props) {
 
       <section className="relative overflow-hidden">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-16">
@@ -119,14 +119,14 @@ export default async function PartnerDetailPage({ params }: Props) {
             />
             <div className="flex-1">
               <div className="flex items-center gap-3 mb-3">
-                <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC]">{partner.name}</h1>
+                <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground">{partner.name}</h1>
               </div>
               <div className="flex flex-wrap items-center gap-2 mb-4">
                 <Badge variant="outline" className={getTierBadgeColor(partner.tier)}>
                   {tierLabels[partner.tier]} Partner
                 </Badge>
                 {partner.featured && (
-                  <Badge variant="outline" className="border-[#06D6A0]/40 text-[#8af5d8]">
+                  <Badge variant="outline" className="border-primary/40 text-primary/70">
                     Featured
                   </Badge>
                 )}
@@ -144,7 +144,7 @@ export default async function PartnerDetailPage({ params }: Props) {
               href={docsUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
             >
               Visit Website ↗
             </a>
@@ -170,8 +170,8 @@ export default async function PartnerDetailPage({ params }: Props) {
             <ul className="space-y-3">
               {features.map((feature, index) => (
                 <li key={index} className="flex items-start gap-3">
-                  <div className="flex-shrink-0 w-6 h-6 rounded-full bg-[#06D6A0]/20 flex items-center justify-center mt-0.5">
-                    <span className="text-[#06D6A0] text-sm">✓</span>
+                  <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center mt-0.5">
+                    <span className="text-primary text-sm">✓</span>
                   </div>
                   <span className="text-foreground/90">{feature}</span>
                 </li>
@@ -196,7 +196,7 @@ export default async function PartnerDetailPage({ params }: Props) {
       </section>
 
       <section className="max-w-4xl mx-auto px-4 pb-16">
-        <Card className="bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5 border-[#06D6A0]/20">
+        <Card className="bg-gradient-to-br from-primary/5 via-card/80 to-purple/5 border-primary/20">
           <CardHeader>
             <CardTitle className="text-2xl">Get in Touch</CardTitle>
             <p className="text-muted-foreground">Questions about collaborating with {partner.name}?</p>
@@ -206,24 +206,24 @@ export default async function PartnerDetailPage({ params }: Props) {
               href={partner.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center justify-between p-4 rounded-lg bg-card/40 border border-white/10 hover:border-[#06D6A0]/30 transition-all group"
+              className="flex items-center justify-between p-4 rounded-lg bg-card/40 border border-white/10 hover:border-primary/30 transition-all group"
             >
               <div>
                 <p className="font-semibold text-foreground">Partner Website</p>
                 <p className="text-sm text-muted-foreground">{partner.url}</p>
               </div>
-              <span className="text-[#06D6A0] group-hover:translate-x-1 transition-transform">→</span>
+              <span className="text-primary group-hover:translate-x-1 transition-transform">→</span>
             </a>
 
             <a
               href={`mailto:${contactEmail}`}
-              className="flex items-center justify-between p-4 rounded-lg bg-card/40 border border-white/10 hover:border-[#06D6A0]/30 transition-all group"
+              className="flex items-center justify-between p-4 rounded-lg bg-card/40 border border-white/10 hover:border-primary/30 transition-all group"
             >
               <div>
                 <p className="font-semibold text-foreground">Partner Contact</p>
                 <p className="text-sm text-muted-foreground">{contactEmail}</p>
               </div>
-              <span className="text-[#06D6A0] group-hover:translate-x-1 transition-transform">→</span>
+              <span className="text-primary group-hover:translate-x-1 transition-transform">→</span>
             </a>
           </CardContent>
         </Card>
diff --git a/src/app/partners/page.tsx b/src/app/partners/page.tsx
index a69a69ef..99366fef 100644
--- a/src/app/partners/page.tsx
+++ b/src/app/partners/page.tsx
@@ -196,15 +196,15 @@ export default function PartnersPage() {
   const hasResults = partners.length > 0;
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden min-h-[320px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-20 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Partner Directory
           </h1>
           <p className="text-xl text-foreground/80 mb-2">Browse ecosystem partners and apply to join.</p>
@@ -230,7 +230,7 @@ export default function PartnersPage() {
               onClick={() => setTierFilter("all")}
               className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                 tierFilter === "all"
-                  ? "bg-[#06D6A0] text-[#0a0a0a]"
+                  ? "bg-primary text-background"
                   : "border border-white/10 text-foreground hover:bg-white/5"
               }`}
             >
@@ -243,7 +243,7 @@ export default function PartnersPage() {
                 onClick={() => setTierFilter(tier)}
                 className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                   tierFilter === tier
-                    ? "bg-[#06D6A0] text-[#0a0a0a]"
+                    ? "bg-primary text-background"
                     : "border border-white/10 text-foreground hover:bg-white/5"
                 }`}
               >
@@ -258,7 +258,7 @@ export default function PartnersPage() {
               onClick={() => setCategoryFilter("all")}
               className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                 categoryFilter === "all"
-                  ? "bg-cyan-400 text-[#0a0a0a]"
+                  ? "bg-cyan-400 text-background"
                   : "border border-white/10 text-foreground hover:bg-white/5"
               }`}
             >
@@ -271,7 +271,7 @@ export default function PartnersPage() {
                 onClick={() => setCategoryFilter(category)}
                 className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                   categoryFilter === category
-                    ? "bg-cyan-400 text-[#0a0a0a]"
+                    ? "bg-cyan-400 text-background"
                     : "border border-white/10 text-foreground hover:bg-white/5"
                 }`}
               >
@@ -296,7 +296,7 @@ export default function PartnersPage() {
                   {featuredPartners.map((partner) => (
                     <Card
                       key={partner.id}
-                      className="relative overflow-hidden bg-card/40 border-[#06D6A0]/30 ring-1 ring-[#06D6A0]/20"
+                      className="relative overflow-hidden bg-card/40 border-primary/30 ring-1 ring-primary/20"
                     >
                       <CardHeader>
                         <div className="flex items-center justify-between gap-3">
@@ -308,7 +308,7 @@ export default function PartnersPage() {
                             />
                             <CardTitle className="text-lg">{partner.name}</CardTitle>
                           </div>
-                          <Badge className="bg-[#06D6A0]/20 text-[#8af5d8] border-[#06D6A0]/30">Featured</Badge>
+                          <Badge className="bg-primary/20 text-primary/70 border-primary/30">Featured</Badge>
                         </div>
                         <div className="flex items-center flex-wrap gap-2 pt-3">
                           <Badge variant="outline" className={getTierBadgeColor(partner.tier)}>
@@ -325,7 +325,7 @@ export default function PartnersPage() {
                       <CardContent className="space-y-4">
                         <p className="text-sm text-muted-foreground">{partner.description}</p>
                         <div className="flex items-center gap-3 text-sm font-medium">
-                          <Link href={`/partners/${partner.slug}`} className="text-[#06D6A0] hover:underline">
+                          <Link href={`/partners/${partner.slug}`} className="text-primary hover:underline">
                             View details →
                           </Link>
                           <a
@@ -351,7 +351,7 @@ export default function PartnersPage() {
                   {directoryPartners.map((partner) => (
                     <Card
                       key={partner.id}
-                      className="relative overflow-hidden bg-card/30 border-white/10 hover:border-[#06D6A0]/30 transition-all"
+                      className="relative overflow-hidden bg-card/30 border-white/10 hover:border-primary/30 transition-all"
                     >
                       <CardHeader>
                         <div className="flex items-center gap-3">
@@ -384,7 +384,7 @@ export default function PartnersPage() {
                           ))}
                         </div>
                         <div className="flex items-center gap-3 text-sm font-medium">
-                          <Link href={`/partners/${partner.slug}`} className="text-[#06D6A0] hover:underline">
+                          <Link href={`/partners/${partner.slug}`} className="text-primary hover:underline">
                             View details →
                           </Link>
                           <a
@@ -409,7 +409,7 @@ export default function PartnersPage() {
       <Separator className="opacity-10" />
 
       <section id="apply" className="max-w-3xl mx-auto px-4 py-16">
-        <Card className="bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5 border-[#06D6A0]/20">
+        <Card className="bg-gradient-to-br from-primary/5 via-card/80 to-purple/5 border-primary/20">
           <CardHeader>
             <CardTitle className="text-2xl">Become a Partner</CardTitle>
             <p className="text-muted-foreground">Submit your application. We review every request manually.</p>
@@ -449,7 +449,7 @@ export default function PartnersPage() {
                       onClick={() => setForm((prev) => ({ ...prev, tierInterest: tier }))}
                       className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                         form.tierInterest === tier
-                          ? "bg-[#06D6A0] text-[#0a0a0a]"
+                          ? "bg-primary text-background"
                           : "border border-white/10 text-foreground hover:bg-white/5"
                       }`}
                     >
@@ -470,7 +470,7 @@ export default function PartnersPage() {
               <button
                 type="submit"
                 disabled={submitting}
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all disabled:opacity-50"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all disabled:opacity-50"
               >
                 {submitting ? "Submitting..." : "Submit Application"}
               </button>
diff --git a/src/app/playground/PlaygroundClient.tsx b/src/app/playground/PlaygroundClient.tsx
index 51c4dc4f..d14d04fa 100644
--- a/src/app/playground/PlaygroundClient.tsx
+++ b/src/app/playground/PlaygroundClient.tsx
@@ -337,10 +337,10 @@ export default function PlaygroundClient({ endpoints, initialSelection }: Playgr
   }, [selectedEndpoint, values]);
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden border-b border-white/5">
         <div className="absolute inset-0">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40vw] h-[40vw] max-w-[520px] max-h-[520px] bg-[#06D6A0]/5 rounded-full blur-[120px]" />
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40vw] h-[40vw] max-w-[520px] max-h-[520px] bg-primary/5 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-7xl mx-auto px-4 py-10">
@@ -356,7 +356,7 @@ export default function PlaygroundClient({ endpoints, initialSelection }: Playgr
           {/* History */}
           <aside className="rounded-lg border border-white/10 bg-white/5 p-4 h-fit">
             <div className="flex items-center justify-between gap-3 mb-3">
-              <h2 className="text-sm font-semibold text-[#06D6A0]">History</h2>
+              <h2 className="text-sm font-semibold text-primary">History</h2>
               <button
                 type="button"
                 onClick={clearHistory}
@@ -408,12 +408,12 @@ export default function PlaygroundClient({ endpoints, initialSelection }: Playgr
             <div className="rounded-lg border border-white/10 bg-white/5 p-5">
               <div className="grid gap-4 md:grid-cols-2">
                 <div>
-                  <label htmlFor="endpoint" className="block text-sm font-semibold mb-2 text-[#06D6A0]">
+                  <label htmlFor="endpoint" className="block text-sm font-semibold mb-2 text-primary">
                     Endpoint
                   </label>
                   <select
                     id="endpoint"
-                    className="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#06D6A0] focus:ring-1 focus:ring-[#06D6A0]"
+                    className="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
                     value={selectedEndpoint?.id}
                     onChange={(e) => setSelectedId(e.target.value)}
                   >
@@ -427,7 +427,7 @@ export default function PlaygroundClient({ endpoints, initialSelection }: Playgr
                 </div>
 
                 <div>
-                  <div className="text-sm font-semibold mb-2 text-[#06D6A0]">Request preview</div>
+                  <div className="text-sm font-semibold mb-2 text-primary">Request preview</div>
                   <div className="rounded-md border border-white/10 bg-black/30 px-3 py-2">
                     {builtPreview && "error" in builtPreview ? (
                       <p className="text-xs text-red-400">{builtPreview.error}</p>
@@ -445,7 +445,7 @@ export default function PlaygroundClient({ endpoints, initialSelection }: Playgr
 
               {/* Params */}
               <div className="mt-6">
-                <h3 className="text-sm font-semibold text-[#06D6A0] mb-3">Parameters</h3>
+                <h3 className="text-sm font-semibold text-primary mb-3">Parameters</h3>
                 {selectedEndpoint?.params?.length ? (
                   <div className="grid gap-4 md:grid-cols-2">
                     {selectedEndpoint.params.map((p) => {
@@ -461,7 +461,7 @@ export default function PlaygroundClient({ endpoints, initialSelection }: Playgr
                             value={values[p.name] ?? ""}
                             onChange={(e) => setValues((v) => ({ ...v, [p.name]: e.target.value }))}
                             placeholder={p.placeholder}
-                            className="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#06D6A0] focus:ring-1 focus:ring-[#06D6A0]"
+                            className="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
                           />
                           {p.description ? (
                             <p className="text-[11px] text-muted-foreground mt-1">{p.description}</p>
@@ -479,7 +479,7 @@ export default function PlaygroundClient({ endpoints, initialSelection }: Playgr
                 <Button
                   onClick={sendRequest}
                   disabled={loading || !selectedEndpoint}
-                  className="bg-[#06D6A0] hover:bg-[#06D6A0]/90 text-black font-semibold"
+                  className="bg-primary hover:bg-primary/90 text-black font-semibold"
                 >
                   {loading ? "Sending…" : "Send Request"}
                 </Button>
@@ -505,7 +505,7 @@ export default function PlaygroundClient({ endpoints, initialSelection }: Playgr
 
             {/* Response */}
             <div className="rounded-lg border border-white/10 bg-white/5 p-5">
-              <h3 className="text-sm font-semibold text-[#06D6A0] mb-3">Response</h3>
+              <h3 className="text-sm font-semibold text-primary mb-3">Response</h3>
 
               {!response && !loading ? (
                 <p className="text-sm text-muted-foreground">Send a request to see the response.</p>
@@ -567,7 +567,7 @@ export default function PlaygroundClient({ endpoints, initialSelection }: Playgr
             </div>
 
             <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-              <div className="text-sm font-semibold text-[#06D6A0] mb-2">Related Tools</div>
+              <div className="text-sm font-semibold text-primary mb-2">Related Tools</div>
               <div className="flex flex-wrap gap-2">
                 <a
                   href="/sandbox"
diff --git a/src/app/playground/skills/SkillsPlaygroundClient.tsx b/src/app/playground/skills/SkillsPlaygroundClient.tsx
index 6ab2fb5e..4a31c761 100644
--- a/src/app/playground/skills/SkillsPlaygroundClient.tsx
+++ b/src/app/playground/skills/SkillsPlaygroundClient.tsx
@@ -814,7 +814,7 @@ export default function SkillsPlaygroundClient({
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero */}
       <section className="relative overflow-hidden py-12">
         <div className="absolute inset-0">
@@ -900,7 +900,7 @@ export default function SkillsPlaygroundClient({
                     <SelectTrigger id="skill" className="bg-white/5 border-white/10 text-white">
                       <SelectValue placeholder="Select a skill…" />
                     </SelectTrigger>
-                    <SelectContent className="bg-[#1a1a1a] border-white/10">
+                    <SelectContent className="bg-background border-white/10">
                       {skills.map((skill) => (
                         <SelectItem
                           key={skill.slug}
@@ -914,7 +914,7 @@ export default function SkillsPlaygroundClient({
                   </Select>
 
                   {selectedSkill && (
-                    <div className="mt-3 rounded-lg bg-[#0a0a0a] border border-white/5 p-3">
+                    <div className="mt-3 rounded-lg bg-background border border-white/5 p-3">
                       <div className="flex items-start justify-between gap-3">
                         <div className="min-w-0">
                           <div className="text-sm text-white font-semibold truncate">{selectedSkill.name}</div>
@@ -954,7 +954,7 @@ export default function SkillsPlaygroundClient({
                     <SelectTrigger id="model" className="bg-white/5 border-white/10 text-white">
                       <SelectValue />
                     </SelectTrigger>
-                    <SelectContent className="bg-[#1a1a1a] border-white/10">
+                    <SelectContent className="bg-background border-white/10">
                       {models.map((m) => (
                         <SelectItem
                           key={m.id}
@@ -1069,7 +1069,7 @@ export default function SkillsPlaygroundClient({
                   <TabsContent value="terminal" className="mt-3">
                     <div
                       ref={terminalRef}
-                      className="h-[420px] overflow-auto rounded-lg border border-white/5 bg-[#050505] p-4"
+                      className="h-[420px] overflow-auto rounded-lg border border-white/5 bg-background p-4"
                     >
                       {terminalLines.length === 0 ? (
                         <div className="text-sm text-muted-foreground">
@@ -1084,7 +1084,7 @@ export default function SkillsPlaygroundClient({
                   </TabsContent>
 
                   <TabsContent value="result" className="mt-3">
-                    <div className="h-[420px] overflow-auto rounded-lg border border-white/5 bg-[#050505] p-4">
+                    <div className="h-[420px] overflow-auto rounded-lg border border-white/5 bg-background p-4">
                       {resultText ? (
                         <pre className="text-xs text-white whitespace-pre-wrap font-mono">{resultText}</pre>
                       ) : (
diff --git a/src/app/press/page.tsx b/src/app/press/page.tsx
index ebe6a37e..5c7d4043 100644
--- a/src/app/press/page.tsx
+++ b/src/app/press/page.tsx
@@ -86,26 +86,26 @@ const keyFacts = [
 
 export default function PressPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Mobile Navigation */}
 
       {/* Hero Section - Press Kit */}
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         {/* Subtle aurora background */}
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-7xl mx-auto px-4 py-20 w-full">
           <div className="max-w-3xl">
-            <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+            <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
               Press Kit
             </h1>
             <p className="text-xl text-foreground/80 mb-8">
               Media resources, brand assets, and coverage for forAgents.dev
             </p>
-            <Button className="bg-[#06D6A0] text-black hover:bg-[#06D6A0]/90 font-semibold">
+            <Button className="bg-primary text-black hover:bg-primary/90 font-semibold">
               <Download className="mr-2 h-4 w-4" />
               Download Press Kit
             </Button>
@@ -127,12 +127,12 @@ export default function PressPage() {
               </h2>
               <div className="space-y-6">
                 {newsItems.map((item, index) => (
-                  <Card key={index} className="bg-card/50 border-white/5 hover:border-[#06D6A0]/30 transition-colors">
+                  <Card key={index} className="bg-card/50 border-white/5 hover:border-primary/30 transition-colors">
                     <CardContent className="p-6">
                       <div className="flex items-start justify-between gap-4 mb-3">
                         <div className="flex-1">
                           <div className="flex items-center gap-2 mb-2">
-                            <Badge variant="outline" className="text-[#06D6A0] border-[#06D6A0]/30">
+                            <Badge variant="outline" className="text-primary border-primary/30">
                               {item.publication}
                             </Badge>
                             <span className="text-sm text-muted-foreground">{item.date}</span>
@@ -149,7 +149,7 @@ export default function PressPage() {
                         href={item.link}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="inline-flex items-center gap-1 text-[#06D6A0] hover:text-[#06D6A0]/80 text-sm font-medium transition-colors"
+                        className="inline-flex items-center gap-1 text-primary hover:text-primary/80 text-sm font-medium transition-colors"
                       >
                         Read article
                         <ExternalLink className="h-3 w-3" />
@@ -198,10 +198,10 @@ export default function PressPage() {
                   </p>
                   <div className="space-y-4">
                     <div className="flex items-center gap-3">
-                      <Mail className="h-5 w-5 text-[#06D6A0]" />
+                      <Mail className="h-5 w-5 text-primary" />
                       <a
                         href="mailto:press@foragents.dev"
-                        className="text-foreground hover:text-[#06D6A0] transition-colors font-medium"
+                        className="text-foreground hover:text-primary transition-colors font-medium"
                       >
                         press@foragents.dev
                       </a>
@@ -214,7 +214,7 @@ export default function PressPage() {
                           href="https://twitter.com/foragents"
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="flex items-center gap-2 text-muted-foreground hover:text-[#06D6A0] transition-colors"
+                          className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors"
                         >
                           <Twitter className="h-5 w-5" />
                           <span>Twitter</span>
@@ -223,7 +223,7 @@ export default function PressPage() {
                           href="https://github.com/reflectt"
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="flex items-center gap-2 text-muted-foreground hover:text-[#06D6A0] transition-colors"
+                          className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors"
                         >
                           <Github className="h-5 w-5" />
                           <span>GitHub</span>
@@ -232,7 +232,7 @@ export default function PressPage() {
                           href="https://linkedin.com/company/foragents"
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="flex items-center gap-2 text-muted-foreground hover:text-[#06D6A0] transition-colors"
+                          className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors"
                         >
                           <Linkedin className="h-5 w-5" />
                           <span>LinkedIn</span>
diff --git a/src/app/pricing/pricing-content.tsx b/src/app/pricing/pricing-content.tsx
index 5393f979..cdbf372a 100644
--- a/src/app/pricing/pricing-content.tsx
+++ b/src/app/pricing/pricing-content.tsx
@@ -164,17 +164,17 @@ export function PricingContent() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden py-20">
         <div className="absolute inset-0">
-          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 right-1/4 w-[600px] h-[600px] bg-purple/3 rounded-full blur-[140px]" />
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 text-center">
           <Badge
             variant="outline"
-            className="mb-4 text-xs bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/30"
+            className="mb-4 text-xs bg-primary/10 text-primary border-primary/30"
           >
             Simple, transparent pricing
           </Badge>
@@ -205,7 +205,7 @@ export function PricingContent() {
               Yearly
             </span>
           </div>
-          <p className="text-sm text-[#06D6A0]">See yearly savings instantly</p>
+          <p className="text-sm text-primary">See yearly savings instantly</p>
         </div>
       </section>
 
@@ -241,13 +241,13 @@ export function PricingContent() {
                   key={plan.slug}
                   className={`relative ${
                     plan.highlighted
-                      ? "bg-gradient-to-br from-[#06D6A0]/10 via-card/80 to-purple/5 border-[#06D6A0]/30"
+                      ? "bg-gradient-to-br from-primary/10 via-card/80 to-purple/5 border-primary/30"
                       : "bg-card/50 border-white/10"
                   }`}
                 >
                   {plan.highlighted && (
                     <div className="absolute -top-3 left-1/2 -translate-x-1/2">
-                      <Badge className="bg-[#06D6A0] text-[#0a0a0a] font-semibold px-4">
+                      <Badge className="bg-primary text-background font-semibold px-4">
                         Recommended
                       </Badge>
                     </div>
@@ -269,7 +269,7 @@ export function PricingContent() {
                             </div>
                           </div>
                           {isYearly && yearlySavings > 0 && (
-                            <div className="text-sm text-[#06D6A0] mt-1">
+                            <div className="text-sm text-primary mt-1">
                               Save ${yearlySavings}/year vs monthly
                             </div>
                           )}
@@ -285,7 +285,7 @@ export function PricingContent() {
                         .slice(0, 6)
                         .map((feature) => (
                           <li key={`${plan.slug}-${feature.name}`} className="flex items-start gap-3">
-                            <Check className="w-5 h-5 shrink-0 mt-0.5 text-[#06D6A0]" />
+                            <Check className="w-5 h-5 shrink-0 mt-0.5 text-primary" />
                             <span className="text-sm text-muted-foreground">
                               {feature.name}
                               {feature.limit ? ` (${feature.limit})` : ""}
@@ -297,7 +297,7 @@ export function PricingContent() {
                     <Button
                       className={`w-full ${
                         plan.highlighted
-                          ? "bg-[#06D6A0] hover:brightness-110 text-[#0a0a0a] font-semibold"
+                          ? "bg-primary hover:brightness-110 text-background font-semibold"
                           : "bg-white/10 hover:bg-white/20 text-white border border-white/20"
                       }`}
                       onClick={() => trackInterest(plan)}
@@ -342,7 +342,7 @@ export function PricingContent() {
                     <div
                       key={`head-${plan.slug}`}
                       className={`text-sm font-semibold text-center ${
-                        plan.highlighted ? "text-[#06D6A0]" : "text-muted-foreground"
+                        plan.highlighted ? "text-primary" : "text-muted-foreground"
                       }`}
                     >
                       {plan.name}
@@ -367,7 +367,7 @@ export function PricingContent() {
                           ) : feature.limit ? (
                             <span className="text-sm text-white">{feature.limit}</span>
                           ) : (
-                            <Check className="w-5 h-5 text-[#06D6A0]" />
+                            <Check className="w-5 h-5 text-primary" />
                           )}
                         </div>
                       );
@@ -408,7 +408,7 @@ export function PricingContent() {
         <div className="text-center mt-12">
           <p className="text-muted-foreground mb-4">Still have questions?</p>
           <Button variant="outline" asChild>
-            <Link href="/contact" className="text-[#06D6A0] border-[#06D6A0]/30">
+            <Link href="/contact" className="text-primary border-primary/30">
               Contact Us
             </Link>
           </Button>
@@ -418,8 +418,8 @@ export function PricingContent() {
       <Separator className="opacity-10" />
 
       <section className="max-w-5xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-[#06D6A0]/10 via-purple/10 to-[#06D6A0]/10 border border-white/10 p-12 text-center">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/20 rounded-full blur-[80px]" />
+        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-primary/10 via-purple/10 to-primary/10 border border-white/10 p-12 text-center">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-[80px]" />
           <div className="relative">
             <h2 className="text-3xl font-bold mb-4 text-white">Ready to Get Started?</h2>
             <p className="text-muted-foreground mb-8 max-w-xl mx-auto">
@@ -429,7 +429,7 @@ export function PricingContent() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
               <Button
                 size="lg"
-                className="bg-[#06D6A0] hover:brightness-110 text-[#0a0a0a] font-semibold"
+                className="bg-primary hover:brightness-110 text-background font-semibold"
                 onClick={() => {
                   const freePlan = plans.find((plan) => plan.slug === "free");
                   if (freePlan) {
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
index 4c7a9705..725c3a71 100644
--- a/src/app/privacy/page.tsx
+++ b/src/app/privacy/page.tsx
@@ -48,15 +48,15 @@ export default function PrivacyPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[300px] flex items-center border-b border-white/5">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-7xl mx-auto px-4 py-16 w-full">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Privacy Policy
           </h1>
           <div className="flex flex-col gap-2 text-sm text-foreground/60">
@@ -72,7 +72,7 @@ export default function PrivacyPage() {
           {/* Table of Contents Sidebar */}
           <aside className="lg:w-64 flex-shrink-0">
             <div className="lg:sticky lg:top-24">
-              <nav className="bg-[#0f0f0f] border border-white/10 rounded-lg p-4">
+              <nav className="bg-background border border-white/10 rounded-lg p-4">
                 <h2 className="text-sm font-semibold text-foreground mb-4 px-2">Table of Contents</h2>
                 <ul className="space-y-1">
                   {sections.map(({ id, title }) => (
@@ -81,7 +81,7 @@ export default function PrivacyPage() {
                         onClick={() => scrollToSection(id)}
                         className={`w-full text-left text-sm px-2 py-1.5 rounded transition-colors ${
                           activeSection === id
-                            ? 'text-[#06D6A0] bg-[#06D6A0]/10 font-medium'
+                            ? 'text-primary bg-primary/10 font-medium'
                             : 'text-foreground/60 hover:text-foreground hover:bg-white/5'
                         }`}
                       >
@@ -391,7 +391,7 @@ export default function PrivacyPage() {
                     </li>
                   </ul>
                   <p>
-                    To exercise your CCPA rights, please contact us at <a href="mailto:privacy@foragents.dev" className="text-[#06D6A0] hover:underline">privacy@foragents.dev</a>. We may need to verify your identity before processing your request.
+                    To exercise your CCPA rights, please contact us at <a href="mailto:privacy@foragents.dev" className="text-primary hover:underline">privacy@foragents.dev</a>. We may need to verify your identity before processing your request.
                   </p>
                   <p>
                     You may designate an authorized agent to make a request on your behalf by providing written authorization.
@@ -462,28 +462,28 @@ export default function PrivacyPage() {
                   <p>
                     If you have any questions, concerns, or requests regarding this Privacy Policy or our data practices, please contact us:
                   </p>
-                  <div className="bg-[#0f0f0f] border border-white/10 rounded-lg p-6 space-y-3">
+                  <div className="bg-background border border-white/10 rounded-lg p-6 space-y-3">
                     <div>
                       <strong className="text-white">Privacy Email:</strong>{' '}
-                      <a href="mailto:privacy@foragents.dev" className="text-[#06D6A0] hover:underline">
+                      <a href="mailto:privacy@foragents.dev" className="text-primary hover:underline">
                         privacy@foragents.dev
                       </a>
                     </div>
                     <div>
                       <strong className="text-white">General Email:</strong>{' '}
-                      <a href="mailto:contact@foragents.dev" className="text-[#06D6A0] hover:underline">
+                      <a href="mailto:contact@foragents.dev" className="text-primary hover:underline">
                         contact@foragents.dev
                       </a>
                     </div>
                     <div>
                       <strong className="text-white">Website:</strong>{' '}
-                      <a href="https://foragents.dev" className="text-[#06D6A0] hover:underline">
+                      <a href="https://foragents.dev" className="text-primary hover:underline">
                         foragents.dev
                       </a>
                     </div>
                     <div>
                       <strong className="text-white">Contact Form:</strong>{' '}
-                      <a href="https://foragents.dev/contact" className="text-[#06D6A0] hover:underline">
+                      <a href="https://foragents.dev/contact" className="text-primary hover:underline">
                         foragents.dev/contact
                       </a>
                     </div>
diff --git a/src/app/protocols/page.tsx b/src/app/protocols/page.tsx
index c7b5d455..c6043825 100644
--- a/src/app/protocols/page.tsx
+++ b/src/app/protocols/page.tsx
@@ -96,17 +96,17 @@ export default function ProtocolsPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         {/* Subtle aurora background */}
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-20 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Agent Communication Protocols
           </h1>
           <p className="text-xl text-foreground/80 mb-8">
@@ -116,17 +116,17 @@ export default function ProtocolsPage() {
           {/* Stats Banner */}
           <div className="flex flex-wrap items-center justify-center gap-6 text-sm mb-8">
             <div className="flex items-center gap-2">
-              <span className="text-[#06D6A0] font-bold text-2xl">{data.stats.totalProtocols}</span>
+              <span className="text-primary font-bold text-2xl">{data.stats.totalProtocols}</span>
               <span className="text-muted-foreground">Total Protocols</span>
             </div>
             <div className="h-4 w-px bg-white/10" />
             <div className="flex items-center gap-2">
-              <span className="text-[#8B5CF6] font-bold text-2xl">{data.stats.mostAdopted}</span>
+              <span className="text-purple font-bold text-2xl">{data.stats.mostAdopted}</span>
               <span className="text-muted-foreground">Most Adopted</span>
             </div>
             <div className="h-4 w-px bg-white/10" />
             <div className="flex items-center gap-2">
-              <span className="text-[#3B82F6] font-bold text-2xl">{data.stats.newestAddition}</span>
+              <span className="text-electric-blue font-bold text-2xl">{data.stats.newestAddition}</span>
               <span className="text-muted-foreground">Newest Addition</span>
             </div>
           </div>
@@ -136,7 +136,7 @@ export default function ProtocolsPage() {
             <Button
               onClick={() => setShowComparison(!showComparison)}
               variant={showComparison ? "default" : "outline"}
-              className={showComparison ? "bg-[#06D6A0] text-[#0a0a0a] hover:bg-[#06D6A0]/90" : ""}
+              className={showComparison ? "bg-primary text-background hover:bg-primary/90" : ""}
             >
               📊 Compare Protocols
             </Button>
@@ -183,7 +183,7 @@ export default function ProtocolsPage() {
                       return (
                         <td key={protocolId} className="text-center p-4">
                           {protocol?.features.streaming ? (
-                            <span className="text-[#06D6A0]">✓</span>
+                            <span className="text-primary">✓</span>
                           ) : (
                             <span className="text-muted-foreground">✗</span>
                           )}
@@ -198,7 +198,7 @@ export default function ProtocolsPage() {
                       return (
                         <td key={protocolId} className="text-center p-4">
                           {protocol?.features.auth ? (
-                            <span className="text-[#06D6A0]">✓</span>
+                            <span className="text-primary">✓</span>
                           ) : (
                             <span className="text-muted-foreground">✗</span>
                           )}
@@ -213,7 +213,7 @@ export default function ProtocolsPage() {
                       return (
                         <td key={protocolId} className="text-center p-4">
                           {protocol?.features.discovery ? (
-                            <span className="text-[#06D6A0]">✓</span>
+                            <span className="text-primary">✓</span>
                           ) : (
                             <span className="text-muted-foreground">✗</span>
                           )}
@@ -228,7 +228,7 @@ export default function ProtocolsPage() {
                       return (
                         <td key={protocolId} className="text-center p-4">
                           {protocol?.features.bidirectional ? (
-                            <span className="text-[#06D6A0]">✓</span>
+                            <span className="text-primary">✓</span>
                           ) : (
                             <span className="text-muted-foreground">✗</span>
                           )}
@@ -342,7 +342,7 @@ export default function ProtocolsPage() {
             <Card
               key={protocol.id}
               className={`bg-card/30 border-white/10 hover:border-white/30 transition-all cursor-pointer ${
-                selectedProtocol?.id === protocol.id ? "ring-2 ring-[#06D6A0]" : ""
+                selectedProtocol?.id === protocol.id ? "ring-2 ring-primary" : ""
               }`}
               onClick={() => handleProtocolClick(protocol)}
             >
@@ -475,7 +475,7 @@ export default function ProtocolsPage() {
                       <ul className="space-y-2">
                         {selectedProtocol.useCases.map((useCase, index) => (
                           <li key={index} className="flex items-start gap-2 text-sm text-muted-foreground">
-                            <span className="text-[#06D6A0] mt-0.5">•</span>
+                            <span className="text-primary mt-0.5">•</span>
                             <span>{useCase}</span>
                           </li>
                         ))}
@@ -512,7 +512,7 @@ export default function ProtocolsPage() {
                         href={selectedProtocol.documentation}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+                        className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
                       >
                         📖 Documentation →
                       </a>
@@ -534,7 +534,7 @@ export default function ProtocolsPage() {
                     <h3 className="text-lg font-semibold mb-3">Get Started</h3>
                     <div className="relative">
                       <pre className="bg-black/50 border border-white/10 rounded-lg p-4 overflow-x-auto text-xs">
-                        <code className="text-[#06D6A0]">{selectedProtocol.codeExample}</code>
+                        <code className="text-primary">{selectedProtocol.codeExample}</code>
                       </pre>
                     </div>
                   </div>
@@ -582,8 +582,8 @@ export default function ProtocolsPage() {
 
       {/* CTA Section */}
       <section className="max-w-4xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-[#06D6A0]/20 bg-gradient-to-br from-[#06D6A0]/5 via-card/80 to-purple/5">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#06D6A0]/10 rounded-full blur-[80px]" />
+        <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/5 via-card/80 to-purple/5">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[80px]" />
           <div className="absolute bottom-0 left-0 w-48 h-48 bg-purple/10 rounded-full blur-[60px]" />
 
           <div className="relative p-8 md:p-12 text-center">
@@ -598,7 +598,7 @@ export default function ProtocolsPage() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <a
                 href="/contact"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 Suggest a Protocol →
               </a>
diff --git a/src/app/registry/[handle]/page.tsx b/src/app/registry/[handle]/page.tsx
index 815a3ad7..ba4467d9 100644
--- a/src/app/registry/[handle]/page.tsx
+++ b/src/app/registry/[handle]/page.tsx
@@ -84,7 +84,7 @@ export default async function AgentDetailPage({ params }: AgentDetailPageProps)
             <div className="text-8xl">{agent.avatar}</div>
             <div className="flex-1">
               <div className="flex items-center gap-3 mb-2 flex-wrap">
-                <h1 className="text-4xl font-bold text-[#F8FAFC]">{agent.name}</h1>
+                <h1 className="text-4xl font-bold text-foreground">{agent.name}</h1>
                 {agent.verified && (
                   <Badge className="bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 text-sm px-2 py-1">
                     ✓ Verified
diff --git a/src/app/registry/page.tsx b/src/app/registry/page.tsx
index dd59b221..658b7c39 100644
--- a/src/app/registry/page.tsx
+++ b/src/app/registry/page.tsx
@@ -56,7 +56,7 @@ export default function RegistryPage() {
       <main className="max-w-7xl mx-auto px-4 py-12">
         {/* Header */}
         <div className="mb-10">
-          <h1 className="text-4xl font-bold text-[#F8FAFC] mb-3 flex items-center gap-3">
+          <h1 className="text-4xl font-bold text-foreground mb-3 flex items-center gap-3">
             <span>✅</span>
             <span>Agent Registry</span>
           </h1>
diff --git a/src/app/registry/registry-client.tsx b/src/app/registry/registry-client.tsx
index 775d00b2..de5240c5 100644
--- a/src/app/registry/registry-client.tsx
+++ b/src/app/registry/registry-client.tsx
@@ -174,7 +174,7 @@ function AgentCard({ agent }: { agent: RegistryAgent }) {
             <div className="text-5xl">{agent.avatar}</div>
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2 mb-1 flex-wrap">
-                <h3 className="font-bold text-lg text-[#F8FAFC] group-hover:text-cyan transition-colors">
+                <h3 className="font-bold text-lg text-foreground group-hover:text-cyan transition-colors">
                   {agent.name}
                 </h3>
                 {agent.verified && (
diff --git a/src/app/releases/page.tsx b/src/app/releases/page.tsx
index c10c7fcd..c8d7c9d1 100644
--- a/src/app/releases/page.tsx
+++ b/src/app/releases/page.tsx
@@ -17,15 +17,15 @@ export const metadata: Metadata = {
 
 export default function ReleasesPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/10 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-6xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Release Notes
           </h1>
           <p className="text-xl text-foreground/80 max-w-3xl mx-auto">
diff --git a/src/app/releases/releases-client.tsx b/src/app/releases/releases-client.tsx
index ffe8e420..2d286a28 100644
--- a/src/app/releases/releases-client.tsx
+++ b/src/app/releases/releases-client.tsx
@@ -263,7 +263,7 @@ export function ReleasesClient() {
                 <Button
                   type="submit"
                   disabled={submitting}
-                  className="w-full bg-gradient-to-r from-[#06D6A0] to-purple text-[#0a0a0a] font-semibold hover:brightness-110"
+                  className="w-full bg-gradient-to-r from-primary to-purple text-background font-semibold hover:brightness-110"
                 >
                   {submitting ? "Publishing…" : "Publish Release"}
                 </Button>
@@ -313,12 +313,12 @@ export function ReleasesClient() {
           ) : (
             <div className="space-y-4">
               {releases.map((release) => (
-                <Card id={release.id} key={release.id} className="bg-card/30 border-white/10 hover:border-[#06D6A0]/30 transition-colors">
+                <Card id={release.id} key={release.id} className="bg-card/30 border-white/10 hover:border-primary/30 transition-colors">
                   <CardHeader className="pb-3">
                     <div className="flex flex-wrap items-center justify-between gap-3">
                       <div className="min-w-0">
                         <div className="flex items-center gap-2 flex-wrap mb-2">
-                          <Badge variant="outline" className="bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/30 font-mono">
+                          <Badge variant="outline" className="bg-primary/10 text-primary border-primary/30 font-mono">
                             v{release.version}
                           </Badge>
                           <Badge variant="outline" className={typeBadgeClass(release.type)}>
@@ -339,7 +339,7 @@ export function ReleasesClient() {
                       <ul className="space-y-2">
                         {release.highlights.map((highlight, index) => (
                           <li key={`${release.id}-${index}`} className="text-sm text-white/80 flex items-start gap-2">
-                            <span className="text-[#06D6A0] mt-1">•</span>
+                            <span className="text-primary mt-1">•</span>
                             <span>{highlight}</span>
                           </li>
                         ))}
diff --git a/src/app/requests/page.tsx b/src/app/requests/page.tsx
index 0648d0e8..b055f3c4 100644
--- a/src/app/requests/page.tsx
+++ b/src/app/requests/page.tsx
@@ -33,16 +33,16 @@ export const metadata: Metadata = {
 
 export default function RequestsPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero */}
       <section className="relative overflow-hidden">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/10 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-6xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Request a Kit / Integration
           </h1>
           <p className="text-xl text-foreground/80 max-w-3xl mx-auto">
diff --git a/src/app/requests/requests-client.tsx b/src/app/requests/requests-client.tsx
index 3d351eea..95d31cf4 100644
--- a/src/app/requests/requests-client.tsx
+++ b/src/app/requests/requests-client.tsx
@@ -192,7 +192,7 @@ export function RequestsClient() {
       ? "text-emerald-300 border-emerald-500/20 bg-emerald-500/5"
       : notice?.type === "error"
         ? "text-red-400 border-red-500/20 bg-red-500/5"
-        : "text-cyan border-[#06D6A0]/20 bg-[#06D6A0]/5";
+        : "text-cyan border-primary/20 bg-primary/5";
 
   return (
     <div className="max-w-6xl mx-auto px-4 py-12">
@@ -249,7 +249,7 @@ export function RequestsClient() {
                 <Button
                   type="submit"
                   disabled={submitting}
-                  className="w-full bg-gradient-to-r from-[#06D6A0] to-purple text-[#0a0a0a] font-semibold hover:brightness-110"
+                  className="w-full bg-gradient-to-r from-primary to-purple text-background font-semibold hover:brightness-110"
                 >
                   {submitting ? "Submitting…" : "Submit request"}
                 </Button>
@@ -267,7 +267,7 @@ export function RequestsClient() {
             </CardContent>
           </Card>
 
-          <div className="mt-6 p-4 rounded-xl border border-white/10 bg-gradient-to-br from-[#06D6A0]/5 via-card/60 to-purple/10">
+          <div className="mt-6 p-4 rounded-xl border border-white/10 bg-gradient-to-br from-primary/5 via-card/60 to-purple/10">
             <div className="flex items-center justify-between gap-4">
               <div>
                 <div className="text-sm font-semibold">Live community queue</div>
@@ -275,7 +275,7 @@ export function RequestsClient() {
               </div>
               <Badge
                 variant="outline"
-                className="border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10"
+                className="border-primary/30 text-primary bg-primary/10"
               >
                 {totalVotes} votes
               </Badge>
@@ -332,7 +332,7 @@ export function RequestsClient() {
               {requests.map((r) => (
                 <Card
                   key={r.id}
-                  className="bg-card/30 border-white/10 hover:border-[#06D6A0]/30 transition-colors"
+                  className="bg-card/30 border-white/10 hover:border-primary/30 transition-colors"
                 >
                   <CardHeader className="pb-3">
                     <div className="flex items-start justify-between gap-4">
@@ -351,7 +351,7 @@ export function RequestsClient() {
                       <div className="flex items-center gap-2 shrink-0">
                         <Badge
                           variant="outline"
-                          className="bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/30"
+                          className="bg-primary/10 text-primary border-primary/30"
                         >
                           {r.votes} upvotes
                         </Badge>
diff --git a/src/app/resources/page.tsx b/src/app/resources/page.tsx
index bec64f1b..d4edc4cf 100644
--- a/src/app/resources/page.tsx
+++ b/src/app/resources/page.tsx
@@ -224,7 +224,7 @@ export default function ResourcesPage() {
   );
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(webPageJsonLd) }}
@@ -247,7 +247,7 @@ export default function ResourcesPage() {
             onClick={() => setFilterType("All")}
             className={`px-4 py-2 rounded-lg border transition-all ${
               filterType === "All"
-                ? "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/30"
+                ? "bg-primary/10 text-primary border-primary/30"
                 : "bg-white/5 text-muted-foreground border-white/10 hover:border-white/20"
             }`}
           >
@@ -284,10 +284,10 @@ export default function ResourcesPage() {
                       href={resource.url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="block p-5 rounded-xl border border-white/10 bg-card/50 hover:border-[#06D6A0]/50 hover:bg-card/70 transition-all group"
+                      className="block p-5 rounded-xl border border-white/10 bg-card/50 hover:border-primary/50 hover:bg-card/70 transition-all group"
                     >
                       <div className="flex items-start justify-between gap-3 mb-2">
-                        <h3 className="font-semibold text-base group-hover:text-[#06D6A0] transition-colors">
+                        <h3 className="font-semibold text-base group-hover:text-primary transition-colors">
                           {resource.title}
                         </h3>
                         <span
@@ -301,7 +301,7 @@ export default function ResourcesPage() {
                       <p className="text-sm text-muted-foreground leading-relaxed">
                         {resource.description}
                       </p>
-                      <div className="mt-3 flex items-center gap-1 text-xs text-[#06D6A0] font-mono">
+                      <div className="mt-3 flex items-center gap-1 text-xs text-primary font-mono">
                         Visit resource
                         <span className="group-hover:translate-x-1 transition-transform">
                           →
@@ -323,7 +323,7 @@ export default function ResourcesPage() {
             </p>
             <button
               onClick={() => setFilterType("All")}
-              className="mt-4 text-[#06D6A0] hover:underline"
+              className="mt-4 text-primary hover:underline"
             >
               Clear filter
             </button>
@@ -331,11 +331,11 @@ export default function ResourcesPage() {
         )}
 
         {/* CTA */}
-        <div className="mt-16 rounded-xl border border-white/10 bg-gradient-to-br from-[#06D6A0]/5 via-card/70 to-purple/5 p-6">
+        <div className="mt-16 rounded-xl border border-white/10 bg-gradient-to-br from-primary/5 via-card/70 to-purple/5 p-6">
           <h2 className="text-lg font-bold">Want to contribute?</h2>
           <p className="mt-2 text-sm text-muted-foreground">
             Know a great resource that&apos;s missing? Submit it via{" "}
-            <Link href="/submit" className="text-[#06D6A0] hover:underline">
+            <Link href="/submit" className="text-primary hover:underline">
               /submit
             </Link>{" "}
             or open a PR on{" "}
@@ -343,7 +343,7 @@ export default function ResourcesPage() {
               href="https://github.com/reflectt/foragents.dev"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-[#06D6A0] hover:underline"
+              className="text-primary hover:underline"
             >
               GitHub
             </a>
diff --git a/src/app/reviews/page.tsx b/src/app/reviews/page.tsx
index 612ac219..3c8ce549 100644
--- a/src/app/reviews/page.tsx
+++ b/src/app/reviews/page.tsx
@@ -61,7 +61,7 @@ export default async function ReviewsPage() {
   return (
     <main className="max-w-5xl mx-auto px-4 py-12">
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-[#F8FAFC] mb-2">Top reviewed</h1>
+        <h1 className="text-3xl font-bold text-foreground mb-2">Top reviewed</h1>
         <p className="text-muted-foreground">
           Skills ranked by <span className="text-foreground">review count</span>, then average rating.
         </p>
@@ -84,7 +84,7 @@ export default async function ReviewsPage() {
                   <div className="text-xs font-mono text-muted-foreground uppercase tracking-wider">
                     Rank #{idx + 1}
                   </div>
-                  <div className="mt-1 text-lg font-semibold text-[#F8FAFC] flex items-center gap-2 flex-wrap">
+                  <div className="mt-1 text-lg font-semibold text-foreground flex items-center gap-2 flex-wrap">
                     <span>🧰 {row.skill.name}</span>
                     {row.skill.verified ? (
                       <Badge className="bg-emerald-500/15 text-emerald-300 border border-emerald-500/25 text-[11px]">
diff --git a/src/app/roadmap/[id]/page.tsx b/src/app/roadmap/[id]/page.tsx
index 056b3df3..8c1a9466 100644
--- a/src/app/roadmap/[id]/page.tsx
+++ b/src/app/roadmap/[id]/page.tsx
@@ -121,7 +121,7 @@ export default function RoadmapItemPage({ params }: PageProps) {
   };
 
   return (
-    <main className="min-h-screen bg-[#0A0E17]">
+    <main className="min-h-screen bg-background">
       <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <Link
           href="/roadmap"
@@ -164,7 +164,7 @@ export default function RoadmapItemPage({ params }: PageProps) {
                 onClick={handleVote}
                 disabled={voting}
                 size="lg"
-                className="bg-cyan text-[#0a0a0a] hover:bg-cyan/90 disabled:bg-slate-700 disabled:text-slate-400"
+                className="bg-cyan text-background hover:bg-cyan/90 disabled:bg-slate-700 disabled:text-slate-400"
               >
                 {voting ? "Voting..." : "Vote for this feature"}
               </Button>
diff --git a/src/app/roadmap/page.tsx b/src/app/roadmap/page.tsx
index 89a1a25a..889c4881 100644
--- a/src/app/roadmap/page.tsx
+++ b/src/app/roadmap/page.tsx
@@ -231,7 +231,7 @@ export default function RoadmapPage() {
   };
 
   return (
-    <main className="min-h-screen bg-[#0A0E17]">
+    <main className="min-h-screen bg-background">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="mb-8">
           <h1 className="text-4xl font-bold text-white mb-3">Product Roadmap</h1>
@@ -287,7 +287,7 @@ export default function RoadmapPage() {
                       onClick={() => setStatusFilter(status)}
                       className={
                         statusFilter === status
-                          ? "bg-cyan text-[#0a0a0a] hover:bg-cyan/90"
+                          ? "bg-cyan text-background hover:bg-cyan/90"
                           : "border-white/15 text-slate-300"
                       }
                     >
@@ -352,7 +352,7 @@ export default function RoadmapPage() {
                                 size="sm"
                                 onClick={() => handleVote(item.id)}
                                 disabled={disableVote}
-                                className="bg-cyan text-[#0a0a0a] hover:bg-cyan/90 disabled:bg-slate-700 disabled:text-slate-400"
+                                className="bg-cyan text-background hover:bg-cyan/90 disabled:bg-slate-700 disabled:text-slate-400"
                               >
                                 {votingIds.has(item.id)
                                   ? "Voting..."
@@ -436,7 +436,7 @@ export default function RoadmapPage() {
                   <Button
                     type="submit"
                     disabled={requesting}
-                    className="bg-cyan text-[#0a0a0a] hover:bg-cyan/90"
+                    className="bg-cyan text-background hover:bg-cyan/90"
                   >
                     {requesting ? "Submitting..." : "Submit Request"}
                   </Button>
diff --git a/src/app/sandbox/SandboxClient.tsx b/src/app/sandbox/SandboxClient.tsx
index 1a237eed..e07a5ca4 100644
--- a/src/app/sandbox/SandboxClient.tsx
+++ b/src/app/sandbox/SandboxClient.tsx
@@ -90,10 +90,10 @@ export default function SandboxClient() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden border-b border-white/5">
         <div className="absolute inset-0">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40vw] h-[40vw] max-w-[520px] max-h-[520px] bg-[#06D6A0]/5 rounded-full blur-[120px]" />
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40vw] h-[40vw] max-w-[520px] max-h-[520px] bg-primary/5 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-7xl mx-auto px-4 py-10">
@@ -109,7 +109,7 @@ export default function SandboxClient() {
           <div className="space-y-4">
             <div className="rounded-lg border border-white/10 bg-white/5 p-5">
               <div className="flex items-center justify-between mb-4 gap-3">
-                <h2 className="text-lg font-semibold text-[#06D6A0]">Configuration Editor</h2>
+                <h2 className="text-lg font-semibold text-primary">Configuration Editor</h2>
                 <div className="flex items-center gap-2">
                   <label htmlFor="template-select" className="text-sm text-slate-300">
                     Template:
@@ -117,7 +117,7 @@ export default function SandboxClient() {
                   <select
                     id="template-select"
                     onChange={handleTemplateChange}
-                    className="bg-black/20 border border-white/10 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:border-[#06D6A0] focus:ring-1 focus:ring-[#06D6A0]"
+                    className="bg-black/20 border border-white/10 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
                     defaultValue=""
                   >
                     <option value="">Select...</option>
@@ -143,7 +143,7 @@ export default function SandboxClient() {
   "version": "1.0.0",
   "capabilities": ["chat"]
 }'
-                className="w-full h-[420px] bg-black/20 border border-white/10 rounded-lg px-4 py-3 text-sm font-mono focus:outline-none focus:border-[#06D6A0] focus:ring-1 focus:ring-[#06D6A0] resize-none"
+                className="w-full h-[420px] bg-black/20 border border-white/10 rounded-lg px-4 py-3 text-sm font-mono focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none"
                 spellCheck={false}
               />
 
@@ -151,7 +151,7 @@ export default function SandboxClient() {
                 <Button
                   onClick={handleValidate}
                   disabled={!configText.trim() || isValidating}
-                  className="bg-[#06D6A0] hover:bg-[#06D6A0]/90 text-black font-semibold"
+                  className="bg-primary hover:bg-primary/90 text-black font-semibold"
                 >
                   {isValidating ? "Validating..." : "Validate"}
                 </Button>
@@ -173,7 +173,7 @@ export default function SandboxClient() {
 
           <div className="space-y-4">
             <div className="rounded-lg border border-white/10 bg-white/5 p-5">
-              <h2 className="text-lg font-semibold text-[#06D6A0] mb-4">Validation Results</h2>
+              <h2 className="text-lg font-semibold text-primary mb-4">Validation Results</h2>
 
               {!validation && !requestError ? (
                 <div className="text-sm text-muted-foreground">
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index f87fa172..ecf07dc0 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -262,7 +262,7 @@ export default function SearchPage() {
                   href={result.url}
                   target={isExternal ? "_blank" : undefined}
                   rel={isExternal ? "noopener noreferrer" : undefined}
-                  className="block rounded-lg border border-[#1A1F2E] bg-card/50 p-6 hover:border-cyan/20 transition-all group"
+                  className="block rounded-lg border border-border bg-card/50 p-6 hover:border-cyan/20 transition-all group"
                 >
                   <div className="flex items-center gap-2 mb-2">
                     <Badge variant="outline" className={`text-xs border ${badgeClass}`}>
@@ -270,7 +270,7 @@ export default function SearchPage() {
                     </Badge>
                   </div>
 
-                  <h2 className="text-xl font-semibold text-[#F8FAFC] group-hover:text-cyan transition-colors mb-2">
+                  <h2 className="text-xl font-semibold text-foreground group-hover:text-cyan transition-colors mb-2">
                     {result.title}
                   </h2>
 
diff --git a/src/app/security/page.tsx b/src/app/security/page.tsx
index efb31afe..8f46f34d 100644
--- a/src/app/security/page.tsx
+++ b/src/app/security/page.tsx
@@ -20,14 +20,14 @@ export const metadata: Metadata = {
 
 export default function SecurityPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <div className="max-w-7xl mx-auto px-6 py-16">
         {/* Hero Section */}
         <div className="text-center mb-16">
           <div className="flex justify-center mb-6">
             <div className="relative">
               <Shield className="w-20 h-20" style={{ color: '#06D6A0' }} />
-              <div className="absolute inset-0 bg-[#06D6A0] opacity-20 blur-xl rounded-full" />
+              <div className="absolute inset-0 bg-primary opacity-20 blur-xl rounded-full" />
             </div>
           </div>
           <h1 className="text-4xl md:text-5xl font-bold mb-4" style={{ color: '#06D6A0' }}>
@@ -42,9 +42,9 @@ export default function SecurityPage() {
         {/* Security Sections Grid */}
         <div className="grid md:grid-cols-2 gap-6 mb-16">
           {/* Data Protection */}
-          <Card className="bg-[#0f0f0f] border-white/10 p-6 hover:border-[#06D6A0]/30 transition-colors">
+          <Card className="bg-background border-white/10 p-6 hover:border-primary/30 transition-colors">
             <div className="flex items-start gap-4 mb-4">
-              <div className="p-3 bg-[#06D6A0]/10 rounded-lg">
+              <div className="p-3 bg-primary/10 rounded-lg">
                 <Lock className="w-6 h-6" style={{ color: '#06D6A0' }} />
               </div>
               <div>
@@ -77,9 +77,9 @@ export default function SecurityPage() {
           </Card>
 
           {/* Authentication */}
-          <Card className="bg-[#0f0f0f] border-white/10 p-6 hover:border-[#06D6A0]/30 transition-colors">
+          <Card className="bg-background border-white/10 p-6 hover:border-primary/30 transition-colors">
             <div className="flex items-start gap-4 mb-4">
-              <div className="p-3 bg-[#06D6A0]/10 rounded-lg">
+              <div className="p-3 bg-primary/10 rounded-lg">
                 <CheckCircle2 className="w-6 h-6" style={{ color: '#06D6A0' }} />
               </div>
               <div>
@@ -112,9 +112,9 @@ export default function SecurityPage() {
           </Card>
 
           {/* Access Control */}
-          <Card className="bg-[#0f0f0f] border-white/10 p-6 hover:border-[#06D6A0]/30 transition-colors">
+          <Card className="bg-background border-white/10 p-6 hover:border-primary/30 transition-colors">
             <div className="flex items-start gap-4 mb-4">
-              <div className="p-3 bg-[#06D6A0]/10 rounded-lg">
+              <div className="p-3 bg-primary/10 rounded-lg">
                 <Users className="w-6 h-6" style={{ color: '#06D6A0' }} />
               </div>
               <div>
@@ -147,9 +147,9 @@ export default function SecurityPage() {
           </Card>
 
           {/* Infrastructure */}
-          <Card className="bg-[#0f0f0f] border-white/10 p-6 hover:border-[#06D6A0]/30 transition-colors">
+          <Card className="bg-background border-white/10 p-6 hover:border-primary/30 transition-colors">
             <div className="flex items-start gap-4 mb-4">
-              <div className="p-3 bg-[#06D6A0]/10 rounded-lg">
+              <div className="p-3 bg-primary/10 rounded-lg">
                 <Server className="w-6 h-6" style={{ color: '#06D6A0' }} />
               </div>
               <div>
@@ -160,7 +160,7 @@ export default function SecurityPage() {
               <div>
                 <h3 className="font-semibold text-white mb-2 flex items-center gap-2">
                   SOC 2 Type II Certified
-                  <Badge variant="outline" className="border-[#06D6A0] text-[#06D6A0]">Certified</Badge>
+                  <Badge variant="outline" className="border-primary text-primary">Certified</Badge>
                 </h3>
                 <p className="text-sm">
                   Annual third-party audits verify our security controls. SOC 2 Type II compliance 
@@ -185,9 +185,9 @@ export default function SecurityPage() {
           </Card>
 
           {/* Vulnerability Disclosure */}
-          <Card className="bg-[#0f0f0f] border-white/10 p-6 hover:border-[#06D6A0]/30 transition-colors">
+          <Card className="bg-background border-white/10 p-6 hover:border-primary/30 transition-colors">
             <div className="flex items-start gap-4 mb-4">
-              <div className="p-3 bg-[#06D6A0]/10 rounded-lg">
+              <div className="p-3 bg-primary/10 rounded-lg">
                 <FileText className="w-6 h-6" style={{ color: '#06D6A0' }} />
               </div>
               <div>
@@ -223,9 +223,9 @@ export default function SecurityPage() {
           </Card>
 
           {/* Compliance */}
-          <Card className="bg-[#0f0f0f] border-white/10 p-6 hover:border-[#06D6A0]/30 transition-colors">
+          <Card className="bg-background border-white/10 p-6 hover:border-primary/30 transition-colors">
             <div className="flex items-start gap-4 mb-4">
-              <div className="p-3 bg-[#06D6A0]/10 rounded-lg">
+              <div className="p-3 bg-primary/10 rounded-lg">
                 <Shield className="w-6 h-6" style={{ color: '#06D6A0' }} />
               </div>
               <div>
@@ -236,7 +236,7 @@ export default function SecurityPage() {
               <div>
                 <h3 className="font-semibold text-white mb-2 flex items-center gap-2">
                   GDPR Compliant
-                  <Badge variant="outline" className="border-[#06D6A0] text-[#06D6A0]">Compliant</Badge>
+                  <Badge variant="outline" className="border-primary text-primary">Compliant</Badge>
                 </h3>
                 <p className="text-sm">
                   Full compliance with EU General Data Protection Regulation. Data subject rights 
@@ -246,7 +246,7 @@ export default function SecurityPage() {
               <div>
                 <h3 className="font-semibold text-white mb-2 flex items-center gap-2">
                   SOC 2 Type II
-                  <Badge variant="outline" className="border-[#06D6A0] text-[#06D6A0]">Certified</Badge>
+                  <Badge variant="outline" className="border-primary text-primary">Certified</Badge>
                 </h3>
                 <p className="text-sm">
                   Independent validation of security, availability, processing integrity, 
@@ -256,7 +256,7 @@ export default function SecurityPage() {
               <div>
                 <h3 className="font-semibold text-white mb-2 flex items-center gap-2">
                   HIPAA Ready
-                  <Badge variant="outline" className="border-[#06D6A0] text-[#06D6A0]">Available</Badge>
+                  <Badge variant="outline" className="border-primary text-primary">Available</Badge>
                 </h3>
                 <p className="text-sm">
                   Business Associate Agreements (BAA) available for healthcare customers. 
@@ -274,7 +274,7 @@ export default function SecurityPage() {
 
         {/* Report Vulnerability CTA */}
         <div className="text-center">
-          <Card className="bg-[#0f0f0f] border-white/10 p-8 inline-block">
+          <Card className="bg-background border-white/10 p-8 inline-block">
             <h2 className="text-2xl font-semibold mb-4">Found a Security Issue?</h2>
             <p className="text-gray-400 mb-6 max-w-2xl">
               We take security seriously and appreciate responsible disclosure. Report vulnerabilities 
diff --git a/src/app/settings/notifications/page.tsx b/src/app/settings/notifications/page.tsx
index c32e0fd6..5a86c756 100644
--- a/src/app/settings/notifications/page.tsx
+++ b/src/app/settings/notifications/page.tsx
@@ -40,8 +40,8 @@ function ToggleSwitch({ enabled, onChange, label, description }: ToggleSwitchPro
         role="switch"
         aria-checked={enabled}
         onClick={() => onChange(!enabled)}
-        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-[#06D6A0] focus:ring-offset-2 focus:ring-offset-[#0a0a0a] ${
-          enabled ? 'bg-[#06D6A0]' : 'bg-slate-700'
+        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background ${
+          enabled ? 'bg-primary' : 'bg-slate-700'
         }`}
       >
         <span
@@ -91,10 +91,10 @@ export default function NotificationsPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <div className="max-w-2xl mx-auto px-4 py-16">
         <div className="mb-8">
-          <Link href="/settings" className="text-[#06D6A0] hover:underline text-sm mb-4 inline-block">
+          <Link href="/settings" className="text-primary hover:underline text-sm mb-4 inline-block">
             ← Back to Settings
           </Link>
           <h1 className="text-3xl font-bold text-white">Notification Preferences</h1>
@@ -152,7 +152,7 @@ export default function NotificationsPage() {
                 onClick={() => updatePreference('emailFrequency', freq)}
                 className={`px-4 py-3 rounded-lg border transition-all ${
                   preferences.emailFrequency === freq
-                    ? 'bg-[#06D6A0]/10 border-[#06D6A0] text-[#06D6A0]'
+                    ? 'bg-primary/10 border-primary text-primary'
                     : 'bg-slate-800/30 border-slate-700 text-slate-400 hover:border-slate-600'
                 }`}
               >
@@ -166,16 +166,16 @@ export default function NotificationsPage() {
         <button
           type="button"
           onClick={handleSave}
-          className="w-full px-6 py-3 bg-[#06D6A0] hover:bg-[#05c291] text-white font-semibold rounded-lg transition-all"
+          className="w-full px-6 py-3 bg-primary hover:bg-primary/85 text-white font-semibold rounded-lg transition-all"
         >
           Save Preferences
         </button>
 
         {/* Success Toast */}
         {showToast && (
-          <div className="fixed bottom-8 right-8 bg-slate-800 border border-[#06D6A0] rounded-lg px-6 py-4 shadow-xl animate-in fade-in slide-in-from-bottom-4">
+          <div className="fixed bottom-8 right-8 bg-slate-800 border border-primary rounded-lg px-6 py-4 shadow-xl animate-in fade-in slide-in-from-bottom-4">
             <div className="flex items-center gap-3">
-              <span className="text-[#06D6A0] text-xl">✓</span>
+              <span className="text-primary text-xl">✓</span>
               <p className="text-white font-medium">Preferences saved successfully!</p>
             </div>
           </div>
diff --git a/src/app/setup/SetupWizardClient.tsx b/src/app/setup/SetupWizardClient.tsx
index 20851202..5215c187 100644
--- a/src/app/setup/SetupWizardClient.tsx
+++ b/src/app/setup/SetupWizardClient.tsx
@@ -126,7 +126,7 @@ function HostDetectionStep({
               onClick={() => onHostChange(preset.id)}
               className={`rounded-xl border p-4 text-left transition-colors ${
                 active
-                  ? "border-[#06D6A0]/60 bg-[#06D6A0]/10"
+                  ? "border-primary/60 bg-primary/10"
                   : "border-white/10 bg-black/20 hover:bg-black/30"
               }`}
             >
@@ -180,7 +180,7 @@ function SkillsChecklistStep({
               <div>
                 <div className="font-semibold">{skill.label}</div>
                 <p className="text-sm text-muted-foreground">{skill.note}</p>
-                <code className="mt-2 block rounded bg-black/40 px-2 py-1 text-xs text-[#06D6A0]">
+                <code className="mt-2 block rounded bg-black/40 px-2 py-1 text-xs text-primary">
                   {skill.install}
                 </code>
               </div>
@@ -233,7 +233,7 @@ function McpConnectionsStep({
                 <div className="min-w-0 flex-1">
                   <div className="font-semibold">{server.name}</div>
                   <p className="text-sm text-muted-foreground">{server.description}</p>
-                  <code className="mt-2 block overflow-x-auto rounded bg-black/40 px-2 py-1 text-xs text-[#06D6A0]">
+                  <code className="mt-2 block overflow-x-auto rounded bg-black/40 px-2 py-1 text-xs text-primary">
                     {connectionString}
                   </code>
                 </div>
@@ -327,7 +327,7 @@ function IdentitySetupStep({
                 }
                 className={`rounded-lg border px-3 py-1 text-sm ${
                   checked
-                    ? "border-[#06D6A0]/60 bg-[#06D6A0]/10 text-[#06D6A0]"
+                    ? "border-primary/60 bg-primary/10 text-primary"
                     : "border-white/10 bg-black/20"
                 }`}
               >
@@ -353,7 +353,7 @@ function VerificationStep({ report }: { report: VerificationReport }) {
     <div className="space-y-4">
       <div className="rounded-xl border border-white/10 bg-black/20 p-4">
         <div className="text-sm text-muted-foreground">Readiness Score</div>
-        <div className="text-4xl font-bold text-[#06D6A0]">{report.score}%</div>
+        <div className="text-4xl font-bold text-primary">{report.score}%</div>
       </div>
 
       <div className="space-y-2">
@@ -480,7 +480,7 @@ export default function SetupWizardClient() {
   }, [identity, mcpSelection, selectedPreset?.id, skills]);
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="max-w-5xl mx-auto px-4 py-10">
         <h1 className="text-3xl md:text-4xl font-bold">Agent Environment Setup Wizard</h1>
         <p className="mt-3 text-muted-foreground max-w-3xl">
@@ -496,7 +496,7 @@ export default function SetupWizardClient() {
             <span>{ALL_STEPS[step - 1]}</span>
           </div>
           <div className="h-2 overflow-hidden rounded-full bg-white/10">
-            <div className="h-full bg-[#06D6A0]" style={{ width: `${progress}%` }} />
+            <div className="h-full bg-primary" style={{ width: `${progress}%` }} />
           </div>
         </div>
 
@@ -536,13 +536,13 @@ export default function SetupWizardClient() {
         </div>
 
         {step === ALL_STEPS.length && (
-          <div className="mt-6 rounded-xl border border-[#06D6A0]/30 bg-[#06D6A0]/5 p-4">
-            <div className="mb-2 text-sm font-semibold text-[#06D6A0]">Full Config Script</div>
+          <div className="mt-6 rounded-xl border border-primary/30 bg-primary/5 p-4">
+            <div className="mb-2 text-sm font-semibold text-primary">Full Config Script</div>
             <pre className="max-h-80 overflow-auto rounded bg-black/40 p-3 text-xs">
               <code>{fullSetupScript}</code>
             </pre>
             <div className="mt-3">
-              <Button className="bg-[#06D6A0] text-black hover:bg-[#06D6A0]/90" onClick={() => copyText(fullSetupScript)}>
+              <Button className="bg-primary text-black hover:bg-primary/90" onClick={() => copyText(fullSetupScript)}>
                 Copy full config
               </Button>
             </div>
diff --git a/src/app/setup/quick/QuickSetupClient.tsx b/src/app/setup/quick/QuickSetupClient.tsx
index db0c0603..d3e44f4d 100644
--- a/src/app/setup/quick/QuickSetupClient.tsx
+++ b/src/app/setup/quick/QuickSetupClient.tsx
@@ -31,7 +31,7 @@ export default function QuickSetupClient() {
   const bootstrapCommand = selectedPreset.bootstrapCommand;
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="max-w-4xl mx-auto px-4 py-12">
         <h1 className="text-3xl md:text-4xl font-bold">Express Agent Setup</h1>
         <p className="mt-3 max-w-2xl text-muted-foreground">
@@ -48,7 +48,7 @@ export default function QuickSetupClient() {
                 onClick={() => setSelectedPresetId(preset.id)}
                 className={`rounded-xl border p-4 text-left transition-colors ${
                   active
-                    ? "border-[#06D6A0]/60 bg-[#06D6A0]/10"
+                    ? "border-primary/60 bg-primary/10"
                     : "border-white/10 bg-black/20 hover:bg-black/30"
                 }`}
               >
@@ -61,11 +61,11 @@ export default function QuickSetupClient() {
 
         <div className="mt-6 rounded-xl border border-white/10 bg-black/20 p-4">
           <div className="mb-2 text-sm text-muted-foreground">Bootstrap command</div>
-          <pre className="overflow-x-auto rounded bg-black/40 p-3 text-sm text-[#06D6A0]">
+          <pre className="overflow-x-auto rounded bg-black/40 p-3 text-sm text-primary">
             <code>{bootstrapCommand}</code>
           </pre>
           <div className="mt-3">
-            <Button className="bg-[#06D6A0] text-black hover:bg-[#06D6A0]/90" onClick={() => copyText(bootstrapCommand)}>
+            <Button className="bg-primary text-black hover:bg-primary/90" onClick={() => copyText(bootstrapCommand)}>
               Copy command
             </Button>
           </div>
diff --git a/src/app/showcase/page.tsx b/src/app/showcase/page.tsx
index 1d6367bb..798f9abc 100644
--- a/src/app/showcase/page.tsx
+++ b/src/app/showcase/page.tsx
@@ -34,10 +34,10 @@ export const metadata: Metadata = {
 
 export default function ShowcasePage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <main id="main-content" className="max-w-7xl mx-auto px-4 py-12">
         <div className="text-center mb-10">
-          <h1 className="text-5xl font-bold text-[#F8FAFC] mb-4">🚀 Community Showcase</h1>
+          <h1 className="text-5xl font-bold text-foreground mb-4">🚀 Community Showcase</h1>
           <p className="text-xl text-slate-300 max-w-3xl mx-auto">
             Discover what builders are shipping, vote on what should trend, then submit your own
             project for the next wave of agent developers.
diff --git a/src/app/showcase/showcase-client.tsx b/src/app/showcase/showcase-client.tsx
index b9fccc7d..caaf25de 100644
--- a/src/app/showcase/showcase-client.tsx
+++ b/src/app/showcase/showcase-client.tsx
@@ -241,7 +241,7 @@ export function ShowcaseClient() {
       <section className="bg-slate-900/30 border border-white/10 rounded-2xl p-6 md:p-8">
         <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between mb-6">
           <div>
-            <h2 className="text-2xl font-bold text-[#F8FAFC] mb-2">Vote as an agent</h2>
+            <h2 className="text-2xl font-bold text-foreground mb-2">Vote as an agent</h2>
             <p className="text-slate-400">
               Save your agent handle to upvote projects. Each handle can vote once per project.
             </p>
@@ -252,12 +252,12 @@ export function ShowcaseClient() {
               value={agentHandle}
               onChange={(event) => handleAgentHandleChange(event.target.value)}
               placeholder="kai"
-              className="px-4 py-2 rounded-lg bg-[#0a0a0a] border border-white/10 text-[#F8FAFC]"
+              className="px-4 py-2 rounded-lg bg-background border border-white/10 text-foreground"
             />
           </label>
         </div>
 
-        <h2 className="text-2xl font-bold text-[#F8FAFC] mb-2">Submit Project</h2>
+        <h2 className="text-2xl font-bold text-foreground mb-2">Submit Project</h2>
         <p className="text-slate-400 mb-6">
           Share your project with the forAgents.dev community.
         </p>
@@ -268,7 +268,7 @@ export function ShowcaseClient() {
             onChange={(event) => setTitle(event.target.value)}
             required
             placeholder="Project title"
-            className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10 text-[#F8FAFC]"
+            className="w-full px-4 py-3 rounded-lg bg-background border border-white/10 text-foreground"
           />
 
           <textarea
@@ -277,7 +277,7 @@ export function ShowcaseClient() {
             required
             rows={4}
             placeholder="Project description"
-            className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10 text-[#F8FAFC] resize-none"
+            className="w-full px-4 py-3 rounded-lg bg-background border border-white/10 text-foreground resize-none"
           />
 
           <div className="grid md:grid-cols-2 gap-4">
@@ -287,7 +287,7 @@ export function ShowcaseClient() {
               onChange={(event) => setUrl(event.target.value)}
               required
               placeholder="https://example.com"
-              className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10 text-[#F8FAFC]"
+              className="w-full px-4 py-3 rounded-lg bg-background border border-white/10 text-foreground"
             />
 
             <input
@@ -295,7 +295,7 @@ export function ShowcaseClient() {
               onChange={(event) => setAuthor(event.target.value)}
               required
               placeholder="Author"
-              className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10 text-[#F8FAFC]"
+              className="w-full px-4 py-3 rounded-lg bg-background border border-white/10 text-foreground"
             />
           </div>
 
@@ -303,7 +303,7 @@ export function ShowcaseClient() {
             <select
               value={category}
               onChange={(event) => setCategory(event.target.value as ShowcaseCategory)}
-              className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10 text-[#F8FAFC]"
+              className="w-full px-4 py-3 rounded-lg bg-background border border-white/10 text-foreground"
             >
               {CATEGORIES.filter((option) => option.value !== "all").map((option) => (
                 <option key={option.value} value={option.value}>
@@ -317,7 +317,7 @@ export function ShowcaseClient() {
               onChange={(event) => setTagsInput(event.target.value)}
               required
               placeholder="tags,comma,separated"
-              className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10 text-[#F8FAFC]"
+              className="w-full px-4 py-3 rounded-lg bg-background border border-white/10 text-foreground"
             />
           </div>
 
@@ -325,7 +325,7 @@ export function ShowcaseClient() {
             <button
               type="submit"
               disabled={submitting}
-              className="px-6 py-3 bg-[#06D6A0] text-[#0a0a0a] font-semibold rounded-lg hover:brightness-110 disabled:opacity-70"
+              className="px-6 py-3 bg-primary text-background font-semibold rounded-lg hover:brightness-110 disabled:opacity-70"
             >
               {submitting ? "Submitting..." : "Submit Project"}
             </button>
@@ -337,20 +337,20 @@ export function ShowcaseClient() {
 
       <section>
         <div className="flex flex-col md:flex-row gap-4 md:items-center md:justify-between mb-6">
-          <h2 className="text-2xl font-bold text-[#F8FAFC]">Projects ({total})</h2>
+          <h2 className="text-2xl font-bold text-foreground">Projects ({total})</h2>
 
           <div className="flex flex-col md:flex-row gap-3 md:items-center">
             <input
               value={searchQuery}
               onChange={(event) => setSearchQuery(event.target.value)}
               placeholder="Search title, tags, author"
-              className="px-4 py-2 rounded-lg bg-slate-900/40 border border-white/10 text-[#F8FAFC]"
+              className="px-4 py-2 rounded-lg bg-slate-900/40 border border-white/10 text-foreground"
             />
 
             <select
               value={categoryFilter}
               onChange={(event) => setCategoryFilter(event.target.value as "all" | ShowcaseCategory)}
-              className="px-4 py-2 rounded-lg bg-slate-900/40 border border-white/10 text-[#F8FAFC]"
+              className="px-4 py-2 rounded-lg bg-slate-900/40 border border-white/10 text-foreground"
             >
               {CATEGORIES.map((option) => (
                 <option key={option.value} value={option.value}>
@@ -362,7 +362,7 @@ export function ShowcaseClient() {
             <select
               value={sort}
               onChange={(event) => setSort(event.target.value as SortOption)}
-              className="px-4 py-2 rounded-lg bg-slate-900/40 border border-white/10 text-[#F8FAFC]"
+              className="px-4 py-2 rounded-lg bg-slate-900/40 border border-white/10 text-foreground"
             >
               <option value="newest">Recently Updated</option>
               <option value="popular">Most Upvoted</option>
@@ -386,14 +386,14 @@ export function ShowcaseClient() {
                   className="bg-slate-900/30 border border-white/10 rounded-xl p-5"
                 >
                   <div className="flex items-start justify-between gap-3 mb-2">
-                    <h3 className="text-xl font-semibold text-[#F8FAFC]">{project.title}</h3>
+                    <h3 className="text-xl font-semibold text-foreground">{project.title}</h3>
                     <div className="flex items-center gap-2">
                       {project.featured && (
                         <span className="text-xs px-2 py-1 rounded-full border border-amber-300/30 text-amber-200 bg-amber-300/10">
                           featured
                         </span>
                       )}
-                      <span className="text-xs px-2 py-1 rounded-full border border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10">
+                      <span className="text-xs px-2 py-1 rounded-full border border-primary/30 text-primary bg-primary/10">
                         {project.category}
                       </span>
                     </div>
@@ -409,7 +409,7 @@ export function ShowcaseClient() {
                     {project.tags.map((tag) => (
                       <span
                         key={`${project.id}-${tag}`}
-                        className="text-xs px-2 py-1 rounded-md bg-[#06D6A0]/10 border border-[#06D6A0]/20 text-[#06D6A0]"
+                        className="text-xs px-2 py-1 rounded-md bg-primary/10 border border-primary/20 text-primary"
                       >
                         #{tag}
                       </span>
@@ -418,7 +418,7 @@ export function ShowcaseClient() {
 
                   <div className="flex items-center justify-between gap-3">
                     <div className="text-sm text-slate-300">
-                      <span className="font-semibold text-[#F8FAFC]">{project.voteCount}</span> votes
+                      <span className="font-semibold text-foreground">{project.voteCount}</span> votes
                     </div>
 
                     <div className="flex items-center gap-2">
@@ -434,7 +434,7 @@ export function ShowcaseClient() {
                         type="button"
                         onClick={() => handleVote(project)}
                         disabled={voteDisabled}
-                        className="px-3 py-2 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold disabled:opacity-60"
+                        className="px-3 py-2 rounded-lg bg-primary text-background font-semibold disabled:opacity-60"
                       >
                         {projectHasVote
                           ? "Voted"
diff --git a/src/app/sitemap-visual/page.tsx b/src/app/sitemap-visual/page.tsx
index f08a720e..0eee7127 100644
--- a/src/app/sitemap-visual/page.tsx
+++ b/src/app/sitemap-visual/page.tsx
@@ -114,23 +114,23 @@ const categories = [
 
 export default function SitemapVisualPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
 
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[300px] flex items-center">
         {/* Subtle aurora background */}
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#06D6A0]/10 border border-[#06D6A0]/20 text-[#06D6A0] text-sm font-medium mb-6">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-6">
             <span>🗺️</span>
             <span>Site Index</span>
           </div>
           
-          <h1 className="text-[36px] md:text-[48px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[36px] md:text-[48px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Visual Sitemap
           </h1>
           <p className="text-lg text-foreground/80 max-w-2xl mx-auto">
@@ -145,10 +145,10 @@ export default function SitemapVisualPage() {
           {categories.map((category) => (
             <div
               key={category.name}
-              className="relative overflow-hidden rounded-xl border border-white/10 bg-card/30 p-6 hover:border-[#06D6A0]/30 transition-all group"
+              className="relative overflow-hidden rounded-xl border border-white/10 bg-card/30 p-6 hover:border-primary/30 transition-all group"
             >
               {/* Hover effect */}
-              <div className="absolute top-0 right-0 w-32 h-32 bg-[#06D6A0]/5 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity" />
+              <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity" />
               
               <div className="relative">
                 {/* Category Header */}
@@ -165,9 +165,9 @@ export default function SitemapVisualPage() {
                     <li key={page.href}>
                       <Link
                         href={page.href}
-                        className="flex items-center gap-2 text-sm text-muted-foreground hover:text-[#06D6A0] transition-colors group/link"
+                        className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors group/link"
                       >
-                        <span className="text-[#06D6A0]/50 group-hover/link:text-[#06D6A0] transition-colors">
+                        <span className="text-primary/50 group-hover/link:text-primary transition-colors">
                           →
                         </span>
                         <span>{page.name}</span>
@@ -188,7 +188,7 @@ export default function SitemapVisualPage() {
             </p>
             <a
               href="/sitemap.xml"
-              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#06D6A0]/10 border border-[#06D6A0]/30 text-[#06D6A0] text-sm font-medium hover:bg-[#06D6A0]/20 transition-colors"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 border border-primary/30 text-primary text-sm font-medium hover:bg-primary/20 transition-colors"
             >
               View sitemap.xml →
             </a>
diff --git a/src/app/skills/[slug]/page.tsx b/src/app/skills/[slug]/page.tsx
index 859a7234..366b1315 100644
--- a/src/app/skills/[slug]/page.tsx
+++ b/src/app/skills/[slug]/page.tsx
@@ -140,7 +140,7 @@ export default async function SkillPage({
       <main className="max-w-3xl mx-auto px-4 py-12">
         {/* Title area */}
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-[#F8FAFC] mb-2 flex items-center gap-3 flex-wrap">
+          <h1 className="text-3xl font-bold text-foreground mb-2 flex items-center gap-3 flex-wrap">
             <span>🧰 {skill.name}</span>
             <SkillInstallCta slug={skill.slug} initialInstalls={installs} />
           </h1>
@@ -207,7 +207,7 @@ export default async function SkillPage({
 
         {/* Description */}
         <section className="mb-8">
-          <h2 className="text-lg font-semibold text-[#F8FAFC] mb-3">Description</h2>
+          <h2 className="text-lg font-semibold text-foreground mb-3">Description</h2>
           <p className="text-foreground/80 leading-relaxed text-[15px]">
             {skill.description}
           </p>
@@ -222,14 +222,14 @@ export default async function SkillPage({
 
         {/* Version history */}
         <section className="mb-8" id="versions">
-          <h2 className="text-lg font-semibold text-[#F8FAFC] mb-3">Version history</h2>
+          <h2 className="text-lg font-semibold text-foreground mb-3">Version history</h2>
           <SkillVersionHistory slug={skill.slug} />
         </section>
 
         {/* Dependencies */}
         <section className="mb-8" id="dependencies">
           <div className="flex items-center justify-between gap-3 flex-wrap mb-3">
-            <h2 className="text-lg font-semibold text-[#F8FAFC]">Dependencies</h2>
+            <h2 className="text-lg font-semibold text-foreground">Dependencies</h2>
             <Link
               href={`/dependencies?skill=${encodeURIComponent(skill.slug)}#skill-details`}
               className="text-sm text-cyan hover:underline"
@@ -240,7 +240,7 @@ export default async function SkillPage({
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="rounded-xl border border-white/10 bg-black/20 p-4">
-              <h3 className="text-sm font-semibold text-[#F8FAFC] mb-2">Requires</h3>
+              <h3 className="text-sm font-semibold text-foreground mb-2">Requires</h3>
               {dependencies.length === 0 ? (
                 <p className="text-sm text-muted-foreground">No declared dependencies yet.</p>
               ) : (
@@ -266,7 +266,7 @@ export default async function SkillPage({
             </div>
 
             <div className="rounded-xl border border-white/10 bg-black/20 p-4">
-              <h3 className="text-sm font-semibold text-[#F8FAFC] mb-2">Used by</h3>
+              <h3 className="text-sm font-semibold text-foreground mb-2">Used by</h3>
               {usedBy.length === 0 ? (
                 <p className="text-sm text-muted-foreground">No skills depend on this yet.</p>
               ) : (
@@ -300,7 +300,7 @@ export default async function SkillPage({
 
         {skill.verification ? (
           <section className="mb-8 rounded-xl border border-cyan/20 bg-cyan/5 p-5">
-            <h2 className="text-lg font-semibold text-[#F8FAFC] mb-2">Why this skill is verified</h2>
+            <h2 className="text-lg font-semibold text-foreground mb-2">Why this skill is verified</h2>
             <p className="text-sm text-foreground/80 leading-relaxed">
               {skill.verification.reason}
             </p>
@@ -317,7 +317,7 @@ export default async function SkillPage({
 
         {inCollections.length > 0 ? (
           <section className="mb-8">
-            <h2 className="text-lg font-semibold text-[#F8FAFC] mb-3">Collections</h2>
+            <h2 className="text-lg font-semibold text-foreground mb-3">Collections</h2>
             <p className="text-sm text-muted-foreground mb-3">
               This skill appears in:
             </p>
@@ -349,7 +349,7 @@ export default async function SkillPage({
         {/* Install */}
         <section className="mb-8">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
-            <h2 className="text-lg font-semibold text-[#F8FAFC]">Install</h2>
+            <h2 className="text-lg font-semibold text-foreground">Install</h2>
             <RunInReflecttButton skillSlug={skill.slug} name={skill.name} size="sm" />
           </div>
           <div className="relative group">
@@ -365,7 +365,7 @@ export default async function SkillPage({
 
         {/* Links */}
         <section className="mb-8">
-          <h2 className="text-lg font-semibold text-[#F8FAFC] mb-3">Links</h2>
+          <h2 className="text-lg font-semibold text-foreground mb-3">Links</h2>
           <div className="flex flex-col gap-2">
             <a
               href={skill.repo_url}
diff --git a/src/app/skills/page.tsx b/src/app/skills/page.tsx
index 23a6059c..d1976031 100644
--- a/src/app/skills/page.tsx
+++ b/src/app/skills/page.tsx
@@ -81,7 +81,7 @@ export default async function SkillsPage({
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC] mb-4">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
             🧰 Skills Directory
           </h1>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
diff --git a/src/app/spaces/[id]/page.tsx b/src/app/spaces/[id]/page.tsx
index 6d3caa68..4eaaec4c 100644
--- a/src/app/spaces/[id]/page.tsx
+++ b/src/app/spaces/[id]/page.tsx
@@ -88,7 +88,7 @@ export default async function SpaceDetailPage(props: { params: Promise<{ id: str
   const categoryColor = categoryColors[space.category];
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Header */}
       <section className="border-b border-white/10">
         <div className="max-w-7xl mx-auto px-4 py-8">
@@ -140,7 +140,7 @@ export default async function SpaceDetailPage(props: { params: Promise<{ id: str
               </div>
             </div>
 
-            <button className="px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold hover:brightness-110 transition-all whitespace-nowrap">
+            <button className="px-6 py-3 rounded-lg bg-primary text-background font-semibold hover:brightness-110 transition-all whitespace-nowrap">
               Join Space
             </button>
           </div>
@@ -220,7 +220,7 @@ export default async function SpaceDetailPage(props: { params: Promise<{ id: str
                 </div>
                 {space.activityLevel === "high" && (
                   <div className="mt-4 pt-4 border-t border-white/10">
-                    <div className="flex items-center gap-2 text-sm text-[#06D6A0]">
+                    <div className="flex items-center gap-2 text-sm text-primary">
                       <span>🔥</span>
                       <span className="font-semibold">Very Active Space</span>
                     </div>
@@ -231,7 +231,7 @@ export default async function SpaceDetailPage(props: { params: Promise<{ id: str
                 )}
                 {space.activityLevel === "medium" && (
                   <div className="mt-4 pt-4 border-t border-white/10">
-                    <div className="flex items-center gap-2 text-sm text-[#FFD93D]">
+                    <div className="flex items-center gap-2 text-sm text-solar">
                       <span>✨</span>
                       <span className="font-semibold">Active Space</span>
                     </div>
@@ -242,7 +242,7 @@ export default async function SpaceDetailPage(props: { params: Promise<{ id: str
                 )}
                 {space.activityLevel === "low" && (
                   <div className="mt-4 pt-4 border-t border-white/10">
-                    <div className="flex items-center gap-2 text-sm text-[#9CA3AF]">
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                       <span>💤</span>
                       <span className="font-semibold">Quiet Space</span>
                     </div>
diff --git a/src/app/spaces/page.tsx b/src/app/spaces/page.tsx
index 10c6dd82..25eba2e4 100644
--- a/src/app/spaces/page.tsx
+++ b/src/app/spaces/page.tsx
@@ -33,9 +33,9 @@ type SpacesResponse = {
 };
 
 const visibilityStyles: Record<Visibility, string> = {
-  public: "bg-[#06D6A0]/15 border-[#06D6A0] text-[#06D6A0]",
-  private: "bg-[#3B82F6]/15 border-[#3B82F6] text-[#3B82F6]",
-  unlisted: "bg-[#F59E0B]/15 border-[#F59E0B] text-[#F59E0B]",
+  public: "bg-primary/15 border-primary text-primary",
+  private: "bg-electric-blue/15 border-electric-blue text-electric-blue",
+  unlisted: "bg-solar/15 border-solar text-solar",
 };
 
 export default function SpacesPage() {
@@ -163,15 +163,15 @@ export default function SpacesPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <section className="relative overflow-hidden min-h-[320px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
           <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-4xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Collaboration Spaces
           </h1>
           <p className="text-xl text-foreground/80 mb-6">
@@ -180,17 +180,17 @@ export default function SpacesPage() {
 
           <div className="flex flex-wrap items-center justify-center gap-6 text-sm">
             <div className="flex items-center gap-2">
-              <span className="text-[#06D6A0] font-bold text-2xl">{stats.totalSpaces}</span>
+              <span className="text-primary font-bold text-2xl">{stats.totalSpaces}</span>
               <span className="text-muted-foreground">Spaces</span>
             </div>
             <div className="h-4 w-px bg-white/10" />
             <div className="flex items-center gap-2">
-              <span className="text-[#8B5CF6] font-bold text-2xl">{stats.totalMembers}</span>
+              <span className="text-purple font-bold text-2xl">{stats.totalMembers}</span>
               <span className="text-muted-foreground">Members</span>
             </div>
             <div className="h-4 w-px bg-white/10" />
             <div className="flex items-center gap-2">
-              <span className="text-[#3B82F6] font-bold text-2xl">{stats.totalSkills}</span>
+              <span className="text-electric-blue font-bold text-2xl">{stats.totalSkills}</span>
               <span className="text-muted-foreground">Skills</span>
             </div>
           </div>
@@ -319,7 +319,7 @@ export default function SpacesPage() {
                   <CardHeader>
                     <div className="flex items-start justify-between gap-3 mb-2">
                       <CardTitle className="text-xl line-clamp-2">{space.name}</CardTitle>
-                      {space.featured && <Badge className="bg-[#8B5CF6] text-white">Featured</Badge>}
+                      {space.featured && <Badge className="bg-purple text-white">Featured</Badge>}
                     </div>
                     <div className="flex items-center gap-2 flex-wrap">
                       <Badge variant="outline" className={visibilityStyles[space.visibility]}>
@@ -358,7 +358,7 @@ export default function SpacesPage() {
                       </Button>
                       <Link
                         href={`/spaces/${space.id}`}
-                        className="text-sm text-[#06D6A0] font-semibold hover:underline whitespace-nowrap"
+                        className="text-sm text-primary font-semibold hover:underline whitespace-nowrap"
                       >
                         View →
                       </Link>
diff --git a/src/app/sponsor/page.tsx b/src/app/sponsor/page.tsx
index 55490335..8ed67b13 100644
--- a/src/app/sponsor/page.tsx
+++ b/src/app/sponsor/page.tsx
@@ -24,7 +24,7 @@ export default async function SponsorPage() {
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 md:py-20 text-center">
-          <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-[#F8FAFC] mb-6">
+          <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-foreground mb-6">
             Support the Agent Ecosystem
           </h1>
           <p className="text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
diff --git a/src/app/sponsor/sponsor-client.tsx b/src/app/sponsor/sponsor-client.tsx
index 93501d2f..a664a22e 100644
--- a/src/app/sponsor/sponsor-client.tsx
+++ b/src/app/sponsor/sponsor-client.tsx
@@ -222,7 +222,7 @@ export function SponsorClient({ initialTiers = [], initialSponsors = [] }: Spons
     <>
       <section className="max-w-6xl mx-auto px-4 py-16">
         <div className="text-center mb-12">
-          <h2 className="text-3xl md:text-4xl font-bold text-[#F8FAFC] mb-4">Sponsor Tiers</h2>
+          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">Sponsor Tiers</h2>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
             Choose the tier that matches your goals. Every contribution helps.
           </p>
@@ -243,7 +243,7 @@ export function SponsorClient({ initialTiers = [], initialSponsors = [] }: Spons
               <Card key={tierItem.name} className="border-white/10 bg-card/40 flex flex-col">
                 <CardHeader>
                   <div className="flex items-center justify-between gap-2">
-                    <CardTitle className="text-xl text-[#F8FAFC]">{formatTierName(tierItem.name)}</CardTitle>
+                    <CardTitle className="text-xl text-foreground">{formatTierName(tierItem.name)}</CardTitle>
                     <Badge variant="outline" className={getTierBadgeColor(tierItem.name)}>
                       {tierItem.sponsorCount} sponsors
                     </Badge>
@@ -274,7 +274,7 @@ export function SponsorClient({ initialTiers = [], initialSponsors = [] }: Spons
 
       <section className="max-w-5xl mx-auto px-4 py-16">
         <div className="text-center mb-8">
-          <h2 className="text-3xl md:text-4xl font-bold text-[#F8FAFC] mb-4">Current Sponsors</h2>
+          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">Current Sponsors</h2>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
             Backers helping keep the ecosystem open and useful for agent builders.
           </p>
@@ -319,7 +319,7 @@ export function SponsorClient({ initialTiers = [], initialSponsors = [] }: Spons
                   <div className="flex items-center gap-3">
                     <img src={sponsor.logo} alt={`${sponsor.name} logo`} className="w-10 h-10 rounded-md bg-white/5" />
                     <div className="min-w-0">
-                      <h3 className="font-semibold text-[#F8FAFC] truncate">{sponsor.name}</h3>
+                      <h3 className="font-semibold text-foreground truncate">{sponsor.name}</h3>
                       <Badge variant="outline" className={`text-xs ${getTierBadgeColor(sponsor.tier)}`}>
                         {formatTierName(sponsor.tier)}
                       </Badge>
@@ -349,7 +349,7 @@ export function SponsorClient({ initialTiers = [], initialSponsors = [] }: Spons
       <section className="max-w-3xl mx-auto px-4 py-16">
         <Card className="border-white/10 bg-card/40">
           <CardHeader>
-            <CardTitle className="text-2xl text-[#F8FAFC]">Add a Sponsor</CardTitle>
+            <CardTitle className="text-2xl text-foreground">Add a Sponsor</CardTitle>
             <p className="text-sm text-muted-foreground">
               Create a new sponsor entry and persist it to the sponsor data file.
             </p>
diff --git a/src/app/stats/page.tsx b/src/app/stats/page.tsx
index d152d531..5028d8a5 100644
--- a/src/app/stats/page.tsx
+++ b/src/app/stats/page.tsx
@@ -369,7 +369,7 @@ export default async function StatsPage() {
                 <div className="flex flex-wrap gap-3 mt-8">
                   <Link
                     href="/submit"
-                    className="inline-flex items-center justify-center px-6 py-3 rounded-lg bg-cyan text-[#0A0E17] font-semibold hover:brightness-110 transition-all"
+                    className="inline-flex items-center justify-center px-6 py-3 rounded-lg bg-cyan text-background font-semibold hover:brightness-110 transition-all"
                   >
                     Submit a Skill
                   </Link>
diff --git a/src/app/status/page.tsx b/src/app/status/page.tsx
index dfef272e..32e96553 100644
--- a/src/app/status/page.tsx
+++ b/src/app/status/page.tsx
@@ -114,7 +114,7 @@ export default function StatusPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(webPageJsonLd) }}
@@ -123,13 +123,13 @@ export default function StatusPage() {
       <section className="relative overflow-hidden min-h-[260px] flex items-center">
         <div className="relative max-w-5xl mx-auto px-4 py-16 w-full">
           <div className="text-center mb-8">
-            <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+            <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
               System Status
             </h1>
             <p className="text-xl text-foreground/80">Live health checks, refreshed every 30 seconds</p>
           </div>
 
-          <Card className="bg-[#0f0f0f] border-white/10 max-w-3xl mx-auto">
+          <Card className="bg-background border-white/10 max-w-3xl mx-auto">
             <CardContent className="pt-6">
               <div className="flex items-center gap-3">
                 <div className={`w-4 h-4 rounded-full ${statusConfig[overallStatus].color}`} />
@@ -153,7 +153,7 @@ export default function StatusPage() {
           {services.map((service) => (
             <Card
               key={service.name}
-              className="bg-[#0f0f0f] border-white/10 hover:border-white/20 transition-colors"
+              className="bg-background border-white/10 hover:border-white/20 transition-colors"
             >
               <CardContent className="pt-6">
                 <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
@@ -168,11 +168,11 @@ export default function StatusPage() {
                   <div className="flex gap-8 text-sm">
                     <div>
                       <p className="text-muted-foreground">Latency</p>
-                      <p className="font-semibold text-[#06D6A0]">{service.latencyMs}ms</p>
+                      <p className="font-semibold text-primary">{service.latencyMs}ms</p>
                     </div>
                     <div>
                       <p className="text-muted-foreground">Last check</p>
-                      <p className="font-semibold text-[#06D6A0]">
+                      <p className="font-semibold text-primary">
                         {new Date(service.lastCheck).toLocaleTimeString()}
                       </p>
                     </div>
@@ -187,7 +187,7 @@ export default function StatusPage() {
       <section className="relative max-w-5xl mx-auto px-4 py-8 mb-12">
         <h2 className="text-3xl font-bold mb-6">Uptime (Last 7 Days)</h2>
 
-        <Card className="bg-[#0f0f0f] border-white/10">
+        <Card className="bg-background border-white/10">
           <CardContent className="pt-6">
             <div className="grid grid-cols-7 gap-3 h-48 items-end">
               {history.map((entry) => {
@@ -197,12 +197,12 @@ export default function StatusPage() {
                   <div key={entry.date} className="flex flex-col items-center gap-2">
                     <div className="w-full h-36 bg-white/5 rounded-md relative overflow-hidden border border-white/10">
                       <div
-                        className="absolute bottom-0 w-full bg-[#06D6A0]"
+                        className="absolute bottom-0 w-full bg-primary"
                         style={{ height: `${heightPct}%` }}
                       />
                     </div>
                     <p className="text-xs text-muted-foreground">{formatDate(entry.date)}</p>
-                    <p className="text-xs text-[#06D6A0] font-semibold">{entry.uptime.toFixed(2)}%</p>
+                    <p className="text-xs text-primary font-semibold">{entry.uptime.toFixed(2)}%</p>
                     <p className="text-[10px] text-muted-foreground">Incidents: {entry.incidents}</p>
                   </div>
                 );
diff --git a/src/app/submit/page.tsx b/src/app/submit/page.tsx
index 425fbc41..3b9517ed 100644
--- a/src/app/submit/page.tsx
+++ b/src/app/submit/page.tsx
@@ -474,7 +474,7 @@ export default function SubmitPage() {
   );
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
 
       {/* Content */}
       <div className="max-w-3xl mx-auto px-4 py-12">
diff --git a/src/app/support/page.tsx b/src/app/support/page.tsx
index 1750938a..c9e05d71 100644
--- a/src/app/support/page.tsx
+++ b/src/app/support/page.tsx
@@ -111,7 +111,7 @@ export default function SupportPage() {
   ];
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(webPageJsonLd) }}
@@ -121,11 +121,11 @@ export default function SupportPage() {
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[300px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 text-center w-full">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             How Can We Help?
           </h1>
           <p className="text-xl text-foreground/80 mb-8">
@@ -141,7 +141,7 @@ export default function SupportPage() {
                 placeholder="Search for help..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-12 pr-4 py-6 text-lg bg-[#0f0f0f] border-white/10 focus:border-[#06D6A0]"
+                className="pl-12 pr-4 py-6 text-lg bg-background border-white/10 focus:border-primary"
               />
             </div>
           </div>
@@ -154,10 +154,10 @@ export default function SupportPage() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {commonTopics.map((topic) => (
             <Link key={topic.title} href={topic.link}>
-              <Card className="bg-[#0f0f0f] border-white/10 hover:border-[#06D6A0]/50 transition-all cursor-pointer h-full">
+              <Card className="bg-background border-white/10 hover:border-primary/50 transition-all cursor-pointer h-full">
                 <CardContent className="p-6">
-                  <div className="inline-flex items-center justify-center w-12 h-12 rounded-lg bg-[#06D6A0]/10 mb-4">
-                    <topic.icon className="w-6 h-6 text-[#06D6A0]" />
+                  <div className="inline-flex items-center justify-center w-12 h-12 rounded-lg bg-primary/10 mb-4">
+                    <topic.icon className="w-6 h-6 text-primary" />
                   </div>
                   <h3 className="text-lg font-semibold mb-2">{topic.title}</h3>
                   <p className="text-sm text-muted-foreground">
@@ -181,7 +181,7 @@ export default function SupportPage() {
               target={option.link.startsWith("http") ? "_blank" : undefined}
               rel={option.link.startsWith("http") ? "noopener noreferrer" : undefined}
             >
-              <Card className="bg-[#0f0f0f] border-white/10 hover:border-[#06D6A0]/50 transition-all cursor-pointer h-full">
+              <Card className="bg-background border-white/10 hover:border-primary/50 transition-all cursor-pointer h-full">
                 <CardContent className="p-6">
                   <div 
                     className="inline-flex items-center justify-center w-12 h-12 rounded-lg mb-4"
@@ -203,10 +203,10 @@ export default function SupportPage() {
         </div>
 
         {/* Response Times */}
-        <Card className="bg-[#0f0f0f] border-white/10">
+        <Card className="bg-background border-white/10">
           <CardHeader>
             <div className="flex items-center gap-2">
-              <Clock className="w-5 h-5 text-[#06D6A0]" />
+              <Clock className="w-5 h-5 text-primary" />
               <CardTitle className="text-2xl">Response Times</CardTitle>
             </div>
           </CardHeader>
@@ -215,7 +215,7 @@ export default function SupportPage() {
               {responseTimes.map((item) => (
                 <div 
                   key={item.channel}
-                  className="flex flex-col md:flex-row md:items-center md:justify-between p-4 rounded-lg bg-[#0a0a0a] border border-white/5"
+                  className="flex flex-col md:flex-row md:items-center md:justify-between p-4 rounded-lg bg-background border border-white/5"
                 >
                   <div className="mb-2 md:mb-0">
                     <h4 className="font-semibold mb-1">{item.channel}</h4>
@@ -223,7 +223,7 @@ export default function SupportPage() {
                       {item.description}
                     </p>
                   </div>
-                  <div className="inline-flex items-center px-3 py-1 rounded-full bg-[#06D6A0]/10 text-[#06D6A0] text-sm font-medium">
+                  <div className="inline-flex items-center px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium">
                     {item.time}
                   </div>
                 </div>
diff --git a/src/app/templates/[id]/page.tsx b/src/app/templates/[id]/page.tsx
index 4818b9af..496e249d 100644
--- a/src/app/templates/[id]/page.tsx
+++ b/src/app/templates/[id]/page.tsx
@@ -75,7 +75,7 @@ export default async function TemplateDetailPage({ params }: { params: Promise<{
             </Link>
           </div>
 
-          <h1 className="text-4xl font-bold text-[#F8FAFC] mb-4">{template.name}</h1>
+          <h1 className="text-4xl font-bold text-foreground mb-4">{template.name}</h1>
           <p className="text-lg text-muted-foreground mb-6">{template.description}</p>
 
           <div className="flex flex-wrap items-center gap-3">
@@ -105,7 +105,7 @@ export default async function TemplateDetailPage({ params }: { params: Promise<{
       <main className="max-w-5xl mx-auto px-4 py-12">
         {/* Tags */}
         <section className="mb-12">
-          <h2 className="text-xl font-bold text-[#F8FAFC] mb-4">🏷️ Tags</h2>
+          <h2 className="text-xl font-bold text-foreground mb-4">🏷️ Tags</h2>
           <div className="flex flex-wrap gap-2">
             {template.tags.map((tag) => (
               <Badge key={tag} variant="outline" className="text-sm">
@@ -117,7 +117,7 @@ export default async function TemplateDetailPage({ params }: { params: Promise<{
 
         {/* File Tree */}
         <section className="mb-12">
-          <h2 className="text-2xl font-bold text-[#F8FAFC] mb-4 flex items-center gap-2">
+          <h2 className="text-2xl font-bold text-foreground mb-4 flex items-center gap-2">
             <FileCode className="w-6 h-6" />
             File Structure
           </h2>
@@ -141,7 +141,7 @@ export default async function TemplateDetailPage({ params }: { params: Promise<{
         {/* Use This Template */}
         <section className="mb-12">
           <div className="rounded-lg border border-cyan/20 bg-cyan/5 p-8 text-center">
-            <h2 className="text-2xl font-bold text-[#F8FAFC] mb-4">🚀 Ready to Build?</h2>
+            <h2 className="text-2xl font-bold text-foreground mb-4">🚀 Ready to Build?</h2>
             <p className="text-muted-foreground mb-6">
               Copy the code snippets above and follow the file structure to create your skill.
             </p>
@@ -154,7 +154,7 @@ export default async function TemplateDetailPage({ params }: { params: Promise<{
               </Link>
               <Link
                 href="/submit"
-                className="inline-flex items-center gap-2 px-6 py-3 border border-white/10 text-[#F8FAFC] rounded-lg font-semibold hover:border-cyan/50 transition-colors"
+                className="inline-flex items-center gap-2 px-6 py-3 border border-white/10 text-foreground rounded-lg font-semibold hover:border-cyan/50 transition-colors"
               >
                 Submit Your Skill
               </Link>
@@ -164,28 +164,28 @@ export default async function TemplateDetailPage({ params }: { params: Promise<{
 
         {/* Getting Started */}
         <section className="mb-12">
-          <h2 className="text-2xl font-bold text-[#F8FAFC] mb-4">📚 Getting Started</h2>
+          <h2 className="text-2xl font-bold text-foreground mb-4">📚 Getting Started</h2>
           <div className="rounded-lg border border-white/5 bg-card/40 p-6 space-y-4">
             <div>
-              <h3 className="font-semibold text-[#F8FAFC] mb-2">1. Set up your project</h3>
+              <h3 className="font-semibold text-foreground mb-2">1. Set up your project</h3>
               <p className="text-sm text-muted-foreground">
                 Create the file structure shown above in your project directory.
               </p>
             </div>
             <div>
-              <h3 className="font-semibold text-[#F8FAFC] mb-2">2. Copy the code</h3>
+              <h3 className="font-semibold text-foreground mb-2">2. Copy the code</h3>
               <p className="text-sm text-muted-foreground">
                 Use the code snippets as starting points. Click the copy button on each snippet to copy to your clipboard.
               </p>
             </div>
             <div>
-              <h3 className="font-semibold text-[#F8FAFC] mb-2">3. Customize</h3>
+              <h3 className="font-semibold text-foreground mb-2">3. Customize</h3>
               <p className="text-sm text-muted-foreground">
                 Adapt the template to your specific needs. Add features, modify logic, and make it your own.
               </p>
             </div>
             <div>
-              <h3 className="font-semibold text-[#F8FAFC] mb-2">4. Test & Deploy</h3>
+              <h3 className="font-semibold text-foreground mb-2">4. Test & Deploy</h3>
               <p className="text-sm text-muted-foreground">
                 Test your skill thoroughly, then deploy and share it with the community!
               </p>
@@ -196,7 +196,7 @@ export default async function TemplateDetailPage({ params }: { params: Promise<{
         {/* Related Templates */}
         {relatedTemplates.length > 0 && (
           <section>
-            <h2 className="text-2xl font-bold text-[#F8FAFC] mb-4">🔗 Related Templates</h2>
+            <h2 className="text-2xl font-bold text-foreground mb-4">🔗 Related Templates</h2>
             <div className="grid gap-4 md:grid-cols-3">
               {relatedTemplates.map((related) => (
                 <Link
@@ -205,7 +205,7 @@ export default async function TemplateDetailPage({ params }: { params: Promise<{
                   className="rounded-lg border border-white/5 bg-card/40 p-4 hover:border-cyan/20 transition-all group"
                 >
                   <div className="flex items-start justify-between mb-2">
-                    <h3 className="font-semibold text-[#F8FAFC] group-hover:text-cyan transition-colors">
+                    <h3 className="font-semibold text-foreground group-hover:text-cyan transition-colors">
                       {related.name}
                     </h3>
                     <Badge
diff --git a/src/app/templates/[id]/template-detail-client.tsx b/src/app/templates/[id]/template-detail-client.tsx
index 4ec478ba..8d993799 100644
--- a/src/app/templates/[id]/template-detail-client.tsx
+++ b/src/app/templates/[id]/template-detail-client.tsx
@@ -15,7 +15,7 @@ export function TemplateDetailClient({ codeSnippets }: { codeSnippets: Record<st
 
   return (
     <section className="mb-12">
-      <h2 className="text-2xl font-bold text-[#F8FAFC] mb-6">💻 Code Snippets</h2>
+      <h2 className="text-2xl font-bold text-foreground mb-6">💻 Code Snippets</h2>
       
       <div className="space-y-4">
         {Object.entries(codeSnippets).map(([filename, code]) => (
@@ -46,7 +46,7 @@ export function TemplateDetailClient({ codeSnippets }: { codeSnippets: Record<st
             </div>
             
             {/* Code Content */}
-            <div className="p-4 overflow-x-auto bg-[#0a0a0a]/60">
+            <div className="p-4 overflow-x-auto bg-background/60">
               <pre className="text-sm text-foreground/90 font-mono">
                 <code>{code}</code>
               </pre>
diff --git a/src/app/templates/page.tsx b/src/app/templates/page.tsx
index fe4a1269..e99d362a 100644
--- a/src/app/templates/page.tsx
+++ b/src/app/templates/page.tsx
@@ -54,7 +54,7 @@ export default function TemplatesPage() {
       <section className="relative overflow-hidden border-b border-white/5 bg-gradient-to-br from-cyan/5 via-transparent to-purple/5">
         <div className="max-w-6xl mx-auto px-4 py-16 sm:py-24">
           <div className="text-center">
-            <h1 className="text-4xl sm:text-5xl font-bold text-[#F8FAFC] mb-4">
+            <h1 className="text-4xl sm:text-5xl font-bold text-foreground mb-4">
               🎨 Skill Templates Gallery
             </h1>
             <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
diff --git a/src/app/templates/templates-client.tsx b/src/app/templates/templates-client.tsx
index a1c06d1c..a704ad40 100644
--- a/src/app/templates/templates-client.tsx
+++ b/src/app/templates/templates-client.tsx
@@ -109,7 +109,7 @@ export function TemplatesClient({ templates }: { templates: Template[] }) {
                   {/* Header */}
                   <div className="mb-4">
                     <div className="flex items-start justify-between mb-2">
-                      <h3 className="text-lg font-semibold text-[#F8FAFC] group-hover:text-cyan transition-colors">
+                      <h3 className="text-lg font-semibold text-foreground group-hover:text-cyan transition-colors">
                         {template.name}
                       </h3>
                       <Badge
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
index b780b89f..6bed4e82 100644
--- a/src/app/terms/page.tsx
+++ b/src/app/terms/page.tsx
@@ -48,15 +48,15 @@ export default function TermsPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[300px] flex items-center border-b border-white/5">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#06D6A0]/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-primary/5 rounded-full blur-[160px]" />
         </div>
 
         <div className="relative max-w-7xl mx-auto px-4 py-16 w-full">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-4">
             Terms of Service
           </h1>
           <div className="flex flex-col gap-2 text-sm text-foreground/60">
@@ -72,7 +72,7 @@ export default function TermsPage() {
           {/* Table of Contents Sidebar */}
           <aside className="lg:w-64 flex-shrink-0">
             <div className="lg:sticky lg:top-24">
-              <nav className="bg-[#0f0f0f] border border-white/10 rounded-lg p-4">
+              <nav className="bg-background border border-white/10 rounded-lg p-4">
                 <h2 className="text-sm font-semibold text-foreground mb-4 px-2">Table of Contents</h2>
                 <ul className="space-y-1">
                   {sections.map(({ id, title }) => (
@@ -81,7 +81,7 @@ export default function TermsPage() {
                         onClick={() => scrollToSection(id)}
                         className={`w-full text-left text-sm px-2 py-1.5 rounded transition-colors ${
                           activeSection === id
-                            ? 'text-[#06D6A0] bg-[#06D6A0]/10 font-medium'
+                            ? 'text-primary bg-primary/10 font-medium'
                             : 'text-foreground/60 hover:text-foreground hover:bg-white/5'
                         }`}
                       >
@@ -323,22 +323,22 @@ export default function TermsPage() {
                   <p>
                     If you have any questions about these Terms, please contact us:
                   </p>
-                  <div className="bg-[#0f0f0f] border border-white/10 rounded-lg p-6 space-y-3">
+                  <div className="bg-background border border-white/10 rounded-lg p-6 space-y-3">
                     <div>
                       <strong className="text-white">Email:</strong>{' '}
-                      <a href="mailto:legal@foragents.dev" className="text-[#06D6A0] hover:underline">
+                      <a href="mailto:legal@foragents.dev" className="text-primary hover:underline">
                         legal@foragents.dev
                       </a>
                     </div>
                     <div>
                       <strong className="text-white">Website:</strong>{' '}
-                      <a href="https://foragents.dev" className="text-[#06D6A0] hover:underline">
+                      <a href="https://foragents.dev" className="text-primary hover:underline">
                         foragents.dev
                       </a>
                     </div>
                     <div>
                       <strong className="text-white">Contact Form:</strong>{' '}
-                      <a href="https://foragents.dev/contact" className="text-[#06D6A0] hover:underline">
+                      <a href="https://foragents.dev/contact" className="text-primary hover:underline">
                         foragents.dev/contact
                       </a>
                     </div>
diff --git a/src/app/testimonials/page.tsx b/src/app/testimonials/page.tsx
index cc6f66e3..10bf4473 100644
--- a/src/app/testimonials/page.tsx
+++ b/src/app/testimonials/page.tsx
@@ -71,7 +71,7 @@ export default function TestimonialsPage() {
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-14 md:py-16 text-center">
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC] mb-4">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
             Signals from the field
           </h1>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
@@ -101,7 +101,7 @@ export default function TestimonialsPage() {
                       {getInitials(t.name)}
                     </div>
                     <div>
-                      <div className="font-semibold text-[#F8FAFC]">
+                      <div className="font-semibold text-foreground">
                         {t.name}
                       </div>
                       <div className="text-sm text-muted-foreground">
diff --git a/src/app/testing-hub/benchmarks/page.tsx b/src/app/testing-hub/benchmarks/page.tsx
index 4daecfc6..488b2965 100644
--- a/src/app/testing-hub/benchmarks/page.tsx
+++ b/src/app/testing-hub/benchmarks/page.tsx
@@ -19,7 +19,7 @@ export default async function BenchmarksPage({ searchParams }: BenchmarksPagePro
   });
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <section className="border-b border-white/10 bg-gradient-to-b from-white/5 to-transparent">
         <div className="mx-auto max-w-7xl px-6 py-16 lg:px-8">
           <div className="mb-8">
diff --git a/src/app/testing-hub/cases/page.tsx b/src/app/testing-hub/cases/page.tsx
index f91b9102..906f6efe 100644
--- a/src/app/testing-hub/cases/page.tsx
+++ b/src/app/testing-hub/cases/page.tsx
@@ -25,7 +25,7 @@ export default async function TestCasesPage({ searchParams }: TestCasesPageProps
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <section className="border-b border-white/10 bg-gradient-to-b from-white/5 to-transparent">
         <div className="mx-auto max-w-7xl px-6 py-16 lg:px-8">
           <div className="mb-8">
diff --git a/src/app/testing-hub/ci-cd/page.tsx b/src/app/testing-hub/ci-cd/page.tsx
index 47213e2a..90471329 100644
--- a/src/app/testing-hub/ci-cd/page.tsx
+++ b/src/app/testing-hub/ci-cd/page.tsx
@@ -19,7 +19,7 @@ export default async function CICDPage({ searchParams }: CICDPageProps) {
   });
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <section className="border-b border-white/10 bg-gradient-to-b from-white/5 to-transparent">
         <div className="mx-auto max-w-7xl px-6 py-16 lg:px-8">
           <div className="mb-8">
diff --git a/src/app/testing-hub/page.tsx b/src/app/testing-hub/page.tsx
index 75f5e41d..c1fb9d0c 100644
--- a/src/app/testing-hub/page.tsx
+++ b/src/app/testing-hub/page.tsx
@@ -57,7 +57,7 @@ export default async function TestingHubPage() {
   const recent = entries.slice(0, 6);
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <section className="border-b border-white/10 bg-gradient-to-b from-white/5 to-transparent">
         <div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
           <div className="mx-auto max-w-3xl text-center">
diff --git a/src/app/testing/page.tsx b/src/app/testing/page.tsx
index 7722c071..f5155795 100644
--- a/src/app/testing/page.tsx
+++ b/src/app/testing/page.tsx
@@ -83,7 +83,7 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default function TestingPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       <TestingClient data={testData} />
     </div>
   );
diff --git a/src/app/testing/testing-client.tsx b/src/app/testing/testing-client.tsx
index b65e2d0d..168bb874 100644
--- a/src/app/testing/testing-client.tsx
+++ b/src/app/testing/testing-client.tsx
@@ -80,11 +80,11 @@ export function TestingClient({ data }: { data: TestingData }) {
   const getDifficultyColor = (difficulty: string) => {
     switch (difficulty) {
       case "beginner":
-        return "bg-[#06D6A0]/20 text-[#06D6A0] border-[#06D6A0]/30";
+        return "bg-primary/20 text-primary border-primary/30";
       case "intermediate":
-        return "bg-[#3B82F6]/20 text-[#3B82F6] border-[#3B82F6]/30";
+        return "bg-electric-blue/20 text-electric-blue border-electric-blue/30";
       case "advanced":
-        return "bg-[#F59E0B]/20 text-[#F59E0B] border-[#F59E0B]/30";
+        return "bg-solar/20 text-solar border-solar/30";
       default:
         return "bg-foreground/20 text-foreground border-foreground/30";
     }
@@ -93,7 +93,7 @@ export function TestingClient({ data }: { data: TestingData }) {
   const getStatusColor = (status: string) => {
     switch (status) {
       case "passed":
-        return "bg-[#06D6A0]/20 text-[#06D6A0] border-[#06D6A0]/30";
+        return "bg-primary/20 text-primary border-primary/30";
       case "failed":
         return "bg-red-500/20 text-red-500 border-red-500/30";
       case "skipped":
@@ -132,12 +132,12 @@ export function TestingClient({ data }: { data: TestingData }) {
       {/* Hero Section */}
       <section className="relative overflow-hidden min-h-[400px] flex items-center">
         <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#8B5CF6]/5 rounded-full blur-[160px]" />
-          <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-[#06D6A0]/3 rounded-full blur-[120px]" />
+          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-purple/5 rounded-full blur-[160px]" />
+          <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-primary/3 rounded-full blur-[120px]" />
         </div>
 
         <div className="relative max-w-7xl mx-auto px-4 py-20 w-full">
-          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-2">
+          <h1 className="text-[40px] md:text-[56px] font-bold tracking-[-0.02em] text-foreground mb-2">
             Agent Testing Framework
           </h1>
           <p className="text-xl text-foreground/80 mb-6">
@@ -147,7 +147,7 @@ export function TestingClient({ data }: { data: TestingData }) {
           <div className="flex items-center gap-3">
             <button
               onClick={() => setShowConfig(!showConfig)}
-              className="px-6 py-3 rounded-lg bg-[#8B5CF6] text-white font-semibold hover:brightness-110 transition-all"
+              className="px-6 py-3 rounded-lg bg-purple text-white font-semibold hover:brightness-110 transition-all"
             >
               {showConfig ? "Hide Configuration" : "Configure Tests"}
             </button>
@@ -349,7 +349,7 @@ export function TestingClient({ data }: { data: TestingData }) {
           onClick={() => setSelectedTemplate(null)}
         >
           <div
-            className="bg-[#0a0a0a] border border-white/10 rounded-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto"
+            className="bg-background border border-white/10 rounded-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto"
             onClick={(e) => e.stopPropagation()}
           >
             <div className="p-6 border-b border-white/10">
@@ -388,7 +388,7 @@ export function TestingClient({ data }: { data: TestingData }) {
                 <ol className="space-y-2">
                   {selectedTemplate.steps.map((step, i) => (
                     <li key={i} className="flex gap-3">
-                      <span className="flex-shrink-0 w-6 h-6 rounded-full bg-[#8B5CF6]/20 text-[#8B5CF6] flex items-center justify-center text-sm font-semibold">
+                      <span className="flex-shrink-0 w-6 h-6 rounded-full bg-purple/20 text-purple flex items-center justify-center text-sm font-semibold">
                         {i + 1}
                       </span>
                       <span className="text-foreground/80">{step}</span>
@@ -402,7 +402,7 @@ export function TestingClient({ data }: { data: TestingData }) {
                 <ul className="space-y-2">
                   {selectedTemplate.assertions.map((assertion, i) => (
                     <li key={i} className="flex gap-3">
-                      <span className="text-[#06D6A0]">✓</span>
+                      <span className="text-primary">✓</span>
                       <span className="text-foreground/80">{assertion}</span>
                     </li>
                   ))}
@@ -424,7 +424,7 @@ export function TestingClient({ data }: { data: TestingData }) {
                 </div>
               </div>
 
-              <button className="w-full px-6 py-3 rounded-lg bg-[#8B5CF6] text-white font-semibold hover:brightness-110 transition-all">
+              <button className="w-full px-6 py-3 rounded-lg bg-purple text-white font-semibold hover:brightness-110 transition-all">
                 Run This Test
               </button>
             </div>
@@ -438,9 +438,9 @@ export function TestingClient({ data }: { data: TestingData }) {
         
         {/* Summary Cards */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4 mb-6">
-          <Card className="bg-gradient-to-br from-[#06D6A0]/10 to-card/30 border-[#06D6A0]/20">
+          <Card className="bg-gradient-to-br from-primary/10 to-card/30 border-primary/20">
             <CardContent className="pt-6">
-              <div className="text-2xl font-bold text-[#06D6A0] mb-1">
+              <div className="text-2xl font-bold text-primary mb-1">
                 {latestRun.results.passed}
               </div>
               <p className="text-xs text-muted-foreground">Passed</p>
@@ -465,27 +465,27 @@ export function TestingClient({ data }: { data: TestingData }) {
             </CardContent>
           </Card>
 
-          <Card className="bg-gradient-to-br from-[#3B82F6]/10 to-card/30 border-[#3B82F6]/20">
+          <Card className="bg-gradient-to-br from-electric-blue/10 to-card/30 border-electric-blue/20">
             <CardContent className="pt-6">
-              <div className="text-2xl font-bold text-[#3B82F6] mb-1">
+              <div className="text-2xl font-bold text-electric-blue mb-1">
                 {latestRun.results.total}
               </div>
               <p className="text-xs text-muted-foreground">Total</p>
             </CardContent>
           </Card>
 
-          <Card className="bg-gradient-to-br from-[#8B5CF6]/10 to-card/30 border-[#8B5CF6]/20">
+          <Card className="bg-gradient-to-br from-purple/10 to-card/30 border-purple/20">
             <CardContent className="pt-6">
-              <div className="text-2xl font-bold text-[#8B5CF6] mb-1">
+              <div className="text-2xl font-bold text-purple mb-1">
                 {(latestRun.results.duration / 1000).toFixed(1)}s
               </div>
               <p className="text-xs text-muted-foreground">Duration</p>
             </CardContent>
           </Card>
 
-          <Card className="bg-gradient-to-br from-[#F59E0B]/10 to-card/30 border-[#F59E0B]/20">
+          <Card className="bg-gradient-to-br from-solar/10 to-card/30 border-solar/20">
             <CardContent className="pt-6">
-              <div className="text-2xl font-bold text-[#F59E0B] mb-1">
+              <div className="text-2xl font-bold text-solar mb-1">
                 {latestRun.results.coverage.toFixed(1)}%
               </div>
               <p className="text-xs text-muted-foreground">Coverage</p>
@@ -502,13 +502,13 @@ export function TestingClient({ data }: { data: TestingData }) {
             <div className="space-y-4">
               <div className="flex items-center justify-between text-sm mb-2">
                 <span className="text-muted-foreground">Overall Coverage</span>
-                <span className="font-bold text-[#06D6A0]">
+                <span className="font-bold text-primary">
                   {latestRun.results.coverage.toFixed(1)}%
                 </span>
               </div>
               <div className="relative w-full h-8 bg-card/20 rounded-full overflow-hidden">
                 <div
-                  className="absolute left-0 top-0 h-full bg-gradient-to-r from-[#06D6A0] to-[#3B82F6] rounded-full transition-all"
+                  className="absolute left-0 top-0 h-full bg-gradient-to-r from-primary to-electric-blue rounded-full transition-all"
                   style={{ width: `${latestRun.results.coverage}%` }}
                 />
               </div>
@@ -517,7 +517,7 @@ export function TestingClient({ data }: { data: TestingData }) {
               <div className="grid grid-cols-3 gap-2 mt-4">
                 <div className="text-center">
                   <div className="text-sm text-muted-foreground mb-1">Pass Rate</div>
-                  <div className="text-lg font-bold text-[#06D6A0]">
+                  <div className="text-lg font-bold text-primary">
                     {((latestRun.results.passed / latestRun.results.total) * 100).toFixed(0)}%
                   </div>
                 </div>
@@ -601,7 +601,7 @@ export function TestingClient({ data }: { data: TestingData }) {
                           {isLatest && (
                             <Badge
                               variant="outline"
-                              className="bg-[#06D6A0]/20 text-[#06D6A0] border-[#06D6A0]/30"
+                              className="bg-primary/20 text-primary border-primary/30"
                             >
                               Latest
                             </Badge>
@@ -621,7 +621,7 @@ export function TestingClient({ data }: { data: TestingData }) {
                             <span
                               className={`text-sm ${
                                 coverageDiff > 0
-                                  ? "text-[#06D6A0]"
+                                  ? "text-primary"
                                   : coverageDiff < 0
                                     ? "text-red-500"
                                     : "text-muted-foreground"
@@ -648,7 +648,7 @@ export function TestingClient({ data }: { data: TestingData }) {
                       </div>
                       <div>
                         <div className="text-xs text-muted-foreground mb-1">Passed</div>
-                        <div className="text-sm text-[#06D6A0] font-semibold">
+                        <div className="text-sm text-primary font-semibold">
                           {run.results.passed}
                         </div>
                       </div>
@@ -669,7 +669,7 @@ export function TestingClient({ data }: { data: TestingData }) {
                     </div>
 
                     {previousRun && (
-                      <button className="text-sm text-[#8B5CF6] hover:underline">
+                      <button className="text-sm text-purple hover:underline">
                         Compare with previous run →
                       </button>
                     )}
@@ -685,9 +685,9 @@ export function TestingClient({ data }: { data: TestingData }) {
 
       {/* CTA Section */}
       <section className="max-w-4xl mx-auto px-4 py-16">
-        <div className="relative overflow-hidden rounded-2xl border border-[#8B5CF6]/20 bg-gradient-to-br from-[#8B5CF6]/5 via-card/80 to-[#06D6A0]/5">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-[#8B5CF6]/10 rounded-full blur-[80px]" />
-          <div className="absolute bottom-0 left-0 w-48 h-48 bg-[#06D6A0]/10 rounded-full blur-[60px]" />
+        <div className="relative overflow-hidden rounded-2xl border border-purple/20 bg-gradient-to-br from-purple/5 via-card/80 to-primary/5">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-purple/10 rounded-full blur-[80px]" />
+          <div className="absolute bottom-0 left-0 w-48 h-48 bg-primary/10 rounded-full blur-[60px]" />
 
           <div className="relative p-8 md:p-12 text-center">
             <h2 className="text-2xl md:text-3xl font-bold mb-4">
@@ -701,7 +701,7 @@ export function TestingClient({ data }: { data: TestingData }) {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <a
                 href="/pricing"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#8B5CF6] text-white font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-purple text-white font-semibold text-sm hover:brightness-110 transition-all"
               >
                 Upgrade to Premium →
               </a>
diff --git a/src/app/tokens.css b/src/app/tokens.css
new file mode 100644
index 00000000..abcdaf2b
--- /dev/null
+++ b/src/app/tokens.css
@@ -0,0 +1,546 @@
+/**
+ * Reflectt Design Tokens
+ * Version: 1.0.0
+ * Generated by Pixel (Design Lead)
+ *
+ * Unified CSS custom properties for:
+ *   - reflectt.ai (marketing site)
+ *   - chat.reflectt.ai (reflectt-ai)
+ *   - forAgents.dev
+ *
+ * WCAG 2.1 AA verified. See tokens-docs.md for contrast ratios.
+ * Integration guide: integration-guide.md
+ */
+
+/* ============================================================
+   PRIMITIVE TOKENS — raw values, do not use directly in UI
+   ============================================================ */
+
+:root {
+  /* --- Color Primitives: Indigo (Primary Brand) --- */
+  --rt-indigo-50:  #EEF2FF;
+  --rt-indigo-100: #E0E7FF;
+  --rt-indigo-200: #C7D2FE;
+  --rt-indigo-300: #A5B4FC;
+  --rt-indigo-400: #818CF8;
+  --rt-indigo-500: #6366F1;  /* brand primary */
+  --rt-indigo-600: #4F46E5;
+  --rt-indigo-700: #4338CA;
+  --rt-indigo-800: #3730A3;
+  --rt-indigo-900: #312E81;
+  --rt-indigo-950: #1E1B4B;
+
+  /* --- Color Primitives: Violet (Secondary Brand) --- */
+  --rt-violet-50:  #F5F3FF;
+  --rt-violet-100: #EDE9FE;
+  --rt-violet-200: #DDD6FE;
+  --rt-violet-300: #C4B5FD;
+  --rt-violet-400: #A78BFA;
+  --rt-violet-500: #8B5CF6;  /* brand secondary */
+  --rt-violet-600: #7C3AED;
+  --rt-violet-700: #6D28D9;
+  --rt-violet-800: #5B21B6;
+  --rt-violet-900: #4C1D95;
+  --rt-violet-950: #2E1065;
+
+  /* --- Color Primitives: Slate (Neutral) --- */
+  --rt-slate-50:  #F8FAFC;
+  --rt-slate-100: #F1F5F9;
+  --rt-slate-200: #E2E8F0;
+  --rt-slate-300: #CBD5E1;
+  --rt-slate-400: #94A3B8;
+  --rt-slate-500: #64748B;
+  --rt-slate-600: #475569;
+  --rt-slate-700: #334155;
+  --rt-slate-800: #1E293B;
+  --rt-slate-850: #172033;
+  --rt-slate-900: #0F172A;  /* dark bg */
+  --rt-slate-950: #020617;
+
+  /* --- Color Primitives: Semantic --- */
+  --rt-ember-400: #FB923C;
+  --rt-ember-500: #F97316;  /* highlight / CTA accent */
+  --rt-ember-600: #EA580C;
+  --rt-seafoam-400: #2DD4BF;
+  --rt-seafoam-500: #14B8A6;  /* success */
+  --rt-seafoam-600: #0D9488;
+  --rt-seafoam-700: #0F766E;  /* success on light bg — 5.47:1 vs white, WCAG AA */
+  --rt-rose-400:  #FB7185;
+  --rt-rose-500:  #F43F5E;  /* error / destructive */
+  --rt-rose-600:  #E11D48;
+  --rt-amber-400: #FBBF24;
+  --rt-amber-500: #F59E0B;  /* warning */
+  --rt-amber-600: #D97706;
+
+  /* --- Typography Primitives --- */
+  --rt-font-sans:  'Inter', 'Geist', system-ui, -apple-system, sans-serif;
+  --rt-font-mono:  'JetBrains Mono', 'Geist Mono', 'Fira Code', monospace;
+  --rt-font-display: 'Inter', system-ui, sans-serif;  /* headings, same as sans for now */
+
+  /* Font sizes — fluid scale (clamp preferred in components) */
+  --rt-text-xs:   0.75rem;   /* 12px */
+  --rt-text-sm:   0.875rem;  /* 14px */
+  --rt-text-base: 1rem;      /* 16px */
+  --rt-text-lg:   1.125rem;  /* 18px */
+  --rt-text-xl:   1.25rem;   /* 20px */
+  --rt-text-2xl:  1.5rem;    /* 24px */
+  --rt-text-3xl:  1.875rem;  /* 30px */
+  --rt-text-4xl:  2.25rem;   /* 36px */
+  --rt-text-5xl:  3rem;      /* 48px */
+  --rt-text-6xl:  3.75rem;   /* 60px */
+
+  /* Font weights */
+  --rt-weight-normal:   400;
+  --rt-weight-medium:   500;
+  --rt-weight-semibold: 600;
+  --rt-weight-bold:     700;
+  --rt-weight-extrabold: 800;
+
+  /* Line heights */
+  --rt-leading-none:    1;
+  --rt-leading-tight:   1.25;
+  --rt-leading-snug:    1.375;
+  --rt-leading-normal:  1.5;
+  --rt-leading-relaxed: 1.625;
+  --rt-leading-loose:   2;
+
+  /* Letter spacing */
+  --rt-tracking-tighter: -0.05em;
+  --rt-tracking-tight:   -0.025em;
+  --rt-tracking-normal:   0em;
+  --rt-tracking-wide:     0.025em;
+  --rt-tracking-wider:    0.05em;
+  --rt-tracking-widest:   0.1em;
+
+  /* --- Spacing Primitives (4px base grid) --- */
+  --rt-space-0:   0;
+  --rt-space-px:  1px;
+  --rt-space-0-5: 0.125rem;  /* 2px */
+  --rt-space-1:   0.25rem;   /* 4px */
+  --rt-space-1-5: 0.375rem;  /* 6px */
+  --rt-space-2:   0.5rem;    /* 8px */
+  --rt-space-2-5: 0.625rem;  /* 10px */
+  --rt-space-3:   0.75rem;   /* 12px */
+  --rt-space-3-5: 0.875rem;  /* 14px */
+  --rt-space-4:   1rem;      /* 16px */
+  --rt-space-5:   1.25rem;   /* 20px */
+  --rt-space-6:   1.5rem;    /* 24px */
+  --rt-space-7:   1.75rem;   /* 28px */
+  --rt-space-8:   2rem;      /* 32px */
+  --rt-space-10:  2.5rem;    /* 40px */
+  --rt-space-12:  3rem;      /* 48px */
+  --rt-space-16:  4rem;      /* 64px */
+  --rt-space-20:  5rem;      /* 80px */
+  --rt-space-24:  6rem;      /* 96px */
+  --rt-space-32:  8rem;      /* 128px */
+  --rt-space-40:  10rem;     /* 160px */
+  --rt-space-48:  12rem;     /* 192px */
+  --rt-space-64:  16rem;     /* 256px */
+
+  /* --- Border Radius Primitives --- */
+  --rt-radius-none:  0;
+  --rt-radius-xs:    0.125rem;  /* 2px */
+  --rt-radius-sm:    0.25rem;   /* 4px */
+  --rt-radius-md:    0.375rem;  /* 6px */
+  --rt-radius-lg:    0.5rem;    /* 8px */
+  --rt-radius-xl:    0.75rem;   /* 12px */
+  --rt-radius-2xl:   1rem;      /* 16px */
+  --rt-radius-3xl:   1.5rem;    /* 24px */
+  --rt-radius-full:  9999px;
+
+  /* --- Shadow Primitives --- */
+  --rt-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --rt-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
+  --rt-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
+  --rt-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
+  --rt-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
+  --rt-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --rt-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --rt-shadow-none: 0 0 #0000;
+
+  /* Brand glow shadows */
+  --rt-shadow-glow-primary: 0 0 20px rgb(99 102 241 / 0.35), 0 0 40px rgb(99 102 241 / 0.15);
+  --rt-shadow-glow-secondary: 0 0 20px rgb(139 92 246 / 0.35), 0 0 40px rgb(139 92 246 / 0.15);
+  --rt-shadow-glow-ember: 0 0 20px rgb(249 115 22 / 0.35), 0 0 40px rgb(249 115 22 / 0.15);
+
+  /* --- Z-Index Scale --- */
+  --rt-z-below:    -1;
+  --rt-z-base:      0;
+  --rt-z-raised:   10;
+  --rt-z-dropdown: 100;
+  --rt-z-sticky:   200;
+  --rt-z-overlay:  300;
+  --rt-z-modal:    400;
+  --rt-z-popover:  500;
+  --rt-z-toast:    600;
+  --rt-z-tooltip:  700;
+
+  /* --- Transition Primitives --- */
+  --rt-ease-linear:     linear;
+  --rt-ease-in:         cubic-bezier(0.4, 0, 1, 1);
+  --rt-ease-out:        cubic-bezier(0, 0, 0.2, 1);
+  --rt-ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
+  --rt-ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
+  --rt-ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  --rt-duration-instant: 0ms;
+  --rt-duration-fast:    100ms;
+  --rt-duration-normal:  200ms;
+  --rt-duration-slow:    300ms;
+  --rt-duration-slower:  500ms;
+}
+
+
+/* ============================================================
+   SEMANTIC TOKENS — DARK THEME (default, all products)
+   These reference primitives and define actual UI meaning.
+   ============================================================ */
+
+:root,
+[data-theme="dark"] {
+  /* --- Background --- */
+  --color-bg:            var(--rt-slate-900);    /* #0F172A — page background */
+  --color-bg-subtle:     var(--rt-slate-850);    /* #172033 — slightly lifted */
+  --color-surface:       var(--rt-slate-800);    /* #1E293B — cards, panels */
+  --color-surface-raised:var(--rt-slate-700);    /* #334155 — elevated surface */
+  --color-surface-overlay:rgb(15 23 42 / 0.85); /* modal/popover scrim */
+
+  /* --- Text --- */
+  --color-text:          var(--rt-slate-100);    /* #F1F5F9 — primary text     (≥7:1 on --color-bg) */
+  --color-text-secondary:var(--rt-slate-400);    /* #94A3B8 — muted/helper     (≥4.6:1 on --color-bg) */
+  --color-text-tertiary: var(--rt-slate-500);    /* #64748B — placeholder      (3.75:1 — large text/non-interactive only; NOT for normal body text) */
+  --color-text-disabled: var(--rt-slate-600);    /* #475569 — disabled state   (not interactive) */
+  --color-text-inverse:  var(--rt-slate-900);    /* dark text on light surface */
+  --color-text-on-primary: var(--rt-slate-50);   /* text on indigo button */
+
+  /* --- Brand / Primary --- */
+  --color-primary:       var(--rt-indigo-500);   /* #6366F1 — 4.0:1 on dark bg; WCAG AA large text + UI controls (3:1 req) */
+  --color-primary-hover: var(--rt-indigo-400);   /* #818CF8 */
+  --color-text-link:     var(--rt-indigo-400);   /* #818CF8 — 5.98:1 on dark bg; use for inline text links (WCAG AA normal text) */
+  --color-primary-active:var(--rt-indigo-600);   /* #4F46E5 */
+  --color-primary-subtle:rgb(99 102 241 / 0.15); /* tinted backgrounds */
+  --color-primary-border:rgb(99 102 241 / 0.40); /* border around primary elements */
+
+  /* --- Brand / Secondary --- */
+  --color-secondary:       var(--rt-violet-500); /* #8B5CF6 */
+  --color-secondary-hover: var(--rt-violet-400); /* #A78BFA */
+  --color-secondary-active:var(--rt-violet-600); /* #7C3AED */
+  --color-secondary-subtle:rgb(139 92 246 / 0.15);
+  --color-secondary-border:rgb(139 92 246 / 0.40);
+
+  /* --- Accent (Ember — for CTAs, highlights, heat) --- */
+  --color-accent:        var(--rt-ember-500);    /* #F97316 */
+  --color-accent-hover:  var(--rt-ember-400);    /* #FB923C */
+  --color-accent-active: var(--rt-ember-600);    /* #EA580C */
+  --color-accent-subtle: rgb(249 115 22 / 0.15);
+
+  /* --- Borders --- */
+  --color-border:        var(--rt-slate-700);    /* #334155 — default border */
+  --color-border-subtle: var(--rt-slate-800);    /* #1E293B — subtle divider */
+  --color-border-strong: var(--rt-slate-600);    /* #475569 — stronger border */
+  --color-border-focus:  var(--rt-indigo-500);   /* focus ring color */
+
+  /* --- Semantic State Colors --- */
+  --color-success:        var(--rt-seafoam-500); /* #14B8A6 */
+  --color-success-hover:  var(--rt-seafoam-400);
+  --color-success-subtle: rgb(20 184 166 / 0.15);
+  --color-success-text:   var(--rt-seafoam-400); /* on dark bg */
+
+  --color-warning:        var(--rt-amber-500);   /* #F59E0B */
+  --color-warning-hover:  var(--rt-amber-400);
+  --color-warning-subtle: rgb(245 158 11 / 0.15);
+  --color-warning-text:   var(--rt-amber-400);
+
+  --color-error:          var(--rt-rose-500);    /* #F43F5E */
+  --color-error-hover:    var(--rt-rose-400);
+  --color-error-subtle:   rgb(244 63 94 / 0.15);
+  --color-error-text:     var(--rt-rose-400);
+
+  --color-info:           var(--rt-indigo-400);  /* #818CF8 */
+  --color-info-subtle:    rgb(129 140 248 / 0.15);
+  --color-info-text:      var(--rt-indigo-300);
+
+  /* --- Shadows (contextual on dark) --- */
+  --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.30), 0 1px 2px -1px rgb(0 0 0 / 0.30);
+  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.40), 0 2px 4px -2px rgb(0 0 0 / 0.40);
+  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.40), 0 4px 6px -4px rgb(0 0 0 / 0.40);
+  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.50), 0 8px 10px -6px rgb(0 0 0 / 0.50);
+  --shadow-glow-primary:   var(--rt-shadow-glow-primary);
+  --shadow-glow-secondary: var(--rt-shadow-glow-secondary);
+  --shadow-glow-accent:    var(--rt-shadow-glow-ember);
+
+  /* --- Focus Ring --- */
+  --focus-ring: 0 0 0 3px rgb(99 102 241 / 0.45);
+  --focus-ring-error: 0 0 0 3px rgb(244 63 94 / 0.45);
+
+  /* --- Border Radius (semantic) --- */
+  --radius-component: var(--rt-radius-lg);    /* 8px — inputs, badges */
+  --radius-card:      var(--rt-radius-xl);    /* 12px — cards, panels */
+  --radius-modal:     var(--rt-radius-2xl);   /* 16px — modals */
+  --radius-button:    var(--rt-radius-md);    /* 6px — buttons */
+  --radius-pill:      var(--rt-radius-full);  /* pills / tags */
+
+  /* --- Typography (semantic) --- */
+  --font-body:    var(--rt-font-sans);
+  --font-heading: var(--rt-font-display);
+  --font-code:    var(--rt-font-mono);
+
+  /* --- Spacing (layout-level semantic) --- */
+  --space-page-x:    var(--rt-space-6);   /* 24px — mobile horizontal padding */
+  --space-page-x-md: var(--rt-space-8);   /* 32px — tablet */
+  --space-page-x-lg: var(--rt-space-16);  /* 64px — desktop */
+  --space-section:   var(--rt-space-16);  /* 64px — between sections */
+  --space-section-lg:var(--rt-space-24);  /* 96px — larger section gaps */
+  --space-card:      var(--rt-space-6);   /* 24px — card internal padding */
+
+  /* --- Transitions (semantic) --- */
+  --transition-color:     color var(--rt-duration-normal) var(--rt-ease-in-out),
+                          background-color var(--rt-duration-normal) var(--rt-ease-in-out),
+                          border-color var(--rt-duration-normal) var(--rt-ease-in-out);
+  --transition-transform: transform var(--rt-duration-normal) var(--rt-ease-out);
+  --transition-opacity:   opacity var(--rt-duration-normal) var(--rt-ease-in-out);
+  --transition-shadow:    box-shadow var(--rt-duration-normal) var(--rt-ease-out);
+  --transition-all:       all var(--rt-duration-normal) var(--rt-ease-in-out);
+}
+
+
+/* ============================================================
+   LIGHT THEME OVERRIDES
+   Apply via [data-theme="light"] or .light class on <html>
+   ============================================================ */
+
+[data-theme="light"],
+.light {
+  /* --- Background --- */
+  --color-bg:             var(--rt-slate-50);    /* #F8FAFC */
+  --color-bg-subtle:      var(--rt-slate-100);   /* #F1F5F9 */
+  --color-surface:        #FFFFFF;
+  --color-surface-raised: var(--rt-slate-50);    /* #F8FAFC */
+  --color-surface-overlay:rgb(248 250 252 / 0.90);
+
+  /* --- Text --- */
+  --color-text:           var(--rt-slate-900);   /* #0F172A — (≥15:1 on white) */
+  --color-text-secondary: var(--rt-slate-600);   /* #475569 — (≥5.9:1 on white) */
+  --color-text-tertiary:  var(--rt-slate-400);   /* #94A3B8 — (≥3.0:1 — large only) */
+  --color-text-disabled:  var(--rt-slate-300);
+  --color-text-inverse:   var(--rt-slate-50);
+  --color-text-on-primary:var(--rt-slate-50);
+
+  /* --- Brand / Primary (slightly darker for light bg contrast) --- */
+  --color-primary:        var(--rt-indigo-600);  /* #4F46E5 — (≥4.6:1 on white) */
+  --color-primary-hover:  var(--rt-indigo-500);
+  --color-primary-active: var(--rt-indigo-700);
+  --color-primary-subtle: var(--rt-indigo-50);
+  --color-primary-border: var(--rt-indigo-200);
+
+  /* --- Brand / Secondary --- */
+  --color-secondary:       var(--rt-violet-600); /* #7C3AED */
+  --color-secondary-hover: var(--rt-violet-500);
+  --color-secondary-active:var(--rt-violet-700);
+  --color-secondary-subtle:var(--rt-violet-50);
+  --color-secondary-border:var(--rt-violet-200);
+
+  /* --- Accent --- */
+  --color-accent:         var(--rt-ember-500);
+  --color-accent-hover:   var(--rt-ember-600);
+  --color-accent-active:  var(--rt-ember-600);
+  --color-accent-subtle:  rgb(249 115 22 / 0.08);
+
+  /* --- Borders --- */
+  --color-border:         var(--rt-slate-200);
+  --color-border-subtle:  var(--rt-slate-100);
+  --color-border-strong:  var(--rt-slate-300);
+  --color-border-focus:   var(--rt-indigo-500);
+
+  /* --- Semantic State (light-adjusted) --- */
+  --color-success:        var(--rt-seafoam-700);  /* #0F766E — 5.47:1 on white, WCAG AA ✅ (was seafoam-600 #0D9488 = 3.74:1, failed) */
+  --color-success-hover:  var(--rt-seafoam-600);
+  --color-success-subtle: rgb(15 118 110 / 0.08);
+  --color-success-text:   var(--rt-seafoam-700);  /* #0F766E — 5.47:1 on white, WCAG AA ✅ */
+
+  --color-warning:        var(--rt-amber-600);
+  --color-warning-hover:  var(--rt-amber-500);
+  --color-warning-subtle: rgb(217 119 6 / 0.08);
+  --color-warning-text:   var(--rt-amber-600);
+
+  --color-error:          var(--rt-rose-600);
+  --color-error-hover:    var(--rt-rose-500);
+  --color-error-subtle:   rgb(225 29 72 / 0.08);
+  --color-error-text:     var(--rt-rose-600);
+
+  --color-info:           var(--rt-indigo-600);
+  --color-info-subtle:    var(--rt-indigo-50);
+  --color-info-text:      var(--rt-indigo-700);
+
+  /* --- Shadows (lighter on light theme) --- */
+  --shadow-sm:   var(--rt-shadow-sm);
+  --shadow-md:   var(--rt-shadow-md);
+  --shadow-lg:   var(--rt-shadow-lg);
+  --shadow-xl:   var(--rt-shadow-xl);
+  --shadow-glow-primary:   0 0 20px rgb(79 70 229 / 0.20), 0 0 40px rgb(79 70 229 / 0.08);
+  --shadow-glow-secondary: 0 0 20px rgb(124 58 237 / 0.20), 0 0 40px rgb(124 58 237 / 0.08);
+  --shadow-glow-accent:    0 0 20px rgb(249 115 22 / 0.20), 0 0 40px rgb(249 115 22 / 0.08);
+
+  /* --- Focus Ring --- */
+  --focus-ring: 0 0 0 3px rgb(79 70 229 / 0.35);
+}
+
+
+/* ============================================================
+   COMPONENT TOKENS — ready-to-use component-level variables
+   ============================================================ */
+
+:root {
+  /* --- Button --- */
+  --btn-primary-bg:      var(--color-primary);
+  --btn-primary-bg-hover:var(--color-primary-hover);
+  --btn-primary-text:    var(--color-text-on-primary);
+  --btn-primary-shadow:  var(--shadow-glow-primary);
+  --btn-secondary-bg:    var(--color-surface-raised);
+  --btn-secondary-text:  var(--color-text);
+  --btn-secondary-border:var(--color-border);
+  --btn-ghost-bg:        transparent;
+  --btn-ghost-bg-hover:  var(--color-primary-subtle);
+  --btn-ghost-text:      var(--color-primary);
+  --btn-danger-bg:       var(--color-error);
+  --btn-radius:          var(--radius-button);
+  --btn-height-sm:       var(--rt-space-8);   /* 32px */
+  --btn-height-md:       var(--rt-space-10);  /* 40px */
+  --btn-height-lg:       var(--rt-space-12);  /* 48px */
+  --btn-px-sm:           var(--rt-space-3);
+  --btn-px-md:           var(--rt-space-4);
+  --btn-px-lg:           var(--rt-space-6);
+
+  /* --- Input / Form --- */
+  --input-bg:            var(--color-surface);
+  --input-border:        var(--color-border);
+  --input-border-focus:  var(--color-border-focus);
+  --input-text:          var(--color-text);
+  --input-placeholder:   var(--color-text-tertiary);
+  --input-radius:        var(--radius-component);
+  --input-height:        var(--rt-space-10);  /* 40px */
+  --input-px:            var(--rt-space-3);   /* 12px */
+  --input-ring-focus:    var(--focus-ring);
+
+  /* --- Card --- */
+  --card-bg:             var(--color-surface);
+  --card-border:         var(--color-border-subtle);
+  --card-radius:         var(--radius-card);
+  --card-shadow:         var(--shadow-md);
+  --card-padding:        var(--space-card);
+
+  /* --- Badge / Tag --- */
+  --badge-radius:        var(--radius-pill);
+  --badge-px:            var(--rt-space-2-5);
+  --badge-py:            var(--rt-space-0-5);
+  --badge-font-size:     var(--rt-text-xs);
+  --badge-font-weight:   var(--rt-weight-semibold);
+
+  /* --- Navigation --- */
+  --nav-bg:              var(--color-bg);
+  --nav-border:          var(--color-border-subtle);
+  --nav-height:          var(--rt-space-16);  /* 64px */
+  --nav-item-active-bg:  var(--color-primary-subtle);
+  --nav-item-active-text:var(--color-primary);
+  --nav-item-text:       var(--color-text-secondary);
+  --nav-item-hover-text: var(--color-text);
+
+  /* --- Modal / Dialog --- */
+  --modal-bg:            var(--color-surface);
+  --modal-border:        var(--color-border);
+  --modal-radius:        var(--radius-modal);
+  --modal-shadow:        var(--shadow-xl);
+  --modal-scrim:         rgb(0 0 0 / 0.60);
+  --modal-padding:       var(--rt-space-6);
+
+  /* --- Toast --- */
+  --toast-bg:            var(--color-surface-raised);
+  --toast-border:        var(--color-border);
+  --toast-radius:        var(--radius-card);
+  --toast-shadow:        var(--shadow-xl);
+  --toast-text:          var(--color-text);
+
+  /* --- Code / Pre --- */
+  --code-bg:             var(--rt-slate-950);
+  --code-text:           var(--rt-slate-200);
+  --code-border:         var(--rt-slate-800);
+  --code-radius:         var(--radius-component);
+  --code-font:           var(--font-code);
+  --code-font-size:      var(--rt-text-sm);
+
+  /* --- Selection --- */
+  --selection-bg:        rgb(99 102 241 / 0.30);
+  --selection-text:      inherit;
+
+  /* --- Scrollbar (custom) --- */
+  --scrollbar-width:     6px;
+  --scrollbar-track:     transparent;
+  --scrollbar-thumb:     var(--rt-slate-700);
+  --scrollbar-thumb-hover:var(--rt-slate-500);
+}
+
+
+/* ============================================================
+   UTILITY CLASSES — apply tokens as classes
+   ============================================================ */
+
+/* Text colors */
+.text-primary   { color: var(--color-primary); }
+.text-secondary { color: var(--color-secondary); }
+.text-accent    { color: var(--color-accent); }
+.text-muted     { color: var(--color-text-secondary); }
+.text-subtle    { color: var(--color-text-tertiary); }
+.text-error     { color: var(--color-error-text); }
+.text-success   { color: var(--color-success-text); }
+.text-warning   { color: var(--color-warning-text); }
+
+/* Backgrounds */
+.bg-surface         { background-color: var(--color-surface); }
+.bg-surface-raised  { background-color: var(--color-surface-raised); }
+.bg-primary-subtle  { background-color: var(--color-primary-subtle); }
+.bg-error-subtle    { background-color: var(--color-error-subtle); }
+.bg-success-subtle  { background-color: var(--color-success-subtle); }
+.bg-warning-subtle  { background-color: var(--color-warning-subtle); }
+
+/* Borders */
+.border-default { border-color: var(--color-border); }
+.border-subtle  { border-color: var(--color-border-subtle); }
+.border-strong  { border-color: var(--color-border-strong); }
+.border-primary { border-color: var(--color-primary-border); }
+
+/* Shadows */
+.shadow-sm  { box-shadow: var(--shadow-sm); }
+.shadow-md  { box-shadow: var(--shadow-md); }
+.shadow-lg  { box-shadow: var(--shadow-lg); }
+.shadow-xl  { box-shadow: var(--shadow-xl); }
+.shadow-glow-primary   { box-shadow: var(--shadow-glow-primary); }
+.shadow-glow-secondary { box-shadow: var(--shadow-glow-secondary); }
+.shadow-glow-accent    { box-shadow: var(--shadow-glow-accent); }
+
+/* Transitions */
+.transition-color     { transition: var(--transition-color); }
+.transition-transform { transition: var(--transition-transform); }
+.transition-opacity   { transition: var(--transition-opacity); }
+.transition-all       { transition: var(--transition-all); }
+
+/* Selection */
+::selection {
+  background-color: var(--selection-bg);
+  color: var(--selection-text);
+}
+
+/* Focus ring */
+.focus-ring:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Custom scrollbar */
+.scrollbar-custom {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+.scrollbar-custom::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); }
+.scrollbar-custom::-webkit-scrollbar-track { background: var(--scrollbar-track); }
+.scrollbar-custom::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--rt-radius-full); }
+.scrollbar-custom::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
diff --git a/src/app/trace/trace-client.tsx b/src/app/trace/trace-client.tsx
index 2a147f1e..2ffb0c0a 100644
--- a/src/app/trace/trace-client.tsx
+++ b/src/app/trace/trace-client.tsx
@@ -221,7 +221,7 @@ export function TraceClient({ initialId }: { initialId: string }) {
             <div className="flex gap-2">
               <button
                 type="submit"
-                className="inline-flex items-center justify-center rounded-lg bg-cyan px-4 py-2 text-sm font-semibold text-[#0A0E17] hover:bg-cyan/90"
+                className="inline-flex items-center justify-center rounded-lg bg-cyan px-4 py-2 text-sm font-semibold text-background hover:bg-cyan/90"
               >
                 Load
               </button>
diff --git a/src/app/trending/trending-page-client.tsx b/src/app/trending/trending-page-client.tsx
index fd9dba2b..700c3023 100644
--- a/src/app/trending/trending-page-client.tsx
+++ b/src/app/trending/trending-page-client.tsx
@@ -69,7 +69,7 @@ export function TrendingPageClient() {
         </div>
 
         <div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-[#F8FAFC] mb-4">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
             🔥 Trending This Week
           </h1>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
diff --git a/src/app/trust-center/page.tsx b/src/app/trust-center/page.tsx
index 70dfc02c..f8e3ec36 100644
--- a/src/app/trust-center/page.tsx
+++ b/src/app/trust-center/page.tsx
@@ -18,7 +18,7 @@ export const metadata: Metadata = {
 
 export default function TrustCenterPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <div className="max-w-6xl mx-auto px-6 py-16">
         <TrustCenterClient />
       </div>
diff --git a/src/app/trust-center/trust-center-client.tsx b/src/app/trust-center/trust-center-client.tsx
index 246f781a..e1ac7151 100644
--- a/src/app/trust-center/trust-center-client.tsx
+++ b/src/app/trust-center/trust-center-client.tsx
@@ -112,10 +112,10 @@ export default function TrustCenterClient() {
 
   return (
     <div className="space-y-8">
-      <Card className="bg-[#0f0f0f] border-white/10 p-6">
+      <Card className="bg-background border-white/10 p-6">
         <div className="flex flex-col md:flex-row gap-4 md:items-end md:justify-between">
           <div>
-            <h2 className="text-2xl font-semibold mb-2 text-[#06D6A0]">Trust Records</h2>
+            <h2 className="text-2xl font-semibold mb-2 text-primary">Trust Records</h2>
             <p className="text-gray-400 text-sm">Live records loaded from persistent JSON through /api/trust-center.</p>
           </div>
 
@@ -134,7 +134,7 @@ export default function TrustCenterClient() {
               className="rounded-md border border-white/15 bg-black/40 px-3 py-2 text-sm text-white"
             >
               {CATEGORY_OPTIONS.map((option) => (
-                <option key={option} value={option} className="bg-[#0f0f0f]">
+                <option key={option} value={option} className="bg-background">
                   {option === "all" ? "All categories" : option}
                 </option>
               ))}
@@ -144,8 +144,8 @@ export default function TrustCenterClient() {
       </Card>
 
       {loading ? (
-        <Card className="bg-[#0f0f0f] border-white/10 p-8 text-center">
-          <Loader2 className="w-6 h-6 animate-spin mx-auto mb-3 text-[#06D6A0]" />
+        <Card className="bg-background border-white/10 p-8 text-center">
+          <Loader2 className="w-6 h-6 animate-spin mx-auto mb-3 text-primary" />
           <p className="text-gray-300 text-sm">Loading trust records...</p>
         </Card>
       ) : null}
@@ -161,7 +161,7 @@ export default function TrustCenterClient() {
         <>
           <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
             {(["security", "privacy", "compliance", "transparency"] as TrustCenterCategory[]).map((label) => (
-              <Card key={label} className="bg-[#0f0f0f] border-white/10 p-4">
+              <Card key={label} className="bg-background border-white/10 p-4">
                 <p className="text-xs uppercase text-gray-500">{label}</p>
                 <p className="mt-1 text-xl font-semibold">{totalByCategory[label] ?? 0}</p>
               </Card>
@@ -170,14 +170,14 @@ export default function TrustCenterClient() {
 
           <div className="space-y-4">
             {entries.map((entry) => (
-              <Card key={entry.id} className="bg-[#0f0f0f] border-white/10 p-5">
+              <Card key={entry.id} className="bg-background border-white/10 p-5">
                 <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-3">
                   <div>
                     <h3 className="text-lg font-medium">{entry.title}</h3>
                     <p className="text-xs text-gray-500 mt-1">Updated {formatDate(entry.updatedAt)}</p>
                   </div>
                   <div className="flex gap-2">
-                    <Badge className="capitalize border bg-[#06D6A0]/15 border-[#06D6A0]/30 text-[#9CF6DA]">{entry.category}</Badge>
+                    <Badge className="capitalize border bg-primary/15 border-primary/30 text-primary/80">{entry.category}</Badge>
                     <Badge className={`capitalize border ${statusClass(entry.status)}`}>{entry.status}</Badge>
                   </div>
                 </div>
@@ -191,7 +191,7 @@ export default function TrustCenterClient() {
             ))}
 
             {entries.length === 0 ? (
-              <Card className="bg-[#0f0f0f] border-white/10 p-8 text-center">
+              <Card className="bg-background border-white/10 p-8 text-center">
                 <p className="text-gray-400">No trust records match your current filters.</p>
               </Card>
             ) : null}
@@ -201,7 +201,7 @@ export default function TrustCenterClient() {
 
       <div className="text-center text-sm text-gray-500">
         <div className="inline-flex items-center gap-2">
-          <ShieldCheck className="w-4 h-4 text-[#06D6A0]" />
+          <ShieldCheck className="w-4 h-4 text-primary" />
           <span>Persistent trust records API is active for /trust-center.</span>
         </div>
       </div>
diff --git a/src/app/trust/page.tsx b/src/app/trust/page.tsx
index 3134c246..93f62fe4 100644
--- a/src/app/trust/page.tsx
+++ b/src/app/trust/page.tsx
@@ -19,13 +19,13 @@ export const metadata: Metadata = {
 
 export default function TrustPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-background text-white">
       <div className="max-w-6xl mx-auto px-6 py-16">
         <div className="text-center mb-12">
           <div className="flex justify-center mb-4">
-            <Shield className="w-14 h-14 text-[#06D6A0]" />
+            <Shield className="w-14 h-14 text-primary" />
           </div>
-          <h1 className="text-4xl font-bold mb-3 text-[#06D6A0]">Trust Center</h1>
+          <h1 className="text-4xl font-bold mb-3 text-primary">Trust Center</h1>
           <p className="text-gray-400 max-w-3xl mx-auto">
             Security posture and compliance data are served from persistent trust center records through the /api/trust endpoint.
           </p>
diff --git a/src/app/trust/trust-page-client.tsx b/src/app/trust/trust-page-client.tsx
index 7613f9c6..ca07a201 100644
--- a/src/app/trust/trust-page-client.tsx
+++ b/src/app/trust/trust-page-client.tsx
@@ -92,8 +92,8 @@ export function TrustPageClient() {
 
   if (loading) {
     return (
-      <Card className="bg-[#0f0f0f] border-white/10 p-10 text-center">
-        <Loader2 className="w-7 h-7 mx-auto mb-4 animate-spin text-[#06D6A0]" />
+      <Card className="bg-background border-white/10 p-10 text-center">
+        <Loader2 className="w-7 h-7 mx-auto mb-4 animate-spin text-primary" />
         <p className="text-gray-300">Loading trust center data...</p>
       </Card>
     );
@@ -117,7 +117,7 @@ export function TrustPageClient() {
 
   return (
     <div className="space-y-10">
-      <Card className="bg-[#0f0f0f] border-white/10 p-8">
+      <Card className="bg-background border-white/10 p-8">
         <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
           <div>
             <h2 className="text-2xl font-semibold mb-2">Overall Security Posture</h2>
@@ -128,7 +128,7 @@ export function TrustPageClient() {
             <div className="relative mx-auto w-36 h-36">
               <div className="absolute inset-0 rounded-full border-8 border-white/10" />
               <div
-                className="absolute inset-0 rounded-full border-8 border-[#06D6A0]"
+                className="absolute inset-0 rounded-full border-8 border-primary"
                 style={{
                   clipPath: `inset(${100 - data.overallTrustScore}% 0 0 0)`,
                 }}
@@ -142,26 +142,26 @@ export function TrustPageClient() {
         </div>
 
         <div className="mt-6 grid gap-3 md:grid-cols-4">
-          <div className="rounded-lg border border-white/10 bg-[#141414] p-4">
+          <div className="rounded-lg border border-white/10 bg-background p-4">
             <p className="text-xs uppercase text-gray-500">Audit Status</p>
             <p className="mt-1 font-medium capitalize text-emerald-300">{data.auditResults.overallStatus}</p>
           </div>
-          <div className="rounded-lg border border-white/10 bg-[#141414] p-4">
+          <div className="rounded-lg border border-white/10 bg-background p-4">
             <p className="text-xs uppercase text-gray-500">Last Audit</p>
             <p className="mt-1 font-medium">{formatDate(data.auditResults.lastAudit)}</p>
           </div>
-          <div className="rounded-lg border border-white/10 bg-[#141414] p-4">
+          <div className="rounded-lg border border-white/10 bg-background p-4">
             <p className="text-xs uppercase text-gray-500">Next Audit</p>
             <p className="mt-1 font-medium">{formatDate(data.auditResults.nextAudit)}</p>
           </div>
-          <div className="rounded-lg border border-white/10 bg-[#141414] p-4">
+          <div className="rounded-lg border border-white/10 bg-background p-4">
             <p className="text-xs uppercase text-gray-500">Open Findings</p>
             <p className="mt-1 font-medium">{data.auditResults.findings.medium + data.auditResults.findings.low}</p>
           </div>
         </div>
       </Card>
 
-      <Card className="bg-[#0f0f0f] border-white/10 p-8">
+      <Card className="bg-background border-white/10 p-8">
         <h3 className="text-xl font-semibold mb-5">Security Category Breakdown</h3>
         <div className="space-y-4">
           {data.securityCategories.map((category) => (
@@ -171,18 +171,18 @@ export function TrustPageClient() {
                 <span className={scoreColor(category.score)}>{category.score}/100</span>
               </div>
               <div className="h-2 rounded-full bg-white/10">
-                <div className="h-2 rounded-full bg-[#06D6A0]" style={{ width: `${category.score}%` }} />
+                <div className="h-2 rounded-full bg-primary" style={{ width: `${category.score}%` }} />
               </div>
             </div>
           ))}
         </div>
       </Card>
 
-      <Card className="bg-[#0f0f0f] border-white/10 p-8">
+      <Card className="bg-background border-white/10 p-8">
         <h3 className="text-xl font-semibold mb-5">Certifications & Compliance</h3>
         <div className="grid md:grid-cols-2 gap-4">
           {data.certifications.map((certification) => (
-            <div key={certification.name} className="rounded-lg border border-white/10 bg-[#141414] p-4">
+            <div key={certification.name} className="rounded-lg border border-white/10 bg-background p-4">
               <div className="flex items-start justify-between gap-3">
                 <div>
                   <p className="font-medium">{certification.name}</p>
@@ -197,11 +197,11 @@ export function TrustPageClient() {
         </div>
       </Card>
 
-      <Card className="bg-[#0f0f0f] border-white/10 p-8">
+      <Card className="bg-background border-white/10 p-8">
         <h3 className="text-xl font-semibold mb-5">Recent Incident History</h3>
         <div className="space-y-4">
           {sortedIncidents.map((incident) => (
-            <div key={`${incident.date}-${incident.description}`} className="rounded-lg border border-white/10 bg-[#141414] p-4">
+            <div key={`${incident.date}-${incident.description}`} className="rounded-lg border border-white/10 bg-background p-4">
               <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2 mb-2">
                 <p className="text-sm text-gray-400">{formatDate(incident.date)}</p>
                 <div className="flex gap-2">
@@ -219,9 +219,9 @@ export function TrustPageClient() {
 
       <div className="text-center text-sm text-gray-500">
         <div className="inline-flex items-center gap-2">
-          <Shield className="w-4 h-4 text-[#06D6A0]" />
+          <Shield className="w-4 h-4 text-primary" />
           <span>Security data sourced from persistent trust center records.</span>
-          <CheckCircle2 className="w-4 h-4 text-[#06D6A0]" />
+          <CheckCircle2 className="w-4 h-4 text-primary" />
         </div>
       </div>
     </div>
diff --git a/src/app/updates/page.tsx b/src/app/updates/page.tsx
index bd164464..dbc4233c 100644
--- a/src/app/updates/page.tsx
+++ b/src/app/updates/page.tsx
@@ -261,7 +261,7 @@ function formatDate(dateStr: string): string {
 
 export default function UpdatesPage() {
   return (
-    <div className="min-h-screen bg-[#0a0a0a]">
+    <div className="min-h-screen bg-background">
       {/* Hero Section */}
       <section className="max-w-3xl mx-auto px-4 py-12">
         <div className="mb-12">
@@ -274,11 +274,11 @@ export default function UpdatesPage() {
         </div>
 
         {/* Subscribe CTA */}
-        <Card className="bg-gradient-to-r from-[#06D6A0]/10 to-purple/10 border-[#06D6A0]/20 mb-12">
+        <Card className="bg-gradient-to-r from-primary/10 to-purple/10 border-primary/20 mb-12">
           <CardContent className="p-6">
             <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
               <div className="flex-1">
-                <h3 className="text-lg font-bold mb-1 text-[#06D6A0]">
+                <h3 className="text-lg font-bold mb-1 text-primary">
                   Subscribe to Updates
                 </h3>
                 <p className="text-sm text-muted-foreground">
@@ -291,7 +291,7 @@ export default function UpdatesPage() {
                   placeholder="your@email.com"
                   className="bg-background/50 border-white/10 flex-1 sm:w-64"
                 />
-                <Button className="bg-[#06D6A0] text-[#0a0a0a] hover:bg-[#06D6A0]/90">
+                <Button className="bg-primary text-background hover:bg-primary/90">
                   Subscribe
                 </Button>
               </div>
@@ -304,20 +304,20 @@ export default function UpdatesPage() {
           {updates.map((update, index) => (
             <Card
               key={update.version}
-              className="bg-card/50 border-white/5 hover:border-[#06D6A0]/20 transition-all"
+              className="bg-card/50 border-white/5 hover:border-primary/20 transition-all"
             >
               <CardContent className="p-6">
                 {/* Version Header */}
                 <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-4 pb-4 border-b border-white/5">
                   <div>
                     <div className="flex items-center gap-3 mb-2">
-                      <h2 className="text-2xl font-bold text-[#06D6A0]">
+                      <h2 className="text-2xl font-bold text-primary">
                         {update.version}
                       </h2>
                       {index === 0 && (
                         <Badge
                           variant="outline"
-                          className="bg-[#06D6A0]/20 text-[#06D6A0] border-[#06D6A0]/30"
+                          className="bg-primary/20 text-primary border-primary/30"
                         >
                           Latest
                         </Badge>
@@ -356,7 +356,7 @@ export default function UpdatesPage() {
                               key={idx}
                               className="flex items-start gap-2 text-sm text-muted-foreground"
                             >
-                              <span className="text-[#06D6A0] mt-1.5">•</span>
+                              <span className="text-primary mt-1.5">•</span>
                               <span>{change.description}</span>
                             </li>
                           ))}
@@ -377,13 +377,13 @@ export default function UpdatesPage() {
           <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
             <Link
               href="/requests"
-              className="inline-flex items-center justify-center h-10 px-6 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold text-sm hover:brightness-110 transition-all"
+              className="inline-flex items-center justify-center h-10 px-6 rounded-lg bg-primary text-background font-semibold text-sm hover:brightness-110 transition-all"
             >
               Request a Feature
             </Link>
             <Link
               href="/contact"
-              className="inline-flex items-center justify-center h-10 px-6 rounded-lg border border-[#06D6A0] text-[#06D6A0] font-semibold text-sm hover:bg-[#06D6A0]/10 transition-all"
+              className="inline-flex items-center justify-center h-10 px-6 rounded-lg border border-primary text-primary font-semibold text-sm hover:bg-primary/10 transition-all"
             >
               Report an Issue
             </Link>
@@ -398,10 +398,10 @@ export default function UpdatesPage() {
         <h3 className="text-xl font-bold mb-4">Stay Connected</h3>
         <div className="grid gap-4 md:grid-cols-2">
           <Link href="/changelog">
-            <Card className="bg-card/50 border-white/5 hover:border-[#06D6A0]/20 transition-all group h-full">
+            <Card className="bg-card/50 border-white/5 hover:border-primary/20 transition-all group h-full">
               <CardContent className="p-6">
                 <div className="text-2xl mb-3">📝</div>
-                <h4 className="font-bold mb-2 group-hover:text-[#06D6A0] transition-colors">
+                <h4 className="font-bold mb-2 group-hover:text-primary transition-colors">
                   Changelog
                 </h4>
                 <p className="text-sm text-muted-foreground">
@@ -412,10 +412,10 @@ export default function UpdatesPage() {
           </Link>
 
           <Link href="/roadmap">
-            <Card className="bg-card/50 border-white/5 hover:border-[#06D6A0]/20 transition-all group h-full">
+            <Card className="bg-card/50 border-white/5 hover:border-primary/20 transition-all group h-full">
               <CardContent className="p-6">
                 <div className="text-2xl mb-3">🗺️</div>
-                <h4 className="font-bold mb-2 group-hover:text-[#06D6A0] transition-colors">
+                <h4 className="font-bold mb-2 group-hover:text-primary transition-colors">
                   Roadmap
                 </h4>
                 <p className="text-sm text-muted-foreground">
diff --git a/src/app/use-cases/use-cases-client.tsx b/src/app/use-cases/use-cases-client.tsx
index e629ac71..4487c05e 100644
--- a/src/app/use-cases/use-cases-client.tsx
+++ b/src/app/use-cases/use-cases-client.tsx
@@ -197,7 +197,7 @@ export default function UseCasesClient() {
           <select
             value={industry}
             onChange={(event) => setIndustry(event.target.value as Industry)}
-            className="mt-2 w-full rounded-lg border border-white/10 bg-[#0a0a0a] px-3 py-2"
+            className="mt-2 w-full rounded-lg border border-white/10 bg-background px-3 py-2"
           >
             {INDUSTRY_OPTIONS.map((option) => (
               <option key={option.value} value={option.value}>
@@ -213,7 +213,7 @@ export default function UseCasesClient() {
             value={search}
             onChange={(event) => setSearch(event.target.value)}
             placeholder="Search by title, description, skills, tags, or difficulty"
-            className="mt-2 w-full rounded-lg border border-white/10 bg-[#0a0a0a] px-3 py-2"
+            className="mt-2 w-full rounded-lg border border-white/10 bg-background px-3 py-2"
           />
         </div>
       </section>
@@ -221,15 +221,15 @@ export default function UseCasesClient() {
       <section className="grid gap-6 md:grid-cols-3">
         <div className="rounded-xl border border-white/10 bg-slate-900/25 p-5 text-center">
           <p className="text-sm text-slate-400">Visible use cases</p>
-          <p className="text-3xl font-bold text-[#06D6A0] mt-1">{useCases.length}</p>
+          <p className="text-3xl font-bold text-primary mt-1">{useCases.length}</p>
         </div>
         <div className="rounded-xl border border-white/10 bg-slate-900/25 p-5 text-center">
           <p className="text-sm text-slate-400">Industries represented</p>
-          <p className="text-3xl font-bold text-[#06D6A0] mt-1">{industriesRepresented}</p>
+          <p className="text-3xl font-bold text-primary mt-1">{industriesRepresented}</p>
         </div>
         <div className="rounded-xl border border-white/10 bg-slate-900/25 p-5 text-center">
           <p className="text-sm text-slate-400">Difficulties represented</p>
-          <p className="text-3xl font-bold text-[#06D6A0] mt-1">{difficultiesRepresented}</p>
+          <p className="text-3xl font-bold text-primary mt-1">{difficultiesRepresented}</p>
         </div>
       </section>
 
@@ -260,9 +260,9 @@ export default function UseCasesClient() {
                 className="rounded-xl border border-white/10 bg-slate-900/30 p-5 space-y-4"
               >
                 <div className="flex flex-wrap items-start justify-between gap-3">
-                  <h2 className="text-xl font-semibold text-[#F8FAFC]">{entry.title}</h2>
+                  <h2 className="text-xl font-semibold text-foreground">{entry.title}</h2>
                   <div className="flex gap-2">
-                    <span className="text-xs px-2 py-1 rounded-full border border-[#06D6A0]/30 bg-[#06D6A0]/10 text-[#06D6A0]">
+                    <span className="text-xs px-2 py-1 rounded-full border border-primary/30 bg-primary/10 text-primary">
                       {entry.industry}
                     </span>
                     <span className="text-xs px-2 py-1 rounded-full border border-white/20 bg-white/5 text-slate-200">
@@ -293,7 +293,7 @@ export default function UseCasesClient() {
                     {entry.tags.map((tag) => (
                       <span
                         key={`${entry.id}-${tag}`}
-                        className="text-xs px-2 py-1 rounded-md border border-[#06D6A0]/30 bg-[#06D6A0]/10 text-[#06D6A0]"
+                        className="text-xs px-2 py-1 rounded-md border border-primary/30 bg-primary/10 text-primary"
                       >
                         #{tag}
                       </span>
@@ -311,7 +311,7 @@ export default function UseCasesClient() {
       </section>
 
       <section className="rounded-2xl border border-white/10 bg-slate-900/30 p-6 md:p-8">
-        <h2 className="text-2xl font-bold text-[#F8FAFC] mb-2">Share Your Use Case</h2>
+        <h2 className="text-2xl font-bold text-foreground mb-2">Share Your Use Case</h2>
         <p className="text-slate-400 mb-6">
           Submit your case study with clear skills and tags so others can discover it.
         </p>
@@ -322,7 +322,7 @@ export default function UseCasesClient() {
             onChange={(event) => setTitle(event.target.value)}
             required
             placeholder="Title"
-            className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10"
+            className="w-full px-4 py-3 rounded-lg bg-background border border-white/10"
           />
 
           <textarea
@@ -331,14 +331,14 @@ export default function UseCasesClient() {
             required
             rows={4}
             placeholder="Description"
-            className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10 resize-none"
+            className="w-full px-4 py-3 rounded-lg bg-background border border-white/10 resize-none"
           />
 
           <div className="grid md:grid-cols-2 gap-4">
             <select
               value={submitIndustry}
               onChange={(event) => setSubmitIndustry(event.target.value as Exclude<Industry, "all">)}
-              className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10"
+              className="w-full px-4 py-3 rounded-lg bg-background border border-white/10"
             >
               {INDUSTRY_OPTIONS.filter((option) => option.value !== "all").map((option) => (
                 <option key={option.value} value={option.value}>
@@ -350,7 +350,7 @@ export default function UseCasesClient() {
             <select
               value={difficulty}
               onChange={(event) => setDifficulty(event.target.value as Difficulty)}
-              className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10"
+              className="w-full px-4 py-3 rounded-lg bg-background border border-white/10"
             >
               {DIFFICULTY_OPTIONS.map((option) => (
                 <option key={option.value} value={option.value}>
@@ -365,7 +365,7 @@ export default function UseCasesClient() {
             onChange={(event) => setSkillsInput(event.target.value)}
             required
             placeholder="Skills (comma separated): monitoring, incident-response, ci-cd"
-            className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10"
+            className="w-full px-4 py-3 rounded-lg bg-background border border-white/10"
           />
 
           <input
@@ -373,14 +373,14 @@ export default function UseCasesClient() {
             onChange={(event) => setTagsInput(event.target.value)}
             required
             placeholder="Tags (comma separated): reliability, automation"
-            className="w-full px-4 py-3 rounded-lg bg-[#0a0a0a] border border-white/10"
+            className="w-full px-4 py-3 rounded-lg bg-background border border-white/10"
           />
 
           <div className="flex items-center justify-between gap-4">
             <button
               type="submit"
               disabled={submitting}
-              className="px-6 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold disabled:opacity-70"
+              className="px-6 py-3 rounded-lg bg-primary text-background font-semibold disabled:opacity-70"
             >
               {submitting ? "Submitting..." : "Submit Use Case"}
             </button>
diff --git a/src/app/whats-new/page.tsx b/src/app/whats-new/page.tsx
index f96ac0bd..b58b3f09 100644
--- a/src/app/whats-new/page.tsx
+++ b/src/app/whats-new/page.tsx
@@ -119,7 +119,7 @@ export default function WhatsNewPage() {
           </p>
           <Link
             href="#newsletter"
-            className="inline-flex items-center justify-center h-10 px-6 rounded-lg bg-cyan text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all"
+            className="inline-flex items-center justify-center h-10 px-6 rounded-lg bg-cyan text-background font-semibold text-sm hover:brightness-110 transition-all"
           >
             Subscribe
           </Link>
diff --git a/src/app/workflows/page.tsx b/src/app/workflows/page.tsx
index 08a0a007..69c4a652 100644
--- a/src/app/workflows/page.tsx
+++ b/src/app/workflows/page.tsx
@@ -143,7 +143,7 @@ export default function WorkflowsPage() {
     <div className="min-h-screen">
       <section className="max-w-5xl mx-auto px-4 py-12 space-y-6">
         <div>
-          <h1 className="text-4xl font-bold tracking-tight text-[#F8FAFC]">Workflow Builder</h1>
+          <h1 className="text-4xl font-bold tracking-tight text-foreground">Workflow Builder</h1>
           <p className="text-muted-foreground mt-2">
             Create, update, and manage reusable workflows with API-backed persistence.
           </p>
diff --git a/src/components/AddCommentForm.tsx b/src/components/AddCommentForm.tsx
index 416336aa..593c9850 100644
--- a/src/components/AddCommentForm.tsx
+++ b/src/components/AddCommentForm.tsx
@@ -100,7 +100,7 @@ export function AddCommentForm({
   if (!isAuthenticated) {
     return (
       <div className={cn(
-        "rounded-xl border border-[#1A1F2E] bg-[#0F1420] p-6",
+        "rounded-xl border border-border bg-card p-6",
         className
       )}>
         <div className="flex flex-col items-center text-center">
@@ -114,7 +114,7 @@ export function AddCommentForm({
           <Button onClick={onAuthRequest} className="mb-4">
             Connect Agent Identity
           </Button>
-          <div className="w-full h-px bg-[#1A1F2E] my-4" />
+          <div className="w-full h-px bg-secondary my-4" />
           <p className="text-[13px] text-muted-foreground">
             Don&apos;t have an agent.json?{" "}
             <a href="/docs/agent-json" className="text-cyan hover:underline">
@@ -130,7 +130,7 @@ export function AddCommentForm({
   if (variant === "inline") {
     return (
       <div className={cn(
-        "rounded-lg bg-[#1A1F2E] p-3 mt-3",
+        "rounded-lg bg-secondary p-3 mt-3",
         className
       )}>
         <div className="flex items-center justify-between mb-2">
@@ -151,7 +151,7 @@ export function AddCommentForm({
             onChange={(e) => setContent(e.target.value)}
             placeholder="Your reply..."
             disabled={isSubmitting}
-            className="w-full min-h-[80px] bg-[#0A0E17] border border-[#1A1F2E] rounded-lg px-3 py-2 text-[15px] text-foreground placeholder:text-muted-foreground resize-y focus:outline-none focus:border-[#2A3040] focus:ring-2 focus:ring-cyan/10 disabled:opacity-50"
+            className="w-full min-h-[80px] bg-background border border-border rounded-lg px-3 py-2 text-[15px] text-foreground placeholder:text-muted-foreground resize-y focus:outline-none focus:border-input focus:ring-2 focus:ring-cyan/10 disabled:opacity-50"
           />
           {error && (
             <p className="text-sm text-aurora-pink mt-2">{error}</p>
@@ -181,7 +181,7 @@ export function AddCommentForm({
   // Standard form variant
   return (
     <div className={cn(
-      "rounded-xl border border-[#1A1F2E] bg-[#0F1420] p-4",
+      "rounded-xl border border-border bg-card p-4",
       className
     )}>
       {/* Identity header */}
@@ -203,7 +203,7 @@ export function AddCommentForm({
           onChange={(e) => setContent(e.target.value)}
           placeholder="Share your thoughts..."
           disabled={isSubmitting}
-          className="w-full min-h-[100px] max-h-[400px] bg-[#0A0E17] border border-[#1A1F2E] rounded-lg px-3 py-3 text-[15px] text-foreground placeholder:text-muted-foreground resize-y focus:outline-none focus:border-[#2A3040] focus:ring-2 focus:ring-cyan/10 disabled:opacity-50"
+          className="w-full min-h-[100px] max-h-[400px] bg-background border border-border rounded-lg px-3 py-3 text-[15px] text-foreground placeholder:text-muted-foreground resize-y focus:outline-none focus:border-input focus:ring-2 focus:ring-cyan/10 disabled:opacity-50"
         />
         
         {error && (
@@ -281,12 +281,12 @@ export function AgentAuthModal({ isOpen, onClose, onVerify }: AuthModalProps) {
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-[#0A0E17]/80"
+        className="absolute inset-0 bg-background/80"
         onClick={onClose}
       />
       
       {/* Modal */}
-      <div className="relative w-full max-w-[440px] mx-4 rounded-2xl border border-[#1A1F2E] bg-[#0F1420] p-6 shadow-[0_8px_32px_rgba(0,0,0,0.4)]">
+      <div className="relative w-full max-w-[440px] mx-4 rounded-2xl border border-border bg-card p-6 shadow-[0_8px_32px_rgba(0,0,0,0.4)]">
         <button
           onClick={onClose}
           className="absolute top-4 right-4 text-muted-foreground hover:text-white"
@@ -315,7 +315,7 @@ export function AgentAuthModal({ isOpen, onClose, onVerify }: AuthModalProps) {
               onChange={(e) => setHandle(e.target.value)}
               placeholder="kai@reflectt.ai"
               disabled={isVerifying}
-              className="w-full bg-[#0A0E17] border border-[#1A1F2E] rounded-lg pl-8 pr-3 py-2.5 text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[#2A3040] focus:ring-2 focus:ring-cyan/10 disabled:opacity-50"
+              className="w-full bg-background border border-border rounded-lg pl-8 pr-3 py-2.5 text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-input focus:ring-2 focus:ring-cyan/10 disabled:opacity-50"
             />
           </div>
           <p className="text-xs text-muted-foreground mt-2">
diff --git a/src/components/CommentThread.tsx b/src/components/CommentThread.tsx
index 9005d340..20d4f8fb 100644
--- a/src/components/CommentThread.tsx
+++ b/src/components/CommentThread.tsx
@@ -32,11 +32,11 @@ const COLLAPSED_THRESHOLD = 5;
 
 // Background colors per nesting level
 const depthBgColors = [
-  "bg-[#0F1420]",
-  "bg-[#0D1219]",
-  "bg-[#0B1015]",
-  "bg-[#0A0E12]",
-  "bg-[#0A0E12]",
+  "bg-card",
+  "bg-background",
+  "bg-background",
+  "bg-background",
+  "bg-background",
 ];
 
 export function CommentThread({
@@ -108,7 +108,7 @@ export function CommentThread({
   // Hidden/moderated state
   if (comment.status === "hidden") {
     return (
-      <div className={cn("rounded-xl border border-[#1A1F2E] p-4", bgColor, className)}>
+      <div className={cn("rounded-xl border border-border p-4", bgColor, className)}>
         <p className="text-sm text-muted-foreground">
           🚫 This comment has been hidden by moderators.
         </p>
@@ -122,7 +122,7 @@ export function CommentThread({
   // Deleted state
   if (comment.status === "removed") {
     return (
-      <div className={cn("rounded-xl border border-[#1A1F2E] p-4", bgColor, className)}>
+      <div className={cn("rounded-xl border border-border p-4", bgColor, className)}>
         <div className="flex items-center gap-2 text-muted-foreground text-sm mb-2">
           <span>[deleted]</span>
           <span>·</span>
@@ -133,7 +133,7 @@ export function CommentThread({
         </p>
         {/* Preserve thread structure - show replies */}
         {replies.length > 0 && (
-          <div className="mt-4 ml-4 md:ml-6 space-y-3 border-l border-[#1A1F2E] pl-4">
+          <div className="mt-4 ml-4 md:ml-6 space-y-3 border-l border-border pl-4">
             {replies.map(reply => (
               <CommentThread
                 key={reply.id}
@@ -158,7 +158,7 @@ export function CommentThread({
     <article
       id={`comment-${comment.id}`}
       className={cn(
-        "rounded-xl border border-[#1A1F2E] p-4 transition-all duration-500",
+        "rounded-xl border border-border p-4 transition-all duration-500",
         bgColor,
         isHighlighted && "ring-2 ring-cyan/30 bg-cyan/5",
         depth > 0 && "ml-4 md:ml-6",
diff --git a/src/components/CommentsEmptyState.tsx b/src/components/CommentsEmptyState.tsx
index 1b3c86a7..41968b91 100644
--- a/src/components/CommentsEmptyState.tsx
+++ b/src/components/CommentsEmptyState.tsx
@@ -47,7 +47,7 @@ export function CommentsEmptyState({
   return (
     <div
       className={cn(
-        "flex flex-col items-center justify-center text-center py-12 px-6 min-h-[200px] rounded-xl border border-dashed border-[#1A1F2E]",
+        "flex flex-col items-center justify-center text-center py-12 px-6 min-h-[200px] rounded-xl border border-dashed border-border",
         className
       )}
     >
@@ -77,7 +77,7 @@ export function CommentsEmptyState({
       ) : (
         <button
           onClick={onConnect}
-          className="inline-flex items-center justify-center px-6 py-2.5 rounded-lg bg-cyan text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all"
+          className="inline-flex items-center justify-center px-6 py-2.5 rounded-lg bg-cyan text-background font-semibold text-sm hover:brightness-110 transition-all"
         >
           Connect Agent Identity
         </button>
diff --git a/src/components/TestimonialCarousel.tsx b/src/components/TestimonialCarousel.tsx
index 3b8653d7..9cbb7b97 100644
--- a/src/components/TestimonialCarousel.tsx
+++ b/src/components/TestimonialCarousel.tsx
@@ -65,7 +65,7 @@ export function TestimonialCarousel() {
             <p className="text-xs font-mono text-muted-foreground uppercase tracking-wider">
               Social Proof
             </p>
-            <h2 className="text-xl md:text-2xl font-bold text-[#F8FAFC]">
+            <h2 className="text-xl md:text-2xl font-bold text-foreground">
               What builders say
             </h2>
           </div>
@@ -102,7 +102,7 @@ export function TestimonialCarousel() {
                     {getInitials(t.name)}
                   </div>
                   <div>
-                    <div className="font-semibold text-[#F8FAFC]">{t.name}</div>
+                    <div className="font-semibold text-foreground">{t.name}</div>
                     <div className="text-sm text-muted-foreground">{t.role}</div>
                   </div>
                 </div>
diff --git a/src/components/UpgradeCTA.tsx b/src/components/UpgradeCTA.tsx
index 963ad7d0..c939040e 100644
--- a/src/components/UpgradeCTA.tsx
+++ b/src/components/UpgradeCTA.tsx
@@ -78,12 +78,12 @@ export function UpgradeCTA({ variant = "inline", message, ctaId }: UpgradeCTAPro
   if (!isOpen) return null;
 
   const content = (
-    <div className="relative overflow-hidden rounded-xl border border-[#06D6A0]/20 bg-[#0a0a0a]">
-      <div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-[#06D6A0]/10 via-transparent to-[#06D6A0]/10" />
+    <div className="relative overflow-hidden rounded-xl border border-primary/20 bg-background">
+      <div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-primary/10 via-transparent to-primary/10" />
 
       <div className="relative flex items-start gap-3 p-4">
-        <div className="mt-0.5 flex h-8 w-8 items-center justify-center rounded-lg bg-[#06D6A0]/10 border border-[#06D6A0]/15">
-          <Sparkles className="h-4 w-4 text-[#06D6A0]" aria-hidden="true" />
+        <div className="mt-0.5 flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 border border-primary/15">
+          <Sparkles className="h-4 w-4 text-primary" aria-hidden="true" />
         </div>
 
         <div className="min-w-0 flex-1">
@@ -97,7 +97,7 @@ export function UpgradeCTA({ variant = "inline", message, ctaId }: UpgradeCTAPro
           <div className="mt-3 flex flex-wrap items-center gap-3">
             <Link
               href="/pricing"
-              className="inline-flex h-9 items-center justify-center rounded-md bg-[#06D6A0] px-4 text-sm font-semibold text-[#0a0a0a] hover:brightness-110 transition-all"
+              className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-semibold text-background hover:brightness-110 transition-all"
             >
               Upgrade
             </Link>
diff --git a/src/components/agent-bootstrap-panel.tsx b/src/components/agent-bootstrap-panel.tsx
index 9031356b..7066f6a9 100644
--- a/src/components/agent-bootstrap-panel.tsx
+++ b/src/components/agent-bootstrap-panel.tsx
@@ -38,7 +38,7 @@ export function AgentBootstrapPanel({ baseUrl }: Props) {
     <Card className="border-cyan/20 bg-gradient-to-br from-cyan/5 via-card/80 to-purple/5">
       <CardHeader className="pb-4">
         <div className="flex flex-wrap items-center gap-2">
-          <CardTitle className="text-sm text-[#F8FAFC]">Add this to your agent</CardTitle>
+          <CardTitle className="text-sm text-foreground">Add this to your agent</CardTitle>
           <Badge variant="outline" className="text-xs bg-white/5 text-white/70 border-white/10">
             bootstrap surface
           </Badge>
diff --git a/src/components/artifacts/CreateArtifactForm.tsx b/src/components/artifacts/CreateArtifactForm.tsx
index 1e4ef89c..05fdc53b 100644
--- a/src/components/artifacts/CreateArtifactForm.tsx
+++ b/src/components/artifacts/CreateArtifactForm.tsx
@@ -104,7 +104,7 @@ export function CreateArtifactForm() {
         {error && <p className="text-sm text-red-400">{error}</p>}
 
         <div className="flex items-center gap-3">
-          <Button type="submit" disabled={loading} className="bg-cyan text-[#0A0E17] hover:brightness-110">
+          <Button type="submit" disabled={loading} className="bg-cyan text-background hover:brightness-110">
             {loading ? "Creating…" : "Publish"}
           </Button>
           <p className="text-xs text-muted-foreground font-mono">
diff --git a/src/components/back-to-top.tsx b/src/components/back-to-top.tsx
index a74c0764..ccc1643f 100644
--- a/src/components/back-to-top.tsx
+++ b/src/components/back-to-top.tsx
@@ -32,7 +32,7 @@ export function BackToTop() {
   return (
     <button
       onClick={scrollToTop}
-      className={`fixed bottom-8 right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-[#06D6A0] text-white shadow-lg transition-all duration-300 hover:scale-110 ${
+      className={`fixed bottom-8 right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-primary text-white shadow-lg transition-all duration-300 hover:scale-110 ${
         isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"
       }`}
       aria-label="Back to top"
diff --git a/src/components/blog/blog-grid.tsx b/src/components/blog/blog-grid.tsx
index 55a1a78d..1d243133 100644
--- a/src/components/blog/blog-grid.tsx
+++ b/src/components/blog/blog-grid.tsx
@@ -63,7 +63,7 @@ export function BlogGrid({ posts, tags }: BlogGridProps) {
             onClick={() => setSelectedTag(null)}
             className={
               selectedTag === null
-                ? "bg-cyan text-[#0A0E17]"
+                ? "bg-cyan text-background"
                 : "border-white/10 text-muted-foreground hover:text-foreground"
             }
           >
@@ -77,7 +77,7 @@ export function BlogGrid({ posts, tags }: BlogGridProps) {
               onClick={() => setSelectedTag(tag)}
               className={
                 selectedTag === tag
-                  ? "bg-cyan text-[#0A0E17]"
+                  ? "bg-cyan text-background"
                   : "border-white/10 text-muted-foreground hover:text-foreground"
               }
             >
diff --git a/src/components/blog/blog-list-client.tsx b/src/components/blog/blog-list-client.tsx
index ec00e5c2..81cdfaef 100644
--- a/src/components/blog/blog-list-client.tsx
+++ b/src/components/blog/blog-list-client.tsx
@@ -121,7 +121,7 @@ export function BlogListClient() {
             onClick={() => setSelectedTag("all")}
             className={
               selectedTag === "all"
-                ? "bg-cyan text-[#0A0E17]"
+                ? "bg-cyan text-background"
                 : "border-white/10 text-muted-foreground hover:text-foreground"
             }
           >
@@ -136,7 +136,7 @@ export function BlogListClient() {
               onClick={() => setSelectedTag(tag)}
               className={
                 selectedTag === tag
-                  ? "bg-cyan text-[#0A0E17]"
+                  ? "bg-cyan text-background"
                   : "border-white/10 text-muted-foreground hover:text-foreground"
               }
             >
diff --git a/src/components/color-swatch.tsx b/src/components/color-swatch.tsx
index 3a49a965..f293eab2 100644
--- a/src/components/color-swatch.tsx
+++ b/src/components/color-swatch.tsx
@@ -31,7 +31,7 @@ export function ColorSwatch({ name, hex, description, usage }: ColorSwatchProps)
         <div className="flex items-start justify-between mb-2">
           <div>
             <h3 className="font-semibold text-foreground">{name}</h3>
-            <code className="text-sm font-mono text-[#06D6A0]">{hex}</code>
+            <code className="text-sm font-mono text-primary">{hex}</code>
           </div>
         </div>
         <p className="text-sm text-muted-foreground mb-1">{description}</p>
diff --git a/src/components/compare/ComparePageClient.tsx b/src/components/compare/ComparePageClient.tsx
index da96ef70..3b3e8ef7 100644
--- a/src/components/compare/ComparePageClient.tsx
+++ b/src/components/compare/ComparePageClient.tsx
@@ -160,7 +160,7 @@ export default function ComparePageClient({
           </button>
           <button
             type="button"
-            className="h-9 px-3 rounded-md text-xs bg-cyan text-[#0A0E17] font-semibold hover:brightness-110 transition-all"
+            className="h-9 px-3 rounded-md text-xs bg-cyan text-background font-semibold hover:brightness-110 transition-all"
             onClick={() => {
               copyLink().catch(() => null);
             }}
diff --git a/src/components/compare/CompareToggleButton.tsx b/src/components/compare/CompareToggleButton.tsx
index ff9a9136..df7abb48 100644
--- a/src/components/compare/CompareToggleButton.tsx
+++ b/src/components/compare/CompareToggleButton.tsx
@@ -19,7 +19,7 @@ export function CompareToggleButton({
         className ||
         `inline-flex items-center justify-center h-8 px-3 rounded-md text-xs font-semibold border transition-colors ${
           selected
-            ? "bg-cyan text-[#0A0E17] border-cyan"
+            ? "bg-cyan text-background border-cyan"
             : "bg-transparent text-muted-foreground border-white/10 hover:border-cyan/30 hover:text-foreground"
         }`
       }
diff --git a/src/components/compare/CompareTray.tsx b/src/components/compare/CompareTray.tsx
index 5fa3a098..a70e2706 100644
--- a/src/components/compare/CompareTray.tsx
+++ b/src/components/compare/CompareTray.tsx
@@ -76,7 +76,7 @@ export function CompareTray() {
                 aria-disabled={!canCompare}
                 className={`inline-flex items-center justify-center h-9 px-4 rounded-md text-xs font-semibold transition-all ${
                   canCompare
-                    ? "bg-cyan text-[#0A0E17] hover:brightness-110"
+                    ? "bg-cyan text-background hover:brightness-110"
                     : "bg-white/5 text-muted-foreground cursor-not-allowed"
                 }`}
                 onClick={(e) => {
diff --git a/src/components/compare/SkillComparePageClient.tsx b/src/components/compare/SkillComparePageClient.tsx
index 249977be..2f6dcfae 100644
--- a/src/components/compare/SkillComparePageClient.tsx
+++ b/src/components/compare/SkillComparePageClient.tsx
@@ -199,7 +199,7 @@ export default function SkillComparePageClient({
               </button>
               <button
                 type="button"
-                className="h-9 px-3 rounded-md text-xs bg-cyan text-[#0A0E17] font-semibold hover:brightness-110 transition-all"
+                className="h-9 px-3 rounded-md text-xs bg-cyan text-background font-semibold hover:brightness-110 transition-all"
                 onClick={() => {
                   copyLink().catch(() => null);
                 }}
diff --git a/src/components/compatibility-matrix.tsx b/src/components/compatibility-matrix.tsx
index b5f316ae..62df30eb 100644
--- a/src/components/compatibility-matrix.tsx
+++ b/src/components/compatibility-matrix.tsx
@@ -26,7 +26,7 @@ function SlugBadgeList({
 }) {
   return (
     <div>
-      <h3 className="text-sm font-semibold text-[#F8FAFC] mb-2">{title}</h3>
+      <h3 className="text-sm font-semibold text-foreground mb-2">{title}</h3>
       {slugs.length === 0 ? (
         <p className="text-sm text-muted-foreground">None reported.</p>
       ) : (
@@ -53,7 +53,7 @@ export function CompatibilityMatrix({ skillSlug }: { skillSlug: string }) {
 
   return (
     <section>
-      <h2 className="text-lg font-semibold text-[#F8FAFC] mb-4">
+      <h2 className="text-lg font-semibold text-foreground mb-4">
         🧩 Compatibility
       </h2>
 
diff --git a/src/components/forum/ForumThreadList.tsx b/src/components/forum/ForumThreadList.tsx
index 16f0d88f..4d2b7fc4 100644
--- a/src/components/forum/ForumThreadList.tsx
+++ b/src/components/forum/ForumThreadList.tsx
@@ -36,7 +36,7 @@ export function ForumThreadList({ threads }: ForumThreadListProps) {
             onClick={() => setActiveCategory(cat.value)}
             className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
               activeCategory === cat.value
-                ? 'bg-[#06D6A0]/10 text-[#06D6A0] border border-[#06D6A0]/30'
+                ? 'bg-primary/10 text-primary border border-primary/30'
                 : 'bg-zinc-900 text-gray-300 hover:bg-zinc-800 hover:text-white border border-zinc-800'
             }`}
           >
@@ -56,13 +56,13 @@ export function ForumThreadList({ threads }: ForumThreadListProps) {
             <Link
               key={thread.id}
               href={`/forum/${thread.id}`}
-              className="block bg-zinc-900 rounded-lg p-4 hover:bg-zinc-800 transition-colors border border-zinc-800 hover:border-[#06D6A0]/30"
+              className="block bg-zinc-900 rounded-lg p-4 hover:bg-zinc-800 transition-colors border border-zinc-800 hover:border-primary/30"
             >
               <div className="flex items-start justify-between gap-4">
                 <div className="flex-1 min-w-0">
                   {/* Title and Tags */}
                   <div className="mb-2">
-                    <h3 className="text-lg font-semibold text-white mb-2 hover:text-[#06D6A0] transition-colors">
+                    <h3 className="text-lg font-semibold text-white mb-2 hover:text-primary transition-colors">
                       {thread.title}
                     </h3>
                     <div className="flex flex-wrap gap-2">
diff --git a/src/components/get-started/ActivationChecklist.tsx b/src/components/get-started/ActivationChecklist.tsx
index 3f181b06..c9a56ada 100644
--- a/src/components/get-started/ActivationChecklist.tsx
+++ b/src/components/get-started/ActivationChecklist.tsx
@@ -342,7 +342,7 @@ export function ActivationChecklist() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <Link
                 href="/"
-                className="inline-flex items-center justify-center h-10 px-5 rounded-lg bg-cyan text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all"
+                className="inline-flex items-center justify-center h-10 px-5 rounded-lg bg-cyan text-background font-semibold text-sm hover:brightness-110 transition-all"
               >
                 Browse skills
               </Link>
diff --git a/src/components/global-nav.tsx b/src/components/global-nav.tsx
index a0374401..9db526f7 100644
--- a/src/components/global-nav.tsx
+++ b/src/components/global-nav.tsx
@@ -134,7 +134,7 @@ function NavDropdown({
         onClick={() => setIsOpen(!isOpen)}
         className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors flex items-center gap-1 ${
           hasActiveItem || isOpen
-            ? "bg-[#06D6A0]/10 text-[#06D6A0]"
+            ? "bg-primary/10 text-primary"
             : "text-slate-300 hover:text-white hover:bg-white/5"
         }`}
         aria-expanded={isOpen}
@@ -153,7 +153,7 @@ function NavDropdown({
       </button>
 
       {isOpen && (
-        <div className="absolute left-0 top-full mt-1 w-56 bg-[#0a0a0a]/95 backdrop-blur-md border border-white/10 rounded-lg shadow-2xl z-50 py-2">
+        <div className="absolute left-0 top-full mt-1 w-56 bg-background/95 backdrop-blur-md border border-white/10 rounded-lg shadow-2xl z-50 py-2">
           {group.items.map((item) => (
             <Link
               key={item.href}
@@ -161,7 +161,7 @@ function NavDropdown({
               onClick={() => setIsOpen(false)}
               className={`block px-4 py-2 text-sm transition-colors ${
                 isActive(item.href)
-                  ? "bg-[#06D6A0]/10 text-[#06D6A0]"
+                  ? "bg-primary/10 text-primary"
                   : "text-slate-300 hover:text-white hover:bg-white/5"
               }`}
             >
@@ -192,7 +192,7 @@ function MobileNavSection({
         onClick={() => setIsExpanded(!isExpanded)}
         className={`w-full flex items-center justify-between px-4 py-3 text-sm font-semibold transition-colors ${
           hasActiveItem
-            ? "text-[#06D6A0]"
+            ? "text-primary"
             : "text-slate-200 hover:text-white"
         }`}
         aria-expanded={isExpanded}
@@ -217,7 +217,7 @@ function MobileNavSection({
               href={item.href}
               className={`block px-6 py-2 text-sm transition-colors ${
                 isActive(item.href)
-                  ? "text-[#06D6A0] bg-[#06D6A0]/10"
+                  ? "text-primary bg-primary/10"
                   : "text-slate-300 hover:text-white hover:bg-white/5"
               }`}
             >
@@ -264,7 +264,7 @@ export function GlobalNav() {
   return (
     <>
       {/* Global Navigation Bar */}
-      <nav className="sticky top-0 z-50 bg-[#0a0a0a]/80 backdrop-blur-md border-b border-white/5" role="navigation" aria-label="Global navigation">
+      <nav className="sticky top-0 z-50 bg-background/80 backdrop-blur-md border-b border-white/5" role="navigation" aria-label="Global navigation">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             {/* Logo */}
@@ -274,8 +274,8 @@ export function GlobalNav() {
               aria-label="forAgents.dev home"
             >
               <span className="text-xl font-bold">
-                <span className="text-[#F8FAFC]">forAgents</span>
-                <span className="text-[#06D6A0]">.dev</span>
+                <span className="text-foreground">forAgents</span>
+                <span className="text-primary">.dev</span>
               </span>
             </Link>
 
@@ -293,7 +293,7 @@ export function GlobalNav() {
                   href={link.href}
                   className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
                     isActive(link.href)
-                      ? "bg-[#06D6A0]/10 text-[#06D6A0]"
+                      ? "bg-primary/10 text-primary"
                       : "text-slate-300 hover:text-white hover:bg-white/5"
                   }`}
                 >
@@ -304,7 +304,7 @@ export function GlobalNav() {
               {/* Sign In Button */}
               <Link
                 href="/auth/signin"
-                className="ml-2 px-4 py-2 text-sm font-semibold bg-[#06D6A0] text-[#0a0a0a] rounded-lg hover:brightness-110 transition-all"
+                className="ml-2 px-4 py-2 text-sm font-semibold bg-primary text-background rounded-lg hover:brightness-110 transition-all"
               >
                 Sign In
               </Link>
@@ -349,7 +349,7 @@ export function GlobalNav() {
           
           {/* Slide-out Menu */}
           <div 
-            className="md:hidden fixed top-16 right-0 bottom-0 w-80 bg-[#0a0a0a]/95 backdrop-blur-md border-l border-white/10 z-50 transform transition-transform duration-300 ease-in-out overflow-y-auto"
+            className="md:hidden fixed top-16 right-0 bottom-0 w-80 bg-background/95 backdrop-blur-md border-l border-white/10 z-50 transform transition-transform duration-300 ease-in-out overflow-y-auto"
             role="navigation"
             aria-label="Mobile navigation"
           >
@@ -363,7 +363,7 @@ export function GlobalNav() {
                     onClick={() => setMobileOpen(false)}
                     className={`block px-4 py-3 text-sm font-medium rounded-lg mb-2 transition-colors ${
                       isActive(link.href)
-                        ? "bg-[#06D6A0]/10 text-[#06D6A0]"
+                        ? "bg-primary/10 text-primary"
                         : "text-slate-300 hover:text-white hover:bg-white/5"
                     }`}
                   >
@@ -384,7 +384,7 @@ export function GlobalNav() {
                 <Link
                   href="/auth/signin"
                   onClick={() => setMobileOpen(false)}
-                  className="block w-full px-4 py-3 text-sm font-semibold text-center bg-[#06D6A0] text-[#0a0a0a] rounded-lg hover:brightness-110 transition-all"
+                  className="block w-full px-4 py-3 text-sm font-semibold text-center bg-primary text-background rounded-lg hover:brightness-110 transition-all"
                 >
                   Sign In
                 </Link>
diff --git a/src/components/home-skill-discovery-search.tsx b/src/components/home-skill-discovery-search.tsx
index 86d2c353..0ded9cb7 100644
--- a/src/components/home-skill-discovery-search.tsx
+++ b/src/components/home-skill-discovery-search.tsx
@@ -202,7 +202,7 @@ export function HomeSkillDiscoverySearch() {
       </div>
 
       {showDropdown && (
-        <div className="absolute z-50 mt-2 w-full rounded-xl border border-white/10 bg-[#0A0E17] shadow-xl p-3 space-y-3">
+        <div className="absolute z-50 mt-2 w-full rounded-xl border border-white/10 bg-background shadow-xl p-3 space-y-3">
           <div>
             <p className="text-[11px] uppercase tracking-wider text-cyan/80 mb-2">Skills</p>
             {skills.length === 0 ? (
diff --git a/src/components/news-feed.tsx b/src/components/news-feed.tsx
index 5acf468d..f0683079 100644
--- a/src/components/news-feed.tsx
+++ b/src/components/news-feed.tsx
@@ -29,30 +29,30 @@ const HIGH_SIGNAL_SOURCES = new Set([
 ]);
 
 const categoryColors: Record<string, { bg: string; text: string }> = {
-  tools:     { bg: "bg-[#06D6A0]/10", text: "text-[#06D6A0]" },
-  skills:    { bg: "bg-[#F59E0B]/10", text: "text-[#F59E0B]" },
-  models:    { bg: "bg-[#8B5CF6]/10", text: "text-[#8B5CF6]" },
-  community: { bg: "bg-[#3B82F6]/10", text: "text-[#3B82F6]" },
-  breaking:  { bg: "bg-[#EC4899]/10", text: "text-[#EC4899]" },
+  tools:     { bg: "bg-primary/10", text: "text-primary" },
+  skills:    { bg: "bg-solar/10", text: "text-solar" },
+  models:    { bg: "bg-purple/10", text: "text-purple" },
+  community: { bg: "bg-electric-blue/10", text: "text-electric-blue" },
+  breaking:  { bg: "bg-aurora-pink/10", text: "text-aurora-pink" },
 };
 
 const tagColors: Record<string, string> = {
-  breaking: "bg-[#EC4899]/10 text-[#EC4899] border-[#EC4899]/20",
-  security: "bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20",
-  openclaw: "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20",
-  community: "bg-[#3B82F6]/10 text-[#3B82F6] border-[#3B82F6]/20",
-  tools: "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20",
-  skills: "bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20",
-  enterprise: "bg-[#3B82F6]/10 text-[#3B82F6] border-[#3B82F6]/20",
-  models: "bg-[#8B5CF6]/10 text-[#8B5CF6] border-[#8B5CF6]/20",
-  standards: "bg-[#3B82F6]/10 text-[#3B82F6] border-[#3B82F6]/20",
-  trends: "bg-[#8B5CF6]/10 text-[#8B5CF6] border-[#8B5CF6]/20",
-  milestone: "bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20",
-  funding: "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20",
-  partnerships: "bg-[#3B82F6]/10 text-[#3B82F6] border-[#3B82F6]/20",
-  analysis: "bg-[#6B7280]/10 text-[#6B7280] border-[#6B7280]/20",
-  moltbook: "bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20",
-  mcp: "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20",
+  breaking: "bg-aurora-pink/10 text-aurora-pink border-aurora-pink/20",
+  security: "bg-solar/10 text-solar border-solar/20",
+  openclaw: "bg-primary/10 text-primary border-primary/20",
+  community: "bg-electric-blue/10 text-electric-blue border-electric-blue/20",
+  tools: "bg-primary/10 text-primary border-primary/20",
+  skills: "bg-solar/10 text-solar border-solar/20",
+  enterprise: "bg-electric-blue/10 text-electric-blue border-electric-blue/20",
+  models: "bg-purple/10 text-purple border-purple/20",
+  standards: "bg-electric-blue/10 text-electric-blue border-electric-blue/20",
+  trends: "bg-purple/10 text-purple border-purple/20",
+  milestone: "bg-solar/10 text-solar border-solar/20",
+  funding: "bg-primary/10 text-primary border-primary/20",
+  partnerships: "bg-electric-blue/10 text-electric-blue border-electric-blue/20",
+  analysis: "bg-muted-foreground/10 text-muted-foreground border-muted/20",
+  moltbook: "bg-solar/10 text-solar border-solar/20",
+  mcp: "bg-primary/10 text-primary border-primary/20",
 };
 
 function timeAgo(dateStr: string): string {
@@ -207,10 +207,10 @@ export function NewsFeed({ items }: { items: NewsItem[] }) {
               href={item.source_url}
               target="_blank"
               rel="noopener noreferrer"
-              className={`block rounded-xl border bg-card/50 p-5 transition-all duration-200 hover:border-[#2A3040] hover:shadow-[0_0_20px_rgba(6,214,160,0.05)] group ${
+              className={`block rounded-xl border bg-card/50 p-5 transition-all duration-200 hover:border-input hover:shadow-[0_0_20px_rgba(6,214,160,0.05)] group ${
                 isBreaking
-                  ? "border-l-[3px] border-l-aurora-pink border-[#1A1F2E]"
-                  : "border-[#1A1F2E]"
+                  ? "border-l-[3px] border-l-aurora-pink border-border"
+                  : "border-border"
               }`}
             >
               {/* Meta row */}
@@ -224,7 +224,7 @@ export function NewsFeed({ items }: { items: NewsItem[] }) {
                   <span className="text-muted-foreground text-[13px]">·</span>
                   <span className="text-muted-foreground text-[13px]">
                     {itemIsColony && (
-                      <span className="inline-flex items-center gap-1 text-[#F59E0B]">
+                      <span className="inline-flex items-center gap-1 text-solar">
                         🏠{" "}
                       </span>
                     )}
@@ -233,12 +233,12 @@ export function NewsFeed({ items }: { items: NewsItem[] }) {
 
                   {/* Badges */}
                   {itemIsNew && (
-                    <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-[#06D6A0]/15 text-[#06D6A0] border border-[#06D6A0]/25">
+                    <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-primary/15 text-primary border border-primary/25">
                       NEW
                     </span>
                   )}
                   {itemIsHot && (
-                    <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-[#EC4899]/15 text-[#EC4899] border border-[#EC4899]/25">
+                    <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-aurora-pink/15 text-aurora-pink border border-aurora-pink/25">
                       🔥 HOT
                     </span>
                   )}
@@ -249,7 +249,7 @@ export function NewsFeed({ items }: { items: NewsItem[] }) {
               </div>
 
               {/* Title */}
-              <h3 className="text-lg font-semibold text-[#F8FAFC] leading-tight group-hover:text-cyan transition-colors line-clamp-2 mb-2">
+              <h3 className="text-lg font-semibold text-foreground leading-tight group-hover:text-cyan transition-colors line-clamp-2 mb-2">
                 {item.title}
               </h3>
 
@@ -306,8 +306,8 @@ function FilterButton({
       onClick={onClick}
       className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
         active
-          ? "bg-white/10 text-[#F8FAFC]"
-          : "text-muted-foreground hover:text-[#F8FAFC] hover:bg-white/5"
+          ? "bg-white/10 text-foreground"
+          : "text-muted-foreground hover:text-foreground hover:bg-white/5"
       }`}
     >
       {children}
@@ -330,7 +330,7 @@ function SortButton({
       className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
         active
           ? "bg-cyan/15 text-cyan"
-          : "text-muted-foreground hover:text-[#F8FAFC] hover:bg-white/5"
+          : "text-muted-foreground hover:text-foreground hover:bg-white/5"
       }`}
     >
       {children}
diff --git a/src/components/newsletter-signup.tsx b/src/components/newsletter-signup.tsx
index 5f5809eb..09a7f356 100644
--- a/src/components/newsletter-signup.tsx
+++ b/src/components/newsletter-signup.tsx
@@ -57,7 +57,7 @@ export function NewsletterSignup() {
             />
             <Button 
               type="submit" 
-              className="bg-cyan text-[#0A0E17] hover:brightness-110 font-semibold"
+              className="bg-cyan text-background hover:brightness-110 font-semibold"
               aria-label="Subscribe to newsletter"
             >
               Subscribe
diff --git a/src/components/next-best-action-panel.tsx b/src/components/next-best-action-panel.tsx
index 4ae63630..f0de5f27 100644
--- a/src/components/next-best-action-panel.tsx
+++ b/src/components/next-best-action-panel.tsx
@@ -117,7 +117,7 @@ export function NextBestActionPanel({
   return (
     <Card className="border-white/10 bg-white/5">
       <CardHeader className="pb-4">
-        <CardTitle className="text-sm text-[#F8FAFC]">Next best action</CardTitle>
+        <CardTitle className="text-sm text-foreground">Next best action</CardTitle>
         <CardDescription>
           Do the most useful thing in one click.
         </CardDescription>
diff --git a/src/components/recent-submissions.tsx b/src/components/recent-submissions.tsx
index 9a6b50a2..164d025b 100644
--- a/src/components/recent-submissions.tsx
+++ b/src/components/recent-submissions.tsx
@@ -6,16 +6,16 @@ type Props = {
 };
 
 const typeLabels: Record<string, { label: string; color: string }> = {
-  skill: { label: "Skill", color: "bg-[#F59E0B]/15 text-[#F59E0B] border-[#F59E0B]/25" },
-  mcp: { label: "MCP", color: "bg-[#06D6A0]/15 text-[#06D6A0] border-[#06D6A0]/25" },
-  agent: { label: "Agent", color: "bg-[#8B5CF6]/15 text-[#8B5CF6] border-[#8B5CF6]/25" },
-  "llms-txt": { label: "llms-txt", color: "bg-[#3B82F6]/15 text-[#3B82F6] border-[#3B82F6]/25" },
+  skill: { label: "Skill", color: "bg-solar/15 text-solar border-solar/25" },
+  mcp: { label: "MCP", color: "bg-primary/15 text-primary border-primary/25" },
+  agent: { label: "Agent", color: "bg-purple/15 text-purple border-purple/25" },
+  "llms-txt": { label: "llms-txt", color: "bg-electric-blue/15 text-electric-blue border-electric-blue/25" },
 };
 
 const statusBadges: Record<string, { label: string; color: string }> = {
-  pending: { label: "PENDING REVIEW", color: "bg-[#F59E0B]/15 text-[#F59E0B] border-[#F59E0B]/25" },
-  approved: { label: "APPROVED", color: "bg-[#06D6A0]/15 text-[#06D6A0] border-[#06D6A0]/25" },
-  rejected: { label: "NOT APPROVED", color: "bg-[#6B7280]/15 text-[#6B7280] border-[#6B7280]/25" },
+  pending: { label: "PENDING REVIEW", color: "bg-solar/15 text-solar border-solar/25" },
+  approved: { label: "APPROVED", color: "bg-primary/15 text-primary border-primary/25" },
+  rejected: { label: "NOT APPROVED", color: "bg-muted-foreground/15 text-muted-foreground border-muted/25" },
 };
 
 function timeAgo(dateStr: string): string {
@@ -61,7 +61,7 @@ export function RecentSubmissions({ submissions }: Props) {
         </p>
         <Link
           href="/submit"
-          className="inline-flex items-center justify-center h-10 px-5 rounded-lg bg-cyan text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all"
+          className="inline-flex items-center justify-center h-10 px-5 rounded-lg bg-cyan text-background font-semibold text-sm hover:brightness-110 transition-all"
         >
           Submit a Tool →
         </Link>
@@ -88,7 +88,7 @@ export function RecentSubmissions({ submissions }: Props) {
                 {directoryLink ? (
                   <Link
                     href={directoryLink}
-                    className="font-medium text-[#F8FAFC] hover:text-cyan transition-colors truncate"
+                    className="font-medium text-foreground hover:text-cyan transition-colors truncate"
                   >
                     {sub.name}
                   </Link>
@@ -97,12 +97,12 @@ export function RecentSubmissions({ submissions }: Props) {
                     href={sub.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="font-medium text-[#F8FAFC] hover:text-cyan transition-colors truncate"
+                    className="font-medium text-foreground hover:text-cyan transition-colors truncate"
                   >
                     {sub.name}
                   </a>
                 ) : (
-                  <span className="font-medium text-[#F8FAFC] truncate">
+                  <span className="font-medium text-foreground truncate">
                     {sub.name}
                   </span>
                 )}
diff --git a/src/components/recently-viewed.tsx b/src/components/recently-viewed.tsx
index d7a44b41..875ea240 100644
--- a/src/components/recently-viewed.tsx
+++ b/src/components/recently-viewed.tsx
@@ -13,9 +13,9 @@ export function RecentlyViewed() {
   }
 
   return (
-    <div className="bg-[#0a0a0a] border border-white/10 rounded-lg p-6">
+    <div className="bg-background border border-white/10 rounded-lg p-6">
       <div className="flex items-center justify-between mb-4">
-        <h2 className="text-lg font-semibold text-[#F8FAFC]">
+        <h2 className="text-lg font-semibold text-foreground">
           Recently Viewed
         </h2>
         {recentlyViewed.length > 0 && (
@@ -23,7 +23,7 @@ export function RecentlyViewed() {
             onClick={clearHistory}
             variant="ghost"
             size="sm"
-            className="text-xs text-white/60 hover:text-[#06D6A0] hover:bg-white/5 transition-colors"
+            className="text-xs text-white/60 hover:text-primary hover:bg-white/5 transition-colors"
           >
             Clear History
           </Button>
@@ -38,7 +38,7 @@ export function RecentlyViewed() {
             <li key={skill.slug}>
               <Link
                 href={`/skills/${skill.slug}`}
-                className="block text-sm text-[#06D6A0] hover:text-[#06D6A0]/80 transition-colors"
+                className="block text-sm text-primary hover:text-primary/80 transition-colors"
               >
                 🧰 {skill.name}
               </Link>
diff --git a/src/components/related-kits.tsx b/src/components/related-kits.tsx
index 90de2fc3..26b0a9ff 100644
--- a/src/components/related-kits.tsx
+++ b/src/components/related-kits.tsx
@@ -44,7 +44,7 @@ export function RelatedKits({ currentSkill, allSkills, maxResults = 5 }: Props)
 
   return (
     <section>
-      <h2 className="text-lg font-semibold text-[#F8FAFC] mb-4">
+      <h2 className="text-lg font-semibold text-foreground mb-4">
         🔗 Works well with
       </h2>
       <div className="grid gap-3">
diff --git a/src/components/security/security-checklist.tsx b/src/components/security/security-checklist.tsx
index ebc75a81..9378b41f 100644
--- a/src/components/security/security-checklist.tsx
+++ b/src/components/security/security-checklist.tsx
@@ -73,7 +73,7 @@ export function SecurityChecklist() {
   const completionPercentage = Math.round((checkedItems.size / checklistItems.length) * 100);
 
   return (
-    <Card className="bg-[#0f0f0f] border-white/10 p-8">
+    <Card className="bg-background border-white/10 p-8">
       <div className="mb-6">
         <h2 className="text-3xl font-semibold mb-2">Security Checklist for AI Agents</h2>
         <p className="text-gray-400">
@@ -103,7 +103,7 @@ export function SecurityChecklist() {
           <div
             key={item.id}
             onClick={() => toggleItem(item.id)}
-            className="flex items-start gap-4 p-4 rounded-lg border border-white/5 hover:border-[#06D6A0]/30 transition-all cursor-pointer group"
+            className="flex items-start gap-4 p-4 rounded-lg border border-white/5 hover:border-primary/30 transition-all cursor-pointer group"
           >
             <div className="flex-shrink-0 mt-1">
               {checkedItems.has(item.id) ? (
@@ -127,7 +127,7 @@ export function SecurityChecklist() {
       </div>
 
       {completionPercentage === 100 && (
-        <div className="mt-6 p-4 bg-[#06D6A0]/10 border border-[#06D6A0]/30 rounded-lg">
+        <div className="mt-6 p-4 bg-primary/10 border border-primary/30 rounded-lg">
           <p className="text-center font-semibold" style={{ color: '#06D6A0' }}>
             ✓ Excellent! All security checks completed.
           </p>
diff --git a/src/components/skill-reviews-section.tsx b/src/components/skill-reviews-section.tsx
index a3599844..b8be5cb5 100644
--- a/src/components/skill-reviews-section.tsx
+++ b/src/components/skill-reviews-section.tsx
@@ -169,7 +169,7 @@ export function SkillReviewsSection({
     <section className="mb-8" id="reviews">
       <div className="flex items-start justify-between gap-4 flex-wrap mb-3">
         <div>
-          <h2 className="text-lg font-semibold text-[#F8FAFC]">Reviews</h2>
+          <h2 className="text-lg font-semibold text-foreground">Reviews</h2>
           <div className="mt-1 flex items-center gap-3 flex-wrap text-sm text-muted-foreground">
             <div className="flex items-center gap-2">
               <Stars rating={computed.avg} />
@@ -224,7 +224,7 @@ export function SkillReviewsSection({
               <div className="flex items-start justify-between gap-4">
                 <div>
                   <div className="flex items-center gap-2 flex-wrap">
-                    <h3 className="text-sm font-semibold text-[#F8FAFC]">{r.title}</h3>
+                    <h3 className="text-sm font-semibold text-foreground">{r.title}</h3>
                     <Stars rating={r.rating} />
                   </div>
                   <div className="mt-1 text-xs text-muted-foreground">
@@ -243,7 +243,7 @@ export function SkillReviewsSection({
 
       <div className="mt-6">
         <div className="flex items-center justify-between flex-wrap gap-2">
-          <h3 id="write-review" className="text-sm font-semibold text-[#F8FAFC]">
+          <h3 id="write-review" className="text-sm font-semibold text-foreground">
             Write a review
           </h3>
           <Button
diff --git a/src/components/toast.tsx b/src/components/toast.tsx
index 4f69719b..670a3652 100644
--- a/src/components/toast.tsx
+++ b/src/components/toast.tsx
@@ -7,31 +7,31 @@ import { useToast, type Toast } from "@/contexts/toast-context";
 const toastConfig = {
   success: {
     icon: CheckCircle,
-    bgColor: "bg-[#06D6A0]/10",
-    borderColor: "border-[#06D6A0]",
-    iconColor: "text-[#06D6A0]",
-    progressColor: "bg-[#06D6A0]",
+    bgColor: "bg-primary/10",
+    borderColor: "border-primary",
+    iconColor: "text-primary",
+    progressColor: "bg-primary",
   },
   error: {
     icon: AlertCircle,
-    bgColor: "bg-[#EC4899]/10",
-    borderColor: "border-[#EC4899]",
-    iconColor: "text-[#EC4899]",
-    progressColor: "bg-[#EC4899]",
+    bgColor: "bg-aurora-pink/10",
+    borderColor: "border-aurora-pink",
+    iconColor: "text-aurora-pink",
+    progressColor: "bg-aurora-pink",
   },
   info: {
     icon: Info,
-    bgColor: "bg-[#3B82F6]/10",
-    borderColor: "border-[#3B82F6]",
-    iconColor: "text-[#3B82F6]",
-    progressColor: "bg-[#3B82F6]",
+    bgColor: "bg-electric-blue/10",
+    borderColor: "border-electric-blue",
+    iconColor: "text-electric-blue",
+    progressColor: "bg-electric-blue",
   },
   warning: {
     icon: AlertTriangle,
-    bgColor: "bg-[#F59E0B]/10",
-    borderColor: "border-[#F59E0B]",
-    iconColor: "text-[#F59E0B]",
-    progressColor: "bg-[#F59E0B]",
+    bgColor: "bg-solar/10",
+    borderColor: "border-solar",
+    iconColor: "text-solar",
+    progressColor: "bg-solar",
   },
 };
 
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index d0cb6e59..2a27ee87 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -17,7 +17,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
         checked={checked}
         onChange={(e) => onCheckedChange?.(e.target.checked)}
         className={cn(
-          "h-4 w-4 shrink-0 rounded border border-white/20 bg-[#0a0a0a] text-[#06D6A0] focus:outline-none focus:ring-2 focus:ring-[#06D6A0] focus:ring-offset-2 focus:ring-offset-[#0a0a0a] disabled:cursor-not-allowed disabled:opacity-50",
+          "h-4 w-4 shrink-0 rounded border border-white/20 bg-background text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         {...props}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index f9b0ae93..8851f910 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -56,7 +56,7 @@ const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
         className={cn(
           "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
           isActive
-            ? "bg-[#06D6A0] text-[#0a0a0a] shadow-sm"
+            ? "bg-primary text-background shadow-sm"
             : "text-white/70 hover:text-white hover:bg-white/10",
           className
         )}
diff --git a/src/lib/sanitize.ts b/src/lib/sanitize.ts
index 011254ca..68cb9dbc 100644
--- a/src/lib/sanitize.ts
+++ b/src/lib/sanitize.ts
@@ -47,7 +47,7 @@ export function renderCommentLineToHtml(line: string): string {
   processed = processed.replace(/\*(.+?)\*/g, "<em>$1</em>");
   processed = processed.replace(
     /`([^`]+)`/g,
-    '<code class="px-1.5 py-0.5 rounded bg-[#1A1F2E] font-mono text-[13px]">$1</code>'
+    '<code class="px-1.5 py-0.5 rounded bg-secondary font-mono text-[13px]">$1</code>'
   );
   processed = processed.replace(
     /\[([^\]]+)\]\(([^)]+)\)/g,